Aplicaciones con Ionic y Capacitor - parte 1 de 2

Antes de empezar hablar sobre Ionic y Capacitor, destaco algunos puntos que comentaremos a lo largo del artículo:

  • Una única base de código para Android, IOS, Web, PWA y Electron.
  • Comunicación con la parte nativa.
  • Proyecto Nativo, podemos abrir y ejecutarlo con XCode y Android Studio
  • Podemos agregar códigos nativos, agregar SDKs propios o de terceros…
  • Los componentes de IONIC son responsive y Adaptive Styling

Una única base de código

Ionic es un Framework de Front-End de código abierto, que permite crear aplicaciones multiplataformas utilizando la misma base de código, basado en las tecnologías Web (HTML, CSS y JS).  Se enfoca en la interfaz de usuario y la interacción del usuario con la aplicación: 

  • Controles de interfaz de usuario
  • Interacciones
  • Gestos
  • Animaciones

Se integra con otras librerías/marcos populares de frontend como Angular, React o Vue, pero si queremos, podemos usar directamente sin ninguna librería, haciendo uso directo de JavaScript.

Programar para Ionic, es natural para un programador frontend, no es fundamental aprender Ionic como tal, ya que Ionic no deja de ser una librería frontend con varios componentes HTML que simula los controles nativos de cada plataforma (Adaptive Styling). 

Comunicación con la parte nativa

En la gran mayoría de los casos, solo con el conocimiento Front-End, se puede crear toda la aplicación sin necesidad de crear código nativo. Las comunicaciones más comunes con la parte nativa, ya están creadas mediante plugins de Capacitor que incluye la documentación de las acciones que se tienen que tomar en la parte nativa de la aplicación y la guía de cómo hacerlo. 

Instalar un plugin es tan simple como instalar un paquete más.

Ejemplo de la instalación del plugin de camera:

npm install @capacitor/camera

En este caso, es necesario agregar permisos en la parte nativa que requiere el plugin de la camera.

IOS: 

  • Archivo: Info.plis
    • NSCameraUsageDescription (Privacy - Camera Usage Description)
    • NSPhotoLibraryAddUsageDescription (Privacy - Photo Library Additions Usage Description)
    • NSPhotoLibraryUsageDescription (Privacy - Photo Library Usage Description)

Android:

  • Archivo: AndroidManifest.xml
    • <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    • <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

En un proyecto React, el plugin se usa de la siguiente forma:

1. Agregamos la referencia:

import { Camera } from '@capacitor/camera';

 

2. Usamos la camera:

const photo = await Camera.getPhoto({
      resultType: CameraResultType.Uri,
      source: CameraSource.Camera,
      quality: 100
    });

 

Como se puede apreciar, todo el código es REACT con TypeScript, en ningún momento usamos código nativo. Pero existe una parte del código nativo dentro del plugin. En Android se puede ver en el siguiente enlace: capacitor-plugins/CameraPlugin.java at main · ionic-team/capacitor-plugins · GitHub. Al usar plugins, no necesitamos aprender la parte nativa de Android e IOS. 

En la 2º parte de este artículo, explicaré cómo se hace esta parte, por ahora, sólo es importante conocer que podemos crear nuestros propios plugins para acceder a las APIs nativa y que una aplicación Ionic con Capacitor, es mucho más que una simple Web.

Podemos ver en el siguiente enlace, un listado de los plugins oficiales de Capacitor: GitHub - ionic-team/capacitor-plugins: Official plugins for Capacitor ⚡️

Creando una App con Ionic, Capacitor y React

Lo primero que debemos tener, es el CLI de Ionic instalado, para instalar a nivel global debemos ejecutar en la consola el siguiente comando:

npm install -g @ionic/cli

 

Una vez instalado, ya podemos crear un proyecto, voy a crear uno que se va a llamar, ElbrinnerApp, que use React y Capacitor.

ionic start elbrinnerApp--type=react --capacitor –verbose

 

Elegimos React:

Elegimos React

Elegimos la plantilla que queremos usar para arrancar el proyecto. Suelo elegir la plantilla en blank, pero para este ejemplo, voy a usar la plantilla my-first-app.

Plantilla para el ejemplo de Ionic

El esqueleto del proyecto tiene la siguiente estructura:

Estructura del esqueleto del proyecto en Ionic

Para arrancar la aplicación en Web, debemos arrancar el siguiente comando:

npm start

 

Al ejecutar el comando, vamos a poder ver la aplicación que acabamos de crear en Web, en la pestaña 2, tenemos la implementación del plugin de capacitor, que funcione en Web, Android e IOS.

Captura de cómo se ve la aplicación

Un detalle importante, es compatible usar Cordova dentro de Capacitor, si hay algún plugin que solo existe en Cordova, lo podemos instalar y usarlo sin problemas.

Proyecto Nativo, podemos abrir y ejecutarlo con XCode y Android Studio

El proyecto que creamos antes, es un proyecto nativo de Android/IOS que contiene varios plugins de Capacitor.

Proyecto nativo con varios plugins de Capacitor

Si nos fijamos en el proyecto que hemos creado, podemos ver una carpeta que se llama android, dentro de esta carpeta está el proyecto nativo que podemos abrir con Android Studio.

