IONIC - Primeros Pasos.

Como aprendiz de nuevas tecnologias, he tomado la decision de involucrarme en el desarrollo de IONIC, he trabajando por los ultimos 3 años en desarrollo movil con React Native, pero IONIC es otro framework que como principio usa Angular para sobre un WebView (o algo como eso) ejecutar la "pagina web" generada con Angular. Esto nos permite ejecutar una aplicacion dentro del navegador, en un android y en un movil; con la misma porcion de codigo.

Estructura

IONIC Core es la base fundamental la cual es hecha y mantenida por el equipo de IONIC. Sobre esta capa esta la aplicacion en Javascript hecha por cualquier programador normalmente en Angular JS como el framework con mas soporte.

A partir de IONIC 4 se adiciona soporte para React en lugar de Angular, al igual que para Vue.js.

Antes de Empezar.

Se necesitaran algunas herramientas para entender los procedimientos y llevar a cabo las actividades de esta guia:

• Node JS y NVM.
• Visual Studio Code. (Prettier, Ionic Snippets, Angular Snippets, TSLint, ESLint).
• Crear una cuenta en IONIC Framework Page
• Git
• Android Studio
• Si esta en MAC, XCode.
• Chrome y Firefox.

Instalando IONIC

Para instalar se emplea NPM, aplicando la instalacion de manera global de la siguiente manera:

sudo npm install -g ionic
ionic

En mi caso tengo la version 6.10.1 al momento de escribir esta guia.

Creando un Proyecto

Para esta guia hare una aplicacion que permite ver que actividades hay cerca a mi ubicacion, puedo compartirlas, guardarlas como favoritas, tendra un login que aplicaremos con FireBase. El nombre de la Aplicacion sera QueHacerHoy.

ionic start                                                                                                                                                                                      ? Framework: Angular
? Project name: QueHacerHoy
? Starter template: tabs
? Integrate your new app with Capacitor to target native iOS and Android? No
? Create free Ionic account? No

Tambien podemos hacer la creacion con este comando:

ionic start QueHacerHoy tabs --type=angular --capacitor --no-git --no-link

Your Ionic app is ready! Follow these next steps:

- Go to your new project: cd ./QueHacerHoy
- Run ionic serve within the app directory to see your app in the browser
- Run ionic capacitor add to add a native iOS or Android project using Capacitor
- Generate your app icon and splash screens using cordova-res --skip-config --copy
- Explore the Ionic docs for components, tutorials, and more: https://ion.link/docs
- Building an enterprise app? Ionic has Enterprise Support and Features: https://ion.link/enterprise-edition

Aqui estaria la configuracion; primero podemos elegir entre Angular y React, despues hay varios templates del que seleccione "tabs" para este ejemplo. No integrar a Capacitor, lo cual nos permitiria agregar plugin para funcionalidades particulares de IOS o Android, pero para el ejemplo no sera necesario.

Corremos la aplicacion inicialmente con el template creado:

ionic serve

En el navegador en el puerto 8100:

Como el fin de esto es que sea una aplicacion movil, activo la funcionalidad de Chrome para visualizarlo como un movil app en Iphone.

Ajustando la pantalla.

Generalmente para programar viendo el Live Reloading, siempre en estos frameworks empleo la misma configuracion, divido la pantalla un 30% para el Chrome a la izquierda, y 70% para el Visual Studio Code a la derecha. Desacoplo la Consola, y la pongo del tamaño del visual studio code, en su parte del explorador, es decir como un 30% de la pantalla. Minimizo la consola de Chrome, y ajusto el chrome al espacio del celular; posteriormente ajusto el tamaño del explorador de archivos que se vea suficiente, y cuando lo necesito uso Command + B.

Para ejecutar IONIC es mejor mantenerlo en una consola independiente la cual tenga el tamaño del chrome.

Desarrollando

Existen multiples componentes previamente creados, que pueden ser implementados facilmente con solo copiar un codigo de ejemplo desde la pagina del Framework:
Framework Documentations

Vamos a ver inicialmente 3 tabs, ya el routing de esto esta preconfigurado, para nuestra aplicacion queeremos una primera pantalla donde tendremos Cards, y estos cards tendran imagenes y texto. Todo lo que este en sera el contenido de la pantalla en cuestion; por lo que borramos y empleamos los tags para crear una pantalla con una imagen.

Por que no usar o ; varias razones:

• Los tags de ionic tienen funcionalidades extras incluidas como en el caso de , hace lazzy mode para carga gradual de la imagen incluido, sin tener que modificar nada.
• Es mas facil de leer el codigo de acuerdo a estas etiquetas.
• Son componentes previamente configurados con alto rendimiento y funcionales para todos los dispositivos.

Creando un Service.

El modelo de services, permite que toda la carga de datos de webservices u otras fuentes puede manejarse a discrecion y no cada vez que se renderiza el componente; para esto usamos el comando de ionic para generar un service.

 ionic generate service Actividad

Esto genera un servicio que nos traeria las actividades disponibles; tras bambalinas nos esta creando un servicio como lo hariamos en angular.

Conectando a un API.

Primero debemos importar la libreria http de common Angular al proyecto por lo que en app.module.ts indicamos que se debe importar lo siguiente:

import { HttpClientModule } from '@angular/common/http';

...
imports: [
    HttpClientModule,
...
]
...

Ahora en el servicio importamos HttpClient que es en realidad el metodo que nos permite hacer llamados a REST APIs. En el constructor ponemos

 construct(private _httpClient : HttpClient)

Typescript toma todos los argumentos del constructor privados o publicos, y los convierte internamente como una propiedad declarada de la clase.

El underscore al inicio lo empleo en casi todos los argumentos locales o dentro de un metodo de cualquier framework de javascript y otros lenguajes que lo permiten; asi no entraria en conflicto con argumentos o variables globales.

Como parte del ejercicio tomamos un API que tome de un curso realizado:
http://orangevalleycaa.org/api/videos
Creamos esta direccion como un const; y vamos al metodo getTodas (el que trate todas las actividades), y hacemos un return de los datos:

  // *Metodo para traer todas las actividades disponibles.
  getTodas() {
    return this._httpClient.get(API);
  }

Esto regresa un . y para el que trae una sola actividad debemos pasarle como argumento la llave de la actividad.

No olvides compartir, dar like y seguir para mas tutoriales.

Repositorio con el codigo fuente