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!

RequireJS

Hay momentos en los que la cantidad de librerías JavaScript de terceros que estamos usando en nuestra aplicación es tan grande que se hace necesario poner un poco de orden, bien por legibilidad o por prestaciones para que la carga de las mismas se haga de una forma óptima. Para ello están los gestores de cargas de librerías, y entre ellos RequireJS.

Ya en su momento comentamos Bower y como nos iba a facilitar la vida para gestionar las dependencias de nuestro proyecto. Pues bien, una vez que ya tenemos las librerías hay que integrarlas en nuestro framework favorito y poder hacer uso de ellas.

Estupenda documentación para dar los primeras pasos aquí.

Para ver un poco de tripa vamos a usar el caso práctico de, y como su propio nombre indica reqtangular, la integración entre AngularJS y RequireJS. El primero como framework y el segundo como gestor de carga.

Todo pasa por descargarse la última versión de RequireJS y agregarla como hasta ahora hemos ido haciendo, es decir, que podríamos crear por ejemplo un directorio llamado libs y copiar dentro el fichero require.js.
A continuación hacer referencia en nuestro index.html de la siguiente manera:

<script src="libs/require.js" data-main="scripts/main.js"></script>

atención al atributo data-main, aquí está la madre del cordero, ya que es ahí y solo ahí donde vamos a gestionar el resto de dependencias. El contenido de main.js en reqtangular tiene un aspecto tal que así.

Observad que que todo lo que estamos haciendo es construir un objeto JSON que vamos a inyectar en require.config con el nombre y la ruta.