La forma correcta de abrir es mediante línea de comando. Primero debemos ejecutar el siguiente comando para compilar y sincronizar los plugins de Capacitor con el Gradle de Android.

Ionic cap sync android

 

ejecución del comando de compilación y sincronización

Una vez terminado la ejecución anterior, ya podemos abrir el proyecto directamente o por línea de comando, ejecutando:

Ionic cap open android

 

Ten en cuenta que es necesario tener Android Studio instalado, así como los SDKs de forma previa. Si tienes instalado, deberías ver algo similar a la imagen de abajo:

Visualización del proyecto

Podemos observar en la imagen que el código es JAVA y que todos los plugins que se necesitaron para la camera, son visibles desde la solución de la App. Si desplegamos la carpeta del plugin, podemos ver el código nativo, pero si queremos aplicar algún cambio, debemos modificar en el proyecto del plugin, nunca desde la solución de la App. Cada vez que ejecutamos Ionic Sync, se copia el código desde el plugin. Lo que sí podemos hacer, es modificar y agregar todo el código que queramos en el proyecto App, estos se mantienen.

Para ejecutar la aplicación en Android, elija el simulador o teléfono en el desplegable que está justo antes del botón del play (que destaco en rojo en la imagen de abajo), luego haga clic sobre el botón play para arrancar el simulador con nuestra App.

Imagen del código JAVA y los plugins  usados para la camera

Para IOS, es similar, pero debemos abrir la carpeta IOS con Xcode. Recordar que la única forma de compilar para IOS, es usando un Mac.

Podemos agregar códigos nativos, agregar SDKs propios o de terceros

Con Ionic y Capacitor no he visto limitaciones al trabajar con SDKs de terceros y tampoco en agregar código nativo. Es un proceso simple y natural para quien conoce IOS y Android.

Vamos a ver como integrar el SDK de AppCenter para tener un ejemplo de cómo se hace.

En Android, debemos abrir el archivo build.gradle y dentro de las dependencias, debemos agregar las dependencias de AppCenter, voy agregar los 3 SDKs (analíticas, crashes y de distribución).

def appCenterSdkVersion = '4.4.3'
implementation "com.microsoft.appcenter:appcenter-analytics:${appCenterSdkVersion}"
implementation "com.microsoft.appcenter:appcenter-crashes:${appCenterSdkVersion}"
implementation "com.microsoft.appcenter:appcenter-distribute:${appCenterSdkVersion}"

 

El siguiente paso es sincronizar el gradle de Android, haciendo clic en el icono que tengo destacado en rojo.

Sincronización del gradle de Android

El último paso, es inicializar el SDK en el archivo MainActivity dentro del método OnCreate.

AppCenter.start(getApplication(), key, Analytics.class, Crashes.class, Distribute.class);

 

Para IOS es similar, debemos agregar las dependencias en el archivo PodFile.

 pod 'AppCenter/Analytics'
 pod 'AppCenter/Crashes'
 pod 'AppCenter/Distribute'

 

El último paso sería agregar dentro de archivo AppDelegate.shift la inicialización del SDK.

AppCenter.start(withAppSecret: key, services:[
          Analytics.self,
          Crashes.self,
          Distribute.self
        ])

 

Como se puede observar, con Ionic y Capacitor se tiene el control completo sobre la aplicación nativa. Esto hace que resulte más simple y natural modificar.

Adaptive Styling

Adaptive Styling es una característica integrada de Ionic Framework que permite a los desarrolladores de aplicaciones usar la misma base de código para múltiples plataformas. Cada componente de Ionic adapta su aspecto a la plataforma en la que se ejecuta la aplicación. Por ejemplo, los dispositivos de Apple, como el iPhone y el iPad, utilizan el lenguaje de diseño iOS propio de Apple. 

Uso lenguaje de diseño IOS en dispositivos Apple

Del mismo modo, los dispositivos Android utilizan el lenguaje de diseño de Google, llamado Material Design.

Dispositivos Android usan Material Design

Como podemos ver en las imágenes de arriba, el componente DateTime, se comporta de forma completamente diferente según la plataforma.

Los usuarios obtienen una experiencia de aplicación familiar. Una aplicación Ionic descargada de la App Store de Apple obtendrá el tema iOS, mientras que una aplicación Ionic descargada de la Play Store de Android obtendrá el tema Material Design. Para las aplicaciones que se ven como una aplicación web progresiva (PWA) desde un navegador, Ionic usará de forma predeterminada el tema Material Design. 

Conclusión de la primera parte del artículo.

Para un programador Front-End, Ionic es una gran herramienta que permite crear aplicaciones multiplataformas con un visual nativo en poco tiempo.

Muchas de las características nativas, están listas para usar mediante plugin de Capacitor, cuando no lo estén, siempre es posible implementar código nativo o crear nuestro propio plugin. 

En la 2º parte del artículo, veremos cómo trabajar con la parte nativa y Capacitor.

Hasta pronto.

Referencias: https://ionicframework.com/

 

 

 

He leído y acepto la política de privacidad
Acepto recibir emails sobre actividades de recruiting NTT DATA