Guía 16

Guía 16

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 en clases

Github

  1. Crea un repositorio en GitHub con el nombre hibrido.
    • Incluya el archivo README.md.
    • Agregue .gitignore con la plantilla Node.
  2. Clone su repositorio localmente.

Dependencias Globales

  1. Instale los módulos Ionic CLI, native-run (para ejecutar binarios nativos en dispositivos y simuladores/emuladores) y cordova-res (para generar íconos de aplicaciones nativas y pantallas de presentación), con:

     npm install -g @ionic/cli native-run cordova-res

Ionic Angular - Plantilla inicial

  1. Cree un proyecto en Ionic:

    • Desde la línea de comandos, utilice el comando ionic con:
     ionic start . tabs --type=angular --capacitor
    • Seleccione el tipo componente Standalone para construir la aplicación
     ? Would you like to build your app with NgModules or Standalone Components?
 ...
 > Standalone

  2. Acceda a la carpeta del proyecto y levante el servidor, con:

     ionic serve

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

IonTab

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

     ...

 /* 1. Agregue la referencia al ícono peopleCircle */ 
 import { ... , peopleCircle } from 'ionicons/icons';

 ...

 export class TabsPage {
 ...

 constructor() {

     /* 2. Agregue el ícono peopleCircle */
     addIcons({ ... , peopleCircle });

   }
 }

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

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

     <ion-tab-button tab="tab3" href="/tabs/tab3">
           
        <!-- 1. Ícono y nombre del tab -->
        <ion-icon name="people-circle"></ion-icon>
        <ion-label>Acerca de</ion-label>

     </ion-tab-button>

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

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

IonCard

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

    • Importe el componente Card y sus asociados.
     ...

    
 import { 
   ...  

   /* 1. Importe los componentes */
   IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCardContent,
      
   ... 
 } from '@ionic/angular/standalone';

 @Component({
   ...
   imports: [
     ... 

     /* 2. Registre los componentes */
     IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCardContent,
        
     ...],
 })
 export class Tab3Page {
   constructor() {}
 }

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

    • Todo el contenido
     <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
       Acerca de
     </ion-title>
   </ion-toolbar>
 </ion-header>

 <ion-content [fullscreen]="true" class="ion-padding">

   <ion-card>
     <ion-card-header>

       <ion-card-title class="titulo">Descripción</ion-card-title>
        
     </ion-card-header>
      
     <ion-card-content>
       <p id="descripcion">
       Una aplicación móvil desarrollada en Angular Ionic es un software multiplataforma que utiliza el framework Angular para construir la lógica y la estructura de la aplicación, junto con el framework Ionic para crear una interfaz de usuario atractiva y funcional. Ionic proporciona componentes y herramientas para diseñar aplicaciones que se sienten y se ven nativas en dispositivos iOS y Android. La aplicación se puede desplegar tanto en la web como en tiendas de aplicaciones móviles. Utiliza tecnologías web como HTML, CSS y JavaScript, lo que facilita la reutilización de código y la implementación rápida.
       </p>
     </ion-card-content>

   </ion-card>

 </ion-content>

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

     .titulo {
   color: var(--ion-color-primary);
     font-weight: bold;
     text-align: center;
 }

 p#descripcion {
   text-align: justify;
 }

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

Github

  1. Crea un repositorio en GitHub con el nombre ..
  2. Desde la línea de comandos:

  1. Versiona local y remotamente el repositorio ..

     git add .
 git commit -m "first"
 git push origin main --force

Documentación

Fundamental

Términos

UI framework

Referencias