Introdução ao desenvolvimento de aplicativos híbridos

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

• Descrever dois tipos de aplicativos híbridos
• Instalar o Mobile SDK para desenvolvimento de híbridos.
• Criar um aplicativo híbrido Mobile SDK com o Cordova.
• Executar o seu aplicativo híbrido.

Nota

Deseja aprender em português (Brasil)? Nesse emblema, as validações dos desafios práticos do Trailhead funcionam em inglês. As traduções são fornecidas entre parênteses como referência No Trailhead Playground, (1) mude a localidade para Estados Unidos, (2) mude o idioma para inglês e (3) copie e cole apenas os valores em inglês. Siga as instruções aqui.

Consulte o emblema Trailhead no seu idioma para saber mais sobre como aproveitar a experiência de Trailhead em outros idiomas.

O Mobile SDK oferece desenvolvimento de aplicativos híbridos como uma alternativa a aplicativos nativos entre plataformas. Aplicativos híbridos combinam a facilidade do desenvolvimento de aplicativos da Web HTML5 com o poder nativo do iOS e do Android. Esses aplicativos são executados em um contêiner de dispositivo móvel que analisa código de aplicativo da web e o executa como código nativo. Este contêiner, que é criado na tecnologia Apache Cordova, permite que desenvolvedores escrevam o seu código em HTML5, JavaScript e CSS. Internamente, os aplicativos híbridos são aplicativos Cordova que usam o plugin Salesforce Mobile SDK.

Os aplicativos híbridos enquadram-se em duas categorias:

• Híbridos locais – Aplicativos híbridos locais são aplicativos da Web executados localmente no contêiner de dispositivo móvel. Esses aplicativos são desenvolvidos com a biblioteca force.js e armazenam os seus arquivos HTML, JavaScript e CSS no dispositivo do usuário.
• Híbridos remotos – Aplicativos híbridos remotos fornecem páginas do Visualforce através do contêiner de dispositivo móvel. Esses aplicativos armazenam alguns ou todos os seus arquivos HTML, JavaScript e CSS no servidor do Salesforce.

Você usa o utilitário forcehybrid npm para criar um projeto híbrido. Você pode então usar a linha de comando do Cordova para adicionar mais plugins e um destino Android ou iOS. Você pode até mesmo reutilizar um aplicativo da Web existente copiando simplesmente os arquivos de origem do aplicativo para o novo projeto.

Projetos híbridos também incluem o contêiner Mobile SDK para cada plataforma de destino. O contêiner é um projeto nativo que requer pouca ou nenhuma configuração. Ele fornece a ponte de tempo de execução entre o aplicativo da web ou do Visualforce e o sistema operacional do dispositivo.

Vamos começar! Para concluir o desafio no final desta unidade, você precisará concluir o projeto "Instalar as Ferramentas de desenvolvedor do Mobile SDK". Se não tiver concluído, faça um rápido desvio para esse projeto a fim de garantir que seu ambiente de desenvolvimento estará configurado corretamente. Assim que estiver pronto para avançar, crie e explore um aplicativo local híbrido e básico. Em seguida, explore a forma como um dos aplicativos de exemplo do Mobile SDK usa a biblioteca force.js e aprenda sobre aplicativos remotos híbridos. Você também aprende sobre depuração de aplicativos híbridos usando as ferramentas de depuração do Safari e do Chrome.

Importante

O módulo Noções básicas sobre o Salesforce Mobile SDK, que inclui instruções para aplicativos conectados, é um pré-requisito para este módulo. Você não pode concluir o desafio desta unidade sem criar um aplicativo conectado.

Para se conectar ao serviço Salesforce, todos os aplicativos móveis precisam de um aplicativo conectado ao Salesforce. Um aplicativo conectado permite que seu aplicativo se comunique com o Salesforce e acesse APIs do Salesforce de maneira segura.

1. Em uma janela do Terminal ou no prompt de comando do Windows, digite forcehybrid create.
2. Insira os valores a seguir quando solicitado:
   • Plataforma: Uma das seguintes: ios, android ou ios,android

   • Tipo de aplicativo: hybrid_local
   • Nome do aplicativo: MyTrailHybridLocal
   • Nome do pacote: com.mytrail.hybrid
   • Nome da organização: MyTrail, Inc.
   • Diretório de saída: TrailHybridApps
   • 

     O comando forcehybrid create falha em alguns dispositivos Windows. Para tratar desse erro, execute o cordova plugin add salesforce-mobilesdk-cordova-plugin@v11.1.0 --force. Esse problema será corrigido com o lançamento do Mobile SDK 12.0.

