Comprender una aplicación híbrida de ejemplo

Vamos a examinar la aplicación de ejemplo ContactExplorer, la cual se incluye en Mobile SDK. ContactExplorer es una aplicación híbrida local que demuestra una funcionalidad superior en comparación con la aplicación de plantilla. Puede hacer este ejercicio en Mac OS o Windows, pero solo puede validar por completo el destino de iOS en Mac.

Para comenzar, duplique el repositorio compartido, luego cree una aplicación con forcehybrid.

1. En el símbolo del sistema o ventana de Terminal, ingrese cd para llegar al directorio donde tiene intención de duplicar el repositorio compartido.
2. Ejecute el siguiente comando.

   git clone https://github.com/forcedotcom/SalesforceMobileSDK-Shared.git

3. Ingrese cd para llegar al directorio donde tiene intención de desarrollar su proyecto híbrido.
4. Ejecute forcehybrid create con los siguientes valores:

   Enter the target platform(s) separated by commas (ios, android): ios,android
   Enter your application type (hybrid_local or hybrid_remote, leave empty for hybrid_local): <press RETURN>
   Enter your application name: contactsApp
   Enter the package name for your app (com.mycompany.myapp): com.acmeapps.contactexplorer
   Enter your organization name (Acme, Inc.): AcmeApps.com
   Enter output directory for your app (leave empty for the current directory): <press RETURN>

   Ahora que tiene un proyecto híbrido genérico, puede agregar el código de ejemplo de contactexplorer a él.
5. Ejecute los siguientes comandos asegurándose de que sustituye el marcador de posición en el comando cp por su ruta local.

   cd contactsApp
   cordova plugin add cordova-plugin-contacts
   cordova plugin add cordova-plugin-statusbar
   cordova plugin remove com.salesforce
   cordova plugin add https://github.com/forcedotcom/SalesforceMobileSDK-CordovaPlugin --force
   cp -RL <local path to SalesforceMobileSDK-Shared>/samples/contactexplorer/* www/
   cordova prepare

   Usuarios de Windows: En Windows, sustituya el comando copy por el comando cp de Unix. No obstante, tenga en cuenta que los archivos en las subcarpetas js y css de /samples/contactexplorer/ son alias de los archivos de origen en otras rutas. Asegúrese de copiar los archivos de origen en sí en vez de sus alias. Aquí se incluye un ejemplo:

   cd contactsApp
     cordova plugin add cordova-plugin-contacts
     cordova plugin add cordova-plugin-statusbar
     cordova plugin remove com.salesforce
     cordova plugin add https://github.com/forcedotcom/SalesforceMobileSDK-CordovaPlugin --force
     rem Make a path variable
     set SHAREDPATH=C:\SalesforceMobileSDK-Shared\
     md www
     cd www
     md css
     copy %SHAREDPATH%\samples\common\jquery.mobile-1.3.1.min.css css
     md js
     copy %SHAREDPATH%\test\MockCordova.js js
     copy %SHAREDPATH%\libs\cordova.force.js js
     copy %SHAREDPATH%\libs\force.js js
     copy %SHAREDPATH%\dependencies\jquery\jquery.min.js js
     copy %SHAREDPATH%\samples\common\jquery.mobile-1.3.1.min.js js
     cordova prepare

   
   

La secuencia de comandos forcedroid y los comandos subsiguientes crean un proyecto de iOS y un proyecto de Android, y ambos contienen la aplicación de ejemplo ContactExplorer. Ahora ya estamos preparados para ejecutar la aplicación en una de estas plataformas. Si va a usar un dispositivo iOS, debe configurar un perfil para el simulador según se describe en la guía del usuario de Xcode (developer.apple.com/library). De forma similar, los dispositivos Android se deben configurar según se describe en developer.android.com/tools.

Al ejecutar la aplicación y después de mostrarse una pantalla de bienvenida, verá la pantalla de inicio de sesión de Salesforce.

Inicie sesión con el nombre de usuario y la contraseña de su organización de Developer Edition. Para permitir que la aplicación acceda a los datos de Salesforce, toque Allow (Permitir). Ahora que ya está en la aplicación, puede recuperar listas de contactos y cuentas. Toque Fetch SFDC contacts (Recuperar contactos de SFDC) para recuperar nombres de contactos de Salesforce o toque Fetch SFDC Accounts (Recuperar cuentas de SFDC) para recuperar nombres de cuentas de su organización de DE.

Con cada toque, la aplicación anexa filas a una lista infinita. Desplácese para ver la lista completa.

Vamos a examinar detenidamente el funcionamiento de la aplicación.

1. En el proyecto contactsApp, abra el archivo www/index.html.
2. Busque “function onDeviceReady()”.

Para iniciar una sesión de usuario con force.js, llama a force.login(). Después de que el usuario inicia sesión en una aplicación que se está ejecutando el contenedor, el complemento de red actualiza los tokens según sea necesario cuando la aplicación intenta acceder a recursos de Salesforce. El siguiente código, adaptado desde el ejemplo de ContactExplorer, demuestra una implementación de force.login() típica.

Cuando el dispositivo notifica que está listo, llama al método force.login() para publicar la pantalla de inicio de sesión.

/* Do login */
force.login(
    function() {
        console.log("Auth succeeded"); 
        // Call your app’s entry point
        // ...
    },
    function(error) {
        console.log("Auth failed: " + error); 
    }
);

