Trabajar con Worklight, Parte 1: Comenzar con su

primera aplicacin de Worklight

Configuracin de una aplicacin para iOS y Android
Jeremy Nortey
Software Developer
IBM

24-09-2012

Carlos Andreu
Software Developer
IBM
Raj Balasubramanian
Consulting IT Architect, IBM Mobile Foundation
IBM
Con IBM Worklight V5, una plataforma mvil de aplicaciones empresariales (MEAP), IBM
expande todas sus capacidades mviles a travs de su cartera de productos. Esta serie de
artculos presenta la plataforma Worklight al mostrar cmo puede desarrollar aplicaciones
mviles que niveles una variedad de productos IBM. La Parte 1 describe el proceso de
configuracin del entorno del desarrollo de Worklight y la creacin de una aplicacin simple
que se utilizar como la base para un desarrollo interactivo en artculos siguientes.
Ver ms contenido de esta serie

Introduccin
En los ltimos aos, IBM ha invertido mucho en el espacio mvil al garantizar la compatibilidad
de sus productos de software centrales en varios dispositivos mviles y tambin al proporcionar
tiempos de ejecucin de aplicaciones y herramientas para desarrollar aplicaciones mviles. Con
IBM Worklight, IBM puede expandir an ms todas sus capacidades mviles a travs de su
cartera de productos.
IBM Worklight proporciona una plataforma de aplicaciones mviles avanzada, integral y abierta
que puede ayudarlo a desarrollar eficientemente y a administrar las aplicaciones hbridas, HTML5
y nativas mediante tecnologas y herramientas basadas en estndares, middlewares optimizados
para mviles y capacidades analticas y de gestin integrada.
Copyright IBM Corporation 2012
Trabajar con Worklight, Parte 1: Comenzar con su primera
aplicacin de Worklight

Marcas
Pagina 1 de 20

developerWorks

ibm.com/developerWorks/ssa/

Como una introduccin a Worklight, este artculo establece el flujo de trabajo bsico del
desarrollador de aplicaciones mviles y expone la configuracin del entorno Worklight para las
aplicaciones de desarrollo. En el proceso, se le guiar para saber cmo desarrollar una aplicacin
"Hello World". La Parte 2 en esta serie mostrar cmo puede utilizar esta configuracin del
entorno con el desarrollo de aplicaciones interactivas para crear una aplicacin funcional en torno
al simple caso prctico de crear una aplicacin para la lista de tareas (denominada "Todo"). Los
artculos siguientes agregarn la integracin con otros productos IBM para exponer las funciones
y caractersticas de Worklight.

Introduccin a Worklight
Obtenga Worklight ahora
Descargue ya mismo IBM Worklight Developer Edition 5.0 sin costos y sin fecha de
vencimiento.

Worklight una plataforma mvil de aplicaciones empresariales (MEAP) que es una parte integral
de la IBM Mobile Foundation. Existen cuatro componentes principales de la plataforma Worklight:
IBM Worklight Studio es un entorno de desarrollo basado en el IDE (entorno de desarrollo
integrado) de Eclipse para la creacin de aplicaciones de Worklight.
IBM Worklight Device Runtime Components forman parte del kit de desarrollo de software
que facilita el tiempo de ejecucin de la aplicacin mvil en el dispositivo.
IBM Worklight Server es un servidor que se basa en Java y que proporciona conectividad
segura a fuentes empresariales y de informacin en Internet.
IBM Worklight Console es una interfaz de usuario dedicada a ayudar a gestionar y controlar
todo el ecosistema de aplicaciones mviles.
Estos componentes se muestran en la Ilustracin 1.

Ilustracin 1 Componentes de Worklight

En un nivel superior, las tareas de flujo de trabajo que sigue cuando desarrolla una aplicacin
mvil son similares a las del desarrollo de una aplicacin tradicional. Una vista simplificada de los
pasos, podra ser as (Ilustracin 2):
1. Configuracin de Worklight y comenzar a desarrollar la aplicacin.
Trabajar con Worklight, Parte 1: Comenzar con su primera
aplicacin de Worklight

Pagina 2 de 20

ibm.com/developerWorks/ssa/

developerWorks

2. Proceda con el desarrollo usual y el proceso de prueba para verificar la funcionalidad de la

