Ionic + Android - Tu app desde cero, paso a paso.

Con este tutorial vamos a montar desde cero una aplicación para dispositivos móviles en Ionic para Android. Es una guía paso a paso que va a recorrer el proceso de preparación de entorno, creación de una nueva app y despliegue en un dispositivo/emulador en Ubuntu 14.04.

Partimos de unos prerequisitos imprescindibles que tendremos que tener instalados en nuestro entorno: NodeJS y Bower

¿Están los ingredientes preparados? pues manos a la obra:


1.- Descargar el ADT Boundle. ¿Porqué el ADT? Pues porque en un solo zip descargamos todas las herramientas necesarias para un entorno de programación Android y además un Eclipse preconfigurado.

2.- Descomprimir en una localización al gusto del programador, en mi caso para que sirva de referencia va a ser dentro del directorio ~/Development

3.- Añadir al $PATH la ruta del SDK de Android. Este tercer paso se puede resolver de diversas maneras. En mi caso voy a explicar como configuro mi path en un fichero aparte:

En primer lugar me voy a crear un nuevo fichero que va a recoger el export de $ANDROID_HOME y posibles configuraciones futuras. El fichero se va a llamar ~/.bash_env y su contenido algo como:

export ANDROID_HOME=~/Development/adt-bundle-linux-x86_64-20140702/sdk

export ANDROID_HOME_TOOLS=$ANDROID_HOME/tools

export PATH=$PATH:$ANDROID_HOME:$ANDROID_HOME_TOOLS

Prestad atención a a la distribución adt-bundle-linux-x86_64-20140702 que coincida con la vuestra.

El siguiente paso es la referencia a este nuevo fichero en ~/.bashrc y para ello vamos a agregar las siguientes líneas:

if [ -f ~/.bash_env ]; then
    . ~/.bash_env
fi

y finalmente para refrescar los cambios en las variables de entorno:

$ source ~/.bashrc

Bien, ahora deberíamos ser capaces de invocar en Android Package Manager tecleando en consola:

$ android

si es así, ya que lo tenemos abierto tendremos que descargar al menos la API 19 de android. Marcamos he instalamos el SDK Platform y Build Tool.


4.- Instalación de Apache Cordova e Ionic

$ npm install -g cordova ionic

Para probar si todo está marchando bien, una vez instalado podemos teclear el comand:

$ ionic 