require.config({

paths: {

angular: '../../bower_components/angular/angular',

'angular-animate': '../../bower_components/angular-animate/angular-animate'

...

Aquí es donde a mano incluiremos cada una de las líneas, como estamos usando bower, el destino por defecto de las librerías al ser descargadas es bower_components.

Hay veces que los módulos que queremos montar no soportan la arquitectura AMD, o que un módulo depende directamente de otro. En ese caso recurrimos a la configuración shim. En nuestro main.js se puede entender un ejemplo de como 'angular-route' depende directamente de angular:

'angular-route': [

'angular'

]

Y finalmente para hacer ensamblar definitivamente la dependencia en AngularJS emplearemos ya la sintaxis que corresponde y podéis ver al final del fichero.

require([

'angular',

'app',

'angular-route',

...

Espero que os sirva de guía para poder empezar RequireJS sin que nos tiemblen las rodillas. ;)

Saludos!

AngularJS 2

Los días 22 y 23 de Octubre se han reunido en París los padres de AngularJS y máximas personalidades de frameworks relacionados para mostrar las últimas novedades y avances e intercambiar experiencias y opiniones en el ngEurope.

Se esperaba con máxima expectación la charla de Igor Minar @IgorMinar  ingeniero de Google a cargo del proyecto AngularJS y parece que no ha dejado indiferentes a los espectadores cuando se presentaron las directivas de diseño para lo que va a ser la versión 2, actualmente 1.3.

Los cambios no van a ser triviales y va a afectar sustancialmente la experiencia como desarrollador y usuario. Algunas de las líneas maestras para esta nueva versión van a ser:

• Soporte para el estándar ES6, aunque se va a poder seguir usando la actual versión 5.
• Mejoras en la modularidad.
• Simplificación de la inyección de dependencias, declarativa en vez de imperativa.
• Mejoras en el Templating y directivas.
• Mejoras en la persistencia.
• Integración de la librería diary.js para mejorar la gestión de mensajes logs.

Aquí podéis ver las diapositivas de la ponencia, donde resulta muy llamativo el cambio en la sintaxis del código y el anuncio de las defunciones de los controladores, DDO, $scope, Angular.module y jqLite... casi nada.

Habrá que estar atentos durante el tiempo que transcurra hasta la liberación de esta versión e ir asimilando los cambios que seguro serán para simplificar mas si cabe el desarrollo de aplicaciones web y móviles.

Saludos!

Cyclon.js

Para todos aquellos que trabajan con cacharros y experimentan con ellos ha legado Cyclon.js para facilitaros la vida. Una librería que soporta múltiples plataformas (Arduino, ARDrone, Open CV, Phillips Hue, etc...) que facilita la programación de los dispositivos automatizados, drones y demás, que están cada vez mas y mas extendidos.

Pues bien, ¿Qué tal si pudiéramos usar JavaScript para programarlos?.
He aquí un ejemplo extraído de la web:

var Cylon = require("cylon");
// Initialize the robot 
var robot = Cylon.robot({ 
     // Change the port to the correct port for your Arduino. 
     connection: { name: 'arduino', adaptor: 'firmata', port: '/dev/ttyACM0' }, 
     device: { name: 'led', driver: 'led', pin: 13 },

     work: function(my) { 
     // we do our thing here every((1).second(), function() { my.led.toggle(); 
     });
   }
  });
 // start working
 robot.start();

Este es un ejemplo para Arduino con protocolo Firmata y gracias al gestor de paquetes de Node integrarlo en nuestro entorno de desarrollo es tan sencillo como:

$ npm install cylon

$ npm install cylon-firmata 

Muchos mas ejemplos y documentación a tu servicio... humano.

Saludos!

 

Grunt

Grunt es una de esas herramientas que cuando las conoces y las integras en tu proyecto te das cuenta del tiempo que has perdido durante un desarrollo. Nos encontramos ante uno de los automatizadores de tareas mas conocidos para JavaScript junto con Gulp.

Se sirve de una numerosa lista, 3757 en este momento, de Plugins para solucionar una cantidad ingente de necesidades. Por ejemplo y mas básicas, levantar una instancia de la aplicación en un navegador, actualizar la vista del navegador ante cualquier cambio de fichero para agilizar el desarrollo.

Los primeros pasos para integrar esta herramienta, sencillos, como siempre Node y NPM para a continuación instalar recomendablemente de manera global el cliente Grunt.

npm install -g grunt-cli

Si no tenemos el fichero de configuración de Node en nuestro proyecto package.json tendremos que crearlo:

npm init

A partir de este momento ya somos libres de configurar nuestro fichero Gruntfile.js en el directorio raíz. Este es la piedra angular donde configuramos Grunt, importamos las dependencias a los plugins y definimos las tareas.

Aquí un ejemplo en la documentación. Y aquí el fichero Grunt del proyecto Reqtangular.

Y ahora, a ahorrar tiempo ;)

Saludos!

Polymer

"Welcome to the future"

Con esta sugestiva frase nos reciben en la web del proyecto polymer y no se si será el futuro, pero desde luego es una aproximación al desarrollo orientado a módulos. Como podemos adivinar por el nombre debemos imaginar que nos encontramos ante un framework que nos va a permitir modelar aplicaciones desktop y móviles a partir de piezas individuales y autónomas llamadas elementos.

El propio framework nos va a proveer de un gran números de estos elementos preparados para usar. Y ensamblar en nuestro proyecto. Fundamentalmente la ventaja, además de un alto grado de escalabilidad es la reusabilidad de dichos elementos. Además de una amplia documentación para crear los nuestros propios.

Como ya hemos hablado un poco en este blog de Yeoman os recomiendo que usemos el generador oficial para comenzar un nuevo proyecto, así en muy pocos minutos podemos empezar a jugar con nuestro nuevo kit de piezas y construir un nuevo juguete.

El mismo enlace al proyecto nos muestra toda la documentación necesaria para la instalación y uso del mismo. Como siempre para NPM.

Finalmente os dejo el vídeo de instalación y uso para despegar en este  framework de desarrollo.

 

 Ahora manos a la obra...

Saludos!

Yeoman

¿Cuantas veces no hemos deseado disponer de una aplicación base para empezar un nuevo proyecto? Un artesonado, versátil con las tecnologías precisas perfectamente integradas listas para usar.

Para ello podemos, o bien, tirar de repositorio de proyectos antiguos para fijarnos como se hizo aquella vez, o bien investigar y pelearte con una nueva integración o buscar en el listado de mas de 1100 generadores en plataforma de Yeoman e incluso, ¿Por qué, no? crear nuestro propio generador para poder reusarlo tantas veces como nos haga falta. Ya se sabe el dicho en desarrollo "Si estás copiando y pegando mucho, algo no estás haciendo bien".

En el caso de Reqtangular, lo que empezó como una necesidad básica para crear módulos unitarios funcionales en un proyecto fundamentalmente AngularJS ya que cada vez que se iba a implementar una nueva funcionalidad el proceso siempre era copiar + pegar otro módulo y reescribirlo. Sin embargo con el generador la tarea se redujo a:

$ yo reqtangular:blankModule

Donde yo es la herramienta cli de yeoman, reqtangular el nombre del generador y blankModule el sub-generador.

Mediante una completa librería de prompting podemos obtener adicional y guiar el proceso de generación.

Y es que tremendamente sencillo usar esta herramienta. Instalamos Yeoman con el gestor de paquetes de Node.

$ npm install -g yo 

Y estamos en disposición de instalar en nuestro sistema uno de los mas de 1100 generadores, como por ejemplo:

$ npm install -g generator-reqtangular


El último paso sería lanzar el generador y obtener como producto nuestra nueva aplicación lista para usar. Creamos un directorio nuevo y dentro del mismo ejecutar: 

$ yo reqtangular 

et voilà! Listo para empezar.


Merece la pena dedicarle un rato, porque este tipo de herramientas ayudan a ahorrar muchas horas, quebraderos de cabeza y nos permiten normalizar código en grupos de trabajo.

Saludos!

Ionic

Ionic es uno de los frameworks para desarrollo de aplicaciones móviles mas recientes y se está postulando como una de las apuestas mas firmes para los próximos años.
En mi opinión el secreto del éxito se debe a la perfecta convivencia entre la mas que probada tecnología Apache Cordova con la mas que pujante AngularJS. Si a todo ello ha asentado sobre los firmes cimientos de Node en suma disponemos de todas las herramientas necesarias para desarrollar de manera ágil sacando partido de toda la potencia de AngularJS con la flexibilidad de Cordova.

Mas información técnica sobre Ionic en este completo artículo.

Para instalar el framework deberemos tener instalado previamente NodeJS, Android, iOS en función del empaquetado para el que queramos obtener la aplicación resultante. Uno de ellos o ambos, eso si, para empaquetar en iOS tendremos que tener en cuenta que requiere Mac OS X.

Ahora ya estamos en disposición de ejecutar el comando:

$ npm install -g cordova ionic

Y de una tacada instalaremos de manera global para nuestro sistema las dependenias para Cordova e Ionic. Y con ello todo el proceso de preparación de nuestro entorno de desarrollo ya está completado. Es cuestión de un ratito, pero merecerá la pena, os lo aseguro.

Hello world!

No hay nada mejor que para empezar a familiarizarnos con un nuevo framework.
Pues bien, donde queramos crear un nuevo proyecto ejecutaríamos:

$ ionic start myApp sidemenu

myApp, es el nombre que va a tomar nuestra aplicación y sidemenu es uno de los tipos predefinidos.

Genial, pues ya tenemos nuestra aplicación. El siguiente paso sería probarla. Y para ello podemos o bien, ejecutarla en un navegador, ideal para desarrollar "like a boss" con el comando dentro del directorio raíz de nuestra app:

$ ionic serve

O bien, lanzar la app en un emulador o un dispositivo.

$ ionic emulate android

o desplegar en un dispositivo que tengamos conectado por USB:

$ ionic run android

El resto está ya en vuestras manos. :)

