Dynamic React Gallery
Aplicación web realizada en React que partiendo de un fichero *.json completa dinámicamente todo su contenido. Generando una galeria de imágenes divididas por categorias.
El código se encuentra subido en el siguiente repositorio:
https://github.com/roberto-pf/DynamicReactGallery
Se ha generado la documentación mediante Compodoc y puede consultarse la documentación aquí:
https://roberto-pf.github.io/DynamicReactGallery/
Demo funcionando en este enlace: http://gallery-react.disastercode.com.es
Resumen generación de documentación con Compodoc para Angular 10
Compodoc facilita la generación de la documentación de tu proyecto de Angular. A continuación, voy a exponer un resumen de como utilizarlo.
1 – Instalación
npm install -g @compodoc/compodoc
2 – Añadir en package.json el comando que lo ejecuta.
"scripts": { "compodoc": "npx compodoc -p tsconfig.app.json" //En angular 10 tuve que poner tsconfig.base.json para //que me generase bien la documentación. }
3 – Ejecutar la creación de la documentacion
npm run compodoc
————————————————————————
Aunque hay muchas más, como se puede ver en la documentación que facilita la gente de Compodoc. Algunas de las opciones que se puede ir añadiendo al comando de ejecución son:
-d ---------> directorio destino -o ---------> abre automáticamente la documentación en el navegador -s ---------> levanta el servidor de node --theme -----> selecciona el tema --includes --> documentacion adicional. Se pone el directorio del summary.json. Se crean ficheros md. https://docs.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax -w ---------> detecta los cambios en el código y actualiza la documentación. --customFavicon -> cambia el favicon. --hideGenerator -> oculta el logotipo de compodoc. -y ----------> hoja de estilos propia para compodoc. Se le indica un directorio donde haya un style.css.
El comando de generación añadiendo todos esos flags quedaría así:
"compodoc": "npx compodoc -p tsconfig.base.json -d docs -o -s --theme vagrant --includes ./aditionaldoc -w --customFavicon ./src/favicon.ico --hideGenerator -y ./src/assets/cssCompodoc"
————————————————————————
Los comentarios deben añadirse así:
- Documentar un método, variable, componente,.... /** * */ - Documentar parámetro de un método /** * @param variable */ - Documentar retorno de un método /** * @returns */ - Ignorar en la documentacion para que no salga /** * @ignore */ - Ejemplo de uso de un componente u otro objeto. /** * @example * */
. Se puede comprobar el nivel de comentarios añadidos en la sección de cobertura de código que te genera.
– Excluir en el tsconfig.base.json los ficheros que no queremos que se revisen. Así no saldrán en la cobertura.
"exclude": [ "src/test.ts", "e2e/**" ]
Dynamic Angular Gallery
Aplicación web realizada en Angular 10 que partiendo de un fichero *.json completa dinámicamente todo su contenido. Generando una galeria de imágenes divididas por categorias.
El código se encuentra subido en el siguiente repositorio:
https://github.com:roberto-pf/DynamicAngularGallery
Se ha generado la documentación mediante Compodoc y puede consultarse la documentación aquí:
https://roberto-pf.github.io/DynamicAngularGallery/
Demo funcionando en este enlace: http://gallery.disastercode.com.es
Además, se ha generado una rama swiperjs_version en el repositorio. En dicha rama, la presentación de las imágenes se realiza con el componente Swiperjs
Demo funcionando en este enlace: http://galleryswiper.disastercode.com.es
Ejemplo para creación de Pipe personalizado en Angular
Primero vamos a crear un Pipe llamado NewLine con el comando ng que lo que va a hacer es sustituir los saltos de linea por saltos html.
//Comando de creación Pipe ng g pipe pipes\NewLine //código de la clase import { Pipe, PipeTransform } from '@angular/core'; /** * Pipe que convierte los saltos de linea en saltos html. */ @Pipe({ name: 'newLine' }) export class NewLinePipe implements PipeTransform { /** * Metodo que realiza la transformación * @param value * @param args */ transform(value: string, args: string[]): any { return value.replace(/(?:\r\n|\r|\n)/g, ' '); } }
Ejemplo de uso:
< div [innerHtml]= "description | newline"> < /div >
Quitar la URL Case Sensitive en el Router de Angular
Para evitar que en Angular (probado en angular 10) el Router no haga diferenciacion de las rutas en función de si está en mayúsculas/minúsculas, una posible solución es la siguiente:
En el fichero module.app.ts añadimos lo siguiente:
import { UrlSerializer } from '@angular/router'; import { LowerCaseUrlSerializer} from './lower-case-url-serializer' ... providers: [HttpClientModule, { provide: UrlSerializer, useClass: LowerCaseUrlSerializer }], ...
Y debemos crear la clase definida antes (LowerCaseUrlSerializer). Esta clase debe extender de DefaultUrlSerializer e implementar el método parse. En ese método lo que se puede hacer es pasar toda la url a minúsculas.
import { DefaultUrlSerializer, UrlTree } from '@angular/router'; /** * Elimina el case-sensitive de la url pasándola a minúsculas. */ export class LowerCaseUrlSerializer extends DefaultUrlSerializer { /** * Método que realiza la conversión de la url a minúsculas. * * @param url - dirección a tratar. */ parse(url: string): UrlTree { return super.parse(url.toLowerCase()); } }
Leer fichero json local con Angular
Un ejemplo de como se puede acceder a un fichero *.json ubicado en local con Angular (probado con angular 10) es el siguiente:
//Contenido del fichero data.json { "titleSite" : "Dynamic Angular Gallery", "descriptionSite" : "Galeria dinámica en angular 10+" }
import { Injectable } from '@angular/core'; import webData from '../../../_files/data.json'; /** * Servicio que realiza el acceso a la información del data.json. */ @Injectable({ providedIn: 'root' }) export class JsonDataService { /** * Objeto en el que se va a volcar la información del fichero data.json. */ public info:{ titleSite:string, descriptionSite:string, } = this.getInfoJson(); /** * Método que devuelve el contenido del fichero data.json * @returns - data.json */ public getInfoJson(){ return webData; } }
Por defecto, Angular no lee el archivo JSON. Así que debemos crear un archivo llamado ‘json-typings.d.ts’ dentro de la carpeta de la aplicación del proyecto. Tal que así:
declare module "*.json" { const value: any; export default value; }
Ahora para recuperar el contenido del fichero simplemente seria invocar al servicio JsonDataService y la variable info.
Añadir a angular las dependencias de Bootstrap y FontAwesome
Bootstrap
Para instalar el framework de Bootstrap la forma más rápida es mediante npm. Con el comando siguiente:
npm install bootstrap jquery @popperjs/core
Mediante este comando se instalan las dependencias de bootstrap, jquery y de @popperjs/core que son necesarios para mejorar el funcionamiento de Bootstrap.
Para su uso basta con referenciar en el archivo angular.json los objetos styles y scripts de dichas dependencias.
"styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.scss" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/@popperjs/core/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ]
FontAwesome
Esta fuente se instala con npm así:
npm install @fortawesome/angular-fontawesome@version //Adicionalmente se pueden instalar otros iconos que contiene. //Por ejemplo: free-solid-svg-icons npm install @fortawesome/free-solid-svg-icons //O tambien, free-brands-svg-icons, usando ng ng add @fortawesome/free-brands-svg-icons
Para usarla simplemente se realizan los imports necesarios.
... import { FaIconLibrary } from '@fortawesome/angular-fontawesome'; import { fas } from '@fortawesome/free-solid-svg-icons'; import { fab } from '@fortawesome/free-brands-svg-icons'; /** * Componente principal * * @example * */ @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { /** * constructor del componente * @param libray - librería de iconos */ constructor( private library: FaIconLibrary) { /** * añadir a la libreria de iconos los que vamos a necesitar. */ library.addIconPacks(fas, fab); } ... } //Su uso sería tal que así: < fa-icon [icon]="['fas', 'star']">< /fa-icon> < fa-icon [icon]="['fab', 'twitter']">< /fa-icon>
Git – Manejo de ramas con rebase
1/ Creamos un repositorio de trabajo local vacío, llamado prueba.
git init prueba
2/ Ahora dentro del directorio prueba que se nos ha creado podemos ir añadiendo nuestros ficheros de código.
3/ Creamos una rama prueba_rama y realiza el checkout dicha rama.
git checkout -b prueba_rama < commit_id >
4/ añadimos commits a esa rama.
5/ Ahora podemos realizar el merge entre las dos ramas. Por ejemplo, situados en la rama prueba_rama le integramos con el rebase la master:
git checkout prueba_rama //Realiza el rebase git rebase master //si hay conflictos debemos resolverlos y luego dar a continuar el rebase. git rebase --continue
6/ Por último vamos a añadir un commit a la master con lo que tenemos en la rama. Para ello, situados en la rama master ejecutamos el merge:
git checkout master //Realiza el rebase git rebase prueba_rama
Git – Problema acceso denegado.
Suele pasar cuando se tienen varias cuentas distintas.
Si al intentar acceder a una cuenta remota de Git (ya sea en github u otro sitio) nos da error de acceso denegado podemos solucionarlo así:
git config --global --edit
Y añadir estas líneas de configuración al final de fichero.
[credential] helper = osxkeychain useHttpPath = true
Git – Manejo de ramas con merge
1/ Creamos un repositorio de trabajo local vacío, llamado prueba.
git init prueba
2/ Ahora dentro del directorio prueba que se nos ha creado podemos ir añadiendo nuestros ficheros de código. Tenemos un par de comandos interesantes que podemos utilizar:
//Conocer el estado de los ficheros git status //Ver el histórico de commits git log --oneline //Muestra las diferencias con el commit anterior git diff < commit_id1 > < commit_id2 >
3/ Creamos una rama prueba_rama y realiza el checkout dicha rama.
git checkout -b prueba_rama < commit_id > //subir la rama al repositorio remoto git push --set-upstream origin prueba_rama //Podemos ver la ramas existentes git branch -v //Muestra el histórico de todas las ramas. git log --oneline --all
4/ añadimos commits a esa rama.
5/ Ahora podemos realizar el merge entre las dos ramas. Por ejemplo, situados en la rama prueba_rama le integramos con el merge la master:
git checkout prueba_rama //Realiza el merge git merge master //si hay conflictos debemos resolverlos y luego dar a continuar el merge. git merge --continue //Deshace el merge en curso, útil si hay conflictos. git merge --abort //Muestra la historia de integraciones de todas las ramas. git log --oneline --graph --all
6/ Por último vamos a añadir un commit a la master con lo que tenemos en la rama. Para ello, situados en la rama master ejecutamos el merge:
git checkout master //Realiza el merge git merge prueba_rama
Categorias
- adobe (2)
- agile (1)
- Alfresco (1)
- Android (26)
- Angular (6)
- angularjs (10)
- apache (1)
- axis (2)
- Bases de datos (14)
- Bootstrap (1)
- C# (3)
- Cámara (1)
- chrome (3)
- Codeigniter (2)
- Control de Versiones (2)
- CSS (25)
- CVS (1)
- Django (9)
- Django Rest Framework (1)
- DNS (1)
- Docker (3)
- dominio (1)
- eclipse (5)
- Entity Framework (2)
- ETL (1)
- Firefox (6)
- flash (1)
- freecad (1)
- Git (12)
- GitHub (4)
- gpg (2)
- Groovy (1)
- Handlebars (1)
- hibernate (4)
- hosting (1)
- HTML (50)
- HTML 5 (26)
- Impresión 3D (9)
- Inkscape (1)
- IOS (2)
- ireports (3)
- Java (44)
- Javascript (55)
- JBoss (5)
- JPA (2)
- JQuery (20)
- Json (7)
- JSP (6)
- Keycloak (1)
- Lamp (1)
- LDAP (2)
- lean (1)
- linkedin (1)
- LINQ (1)
- linux (13)
- Livecycle (1)
- log (1)
- microcontroladores (1)
- MongoDB (4)
- MySQL (8)
- Node.js (5)
- OC4J (1)
- Openshift (2)
- Oracle (6)
- Patrones de Diseño (1)
- Photoshop (2)
- php (20)
- PostgreSQL (1)
- python (19)
- rabbitmq (1)
- Raspberry PI (13)
- Raspherry PI (5)
- React (6)
- seguridad (3)
- Selenium (3)
- Sencha Touch (1)
- Sin categoría (29)
- Spring (17)
- spring-boot (3)
- SQL (7)
- SQLServer (1)
- SSO (1)
- struts (2)
- SVN (1)
- Talend (1)
- Tomcat (6)
- unity (3)
- Visual Studio Code (2)
- vmware (5)
- Web Services (11)
- windows (18)
- wordpress (10)
- Xiaomi (1)
- xml (2)
Trabajos Realizados
- App Android – Autoka Fr
- App Android – Cartelera Cántabra
- App Android – Gramática y Vocabulario Ingles
- App Android – Hoja de Gastos
- App Android – Hotel Torre Cristina
- App Android – OcioEnjoy
- App Android – Visor CardBoard
- App Firefox – Managapp
- DiamanteBomba – DisasterCode
- Generador de Partes de Trabajo
- GitHub – Android Web Generator
- GitHub – Dynamic Angular Gallery
- GitHub – Dynamic React Gallery
- GitHub – Sotilizator
- GitHub – SpringAngularJS
- GitHub – Swiper Dynamic Angular Gallery
- HazParejas – DisasterCode
- RompeCabezas – DisasterCode
- Unity Game – English Couple
- Unity Game – Kill Wasp
- WordPress – El Buen Apicultor
- WordPress – El Cajón de los Retales
- WordPress – El Vestidito Azul
- WordPress – Feuchas
- WordPress – Fragua de Navajas Ponce
- WordPress – Humor a las Tres
- WordPress – Photo Places