Herramientas de HTML5 Intel® para el desarrollo de aplicaciones para dispositivos móviles

Nota: Este tutorial ha sido donado a la comunidad de javaHispano por Intel. Intel espera que en el futuro sus procesadores incrementen considerablemente su presencia en los terminales móviles Android, por ello ha creído que este artículo sería interesante para nuestra comunidad. El artículo puede encontrarse en la web de Intel aquí. Podéis encontrar el primer artículo de la serie aquí, el segundo aquí, y el tercero aquí, el cuarto aquí y el quinto aquí. En la web de Intel tenéis más tutoriales en español sobre Android.

Descargas

---

Herramientas de HTML5 Intel® para el desarrollo de aplicaciones para dispositivos móviles [PDF 821.98KB]
Código fuente para iOS [ZIP file 168 KB]
Código de fuente de resultado de las herramientas de HTML5 [ZIP file 86KB]

HTML5 es el nuevo estándar de HTML. Recientemente, Intel Corporation anunció un conjunto de Herramientas de HTML5 para el desarrollo de aplicaciones para dispositivos móviles. Este artículo describe cómo migrar una aplicación de acelerómetro Apple iOS* a HTML5 con la ayuda de estas herramientas. Tenga en cuenta que: el código autogenerado creado por Intel® XDK puede contener el código licenciado bajo una o más de las licencias descritas en el Apéndice A de este documento. Para obtener detalles sobre qué bibliotecas se utilizan para habilitar su aplicación, consulte la salida de Intel XDK.

Intel® HTML5 App Porter Tool

---

Lo primero que haremos será tomar una aplicación de acelerómetro iOS y convertiremos el código de fuente Objective-C* a HTML5. Lo haremos con Intel® HTML5 App Porter Tool y el código de fuente que se encuentra aquí: [iOS_source.zip] (Nota: el código de ejemplo IOS_source se proporciona según la Licencia de software de ejemplo Intel detallada en el Apéndice B). Puede descargar Intel HTML5 App Porter Tool de la ficha Herramientas en:http://software.intel.com/es-es/html5. Después de completar y enviar el formulario con su dirección de correo electrónico, recibirá enlaces para descargar esta herramienta. Las instrucciones sobre cómo utilizar esta herramienta se encuentran en este sitio: http://software.intel.com/es-es/articles/tutorial-creating-an-html5-app-from-a-native-ios-project-with-intel-html5-app-porter-tool

Cuando complete todos los pasos, obtendrá el código de fuente en HTML5.

Intel XDK

---