Después de completar el proceso de inicio de sesión, la aplicación de ejemplo muestra index.html (ubicado en la carpeta www ). Cuando la página ha completado la carga y e marco móvil está listo, la función jQuery(document).ready() llama a regLinkClickHandlers(). Esta función (en inline.js) configura gestores de clic para las diferentes funciones en la aplicación de muestra. Por ejemplo, el gestor #link_fetch_sfdc_contacts ejecuta una consulta usando el objeto force.

$j('#link_fetch_sfdc_contacts').click(function() {
    logToConsole("link_fetch_sfdc_contacts clicked");
    force.query("SELECT Name FROM Contact LIMIT 25", 
        onSuccessSfdcContacts, onErrorSfdc); 
});

El objeto force se configura durante la interacción inicial de OAuth 2.0 y proporciona el acceso a la API de REST en el contexto del usuario autenticado. Aquí, recuperamos los nombres de todos los contactos en la organización de DE. onSuccessSfdcContacts() representa luego los contactos como una lista en la página index.html

$j('#link_fetch_sfdc_accounts').click(function() {
    logToConsole("link_fetch_sfdc_accounts clicked");
    force.query("SELECT Name FROM Account LIMIT 25", 
        onSuccessSfdcAccounts, onErrorSfdc); 
});

Al igual que el gestor #link_fetch_sfdc_contacts, el gestor #link_fetch_sfdc_accounts recupera registros de Cuenta a través de la API de REST. Los gestores #link_reset y #link_logout borran las listas mostradas y desconectan el usuario, respectivamente.

Tenga en cuenta que la aplicación también puede recuperar contactos del dispositivo, algo que una aplicación web equivalente no podría hacer. El siguiente gestor de clic recupera consultas de contactos de dispositivo llamando al complemento de contactos de Cordova.

$j('#link_fetch_device_contacts').click(function() {
    logToConsole("link_fetch_device_contacts clicked");
    var options      = new ContactFindOptions();
    // empty search string returns all contacts
    options.filter   = ""; 
    options.multiple = true;
    options.hasPhoneNumber = true;
    var fields       = 
        [navigator.contacts.fieldType.displayName, 
            navigator.contacts.fieldType.name];
    navigator.contacts.find(fields, onSuccessDevice, 
        onErrorDevice, options);
});

Este gestor utiliza los objetos ContactFindOptions y navigator.contacts de cordova-plugin-contacts para refinar y ejecutar una búsqueda. Llama a navigator.contacts.find() para recuperar una lista de contactos con números de teléfono desde el dispositivo. La función onSuccessDevice() (no se muestra aquí) representa la lista de contactos en la página index.html.

La biblioteca force.js

<!-- include force.js for REST transaction support -->
<script src="js/force.js"></script>

Cuando carga la biblioteca force.js, crea un objeto global force. Este objeto es el punto de entrada a la funcionalidad de la biblioteca. Como se mencionó anteriormente, la función salesforceSessionRefreshed utiliza la instancia force para realizar llamadas de red como force.query().

Esta descripción general ha sido breve, pero provechosa. Otros widgets de la interfaz de usuario de la aplicación ContactExplorer se comportan de un modo similar a los que hemos examinado. En sus ratos libres, es una buena idea analizar el código de index.html e inline.js para ampliar sus conocimientos. Mientras, vamos a analizar más detenidamente algunos aspectos de las interacciones híbridas con Salesforce. ¿Entusiasmado? ¡Sin duda alguna!