aplicacin al ejecutar o simular la aplicacin.
3. Cuando piense que est listo, publique la aplicacin de prueba para obtener comentarios de
los usuarios clave.
4. Segn los comentarios, contine trabajando en las mejoras de la aplicacin o lncela para
una audiencia de prueba ms amplia.
5. Si decide expandir el uso de la aplicacin de prueba, puede publicar la aplicacin para un
grupo de usuarios restringido en un repositorio local o privado de la aplicacin, o para un
repositorio pblico o empresarial de la aplicacin (como Apple App Store, Google Play y
dems).

Ilustracin 2 Desarrollo de una aplicacin mvil

El recordatorio de este artculo describo cmo configurar Worklight y el kit de desarrollo de

software del dispositivo y crear una aplicacin vaca de ejemplo. El propsito de este proceso
consiste en garantizar que la aplicacin pueda verse en un dispositivo y publicarse en un servidor
local de Worklight. El resultado ser la base para el desarrollo de la prxima aplicacin mvil.

Configuracin del entorno

Esta aplicacin de prueba que finalmente desarrollar es una aplicacin "hacer" muy simple
que permite al usuario crear una lista de tareas de ejemplo que puede mostrar en una tabla.
El usuario podr ver la fecha de cada tarea, eliminar tareas y filtrar cada tarea por palabra
clave. El extremo frontal de la aplicacin (escrito utilizando JQuery mobile) y otros detalles
de la construccin de la aplicacin se describirn en la Parte 2.

Aunque su objetivo ltimo es desarrollar una aplicacin "hacer" (ver barra lateral), el objetivo
inmediato de este artculo es establecer el flujo de trabajo bsico para desarrollar, implementar
y probar su aplicacin mvil en un simulador del dispositivo. Para hacerlo, puede comenzar
trabajando con el entorno de desarrollo del flujo de trabajo mediante unos cuantos pasos fciles:
1. Descarga e instalacin de la ltima versin de la Edicin de Desarrollo java de Eclipse.
Si necesita descargar Eclipse, puede hacerlo desde el sitio de descargas de Eclipse. Para el
propsito de este artculo, consideraremos que ya tiene instalado Eclipse. Para obtener ms
informacin, consulte la documentacin Iniciacin.
2. Instalacin de los plugins de Worklight Eclipse
Trabajar con Worklight, Parte 1: Comenzar con su primera
aplicacin de Worklight

Pagina 3 de 20

developerWorks

ibm.com/developerWorks/ssa/

Si est familiarizado con la instalacin de los plugins en Eclipse, entonces esta parte no
debera ser un problema. Desde Eclipse, navegue a Help > Install New Software y luego
presione el botn Add cerca de la seccin superior derecha (Ilustracin 3). En el dilogo Add
Repository, ingrese:
Nombre: Worklight Studio
Ubicacin: http://public.dhe.ibm.com/ibmdl/export/pub/software/mobile-solutions/
worklight/wdeupdate/

Ilustracin 3 Instalacin de los plugins de Eclipse

Contine con los pasos siguientes presentados por el asistente de instalacin para descargar
e instalar el entorno que necesita.
3. Instale kits de desarrollo de software especficos segn el dispositivo.
La serie de este artculo expondr el funcionamiento de la aplicacin de Worklight tanto en
dispositivos Android como iOS.
a. Instalacin del kit de desarrollo de software Android (opcional)
Siga las instrucciones del Sitio desarrollador de Android para instalar el kit de desarrollo
de software de Android y el simulador dentro del shell de Eclipse y de Worklight Studio.
b. Instalacin del kit de desarrollo de software iOS (opcional)
Siga las instrucciones del sitio desarrollador de Apple para instalar Xcode en una
mquina con sistema operativo Mac. Si no tiene una Mac, entonces no podr simular
a aplicacin de Worklight que desarrolle en un dispositivo iOS. En uno de los artculos
Trabajar con Worklight, Parte 1: Comenzar con su primera
aplicacin de Worklight

Pagina 4 de 20

ibm.com/developerWorks/ssa/

developerWorks

siguientes, se proporcionarn alternativas utilizando las opciones de Desarrollo de

Worklight, pero por ahora, si no tiene una Mac, ignore las instrucciones especficas de
iOS.
4. Inicio de un nuevo proyecto de Worklight
Ahora debera poder crear un nuevo proyecto de Worklight en Eclipse. Navegue a File >
New > Worklight Project, como lo muestra la Ilustracin 4. (Si no aparece el Proyecto
de Worklight, intente File > New > Other > Worklight Project.) Nombre de la carpeta del
proyecto Todo Project.