Saludos!

AngularJS

El salto cualitativo que están experimentando estos últimos años los entornos de desarrollo basados en Javascript son brutales. Se ha establecido todo un ecosistema de frameworks además de AngularJS como son  Backbone, Knockout, Ember. Cada uno de ellos con sus peculiaridades y características. Aquí tenéis una completa tabla comparativa.

Hoy toca hablar un poco sobre AngularJS, un completo framework creado por Miško Hevery @mhevery, un empleado de Google que presentó en el año 2012 la versión 1.0.
El concepto es tan bueno que rápidamente es elevado a categoría de proyecto oficial tipo Open source con un mantenimiento continuo por parte de una inmensa comunidad y el equipo propio de desarrollo de Google.

En tan solo un par de años una gran multitud de desarrolladores que se adhiere y crece de manera exponencial el apoyo y las aplicaciones web / movil que ya lo integran.
Básicamente su éxito radica en la modularización y la organización del código en MVC y en dotar de "súper poderes" a nuestro código HTML, lo cual estructura y simplifica el desarrollo reduciendo el tiempo de producción y por ende los costes.

Como ocurre siempre, y mas puro estilo darwiniano, durante un tiempo convivirán, los mas débiles desaparecerán y los mas fuertes prevalecen. Y muy probablemente AngularJS sea uno de los que se establezcan, no solo por ser un framework robusto y bien estructurado, si no que además lleva la firma del todopoderoso Google.

