Ediciones ENI Editorial | líder en informática
La cross-platform con Angular
Apache Cordova
Apache Cordova es un framework open source que forma parte de Apache Software Foundation. Sirve para realizar desarrollos móviles usando tecnologías web (HTML, CSS y JavaScript).
Este framework actúa como un contenedor: su función es encapsular una aplicación web en una aplicación nativa. Se habla de aplicación híbrida. Técnicamente, Cordova va a incorporar los recursos de la aplicación web (archivos HTML/JS/CSS, así como imágenes, fuentes, etc.) en la aplicación nativa y después los mostrará a partir de un componente WebView (personalizado para buscar los recursos en local en lugar de hacerlo en Internet).
Este tipo de aplicaciones permite capitalizar los conocimientos sobre desarrollo web, con el objetivo de crear aplicaciones móviles. Además, permite crear varias aplicaciones nativas, compatibles Android o IOS, y un sitio web con una cantidad máxima de código en común.
Con Apache Cordova, también es posible acceder a las APIs nativas de cada plataforma. Por ejemplo, es posible hacer vibrar el teléfono o hacer una foto desde la aplicación.
1. Crear un proyecto Apache Cordova
Apache Cordova, como sucede con Angular, dispone de una interfaz en línea de comandos (CLI), que permite crear, lanzar o compilar un proyecto Cordova. Por lo tanto, es necesario empezar instalando este CLI, disponible como un paquete Node.js. Para esto, hay que utilizar el siguiente comando:
npm install cordova --global Este comando va a buscar e instalar el paquete Cordova utilizando npm (Node Package Manager). El flag "--global" permite precisar que la instalación se debe hacer en la máquina de manera global y no simplemente para el proyecto actual.
Una vez que se ejecuta este comando, es posible utilizar el comando cordova desde cualquier línea de comandos.
Para crear un proyecto Cordova, es suficiente con utilizar el comando cordova create. Este comando recibe como entrada tres argumentos. El primero es la carpeta donde se debe crear el proyecto. El segundo es el identificador de la aplicación (esta noción de identificador de la aplicación es específica del desarrollo móvil y debe ser único para cada aplicación en el store de las diferentes plataformas). El último argumento se corresponde con el nombre...
Ionic 2
Ionic 2 es un framework que permite el desarrollo de aplicaciones móviles híbridas basándose en Angular y Cordova. El objetivo principal de Ionic es conservar el look and feel de una aplicación nativa y por lo tanto, proporcionar todo un conjunto de elementos gráficos que se pueden utilizar. Estos elementos, algunas veces serán ligeramente diferentes en función de la plataforma de destino, con el objetivo de respetar el diseño de los elementos nativos.
Además, Ionic 2 ofrece a los desarrolladores una librería llamada Ionic Native. Esta librería es un wrapper que permite utilizar los plug-ins Cordova en TypeScript. También modifica el uso de los callbacks de retorno de las llamadas a las APIs nativas, exponiéndolos como Promise JavaScript u observables RxJS. Por lo tanto, es más fácil utilizar los plug-ins Ionic Native en lugar de buscar manualmente los paquetes de tipos asociados que no siempre están disponibles.
1. Crear un proyecto Ionic
Ionic también dispone de una interfaz en línea de comandos (CLI). Para utilizar este CLI hay que empezar por instalarlo. Está disponible en forma de paquete Node.js en el registro npm. Por lo tanto, es suficiente con utilizar el comando install del CLI de npm con el flag -global, con el objetivo de instalarlo de manera global en la máquina y no solo para la carpeta actual:
npm install -global ionic Una vez instalado, es posible usar el CLI con el comando ionic. Para crear un proyecto, hay que utilizar el comando create. Este comando recibe como argumento el nombre de la aplicación (que también será la carpeta en la que se crea el proyecto), así como un nombre de template opcional. Este template permite rellenar previamente la aplicación con algunos elementos. Por ejemplo, es posible utilizar el template tabs que crea una aplicación con tres pestañas vacías o incuso el template sidemenu, que gestiona la navegación entre varias pantallas con un menú plegable. Por lo tanto, para crear una aplicación con tres pestañas vacías, es posible utilizar el siguiente comando:
ionic start angular-ionic tabs 2. Utilizar los componentes Ionic
Al contrario de lo que sucede en una aplicación Angular clásica...