© Copyright IBM Corporation 2012 MarcasTrabajar con Worklight, Parte 1: Comenzar con su primeraaplicación de Worklight

Pagina 1 de 20

Trabajar con Worklight, Parte 1: Comenzar con suprimera aplicación de WorklightConfiguración de una aplicación para iOS y Android

Jeremy NorteySoftware DeveloperIBM

Carlos AndreuSoftware DeveloperIBM

Raj BalasubramanianConsulting IT Architect, IBM Mobile FoundationIBM

24-09-2012

Con IBM® Worklight® V5, una plataforma móvil de aplicaciones empresariales (MEAP), IBMexpande todas sus capacidades móviles a través de su cartera de productos. Esta serie deartículos presenta la plataforma Worklight al mostrar cómo puede desarrollar aplicacionesmóviles que niveles una variedad de productos IBM. La Parte 1 describe el proceso deconfiguración del entorno del desarrollo de Worklight y la creación de una aplicación simpleque se utilizará como la base para un desarrollo interactivo en artículos siguientes.

Ver más contenido de esta serie

IntroducciónEn los últimos años, IBM ha invertido mucho en el espacio móvil al garantizar la compatibilidadde sus productos de software centrales en varios dispositivos móviles y también al proporcionartiempos de ejecución de aplicaciones y herramientas para desarrollar aplicaciones móviles. ConIBM Worklight, IBM puede expandir aún más todas sus capacidades móviles a través de sucartera de productos.

IBM Worklight proporciona una plataforma de aplicaciones móviles avanzada, integral y abiertaque puede ayudarlo a desarrollar eficientemente y a administrar las aplicaciones híbridas, HTML5y nativas mediante tecnologías y herramientas basadas en estándares, middlewares optimizadospara móviles y capacidades analíticas y de gestión integrada.

developerWorks® ibm.com/developerWorks/ssa/

Trabajar con Worklight, Parte 1: Comenzar con su primeraaplicación de Worklight

Pagina 2 de 20

Como una introducción a Worklight, este artículo establece el flujo de trabajo básico deldesarrollador de aplicaciones móviles y expone la configuración del entorno Worklight para lasaplicaciones de desarrollo. En el proceso, se le guiará para saber cómo desarrollar una aplicación"Hello World". La Parte 2 en esta serie mostrará cómo puede utilizar esta configuración delentorno con el desarrollo de aplicaciones interactivas para crear una aplicación funcional en tornoal simple caso práctico de crear una aplicación para la lista de tareas (denominada "Todo"). Losartículos siguientes agregarán la integración con otros productos IBM para exponer las funcionesy características de Worklight.

Introducción a WorklightObtenga Worklight ahoraDescargue ya mismo IBM Worklight Developer Edition 5.0 sin costos y sin fecha devencimiento.

Worklight una plataforma móvil de aplicaciones empresariales (MEAP) que es una parte integralde 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 desarrollointegrado) de Eclipse para la creación de aplicaciones de Worklight.

• IBM Worklight Device Runtime Components forman parte del kit de desarrollo de softwareque facilita el tiempo de ejecución de la aplicación móvil en el dispositivo.

• IBM Worklight Server es un servidor que se basa en Java™ y que proporciona conectividadsegura a fuentes empresariales y de información en Internet.

• IBM Worklight Console es una interfaz de usuario dedicada a ayudar a gestionar y controlartodo el ecosistema de aplicaciones móviles.

Estos componentes se muestran en la Ilustración 1.

Ilustración 1 Componentes de Worklight

En un nivel superior, las tareas de flujo de trabajo que sigue cuando desarrolla una aplicaciónmóvil son similares a las del desarrollo de una aplicación tradicional. Una vista simplificada de lospasos, podría ser así (Ilustración 2):

1. Configuración de Worklight y comenzar a desarrollar la aplicación.

ibm.com/developerWorks/ssa/ developerWorks®

