Iniciando con Ionic Framework

Ionic es un framework de código abierto optimizado para crear aplicaciones para teléfonos móviles. La principal característica de esta herramienta, es que permite crear aplicaciones híbridas en HTML, Javascript y CSS.

La plataforma está construida sobre otro popular framework de Javascript, Angular JS. Por lo que es recomendable conocerlo antes de aventurarnos a programar con ella.

Ionic está pensada para usar las API’s nativas de Apache Cordova, que son un conjunto de herramientas que nos dan acceso directo al uso del hardware del teléfono como la cámara, el gps o el acelerómetro utilizando Javascript.

Instalar Ionic JS

Antes de instalar Ionic, deberemos instalar NodeJS, para poder descargar paquetes y dependencias de Ionic.

Una vez instalado abrimos una linea de comandos y ejecutamos:

npm install ionic -g

Ahora instalaremos Cordova:

npm install cordova -g

Ionic soporta un conjunto de comandos para manejar la aplicación de forma sencilla. Para crear una aplicación usaremos:

ionic start miaplicacion blank

En este caso el nombre de nuestra app es miaplicacion y blank es el nombre de la plantilla que usaremos. Si accedemos a la carpeta miaplicacion, veremos la estructura de archivos y directorios de nuestra APP.

Si nos fijamos, hay una carpeta llamada www, que es donde se guardan los archivos HTML, CSS, y Javascript por defecto que usará nuestra aplicación.

Ejecutar la aplicación en el navegador

Para testear nuestra aplicación de la forma más sencilla, es probarla en nuestro navegador. Para ello, desde la linea de comandos, nos situaremos en la carpeta miaplicacion y ejecutamos la instrucción:

ionic serve

Se abrirá el navegador apuntando a la url http://localhost:8100 con nuestra aplicación. Podemos redimensionar manualmente la pantalla del navegador para ver como se adapta el diseño responsive.

Ejecutar la aplicación en un emulador

Para probar la aplicación en un emulador, primero debemos descargarlo. Para usar un emulador android podemos ejecutar el comando:

ionic platform add android

Una vez instalado, compilamos el código de nuestra APP para dejarlo preparado para el emulador:

ionic build android

Y finalmente ejecutamos el emulador:

ionic emulate android

Se abrirá una aplicación que que simula un teléfono móvil y automáticamente veremos nuestra APP en la aplicación.

Para más información sobre otros emuladores como el IOS de apple, puedes visitar la página http://ionicframework.com/docs/guide/installation.

Ejecutar la aplicación directamente en el dispositivo móvil

Finalmente, para ejecutar la aplicación en el dispositivo podemos ejecutar:

ionic run android

Este comando compilará y ejecutará la aplicación. Si tenemos el dispositivo conectado al PC, y configurado para permitirlo, veremos como se instala la aplicación APK en el móvil.

Te esperamos en los próximos artículos en donde hablaremos mas acerca de estos temas que hoy en día son de importancia e interés en el mundo de la tecnología.