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:
1 |
npm install -g cordova |
Ahora instalamos ionic:
1 |
npm install -g 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
1 |
ionic start myapp [template] |
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
1 2 |
ionic platform add ios ionic platform add android |
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.
1 |
ionic serve [options] |
Recomiendo usarlo con la opción “–lab“, para una vista doble (IOS y Android) y simulando una vista móvil.
Compilar la aplicación
1 2 |
ionic build ios ionic build android |
Lanzar aplicación a dispositivo
Por defecto se lanzará al dispositivo que tengamos conectado por USB, si no, se lanzará al emulador.
1 2 |
ionic run ios [options] ionic run android [options] |
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.
1 |
ionic emulate ios [options] |
Generar Icono y Pantalla Inicial de la Aplicación
Para generar tanto el icono como la pantalla inicial:
1 |
ionic resources |
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.
1 |
ionic resources --icon |
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.
1 |
ionic resources --splash |
Actualizar la librería Ionic
Actualiza la librería ionic que se encuentra en www/lib/ionic.
1 |
ionic lib update |
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:
1 |
ionic package debug android |
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:
1 |
ionic setup 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/
Pingback: Genymotion en Ubuntu - Instalación - JosmanTek Blog()