Trabajar con Worklight, Parte 1: Comenzar con su primeraaplicación de Worklight

Pagina 3 de 20

2. Proceda con el desarrollo usual y el proceso de prueba para verificar la funcionalidad de laaplicación al ejecutar o simular la aplicación.

3. Cuando piense que está listo, publique la aplicación de prueba para obtener comentarios delos usuarios clave.

4. Según los comentarios, continúe trabajando en las mejoras de la aplicación o láncela parauna audiencia de prueba más amplia.

5. Si decide expandir el uso de la aplicación de prueba, puede publicar la aplicación para ungrupo de usuarios restringido en un repositorio local o privado de la aplicación, o para unrepositorio público o empresarial de la aplicación (como Apple App Store, Google Play ydemás).

Ilustración 2 Desarrollo de una aplicación móvil

El recordatorio de este artículo describo cómo configurar Worklight y el kit de desarrollo desoftware del dispositivo y crear una aplicación vacía de ejemplo. El propósito de este procesoconsiste en garantizar que la aplicación pueda verse en un dispositivo y publicarse en un servidorlocal de Worklight. El resultado será la base para el desarrollo de la próxima aplicación móvil.

Configuración del entornoEsta aplicación de prueba que finalmente desarrollará es una aplicación "hacer" muy simpleque 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 palabraclave. El extremo frontal de la aplicación (escrito utilizando JQuery mobile) y otros detallesde la construcción de la aplicación se describirán en la Parte 2.

Aunque su objetivo último es desarrollar una aplicación "hacer" (ver barra lateral), el objetivoinmediato de este artículo es establecer el flujo de trabajo básico para desarrollar, implementary probar su aplicación móvil en un simulador del dispositivo. Para hacerlo, puede comenzartrabajando con el entorno de desarrollo del flujo de trabajo mediante unos cuantos pasos fáciles:

1. Descarga e instalación de la última versión de la Edición de Desarrollo java de Eclipse.Si necesita descargar Eclipse, puede hacerlo desde el sitio de descargas de Eclipse. Para elpropósito de este artículo, consideraremos que ya tiene instalado Eclipse. Para obtener másinformación, consulte la documentación Iniciación.

2. Instalación de los plugins de Worklight Eclipse

developerWorks® ibm.com/developerWorks/ssa/

Trabajar con Worklight, Parte 1: Comenzar con su primeraaplicación de Worklight

Pagina 4 de 20

Si está familiarizado con la instalación de los plugins en Eclipse, entonces esta parte nodebería ser un problema. Desde Eclipse, navegue a Help > Install New Software y luegopresione el botón Add cerca de la sección superior derecha (Ilustración 3). En el diálogo AddRepository, ingrese:

• Nombre: Worklight Studio• Ubicación: http://public.dhe.ibm.com/ibmdl/export/pub/software/mobile-solutions/worklight/wdeupdate/

Ilustración 3 Instalación de los plugins de Eclipse

Continúe con los pasos siguientes presentados por el asistente de instalación para descargare instalar el entorno que necesita.

3. Instale kits de desarrollo de software específicos según el dispositivo.La serie de este artículo expondrá el funcionamiento de la aplicación de Worklight tanto endispositivos Android como iOS.

a. Instalación del kit de desarrollo de software Android (opcional)Siga las instrucciones del Sitio desarrollador de Android para instalar el kit de desarrollode software de Android y el simulador dentro del shell de Eclipse y de Worklight Studio.

b. Instalación del kit de desarrollo de software iOS (opcional)Siga las instrucciones del sitio desarrollador de Apple para instalar Xcode en unamáquina con sistema operativo Mac. Si no tiene una Mac, entonces no podrá simulara aplicación de Worklight que desarrolle en un dispositivo iOS. En uno de los artículos

ibm.com/developerWorks/ssa/ developerWorks®

Trabajar con Worklight, Parte 1: Comenzar con su primeraaplicación de Worklight

Pagina 5 de 20

