Crea tu primera aplicación en Ionic

Ionic es un framework MVC (Modelo Vista Controlador) de código libre para desarrollar aplicaciones híbridas, compuestas por HTML5, CSS3 y JavaScript, para sistemas operativos Android e iOS. Con Ionic podrás crear grandes aplicaciones con un solo código base, lo cual te permitirá acelerar el proceso de desarrollo de una aplicación. Empresas como IBM, CISCO y Microsoft confían en este framework para crear aplicaciones.

Antes de todo, ¿qué es una Aplicación Híbrida?

Las aplicaciones híbridas utilizan tecnologías web para su construcción y funcionan sobre una vista web que se ejecuta de forma nativa en el sistema operativo del dispositivo, lo cual también les permite acceder a los recursos propios del sistema como procesador, cámara, GPS o algún otro periférico. Las principales tecnologías con las que están construidas son HTML5, CSS3 y JavaScript.

Configuración básica

Ionic cuenta con un potente CLI (Command Line Interface) con el que podemos trabajar directamente desde nuestra terminal enviando las instrucciones para crear o configurar nuestros proyectos y el cual vamos a utilizar para la configuración de nuestro primer proyecto en Ionic.

Instalar Ionic CLI

Antes de esta instalación debemos contar con la última versión estable de Node.js, si ya lo tenemos instalado en nuestra terminal ejecutamos:

npm install -g ionic

Creando nuestra primera aplicación híbrida

En Ionic CLI podemos crear de forma automatizada tres tipos de proyectos base:

1. Instalación Limpia: ionic start myApp blank

2. Instalación con Pestañas: ionic start myApp tabs

3. Instalación con Menú Lateral: ionic start myApp sidemenu

Para este ejemplo vamos a crear una aplicación con pestañas, por lo tanto ejecutamos el siguiente comando en la terminal:

ionic start hola-ionic tabs

Este comando puede tardar un poco ya que nos prepara todo un proyecto base sin preocuparnos por las configuraciones necesarias y enfocarnos en desarrollar nuestra aplicación. Una vez terminada la configuración de nuestro proyecto base entramos en el directorio creado.

cd hola-ionic

Procedemos a abrir el contenido en nuestro editor de código, en mi caso utilizo VSCode.

Cómo esta constituido nuestro proyecto

node_modules/ Contiene todos los módulos y dependencias de nuestro proyecto.
resources/ Contiene todos los recursos gráfícos de nuestra aplicación.
src/ Es donde se encuentra todo nuestro código fuente.
src/app/ Es el código base de nuestra aplicación
src/assets/ Son los recursos gráficos e imágenes
src/pages/ Es el código de cada una de las pestañas de nuestra aplicación
src/theme/ Es el tema por defecto en Sass (preprocesador CSS)

Son archivos de configuración de nuestro proyecto: .editorconfig, .gitignore, config.xml, ionic.config.json, ionic.starter.json, package.json, tsconfig.json y tslint.json, los cuales te recomiendo inspeccionarlos para entender cómo está construido.

Probando nuestra aplicación

Ionic CLI nos provee de un comando con el cual podemos crear un servidor local para probar nuestras aplicaciones en el navegador o en nuestros dispositivos móviles antes de compilar la aplicación para Android o iOS. Para esto necesitamos ejecutar el siguiente comando:

ionic serve

Cuando termine su ejecución nos abrirá una pestaña nueva en nuestro navegador con la siguiente url: http://localhost:8100/ en la cual probaremos nuestra aplicación.

Ahora tienes los conocimientos básicos para crear sorprendentes aplicaciones móviles con Ionic. Si quieres seguir aprendiendo te recomiendo tomar el Curso de Ionic Avanzado que lanzaremos en unas horas.

También puedes conocer PWA vs Apps Nativas, y descubrir las diferencias entre ellas.