Durante mucho tiempo, estuve buscando una buena aplicación web Portfolio que pudiera ayudarme a rastrear fácilmente mis ganancias / pérdidas de criptomonedas hasta que decidí desarrollarla por mi cuenta con la ayuda de Firebase y Angular . Sí, es así de fácil, déjame explicarte por qué.

Firebase brinda las herramientas perfectas para aplicaciones con autenticación de usuario y necesidades de almacenamiento de bases de datos en tiempo real. Proporciona documentación rica con una variedad de ejemplos de desarrollo para ayudar a cualquiera a comprender mejor cómo crear aplicaciones estelares.

Cubrí el arranque de la aplicación Angular , usando Ignite UI CLI, en otra publicación de blog.

Este artículo tiene como objetivo:

• Realice la instalación y configuración de Firebase.
• Configura la autenticación de Firebase.
• Implemente el almacenamiento y la sincronización de la base de datos en tiempo real.
• Agregue servicios de datos observables.
• Visualice los datos en una aplicación Angular.

Configurar una cuenta de Firebase

Quiero seguir los pasos que hemos seguido para configurar la cuenta de Portfolio Firebase. Los proyectos se crean desde la consola de Firebase al elegir Agregar un nuevo proyecto. Una vez enviado el formulario Crear proyecto , verá la siguiente descripción general del proyecto.

En la sección Descripción general del proyecto, puede encontrar todas las herramientas de desarrollo que se utilizan para la autenticación y el almacenamiento de datos. Aquí también se encuentra la configuración que se utiliza en la aplicación web Portfolio. Esta configuración se genera presionando Agregar Firebase a su aplicación web , y luego se agrega en el archivo app.module.ts de la aplicación .

Volvamos a la barra lateral de la izquierda y seleccione Autenticación . Desde aquí tenemos acceso a los métodos de inicio de sesión que necesitamos en la aplicación. Navegue a la pestaña Iniciar sesión, allí puede ver los proveedores que están habilitados y utilizados en la aplicación Portfolio: Google, Facebook y el proveedor de correo electrónico / contraseña .

Los proveedores de inicio de sesión permiten a los usuarios autenticarse con Firebase usando sus cuentas de Facebook y Google integrando sus inicios de sesión en la aplicación. En cuanto al proveedor de correo electrónico / contraseña, representa un mecanismo de autenticación simple utilizando solo correo electrónico y contraseña. Firebase Auth proporciona reglas de validación integradas que verifican las entradas del usuario, por lo que no necesitamos configurar algo adicional aquí.

La parte "más complicada" aquí fue la configuración del proveedor de Facebook porque necesitábamos tener una aplicación de Facebook para autenticar el inicio de sesión. Hemos creado una aplicación FB de los desarrolladores de Facebook que nos proporcionó el ID de la aplicación y el secreto de la aplicación solicitados a Firebase.

Tanto el ID de API como el secreto deben completarse al habilitar el proveedor de Facebook. En cuanto al URI de redirección de autenticación (desde la ventana del proveedor), debe pegarse debajo Facebook/Facebook Login/Products section/Valid Auth Redirect URIs.

Continuemos con la consola de Firebase. Desde la página de vista de la base de datos, hemos creado una base de datos en tiempo real.

En esta vista, podemos encontrar información sobre los elementos de datos de la aplicación y las reglas de seguridad de escritura / lectura. A continuación se muestran las reglas utilizadas por la aplicación Portfolio:

{ "rules": { "items": { "$uid": { ".read": "$uid === auth.uid", ".write": "$uid === auth.uid" } } }}

Esta configuración de Regla de seguridad permitirá que solo los usuarios autenticados puedan leer y escribir en nuestra base de datos. Si desea aprender a definir reglas más avanzadas, le recomiendo que consulte la sección Seguridad y reglas oficiales.

Vale, ¿dónde estábamos? Ahora que hemos pasado por la creación de la cuenta de Portfolio Firebase , veamos cómo se creó el proyecto de desarrollo de Firebase .