Personalmente he tenido experiencia con Backbone y más recientemente AngularJS. Mas con este último, ya que el propio proyecto Reqtangular toma el nombre de la integración de RequireJS y AngularJS además de haber participado aplicaciones para móviles tambien en este framework.

Y es que nunca se sabe, pero a la vista de la reacción de la comunidad internacional tiene pinta de que vamos a tener framework de referencia para tiempo. La gente de lostiemposcambian nos explican mas a fondo las diferencias entre los tres mas usados actualmente.

Para aquellos que os empieza a picar el gusanillo aquí tenéis un enlace a un curso gratuito con vídeos y retos que os explicará los fundamentos básicos para empezar con esta joven pero prometedora tecnología. No está de mas estar preparado para cuando se produzca el desembarco masivo en nuestro país.

Saludos!

Bootstrap

A estas alturas muchos de vosotros ya estáis familiarizados con es uso cotidiano de Bootstrap en vuestras aplicaciones, y es que desde que apareció allá por el año 2010 de la mano del equipo de Twitter no ha hecho mas que ganar adeptos.

Y es que la propuesta es simple pero terriblemente convincente. "Tú dime que quieres mostrar que yo lo muestro". Independientemente del navegador o el tamaño de la pantalla, el motor de Bootstrap organiza los elementos automáticamente y los distribuye de manera sencilla y elegante.

En los últimos años estamos advirtiendo un cambio en la apariencia y distribución y en parte esto es debido a la masiva influencia de esta herramienta. Ahora es muy común encontrar mono-páginas "landing pages" donde todo el contenido se muestra por bloques en una sola página. El aspecto se ha simplificado, los colores se hacen planos y las líneas mas definidas.

Poco a poco, como pasa siempre, se va haciendo de nuevo necesaria una transición a las nuevas tendencias estéticas de las webs / aplicaciones móviles. Y hoy por hoy no concibo otra alternativa al diseño responsivo.
Si estamos bajo un entorno Node JS, podemos incluir las dependencias en nuestro proyecto ejecutando desde el directorio raíz del mismo el comando:

$ npm install -S bootstrap

Y de esta manera la última versión quedará agregada. El parámetro S escribe la dependencia en nuestro fichero de gestión de paquetes propio del proyecto package.json


No soy diseñador web y por tanto no poseo conocimientos profundos en CSS, SASS o LESS como un especialista. Afortunadamente hay soluciones que nos van a permitir un punto de partida a la hora de enfrentarnos a la ardua tarea de estilizar nuestros desarrollos. Claro que para un acabado profesional siempre es imprescindible la colaboración de un diseñador, no se me vayan a enfadar los amigos diseñadores. Os queremos ;)