siguientes, se proporcionarán alternativas utilizando las opciones de Desarrollo deWorklight, pero por ahora, si no tiene una Mac, ignore las instrucciones específicas deiOS.

4. Inicio de un nuevo proyecto de WorklightAhora debería poder crear un nuevo proyecto de Worklight en Eclipse. Navegue a File >New > Worklight Project, como lo muestra la Ilustración 4. (Si no aparece el Proyectode Worklight, intente File > New > Other > Worklight Project.) Nombre de la carpeta delproyecto Todo Project.

Ilustración 4 Creación de un nuevo proyecto de Worklight

5. Agregue una nueva aplicación al proyectoFinalmente, necesita agregar una nueva aplicación Worklight a la carpeta de aplicacionesde su proyecto. Para hacerlo, haga clic derecho en la carpeta apps en Todo Project yseleccione New > Worklight Application (Ilustración 5). (Si no aparece, intente New > Other> Worklight Application.) Nombrar la aplicación Todo.

developerWorks® ibm.com/developerWorks/ssa/

Trabajar con Worklight, Parte 1: Comenzar con su primeraaplicación de Worklight

Pagina 6 de 20

Ilustración 5 Agregar una aplicación al proyecto

Worklight generará de forma automática la estructura del archivo que necesita paradesarrollar su aplicación de Worklight. La carpeta común es donde ubicará todos losarchivos que necesite para crear su aplicación, incluidos los archivos HTML, JavaScript™ yCSS. Nombre la aplicación ToDo y complete esta parte de la creación de la aplicación.

ibm.com/developerWorks/ssa/ developerWorks®

Trabajar con Worklight, Parte 1: Comenzar con su primeraaplicación de Worklight

Pagina 7 de 20

Ilustración 6 Estructura de la carpeta de aplicaciones

Instalación del servidor

Para probar a aplicación que desarrolle, necesitará publicarla en un servidor local de Worklight.Estos pasos lo ayudarán a instalar el servidor Worklight. IBM Worklight Studio V5 contieneun servidor local que puede utilizarse para probar la aplicación que creó anteriormente aldesarrollarla y ejecutarla. Haga clic derecho en la aplicación y seleccione Build All and Deploy.Esto iniciará el servidor local en el puerto 8080, activará el proyecto e implementará la aplicaciónpara que la pruebe en un navegador.

developerWorks® ibm.com/developerWorks/ssa/

Trabajar con Worklight, Parte 1: Comenzar con su primeraaplicación de Worklight

Pagina 8 de 20

Ilustración 7 Construcción e implementación de una aplicación en el servidorlocal

Puede ver el progreso de los eventos en la consola (Ilustración 8).

Ilustración 8 Consola de servidor local

Ahora puede acceder la consola del servidor local al acceder a http://localhost:8080/console en sunavegador. Debería visualizar la aplicación Todo que implementó.

ibm.com/developerWorks/ssa/ developerWorks®

Trabajar con Worklight, Parte 1: Comenzar con su primeraaplicación de Worklight

Pagina 9 de 20

Ilustración 9 Acceso a la consola del servidor local

Desarrollo de la aplicaciónEsta aplicación "Hello World" demostrará la primera iteración del desarrollo y simulación paraayudarlo a familiarizarse con el proceso, y se la utilizará en la Parte 2 para completar la pantallareal y la lógica de aplicación para la aplicación Todo para exponer el modelo de desarrollo de laaplicación de Worklight. Para desarrollar esta aplicación inicial:

1. Seleccione la biblioteca JavaScriptLa biblioteca JavaScript seleccionada para este ejemplo es JQuery mobile. Tiene la opciónde utilizar bibliotecas como Dojo mobile o Sencha Touch. De forma alternativa, puededesarrollar simplemente utilizando solo JavaScript y crear su aplicación desde cero.

2. Descargue las bibliotecasPara este ejemplo, necesita descargar estas bibliotecas JQuery:

