Guía 17

DAWM / Proyecto04

Objetivo general

Desarrollar una aplicación híbrida utilizando tecnologías que integren modelos de aprendizaje automático previamente entrenados en un entorno funcional y accesible para resolver problemas específicos mediante el reconocimiento de patrones, objetos o sonidos fomentando habilidades prácticas en el desarrollo de aplicaciones móviles con tecnologías modernas y la implementación de inteligencia artificial.

Actividades previas

1. En Firebase, cree el proyecto hybrid
2. Agregue el servicio Realtime Database
3. Agregue la clave collection
4. Modifique las reglas de acceso para el acceso permanente.
5. Verifique el endpoint de la colección, p.e.: https://hybrid-ff472-default-rtdb.firebaseio.com/collection.json

Actividades en clases

1. Clone localmente tu repositorio hybrid.

2. Abra el proyecto en VSCode y levante el servidor.

    ionic serve
   

Interfaz de Tipo de Datos

1. Cree una interfaz de Angular, con:

    ionic g interface interfaces/data
   

2. Modifique hybrid/src/app/interfaces/data.ts, con:

    export interface Data {
        texto: string;
    }
   

Servicio Proveedor de Datos

1. Cree el servicio proveedor de datos, con:

    ionic g service services/provider
   

2. Edite el servicio hybrid/src/app/services/provider.service.ts, con:

    import { Injectable } from '@angular/core';
   
    /* 1. Importe el módulo del HttpClient */
    import { HttpClient } from '@angular/common/http';
   	
    ...
    export class ProviderService {
   
        /* 2.Atributo URL */
        private URL: string = 'https://<NOMBRE_DEL_PROYECTO>.firebaseio.com/collection.json';
   
        /* 3. Inyección de dependencia del HttpClient */
        constructor(private http:HttpClient) { }
   
        /* 4. Método con la petición HTTP */
        getResponse() {
            return this.http.get(this.URL);
        }
   
        /* 5. Método con la petición HTTP */ 
        postResponse(data: any) {
            return this.http.post(this.URL, data);
        }
   
    }
   

Consumo de Servicio

• Modifique el archivo hybrid/src/app/tab1/tab1.page.ts, con:

  • Importe los módulos

    ...
  
    /* 1. Importe el módulo con la directiva @ngFor */
    import { CommonModule } from '@angular/common'
  
    /* 2. Importe los componentes de la UI */
    import {
      ...
      IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCardContent,
      IonInput, IonButton,
      IonLabel, IonList, IonItem
    } from '@ionic/angular/standalone';
  
    /* 3. Importe del método http */
    import { HttpClientModule } from  '@angular/common/http';
  
    /* 4. Importe de la interfaz */
    import { Data } from '../interfaces/data';
  
    /* 5. Importe del servicio */
    import { ProviderService } from '../services/provider.service';
  
    /* 6. Importe lo constructores de formulario */
    import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
  
    @Component({ ... })
    ...
  

  • Registre los módulos importados y el proveedor de servicios.

    ...
    @Component({
      ...
      standalone: true,
      imports: [
      	...
  	  	
  
        /* 7. Registre todos los componentes importados */
        HttpClientModule, ReactiveFormsModule,
        CommonModule, 
        IonLabel, IonList, IonItem,
        IonInput, IonButton,
        IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCardContent
      ],
  
      /* 8. Proveedor de servicios */
      providers: [ProviderService],
      ...
    })
    export class Tab1Page { ... }
  

  • Defina el atributo data y el formulario checkoutForm.

    ...
    export class Tab1Page {
  
      /* 9. Atributo con el tipo de dato de la interfaz */
      public data : Data[] = [];
  
      /* 10. Formulario reactivo */
      checkoutForm = this.formBuilder.group({
        texto: ''
      });
  	  
      ...
    }
    ...
  

  • Inyecte la dependencia al servicio y al constructor del formulario en el constructor del componente seleccionado para mostrar los datos.

    ...
    export class Tab1Page {
  
       ...
  	  
        /* 11. Inyección de dependencia del servicio */
        constructor(private dataProvider: ProviderService , private formBuilder: FormBuilder) { }
    }
    ...
  

  • Agregue el método ngOnInit para que realice la petición y que se suscriba a la respuesta de la petición. Extraiga una muestra de los datos en el atributo a renderizar en la vista.

    ...
    export class Tab1Page {
  
      ...
  
      constructor( ... ) { }
  
      /* 12. Ejecución de la petición y suscripción de la respuesta */
      ngOnInit() {
        this.loadData()
      }
  
      loadData() {
        this.dataProvider.getResponse().subscribe( response => {
          if( response != null) {
            this.data = Object.values(response) as Data[]
          }
  	        
        })
      }
  
    }
    ...
  

  • Agregue el callback onSubmit que envía los datos del formulario

    ...
    @Component({
      ...
    })
    export class Tab1Page {
  
      ...
  
      loadData() { ... }
  
      /* 13. Callback para el envío de datos */
      onSubmit(): void {
      	this.dataProvider.postResponse(this.checkoutForm.value).subscribe( (response) => {
                this.checkoutForm.reset();
                this.loadData()
        })
      }
  
    }
    ...
  

Componente.ts - Formulario y Renderización del resultado

1. Modifique el archivo hybrid/src/app/tab1/tab1.page.html, con:

   • Utilice la directiva *ngFor para recorrer el arreglo data en la vista (html) del componente seleccionado.

    ...
    <ion-content [fullscreen]="true">
   
      <ion-card class="ion-padding-bottom ion-margin-bottom">
   	    
        <ion-card-header>
          <ion-card-title>Memorias</ion-card-title>
        </ion-card-header>
   
        <ion-card-content class="ion-text-center">
          <form [formGroup]="checkoutForm" (ngSubmit)="onSubmit()">
            <ion-input formControlName="texto"
              placeholder="Ingresa tu memoria"></ion-input>
            <ion-button type="submit">Enviar</ion-button>
          </form>
        </ion-card-content>
      </ion-card>
   	  
   
      <ion-card>
        <ion-card-header>
          <ion-card-title>Lista de Memorias</ion-card-title>
        </ion-card-header>
   
        <ion-card-content>
   
          <!-- Muestra los elementos -->
          <ion-list>
            <ion-item *ngFor="let datum of data">
              <ion-label> {{ datum?.texto }} </ion-label>
            </ion-item>
          </ion-list>
   
        </ion-card-content>
      </ion-card>
   
   	  
    </ion-content>
   

• Versiona local y remotamente el repositorio hybrid.

Documentación

• Ionic Icons en la página oficial
• Ionic Components en la página oficial

Fundamental

• Formularios de Angular en X

Making good forms in #angular can be easier than you think!

1/5 🧵 pic.twitter.com/TYlWq00MHV

— Thinkster (@GoThinkster) September 3, 2020

Términos

reactform

Referencias

• Ionicframework. (n.d.). Your First Ionic App: Angular: Ionic Documentation. Retrieved from https://ionicframework.com/docs/angular/your-first-app
• (N.d.). Retrieved from https://angular.io/start/start-forms