Compactar aplicativos da Web como aplicativos móveis nativos com o PhoneGap Build

Pesquisar

Última atualização em 07/05/2021 | Também é aplicável a Adobe Dreamweaver CS6

O PhoneGap Build é um serviço baseado em nuvem que permite compactar os seus aplicativos da Web como aplicativos móveis nativos. O PhoneGap Build oferece suporte à compactação de aplicativos nativos para os seguintes sistemas operacionais de dispositivos móveis:

iOS
Android
BlackBerry
webOS
Symbian
Windows Phone 8

Para obter mais informações sobre o serviço do PhoneGap Build, consulte o site do PhoneGap.

Para obter ajuda para uso do serviço do PhoneGap Build, consulte a documentação do PhoneGap Build.

A integração direta do Dreamweaver com o PhoneGap Build para empacotar aplicativos não é suportada na última atualização da versão de 2014 do Dreamweaver CC (outubro de 2014) e posterior. Contudo, você pode acessar diretamente o serviço PhoneGap Build online e utilizar as atualizações de recursos mais recentes para empacotar seus aplicativos online.

Usar o serviço PhoneGap Build no Dreamweaver CC (outubro de 2014 ou posterior)

Faça logon no serviço PhoneGap Build. Você pode continuar a usar sua Adobe ID existente.
Após fazer logon, você será redirecionado à seção “Aplicativos” do site. Faça upload de seus ativos da Web como um arquivo ZIP contendo arquivos HTML, CSS e JavaScript, ou aponte para o repositório Git ou SVN.

A seção de aplicativos do serviço PhoneGap Build
O serviço PhoneGap Build compila e empacota o conteúdo em minutos e você receberá os links de download para todas as plataformas móveis.

Para obter ajuda com o serviço PhoneGap Build, visite a página de suporte ou o fórum da comunidade.

Usar o serviço PhoneGap Build no Dreamweaver CC (junho de 2014)

Criação de uma conta de serviço do PhoneGap Build

Não é possível usar o PhoneGap Build e o Dreamweaver sem uma conta de serviço do PhoneGap Build. As contas são gratuitas e fáceis de configurar. Para criar uma conta, visite o site do PhoneGap Build.

Será necessário validar a conta por meio de um email de confirmação para que a conta se torne ativa.

Configuração do ambiente de desenvolvimento

Dependendo do tipo de aplicativo que você deseja compactar e dos dispositivos que deseja testar, há várias tarefas de configuração que precisam ser concluídas antes de compactar seu aplicativo. É possível configurar algumas, todas ou nenhuma das seguintes opções:

Android SDK Para testar aplicativos Android no seu computador local por meio de um emulador Android, você precisará baixar e instalar o Android SDK. Para obter instruções, consulte a documentação do Android.

Após ter instalado o Android SDK, você precisará iniciar o Android SDK e os Gerenciadores AVD e selecionar as ferramentas do Android com as quais deseja trabalhar localmente no computador. O Dreamweaver usa as informações que você selecionou durante essa configuração inicial para preencher as configurações de emulador Android no painel de Serviço do PhoneGap Build. Para obter mais informações sobre a especificação dessas configurações, consulte a documentação do Android.

IMPORTANTE: para usar um emulador Android para testar o seu aplicativo localmente, antes de realizar o teste, você deve configurar um emulador para funcionar da maneira desejada independentemente do Dreamweaver.

webOS SDK/PDK Para testar aplicativos webOS no seu computador local por meio de emulador webOS, você precisará baixar e instalar o webOS SDK/PDK.

Leitores de código QR (Quick Response) Para transferir facilmente o aplicativo compactado para o dispositivo, você precisará de um leitor de código QR. (Quando compactar um aplicativo por meio do Dreamweaver, você receberá um código QR do aplicativo, que aparecerá no painel do PhoneGap Build, após o aplicativo ter sido compactado.) Um número de leitores de código diferentes estão disponíveis gratuitamente em vários mercados. Para obter mais informações, busque no Google “leitor de código QR”.

Instalação do add-on PhoneGap Build

Antes de usar o serviço PhoneGap Build do Dreamweaver, você deve instalar o add-on PhoneGap Build.

Para instalar o add-on, vá para Janela > Buscar add-ons. A página Adobe Creative Cloud Add-Ons é exibida. Procure o add-on do PhoneGap Build e siga as instruções na tela para instalá-lo.

Importante: antes de instalar os add-ons, certifique-se de que você tenha ativado a sincronização de arquivos para sua conta da Adobe Creative Cloud. Consulte Ativar a sincronização de arquivos na Adobe Creative Cloud para obter mais detalhes.

Compactação de aplicativos móveis com o PhoneGap Build

Verifique se você criou um site do Dreamweaver com uma página index.html (normalmente a página de início do seu aplicativo).

Observação: o PhoneGap Build oferece suporte apenas aos arquivos HTML, CSS e JavaScript. O seu site não pode conter páginas de servidor como PHP, CFM ou outros tipos de páginas baseadas no servidor.
Selecione Site > Serviço do PhoneGap Build > Serviço do PhoneGap Build.
Forneça suas informações de logon e faça logon no PhoneGap Build. Se não tiver criado uma conta do PhoneGap Build, consulte Criação de uma conta de serviço do PhoneGap Build.
Deixe selecionado Criar como um novo projeto e clique em Continuar.
Insira a chave e a senha para os sistemas operacionais selecionados, conforme necessário. As informações da chave de assinatura são necessárias apenas para Android, iOS e Blackberry.

