Compreender um aplicativo híbrido de exemplo

Vamos analisar o aplicativo de exemplo ContactExplorer, incluído no Mobile SDK. O ContactExplorer é um aplicativo híbrido local que demonstra mais funcionalidade que o aplicativo modelo. Você pode fazer este exercício no Mac OS ou Windows, mas somente pode validar completamente o alvo de iOS em um Mac.

Para começar, clone o repositório compartilhado e crie um aplicativo com forcehybrid.

1. Em um prompt de comando ou janela do Terminal, use o comando cd para acessar o diretório onde você planeja clonar o repositório compartilhado.
2. Execute o comando a seguir.

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

3. Use o comando cd para acessar o diretório onde você planeja desenvolver seu projeto híbrido.
4. Execute forcehybrid create com os seguintes 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>

   Agora que você tem um projeto híbrido genérico, pode adicionar o código de exemplo contactexplorer a ele.
5. Execute os comandos a seguir e não deixe de substituir o espaço reservado no comando cp pelo caminho 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

   Usuários do Windows: No Windows, substitua o comando copy pelo comando cp Unix. Cuidado, pois arquivos nas subpastas js e css de /samples/contactexplorer/ são aliases para arquivos de origem em outros caminhos. Copie os próprios arquivos de origem em vez dos aliases. Veja aqui um exemplo:

   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

   
   

O script forcedroid e os comandos decorrentes criam um projeto do iOS e um projeto do Android, ambos incluindo o aplicativo de exemplo ContactExplorer. Agora estamos prontos para executar o aplicativo em uma dessas plataformas. Caso utilize um dispositivo iOS, você deve configurar um perfil para o simulador, conforme descrito no Guia do usuário do Xcode em developer.apple.com/library. Da mesma forma, dispositivos Android devem ser configurados conforme descrito em developer.android.com/tools.

Quando executar o aplicativo, você verá a tela de login do Salesforce após uma tela introdutória inicial.

Efetue login com o seu nome de usuário e senha das organizações Developer Edition. Para permitir que o aplicativo acesse os seus dados do Salesforce, toque em Permitir. Agora que está no aplicativo, você pode recuperar listas de contatos e contas. Toque em Buscar contatos do SFDC para recuperar nomes de contatos do Salesforce ou em Buscar contas do SFDC para recuperar nomes de contas da sua organização de DE.

Cada vez que é pressionado, o aplicativo anexa linhas a um lista infinita. Role para baixo para ver toda a lista.

Vamos dar uma olhada mais atenta em como funciona o aplicativo.

1. No projeto contactsApp, abra o arquivo www/index.html.
2. Localize “function onDeviceReady()”.

Para iniciar uma sessão de usuário com force.js, chame force.login(). Depois que o usuário faz login em um aplicativo em execução no contêiner, o plug-in da rede atualiza os tokens conforme a necessidade quando o aplicativo tenta acessar os recursos do Salesforce. O código a seguir, adaptado do exemplo ContactExplorer, demonstra uma implantação force.login() típica.

Quando o dispositivo informar estar pronto, chame o método force.login() para publicar a tela de login.

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

Depois de concluir o processo de login, o aplicativo de exemplo exibirá index.html (localizado na pasta www). Quando a página é carregada e a estrutura móvel está pronta, a função jQuery(document).ready() chama regLinkClickHandlers(). Essa função (em inline.js) configura manipuladores de clique para várias funções no aplicativo de exemplo. Por exemplo, o manipulador #link_fetch_sfdc_contacts executa uma consulta usando o 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); 
});

O objeto force é configurado durante a interação inicial com o OAuth 2.0 e dá acesso à API REST no contexto do usuário autenticado. Aqui, recuperamos os nomes de todos os contatos na organização DE. onSuccessSfdcContacts() renderiza os contatos como uma lista na 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); 
});

De forma semelhante ao manipulador #link_fetch_sfdc_contacts, o manipulador #link_fetch_sfdc_accounts recupera registros de conta pela API REST. Os manipuladores #link_reset e #link_logout limpam as listas exibidas e desconectam o usuário, respectivamente.

Observe que o aplicativo também pode recuperar contatos do dispositivo, o que um aplicativo da web equivalente não seria capaz de fazer. O manipulador de clique a seguir recupera uma consulta de contato de dispositivo chamando o plug-in de contatos do 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);
});

Esse manipulador usa os objetos ContactFindOptions e navigator.contacts de cordova-plugin-contacts para refinar e executar uma pesquisa. Ele chama navigator.contacts.find() para recuperar uma lista de contatos com números de telefone do dispositivo. A função onSuccessDevice() (não exibida aqui) renderiza a lista de contatos na página index.html.

A biblioteca force.js

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

O carregamento da biblioteca force.js cria um objeto force global. O objeto é o ponto de entrada do recurso da biblioteca. Como mencionado anteriormente, a função salesforceSessionRefreshed usa a instância force para fazer chamadas de rede, como force.query().

Essa visão geral foi breve, mas substancial. Outros widgets de UI no aplicativo ContactExplorer se comportam de forma semelhante àqueles que discutimos. É uma boa ideia estudar em seu tempo livre o código em index.html e inline.js para refinar a sua compreensão. Enquanto isso, estamos seguindo para descobertas mais profundas sobre interações híbridas com o Salesforce. Animado? Claro que está!