Acesso a dados do Salesforce em aplicativos híbridos

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

Utilizar a biblioteca force.js para acessar a API REST do Salesforce a partir de um aplicativo híbrido.
Utilizar controladores do Apex para acessar dados do Salesforce a partir de um aplicativo híbrido remoto.

Como acessar a API do Salesforce com Force.js

Em nossa inspeção do aplicativo ContactExplorer, você viu a biblioteca force.js em ação. Essa biblioteca fornece um conjunto de funções avançadas para efetuar operações em registros do Salesforce. Além de criar, excluir, atualizar e atualizar/inserir, a biblioteca oferece suporte a consultas SOQL, pesquisas SOSL, descrições de metadados e gerenciamento de arquivos.

Você pode baixar force.js e outras bibliotecas de JavaScript do Mobile SDK dos repositórios GitHub SalesforceMobileSDK-Shared/libs e SalesforceMobileSDK-Shared/dependencies.

Embora este caminho se concentre em aplicativos híbridos locais – isso é, aplicativos híbridos que são autocontidos no dispositivo móvel – você também pode criar aplicativos híbridos remotos. Um aplicativo híbrido remoto carrega páginas do Visualforce do servidor do Salesforce, reformata essas páginas e as exibe em dispositivos móveis. O código-fonte pode permanecer no servidor ou ser dividido entre o servidor e o dispositivo.

Durante a criação de um aplicativo híbrido remoto, o script forcehybrid pede que você especifique uma Página inicial. Digite o caminho relativo para a sua página de destino do Visualforce, começando com /apex/. Por exemplo, se o endereço da sua página de destino for https://<MyDomainName>--<PackageName>.vf.force.com/apex/BasicVFPage, digite /apex/BasicVFPage

Introdução ao force.js e ao Mobile SDK

Para começar, carregue os seus recursos essenciais do aplicativo na nuvem do Salesforce.

Crie um arquivo de arquivamento, como um arquivo ZIP, contendo cordova.js, force.js e quaisquer outros recursos estáticos exigidos pelo seu projeto.
No Salesforce, carregue o arquivo de arquivamento em Seu nome | Configuração do aplicativo | Desenvolver | Recursos estáticos.

Exemplo de uma página simples do Visualforce

O código a seguir mostra uma página simples do Visualforce definida quase inteiramente com um código JavaScript e um código do Apex. A lógica segue o mesmo esquema que o código JavaScript do ContactsApp. Ele carrega force.js, inicializa a sessão e transmite uma consulta SOQL ao método force.query() assíncrono. Se a consulta for bem-sucedida, o aplicativo exibe o primeiro campo Name devolvido em uma marca <span> de HTML.

<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>

Como usar controladores do Apex em um aplicativo híbrido remoto

Com aplicativos híbridos remotos, você normalmente acessa dados do Salesforce através de uma página do Visualforce e do seu controlador do Apex associado. Caso a sua página do Visualforce contenha um código JavaScript, esse código pode interagir e compartilhar dados com o controlador do Apex do lado do servidor.

O Apex oferece suporte aos dois seguintes meios de invocação de métodos de controlador do Apex a partir de JavaScript:

Ambas as técnicas usam uma solicitação AJAX para invocar métodos de controlador do Apex diretamente a partir de JavaScript. O código JavaScript tem de estar hospedado em uma página do Visualforce.

Em comparação com apex:actionFunction, o JavaScript Remoting oferece várias vantagens.

Oferece maior flexibilidade e melhor desempenho que apex:actionFunction.
Oferece suporte a parâmetros e tipos de retorno no método de controlador do Apex com mapeamento automático entre os tipos Apex e JavaScript.
Utiliza um modelo de processamento assíncrono com retorno de chamadas.
Ao contrário de apex:actionFunction, a solicitação AJAX não inclui o estado de visualização para a página do Visualforce. Isso resulta em um tempo de ida e volta mais rápido.

Porém, comparado com apex:actionFunction, o JavaScript Remoting requer que você escreva mais código.

No exemplo a seguir, um código JavaScript é inserido em uma marca <script> na página do Visualforce. Esse código chama o método invokeAction() no objeto do gerenciador remoto do Visualforce. Ele transmite à invokeAction() os metadados necessários para chamar uma função denominada getItemId() no objeto do controlador do Apex objName. Uma vez que invokeAction() é executada de forma assíncrona, o código também define uma função de retorno de chamada para processar o valor retornado de getItemId(). No controlador do Apex, a anotação @RemoteAction expõe a função getItemId() ao 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) { ... }

No método getItemId(), por exemplo, você pode chamar uma API do Salesforce e capturar o valor de retorno em JavaScript.

Procurando ajuda?

Descubra mais

Acesso a dados do Salesforce em aplicativos híbridos

Objetivos de aprendizagem

Como acessar a API do Salesforce com Force.js

Introdução ao force.js e ao Mobile SDK

Exemplo de uma página simples do Visualforce

Como usar controladores do Apex em um aplicativo híbrido remoto

Recursos