Ionic, cómo se puede instalar este Framework en Ubuntu 20.04

about ionic

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:

instalar dependencias

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:

add repo nodejs

curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -

Después ya podemos instalar NodeJS ejecutando este otro comando:

instalar nodejs

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:

instalaclón de cordova

sudo npm install -g cordova

Llegados a este punto, podemos pasar a instalar Ionic utilizando npm:

instalación mediante npm

sudo npm i -g @ionic/cli

Finalizada la instalación, podemos verificar la versión instalada con el comando:

ionic versión

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:

ionic start

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.

instrucciones de inicio para el ejemplo

Para poder visualizar el proyecto, en la misma terminal vamos a ejecutar este otro comando:

iniciar servidor

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.

ejemplo de aplicación

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.


El contenido del artículo se adhiere a nuestros principios de ética editorial. Para notificar un error pincha aquí.

Sé el primero en comentar

Deja tu comentario

Tu dirección de correo electrónico no será publicada.

*

*

  1. Responsable de los datos: Miguel Ángel Gatón
  2. Finalidad de los datos: Controlar el SPAM, gestión de comentarios.
  3. Legitimación: Tu consentimiento
  4. Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  5. Almacenamiento de los datos: Base de datos alojada en Occentus Networks (UE)
  6. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.