Introducción a Intel XDK

() translation by (you can also view the original English article)

El desarrollo móvil con tecnologías web, no es nada nuevo. Gracias a herramientas como PhoneGap y Appcelerator Titanium, los desarrolladores web pueden crear aplicaciones híbridas que tienen acceso al hardware de los dispositivos. Una nueva solución para el desarrollo de HTML5/CSS/JavaScript es XDK de Intel. En este artículo, les diré el por qué vale la pena darle una oportunidad.

1. Qué es?

Si está involucrado con el desarrollo móvil, probablemente escuchó o aplicó herramientas tales como PhoneGap o Appcelerator Titanium. Estas herramientas le permiten a los desarrolladores web, usar sus habilidades en el desarrollo web para crear aplicaciones móviles híbridas.

El año pasado, Intel compró appMobi y empaquetó sus herramientas de desarrollo en el Intel XDK. Este producto unificado y optimizado es un conjunto completo de herramientas para el desarrollo móvil. Un desarrollador puede ir desde las primeras líneas de código a una aplicación completamente compilada sólo con un conjunto de herramientas. Y lo mejor de todo, el XDK es de descarga gratuita.

2. Características.

Lo primero que usted notará sobre el XDK es cuán sencillo es de instalar. PhoneGap necesita una configuración extensiva y Titanium tiene requerimientos específicos respecto a las bibliotecas instaladas. Para ponerse en marcha con el XDK, lo descarga y lo instala.

La belleza del XDK es que usted puede crear aplicaciones para cualquier plataforma. Con otras herramientas, está limitado a la plataforma en la que está desarrollando. Desde que Apple no permite que las herramientas Xcode se ejecuten en otra cosa que no sea una máquina que funcione con OS X, usted debe tener una Mac para desarrollar para iOS.

Intel XDK le permite desarrollar en cualquier plataforma, porque la compilación se lleva a cabo en la nube. PhoneGap ofrece un servicio similar para el desarrollo de plataformas cruzadas, pero es limitado. Y con XDK usted no está limitado a plataformas móviles. Usted planea crear apps Chrome, Facebook, Amazon o Nook? El XDK puede hacerlas para esos objetivos como también compilar con XDK o API de Cordova (PhoneGap).

El XDK se une con el editor de código abierto Brackets de Adobe. Titanium tiene un editor decente, pero yo prefiero la solución XDK. Adicionalmente, usted tiene acceso a algunas de las extensiones disponibles en Brackets. La única desventaja es que usted no puede actualizar el editor de Brackets que está integrado con el XDK. Sin embargo, aún es un paso por encima de Titanium y PhoneGap ni siquiera incluye un editor.

El XDK también incluye un editor gráfico, el cual está ausente en todas plataformas móviles HTML5. Es lógico utilizar componentes HTML que se beneficiarían de un editor WYSIWYG. También soporta marcos como Bootstrap y jQuery Mobile. Estos componentes de interfaz de usuario, le permiten rápidamente construir la interfaz de su app.

Una vez que su app es creada, necesita una manera de probar su funcionalidad. Intel XDK incluye el mejor emulador para dispositivos móviles que vi hasta la fecha. Incorpora la capacidad de probar en dispositivos reales y perfilar su desempeño sin tener que instalar nada.

3. Crear una App Móvil con Intel XDK.

Paso 1: Descargar e instalar

Vaya a la página de descarga de Intel XDK y obtenga la última versión del XDK. Luego de descargar el paquete, instale con las opciones por defecto.

Paso 2: Crear un Nuevo Proyecto

Vamos a crear una pequeña aplicación de imágen. Inicie el XDK y seleccione Start a New Project. Algunas de las opciones que tiene, son:

Start with a Demo: Esta opción le permite usar uno de los muchos modelos de proyectos que Intel ofrece. Esto es bueno para ayudarlo a entender cómo desarrollar con el XDK.
Start with a Template: Esta opción ofrece un número de plantillas para diferentes estilos de interfaz de usuario. También tiene una plantilla Cordova en blanco, para ayudarlo a comenzar.
Import an Existing HTML5 Project: Con esta opción, usted puede importar un proyecto realizado fuera de XDK, como por ejemplo, un proyecto PhoneGap codificado en el editor de su elección. También le permite importar proyectos XDK.
Use App Starter/Start with App Designer: App Starter puede ser considerado App Designer Lite. Ambas son interfaces gráficas compatibles con el editor Brackets. App Starter utiliza App Framework. App Designer, añade la opción de marcos de interfaz de usuario para Bootstrap, jQuery Mobile y Topcoat.
Start with a Blank Project: Como su nombre lo implica, esta opción nos da un proyecto en blanco con una plantilla que nos ayudará a comenzar. Esta es la opción que seleccionaremos para este tutorial.

Asigne un nombre a su proyecto y presione Create. El XDK creará su proyecto y una estructura de carpetas.

Paso 3: Estructura del Proyecto.

Aunque comenzamos con un proyecto en blanco, el XDK incluye algunos archivos para ayudarlo a empezar. Vamos a editar estos archivos para nuestro proyecto.

init-dev.js

Este archivo es empleado para detectar eventos ready de las diferentes bibliotecas en uso. Este archivo será utilizado tal como está. Incluye muchas instrucciones de registro para fines de depuración y para comprender mejor cómo funciona el archivo. La parte que más nos interesa, comienza en la línea 106.

1	var evt = document.createEvent("Event") ;
2	evt.initEvent("app.Ready", false, false) ;
3	document.dispatchEvent(evt) ;

La primera línea crea un nuevo objeto de evento. Inicializamos este objeto con el valor "app.ready". La última línea envía el evento a el DOM.

init-app.js

Borré la mayoría de los contenidos del archivo, excepto la parte que necesitamos. Nos aseguramos que las librerías que necesitamos han sido cargadas y que el dispositivo está listo antes de ejecutar cualquiera de nuestro código. Recuerda el evento app.ready del archivo anterior?

1	document.addEventListener("app.Ready", app.initEvents, false) ;

El evento listener escucha para el evento app.ready y llama a la función initEvents del objeto app.

app.initEvents = function() {
    "use strict" ;
    var fName = "app.initEvents():" ;
    console.log(fName, "entry") ;
    $(".take").bind("click", takePic);
    document.addEventListener("intel.xdk.camera.picture.add",onSuccess); 
} ;

La función initEvents realiza dos cosas. Primero, asocia un evento listener de click a un botón usando jQuery. Segundo, añade un evento listener para el evento intel.xdk.camera.picture.add XDK.

app.js

Este archivo contiene lo esencial de nuestra app y contiene las funciones que ejecutan nuestra app. La función replacer usa jQuery para reemplazar la imagen en la página con la foto más reciente tomada.

1	function replacer(pic) {
2	$("img").replaceWith(pic);
3	}

El nombre de la función takePic lo dice todo. Utiliza el marco XDK para tomar una foto.

1	function takePic() {
2	intel.xdk.camera.takePicture(50,false,"jpg");
3	}

La función onSuccess se dispara cuando un evento intel.xdk.camera.picture.add es detectado. Si una foto ha sido capturada exitosamente, reemplazará la imagen actual en la página, usando la función replacer que vimos antes. Si la app no fue capaz de tomar una foto, mostrará un mensaje de error.

function onSuccess(evt) {
    if (evt.success == true) {
        var image = document.createElement('img');
        image.src=intel.xdk.camera.getPictureURL(evt.filename);
        image.setAttribute ("style","width:100%;height:200px;");
        image.id=evt.filename;
        replacer(image);
    }
    else {
        if (evt.message != undefined) {
            alert(evt.message);
    }
    else
    {
        alert("error capturing picture");
    }
  }
}

index.html

Este archivo contiene la página principal de nuestra app. Es un simple archivo HTML en el que incorporamos jQuery y jQuery Mobile.

1	<script src="lib/jquery-2.1.1.js"></script>
2	<script src="lib/jquery.mobile-1.4.4/jquery.mobile-1.4.4.js"></script>