Es posible abrir el código HTML5 en cualquier IDE. Intel le ofrece una herramienta conveniente para desarrollar aplicaciones HTML5: Intel XDK, que es un Kit para desarrollo multiplataforma (http://software.intel.com/es-es/html5/tools). Con Intel XDK, los desarrolladores pueden escribir un solo código fuente para desplegarlo en muchos dispositivos. Lo que es especialmente positivo es que no es necesario instalarlo en su equipo. Puede instalarlo como una extensión para Google Chrome*. Si utiliza otro navegador, tiene que descargar un archivo JavaScript* y ejecutarlo. A veces es necesario actualizar Java*.

Después de instalar Intel XDK, verá la ventana principal:

Si desea migrar código existente, pulse el botón “Start new” (Iniciar nuevo).

Si está creando un proyecto nuevo, escriba el Nombre del proyecto y seleccione “Create your own from scratch,” (Crear su propio proyecto desde el principio) tal como se muestra en la captura de pantalla a continuación.

Marque “Use a blank project” (Usar un proyecto en blanco). Espere unos minutos y aparecerá el mensaje “Application Created Successfully!” (La aplicación se ha creado satisfactoriamente).

Haga clic en “Open project folder” (Abrir carpeta de proyecto).

Elimine todos los archivos de esta carpeta y copie los archivos migrados. Todavía no hemos migrado la aplicación de acelerómetro del todo. Nos falta escribir una interfaz para ella. Es posible eliminar los conectores creados por Intel HTML5 App Porter Tool. Elimine estos archivos:

• todo_api_application__uiaccelerometerdelegate.js
• todo_api_application_uiacceleration.js
• todo_api_application_uiaccelerometer.js
• todo_api_js_c_global.js

Para actualizar el proyecto en Intel XDK, vaya a la ventana del editor en el emulador de Windows.

Abra el archivo index.html y elimine las líneas que restan de los archivos incluidos.

Abra el archivo todo_api_application_appdelegate.js e implemente la propiedad “window” no asignada del delegado.

01
application.AppDelegate.prototype.setWindow = function(arg1) {
02
    // ================================================================
03
    // REFERENCES TO THIS FUNCTION:
04
    // line(17): C:WorkBloggingechuraevAccelerometerAccelerometerAppDelegate.m
05
    //    In scope: AppDelegate.application_didFinishLaunchingWithOptions
06
    //    Actual arguments types: [*js.APT.View]
07
    //    Expected return type: [unknown type]
08
    //
09
    //if (APT.Global.THROW_IF_NOT_IMPLEMENTED)
10
    //{
11
        // TODO remove exception handling when implementing this method
12
       // throw "Not implemented function: application.AppDelegate.setWindow";
13
    //}
14
this._window = arg1;
15
};
16
 
17
application.AppDelegate.prototype.window = function() {
18
    // ================================================================
19
    // REFERENCES TO THIS FUNCTION:
20
    // line(20): C:WorkBloggingechuraevAccelerometerAccelerometerAppDelegate.m
21
    //    In scope: AppDelegate.application_didFinishLaunchingWithOptions
22
    //    Actual arguments types: none
23
    //    Expected return type: [unknown type]
24
    //
25
    // line(21): C:WorkBloggingechuraevAccelerometerAccelerometerAppDelegate.m
26
    //    In scope: AppDelegate.application_didFinishLaunchingWithOptions
27
    //    Actual arguments types: none
28
    //    Expected return type: [unknown type]
29
    //
30
    //if (APT.Global.THROW_IF_NOT_IMPLEMENTED)
31
    //{
32
        // TODO remove exception handling when implementing this method
33
       // throw "Not implemented function: application.AppDelegate.window";
34
    //}
35
return this._window;
36
};

Abra el archivo viewcontroller.js. Elimine todas las funciones que se utilizaron para trabajar con el acelerómetro en la antigua aplicación iOS. Al final obtenemos este archivo:

01
APT.createNamespace("application");
02
 
03
document.addEventListener("appMobi.device.ready",
onDeviceReady,false);
04
 
05
APT.ViewController = Class.$define("APT.ViewController");
06
 
07
application.ViewController = Class.$define(
   "application.ViewController", 
APT.ViewController, {
08
    __init__: function() {
09
        this.$super();
10
    };>});

En el archivo ViewController_View_774585933.css, tenemos que cambiar los estilos de los colores de elementos de negro a blanco para que se puedan leer en un fondo negro: color: rgba(0,0,0,1); a color: rgba(256,256,256,1);. Como resultado obtenemos:

01
div#Label_590244915
02
{
03
    left: 20px;
04
    color: rgba(256,256,256,1);
05
    height: 21px;
06
    position: absolute;
07
    text-align: left;
08
    width: 320px;
09
    top: 0px;
10
    opacity: 1;
11
}
12
div#Label_781338720
13
{
14
    left: 20px;
15
    color: rgba(256,256,256,1);
16
    height: 21px;
17
    position: absolute;
18
    text-align: left;
19
    width: 42px;
20
    top: 29px;
21
    opacity: 1;
22
}
23
div#Label_463949782
24
{
25
    left: 20px;
26
    color: rgba(256,256,256,1);
27
    height: 21px;
28
    position: absolute;
29
    text-align: left;
30
    width: 42px;
31
    top: 51px;
32
    opacity: 1;
33
}
34
div#Label_817497855
35
{
36
    left: 20px;
37
    color: rgba(256,256,256,1);
38
    height: 21px;
39
    position: absolute;
40
    text-align: left;
41
    width: 42px;
42
    top: 74px;
43
    opacity: 1;
44
}
45
div#Label_705687206
46
{
47
    left: 70px;
48
    color: rgba(256,256,256,1);
49
    height: 21px;
50
    position: absolute;
51
    text-align: left;
52
    width: 42px;
53
    top: 29px;
54
    opacity: 1;
55
}
56
div#Label_782673145
57
{
58
    left: 70px;
59
    color: rgba(256,256,256,1);
60
    height: 21px;
61
    position: absolute;
62
    text-align: left;
63
    width: 42px;
64
    top: 51px;
65
    opacity: 1;
66
}
67
div#Label_1067317462
68
{
69
    left: 70px;
70
    color: rgba(256,256,256,1);
71
    height: 21px;
72
    position: absolute;
73
    text-align: left;
74
    width: 42px;
75
    top: 74px;
76
    opacity: 1;
77
}
78
div#View_774585933
79
{
80
    left: 0px;
81
    height: 548px;
82
    position: absolute;
83
    width: 320px;
84
    top: 20px;
85
    opacity: 1;
86
}

Después de actualizar la ventana del emulador verá:

Para codificar las funciones de acelerómetro, necesitamos utilizar la biblioteca appMobi JavaScript. La documentación sobre esta biblioteca se encuentra aquí. Se instala durante la descarga de Intel XDK.

Abra el archivo index.html y agregue esta línea a la lista de secuencias de comandos:

<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script>

Abra el archivo ViewController_View_774585933.html. Tenemos que cambiar el nombre de los campos a nombres más lógicos de:

1
<div data-apt-class="Label" id="Label_705687206">0</div>
2
<div data-apt-class="Label" id="Label_782673145">0</div>
3
<div data-apt-class="Label" id="Label_1067317462">0</div>

a:

1
<div data-apt-class="Label" id="accel_x">0</div>
2
<div data-apt-class="Label" id="accel_y">0</div>
3
<div data-apt-class="Label" id="accel_z">0</div>

Lo mismo debe hacerse en el archivo ViewController_View_774585933.css, donde tenemos que cambiar el nombre de los estilos.

Abra el archivo viewcontroller.js y escriba algunas funciones para utilizar el acelerómetro.

01
function suc(a) {
02
    document.getElementById('accel_x').innerHTML = a.x;
03
    document.getElementById('accel_y').innerHTML = a.y;
04
    document.getElementById('accel_z').innerHTML = a.z;
05
}
06
 
07
var watchAccel = function () {
08
    var opt = {};
09
    opt.frequency = 5;
10
    timer = AppMobi.accelerometer.watchAcceleration(suc, opt);
11
}
12
 
13
function onDeviceReady() {
14
    watchAccel();
15
}
16
document.addEventListener("appMobi.device.ready",onDeviceReady,false);

Actualice el proyecto y podrá verlo en la ventana del emulador:

Puede ver cómo funciona el acelerómetro en Intel XDK utilizando el panel “ACCELEROMETER”:

La aplicación tendrá este aspecto:

El código fuente de la aplicación completo se encuentra aquí.
Apéndice A: Contratos de licencia de código de Intel® XDK

Apéndice B: Contrato de licencia de código de ejemplo Intel

Comments

[nandopolitik]

Hola a todos.

Yo ahora mismo estoy utilizando otra herramienta para hacer lo mismo, el Marmalade SDK con HTML 5 y tengo que decir que como utiliza otra capa por encima de PHONE GAP, al final no te queda otra que comprobar dispositivo a dispositivo si las cosas "se ven" o funcionan mínimamente ya que en definitiva, depende de las especificaciones de este navegador en cada uno ¿pasa lo mismo con esta herramienta de INTEL?. Es decir, ¿han conseguido que lo que realmente funciona en el emulador lo haga casi indistintamente para las N versiones de ANDROID e IPHONE? , lo comento porque por ejemplo comentaros que con esta herramienta, que para los navegadores de versiones anteriores de ANDROID a la 4.3 si en el CSS tiene la propiedad ":hover" (con jquery mobile y otros), se me suele colgar la aplicación al apretar el pertinente botón. Si luego intentáis utilizar un mapa, desde ya os recomiendo LEAFLET para ahorraros un montón de problemas. Y además de eso luego está que te acepten cosas como la "rapidez de respuesta" de la aplicación para iPhone, que pasa por aplicar algunas técnicas con CSS's y carga de JS. En fin, que si alguien ha tenido buenas experiencias o al menos menos problemas de los habituales para implementar estas apliciones HTML 5 con INTEL, creo nos sería del máximo interés que nos aportara su experiencia "real". Muchas gracias y buen aporte. Un saludo.