Ionic 1.3 - Instalación y buenas prácticas
Guía de inicio para desarrollo de aplicaciones híbridas con Ionic. En github dejo mi aplicación Weather, que muestra el tiempo según gps, horarios y posicionamiento solar y lunar (y sus fases). Además dispone de tts con vibración en las alertas por lluvia, nieve, frio, calor.
Todo con las buenas prácticas de ÁngularJS de John Papa. IonicWeather
¿Qué es?
Es un conjunto de herramientas (angularjs, cordova), configuraciones (gulp con su sistema de carpetas ya preparada), junto con un framework css propio responsive diseñado para móviles que hacen ágiles el desarrollo de una aplicación. Además cuenta con su propia nube para alojar apliciones así como crearlas muy fácilmente.
Instalación
http://learn.ionicframework.com/
http://learn.ionicframework.com/videos/windows-android/
- Instala java
- Descarga apache ant (sudo apt-get install ant)
- Descarga android SDK. descomprime y dentro de la carpeta bin ejecuta ./studio.sh (se instalará adt-bundle-linux)
- Añade android SDK a PATH
- Edita .bashrc u añade
#AndroidDev PATH
export PATH=${PATH}:~/programas/android-sdk-linux/tools
export PATH=${PATH}:~/programas/android-sdk-linux/platform-tools
- Ejecuta android sdk
$ android
Instala las apis vs 19 (4.4.2)
- Por último, instala node, cordova, ionic
$ sudo npm install -g node cordova ionic
### Creación del proyecto Ionic dispone de templates para poder empezar el proyecto. templates: tabs, sidemenu, blank
- Crea un proyecto de pruebas, indicando el nombre, tipo de template, descripción
$ ionic start mispruebas sidemenu --appname "Nombre de la aplicacion" -i com.jolugama.pruebas
- Instala las dependencias de bower y node_modules
$ npm install && bower install
- Habilita sass
$ ionic setup sass
- Si al ejecutar con ionic serve da error en libsass:
$ sudo npm install -g n
$ sudo n 0.12.7
$ sudo npm install node-sass@2
$ sudo npm -g install node-gyp@3
$ sudo npm rebuild node-sass
$ sudo ionic setup sass(2 veces)
- Actualiza ionic
$ ionic lib update
- Ejecuta servidor, para desarrollo y testeo
$ ionic serve
$ ionic serve --lab (para testear android y ios)
Visualización en dispositivo
Dos opciones, con emuladores o con un dispositivo móvil/tablet real.
- En dispositivo real, debes tener instalado los driver (adb) del dispositivo(marca y modelo en las webs oficiales) Para saber si es detectado:
$ adb devices
O por chrome:
chrome://inspect/#devices
$ ionic run android
$ ionic run android --livereload (al grabar cualquier archivo se recarga)
-
En emulador genymotion https://www.genymotion.com/
si no hay dispositivo conectado y genymotion lo tienes instalado, abierto y con dispositivos virtuales creados, abre uno y ejecuta. -
Debuggear, por emulacion o real
chrome://inspect/#devices
Aparecen las webview ejecutadas del dispositivo. Pinchar en inspect.
*Con genymotion, para que funcione livereload, hay que configurar virtualbox:
En configuracion, red.
Adaptador 1 –> adaptador solo anfitrion
Adaptador 2 –> adaptador puente, wlan0 (el nombre de la tarjeta wifi)
Para modo emulador (perviamente te tienes que descargar las apis)
$ ionic emulate android
Añade la plataforma que quieras, ios o android, o los dos.
$ ionic platform ios android
Construye tu app (genera el instalable apk)
$ ionic build android
Iconos y pantalla de inicio
dentro de resources/ pon imagen 192x192px exportada a: icon.png, icon.psd o icon.ai
$ ionic resources --icon
y en la misma carpeta una imagen de 2208x2208px en estos formatos: splash.png, splash.psd o splash.ai
$ ionic resources --splash
para hacer las 2 a la vez
$ ionic resources
Publicación
Súbelo e invita por correo para que lo prueben
$ ionic upload
(te tienes que logar)
Una vez subido, se puede invitar a cualquier amigo a probarlo. Tan sólo se tiene que tener instalado en el dispositivo destino "ionic view", abre, descarga y visualiza. $ ionic share ejemplo1@gmail.com