• JQuery 1.7.1• JQuery Mobile 1.1.0

Ilustración 10 Detalles de JQuery

3. Mueva los archivos a WorklightMueva estos archivos a la carpeta common/js:

• jquery-1.7.1.min.js

developerWorks® ibm.com/developerWorks/ssa/

Trabajar con Worklight, Parte 1: Comenzar con su primeraaplicación de Worklight

Pagina 10 de 20

• 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 Ilustración 11 muestra la estructura del archivo después de que los archivos anteriores sehayan agregado al proyecto Worklight.

Ilustración 11 Biblioteca JQuery de referencia en la aplicación Todo

4. Agregar código de plantillaLa documentación JQuery mobile contiene un código modelo estándar para iniciar unaaplicación móvil simple (Ilustración 12). Asegúrese de que la aplicación Todo contenga estecódigo dentro de las etiquetas <body>.

ibm.com/developerWorks/ssa/ developerWorks®

Trabajar con Worklight, Parte 1: Comenzar con su primeraaplicación de Worklight

Pagina 11 de 20

Ilustración 12 Código modelo de la aplicación JQuery mobile

5. Creación de entornos específicos para los dispositivosDado que pretende desarrollar la aplicación Todo para dispositivos Android y para iPhone,necesita crear un entorno de Worklight para cada tipo de dispositivo. Haga clic derecho en lacarpeta Todo y seleccione Worklight > Worklight Environment luego Next (Ilustración 13).

developerWorks® ibm.com/developerWorks/ssa/

Trabajar con Worklight, Parte 1: Comenzar con su primeraaplicación de Worklight

Pagina 12 de 20

Ilustración 13 Seleccione el asistente de instalación del dispositivo

Elija teléfonos y tablets iPhone y Android de la lista y haga clic en Finish (Ilustración 12).Esto creará un proyecto adicional para Android y una estructura de carpeta adicional dentrode ToDo.

ibm.com/developerWorks/ssa/ developerWorks®

Trabajar con Worklight, Parte 1: Comenzar con su primeraaplicación de Worklight

Pagina 13 de 20

Ilustración 14 Creación de carpetas específicas para los dispositivos

Desarrollo de una aplicación implementable para dispositivos iOS yAndroid

Worklight está estructurado con archivos fuente comunes (HTML, CSS y JavaScript) en unacarpeta denominada common y archivos específicos de la plataforma en sus directoriosrespectivos; Android para archivos Android, iphone para archivos iPhone y demás. Por ejemplo,dado que el desarrollo de iOS y Android utilizará JQuery, el archivo jquery.js está en common/jquery.js. Si tiene algún código específico de iOS, entonces el código JavaScript se encontraráen ios-plugin.js e irá en iphone/js/iso-plugin.js en lugar de commonjs/iso-plugin.js. Worklightgarantizará la sincronización de los archivos comunes en cada uno de los entornos específicospara los dispositivos.

Después de que tenga listo su código fuente para implementarlo, simplemente, haga clic derechoen su aplicación Android y seleccione Run as... > Build All and Deploy (Ilustración 15). Debeaparecer una nueva carpeta en su lugar de trabajo con el título de su aplicación. Nombre denuestra aplicaciónAndroid.

developerWorks® ibm.com/developerWorks/ssa/

Trabajar con Worklight, Parte 1: Comenzar con su primeraaplicación de Worklight

Pagina 14 de 20

Ilustración 15 Desarrollar e implementar

Siguiente, hacer clic derecho en ese proyecto y seleccionar Run as... > Android Application(Ilustración 14). Si tiene un teléfono Android conectado por USB con el modo del desarrolladorhabilitado en las configuraciones, la aplicación se ejecutará automáticamente allí, de lo contrario,se ejecutará automáticamente en el AVD (Dispositivo Virtual Android) existente. Esto lanzará elemulador y mostrará la secuencia "Hello World" que ingresó anteriormente (Ilustraciones 16 y 17).