Podemos partir de una platilla completa y hacer pequeñas modificaciones, cual sastre a un traje de serie. Ventaja, está practicante listo para usar. Desventaja, pues que si no queremos emplear tanto esfuerzo en modificaciones como en hacer una de cero tendremos que ceñirnos en gran medida a los estilos y estructura de la platilla propuesta.

Hay sitios web con platillas gratuitas y las hay mas trabajadas y llamativas a muy bajo coste ya que podemos hacernos por menos de 6€ con una completa platilla para una web o para un panel de administración.

Por otro lado, si queremos dedicar mas tiempo a la construcción de las vistas en vez de partir desde una plantilla podemos estructurar con editores gráficos.
Existen multitud de plataformas para este fin, como se recogen en este blog personalmente he probado Bootply y DivShot y efectivamente el ahorro de tiempo / esfuerzo es mas que considerable.

Así que ya sabéis, los fríos sudores probando en los distintos navegadores el encuadre de los elementos de la web es cosa del pasado. Gracias a Dios.

Saludos!

Vagrant

Como desarrollador cuantas veces no he imaginado disponer de un entorno configurado y listo para empezar a trabajar. Un entorno que fácilmente pueda ser desplegado para que los compañeros en un equipo puedan trabajar bajo un mismo ecosistema, disponer de otro SO para hacer pruebas o simplemente bichear nuevas tecnologías para estar siempre familiarizado con con lo último del sector sin perder tiempo instalando y configurando herramientas, frameworks, servidores de aplicaciones, etc.... ni guarrear nuestro equipo de trabajo.

Pues bien, para ello está Vagrant, una muy interesante solución que cubre a la perfección esta necesidad. Vagrant nos hace a los desarrolladores la vida un poco mas fácil. Funciona en convivencia con gestores de maquinas virtuales como MVware, VirtualBox u otros y prepara maquinas virtuales configurables para ser descargadas y desplegadas en nuestro gestor preferido.

Descargamos e instalamos el paquete de Vagrant, configuramos un sencillo fichero y definimos el script de despliegue.

Yo he llegado a Vagrant a través de una aproximación de los creadores de Ionic. Ionic es un completo framework basado en Apache Cordova/Phonegap para desarrollar aplicaciones para dispositivos móviles "Trans-plataforma" es decir, programamos una sola vez en HTML - JavaScript y empaquetamos a golpe de automatización los instalables para distintos sistemas operativos con el consiguiente ahorro de tiempo, esfuerzo, dinero.

Pues bien, el caso de uso podría ser, quiero empezar una aplicación para android y voy a usar Ionic.
Para empezar recomiendo siempre trabajar en Linux, por comodidad ya que, aunque es posible, evitaremos quebraderos de cabeza. Ahora que tengo mi sistema operativo, necesito instalar Node.Js con NPM, Git, Ant, JDK para Java 7 descargar el SKD de Android, Cordova y por último, pero no menos importante Ionic.
O bien... instalo Vagrant y VirtualBox, hago un checkout / clone del repositorio de Ionic-Box de Max Lynch @maxlynch uno de los creadores de Ionic y ejecuto los comandos.

$ vagrant up
$ vagrant ssh 

La primera vez tendremos que esperar a que se descargue y se instale y ya tengo todo lo disponible para, por ejemplo, empezar un nuevo proyectos a partir de un seed tecleando simplemente:

$ ionic start myNuevoProyecto

Así que, ¿Quién dijo miedo? Total, si se rompe todo, borro la máquina virtual y santas pascuas. ;)

Bower

Hace un tiempo empecé a usar esta herramienta y desde entonces es un pilar fundamental en cualquier desarrollo. Al alcance de un comando la posibilidad de buscar e instalar nuevas librerías en nuestro proyecto, además de dejarlas definidas en un fichero de configuración para, por ejemplo, no tener que subir a nuestro repositorio librerías de terceros.

