Aplicaciones móviles nativas
Las aplicaciones nativas son aquellas diseñadas para una plataforma específica. Normalmente se utiliza un SDK (Software Development Kit) propio de dicha plataforma. Cada SDK hace uso de un lenguaje específico. Por ejemplo, el SDK de iOS utiliza Swift u Objective C, el de Android utiliza Java. Por lo tanto, si queremos crear aplicaciones para los distintos dispositivos, debemos adaptar el código a los SDKs correspondientes.
Aplicaciones móviles híbridas
Todas las plataformas móviles disponen de un subsistema denominado webview. Webview permite la inclusión de contenido web dentro de una aplicación. Por lo tanto, webview permite el uso de tecnologías web (HTML, CSS, Javascript) para el desarrollo de componentes que posteriormente se pueden embeber en una app nativa. Gracias a ello, se puede crear una aplicación una vez, y ejecutarla en cualquier plataforma que permita el uso de esta tecnología (ordenadores, tabletas, teléfonos móviles, relojes inteligentes, navegadores de coches…).
Una aplicación híbrida es, en esencia, una aplicación nativa que contiene un webview en el cual se ejecuta el desarrollo realizado. A pesar de ejecutarse en este subsistema, la aplicación dispone de acceso a todo el hardware del dispositivo, como si de una aplicación nativa en sí misma se tratase, disponiendo incluso de aceleración por hardware.
Aplicación híbrida VS Aplicación nativa
La decisión principal para decantarse por una tecnología u otra, debe basarse en criterios organizacionales, teniendo en cuenta factores como los siguientes:
|
|
|
|
|
|
|
|
|
Qué es Ionic
Ionic es un framework (marco de trabajo) open source (de código abierto). Facilita las herramientas necesarias para el desarrollo y pruebas de aplicaciones híbridas. Permite, por lo tanto, el desarrollo de un proyecto una única vez, y su despliegue en múltiples plataformas, adaptando incluso el look 'n' feel (aspecto de la interfaz de usuario) a las características específicas de cada una de ellas.
O, dicho de otra forma, con Ionic se codifica el desarrollo una vez, y posteriormente esta herramienta se encarga de generar el ejecutable propio de cada plataforma, aplicando además el tema gráfico y experiencia de usuario. Es decir, si se genera el ejecutable para Android, aplicará el tema Material Design. Si se genera el ejecutable para iOS, aplicará el tema Cupertino.
Como decía, Ionic es un framework que proporciona librerías y herramientas para el desarrollo de aplicaciones. Para la codificación de estas aplicaciones, soporta el uso de Angular, React y Vue. Por lo tanto, y simplificándolo mucho, el desarollador crea su código usando cualquiera de los frameworks indicados, encargándose Ionic de dar soporte y convertirlo en las respectivas versiones para las distintas plataformas.
Instalación y primeros pasos
Ionic necesita tener NodeJS instalado. Para instalar NodeJS se deberá ir a su web oficial https://nodejs.org y descargar el instalador
Se deberán seguir los pasos recomendados según la plataforma.
Una vez instalado NodeJS, ya se puede instalar Ionic Framework mediante el uso de NPM. Para ello se ejecutará el siguiente comando:
npm install -g @ionic/cli
Mediante esta acción, se instala el CLI (Command Line Interface) que se utilizará posteriormente para inicializar y crear los elementos de la infraestructura de nuestra app.
Para crear una nueva aplicación, nos moveremos a la carpeta raíz que deseemos utilizar, y escribiremos lo siguiente:
ionic start MiPrimeraApp tabs
Donde:
MiPrimeraApp
es el nombre de la aplicación.tabs
hace referencia a la plantilla que se utilizará como base para la aplicación
Hay varias plantillas base, que se pueden utilizar para facilitar la puesta en marcha de la aplicación dependiendo del escenario más conveniente:
tabs
crea una aplicación basada en pestañasblank
crea una aplicación en blanco, inicializando únicamente la estructura basesidemenu
crea una aplicación con menú lateral
Durante la inicialización, el CLI pregunta qué framework Javascript se va a utilizar. Tenemos la opción de utilizar Angular, React o Vue. Tambien preguntará si se desea utilizar Capacitor. Capacitor es la herramienta que permite acceder al hardware y funcionalidades nativas del dispositivo.
Posteriormente, para arrancar la aplicación nos desplazaremos a la nueva carpeta que el CLI l nos ha creado, y ejecutaremos el comando:
ionic serve
Mediante este comando, se arranca un servidor de desarrollo de Node, y se inicia en él la aplicación, que podremos visualizar mediante un navegador de Internet cualquiera, accediendo a la URL http://localhost:8100
. El puerto puede variar en función de la configuración. Podemos consultarlo revisando el log que se genera mientras se está arrancando el live server.
Enlaces útiles
Por último, me gustaría compartir algunos enlaces que considero útiles si deseas iniciarte en el mundo Ionic
- https://ionicframework.com Página principal del framework Ionic
- https://ionicframework.com/docs Documentación del framework. Es una documentación tremendamente extensa y detallada, que explica con detenimiento todas las características y funcionalidades que Ionic facilita
- https://nodejs.org Página de NodeJs, necesario para el funcionamiento de Ionic