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

Configuración de una aplicación para iOS y Android

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

Jeremy Nortey, Software Developer, IBM

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 móviles. Se especializa en iOS y a veces trabaja en la construcción de aplicaciones nativas para iPhone en su tiempo libre. Sus pasatiempos incluyen el fútbol sóccer y correr.



Carlos Andreu , Software Developer, IBM

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 para desarrollar 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 de todo tipo de música. Puede obtener más información sobre él en http://dev.yapr.org/carlosandreu.



Raj Balasubramanian, Consulting IT Architect, IBM Mobile Foundation, IBM

Raj Balasubramanian es un arquitecto de productos del Grupo de Software de IBM que trabaja en la IBM Mobile Foundation. Lidera la interacción 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 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 Texas en Austin. Puede leer sobre sus aventuras técnicas y personales del pasado en su blog personal Gurukulam en http://balasubramanians.com/blog.



24-09-2012

Introducción

En los últimos años, IBM ha invertido mucho en el espacio móvil al garantizar la compatibilidad de sus productos de software centrales en varios dispositivos móviles y también al proporcionar tiempos de ejecución de aplicaciones y herramientas para desarrollar aplicaciones móviles. Con IBM Worklight, IBM puede expandir aún más todas sus capacidades móviles a través de su cartera de productos.

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

Como una introducción a Worklight, este artículo establece el flujo de trabajo básico del desarrollador de aplicaciones móviles y expone la configuración del entorno Worklight para las aplicaciones 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 del entorno con el desarrollo de aplicaciones interactivas para crear una aplicación funcional en torno al simple caso práctico de crear una aplicación para la lista de tareas (denominada "Todo"). Los artículos siguientes agregarán la integración con otros productos IBM para exponer las funciones y características de Worklight.

Introducción a Worklight

Obtenga Worklight ahora

Descargue ya mismo IBM Worklight Developer Edition 5.0 sin costos y sin fecha de vencimiento.

Worklight una plataforma móvil 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 creación de aplicaciones de Worklight.
  • IBM Worklight Device Runtime Components forman parte del kit de desarrollo de software que 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 conectividad segura a fuentes empresariales y de información en Internet.
  • IBM Worklight Console es una interfaz de usuario dedicada a ayudar a gestionar y controlar todo el ecosistema de aplicaciones móviles.

Estos componentes se muestran en la Ilustración 1.

Ilustración 1 Componentes de Worklight
Ilustración 1 Componentes de Worklight

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

  1. Configuración de Worklight y comenzar a desarrollar la aplicación.
  2. Proceda con el desarrollo usual y el proceso de prueba para verificar la funcionalidad de la aplicación al ejecutar o simular la aplicación.
  3. Cuando piense que está listo, publique la aplicación de prueba para obtener comentarios de los usuarios clave.
  4. Según los comentarios, continúe trabajando en las mejoras de la aplicación o láncela para una audiencia de prueba más amplia.
  5. Si decide expandir el uso de la aplicación de prueba, puede publicar la aplicación para un grupo de usuarios restringido en un repositorio local o privado de la aplicación, o para un repositorio público o empresarial de la aplicación (como Apple App Store, Google Play y demás).
Ilustración 2 Desarrollo de una aplicación móvil
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 de software del dispositivo y crear una aplicación vacía de ejemplo. El propósito de este proceso consiste en garantizar que la aplicación pueda verse en un dispositivo y publicarse en un servidor local de Worklight. El resultado será la base para el desarrollo de la próxima aplicación móvil.


Configuración del entorno

Esta aplicación de prueba que finalmente desarrollará es una aplicación "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 aplicación (escrito utilizando JQuery mobile) y otros detalles de 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 objetivo inmediato de este artículo es establecer el flujo de trabajo básico para desarrollar, implementar y probar su aplicación móvil en un simulador del dispositivo. Para hacerlo, puede comenzar trabajando 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 el propósito de este artículo, consideraremos que ya tiene instalado Eclipse. Para obtener más información, consulte la documentación Iniciación.

  2. Instalación de los plugins de Worklight Eclipse

    Si está familiarizado con la instalación de los plugins en Eclipse, entonces esta parte no debería ser un problema. Desde Eclipse, navegue a Help > Install New Software y luego presione el botón Add cerca de la sección superior derecha (Ilustración 3). En el diálogo Add Repository, 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
    Ilustración 3 Instalación de los plugins de Eclipse

    Continúe con los pasos siguientes presentados por el asistente de instalación para descargar e 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 en dispositivos Android como iOS.

    1. Instalación 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.

    2. Instalación del kit de desarrollo de software iOS (opcional)

      Siga las instrucciones del sitio desarrollador de Apple para instalar Xcode en una máquina con sistema operativo Mac. Si no tiene una Mac, entonces no podrá simular a aplicación de Worklight que desarrolle en un dispositivo iOS. En uno de los artículos siguientes, se proporcionarán alternativas utilizando las opciones de Desarrollo de Worklight, pero por ahora, si no tiene una Mac, ignore las instrucciones específicas de iOS.

  4. Inicio de un nuevo proyecto de Worklight

    Ahora 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 Proyecto de Worklight, intente File > New > Other > Worklight Project.) Nombre de la carpeta del proyecto Todo Project.

    Ilustración 4 Creación de un nuevo proyecto de Worklight
    Ilustración 4 Creación de un nuevo proyecto de Worklight
  5. Agregue una nueva aplicación al proyecto

    Finalmente, necesita agregar una nueva aplicación 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 (Ilustración 5). (Si no aparece, intente New > Other > Worklight Application.) Nombrar la aplicación Todo.

    Ilustración 5 Agregar una aplicación al proyecto
    Ilustración 5 Agregar una aplicación al proyecto

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

    Ilustración 6 Estructura de la carpeta de aplicaciones
    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 contiene un servidor local que puede utilizarse para probar la aplicación que creó anteriormente al desarrollarla 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ón para que la pruebe en un navegador.

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

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

Ilustración 8 Consola de servidor local
Ilustración 8 Consola de servidor local

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

Ilustración 9 Acceso a la consola del servidor local
Ilustración 9 Acceso a la consola del servidor local

Desarrollo de la aplicación

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

  1. Seleccione la biblioteca JavaScript

    La biblioteca JavaScript seleccionada para este ejemplo es JQuery mobile. Tiene la opción de utilizar bibliotecas como Dojo mobile o Sencha Touch. De forma alternativa, puede desarrollar simplemente utilizando solo JavaScript y crear su aplicación desde cero.

  2. Descargue las bibliotecas

    Para este ejemplo, necesita descargar estas bibliotecas JQuery:

    Ilustración 10 Detalles de JQuery
    Ilustración 10 Detalles de JQuery
  3. Mueva los archivos a Worklight

    Mueva estos archivos a la carpeta common/js:

    • jquery-1.7.1.min.js
    • 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 se hayan agregado al proyecto Worklight.

    Ilustración 11 Biblioteca JQuery de referencia en la aplicación Todo
    Ilustración 11 Biblioteca JQuery de referencia en la aplicación Todo
  4. Agregar código de plantilla

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

    Ilustración 12 Código modelo de la aplicación JQuery mobile
    Ilustración 12 Código modelo de la aplicación JQuery mobile
  5. Creación de entornos específicos para los dispositivos

    Dado 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 la carpeta Todo y seleccione Worklight > Worklight Environment luego Next (Ilustración 13).

    Ilustración 13 Seleccione el asistente de instalación del dispositivo
    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 dentro de ToDo.

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

Desarrollo de una aplicación implementable para dispositivos iOS y Android

Worklight está estructurado con archivos fuente comunes (HTML, CSS y JavaScript) en una carpeta denominada common y archivos específicos de la plataforma en sus directorios respectivos; 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. Worklight garantizará la sincronización de los archivos comunes en cada uno de los entornos específicos para los dispositivos.

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

Ilustración 15 Desarrollar e implementar
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 desarrollador habilitado 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á el emulador y mostrará la secuencia "Hello World" que ingresó anteriormente (Ilustraciones 16 y 17).

Ilustración 16 Ejecutar aplicación Android
Ilustración 16 Ejecutar aplicación Android
Ilustración 17 Prueba de aplicación Android
Ilustración 17 Prueba de aplicación Android

Los pasos para implementar su aplicación en un dispositivo iOS son similares al proceso de un Android. Haga clic en la aplicación iPhone y seleccione Run as... > Build All and Deploy y luego haga clic en Run as XCode Project (Ilustración 18). En Xcode, simplemente selecciona un dispositivo 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.

Ilustración 18 Desarrollo e implementación de una aplicación iOS
Ilustración 18 Desarrollo e implementación de una aplicación iOS
Ilustración 19 Seleccionar dispositivo o simulador para la prueba
Ilustración 19 Seleccionar dispositivo o simulador para la prueba
Ilustración 20. Prueba de la aplicación iPhone
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 una aplicació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 para comenzar a agregar la lógica de la aplicación y el contenido a su aplicación Todo. Estos pasos proporcionaron una introducción de cómo repetirá el flujo de trabajo del desarrollo de la creación de una aplicación y de probarla en un dispositivo o simulador.

Recursos

Aprender

Obtener los productos y tecnologías

Comentarios

developerWorks: Ingrese

Los campos obligatorios están marcados con un asterisco (*).


¿Necesita un IBM ID?
¿Olvidó su IBM ID?


¿Olvidó su Password?
Cambie su Password

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


La primera vez que inicie sesión en developerWorks, se creará un perfil para usted. La información en su propio perfil (nombre, país/región y nombre de la empresa) se muestra al público y acompañará a cualquier contenido que publique, a menos que opte por la opción de ocultar el nombre de su empresa. Puede actualizar su cuenta de IBM en cualquier momento.

Toda la información enviada es segura.

Elija su nombre para mostrar



La primera vez que inicia sesión en developerWorks se crea un perfil para usted, teniendo que elegir un nombre para mostrar en el mismo. Este nombre acompañará el contenido que usted publique en developerWorks.

Por favor elija un nombre de 3 - 31 caracteres. Su nombre de usuario debe ser único en la comunidad developerWorks y debe ser distinto a su dirección de email por motivos de privacidad.

Los campos obligatorios están marcados con un asterisco (*).

(Por favor elija un nombre de 3 - 31 caracteres.)

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


Toda la información enviada es segura.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=90
Zone=WebSphere, Desarrollo móvil
ArticleID=836467
ArticleTitle=Trabajar con Worklight, Parte 1: Comenzar con su primera aplicación de Worklight
publish-date=09242012