Acceder a datos de Salesforce en aplicaciones híbridas

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

Utilizar la biblioteca force.js para acceder a la API de REST de Salesforce desde una aplicación híbrida
Usar controladores Apex para acceder a datos de Salesforce desde una aplicación híbrida remota.

Acceso a la API de Salesforce con Force.js

En nuestra encuesta de la aplicación ContactExplorer, vio cómo funciona la biblioteca force.js. Esta biblioteca proporciona un amplio conjunto de funciones para realizar operaciones en registros de Salesforce. Además de las operaciones de creación, eliminación, actualización e inserción y actualización, admite consultas SOQL, búsquedas SOSL, definiciones de metadatos y operaciones de gestión de archivos.

Puede descargar force.js y otras bibliotecas de JavaScript de Mobile SDK desde los repositorios de GitHub SalesforceMobileSDK-Shared/libs y SalesforceMobileSDK-Shared/dependencies.

Aunque esta ruta se centra en las aplicaciones híbridas locales (es decir, las aplicaciones híbridas almacenadas de forma independiente en el dispositivo móvil), también puede crear aplicaciones híbridas remotas. Una aplicación híbrida remota carga páginas de Visualforce del servidor de Salesforce, cambia su formato y las muestra en los dispositivos móviles. El código fuente puede permanecer en el servidor o se puede dividir entre el servidor y el dispositivo.

Al crear una aplicación híbrida remota, la secuencia de comandos de forcehybrid le pide que especifique una Página de inicio. Ingrese la ruta relativa a su página de inicio de Visualforce, la cual empieza por /apex/. Por ejemplo, si la dirección de su página de destino es https://<MyDomainName>--<PackageName>.vf.force.com/apex/BasicVFPage, introduzca /apex/BasicVFPage.

Información general sobre force.js y Mobile SDK

Para empezar, cargue los recursos básicos para aplicaciones en la nube de Salesforce.

Cree un archivo comprimido, como un archivo ZIP, que contenga cordova.js, force.js y cualquier otro recurso estático que requiera su proyecto.
En Salesforce, cargue el archivo a través de Su nombre | Configuración de aplicaciones | Desarrollo | Recursos estáticos.

Ejemplo de una página de Visualforce sencilla

En el siguiente código se muestra una página de Visualforce sencilla definida casi en su totalidad mediante código Apex y JavaScript. La lógica sigue el mismo esquema que el código JavaScript de ContactsApp. Carga force.js, inicializa la sesión y luego pasa una consulta SOQL al método force.query() asíncrono. Si la consulta se realiza correctamente, la aplicación muestra el primer campo Name recuperado mediante el uso de la etiqueta HTML <span>.

<apex:page docType="html-5.0" sidebar="false" showHeader="false" 
    contentType="text/html" applyHtmlTag="false" applyBodyTag="false" 
    standardStylesheets="false" cache="true">
<html>
    <head>
      <meta charset="utf-8"></meta>
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"></meta>
      <apex:includeScript value="{!URLFOR($Resource.Easy, 'cordova/cordova.js')}"  />
      <apex:includeScript value="{!URLFOR($Resource.Easy, 'libs/force.js')}"  />
      <script>
(function() {
    /* Do login */
    force.login(
        function() {
            console.log("Auth succeeded"); 
            showUsersList();
        },
        function(error) {
            console.log("Auth failed: " + error); 
        }
    );
    /* This method will render a list of users from current salesforce org */
    var showUsersList = function() {
        fetchRecords(function(data) {
            var users = data.records;
            var listItemsHtml = '';
            for (var i=0; i < users.length; i++) {
                listItemsHtml += ('<li class="table-view-cell"><div class="media-body">' + 
                    users[i].Name + '</div></li>');
            }
            document.querySelector('#users').innerHTML = listItemsHtml;
        })
    }
    /* This method will fetch a list of user records from salesforce. 
    Just change the soql query to fetch another sobject. */
    var fetchRecords = function (successHandler) {
        var soql = 'SELECT Id, Name FROM User LIMIT 10';
        force.query(soql, successHandler, function(error) {
            alert('Failed to fetch users: ' + error);
        });
    };
})();
      </script>
    </head>
    <body>
      <header>
         <h1>Hello, Visualforce!</h1>
      </header>
        <!-- Placeholder to add users list -->
      <ul id="users">
      </ul>
      <p>Welcome to Mobile SDK.</p>
    </body>
</html>
</apex:page>

Uso de controladores Apex en una aplicación híbrida remota

En el caso de las aplicaciones híbridas remotas, normalmente accede a los datos de Salesforce mediante una página de Visualforce y el controlador Apex asociado. Si la página de Visualforce contiene código JavaScript, dicho código puede interactuar y compartir datos con el controlador Apex del servidor.

Apex es compatible con las dos opciones siguientes para invocar métodos de controlador Apex en JavaScript:

Ambas técnicas usan una solicitud AJAX para invocar métodos de controlador Apex directamente desde JavaScript. El código JavaScript debe estar alojado en una página de Visualforce.

En comparación con apex:actionFunction, la comunicación remota de JavaScript implica varias ventajas.

La flexibilidad y el desempeño son superiores a los de apex:actionFunction.
Es compatible con parámetros y tipos de valores devueltos en el método de controlador Apex mediante la asignación automática entre tipos de Apex y JavaScript.
Usa un modelo de procesamiento asíncrono con devoluciones de llamada.
A diferencia de apex:actionFunction, la solicitud AJAX no incluye el estado de vista para la página de Visualforce. Esto aumenta la rapidez del recorrido de ida y vuelta.

No obstante, en comparación con apex:actionFunction, la comunicación remota de JavaScript requiere la escritura de código adicional.

En el siguiente ejemplo se inserta código JavaScript con una etiqueta <script> en la página de Visualforce. Este código llama al método invokeAction() en el objeto de gestor de comunicación remota de Visualforce. Pasa a invokeAction() los metadatos necesarios para llamar la función getItemId() en el objeto de controlador Apex objName. Dado que invokeAction() se ejecuta de forma asíncrona, el código define además una función de devolución de llamada para procesar el valor devuelto desde getItemId(). En el controlador Apex, la anotación @RemoteAction expone la función getItemId() a código JavaScript externo.

//Visualforce page code
<script type="text/javascript">
     Visualforce.remoting.Manager.invokeAction(
        '{!$RemoteAction.MyController.getItemId}',
        objName,
        function(result, event){
            //process response here
        },
        {escape: true}
    );
<script>
//Apex Controller code
@RemoteAction
global static String getItemId(String objectName) { ... }

Por ejemplo, en el método getItemId() puede llamar a una API de Salesforce y capturar el valor devuelto en JavaScript.