How to Build a Crypto Portfolio App with Ignite UI for Angular

Quería compartir contigo lo fácil que es crear Angular aplicación con nuestro Ignite UI for Angular conjunto de herramientas.

¿ Cuál es el propósito de esta aplicación?En primer lugar, demostrar nuestros componentes Angular.Segundo, es para demostrar un caso de uso real, y quería crear un sistema que rastree mi cartera de criptomonedas para controlar mis ganancias y pérdidas diarias.En cuanto a la tercera razón, demostrar el uso de diferentes técnicas regulatorias como el uso de Protectores, Tuberías y Plantillas Personalizadas con nuestros componentes y, por supuesto, el uso deFirebasepara el almacenamiento y autenticación de datos.

El tema tratará:

1. The use of Ignite UI Angular CLI
2. Servicios de datos, enrutamiento, plantillas, tuberías, etc.
3. El uso de operaciones de almacenamiento de datos, autenticación y CRUD de Firebase
4. API de Coinmarketcap para recuperar información histórica e en tiempo real sobre precios

 

Interfaz de línea Ignite UI

¡Vale, empecemos! Entonces, ¿has oído hablar deIgnite UI CLI? Sí, esto es algo real que hemos desarrollado y que te ayuda a crear Angular aplicaciones con un conjunto predefinido de componentes, ejecutando solo unos pocos comandos. Instalar todos los paquetes necesarios lleva menos de tres minutos y ejecutar el proyecto con la ayuda de nuestra línea de usuario, solo tienes que seguir nuestrapágina oficial deInicio.

Una vez completada la construcción de la app junto con la instalación de todos los paquetes necesarios, notarás que los componentes del cajón de navegaciónyde la cuadrículaya se han añadido y configurado. Lo mismo ocurre con las diferentes vistas responsivas, enrutamiento, estilos, importaciones de módulos, etc. – genial, ¿verdad?

export const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  ...
];

Vale, ¿qué sigue? Queremos que nuestra app muestre una variedad de cosas: queremos autenticación de usuarios, rastrear los cambios en los datos de criptomonedas y almacenar nuestro portafolio de criptomonedas en algún lugar. Para ello, Ignite UI for Angular proporciona todos los componentes adecuados de fábrica. Vamos a usarChartpara cambios históricos de datos y unaGridpara mostrar nuestro portafolio de criptomonedas y proporcionar la capacidad de añadir/actualizar/eliminar criptomonedas, así comoListyCard.

Para todos los requisitos anteriores, necesitamos obtener los datos de algún sitio, aquí es donde entra min-api.cryptocompare: es un servicio gratuito que proporciona información sobre todas las criptomonedas activas en una sola llamada.

export class BlockGridComponent implements OnInit, AfterViewInit{
  public remoteData: CoinItem[];
  ...

  ngAfterViewInit() {
    this.dataService.getData().subscribe(res => {
      this.remoteData = res;
    });
  ...
}

App Authentication 

A continuación he destacado algunos pasos que he seguido para configurar la autenticación de Firebase de la aplicación Crypto.AngularFireAuth se va a usar para la autenticación de usuarios y todas las acciones relacionadas como iniciar sesión y cerrar sesión. Este servicio de Firebase ofrece métodos para iniciar sesión con correo electrónico y contraseña, proveedor de autenticación de Google y proveedor de autenticación de Facebook. Para una explicación más detallada, recomiendo consultar elrepositorio oficial de Angular firebase y la documentación.

 

1. Set up a firebase project.
2. Ve a la pestaña de Autenticación y activa Google, Facebook y los proveedores de inicio de sesión de correo electrónico/contraseña.
3. Según los métodos, genera el ID de Facebook y más tarde OAuth redirige URI.
4. Añade reglas y publica los cambios.
5. Añade el firebaseConfig al proyecto Angular.
6. Crea componentes de Inicio de sesión, Registro y Correo electrónico. (código para todos)
7. Crea auth.service que gestione las redirecciones de usuarios registrados y no registrados (Guardias de ruta). Como puedes ver en el código (añadir código), la página del Portafolio solo es accesible para usuarios autorizados.

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private auth: AngularFireAuth, private router: Router, private route: ActivatedRoute) {}

    canActivate(route: ActivatedRouteSnapshot, routerState: RouterStateSnapshot): Observable<boolean> {
      return Observable.from(this.auth.authState)
        .take(1)
        .map(state => !!state)
        .do(authenticated => {
          if (!authenticated) {
            this.router.navigate([ '/login' ], {
              queryParams: {
                return: routerState.url
              }
            });
          }
      });
    }

}

Para más detalles, echa un vistazo al tema oficial de inicio de autenticación de Firebase​, y te garantizo que no tendrás ningún tipo de dificultad al configurarlo.

Almacenamiento de datos y operaciones CRUD

Para almacenar y actualizar datos, nuestra aplicación utilizaFirebase Realtime Database, que es una base de datos alojada en la nube, almacenada en JSON y sincronizada en tiempo real con cada usuario conectado. Todos los usuarios comparten en una instancia de base de datos en tiempo real y reciben automáticamente actualizaciones con los datos más recientes.

Leer y escribir datos es sencillo, y a continuación se muestran los pasos que puedes seguir para lograr operaciones CRUD:

• Crear un servicio separado para manipulaciones de datos
• Define la clase 'BlockItem' que se va a usar para obtener datos, añadir, actualizar y eliminar registros.
• Crea una lista que enlaza o recupere que devuelva un observable de datos como un array sincronizado de objetos JSON. Con metadatos (DBReference subyacente y clave de instantánea)

Para más información, consulta la documentación oficialde Fisestore.

¿Y qué hay de Grid CRUD? Sí, esto es posible con la ayuda del almacenamiento de datos de Firebase y nuestra excelenteAPI. Consulta este archivo para más información sobre cómo configurar tu plataforma Firebase, que podría proporcionarte capacidades para almacenamiento de datos, autenticación, etc.

public deleteRow(cell) {
  let blockItem = cell.row.rowData;

  // Detele item from AngularFireList
  this.deleteItem(blockItem);

  // Stores deleted item for the 'Restore' Snackbar logic 
  this.deletedItem = new BlockItem()
  Object.assign(this.deletedItem, blockItem);
  ...
  this.snack.show();
}

public updateRow(evt) {
  const rowItem = evt.rowID;
  rowItem.holdings = evt.newValue;

  this.updateItem(rowItem);
}

Full code here.

Configura todos los componentes que se van a usar en la aplicación

Los datos obtenidos se utilizan delosGráficos,Cuadrículas,Listas ycomponentes de Tarjetas (proporcionan código para cada uno).

Por ejemplo, el componente Card utiliza filtros de canales y ordenación de datos.

export class HomeComponent implements OnInit {
   cryptos: CoinItem[];
   public searchValue: string;

   constructor(private data: DataService, private router: Router) { }

   ngOnInit() {
      this.loadData();
   }

   private loadData() {
      this.data.getData()
         .subscribe(res => {
            this.cryptos = sortDataByKey(res, 'rank');
         });
   }

   get filterOptions() {
      const fo = new IgxFilterOptions();
      fo.key = 'fullName';
      fo.inputValue = this.searchValue ? this.searchValue : '';
      return fo;
   }
... 

Revisa el código para ver cómo está vinculado cada uno de los componentes.

Red

Esta es la página principal que se va a utilizar para manipular datos y hacer seguimiento de los cambios de precio. Vamos a definir una cuadrícula con cinco columnas (el número depende del tamaño de pantalla) y cada columna tendrá su propia plantilla ng para la representación de datos. Esto incluye imágenes, iconos para movimientos de precios y el uso detuberías decimales.

Los botones de acción sobre la cuadrícula gestionan la actualización manual de datos y la incorporación de nuevas monedas.igxDialog se va a usar para ese propósito. Se aplica una validación mínima de las monedas. Por ejemplo, no podrás añadir monedas ya existentes o monedas que no estén presentes en la API de coinmarketcap. Cada mensaje de notificación se mostrará a través deigxSnackBar.

Para las actualizaciones de la retención de monedas, vamos a manejar (onEditDone) y a partir de ahí usar los métodos que definimos enBlockItemService. Lo mismo ocurrió con los botones de 'eliminar' y 'añadir' monedas.

<igx-grid #grid1 [data]="blockItems" width="100%" height="500px" toolbarTitle="My portfolio"
   (onCellEdit)="updateRow($event)" (onSelection)="selectCell($event)" [showToolbar]="true" 
   [columnHiding]="true" [columnPinning]="true">
   ...
   <igx-column field="holdings" header="Holdings" editable="true" sortable="true">
      <ng-template igxCell let-cell="cell" let-ri="rowIndex" let-column="column">
         <div class="positionTop">
            ${{ calculateHoldings(cell.row.rowData.holdings, cell.row.rowData.price) | number:'0.2-2' }}
            <br />
            <b>{{ cell.row.rowData.holdings | number:'1.0-7' }}</b>
         </div>
      </ng-template>
   </igx-column>
   ...
   <igx-column header="Actions">
      <ng-template igxCell let-ri="rowIndex" let-column="column">
         <span igxButton="icon" igxRipple (click)='deleteRow()'>
            <igx-icon>highlight_off</igx-icon>
         </span>
      </ng-template>
   </igx-column>
</igx-grid>

Cuadro

Este componente se utilizará para representar visualmente los cambios diarios del precio de la moneda. NuestroigxFinancialChart es fácilmente configurable, ya que solo tienes que pasar los datos obtenidos a "dataSource" y, voilà, todo lo demás será gestionado por el gráfico. Además, el gráfico respeta la estructura general de datos financieros.

     <igx-financial-chart [dataSource]="data" height="400px" width="100%" style="margin-top: 20px;" isToolbarVisible="false" chartType="candle">
      </igx-financial-

Un aspecto interesante que debería mencionarse es el uso de rutas para pasar datos entre vistas. La página de Estadísticas está accesible a través de un par de Vistas que pasan diferentes nombres de monedas para cargarlos en la gráfica.

Lista y tarjeta

Los componentes IgxList eIgxCard se utilizan para mostrar una representación visual diferente de todas las propiedades asociadas a los elementos devueltos.

En resumen, todo es posible con las herramientas adecuadas y, dicho esto, deberías considerar usar nuestroscomponentes Ignite UI for Angularpara tu próxima aplicación web/móvil.

Repositorio de GitHub y aplicación alojada.