JoLuGaMa Blog

Amante de la tecnología y las cosas bien hechas

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
  • 1
    2
    3
    
    #AndroidDev PATH
    export PATH=${PATH}:~/programas/android-sdk-linux/tools
    export PATH=${PATH}:~/programas/android-sdk-linux/platform-tools
    
  • Ejecuta android sdk
  • 1
    
    $ android
    
    Instala las apis vs 19 (4.4.2)
  • Por último, instala node, cordova, ionic
  • 1
    
    $ 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
  • 1
    
    $ ionic start mispruebas sidemenu --appname "Nombre de la aplicacion" -i com.jolugama.pruebas
    
  • Instala las dependencias de bower y node_modules
  • 1
    
    $ npm install && bower install
    
  • Habilita sass
  • 1
    
    $ ionic setup sass
    
  • * Si al ejecutar con ionic serve da error en libsass:
  • 1
    2
    3
    4
    5
    6
    
    $ 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
  • 1
    
    $ ionic lib update
    
  • Ejecuta servidor, para desarrollo y testeo
  • 1
    2
    
    $ 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:
    1
    
    $ adb devices
    
    O por chrome:
    1
    2
    3
    
    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
  • 1
    
    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)

1
$ ionic emulate android

Añade la plataforma que quieras, ios o android, o los dos.

1
$ ionic platform ios android

Construye tu app (genera el instalable apk)

1
$ ionic build android

Iconos y pantalla de inicio

dentro de resources/ pon imagen 192x192px exportada a: icon.png, icon.psd o icon.ai

1
$ ionic resources --icon

y en la misma carpeta una imagen de 2208x2208px en estos formatos: splash.png, splash.psd o splash.ai

1
$ ionic resources --splash

para hacer las 2 a la vez

1
$ ionic resources

Publicación

Súbelo e invita por correo para que lo prueben

1
$ 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

Comentarios