Ilustracin 4 Creacin de un nuevo proyecto de Worklight

5. Agregue una nueva aplicacin al proyecto

Finalmente, necesita agregar una nueva aplicacin Worklight a la carpeta de aplicaciones
de su proyecto. Para hacerlo, haga clic derecho en la carpeta apps en Todo Project y
seleccione New > Worklight Application (Ilustracin 5). (Si no aparece, intente New > Other
> Worklight Application.) Nombrar la aplicacin Todo.

Trabajar con Worklight, Parte 1: Comenzar con su primera

aplicacin de Worklight

Pagina 5 de 20

developerWorks

ibm.com/developerWorks/ssa/

Ilustracin 5 Agregar una aplicacin al proyecto

Worklight generar de forma automtica la estructura del archivo que necesita para
desarrollar su aplicacin de Worklight. La carpeta comn es donde ubicar todos los
archivos que necesite para crear su aplicacin, incluidos los archivos HTML, JavaScript y
CSS. Nombre la aplicacin ToDo y complete esta parte de la creacin de la aplicacin.

Trabajar con Worklight, Parte 1: Comenzar con su primera

aplicacin de Worklight

Pagina 6 de 20

ibm.com/developerWorks/ssa/

developerWorks

Ilustracin 6 Estructura de la carpeta de aplicaciones

Instalacin del servidor

Para probar a aplicacin que desarrolle, necesitar publicarla en un servidor local de Worklight.
Estos pasos lo ayudarn a instalar el servidor Worklight. IBM Worklight Studio V5 contiene
un servidor local que puede utilizarse para probar la aplicacin que cre anteriormente al
desarrollarla y ejecutarla. Haga clic derecho en la aplicacin y seleccione Build All and Deploy.
Esto iniciar el servidor local en el puerto 8080, activar el proyecto e implementar la aplicacin
para que la pruebe en un navegador.

Trabajar con Worklight, Parte 1: Comenzar con su primera

aplicacin de Worklight

Pagina 7 de 20

developerWorks

ibm.com/developerWorks/ssa/

Ilustracin 7 Construccin e implementacin de una aplicacin en el servidor

local

Puede ver el progreso de los eventos en la consola (Ilustracin 8).

Ilustracin 8 Consola de servidor local

Ahora puede acceder la consola del servidor local al acceder a http://localhost:8080/console en su

navegador. Debera visualizar la aplicacin Todo que implement.

Trabajar con Worklight, Parte 1: Comenzar con su primera

aplicacin de Worklight

Pagina 8 de 20

ibm.com/developerWorks/ssa/

developerWorks

Ilustracin 9 Acceso a la consola del servidor local

Desarrollo de la aplicacin
Esta aplicacin "Hello World" demostrar la primera iteracin del desarrollo y simulacin para
ayudarlo a familiarizarse con el proceso, y se la utilizar en la Parte 2 para completar la pantalla
real y la lgica de aplicacin para la aplicacin Todo para exponer el modelo de desarrollo de la
aplicacin de Worklight. Para desarrollar esta aplicacin inicial:
1. Seleccione la biblioteca JavaScript
La biblioteca JavaScript seleccionada para este ejemplo es JQuery mobile. Tiene la opcin
de utilizar bibliotecas como Dojo mobile o Sencha Touch. De forma alternativa, puede
desarrollar simplemente utilizando solo JavaScript y crear su aplicacin desde cero.
2. Descargue las bibliotecas
Para este ejemplo, necesita descargar estas bibliotecas JQuery:
JQuery 1.7.1
JQuery Mobile 1.1.0

Ilustracin 10 Detalles de JQuery

3. Mueva los archivos a Worklight

Mueva estos archivos a la carpeta common/js:
jquery-1.7.1.min.js
Trabajar con Worklight, Parte 1: Comenzar con su primera
aplicacin de Worklight

Pagina 9 de 20

developerWorks

ibm.com/developerWorks/ssa/