Porque como dice la propia descripción en su web "Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you." y hay un momento en que se hace necesario alguna ayuda para gestionar todos estos componentes. Como desarrollador no quiero emplear mas tiempo que el necesario en prestar atención a los múltiples elementos de los que pueda estar compuesto nuestro proyecto, lo que quiero es que aquella librería que necesito para una nueva feature venga a mi proyecto como por arte de magia y ponerme a programarla. ¿Y como se hace eso? pues muy facil.

Bower necesita que tengamos en nuestro sistema instalado Node y Git . Una vez tengamos estos prerrequisitos la instalamos tal que:

npm bower -g install

Donde el parámetro -g en bower se refiere a una instalación global, visible para todos los proyectos.
Ya tenemos bower instalado y ahora lo vamos a usar en nuestro proyecto, para ello nos situamos en el directorio raíz del mismo y lo inicializamos con el comando:

bower init

Con el que vamos a crear el fichero de configuración bower.json que mantendrá las especificaciones propias del proyecto y las dependencias que vayamos instalando. Basta con que sigamos las preguntas del prompt para facilitarnos la vida y ¡clin! se hizo la magia.

Ahora si por ejemplo necesito usar jquery en su última version, como siempre en el directorio raíz ejecutamos:

bower install jquery

y automáticamente se descargará en el directorio que se creará para tal efecto dentro del proyecto bower_components/.
Ya podríamos incluirla mediante la etiqueta <script> o lo que es mas recomendable a través de un gestor de carga de dependencias, como por ejemplo RequireJS.

En nuestro repositorio solo tendremos que hacer commit del fichero bower.json e ignorar el directorio bower_components ya que para restablecer las dependencias solo tendríamos que ejecutar en nuestro directorio el comando bower install de nuevo.

Espero que os haya resultado de ayuda. Saludos!

Git

En el año 2005 el afamado Linus Torvalds desarrolló junto con Junio Hamano el núcleo de un nuevo gestor de versiones y nace de la necesidad del manejo de grandes cantidades de ficheros muy distribuidos.

Partiendo de la base de que ya no se puede concebir el desarrollo software sin un gestor de repositorio y aunque es verdad que la primera experiencia con GIT es un poco confusa, sobre todo en mi caso que llegué desde SVN, una vez te haces con los conceptos básicos y la curva de aprendizaje se hace mas liviana te das cuenta de la cantidad de herramientas y potencia que ofrece GIT. Es como pasar de la caja para colorear, esa que tiene un ciervo en la cubierta de 8 a la de 32 colores. Todo un universo nuevo se presenta a nuestro alcance.

Por supuesto todo es cuestión de gustos, pero en mi caso la experienca con GIT es muy satisfactoria y no dejaría pasar la oportunidad de "bichearlo" para futuros proyectos.

La gente de CodeSchool se ha currado otro curso gratuito con los fundamentos basicos y como siempre con videos explicativos y ejercicios. Muy recomendable.

https://www.codeschool.com/courses/try-git

Además para ampliar información nada mejor que la fuente http://git-scm.com/

Para empezar a usar Git aquí está el enlace a la documentación:

http://git-scm.com/book/en/Getting-Started-Installing-Git

 Y para aquellos que os pica el gusanillo ya podéis ejecutar el comando:

git clone  git@github.com:codebusters/generator-reqtangular.git

para descargaros el código fuente de Reqtangular y aportar a la causa vuestras soluciones. ¡Reky os necesita!


Saludos!

Hola mundo!

Hola mundo!

Os presento Reqtagular. Un proyecto Open Source para generar nuevas aplicaciones web. De manera facil podemos generar estructuras base preconfiguradas para iniciar un nuevo proyecto basado en AngularJS y RequireJS entre otras tecnologías.
Pero además Reqtangular, dentro del espíritu de comundad open source pretende ser un punto de encuentro entre desarrolladores ávidos de aprender y compartir nuevas tecnologías.

Para este proyecto se están usando múltiples soluciones fundamentalmente basadas en NodeJS, AngularJS, RequireJS entre otras y con este blog se irán desgranando a modo de mini tutoriales de iniciación.