Creando una App de escritorio con Angular, Electron y Firebase Parte 3: Angular Material

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:

  1. Integrar Angular Material a nuestro proyecto.
  2. 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.

Importación de módulos de Angular Material

Tan difícil como ejecutar

ng generate module modules/material

Estos son los componentes que he utilizado yo, vivimos en países libres (quiero creerlo) así que cada quién puede elegir los que quiera.

Componentes de Angular Material usados por mí

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.

  1. Ejecuta
npm install --save hammerjs

2. 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.

https://gist.github.com/KevinMalo/979edb28cb677b77d7ecf017fc9caf6e

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í.

https://gist.github.com/KevinMalo/3e7ffdacc0da4626a6de8279aff7d668

Nuestro add-pattient.ts nos permite añadir un nuevo paciente a nuestra BD mediante un formulario de registro.

https://gist.github.com/KevinMalo/c413827510231ee36da07562586b81e7

En el html he utilizado un componente llamado Stepper para llenar el formulario de registro de un nuevo paciente.

https://gist.github.com/KevinMalo/b02d77418e5805a740cfcd9347917c8f

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.

Autocompletado

Esta fue mi solución

https://gist.github.com/KevinMalo/71c0f4d0a62ce41ead80dde1f8496a25

Y en el HTML implementé lo siguiente

https://gist.github.com/KevinMalo/2e82e39eddef2d77d8d6a692b4fe6a36

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

App electron.

--

--

--

光 — Nobody said it would be easy, mijo.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kevin Andrey Bueno Solano

Kevin Andrey Bueno Solano

光 — Nobody said it would be easy, mijo.

More from Medium

Introduction to building Ionic 6 Angular App with NX monorepo (Part 1)

Knowing the differences between Angular vs Angular JS

List animation in Ionic 6 & Angular

Article Preview Image

How to Deploy and Host Angular 🅰️ Micro Frontend for FREE Using Firebase 🔥