Creando una App de escritorio con Angular, Electron y Firebase Parte 3: Angular Material
No pensé que llegaría a una tercera parte de esta serie y me siento muy emocionado porque falta poco para culminar el proyecto, rápidamente haremos en este post dos cosas:
- Integrar Angular Material a nuestro proyecto.
- Crear e integrar todos los componentes con nuestro CRUD.
Entonces, ¿Qué es Angular material?
Angular material es una serie de componentes y estilos creados a partir de Material Design que nos ofrecen consistencia en el diseño, eficiencia y optimización para Angular.
Integrar Angular Material a nuestro proyecto.
Para empezar ejecutamos el siguiente comando:
npm install --save angular/material2-builds angular/cdk-builds angular/animations-builds// Para proyectos con Angular Devkit 6+ng add @angular/material
Importamos los módulos en nuestro app.module.ts y agregar estos a los imports, como vamos a usar muchos componentes y estos a su vez dependen de otros componentes, he creado un modulo llamado Material Module donde haremos todas estas importaciones.
Tan difícil como ejecutar
ng generate module modules/materialEstos son los componentes que he utilizado yo, vivimos en países libres (quiero creerlo) así que cada quién puede elegir los que quiera.
Ahora vamos a nuestro archivo styles.css he importamos alguno de los temas que nos ofrece Angular Material para lograr consistencia en el diseño, por ahora solo hay 4 disponibles pero puedes crear un tema personalizado.
- deeppurple-amber.css
- indigo-pink.css
- pink-bluegrey.css
- purple-green.css
Usaré indigo-pink.css,para más información leer aquí.
Nota: revisar en nuestras dependencias que esté instalado hammer.js sino sigue los siguientes pasos.
- Ejecuta
npm install --save hammerjs2. Importarlo en la ruta src y el archivo main.ts
Vamos muy bien hasta aquí, es muy común que en nuestras apps hagamos uso de iconos e incluso algunos componentes dependen de estos, así que vamos a importar Material Icons en nuestro archivo Index.html.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Excelente, ahora podemos usar Angular Material en nuestro proyecto.
Crear e integrar todos los componentes con nuestro CRUD
Esta es la parte más complicada de explicar, vamos a hacer toda la parte de la lógica para poder hacer todas las funciones del CRUD desde nuestros componentes.
Para continuar debemos crear 2 componentes adicionales los cuales he nombrado edit-patient.component y add-patient.component. Para que esta guía no se haga tan extensa he comentado todo el código.
Para que el Dialog cargue nuestro componente EditPatientComponent es necesario agregarlo en la sección de entryComponents y no en Imports de nuestro AppComponent. Nuestro HTML debería quedar algo así.
Nuestro add-pattient.ts nos permite añadir un nuevo paciente a nuestra BD mediante un formulario de registro.
En el html he utilizado un componente llamado Stepper para llenar el formulario de registro de un nuevo paciente.
En nuestro edit-patient debemos traer los datos del paciente para autocompletar con estos valores actuales nuestro formulario, hay diferentes maneras de hacerlo con @Input, @output o servicios. Si usas un modal lo más fácil es usar MAT_DIALOG_DATA para inyectar estos datos en nuestro componente, pero cualquier opción es válida o también consultar nuevamente la BD y traer los datos de ese documento con el ID.
Esta fue mi solución
Y en el HTML implementé lo siguiente
Conclusiones
Crear esta app no ha sido muy difícil pero si algo extenso, afortunadamente Angular Material nos da una mano para ahorrar la escritura de muchas líneas de código y nos aporta consistencia en los estilos, neustra app de escritorio debería lucir más o menos así:
npm run electron-build