jquery.mobile-1.1.0-rc.1.min.js
Mueva estos archivos a la carpeta common/css :
jquery.mobile-1.1.0-rc.1.css
jquery.mobile.structure-1.1.0-rc.1.min.css
jquery.mobile-1.1.0-rc.1/images
La Ilustracin 11 muestra la estructura del archivo despus de que los archivos anteriores se
hayan agregado al proyecto Worklight.

Ilustracin 11 Biblioteca JQuery de referencia en la aplicacin Todo

4. Agregar cdigo de plantilla

La documentacin JQuery mobile contiene un cdigo modelo estndar para iniciar una
aplicacin mvil simple (Ilustracin 12). Asegrese de que la aplicacin Todo contenga este
cdigo dentro de las etiquetas <body>.

Trabajar con Worklight, Parte 1: Comenzar con su primera

aplicacin de Worklight

Pagina 10 de 20

ibm.com/developerWorks/ssa/

developerWorks

Ilustracin 12 Cdigo modelo de la aplicacin JQuery mobile

5. Creacin de entornos especficos para los dispositivos

Dado que pretende desarrollar la aplicacin Todo para dispositivos Android y para iPhone,
necesita crear un entorno de Worklight para cada tipo de dispositivo. Haga clic derecho en la
carpeta Todo y seleccione Worklight > Worklight Environment luego Next (Ilustracin 13).

Trabajar con Worklight, Parte 1: Comenzar con su primera

aplicacin de Worklight

Pagina 11 de 20

developerWorks

ibm.com/developerWorks/ssa/

Ilustracin 13 Seleccione el asistente de instalacin del dispositivo

Elija telfonos y tablets iPhone y Android de la lista y haga clic en Finish (Ilustracin 12).
Esto crear un proyecto adicional para Android y una estructura de carpeta adicional dentro
de ToDo.

Trabajar con Worklight, Parte 1: Comenzar con su primera

aplicacin de Worklight

Pagina 12 de 20

ibm.com/developerWorks/ssa/

developerWorks

Ilustracin 14 Creacin de carpetas especficas para los dispositivos

Desarrollo de una aplicacin implementable para dispositivos iOS y

Android
Worklight est estructurado con archivos fuente comunes (HTML, CSS y JavaScript) en una
carpeta denominada common y archivos especficos de la plataforma en sus directorios
respectivos; Android para archivos Android, iphone para archivos iPhone y dems. Por ejemplo,
dado que el desarrollo de iOS y Android utilizar JQuery, el archivo jquery.js est en common/
jquery.js. Si tiene algn cdigo especfico de iOS, entonces el cdigo JavaScript se encontrar
en ios-plugin.js e ir en iphone/js/iso-plugin.js en lugar de commonjs/iso-plugin.js. Worklight
garantizar la sincronizacin de los archivos comunes en cada uno de los entornos especficos
para los dispositivos.
Despus de que tenga listo su cdigo fuente para implementarlo, simplemente, haga clic derecho
en su aplicacin Android y seleccione Run as... > Build All and Deploy (Ilustracin 15). Debe
aparecer una nueva carpeta en su lugar de trabajo con el ttulo de su aplicacin. Nombre de
nuestra aplicacinAndroid.

Trabajar con Worklight, Parte 1: Comenzar con su primera

aplicacin de Worklight

Pagina 13 de 20

developerWorks

ibm.com/developerWorks/ssa/

Ilustracin 15 Desarrollar e implementar

Siguiente, hacer clic derecho en ese proyecto y seleccionar Run as... > Android Application
(Ilustracin 14). Si tiene un telfono Android conectado por USB con el modo del desarrollador
habilitado en las configuraciones, la aplicacin se ejecutar automticamente all, de lo contrario,
se ejecutar automticamente en el AVD (Dispositivo Virtual Android) existente. Esto lanzar el
emulador y mostrar la secuencia "Hello World" que ingres anteriormente (Ilustraciones 16 y 17).

Trabajar con Worklight, Parte 1: Comenzar con su primera

aplicacin de Worklight

Pagina 14 de 20

ibm.com/developerWorks/ssa/

developerWorks

Ilustracin 16 Ejecutar aplicacin Android

Trabajar con Worklight, Parte 1: Comenzar con su primera

aplicacin de Worklight

Pagina 15 de 20

developerWorks

ibm.com/developerWorks/ssa/

Ilustracin 17 Prueba de aplicacin Android