Si aún no tuviéramos un proyecto creado, habría recomendado comenzar con la instalación de la CLI de firebase, que proporciona una variedad de herramientas para administrar e implementar proyectos de Firebase. PERO hemos iniciado el proyecto Portfolio Angular Project con Ignite UI CLI, por lo que solo necesitábamos instalar AngularFire y Firebase desde npm . Necesitamos ambos paquetes para comunicarnos con Firebase. AngularFire es la biblioteca oficial para el desarrollo de Firebase y Angular.

npm install firebase @angular/fire --save

Todos los módulos de AngularFire que se utilizan en la aplicación se agregan en el app.module.tsarchivo:

• FirestoreModule es necesario para las funciones de la base de datos, como trabajar con colecciones, consultas y servicios para la transmisión y manipulación de datos.
• FireAuthModule esnecesario para funciones de autenticación como monitorear el estado de autenticación, proveedores de inicio de sesión y seguridad.
• FireDatabaseModule nos permite trabajar con bases de datos en tiempo real. Es muy eficiente para aplicaciones web y móviles que requieren estados sincronizados entre clientes en tiempo real.

El único módulo común que no se utiliza en la aplicación Portfolio es AngularFireStorageModule. Puede utilizar este módulo para almacenar y servir rápida y fácilmente contenido generado por el usuario como fotos y videos, así como monitorear cargas y metadatos asociados con archivos.

Ahora que sabemos cómo se configuró la aplicación inicialmente, podemos echar un vistazo a las otras funciones de Firebase que se utilizan.

Autenticación

UsamosAngularFireAuth Serviciopara monitorear el estado de autenticación de la aplicación. AngularFireAuth.authdevuelve una firebase.auth.Authinstancia inicializada , lo que nos permite iniciar y cerrar la sesión de los usuarios. La aplicación demuestra las capacidades de inicio de sesión con tres proveedores: Facebook, Google y correo electrónico.

La instancia de usuario de Firebase se mantiene para cada proveedor vinculado al usuario, y cuando un usuario se registra o inicia sesión, ese usuario se convierte en el usuario actual de la instancia de Auth. La instancia conserva el estado del usuario para que actualizar la página o reiniciar la aplicación no pierda la información del usuario.

Usamos el signInWithRedirectmétodo para proveedores de Facebook y Google, para iniciar sesión redirigiendo a la página de inicio de sesión. La creación de cuentas basada en contraseña se utiliza para el proveedor de inicio de sesión de correo electrónico,createUserWithEmailAndPasswordy signInWithEmailAndPasswordson los métodos responsables de la creación de la cuenta de usuario y el inicio de sesión.

Recomiendo los documentos oficiales de Firebase para obtener información más detallada sobre la autenticación y el ciclo de vida del usuario.

Acciones de base de datos en tiempo real

Firebase ofrece dos soluciones de base de datos accesibles para el cliente y basadas en la nube, y estamos utilizando la base de datos original de Firebase: Realtime. Consulte las diferencias entre Realtime y Cloud firestore en la página de documentación oficial.

AngularFireDatabasey AngularFireListLos servicios se utilizan en la aplicación Portfolio para recuperar, guardar y eliminar datos fácilmente.

AngularFireDatabasese puede inyectar a través del constructor de un componente o @Injectable()Servicio. En nuestro caso utilizamos el segundo enfoque:

Los datos se recuperan a través del AngularFireDatabaseservice, que llena la lista observable de BlockItems.AngularFireproporciona métodos como snapshotChanges()ese devuelve Observable de datos como una matriz sincronizada. Es muy útil si desea limitar las acciones de eventos, como agregar , cambiar , eliminar y mover . De forma predeterminada, escucha los cuatro, sin embargo, es posible que solo esté interesado en uno de estos eventos y puede especificar cuál de ellos le gustaría usar. En nuestra aplicación, estamos suscritos a todos ellos.

