Guía 18

Guía 18

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

Hibrida

  1. Clona localmente tu repositorio hibrida.
  2. Instale los paquetes de su proyecto.
  3. Levante los servicios.

Actividades en clases

IonTab

  1. Edite el archivo src/app/tabs/tabs.page.ts, con:

    • Importe y agregue la referencia al ícono rocket en la función addIcons.

  2. Edite el archivo src/app/tabs/tabs.page.html, con:

    • En el tab1 el nombre del ícono “rocket” y el texto del ícono “Teachable Machine”

  3. (STOP 1) Compruebe el resultado en el navegador.

Interfaz gráfica

  1. Edite el archivo src/app/tab1/tab1.page.ts, con:

    • Importe y registre los componentes visuales mediante el decorador de la clase.
    • Importe la función addIcons y la imagen cloudUploadOutline para llamar en el constructor.
     ...
 import {  

       /* Importe los componentes de la UI */
       IonFab, IonFabButton, IonIcon, IonCard,

     ... 
 } from '@ionic/angular/standalone';

 /* Importe la función y el ícono */
 import { addIcons } from 'ionicons';
 import { cloudUploadOutline } from 'ionicons/icons';
	
 @Component({
     ...
     imports: [

         /* Registre los componentes de la UI */
         IonFab, IonFabButton, IonIcon, IonCard, 

         ...
     ]
 })
 export class Tab1Page {

     constructor() {
         /* Registre el ícono */
         addIcons({ cloudUploadOutline });
     }
 }

  2. Reemplace todo el contenido en el archivo src/app/tab1/tab1.page.html, por:

     <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
       Teachable Machine
     </ion-title>
   </ion-toolbar>
 </ion-header>

 <ion-content [fullscreen]="true">
   <ion-header collapse="condense">
     <ion-toolbar>
       <ion-title size="large">Teachable Machine</ion-title>
     </ion-toolbar>
   </ion-header>

   <!-- CARGA DE IMAGEN - INICIO -->
	  
   <!-- CARGA DE IMAGEN - FIN -->

   <input type="file" accept="image/*" />

   <ion-fab slot="fixed" vertical="bottom" horizontal="center">
     <ion-fab-button>
       <ion-icon name="cloud-upload-outline"></ion-icon>
     </ion-fab-button>
   </ion-fab>

 </ion-content>

  3. Edite el archivo src/app/tab1/tab1.page.scss, con:

     img {
     width: 100vw;
     height: 30vh;
     object-fit: cover;
 }

 ion-button {
     margin: 0 auto;
 }

  4. (STOP 2) Compruebe el resultado en el navegador.

Eventos

  1. Edite el archivo src/app/tab1/tab1.page.ts, con:

    • Agregue el callback onFileSelected.
     ...
 export class Tab1Page {

     ...

     /* El método onSubmit para enviar los datos del formulario mediante el servicio */
     onFileSelected(event: Event): void {
         const input = event.target as HTMLInputElement;

         if (input.files && input.files.length > 0) {
             const file = input.files[0];
             console.log(file)
         }
     }

 }

  2. Edite el archivo src/app/tab1/tab1.page.html, con:

    • Agregue al elemento <input>:
      • La referencia en plantilla #fileInput,
      • El callback onFileSelected para el evento change con el objeto event, y
      • Oculte el elemento (hidden).
    • Agregue al elemento <ion-button> el disparo del evento click de fileInput.
     ...
 <!-- Referencia en plantilla #fileInput, callback para el evento change y oculte el elemento -->
 <input #fileInput type="file" accept="image/*" (change)="onFileSelected($event)" hidden />

 <!-- Disparo del evento click de fileInput -->
 <ion-fab slot="fixed" vertical="bottom" horizontal="center">
     <ion-fab-button (click)="fileInput.click()">
         <ion-icon name="cloud-upload-outline"></ion-icon>
     </ion-fab-button>
 </ion-fab>
 ...

  3. (STOP 3) Compruebe el resultado en el navegador.

Carga de imagen (Base64)

  1. Edite el archivo src/app/tab1/tab1.page.ts, con:

    • Agregue el código asincrónico para leer la imagen en Base64.
     ...
 export class Tab1Page {

     ...

     /* El método onSubmit para enviar los datos del formulario mediante el servicio */
     onFileSelected(event: Event): void {
         const input = event.target as HTMLInputElement;

         if (input.files && input.files.length > 0) {
             const file = input.files[0];
				
             const reader = new FileReader();

             // Convertir el archivo a una URL base64 para mostrarlo en el html
             reader.onload = () => {
                 console.log(reader.result as string)
             };

             reader.readAsDataURL(file); // Leer el archivo como base64
         }
     }

 }

  2. (STOP 4) Compruebe el resultado en el navegador.

Signals

  1. Edite el archivo src/app/tab1/tab1.page.ts, con:

    • Importe la función signal.
    • Declare las señales imageReady e imageURL
     /* Importe la función signal */
 import { Component, signal } from '@angular/core';
 ...
 export class Tab1Page {

     imageReady = signal(false)
     imageUrl = signal("")

     ...

     /* El método onSubmit para enviar los datos del formulario mediante el servicio */
     onFileSelected(event: Event): void {
         ...

         if ( ... ) {
				
             ...

             // Convertir el archivo a una URL base64 para mostrarlo en el html
             reader.onload = () => {
                 this.imageUrl.set(reader.result as string)
                 this.imageReady.set(true)
             };

             ...
         }
     }

 }

  2. Edite el archivo src/app/tab1/tab1.page.html, con:

     ...
 <ion-content [fullscreen]="true">
	        
         <!-- CARGA DE IMAGEN - INICIO -->
         @if(imageReady()) {
           <ion-card>

             <img [src]="imageUrl()" alt="Imagen seleccionada" />
		        
             <!-- CARGA DE PREDICCIÓN - INICIO -->
		        
             <!-- CARGA DE PREDICCIÓN - FIN -->

           </ion-card>
         }
         <!-- CARGA DE IMAGEN - FIN -->       

 </ion-content>
 ...

  3. (STOP 5) Compruebe el resultado en el navegador.

Documentación

Fundamental

Términos

signals

Referencias