Introdução ao desenvolvimento de aplicativos híbridos

Objetivos de aprendizagem

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)? Comece o desafio em um Trailhead Playground de português (Brasil) e use as traduções fornecidas entre parênteses para navegar. Copie e cole somente os valores em inglês porque as validações dos desafios dependem de dados em inglês. Se você não passar no desafio em sua organização de português (Brasil), recomendamos que (1) mude o local para os Estados Unidos, (2) mude o idioma para inglês, seguindo as instruções aqui, e (3) clique novamente no botão “Validar o desafio”.

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

Antes de começar

Antes de concluir qualquer etapa deste módulo, certifique-se de concluir os desafios práticos em Como configurar suas ferramentas de desenvolvedor do Mobile SDK usando o mesmo Trailhead Playground. O trabalho que você faz aqui nos desafios práticos se baseia no trabalho concluído nesse emblema.

• Configurar suas ferramentas de desenvolvedor do Mobile SDK
  

Como compreender o conceito de desenvolvimento híbrido

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! Certifique-se de ter concluído o emblema de pré-requisito exigido listado na parte superior desta unidade. 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.

E no caso dos aplicativos totalmente em HTML5?

Os aplicativos HTML5 usam tecnologias web padrão, normalmente HTML5, JavaScript e CSS, para oferecer aplicativos em um navegador da web móvel. Essa abordagem “codifique uma vez, execute em qualquer lugar” de desenvolvimento móvel cria aplicativos móveis entre plataformas que funcionam em vários dispositivos. Embora os desenvolvedores possam criar aplicativos sofisticados apenas com HTML5 e JavaScript, restam alguns desafios. Por exemplo, o gerenciamento de sessão, o armazenamento offline seguro e o acesso a recursos nativos do dispositivo podem apresentar problemas.

Esta trilha não trata do desenvolvimento totalmente em HTML5.

Comparação de arquiteturas de desenvolvimento nativo e multiplataforma

A tabela a seguir mostra a comparação entre os vários cenários de desenvolvimento.

Criar um aplicativo conectado

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.

Depois de criar e salvar seu aplicativo conectado, observe os detalhes.

• Copie os valores de URL da chamada e de Chave do cliente. Use esses valores para configurar a autenticação do seu aplicativo.
  
• Os aplicativos do Mobile SDK não utilizam o segredo do cliente, de forma que você pode ignorar esse valor.
  

Como criar um aplicativo híbrido

Importante:

Se você ainda não tiver configurado as ferramentas necessárias para o Mobile SDK, conclua o módulo do Trailhead Como configurar suas ferramentas de desenvolvedor do Mobile SDK.

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

Obter suporte

Deparando-se com resultados inesperados? Uma vez que o modelo híbrido tem dependências em partes móveis que estão além do nosso controle, podem ocorrer eventos imprevistos. Seu melhor recurso para fazer perguntas é a Mobile SDK Trailblazer Community.

Executar o seu aplicativo híbrido

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 iOS

Para executar o aplicativo através do Xcode:

1. No Xcode, selecione Arquivo | Abrir.
   
2. Navegue até o diretório platforms/ios/ no diretório do seu novo aplicativo.
   
3. Clique duas vezes no arquivo <nome do aplicativo>.xcodeworkspace.
   
4. Clique no botão Executar no canto superior esquerdo ou pressione COMMAND-R.
   

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.

Recursos

• 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