Se você não conseguir criar mais de um aplicativo, talvez não tenha assinado o serviço PhoneGap.

Observação:

se as informações inseridas estiverem incorretas, ocorrerá uma falha com uma mensagem de erro indicando que você digitou uma chave ou senha incorreta. Se você não digitar nenhuma informação, ocorrerá uma falha no iOS com o erro Assinatura de chave exigida. Aplicativos Android e Blackberry são criados usando certificados de depuração.

Insira a chave e a senha necessárias para o sistema operacional selecionado.
Observe que o Dreamweaver adiciona um arquivo ProjectSettings à raiz do seu site. (Talvez seja necessário atualizar o painel Arquivos para vê-lo.) Esse arquivo é muito importante, pois o serviço do PhoneGap Build o usa para controlar o aplicativo.

O Dreamweaver também adiciona um arquivo config.xml à raiz do seu site. Clique duas vezes neste arquivo XML simples para abri-lo.

arquivo config.xml

Personalize a identidade do aplicativo editando o conteúdo desse arquivo. Se não fizer isso, todos os seus aplicativos terão o mesmo nome de aplicativo padrão.

Para obter mais informações sobre como trabalhar com o arquivo config.xml, consulte a documentação do PhoneGap Build.
Salve o arquivo config.xml editado, feche-o e clique no painel Reconstruir do Serviço do PhoneGap. Quando o PhoneGap terminar de compactar o aplicativo para cada plataforma, você verá mensagens indicando que a versão está concluída.

O painel Serviço do PhoneGap indica quando a compilação está concluída.

Observação:

para compactar uma versão para Windows 8, você precisa fazer logon diretamente em https://build.phonegap.com, fazer upload dos arquivos necessários e compilar a versão.
Por padrão, o Dreamweaver usa o PhoneGap Build versão 2.9.0. Se quiser usar a versão mais recente do PhoneGap Build, siga estas etapas:
1. Remova a seguinte linha do arquivo config.xml na pasta raiz do site:
2. Salve o arquivo.
3. Reconstrua o projeto.
Após suas versões estarem completas, você terá várias opções. Você poderá baixar os arquivos do aplicativo no computador, rastrear o código QR de uma versão para transferir o aplicativo para o seu dispositivo ou emular o aplicativo usando um emulador (somente Android e webOS).

Download de arquivos do aplicativo

Para baixar um aplicativo do PhoneGap Build, clique no botão Baixar aplicativo (seta virada para baixo) no painel Serviço do PhoneGap Build.

Observação: o download não está disponível para aplicativos iOS sem uma chave de assinatura. Para obter mais informações, consulte a documentação do PhoneGap Build.

Os nomes de arquivos do aplicativo baixados seguem este formato:

iOS - app.ipa
Android - app.apk
BlackBerry - app.jad
webOS - app.ipk
Symbian-app.wgz

Rastreamento de código QR para transferir um aplicativo para um dispositivo

É necessário ter um leitor de código QR instalado no dispositivo antes de continuar. Para obter mais informações, consulte Configuração do ambiente de desenvolvimento.

Observação: os códigos QR não estão disponíveis para aplicativos iOS sem uma chave de assinatura. Para obter mais informações, consulte a documentação do PhoneGap Build.

No painel Serviço do PhoneGap Build, clique no código QR do aplicativo que você deseja baixar.
Inicie o leitor de código QR no seu dispositivo móvel e rastreie o código QR.
Após baixar o aplicativo, você poderá iniciá-lo diretamente no dispositivo.
Volte à lista de versão clicando no botão Voltar ao painel de versão.

Observação: os códigos QR não estão disponíveis para aplicativos iOS sem uma chave de assinatura.

Emulação de um aplicativo (somente Android e webOS)

IMPORTANTE: é necessário ter o Android SDK e/ou o webOS SDK/PDK instalado(s) antes de continuar. Também é necessário ter especificado as informações do SDK/AVD que devem estar disponíveis localmente nos aplicativos SDK. Para obter mais informações, consulte Configuração do ambiente de desenvolvimento.

Abra o painel Configurações do PhoneGap Build selecionando Site > Serviço do PhoneGap Build > Configurações do PhoneGap Build.
Especifique os locais dos Android e/ou webOS SDKs e clique em Salvar. Esses locais informam ao Dreamweaver onde encontrar as informações necessárias para enviar o aplicativo ao(s) emulador(es).
No painel Serviço do PhoneGap Build (Site > Serviço do PhoneGap Build > Serviço do PhoneGap Build), clique no botão Emular (voltado para os lados) do aplicativo que você deseja emular.
Se anteriormente você especificou suas informações do SDK/AVD dos aplicativos SDK, uma janela será exibida e estará pré-preenchida com as informações.
Escolha o SDK/AVD que você deseja usar para a emulação e clique em Inicializar.

Observação: os emuladores podem ser lentos. Pode levar algum tempo para o emulador inicializar e carregar o aplicativo.

Criação e implementação de um aplicativo Android com o PhoneGap e o Dreamweaver

Kevin Hoyt - divulgador sênior e desenvolvedor da Adobe

Criação e implementação de um aplicativo iOS com o PhoneGap