También importamos unas cuantas hojas de estilo para estilizar la app. La hoja de estilo personalizada, app.css, tiene muy poco para estilizar. Eso es porque yo uso el JQuery Mobile theme roller para darle estilo a la app.

1	<link rel="stylesheet" href="lib/jquery.mobile-1.4.4/jquery.mobile-1.4.4.css">
2	<link rel="stylesheet" href="css/themes/selfi.css">
3	<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css">
4	<link rel="stylesheet" href="css/app.css">

La página por sí misma es una página estandar jQuery Mobile con una cabecera, contenido y una sección de pie de página. Mire la imagen dentro de la etiqueta div#info. Esta es la imagen que es reemplazada por la foto tomada por la cámara.

<div data-role="page">
       <div data-role="header">
           <h1>Selfi</h1>
       </div>
       <div data-role="main" class="ui-content">
           <div id="info"><img src="img/vader-selfie.jpg"></div>
           <a class="take" data-role="button">Take Selfi!</a>
           </div>
       <div data-role="footer" data-position="fixed">
           <h1></h1>
       </div>
    </div>

Este es un script usado para depurar aplicaciones usando la vista previa de la aplicación.

1	<script src="http://debug-software.intel.com/target/target-script-min.js#Agu5iaiuw-i47vL-2_lk5pDOu3XL6fZm9sAm4apb__w"></script>

También importamos un número de scripts claves que hacen correr a la aplicación como Cordova e Intel XDK y app.js.

<script src="intelxdk.js"></script>         <!-- phantom library, needed for XDK api calls -->
<script src="cordova.js"></script>          <!-- phantom library, needed for Cordova api calls -->
<script src="xhr.js"></script>              <!-- phantom library, needed for XDK CORS -->
<script src="js/app.js"></script>
<script src="js/init-dev.js"></script>
<script src="js/init-app.js"></script>

4. Activación de Complementos

Vamos a estar usando la API de Intel XDK para sacar fotos. Para que esto funcione, tenemos que activar unos cuantos complementos. Abra la pestaña Projects y a la mitad, verá CORDOVA 3.X HYBRID MOBILE APP SETTINGS. Haga click en botón más, junto a complementos y permisos. A la derecha, debajo de Intel XDK Plugins, haga click en Camera.

5. Uso del Emulador

Presione la pestaña Emulate y pruebe la funcionalidad de la aplicación. Cuando presione en el botón Take Selfi, debería abrir la ventana de imágen. Luego de sacar la foto, esta debería reemplazar la imagen del marcador de posición.

6. Probando la App

Descargue e instale la aplicación Intel Preview desde Google Play o la Tienda de Aplicaciones de Apple . Vaya a la pestaña Test y copie la etiqueta del script weinre si desea lleva a cabo una depuración con App Preview Presione el botón PUSH FILES para subir su app a los servidores de Intel. Acceda a App Preview con sus credenciales de Intel XDK y seleccione la app que usted subió.

7. Construyendo la App

Ahora que ya testeamos la app, la última tarea es desarrollarla para su distribución. Presione la pestaña Build para que muestre las opciones. Como puede ver, tenemos una amplia gama de objetivos para construir.

Ya que usamos la API Cámara, la cual es Legacy, vamos a escoger la app Legacy Hybrid. Lo que nos lleva a la página para construir, como se muestra abajo.

Haciendo click en Details aparecen las opciones para una app con facturación integrada, transmisión de audio, etc.

Luego de seleccionar la opción para su app, presione el botón para construir. Luego de unos momentos, el archivo es armado y se le mostrará un diálogo que le permitirá descargar su app.

Conclusión

Espero que usted esté de acuerdo que es sencillo el crear una app con Intel XDK. Ya sea que usted es un veterano desarrollador web a tiempo completo o simplemente comienza a introducirse en el desarrollo, Intel XDK tiene un punto de entrada para usted. Es fácil de entender y lo aliento a que le dé una oportunidad a Intel XDK.