Ionic framework es un SDK Open Source para crear aplicaciones móviles híbridas. Funciona con Sass y está optimizado para AngularJS.

Instalación de Ionic Framework

Antes de instalar ionic, es necesario tener instalado cordova para poder crear los proyectos, si ya lo tienes, puedes saltarte este paso:

Ahora instalamos ionic:

Nota: En OSX/Linux es necesario usar “sudo” para una instalación global.

Ademas de esto, vamos a necesitar nodejs para poder usar los comandos de ionic, como por ejemplo crear un proyecto nuevo, aquí puedes ver como instalar nodejs en Ubuntu.

Crear una Aplicación con Ionic Framework

Las plantillas (templates) pueden ser el nombre de una plantilla o un repositorio Github, Codepen, o directorio local.

Nombres de plantillas:

• tabs (por defecto)
• sidemenu
• maps
• salesforce
• tests
• complex-list
• blank

Repositorios Github

• Cualquier repositorio Github como por ejemplo: https://github.com/driftyco/ionic-starter-tabs
• Los nombres de plantilla son simplemente alias a repositorios.

URL de Codepen

• Cualquier URL de Codepen como por ejemplo: http://codepen.io/ionic/pen/odqCz
• Demos de Ionic en Codepen

Añadir una plataforma/Sistema operativo

Lanzar aplicación en navegador

Esta opción es muy útil para probar rápidamente la aplicación directamente en el navegador, tiene refresco automático por lo que cualquier cambio en el proyecto se verá reflejado al instante, ademas podemos conectar desde el navegador de un dispositivo móvil conectado a la misma red local.

Recomiendo usarlo con la opción “–lab“, para una vista doble (IOS y Android) y simulando una vista móvil.

Compilar la aplicación

Lanzar aplicación a dispositivo

Por defecto se lanzará al dispositivo que tengamos conectado por USB, si no, se lanzará al emulador.

Opciones

• [–livereload|-l] – La aplicación se refresca automáticamente al igual que el comando “serve”, actualmente en beta.
• [–consolelogs|-c] – Imprime en la consola el log de la aplicación, requiere livereload.
• [–serverlogs|-s] –  Imprime en la consola el log del servidor, requiere livereload.
• [–port|-p] – Puerto del servidor HTTP, 8100 por defecto, requiere livereload.
• [–livereload-port|-i] – Puerto de livereload, 35729 por defecto, requiere livereload.
• [–browser|-w] – Especifica que navegador usar (safari, firefox, chrome).
• [–browseroption|-o] – Especifica la ruta a abrir (/#/tab/dash).
• [–debug|–release]

Emular la aplicación

Es simplemente un alias para el comando run –emulator.

Generar Icono y Pantalla Inicial de la Aplicación

Para generar tanto el icono como la pantalla inicial:

Generar Icono

Guardar en el directorio “resources” en la raíz del proyecto icon.png, icon.psd o icon.ai, puedes descargar la plantilla del icono Photoshop.

Las dimensiones mínimas del icono deben ser 192×192 px, y no debería tener los bordes redondeados. Cada plataforma aplica sus propios efectos a los iconos.

Generar Pantalla Inicial

Las dimensiones mínimas deben ser 2208×2208 px, y el contenido debe estar centrado y no debería ser mayor de 1200x1200px.

Guardar en el directorio “resources” en la raíz del proyecto splash.png, splash.psd o splash.ai, puedes descargar la plantilla Photoshop.

Actualizar la librería Ionic

Actualiza la librería ionic que se encuentra en www/lib/ionic.

Empaquetar aplicación (beta)

Para compilar la aplicación en un paquete listo para subir a una tienda de aplicaciones, se puede usar este servicio de ionic que no requiere tener los SDKs nativos en nuestro ordenador:

El segundo argumento puede ser debug o release, y el tercero android o ios.

Comandos Cordova

Ionic framework funciona sobre Cordova, por lo que sobre el mismo proyecto se puede usar cualquier comando Cordova.

Usar Sass

Por defecto los proyectos iniciales vienen con el CSS precompilado en el directorio www/lib/ionic/css, si queremos hacer algún cambio sobre estos, lo mejor es usar Sass:

Esto creará el fichero scss/ionic.app.scss en nuestro proyecto y cualquier cambio será recogido por el refresco automático.

Mas información en: https://www.npmjs.com/package/ionic
Documentación: http://ionicframework.com/docs/
Aprende Ionic: http://learn.ionicframework.com/