Capacitor con Ionic en el Framework de Angular

Objetivos

Este proyecto trata de mostrar la gran funcionalidad que nos ofrece Ionic junto con Angular para el desarrollo de una aplicación, no solo de escritorio sino que también para dispositivos móviles, ya sea en android o ios. En este caso, emplearemos el emulador de Android Studio y el plugin de Capacitor para ver el resultado final del proyecto.

Ionic y Capacitor

Ionic es un Framework de Front-End de código abierto que simplifica enormemente al desarrollo de aplicaciones multiplataforma, pues utiliza la misma base de código, basado en las tecnologías Web (HTML, CSS, JS). Principalmente se enfoca en la interfaz de usuario y la interacción del mismo con la aplicación. Lo bueno que tiene es que se integra sin ningún problema con otros marcos populares de Front-End como React y Vue. Añadir que este framework ofrece una gran documentación que facilita bastante a la hora de comenzar a desarrollar cualquier aplicación.

Capacitor es un medio que permite a los desarrolladores crear soluciones cross-platform que aprovechen las características de Progressive Web Apps y que pueden instalarse en android e ios. Además, la propia documentación lo define como cross-platform native runtime, esto se logra a través de una serie de herramientas que se pueden ejecutar desde la línea de comando. Por último e importante, para poder instalar e integrar Capacitor en nuestro proyecto, necesitamos tener instalado en nuestro sistema Node.js, que es un entorno de tiempo de ejecución de JavaScript, de ahí su terminación en .js.

Angular

Angular es un framework de código abierto que permite el desarrollo de apps, está desarrollado en TypeScript.

Requisitos

Para el desarrollo de la aplicación que vamos a poder ver en nuestro móvil necesitaremos los siguientes requisitos:

Node.js
Android Studio
Instalar de forma global (-g) el CLI de Angular y de Ionic a través de la línea de comando
- npm install -g @angular/cli y npm install -g @ionic/cli
Añadir la plataforma con la que se quiera trabajar (en la carpeta del proyecto).
- npm install @capacitor/android

Comandos para añadir la plataforma al proyecto

Se pueden usar ambos comandos no solo para añadir sino también para ejecutar la aplicación en sí y otros comandos que contiene el framework de Ionic.

Creación del proyecto

Para crear el proyecto usaremos la linea de comando de Windows (puede ser la terminal del propio editor de código Visual Studio Code).

ionic start nombreproyecto

Más tarde escogeremos el framework con el que trabajaremos.

Ahora deberemos especificar cómo crearemos la aplicación con Standalone Components ó NgModules

Al finalizar con las especificaciones del proyecto, por lo que estaremos terminando el proceso, ionic nos ofrece varios starter templates con los que podremos guiarnos.

Estructura

Si todo ha ido bien nuestro estructura de la carpeta debería visualizarse de la siguiente manera. Y tener agregado la carpeta que corresponde a Android Studio, si no lo visualizamos solo deberemos asegurarnos de instalarlo de nuevo y listo (npm install @capacitor/android ).

Errores con Ionic y Angular

Posibles errores al trabajar con hooks (Lifecycle methods) al inicio del proyecto con sus respectivas soluciones:

En el fichero .eslintrc.json, se deben añadir los siguientes valores en rules: { . . . ,}

«no-empty-function»: «off»,

«@typescript-eslint/no-empty-function»: «off»,

«@angular-eslint/no-empty-lifecycle-method»: «off»

Errores de restricción de propiedades en el modelo:

Para solucionar este posible error, nos dirigimos al fichero tsconfig.json y agregamos la siguiente linea:

Models y Environments

Models

Environment

Servicios y Componentes

Servicios

En el servicio creamos los métodos con los que obtendremos las respuestas de la api, de forma que los podremos usar en el componente que queramos sin necesidad de recurrir a una url de api de tipo private en los componentes. Para que la dependencia de HttpClient pueda realizar las llamadas, es imprescindible agregar el HttpClientModule de angular en el archivo de app.module.ts.

Ahora llamaremos dichos métodos en nuestro componente store.page.ts

Cargaremos los datos en store.page.html, y por último, haremos el build de la app y su sincronización con android.

Para ello hay dos comandos muy importantes que nunca debemos olvidarlos, ya que sin ellos no podremos hacer la instalación en la plataforma que queramos. Se usarán cada vez que realicemos cambios y queramos visualizarlos en la plataforma que deseemos.

ionic cap build, realiza el build de la app en todas los plataformas.
ionic cap sync (después de sincronizarlo, se usará ionic cap copy), sincroniza el proyecto con las plataformas.

Abrir app en Android Studio

Si queremos abrirlo desde la línea de comando escribiremos lo siguiente: ionic cap open android.

Errores con Android Studio

Al ejecutar por primera vez puede que surjan algunos errores, como la incompatibilidad de versiones entre gradle y java:

Para solucionarlo nos dirigimos primero a File>Settings>Build, Execution, Deployment>Gradle y elegimos en las opciones de Gradle JDK la versión que sea compatible con la de Java. Te dejo un enlace para que puedas revisar la compatibilidad de versiones aquí.

Después iremos a File>Project Structure>Project y escogemos las versiones de plugin necesarios.

Y por último, la aplicación se sincronizará automáticamente y hará una compilación, y si todo ha salido bien se mostrará un Output con un mensaje de éxito.

Ahora escogeremos un dispositivo cualquiera que nos ofrece el emulador, y ejecutaremos nuestra aplicación. Si queremos instalarlo en nuestro propio dispositivo (solo android) debemos activar en los ajustes de nuestro móvil la opción de desarrollador, y dentro de esta activar la depuración por USB. Con esto podrás elegir el dispositivo e instalar la app en el mismo.

Espero que haya ayudado a entender las múltiples dudas que surgieran tras la creación del proyecto, la implementación de Capacitor y su uso con Ionic en un proyecto basado en el framework de Angular.

¿Dónde ver los resultados?

Para adaptar la app que se ha creado e implementar su funcionalidad, podéis buscarla en mi GitHub y resolver las dudas que hayan surgido. Lo único que sea necesario para usar la funcionalidad es que tengáis instalado el framework con el que trabajaréis (Angular e Ionic) y Android Studio.

Datos de interés

Autor: Wende López López
Curso: Desarrollo Web Full Stack + MultiCloud con Azure y AWS
Centro: Tajamar Tech
Año académico: 2023-2024
Repositorio GitHub: storeapp