y deberíamos obtener en nuestra consola el siguiente prompt:

 (_)           (_)     
  _  ___  _ __  _  ___ 
 | |/ _ \| '_ \| |/ __|
 | | (_) | | | | | (__ 
 |_|\___/|_| |_|_|\___|  CLI v1.2.8

Usage: ionic task args

=======================

Available tasks: (use --help or -h for more info)

   start  ..........  Starts a new Ionic project in the specified PATH
   serve  ..........  Start a local development server for app dev/testing
   platform  .......  Add platform target for building an Ionic app
   run  ............  Run an Ionic project on a connected device
   emulate  ........  Emulate an Ionic project on a simulator or emulator
   build  ..........  Locally build an Ionic project for a given platform
   plugin  .........  Add a Cordova plugin
   package  ........  Package an app using the Ionic Build service (beta)
   upload  .........  Upload an app to your Ionic account
   lib  ............  Gets Ionic library version or updates the Ionic library
   setup  ..........  Configure the project with a build tool (beta)

5.- La siguiente fase va referida a la aplicación en si. Ionic framework provee de; varios tipos de armazones que podemos emplear como punto de partida, para ello donde vayamos a crear la app tecleamos:

$ ionic start myNewIonicApplicationTest sidemenu

Ya tenemos nuestra aplicación Ionic, entramos en el directorio myNewIonicApplicationTest y a continuación  traemos las dependencias específicas de este proyecto con:

$ bower install

$ npm install

Ya está completa, ahora para empezar podríamos lanzar el la app en el navegador, extremadamente útil para agilizar el proceso de desarrollo:

$ ionic serve 

y para dotar nuestra aplicación con la plataforma Android tecleamos:

$ionic platform add adroid

si tenemos un dispositivo móvil conectado con los permisos de desarrollo ya estamos en disposición de desplegar nuestra app, simplemente tecleamos:

$ionic run

En caso contrario tendríamos que configurar un dispositivo virtual en el emulador. Una vez se ha ejecutado el compilado, empaquetado y despliegue la aplicación arrancará automáticamente.

Yo recomiendo para ganar tiempo, si no es imprescindible, ya sea por motivos de acceso a funcionalidad expresa del propio dispositivo, trabajar lo máximo posible vía navegador.

Tola la documentación necesaria sobre el framework la podréis encontrar para vuestros desarrollos aquí.

Por cierto he encontrado un plugin para eclipse para AngularJS que le va genial, ya que como nos hemos podido percatar el el framework javascript que se esconde dentro de Ionic. Instrucciones para su instalación.

A disfrutar, saludos!

Oculus VR

Esta entrada se sale un poco de la línea habitual, pero es que he tenido la suerte de probar el kit de desarrollo 2 del proyecto Oculus VR y no quería dejar pasar la oportunidad de describir mi impresión que básicamente podría resumir con un grandilocuente... Guauuu!

Muchos años llevamos soñando los que como gente como yo hemos disfrutado de las películas, libros de fantasía y ficción. Muchos, hace unos algunos años, unos veintitantos, vimos como el concepto de Realidad Virtual saltaba al gran publico con películas y atracciones muy complejas y costosas. Pero ahí quedó la idea. La tecnología aún no había alcanzado a la ficción y películas como "El cortador de cesped" o tantas otras quedaron en eso, en películas.

Pero los sueños perduran y la tecnología avanza. Mas potente, más barato, más real. Hace 25 años era impensable llevar en un bolsillo un dispositivo smartphone, hemos de ser conscientes que en menos de 3 décadas el salto tecnológico que estamos experimentando es impresionante, y ¿sabéis que es lo mas emocionante? Que lo mejor está por llegar.

Es esa la sensación que he experimentado con algunas de las demos y juegos completos que ya se pueden descargar desde la web del proyecto. La sensación de asomarte a un nuevo horizonte de posibilidades, un basto universo por explorar en campos como el ocio, la educación, los negocios y las relaciones personales.

Esta que estáis viendo en la foto es la versión 2 del kit de desarrollo, es decir que aún no está cerrado el producto para su distribución masiva. El precio con los gastos de envío ronda los 400€ y la instalación y puesta a punto aún requiere un grado de dedicación ya que aún puede dar problemas según la configuración y sistema operativo.

Llama la atención en primer lugar su peso liviano a pesar de dar un aspecto tosco. En seguida nos olvidamos que las llevamos puestas y notamos como si lleváramos unas gafas de buceo, y es esa la sensación que vamos a tener al asomarnos al mundo virtual.

La siguiente impresión es la muy eficaz respuesta a los movimientos de la cabeza gracias al nuevo sistema de posición y seguimiento de movimientos que viene en el kit. La sensación inmersiva es excelente, los movimientos son fluidos en todos los ejes dimensionales, ya podemos acercar la cabeza para mirar en detalle.

La resolución 960 x 1080 por ojo, los sensores giroscópico, magnetómetro, acelerómetro funcionan muy bien y el resultado es espectacular. Tan bien, que en la demo de la montaña rusa incluso podemos sentir la sensación de mareo.
El sonido envolvente hace el resto, en muy pocos instantes estás dentro viviendo la experiencia.

Bajo mi punto de vista, el hardware está prácticamente preparado, ahora el siguiente paso es explotar las aplicaciones que podrán ser muchísimas y variadas y estoy seguro que la pasión que está poniendo el equipo del proyecto podría ser semenjante a la de los exploradores de otra época ante el avistamiento de nueva tierra por explorar. Así de claro lo tuvo que ver Mark Zuckerberg cuando compró el proyecto por la nada desdeñable cantidad de 2000 millones de dólares.

No hay fecha para el lanzamiento definitivo aún, pero seguro que no será hasta que el producto final cumpla con las mas exigentes expectativas tanto en software como en hardware.

Es tan interesante que muy probablemente otras multinacionales estén expectantes y no me cuesta imaginar a la competencia cocinando sus posibles contra-medidas como el proyecto Morpheus de Sony, por ejemplo.

La industria se prepara para dar un nuevo salto, el gran salto a la Realidad Virtual y aquí estaremos para vivirlo.

Saludos!

Liquibase + Grunt + MySQL

He encontrado un paquete en NPM, grunt-liquibase, que permite gestionar Liquibase con sencillos comandos en Grunt. Lo que nos va a facilitar la integración en nuestro proyecto una gestión eficiente de control de cambios en la estructura y contenido de la base de datos.

Una buena gestión de cambios en la base de datos en un proyecto durante el proceso de desarrollo es muy útil, pero un paso seguro y eficiente a otros entornos como producción es imprescindible.
Podríamos pensar que es el equivalente a un gestor de repositorio de código, pero con la base de datos. Si estamos como es usual en un equipo de desarrollo y cada uno modela la base de datos según su "Story User" puede convertirse en un martirio cada "update".
Para ello Liquibase se basa en changesets o acciones que se ejecutan de manera atómica y secuencial, de así podemos ir añadiendo cambios sin entrar en conflicto con los cambios de otros desarrolladores, además de saber exactamente que es lo que se va a desplegar y cuando.

Por otro lado tenemos Grunt. Ya hemos hablado un poco sobre este poderoso gestor de tareas.
Y finalmente pero no menos importante la base de datos. Por defecto grunt-liquibase viene por defecto con soporte para posgreSQL, pero para este ejemplo en cuestión vamos a utilizar la extensión del mismo para MySQL grunt-liquibase-mysql.

Ya tenemos los ingredientes, y el entorno (NodeJS y NPM), encendemos el fuego y manos a la obra:

Como todo proyecto en Node vamos a necesitar configurar las dependencias en nuestro fichero package.json, si no lo tenemos lo podemos inicializar con el comando npm init o usar mio de ejemplo:


{
  "name": "LiquibaseGruntMySQL",
  "version": "0.0.0",
  "description": "Testing Liquibase, Grunt & MySQL integration",
  "main": "Gruntfile.js",
  "dependencies": {
    "grunt": "~0.4.5",
    "grunt-liquibase": "~0.1.5",
    "grunt-liquibase-mysql": "~0.1.6"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "reqtangular",
  "license": "BSD-2-Clause"
}

ya con las dependencias configuradas podemos ejecutar la instalación:

npm install

Muy bien, ahora tenemos las herramientas. El siguiente paso sería la configuración del fichero para Grunt, Gruntfile.js, podríamos agregar la tarea si ya lo tuviésemos o crear uno nuevo como el que sigue:


grunt.initConfig({
  liquibase : {
    options: {
      changeLogFile : 'dbchangelog.xml',
      username : 'root',
      password : 'root',
      url : 'jdbc:mysql://localhost/liquibase_test',
      driver: 'com.mysql.jdbc.Driver',
      classpath: 'node_modules/grunt-liquibase-mysql/lib/mysql-connector-java-5.1.30-bin.jar'
    },
    update: {
      command: 'update'
    },
    dropAll: {
      command: 'dropAll'
    },
    version : {
      command: 'version'
    }
  },
});

  // Default task(s).
  grunt.registerTask('default', ['liquibase']);
};


En la sección de options parametrizamos el plugin, Base de datos, driver, classpath del mísmo y lo mas importante el fichero de registro de cambios para Liquibase, en este caso llamado dbchangelog.xml, pero si no lo definimos el nombre por defecto será changelog.xml. El resto de opciones las podéis encontrar en la propia página del plugin.

Para terminar el ejemplo solo quedaría definir nuestros cambios en la base de datos, tablas, campos en ellas, relaciones entre entidades, datos inyectados por defecto, vistas, etc.

Vamos a crear una tabla en la base de datos "liquibase_test" (que tendremos que tener creada previamente)

<databaseChangeLog
  xmlns="http://www.liquibase.org/xml/ns/dbchangelog"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://www.liquibase.org/xml/ns/dbchangelog
         http://www.liquibase.org/xml/ns/dbchangelog/dbchangelog-3.1.xsd">

 <changeSet id="1" author="bob">
        <createTable tableName="department">
            <column name="id" type="int">
                <constraints primaryKey="true" nullable="false"/>
            </column>
            <column name="name" type="varchar(50)">
                <constraints nullable="false"/>
            </column>
            <column name="active" type="boolean" defaultValueBoolean="true"/>
        </createTable>
    </changeSet>


</databaseChangeLog>


Y con todo esto ya estamos preparados para hacer nuestro primer update, para ello bastaría con ejecutar el comando:

 grunt liquibase:update --verbose

Si la última línea es de color verde y dice "Done, without errors." es que todo ha ido a pedir de boca. Rico, rico!

Espero que os haya sido útil. Saludos!

Protractor para AngularJS

Ya hemos hablado en varios post sobre desarrollo de aplicaciones usando el framework AngularJS y a los que llevamos unos cuantos proyectos a la espalda se nos antoja muy necesaria una completa gestión sobre la calidad del producto que estamos desarrollando. Tristemente no siempre es un aspecto que se aborda en un mundo donde prima la velocidad del desarrollo sobre la calidad. Y ese es un clamoroso error, porque al final lo barato sale caro. El tiempo que vamos a ahorrar desarrollando de cualquier manera para llegar a objetivos lo vamos a consumir en la resolución de errores e imprevistos en los despliegues. Problemas que crecerán tanto en cuando el número de aportaciones crezca. Afortunadamente para ello existen múltiples herramientas para la automatización de pruebas de integridad, una de las mas conocidas podría ser Selenium HQ. Pues bien, si a la potencia y flexibilidad que aporta Selenium lo combinamos con AngularJS obtenemos Protractor la herramienta completa y eficaz para comprobar que todo sigue funcionando antes de "comitear" nuestro código.

Para romper un poco el hielo vamos a seguir el completo tutorial que nos ofrece la página de Protractor para la puesta a punto y uso. Asumimos como siempre que estamos desarrollando en un entorno Linux con NodeJS y Npm instalados.

Comenzaremos instalando en nuestro sistema a nivel global los paquetes de Protractor desde Npm:

$npm install -g protractor

Una ves instalado nos aseguramos que la herramienta webdriver-manager está actualizada e iniciada con:

$webdriver-manager update

$webdriver-managerstart

Ya tenemos el entorno preparado. Lo siguiente sería la configuración en nuestro proyecto.
Para ello  crearemos un fichero llamado conf.js con el contenido

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['todo-spec.js']
};

Atención que el truco está en la definición de nuestro fichero para la batería de pruebas spec.js (Nombre orientativo)

Para una primera prueba bastaría con copiar dentro del mismo el sigueinte contenido:

describe('angularjs homepage todo list', function() {
  it('should add a todo', function() {
    browser.get('http://www.angularjs.org');

    element(by.model('todoText')).sendKeys('write a protractor test');
    element(by.css('[value="add"]')).click();

    var todoList = element.all(by.repeater('todo in todos'));
    expect(todoList.count()).toEqual(3);
    expect(todoList.get(2).getText()).toEqual('write a protractor test');
  });
});

Y para lanzar finalmente por consola el test:

$protractor conf.js

Una nueva instancia de nuestro navegador se abrirá y ejecutara las pruebas.  Y en la consola obtendremos el resultado de las mismas.


si todo ha ido bien, nuestra aplicación se mantiene estable ;)


Mas información y tutoriales aquí.


Saludos!