3. Parabéns – você criou um aplicativo híbrido local! O script imprime o nome do diretório do projeto na tela quando conclui a criação do projeto. Por exemplo: “Seu projeto de aplicativo está pronto em <nome do diretório do projeto>.” Após receber uma mensagem de linha de comando informando que o seu projeto está pronto, atualize o projeto novo para refletir as configurações do seu aplicativo conectado.
4. No diretório do projeto, abra o arquivo www/bootconfig.json em um editor de texto compatível com UTF-8 e atualize as seguintes propriedades:
   • remoteAccessConsumerKey — Esse valor é um espaço reservado padrão. Em um aplicativo real, substitua esse valor pela chave do cliente do seu aplicativo conectado.
   • oauthRedirectURI — Esse valor é um espaço reservado padrão. Em um aplicativo real, substitua esse valor pela URL de retorno de chamada do seu aplicativo conectado.
5. No prompt de comando, mude para a pasta raiz do aplicativo e execute cordova prepare.

Importante

Depois de fazer qualquer alteração na pasta www/ de nível de raiz, acesse o prompt de comando e execute cordova prepare na pasta raiz do aplicativo. Esse comando copia suas alterações para as pastas específicas da plataforma. Por exemplo:

cd ~/<your local path>/TrailHybridApps
cordova prepare

O utilitário forcehybrid fez a sua parte. Caso tenha inserido “android” para a plataforma, agora você tem um projeto do Cordova com uma subpasta platforms/android/ que pode ser aberta no Android Studio. Se você configurar “Platform” como “ios”, você tem uma subpasta platforms/ios/ que contém um espaço de trabalho Xcode. Se você configurar “Platform” como “ios,android”, você tem um espaço de trabalho iOS e um projeto Android.

Não crie o projeto ainda! Ainda não está tudo concluído.

1. Retorne à janela de terminal ou de prompt de comando.
2. cd para o diretório do projeto do seu aplicativo.
3. (Opcional – somente para Mac) Para adicionar uma segunda plataforma “after the fact”:
   • Para adicionar um suporte iOS, digite:

     cordova platform add ios@5.1.1

   • Para adicionar um suporte Android, digite:

     cordova platform add android@8.1.0

Sobre os plugins do Cordova

Para aprimorar a funcionalidade básica em aplicativos híbridos, os desenvolvedores incluem, frequentemente, plugins do Cordova de terceiros. Em seus próprios aplicativos, você pode incluir plugins externos por meio da chamada de cordova plugin add plug-in_name, seguido por cordova prepare.

Para adicionar outros plugins a um aplicativo forcehybrid que inclua um projeto Android, remova e readicione o plugin Salesforce em seguida. Esta etapa não se aplica a aplicativos forcehybrid exclusivos do iOS. Veja aqui um exemplo:

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

Importante

Nunca chame cordova plugin add para outros plugins fornecidos pelo Mobile SDK. Estes plugins são automaticamente incluídos nos projetos forcehybrid.

Agora que o seu aplicativo está completamente configurado, vamos executá-lo no Xcode (para aplicativos iOS) ou no Android Studio (para aplicativos Android).

Executar o aplicativo no Android

Para executar o aplicativo no Android Studio:

1. Na tela de boas-vindas, selecione Importar projeto (Eclipse ADT, Gradle, etc.). Ou, se o Android Studio já estiver em execução, selecione Arquivo | Novo | Importar projeto.
2. Selecione <seu_diretório_de_projeto>/platforms/android e clique em OK. Caso seja pedido que use o encapsulamento Gradle, aceite o pedido.
3. Após a criação terminar, selecione o destino android e clique em Executar ‘android’ no menu ou na barra de ferramentas.
4. Selecione um dispositivo ou emulador Android conectado.

Após efetuar login no Salesforce, o aplicativo exibe uma lista de usuários da sua organização.

Importante

Se o Android Studio se oferecer para atualizar a versão do wrapper Gradle, aceite. Após a conclusão do processo, o Android Studio reimporta automaticamente o seu projeto.

• Documentação do Cordova 3.5
• Introdução rápida aos aplicativos híbridos
• Desenvolvimento em HTML5 e híbrido
• https://github.com/forcedotcom/SalesforceMobileSDK-Shared