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

Revise Angular y Signals: Transformando el desarrollo web con la explicación de la implementación de Signals (arquitectura suscripción y eventos) para detectar y actualizar solo los cambios relevantes de un componente.

Actividades en clases

  1. Clone localmente tu repositorio hybrid.

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

     ionic serve

Ionic Page

  1. Genere una página nueva, con:

     ionic generate page tab4

  2. Modifique hybrid/src/app/tabs/page.ts, con:

     import { ..., albums  } from 'ionicons/icons';
 ...

 export class TabsPage {
   ...

   constructor() {
     addIcons({ ..., albums });
   }
 }

  3. Modifique hybrid/src/app/tabs/page.hml, con:

     <ion-tabs>
     <ion-tab-bar slot="bottom">
			
         ...

         <ion-tab-button tab="tab4" href="/tabs/tab4">
           <ion-icon aria-hidden="true" name="albums"></ion-icon>
           <ion-label>Tab 4</ion-label>
         </ion-tab-button>

         <ion-tab-button tab="tab2" href="/tabs/tab2">
         	...
         </ion-tab-button>

   	</ion-tab-bar>
 </ion-tabs>

  4. Modifique hybrid/src/app/tabs/tabs.routes.ts, con:

     ...
 export const routes: Routes = [
     {
         ...
         children: [
             ...
             {
                 path: 'tab3'
                 ...
             },
             {
                 path: 'tab4',
                 loadComponent: () =>
                 import('../tab4/tab4.page').then((m) => m.Tab4Page),
             },
             ...
         ],
     },
     ...
 ];

  5. (STOP 1) Revise los cambios en el navegador

Ionic Componente y Modal

  1. Genere el componente main y modal, con:

     ionic generate component tab4/main 
 ionic generate component tab4/modal

Tab4 - MainComponent

  1. Modifique hybrid/src/app/tab4/tab4.page.ts, con:

     ...
 import { ... , IonNav } from '@ionic/angular/standalone';
 import { MainComponent } from './main/main.component';
	
 @Component({
     ...
     imports: [ ... , IonNav] 
 })
 export class Tab4Page implements OnInit {

   component = MainComponent

   ...
	
 }

  2. Reemplace todo el contenido de hybrid/src/app/tab4/tab4.page.html, con:

     <ion-nav [root]="component"></ion-nav>

  3. (STOP 2) Revise los cambios en el navegador

MainComponent - ModalComponent

  1. Modifique hybrid/src/app/tab4/main/main.page.ts, con:

     ...
 import { IonNav, IonContent, IonHeader, IonTitle, IonToolbar, IonNavLink, IonButton, IonButtons, IonBackButton } from '@ionic/angular/standalone';
 import { ModalComponent } from '../modal/modal.component';
	
 @Component({
     ...
     standalone: true,
     imports: [IonNav, IonContent, IonHeader, IonTitle, IonToolbar, IonNavLink, IonButton, IonButtons, IonBackButton]
 })
 export class MainComponent  implements OnInit {

   modal = ModalComponent

   ...
	
 }

  2. Reemplace todo el contenido de hybrid/src/app/tab4/main/main.page.html, con:

     <ion-header>
   <ion-toolbar>
     <ion-title>Tab4</ion-title>
   </ion-toolbar>
 </ion-header>
 <ion-content class="ion-padding">
   <h1>Tab4</h1>
   @for (item of [1,2,3,4,5,6]; track $index) {
       <ion-nav-link router-direction="forward" [component]="modal"
         [componentProps]="{data: item}">
         <ion-button>Modal  {{  item  }} </ion-button>
       </ion-nav-link>
   }
 </ion-content>

  3. (STOP 3) Revise los cambios en el navegador

ModalComponent

  1. Modifique hybrid/src/app/tab4/modal/modal.page.ts, con:

     ...
 import { ... , input } from '@angular/core';
 import { IonContent, IonHeader, IonTitle, IonToolbar, IonNavLink, IonButton, IonButtons, IonBackButton } from '@ionic/angular/standalone';
	
 @Component({
     ...
     standalone: true,
     imports: [IonContent, IonHeader, IonTitle, IonToolbar, IonNavLink, IonButton, IonButtons, IonBackButton],
 })
 export class MainComponent  implements OnInit {

   data = input(0)

   ...
	
 }

  2. Reemplace todo el contenido de hybrid/src/app/tab4/modal/modal.page.html, con:

     <ion-header>
   <ion-toolbar>
     <ion-buttons slot="start">
       <ion-back-button></ion-back-button>
     </ion-buttons>
     <ion-title>Modal</ion-title>
   </ion-toolbar>
 </ion-header>
 <ion-content class="ion-padding">
   <h1>Value</h1>
    {{  data()  }} 
 </ion-content>

  3. Modifique hybrid/src/main.ts, con:

     ...

 bootstrapApplication(AppComponent, {
   providers: [
     ...
     provideIonicAngular({ useSetInputAPI: true }),
     ...
   ],
 });

  4. (STOP 4) Revise los cambios en el navegador

Documentación

Ion-nav throws error when using input signals

Fundamental

Términos

suscripción, eventos, signals

Referencias