Los pasos para implementar su aplicacin en un dispositivo iOS son similares al proceso de
un Android. Haga clic en la aplicacin iPhone y seleccione Run as... > Build All and Deploy y
luego haga clic en Run as XCode Project (Ilustracin 18). En Xcode, simplemente selecciona un
dispositivo real o un simulador de iPhone o iPad, luego haga clic en el botn Run (Ilustracin 19).
La Ilustracin 20 muestra la aplicacin que se ejecuta en un entorno iPhone.

Trabajar con Worklight, Parte 1: Comenzar con su primera

aplicacin de Worklight

Pagina 16 de 20

ibm.com/developerWorks/ssa/

developerWorks

Ilustracin 18 Desarrollo e implementacin de una aplicacin iOS

Ilustracin 19 Seleccionar dispositivo o simulador para la prueba

Trabajar con Worklight, Parte 1: Comenzar con su primera

aplicacin de Worklight

Pagina 17 de 20

developerWorks

ibm.com/developerWorks/ssa/

Ilustracin 20. Prueba de la aplicacin iPhone

Conclusin
En este artculo introductorio, configura un entorno de desarrollo de Worklight y desarrollar una
aplicacin de ejemplo "Hello World" para iPhone y Android. Dado que la configuracin incluy
el tiempo de ejecucin del servidor Worklight y todo el software de soporte, est listo para
comenzar a agregar la lgica de la aplicacin y el contenido a su aplicacin Todo. Estos pasos
proporcionaron una introduccin de cmo repetir el flujo de trabajo del desarrollo de la creacin
de una aplicacin y de probarla en un dispositivo o simulador.

Trabajar con Worklight, Parte 1: Comenzar con su primera

aplicacin de Worklight

Pagina 18 de 20

ibm.com/developerWorks/ssa/

developerWorks

Recursos

Informacin de productos Worklight

Documentacin de Worklight
IBM Worklight Developer Edition 5.0
Edicin de Desarrollo Java de Eclipse
Sitio desarrollador de Apple
Comenzar con Worklight
JQuery 1.7.1
JQuery Mobile 1.1.0
Cdigo modelo
Worklight Studio
Zona de desarrollo de IBM developerWorks Mobile
IBM developerWorks WebSphere

Trabajar con Worklight, Parte 1: Comenzar con su primera

aplicacin de Worklight

Pagina 19 de 20

developerWorks

ibm.com/developerWorks/ssa/

Sobre los autores

Jeremy Nortey
Jeremy Nortey es un desarrollador de software de la IBM Mobile Foundation dentro
del Grupo de Software. Desarrolla software y garantiza la calidad de soluciones
mviles. Se especializa en iOS y a veces trabaja en la construccin de aplicaciones
nativas para iPhone en su tiempo libre. Sus pasatiempos incluyen el ftbol sccer y
correr.

Carlos Andreu
Carlos Andreu es un desarrollador de software del Grupo de Software de IBM.
Actualmente, se encuentra trabajando en la creacin de un marco de trabajo para
desarrollar aplicaciones hbridas, Android e iOS. Sus intereses varan desde las
ltimas tendencias y blogs tecnolgicos hasta leer, mirar televisin y disfrutar de
todo tipo de msica. Puede obtener ms informacin sobre l en http://dev.yapr.org/
carlosandreu.

Raj Balasubramanian
Raj Balasubramanian es un arquitecto de productos del Grupo de Software de IBM
que trabaja en la IBM Mobile Foundation. Lidera la interaccin entre servicios y
clientes para Worklight de IBM y para la IBM Mobile Foundation. Antes de su rol de
desarrollador, lider los proyectos relacionados con infraestructura y aplicaciones
de proporcin de compromisos para clientes relacionados con tecnologas SOA,
BPM. Web 2.0 y Portal. Se interesa por todo lo tcnico, historia, matemticas y fsica.
Actualmente, se encuentra en camino hacia su doctorado en la Universidad de Texas
en Austin. Puede leer sobre sus aventuras tcnicas y personales del pasado en su
blog personal Gurukulam en http://balasubramanians.com/blog.
Copyright IBM Corporation 2012
(www.ibm.com/legal/copytrade.shtml)
Marcas
(www.ibm.com/developerworks/ssa/ibm/trademarks/)

Trabajar con Worklight, Parte 1: Comenzar con su primera

aplicacin de Worklight

Pagina 20 de 20