La adición de un nuevo elemento, la actualización de uno ya existente, o quitarlo de la lista se logra mediante el uso push(), update()y remove()métodos.

Cada método de operación de datos devuelve una promesa, aunque no necesitamos usar la promesa de finalización para indicar el éxito porque la base de datos en tiempo real mantiene la lista sincronizada.

Observables

Servicio CoinItem

El servicio de API Cryptocompare gestiona datos asíncronos y emite varios valores a la vez con Observables. Usamos el HttpClient get()método para solicitar los datos del recurso y suscribirnos a él, para transformarlo en Matriz observable deCoinItemLos objetos, que será utilizado más tarde por nuestras igxGrid, igxListy igxCardcomponentes.

Rx.js nos permite almacenar en caché el resultado de la solicitud HTTP. Inicialmente recuperamos estos datos, los almacenamos en caché y usamos la versión en caché durante la vida útil de la aplicación. La combinación de publishReply(1, 300000)y refCount()hace lo siguiente.

publishReply (1, 300000) le dice a Rx que almacene en caché el último valor emitido y que sea válido durante 5 minutos. Después de ese tiempo, invalidará la caché. refCount () le dice a Rx que mantenga el Observable vivo mientras haya suscriptores.

Ahora, después de suscribirnos a la lista de monedas, el resultado se almacenará en caché y no tendremos que realizar otra solicitud HTTP.

Servicio BlockItem

Los datos de la cartera Crypto Coins están asegurados por un getItemsList()método que devuelve una BlockItemmatriz observableal que igxGridestá suscrito el componente. Solo los usuarios autenticados pueden usar este servicio debido a AngularFireListque manipulamos está asociado con ID de usuario únicos.

Visualiza los datos

Para la visualización, usamos componentes de interfaz de usuario de Ignite UI para Angularlibrary. Estos componentes son responsables del manejo de datos al mismo tiempo que brindan acceso a plantillas personalizadas y actualizaciones en tiempo real, con API intuitiva, utilizando una cantidad mínima de código.

igxGrid

El [data]enlace de propiedad de Grids se usa para pasar la BlockItemmatriz devuelta . Cadamn> represents a field of the object and it is used to define features like editing and sorting. The columns are templatable, and with the help of Angular pipes, we can declare display-value transformations in them easily. We use a decimal pipe to change the minimum number of integer digits before the decimal point.

The component provides straightforward event handlers and API for CRUD operations. Handlers like updateRow and deleteRow are implementing additional logic like AngularFireList manipulation and coin item restore logic with the igxSnackbar.

igxCard

Cards are used to provide general information of Crypto coins using CSS Flexbox layout. These Card components can be filtered with the igxFilter directive, which can be used to filter different data sources. igxFilter can be applied as a pipe or as a directive.

igxFinancialChart

The Chart offers multiple ways in which the data can be visualized and interpreted, once it is returned by the service. There are several display modes for price and volume, and in our case we use chartType=”candle”.

The financial chart component analyzes and selects data columns automatically:

- Date/Time column to use for x-axis

- Open, High, Low, Close, Volume columns or the first 5 numeric columns for y-axis

Theming

IgniteUI for Angular bases its component designs on the Material Design Principles and with just a few lines of code, we can easily change the colors, sizes, typography, and overall look and feel of our components.

Now that we’ve provided all base definitions needed for the igx-theme, and have configured the igx-dark-theme mixin, we need to only apply .light-theme and .dark-theme CSS classes somewhere at DOM element root level and toggle it on button click.

Result

Wrapping up

Everything is possible with the right tooling. We have created a Portfolio Web application using the full power of the Angular Framework, Firebase Authentication services, and Cloud Database store/synchronization.

You can find the GitHub repository and the actual portfolio application here.

Feel free to share in the comments below any questions that you have, suggestions as to what can be improved or changed in the app, or any problems that you’ve encountered while configuring your Firebase account or application.