En el siguiente artículo vamos a echar un vistazo al Framework Ionic, y a cómo se puede instalar en Ubuntu 20.04. Esta marco de trabajo nos va a permitir a los usuarios implementar proyectos con otros marcos como Angular. Ionic es un SDK completo de código abierto para el desarrollo de aplicaciones móviles híbridas creado por Max Lynch, Ben Sperry y Adam Bradley de Drifty Co. en 2013. La versión original se lanzó en 2013 y se construyó sobre AngularJS y Apache Cordova. Sin embargo, la última versión se reconstruyó como un conjunto de componentes web, lo que permite al usuario elegir realizar proyectos Angular, React o Vue.js. Además permite el uso de componentes Ionic sin ningún marco de interfaz de usuario.
Ionic proporciona herramientas y servicios para desarrollar aplicaciones web progresivas, móviles y de escritorio híbridas basadas en prácticas y tecnologías modernas de desarrollo web. Para ello se pueden utilizar tecnologías web como CSS, HTML5 y Sass. Con este framework podemos desarrollar aplicaciones con tecnologías web compatibles con iOS, Android o la propia web. Además ofrece una potente herramienta CLI con la que vamos a poder gestionar y crear proyectos.
Características generales de Ionic
- Este framework es gratuito y de código abierto. Ofrece una biblioteca de componentes y herramientas de interfaz de usuario optimizados para dispositivos móviles, con los que crear aplicaciones rápidas y altamente interactivas.
- Ionic utiliza Cordova, y más recientemente complementos para obtener acceso a las funciones de los sistemas operativos del host, como el GPS, la cámara, la linterna, etc.
- Los usuarios pueden crear sus aplicaciones y luego personalizarlas para Android, iOS, Windows, escritorio (con Electron) o navegadores modernos.
- Ionic incluye componentes móviles, tipografía o un tema base extensible.
- Al utilizar Web Components, Ionic proporciona componentes y métodos personalizados para interactuar con ellos. Uno de esos componentes, el desplazamiento virtual, permite a los usuarios desplazarse por una lista de miles de elementos sin que se produzca ningún impacto en el rendimiento. Otro componente, pestañas, crea una interfaz con pestañas compatible con la navegación de estilo nativo y la gestión del estado del historial.
- Además del SDK, Ionic también proporciona servicios que los desarrolladores pueden usar para habilitar funciones, como implementaciones de código o compilaciones automatizadas.
- También proporciona su propio IDE conocido como Ionic Studio.
- Además ofrece una interfaz de línea de comandos (CLI) para crear proyectos. La CLI también permite a los desarrolladores agregar complementos de Cordova y paquetes adicionales, habilitar notificaciones automáticas, generar íconos de aplicaciones, pantallas de presentación y crear binarios nativos.
Instalar Ionic en Ubuntu 20.04
La instalación de este framework es bastante sencilla. Para empezar solo necesitamos abrir una terminal (Ctrl+Alt+T) y actualizar los paquetes de nuestro sistema:
sudo apt update; sudo apt upgrade
Después vamos a instalar algunos paquetes necesarios. En la misma terminal tendremos que utilizar el comando:
sudo apt install curl gnupg2 wget git
El siguiente paso va a ser instalar NodeJS. Este ejemplo lo he probado con la versión 14.x. Para instalar esta versión, empezaremos por añadir el repositorio necesario:
curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
Después ya podemos instalar NodeJS ejecutando este otro comando:
sudo apt install nodejs
Ionic requiere Apache Cordova. Hay que aclarar que este es un conjunto de API de dispositivos que permiten al desarrollador de aplicaciones móviles utilizando JavaScript, acceder a funciones nativas del dispositivo, como la cámara o el acelerómetro.
Tras la instalación de NodeJS, ya podemos instalar Cordova ejecutando:
sudo npm install -g cordova
Llegados a este punto, podemos pasar a instalar Ionic utilizando npm:
sudo npm i -g @ionic/cli
Finalizada la instalación, podemos verificar la versión instalada con el comando:
ionic -v
Una aplicación de ejemplo
Para saber si la instalación se ha realizado de forma correcta, podemos comenzar por crear una pequeña aplicación de ejemplo. Para hacer esto, tan solo tendremos que ejecutar el siguiente comando crear el ejemplo:
ionic start
Al ejecutar este comando tendrás que definir qué tipo de proyecto es el que quieres crear. Para este ejemplo yo he elegido Angular. Además, tendrás que darle un nombre a tu proyecto y elegir la plantilla. Todo esto lo tendrás que seleccionar desde una pantalla parecida a la siguiente:
Tras la configuración, se va a generar una carpeta con el nombre que le hemos dado al proyecto. Accede a esta carpeta para ver la estructura del proyecto.
Para poder visualizar el proyecto, en la misma terminal vamos a ejecutar este otro comando:
ionic serve --host 0.0.0.0 --port 8000
Con este comando vamos a permitir que cualquier host puede acceder al puerto 8000.
Cuando se cargue todo lo necesario, abre tu navegador web y dirígete a http://localhost:8000 o http://IP-de-tu-servidor:8000 y verás la página de ejemplo que se acaba de crear.
Ionic es un marco moderno que nos permite desarrollar aplicaciones multiplataforma de manera simple y elegante. Se puede obtener más información y documentación sobre su instalación y funcionamiento en la página web del proyecto.