Ionic Framework, PouchDB y Cloudant: la combinación perfecta totalmente expuesta Parte 02


Esta es una continuación de la serie sobre desarrollo en móviles que comencé aquí. Les recomiendo comenzar a escribir el código fuente desde la parte 1 ya que no se publica el código para descarga.

Les recomiendo que la revisen de principio a fin pues es una guía paso a paso de absolutamente todo lo que tienen que hacer para comenzar en este mundo de móviles con javascript. Averiguarlo por cuenta propia es algo que les tomaría muchos meses, se los aseguro. Y si es algo largo, pues vale la pena pues cubre todos los aspectos.

En esta segunda parte voy a centrarme en las capacidades móviles de la plataforma Ionic y en como PouchDB se acomoda a cada una de las capacidades de nuestros equipos para escoger el mejor almacenamiento para los datos. Y de gratis, sus aplicaciones móviles sincronizarán sus datos con Cloudant.

Comenzaremos con el código que dejamos en el post anterior.

Preparando el ambiente

Para poder empezar a generar el código para las diversas plataformas, tenemos primero que instalar el SDK de cada una de ellas. El foco va a estar en Android y Windows Phone 8. Si quieren generar para iOS necesariamente deben estar en Mac (Si no tienen para comprarse aunque sea una Mac mini, aún les queda crear una máquina virtual con VMware). Pueden generar para mas plataformas si quieren: BlackberryOS 10, Firefox OS, incluso pueden generar para Windows 8 o Tizen y otros, pero todas estas plataformas, tienen sus cositas, hay que hacer ciertos trucos  o simplemente son dificiles de conseguir. Según las pruebas que he hecho, si se van con Android, Wp8 y iOS no tendrán casi problemas.

Empecemos con Android:

Revisemos lo que estamos haciendo: El Java SDK es la base de todo, pero para que funcione bien, debemos fijar la variable de entorno porque otras herramientas se fijan en ese valor para funcionar bien. Para crear estas variables tienen que ir a Mi PC – Propiedades – Configuración avanzada del sistema – Variables de entorno  y de preferencia crearlas como variables del sistema. En resumen:

Paquete Variable Por defecto Debe ser Agregar al Path
Java SDK JAVA_HOME C:\Program Files\Java\jdk1.8.0_40 la ruta donde instalen el jdk  nada
ANT ANT_HOME C:\ant\ la ruta donde descompriman el zip de ant  %ANT_HOME%\bin
Android SDK ADT_HOME C:\program files\android-sdk\ la ruta donde instalen el sdk %ADT_HOME%;

%ADT_HOME%\platform-tools;

Con esto ya tienen listo su entorno para Android. Para Windows Phone 8, basta con que instalen Visual Studio Community 2013 update 4 desde aquí .

Finalizo con algunas sugerencias:

  • Para Android: No usen el emulador que viene en el SDK, usen Genymotion
  • Para Windows Phone: usen un equipo real conectado al USB trabajen cargando el proyecto generado en Visual Studio

Plus: Para MAC tendrán que instalar unos paquetes adicionales en NodeJS: ios-sim y ios-deploy y los instalas fácil con el comando npm install -g <paquete>.

Generando los binarios

Ahora si empieza la diversión y para eso nos vamos a una línea de comandos y nos ubicamos en la carpeta donde dejamos el proyecto Superdatos. Aqui empezaremos a ver los potentes comandos de Ionic.

Agregando una versión de Superdatos para Android:

c:\projects\superdatos\>ionic platform android

Y después de unos segundos ya tendremos nuestra versión para android. ¿No me creen? Entonces lancen Genymotion o conecten su Android a la computadora y luego ejecuten:

c:\projects\superdatos\>ionic run android

Con esto verán su aplicación ejecutarse en un emulador o en su móvil tal cual lo vieron en el navegador. Simple y limpio. Y si quieren una versión para Windows Phone 8 el comando es :

c:\projects\superdatos\>ionic platform wp8

Aquí, como les recomendé, lo mejor es abrir el proyecto generado en c:\projects\superdatos\platforms\wp8 con Visual Studio y ejecutar el proyecto en un emulador o en un móvil conectado.

NOTA: En algún momento les dije que Ionic no soportaba WP8 y es cierto, y por lo que han visto, se darán cuenta que el resultado está algo feo ya que no se ven los iconos. Para suerte de ustedes, y después de perder mucho pelo, la solución es simple. En la ruta “www\css” encontrarán el archivo “ionic.app.css” verán esta línea:

src: url("../lib/ionic/fonts/ionicons.eot?v=2.0.1#iefix") format("embedded-opentype"), url("../lib/ionic/fonts/ionicons.ttf?v=2.0.1") format("truetype"), url("../lib/ionic/fonts/ionicons.woff?v=2.0.1") format("woff"), url("../lib/ionic/fonts/ionicons.svg?v=2.0.1#Ionicons") format("svg");

Y la cambian por esta:

src: url("../lib/ionic/fonts/ionicons.eot?v=2.0.1#iefix") format("embedded-opentype"), url("../lib/ionic/fonts/ionicons.ttf") format("truetype"), url("../lib/ionic/fonts/ionicons.woff?v=2.0.1") format("woff"), url("../lib/ionic/fonts/ionicons.svg?v=2.0.1#Ionicons") format("svg");

Recompilan su proyecto y listo. Recuerden hacer esto cada vez que tengan que generar el proyecto. Para los flojos, el cambio está en remover “?v=2.0.2” de la definición ionicons.ttf, en la columna 126 de la misma línea.

Así de simple pueden tener su aplicación para sus dispositivos con Ionic. Es bastante simple pero hay que saber AngularJS, así que para el post que viene revisaremos algo de eso para mejorar nuestro código. Además, veremos como usar plugins para habilitar mas funciones en nuestras apps móviles.


  1. 1 Ionic Framework, PouchDB y Cloudant: la combinación perfecta totalmente expuesta | Víctor Pease

    […] Part 2 […]




Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s



%d bloggers like this: