Integración de una aplicación móvil para acceder a los datos de SalesForce.com con IBM Worklight e IBM WebSphere Cast Iron

¿Cómo desarrollar una aplicación móvil que recupere información desde un sistema de gestión de relaciones con los clientes? Con las soluciones IBM® Worklight y WebSphere® aprenderá a desplegar fácil y rápidamente una aplicación móvil en cualquier tipo de smartphone o tablet que se conecte a WebSphere Cast Iron para manejar datos de SalesForce ®.com.

Magali Boulet, Certified Client Technical Professional, IBM

Magali Boulet is a Certified Client Technical Professional and has been working for IBM since 2006. She focuses on WebSphere DataPower and WebSphere Cast Iron for customers in all industries. Prior to working for IBM, Magali had worked at several IT companies.



Etienne Noiret, WebSphere Solution Architect, IBM China

Etienne Noiret has been working for more than six years in the BPM space using different technologies. He also worked for six years as a Java EE architect. After having developed some native mobile interfaces in Java and Flex, he discovered how easy it becomes using Dojo!



12-12-2012

Introducción

Las empresas intentan reducir costos, impulsar la productividad y ofrecer nuevas capacidades rápidamente para poder alcanzar el número máximo de usuarios y mercados. La movilidad y la informática en nube son dos factores generadores de tecnología que le permiten satisfacer estas necesidades. Por este motivo, IBM ha incluido Worklight -una plataforma de aplicaciones empresariales móviles- e IBM WebSphere Cast Iron –una solución de integración de nube– dentro de IBM Mobile Foundation a fin de ofrecer una solución integral y global para generar, conectar, administrar y asegurar su empresa móvil. IBM Endpoint Manager for Mobile Devices es el tercer componente de IBM Mobile Foundation, que le permite administrar y asegurar sus dispositivos móviles. Sin embargo, este componente no se encuentra dentro del alcance de este artículo. La intención de este artículo es demostrar cómo puede conectar fácilmente una aplicación móvil a un sistema de CRM, como SalesForce.com, mediante IBM Worklight y WebSphere Cast Iron.

IBM Worklight posibilita el desarrollo de aplicaciones enriquecido entre plataformas para satisfacer las necesidades de la empresa móvil. Aprovechando las tecnologías y herramientas estándar, como HTML5, CSS y JavaScript, su método abierto les permite a las organizaciones desarrollar aplicaciones enriquecidas HTML5, híbridas y nativas para una gran variedad de smartphones y tablets.

IBM Worklight incluye middleware optimizado para dispositivos móviles que actúa como puerta de enlace entre la aplicación, los sistemas de backend empresariales y los servicios de nube. Fue diseñada para integrarse con la infraestructura existente de la organización y aprovechar los recursos y procesos existentes.

La solución IBM WebSphere Cast Iron es una plataforma única, completa y sólida diseñada en su totalidad para satisfacer las necesidades específicas de conectar todas sus aplicaciones de nube, todas sus aplicaciones internas y cualquier combinación híbrida de los dos tipos de aplicaciones. La integración de nube de Cast Iron simplifica la migración de datos y la integración de aplicaciones. Ofrece todo lo necesario para completar esos proyectos mediante un método de "configuración, no codificación" que no requiere programadores expertos ni especialización en middleware.

En este artículo, aprenderá a combinar la productividad de Worklight y la facilidad de uso de Cast Iron para desarrollar una aplicación móvil que recupere información de SalesForce.com.


Visión general del escenario

Usted desarrollará una aplicación móvil mediante las soluciones Worklight y Cast Iron. Esta aplicación móvil mostrará las cuentas de SalesForce.com. Para cada cuenta elegida, mostrará los contactos de SalesForce.com asociados.

Este escenario involucra tres componentes:

  • Worklight para crear la aplicación móvil
  • Cast Iron como middleware para la conexión con SalesForce.com
  • SalesForce.com como el sistema de gestión de relaciones con los clientes (CRM) de backend

El escenario se resume de la siguiente manera (vea la Figura 1):

  1. El usuario inicia la aplicación Worklight en un dispositivo móvil.
  2. La aplicación móvil envía la solicitud del usuario al servidor de Worklight.
  3. El servidor de Worklight utiliza el adaptador de Cast Iron para propagar la solicitud del usuario a Cast Iron, emitiendo una solicitud HTTP GET.
  4. Cast Iron utiliza su conector de SalesForce.com incorporado para solicitar a SalesForce.com que obtenga la cuenta o la información de contacto solicitada.
  5. Cast Iron responde al servidor de Worklight original con una respuesta XML a través de HTTP.
  6. El servidor de Worklight responde al dispositivo con una respuesta JSON a través de HTTP.
Figura 1. Visión general del escenario
Overview of scenario

Este artículo se basa en WebSphere Cast Iron Studio V6.1.0.9 y en IBM Worklight V5.0.3 (cualquier edición).

Hipótesis de Cast Iron

Para este artículo, hemos elegido las siguientes hipótesis para Cast Iron:

  • Worklight se comunicará con Cast Iron a través de solicitudes HTTP.
  • Únicamente para este escenario, los parámetros se transferirán al URL. Para obtener el objeto Contacts de una cuenta específica, el identificador de cuenta (accountid) se debe transferir a Cast Iron. Formará parte del URI, por ejemplo, http://castironserver/getContacts?id=accountid. Sin embargo, no está asegurado, y el identificador de cuenta se debe asegurar (cifrar o codificar). El presente artículo no describe este mecanismo de seguridad.
  • Dado que Worklight transforma automáticamente la carga XML en carga JSON, Cast Iron responde a Worklight con una respuesta XML a través de HTTP.
  • Si no se encuentra ninguna cuenta o contacto, u ocurre algún error en Cast Iron, se envía un mensaje de error XML nuevamente a Worklight de la siguiente manera. El elemento Description se completa con el origen del error:
    <Error>
        <Name>Cast Iron Error</Name>
        <Description/>
    </Error>

En la sección Descargas del artículo, encontrará el esquema ErrorLog.xsd utilizado para generar este mensaje de error.

Hipótesis de Worklight

Para los fines de este artículo, hemos elegido las siguientes hipótesis para Worklight:

  • Para desarrollar la aplicación móvil, decidimos crear una aplicación híbrida y utilizar la infraestructura de Dojo (jQuery o Sencha son otras alternativas).
  • No incluimos ningún elemento de diseño gráfico en la aplicación móvil que hubiera ofrecido una interfaz de usuario atractiva; confiamos en lo que la infraestructura de Dojo brinda de forma predeterminada.
  • Generamos y optimizamos la aplicación para las plataformas Android® e iOS, lo que requiere que los kits de desarrollo de software (SDKs) correspondientes estén instalados en el entorno de desarrollo.

Configuración de Cast Iron

Esta sección explica cómo crear el proyecto de Cast Iron para recuperar las cuentas y los contactos de SalesForce.com. Se configurarán dos orquestaciones:

  • Una para recuperar las cuentas de SalesForce.com
  • Otra para recuperar los contactos de SalesForce.com para la cuenta seleccionada

Cómo recuperar las cuentas de SalesForce.com

  1. Abra Cast Iron Studio y cree un proyecto nuevo.
  2. Cree dos puntos finales: uno para recuperar las solicitudes de Worklight y otro para SalesForce.com:
    1. Desde la pestaña Project , haga clic derecho en Endpoint y seleccione HTTP. Deje todos los parámetros predeterminados (seleccione Integration Appliance Receives Request). Renombre el punto final como HTTPReceiveRequest. Es posible que desee crear una propiedad de configuración (HttpPortIn) para el número de puerto, tal como se muestra en la Figura 2.
    Figura 2. Punto final HTTP para recibir solicitudes de Worklight
    HTTP Endpoint for receiving Worklight requests
  3. Desde la pestaña Project , haga clic derecho en Endpoint y seleccione Salesforce.com. Complete la sección de inicio de sesión con la información de su cuenta de SalesForce.com. Nuevamente, se pueden crear las propiedades de configuración de estos valores, tal como se muestra en la Figura 3.
    Figura 3. Punto final de Salesforce.com
    Salesforce.com Endpoint
  4. Haga clic en el botón Test Connection en la parte inferior de este panel de configuración de punto final de salesforce.com para probar su conexión. Obtendrá el siguiente mensaje tal como se muestra en la Figura 4.
    Figura 4. Resultado de la prueba de punto final de Salesforce.com
    Salesforce.com endpoint testing result

Ahora, está listo para crear la primera orquestación:

  1. Renombre la orquestación que ya ha creado como getAccounts.
  2. Arrastre y suelte el punto final HTTPReceiveRequest hacia la orquestación y seleccione la actividad Receive Request .
  3. En la lista de verificación Configure , complete /getAccounts como el URL y marque la opción Requires a Reply tal como se muestra en la Figura 5.
    Figura 5. Configuración de la actividad HTTP Receive Request
    HTTP Receive Request activity configuration

    Ahora, configure la consulta de cuenta de SalesForce.com. Utilizará una actividad Try para atrapar cualquier error durante esta consulta.

  4. Arrastre y suelte la actividad Try... después de la actividad HTTP Receive.
  5. En la ramificación Try , arrastre y suelte Salesforce.com Endpoint y seleccione Query Objects, tal como se muestra en la Figura 6.
    Figura 6. Actividad Query Objects de SalesForce.com
    SalesForce.com Query Objects Activity
  6. En la lista de verificación Configure , complete la consulta como SELECT Name, Id FROM Account, y valide la consulta mediante el botón de selección (resaltado con el círculo violeta en la Figura 7).
    Figura 7. Configuración de la consulta
    Query configuration
  7. En la lista de verificación Map Outputs , copie los objetos del resultado de SalesForce.com mediante el botón Copy y renombre la variable creada por los objetos en SFDCAccounts tal como se muestra en la Figura 8 y en la Figura 9.
    Figura 8. Obtención del resultado de SalesForce.com
    Getting the SalesForce.com result
    Figura 9. Actividad Query Objects configurada
    Query Objects Activity configured

    Verifique si la actividad Query Objects devolvió algún dato. Si es así, transforme el documento XML SFDCAccounts en una cadena de caracteres y envíela nuevamente a Worklight. De lo contrario, envíe un mensaje de error nuevamente a Worklight.

  8. Dentro de la ramificación Try, arrastre y suelte la actividad If...Then después de Query Objects.
  9. Configure la "condición If" en Left Hand Expression . Utilice el botón ovalado para seleccionar la variable SFDCAccounts , elija el elemento Id y haga clic en OK (vea la Figura 10).
    Figura 10. Configuración de Left Hand Expression
    Left Hand Expression configuration
  10. Seleccione la opción "!=" para el operador. Finalmente, especifique '' como se muestra en Right Hand Expression. Obtiene el resultado tal como se muestra en la Figura 11.
    Figura 11. Actividad If configurada
    If Activity configured
  11. Arrastre y suelte la actividadWrite XML en la ramificación If.
  12. En la lista de verificación Configure , elija la variable SFDCAccounts y haga clic en OK tal como se muestra en la Figura 12.
    Figura 12. Elección de la estructura XML para serializar
    Choosing the XML structure to serialize
  13. En la lista de verificación Map Inputs , elija la variable SFDCAccounts y correlacione Account de la izquierda con Account de la derecha, tal como se muestra en la Figura 13.
    Figura 13. Configuración de Map Inputs
    Map Inputs configuration
  14. En la lista de verificación Map Outputs, utilice el botón Copy para copiar el resultado de serialización y renómbrelo como SFDCAccountsString tal como se muestra en la Figura 14.
    Figura 14. Configuración de Map Outputs
    Map Outputs configuration

    Utilizará la actividad Map Variables para completar una variable con la lista serializada de cuentas de SalesForce.com.

  15. En la ramificación If, arrastre y suelte la actividad Map Variables después de Write XML.
  16. Haga clic en el botón Select Inputs y elija la variable the SFDCAccountsString tal como se muestra en la Figura 15.
    Figura 15. Entrada de la actividad Map Variable
    Input of the Map Variable Activity
  17. Haga clic en el botón Select Outputs , cree una nueva variable de cadena de caracteres (mediante el botón New en la ventana emergente) y nómbrela outputMessage.
  18. Finalmente, correlacione SFDCAccountsString de la izquierda con outputMessage de la derecha, tal como se muestra en la Figura 16.
    Figura 16. Correlación final de la actividad Map Variable
    Final mapping of the Map Variable Activity
  19. Finalmente, arrastre y suelte la actividad Send Response después del bloque Try (pero no en el bloque Try). La lista de verificación de configuración se completa con la actividad HTTP Receive Request que configuró anteriormente.
  20. En la lista de verificación Map Inputs , seleccione la variable outputMessage y correlaciónela con el cuerpo como se muestra en la Figura 17.
    Figura 17. Configuración del resultado que se enviará nuevamente a la aplicación de Worklight
    Configuring the result to be sent back to Worklight application

    En esta etapa, observe el ícono de advertencia en la lista de verificación Map Inputs de la actividad anterior. Desplace el mouse por encima y verá el mensaje de advertencia generado por Cast Iron Studio, tal como se muestra en la Figura 18.

    Figura 18. Mensaje de advertencia para la variable outputMessage
    Warning message for the outputMessage variable

    La variable outputMessage no se ha inicializado fuera del bloque Try. Esto significa que Cast Iron no conoce el valor de esta variable. Una solución es asignar un valor predeterminado a esta variable. Para ello, vaya a la pestaña Variables , seleccione la variable outputMessage y asigne un valor predeterminado, como valor del mensaje de salida predeterminado.

    ¡Ya casi termina! Para finalizar la orquestación, ahora es necesario configurar las ramificaciones Else y Catch.

    Tal como se explicó en la hipótesis de Cast Iron, generará un mensaje de error personalizado basado en una definición de esquema XML.

  21. Cargue el esquema XML ErrorLog en su proyecto (que se proporciona en la sección Descargas del artículo).
  22. En la ramificación Else, arrastre y suelte la actividad Write XML :
    1. En la lista de verificación Configure, haga clic en el botón Browse , cree una variable en función del esquema ErrorLog y utilícela como esquema XML para serializar, tal como se muestra en la Figura 19.
      Figura 19. Elección de la estructura XML para serializar
      Choosing the XML structure to serialize
    2. En la sección Map Inputs , en la parte To Activity , defina los valores predeterminados para los elementos Name y Description, tal como se muestra en la Figura 20, como Cast Iron Error como Name y No Account found como Description.
      Figura 20. Asignación de valores de error predeterminados
      Assigning default error values
    3. En la lista de verificación Map Outputs, utilice el botón Copy para copiar el resultado de serialización y renombrarlo como ErrorMessage.
  23. En la ramificación Else , arrastre y suelte la actividad Map Variables después de Write XML. Haga clic en el botón Select Inputs y elija ErrorMessage . Haga clic en el botón Select Outputs y elija outputMessage . Correlacione ErrorMessage con outputMessage .
  24. En la ramificación CatchAll , arrastre y suelte la actividad Write XML :
    1. En la lista de verificación Configure , elija la variable de error (en función del esquema ErrorLog) creada anteriormente.
    2. En la sección Map Inputs , haga clic en el botón Select Inputs y elija FaultInfo . Defina un valor predeterminado para Name, por ejemplo CastIron Error y correlacione el elemento message de la variable FaultInfo con el elemento description a la derecha.
    3. En la sección Map Outputs , correlacione la variable XmlText con outputMessage .

    Finalmente, vaya al menú Orchestration y elija la opción Validate para que Cast Iron Studio valide su orquestación. Obtendrá un mensaje de confirmación que indica que la orquestación es válida. Su orquestación será similar a la que se muestra en la Figura 21.

    Figura 21. Orquestación getAccounts
    getAccounts orchestration

Cómo recuperar los contactos de SalesForce.com

Esta orquestación consistirá en consultar a SalesForce.com los contactos de la cuenta seleccionada. Es similar a la primera, por lo que copiará y pegará la orquestación getAccounts y la modificará.

  1. Copie y pegue la orquestación getAccounts . Renómbrela getContacts.
  2. Modifique la actividad Receive Request. Cambiará el URL y agregará la extracción del identificador de cuenta, dado que esta orquestación recibirá una solicitud HTTP de Worklight, como http://castironserver/getContacts?id=accountid.
    1. En la lista de verificación Configure, cambie el URL por /getContacts.
    2. En la lista de verificación Map Outputs , haga clic en el botón Select Outputs , cree una nueva variable de cadena de caracteres y renómbrela accountId. Haga clic en OK.
    3. Arrastre y suelte la funciónSubstring After ; correlaciónela con el uri a la izquierda y haga doble clic en ella. Complete el parámetro matchString con id=, tal como se muestra en la Figura 22. Haga clic en OK.
      Figura 22. Extracción del identificador de cuenta
      Extraction of the Account identifier
  3. Correlacione la función Substring After con la variable accountId a la derecha.
  4. Haga clic en la actividad Query Objects :
    1. Vaya a la lista de verificación Configure y modifique la consulta por SELECT LastName, FirstName, Email FROM Contact WHERE AccountId=$idparam. Haga clic en Validate Query .
    2. En la lista de verificación Map Inputs , haga clic en el botón Select Inputs y elija accountId . Correlaciónelo con la variable idparam a la derecha, como se muestra en la Figura 23.
      Figura 23. Uso del identificador de cuenta para la consulta del objeto Contact
      Using the Account identifier for the Contact object query
    3. En la lista de verificación Map Outputs , renombre la variable SFDCAccounts como SFDCContacts y correlacione el objeto Contact de la izquierda con el objeto Contact de la derecha.
  5. Modifique la ramificación de la condición If. En Left Hand Expression, haga clic en el botón ovalado, seleccione la variable SFDCContacts y elija el campo LastName como se muestra en la Figura 24.
    Figura 24. Configuración de Left Hand Expression
    Left Hand Expression configuration
  6. Modifique la actividad Write XML en la ramificación de la condición If.
    1. En la lista de verificación Configure, elija la variable SFDCContacts y haga clic en OK.
    2. En la lista de verificación Map Inputs , quite la variable SFDCAccounts y agregue SFDCContacts . Correlaciónela con la variable Contact a la derecha como se muestra en la Figura 25.
      Figura 25. Obtención del resultado de consulta Contact de SalesForce.com que se serializará
      Getting the SalesForce.com Contact query result to be serialized
    3. En la lista de verificación Map Outputs , renombre la variable como SFDCContactsString.
  7. Modifique la actividad Map Variable en la ramificación de la condición If para correlacionar SFDCContactsString con outputMessage .
  8. En la ramificación Else, modifique la actividad Write XML. Vaya a la sección Map Inputs y cambie el valor predeterminado para el parámetro Description por No Contact found como se muestra en la Figura 26.
    Figura 26. Mensaje de error personalizado cuando no se encontraron contactos
    Custom error message when no contact found

Nuevamente, es posible que desee que Cast Iron Studio verifique si su orquestación es válida, como se hizo anteriormente. Puede desear que Cast Iron Studio elimine todas las variables no utilizadas de sus orquestaciones. Desde la pestaña Variables , haga clic derecho en el panel Variables y elija el menú Remove Unused Variable(s) .

Ahora, está listo para probar sus orquestaciones. La prueba se hará a nivel local dentro de Cast Iron Studio y el despliegue y la ejecución, en un servidor de Cast Iron.

Prueba de las orquestaciones a nivel local dentro de Cast Iron Studio

  1. Mediante la pestaña Verify , iniciará la orquestación que desea probar. Puede utilizar HTTP Post Utility de Cast Iron Studio para enviar la solicitud HTTP a la orquestación.
  2. Para probar la orquestación getAccounts, puede enviar una solicitud como http://hostname/getAccounts.
  3. Para probar la orquestación getContacts, es necesario enviar un identificador de cuenta como parte del URI de solicitud (puede utilizar el resultado getAccounts para copiar uno de los identificadores de cuenta). La solicitud que se enviará es similar a este URL: http://hostname/getContacts?id=<identificadordecuenta>.

Una vez que la prueba local se haya realizado con éxito, estará listo para el despliegue en el servidor de Cast Iron.

Despliegue en el servidor de Cast Iron

  1. Desde Cast Iron Studio, seleccione el menú File > Publish Project y complete el nombre de host, el nombre de usuario y la contraseña de su servidor de Cast Iron tal como se muestra en la Figura 27. Tenga en cuenta que el nombre de host es la dirección IP de administración.
    Figura 27. Despliegue en el servidor de Cast Iron
    Deploying on Cast Iron Server
  2. Ahora, puede iniciar sesión en la consola de administración Web del servidor de Cast Iron. Verá que su proyecto está listo para iniciarse.

Configuración de Worklight

Existen tres pasos principales para generar esta aplicación móvil:

  1. Diseñe las vistas que verá el usuario y el flujo de navegación. Este es el desarrollo del lado del cliente y usted utilizará el editor gráfico de Worklight Studio para la implementación de WYSIWYG.
  2. Cree la conectividad a los servicios de Cast Iron que ha expuesto en la sección anterior. Este es el desarrollo del lado del servidor y usted utilizará las capacidades de los adaptadores de Worklight Studio para crear este código.
  3. Utilice estos servicios dentro de las vistas para rellenarlas de forma dinámica cuando el usuario navegue por la aplicación. Este es el desarrollo del lado del cliente que requiere la adición de Javascript a las páginas diseñadas previamente.

También será necesario optimizar y generar la aplicación para plataformas iOS y Android.

Diseño de las vistas móviles y el flujo de navegación

Comencemos por crear el proyecto de la aplicación móvil. La Figura 28 muestra cómo iniciar una aplicación híbrida basada en la infraestructura Dojo.

Figura 28. Creación de la aplicación híbrida
Creation of the hybrid application

La aplicación se basa en una plantilla de navegación típica:

  • Una vista "main", utilizada para asignar al usuario las diversas funciones implementadas
  • Un par de vistas "master/details".
  1. Comencemos por implementar la vista main. Mediante el editor gráfico de Worklight Studio, abra el archivo principal MyCRM.html , asegúrese de que se encuentra en "Design mode" y asegúrese de que se muestre la paleta. Desde el panel "Dojox.mobile", arrastre y suelte el widget Scrollable view en su página principal, como se muestra en la Figura 29, y nómbrelo mainView.
    Figura 29. Creación de la vista main
    Creation of the main view
  2. In esta vista, arrastre y suelte EdgeToEdgeList y cree tres elementos estáticos haciendo clic derecho en el primer elemento y seleccionando ListItem / Insert After, como se muestra en la Figura 30. Tenga en cuenta que, más adelante, solo implementará el enlace "My customers".
    Figura 30. Creación del menú main
    Creation of the main menu
  3. Ahora, es momento de implementar las vistas detalladas principales. Tal como se muestra en la Figura 31, tome otra ScrollableView de la paleta, arrástrela después de la vista principal, nómbrela accountsView e incluya un encabezado con un título My Accounts y un botón para retroceder vinculado a la "mainView" creada previamente. Finalmente, arrastre otra EdgeToEdgeList a esta vista y nómbrela accountsList. Más adelante, utilizará el adaptador para rellenar dinámicamente esta lista.
    Figura 31. Creación de la vista Accounts
    Creation of the Accounts view
  4. La última vista para implementar muestra los contactos vinculados a una cuenta de SalesForce.com. Cambie a la vista source de su página HTML, copie y pegue accountView, renombre el título como Contacts" para vincular el botón para retroceder con accountsView y renombre la lista como contactsList. La Figura 32 muestra cómo se debe ver la aplicación (observe la ventana "Mobile views" en la esquina inferior izquierda).
    Figura 32. Resumen de las vistas Master/Details
    Summary of the Master/Details views
  5. Finalmente, seleccione mainView, haga clic derecho en el elemento My accounts y seleccione List Items / Link to Mobile View (vea la Figura 33). Seleccione accountsView del recuadro desplegable, lo que garantiza que pueda dirigirse a esta vista cuando haga clic en este elemento.
    Figura 33. Vinculación de la vista Main con la vista Accounts
    Linking the main view to the Accounts view
  6. En este momento, puede probar su aplicación estática. Haga clic derecho en la carpeta common y elija Run as / Build all and Deploy. Abra la consola de Worklight en http://localhost:8080/console para asegurar que su aplicación se haya desplegado, y haga clic en Preview as Common Resources . Ahora, podrá navegar entre las vistas menú principal y contactos, como se muestra en la Figura 34.
    Figura 34. Prueba de las vistas estáticas desde la consola
    Testing the static views from the console

Cómo crear el código del lado del servidor mediante un adaptador de Worklight

Worklight le permite separar el código del lado del servidor (acceso a los servicios de backend) del código del lado del cliente (manipulación de datos para rellenar las vistas). El código del lado del servidor puede tener un ciclo de vida diferente al código del lado del cliente, siempre que no cambie el contrato de interfaz entre los dos. Todo el código del lado del servidor se escribe a través de los adaptadores de Worklight Studio. En este escenario, utilizamos un adaptador de Cast Iron para llamar los servicios que se expusieron previamente a través de Cast Iron.

  1. En Studio, seleccione File > New > Worklight Adapter para crear un adaptador nuevo, seleccione Cast Iron del recuadro desplegable Adapter type y nómbrelo CRMAdapter, como se muestra en la Figura 35.
    Figura 35. Creación del adaptador de Cast Iron
    Creating the Cast Iron adapter
  2. El primer archivo para implementar es el descriptor XML del adaptador, donde puede especificar la conectividad con Cast Iron y declarar dos funciones que implementará (getAccounts y getContacts), como se muestra en la Figura 36.
    Figura 36. Configuración del adaptador de Cast Iron
    Configuring the Cast Iron adapter
  3. Ahora, está listo para hacer la implementación en el archivo Javascript que se creó junto con el adaptador. La Figura 37 muestra cuán sencillo es llamar los servicios de backend. Tenga en cuenta que también es posible:
    • Mezclar el código Javascript y Java.
    • Llamar diversos servicios de backend y exponerlos como un único servicio para evitar varias idas y vueltas entre la aplicación móvil y el servidor.
    • Agregar restricciones de seguridad arriba de una llamada de servicio del adaptador.
    Figura 37. Implementación de los servicios remotos de Cast Iron
    Implementing the Cast Iron remote services
  4. Asegúrese de que los servicios del adaptador se hayan probado antes de utilizarlos en una aplicación móvil. En la vista Project Explorer , haga clic derecho en el adaptador creado recientemente, primero seleccione Run as > Deploy Worklight Adapter y luego Run as > Invoke Worklight Procedure. La Figura 38 muestra los parámetros de invocación disponibles. Seleccione getAccounts y haga clic en Run.
    Figura 38. Prueba de los servicios remotos de Cast Iron
    Testing the Cast Iron remote services
  5. La Figura 39 muestra el resultado de la invocación. Tenga en cuenta que el XML devuelto por Cast Iron se ha transformado automáticamente en un formato JSON, que es la manera optimizada de transportar los datos a través de un ancho de banda limitado y manipular los datos a través de Javascript. En este momento, observe la estructura JSON que deberá atravesar para rellenar sus listas.
    Figura 39. Resultado de la invocación de servicios remotos de Cast Iron
    Cast Iron remote services invocation result

Cómo rellenar de manera dinámica las vistas mediante el adaptador remoto

Ahora, cuenta con todos los bloques funcionales que se requieren para finalizar la implementación de la aplicación. Las vistas móviles de un lado y los servicios del adaptador del otro lado.

Abra el archivo HTML principal, seleccione el elemento My customers en mainView y agregue una llamada a una función getAccounts de Javascript en el evento onclick, tal como se muestra en la Figura 40.

Figura 40. Llamada del servicio getAccounts en la carga de la página
Calling the getAccounts service on page load

Ahora, implementemos la función "getAccounts" en el archivo MyCRM.js mediante una llamada remota al servicio del adaptador que se creó previamente. El Listado 1 muestra cómo llamar a este adaptador a través del método WL.Client.invokeProcedure y cómo implementar funciones de devolución de llamada para manejar el resultado.

Listado 1. Código Javascript para rellenar dinámicamente la lista de cuentas
var busy;

function wlCommonInit(){
    // Common initialization code goes here
    busy = new WL.BusyIndicator('content', {color : '#1D4885'});
    busy.hide();
}

function getAccounts() {
    busy.show();
    var invocationData = {
            adapter: 'CRMAdapter',
            procedure: 'getAccounts',
            parameters: []
    };
    WL.Client.invokeProcedure(invocationData, {
        onSuccess : onGetAccountsSuccess,
        onFailure : onGetAccountsFailed,
        timeout : 30000
    });
}

function onGetAccountsSuccess(response) {
    busy.hide();
    var items = dijit.registry.byId("accountsList");
    items.destroyDescendants();
    if(response.invocationResult.Error) {
        // Functional error returned by CI
        WL.SimpleDialog.show("Error",
         "CRM returned error: " + response.invocationResult.Error.Description,
         [{text : "Close"}]);
    } else {
        var accounts = response.invocationResult.objects.Account;
        if(accounts && accounts.length>0) {
            for(var i=0; i<accounts.length; i++) {
                var account = accounts[i];
                var item = new dojox.mobile.ListItem({
                    moveTo: "contactsView",
                    transition: "slide",
                    label: account.Name
                });
                items.addChild(item);
                item.on("click", dojo.hitch(account, function() 
                 { searchContacts(this); }));
            }
        }
    }
}

function onGetAccountsFailed(response) {
    busy.hide();
    WL.SimpleDialog.show("Error",
            "Failed to connect to back end" + (response.errorMsg ? ": " 
              + response.errorMsg : ""),
            [{text : "Close"}]);
}

Cuando la llamada al adaptador remoto se realiza correctamente, se llama al método onGetAccountsSuccess. Es el sitio adecuado para circular por las cuentas recuperadas del backend y rellenar dinámicamente el widget "accountsList" que creó previamente. El Listado 1 también muestra cómo puede crear de forma dinámica los widgets de Dojo en Javascript. Tenga en cuenta que también implementó una llamada a la función searchContacts en cada elemento y transmitió el identificador de cuenta actual a esta función.

La implementación de la función searchContacts es similar a la función getAccounts, excepto que los elementos que crea No son accesibles mediante un clic. El Listado 2 muestra los datos de contacto que mostrará en cada elemento.

Listado 2. Código Javascript para invocar searchContacts
function searchContacts(account) {
    busy.show();
    var invocationData = {
            adapter: 'CRMAdapter',
            procedure: 'getContacts',
            parameters: [account.Id]
    };
    WL.Client.invokeProcedure(invocationData, {
        onSuccess : onSearchSuccess,
        onFailure : onSearchFailed,
        timeout : 30000
    });
}

function onSearchSuccess(response) {
    busy.hide();
    var items = dijit.registry.byId("contactsList");
    items.destroyDescendants();
    if(response.invocationResult.Error) {
        // Functional error returned by CI
        WL.SimpleDialog.show("Error",
         "CRM returned error: " + response.invocationResult.Error.Description,
         [{text : "Close"}]);
    } else {
        var contacts = response.invocationResult.objects.Contact;
        if(contacts && contacts.length>0) {
            for(var i=0; i<contacts.length; i++) {
                var contact = contacts[i];
                var item = new dojox.mobile.ListItem({
                    label: contact["FirstName"] + ' ' + contact["LastName"] + ' 
                     (' + contact["Email"] + ')'
                });
                items.addChild(item);
            }
        }
    }
}

function onSearchFailed(response) {
    busy.hide();
    var items = dijit.registry.byId("contactsList");
    items.destroyDescendants();
    WL.SimpleDialog.show("Error", "Failed to connect to back end" + 
     (response.errorMsg ? ": " + response.errorMsg : ""), [{text : "Close"}]);
}

Optimización de la aplicación para diferentes sistemas operativos móviles de destino

Ahora que su aplicación está lista, debe elegir qué entornos de destino desplegará y qué tipo de optimización desea aplicar a cada uno de estos entornos. Worklight Studio le ayuda a optimizar la aplicación en función de un código común (lo que ha desplegado hasta ahora) de manera que tenga una experiencia única adaptada a los sistemas operativos y dispositivos donde la aplicación se ejecutará. Para los fines de esta demostración, creará un entorno para iPhone® y Android. Seleccione File > New > Worklight Environment, tal como se muestra en la Figura 41. Implementará una optimización para el entorno Android únicamente.

Figura 41. Adición del sistema operativo iPhone y Android
Adding iPhone and Android OS

Para el entorno Android, observe el botón para retroceder del sistema que utilizan las personas para navegar nuevamente hacia sus aplicaciones. Esto requiere una pequeña modificación del directorio común y una implementación dedicada en el directorio de Android. Como se muestra en la Figura 42, agregue una variable global y una función Javascript en el directorio común para memorizar la vista actual.

Figura 42. Gestión de la navegación
Managing the navigation

En el directorio de Android, implemente una función Javascript en el archivo MyCRM.js que maneja la navegación cada vez que un usuario hace clic en el botón para retroceder del sistema, en función de la vista actual. El Listado 3 muestra cómo se implementa esto.

Listado 3. Optimización de la navegación para Android
function wlEnvInit() {
    wlCommonInit();
    // Environment initialization code goes here
    initBackButton();
}

function initBackButton() {
    WL.App.overrideBackButton(backKeyDownFunction);
}

function backKeyDownFunction(){
    switch (currentView.id) {
        case "contactsView":
            currentView.performTransition('accountsView',-1,"slide",null);
            currentView = dijit.registry.byId("accountsView");
            break;
        case "accountsView":
            currentView.performTransition('mainView',-1,"slide",null);
            currentView = dijit.registry.byId("mainView");
            break;
        default:
            navigator.app.exitApp();        
    }
}

Además, también es posible actualizar el archivo MyCRM.css de Android para ocultar los botones para retroceder que se muestran en los encabezados, como se muestra en el Listado 4.

Listado 4. Ocultar el botón para retroceder para Android
/* Hide the Dojo Mobile back button on Android */
.mblToolBarButtonHasLeftArrow {
    display: none;
}

Una vez hecho esto, asegúrese de que se hayan guardado todos sus archivos, seleccione la aplicación desde la vista Project Explorer , haga clic derecho y seleccione Run as > Build all and Deploy. Ahora, podrá probar la aplicación final.


Resumen

Primero, puede probar la aplicación a través del simulador de explorador móvil. Abra la consola de Worklight (http://localhost:8080/console) y haga clic en Android o iPhone y pruebe la aplicación, como se muestra en la Figura 43.

Figura 43. Prueba de la aplicación final con el simulador de explorador móvil
Testing the final application with mobile browser simulator

Esta técnica es útil para depurar todo el código Javascript y CSS mediante los depuradores de explorador incorporados que se encuentran disponibles. Después, es posible generar la aplicación binaria que se desplegará en cada dispositivo físico. Asegúrese de que sus dispositivos móviles estén en la misma red que el servidor de Worklight al utilizar, por ejemplo, un acceso WIFI común.

Comencemos con la aplicación para Android. Dado que el kit de desarrollo de Android se basa en Java, el proyecto de Android nativo ya se ha desplegado en Eclipse (el SDK de Android ya debe estar instalado) en un proyecto con el mismo nombre que su proyecto o aplicación, más el sufijo Android, como “SalesMyCRMAndroid” en nuestro caso.

Conecte su dispositivo físico a través de un cable USB en su máquina. Asegúrese de haber instalado el controlador de su dispositivo móvil, y asegúrese de que el dispositivo Android tenga activado el “Modo de depuración USB”. Después, seleccione el proyecto de Android creado en Eclipse al hacer clic derecho y seleccionar Run as > Android Application. Se desplegará de forma automática el archivo apk binario en su dispositivo móvil y usted estará listo para probar la aplicación, como se muestra en la Figura 44. Asegúrese de que el botón para retroceder le permita navegar entre las vistas, dado que ha implementado esta parte para el entorno de Android.

Figura 44. Aplicación final en Android
Final application on Android

Para el entorno de iPhone, es obligatorio compilar la aplicación mediante una herramienta de desarrollo denominada Xcode, que solo está disponible en MacOS. Por lo tanto, cuando ejecute su Eclipse en un entorno MacOS, puede hacer clic derecho en iPhone y seleccionar Run as > Xcode project, como se muestra en la Figura 45.

Figura 45. Generación de la aplicación para iOS
Generating the application for iOS

Una vez generada, Xcode Studio se inicia automáticamente y es posible probar de forma directa la aplicación mediante el simulador incorporado. También, es posible actualizar los valores del proyecto con el Perfil de suministro de ® Apple para generar y firmar el archivo binario (archivo ipa) que luego se podrá desplegar en un dispositivo real. La Figura 46 muestra cómo se ve la aplicación en el simulador de iPhone.

Figura 46. Prueba de la aplicación con el simulador de iPhone
Testing the application with iPhone simulator

La Figura 47 muestra cómo se ve la aplicación cuando se despliega en un iPhone. Los botones para retroceder de los encabezados son visibles para garantizar la navegación correcta en el iPhone.

Figura 47. Aplicación final en el iPhone
Final application on the iPhone

Finalmente, es posible abrir la consola de gestión Web de Cast Iron para monitorear las llamadas de Worklight, como se muestra en la Figura 48.

Figura 48. Consola de gestión Web de Cast Iron
Cast Iron Web Management Console

Además, es posible profundizar en cada ejecución de orquestación. Cuando el nivel de registro está activado para la depuración, puede ver una vista detallada de cada actividad dentro de esta orquestación, como se muestra en la Figura 49.

Figura 49. Vista detallada de la orquestación getContacts
Detailed view of the getContacts orchestration

Posibles extensiones de la aplicación

Una versión más avanzada de esta aplicación agrega las siguientes capacidades:

  • Notificaciones: Worklight brinda una API de notificación unificada que se puede utilizar del lado del servidor para enviar notificaciones a las aplicaciones móviles. Cast Iron se puede suscribir a un evento en SalesForce.com, como un cambio en una cuenta o un contacto, y llamar a un adaptador HTTP en el servidor de Worklight que a su vez crea un mensaje de notificación y lo envía al usuario final a cargo de la cuenta. La aplicación móvil está optimizada para poder manejar este mensaje.
  • Seguridad: Worklight brinda una manera sencilla (pero eficiente) de controlar la autenticación y el acceso a los servicios de backend. Al implementar una autenticación en el inicio o a pedido, la identidad del usuario autenticado se utiliza en el parámetro de la llamada a Cast Iron. Cast Iron tiene en cuenta esta información en su consulta para filtrar las cuentas vinculadas al usuario actual.

Conclusión

Como parte de IBM Mobile Foundation, IBM Worklight y WebSphere Cast Iron le permiten generar y ejecutar rápidamente aplicaciones móviles conectadas a sus sistemas de backend. Para agilizar el desarrollo, Cast Iron se centra en la simplicidad, donde no se requiere ningún código, solo la configuración de los flujos. Por otro lado, Worklight se centra en los estándares (HTML5, bibliotecas gráficas de código abierto) de manera que pueda volver a utilizar las capacidades existentes configuradas para las aplicaciones móviles. Worklight ofrece una clara separación entre el código del lado del servidor y el código del lado del cliente. El servidor de Worklight actúa como un middleware móvil y garantiza la gestión de aplicación móvil de sus aplicaciones.


Descargas

DescripciónNombretamaño
Code sampleWL-CI-download.zip24368KB
Code sampleErrorLog.xsd1KB

Recursos

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=Desarrollo móvil, WebSphere
ArticleID=964414
ArticleTitle=Integración de una aplicación móvil para acceder a los datos de SalesForce.com con IBM Worklight e IBM WebSphere Cast Iron
publish-date=12122012