ibm.com/developerWorks/ssa/ developerWorks®

Trabajar con Worklight, Parte 1: Comenzar con su primeraaplicación de Worklight

Pagina 15 de 20

Ilustración 16 Ejecutar aplicación Android

developerWorks® ibm.com/developerWorks/ssa/

Trabajar con Worklight, Parte 1: Comenzar con su primeraaplicación de Worklight

Pagina 16 de 20

Ilustración 17 Prueba de aplicación Android

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

ibm.com/developerWorks/ssa/ developerWorks®

Trabajar con Worklight, Parte 1: Comenzar con su primeraaplicación de Worklight

Pagina 17 de 20

Ilustración 18 Desarrollo e implementación de una aplicación iOS

Ilustración 19 Seleccionar dispositivo o simulador para la prueba

developerWorks® ibm.com/developerWorks/ssa/

Trabajar con Worklight, Parte 1: Comenzar con su primeraaplicación de Worklight

Pagina 18 de 20

Ilustración 20. Prueba de la aplicación iPhone

Conclusión

En este artículo introductorio, configura un entorno de desarrollo de Worklight y desarrollar unaaplicación de ejemplo "Hello World" para iPhone y Android. Dado que la configuración incluyóel tiempo de ejecución del servidor Worklight y todo el software de soporte, está listo paracomenzar a agregar la lógica de la aplicación y el contenido a su aplicación Todo. Estos pasosproporcionaron una introducción de cómo repetirá el flujo de trabajo del desarrollo de la creaciónde una aplicación y de probarla en un dispositivo o simulador.

ibm.com/developerWorks/ssa/ developerWorks®

Trabajar con Worklight, Parte 1: Comenzar con su primeraaplicación de Worklight

Pagina 19 de 20

Recursos

• Información de productos Worklight• Documentación de Worklight• IBM Worklight Developer Edition 5.0• Edición de Desarrollo Java de Eclipse• Sitio desarrollador de Apple• Comenzar con Worklight• JQuery 1.7.1• JQuery Mobile 1.1.0• Código modelo• Worklight Studio• Zona de desarrollo de IBM developerWorks Mobile• IBM developerWorks WebSphere

developerWorks® ibm.com/developerWorks/ssa/

Trabajar con Worklight, Parte 1: Comenzar con su primeraaplicación de Worklight

Pagina 20 de 20

Sobre los autores

Jeremy Nortey

Jeremy Nortey es un desarrollador de software de la IBM Mobile Foundation dentrodel Grupo de Software. Desarrolla software y garantiza la calidad de solucionesmóviles. Se especializa en iOS y a veces trabaja en la construcción de aplicacionesnativas para iPhone en su tiempo libre. Sus pasatiempos incluyen el fútbol sóccer ycorrer.

Carlos Andreu

Carlos Andreu es un desarrollador de software del Grupo de Software de IBM.Actualmente, se encuentra trabajando en la creación de un marco de trabajo paradesarrollar aplicaciones híbridas, Android e iOS. Sus intereses varían desde lasúltimas tendencias y blogs tecnológicos hasta leer, mirar televisión y disfrutar detodo tipo de música. Puede obtener más información sobre él en http://dev.yapr.org/carlosandreu.

Raj Balasubramanian

Raj Balasubramanian es un arquitecto de productos del Grupo de Software de IBMque trabaja en la IBM Mobile Foundation. Lidera la interacción entre servicios yclientes para Worklight de IBM y para la IBM Mobile Foundation. Antes de su rol dedesarrollador, lideró los proyectos relacionados con infraestructura y aplicacionesde proporción de compromisos para clientes relacionados con tecnologías SOA,BPM. Web 2.0 y Portal. Se interesa por todo lo técnico, historia, matemáticas y física.Actualmente, se encuentra en camino hacia su doctorado en la Universidad de Texasen Austin. Puede leer sobre sus aventuras técnicas y personales del pasado en sublog 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/)