DocumentaçãoAEM 6.5Guia do Mobile

Desenvolvimento de aplicativos com a CLI do PhoneGap developing-apps-with-phonegap-cli

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Tópicos:

Criado para:

  • undefined
NOTE
A Adobe recomenda o uso do Editor SPA para projetos que exigem renderização no lado do cliente baseada em estrutura de aplicativo de página única (por exemplo, React). Saiba mais.

A qualquer momento, como desenvolvedor, você pode executar o aplicativo em um dispositivo ou em um emulador, desde que tenha configurado o ambiente de desenvolvimento.

Para executar os exemplos a seguir, você precisa de um sistema que execute o macOS X com Xcode ou um sistema Mac/Win/Linux com o SDK da Android™ instalado.

Bootstrap do ambiente de desenvolvimento bootstrap-your-development-environment

Configurar CLI do PhoneGap (https://docs.phonegap.com/en/4.0.0/guide_cli_index.md.html#The%20Command-Line%20Interface)

Para iOS: para desenvolver iPhones e iPads, é necessário o Xcode IDE da Apple.

  • Baixe gratuitamente aqui.
  • Guia da plataforma do PhoneGap iOS (https://docs.phonegap.com/en/4.0.0/guide_platforms_ios_index.md.html#iOS%20Platform%20Guide)

Para Android™: para desenvolver iPhones e iPads, você precisa do Android™ Studio IDE da Google.

  • Baixe gratuitamente aqui.
  • Guia da plataforma PhoneGap Android™ (https://docs.phonegap.com/en/4.0.0/guide_platforms_android_index.md.html#Android%20Platform%20Guide)

Baixar o Source download-the-source

Quando você inicializar seu ambiente de desenvolvimento com êxito, baixe a origem do Bloco de build do aplicativo AEM:

  • Clique na divisa suspensa do bloco PhoneGap Build.

chlimage_1-45

  • Clique em Baixar o Source.
  • Selecione a origem desejada no modal Baixar Source.

chlimage_1-46

NOTE
A fonte de desenvolvimento contém o estado mais recente do aplicativo, enquanto inclui alterações não preparadas. Use a fonte de Preparo para criar candidatos a lançamento para enviar a fornecedores da loja de aplicativos.
Se você nunca preparar seu aplicativo, selecionar Preparo acionará o fluxo de trabalho de preparo (dica: é exibido como um aplicativo preparado no aplicativo Visualizador corporativo do PhoneGap, disponível na AppStore e na Google PlayStore).
  • Clique em Baixar e salve o ZIP no computador.
  • Extraia o arquivo zip baixado para o espaço de trabalho.

Criar e carregar o aplicativo (da origem) build-and-load-the-app-from-source

A CLI do PhoneGap pode criar um projeto de plataforma, compilar o código-fonte e implantar o aplicativo em um único comando.

NOTE
É possível executar todas essas etapas separadamente. Consulte os documentos da CLI do PhoneGap (https://phonegap.com/blog/2014/11/13/phonegap-cli-3-6-3/).
  1. Certifique-se de ter instalado a CLI do PhoneGap; veja acima.
  2. Em uma janela de console (ou terminal), navegue até o diretório raiz da origem extraída.
  3. Digite o seguinte comando:
phonegap run android

// -- or -- //

phonegap run ios
NOTE
Se você tiver problemas neste momento, volte aos conceitos básicos para solucionar os problemas -
  1. Criar uma pasta (teste mkdir)
  2. Navegar para esta nova pasta (teste de cd)
  3. Executar phonegap create helloWorld
  4. Navegue até helloWorld (cd helloWorld)
  5. Execute o phonegap run android (ou substitua o Android™ pelo iOS como acima).
  6. O emulador abre ao executar o aplicativo PhoneGap recém-criado, informando "Pronto para dispositivo" se o JavaScript Bridge para nativo estiver operacional.
Essa solução de problemas verifica se o ambiente de desenvolvimento da CLI do PhoneGap está sendo executado corretamente.

Depurar o JavaScript com a depuração do Safari e do IOS debug-javascripts-with-safari-and-ios-debug

Você pode depurar o JavaScript do aplicativo usando as ferramentas de desenvolvedor do Safari, da mesma forma que faria com um aplicativo web.

Ativar as ferramentas de desenvolvedor do Safari enable-safari-developer-tools

Para ativar as ferramentas do desenvolvedor:

  • Abrir preferências do Safari

    • Clique no Safari na barra de menus
    • Clique em Preferências

  • Clique em Avançado na janela Preferência

chlimage_1-47

  • Marque "Mostrar menu Desenvolver na barra de menus"
  • Fechar a janela Preferências

Conectar o Safari ao iOS connect-safari-to-ios

Você pode conectar o Safari a um dispositivo ou emulador do iOS.

  • Em uma janela de console, navegue até o diretório raiz da origem extraída.
  • Digite o comando a seguir para iniciar o aplicativo no dispositivo ou emulador.
phonegap run <platform> --device

// -- or -- //

phonegap run <platform> --emulator
  • Abrir o Safari
  • Clique em Desenvolver na barra de menus
  • Selecionar submenu do iOS Simulator
  • Clique em home.html

chlimage_1-48

Depurar o JavaScript com o Inspetor da Web do Safari debug-javascript-with-safari-s-web-inspector

Você pode definir pontos de interrupção em qualquer lugar na sua origem. Quando você interage com o emulador ou dispositivo, a execução do aplicativo para nesses pontos de interrupção. É possível percorrer as etapas de execução e inspecionar os valores nas variáveis.

  • Clique em Recursos na janela Inspetor Web
  • Navegue pela árvore de origem e clique no arquivo de origem desejado
  • Clique no número da linha ao lado da adição de um ponto de interrupção
  • Interagir com dispositivo ou emulador

chlimage_1-49

  • Use os botões de controle para continuar a execução, passar por cima, entrar e sair dos métodos:

Cinco botões de controle de funcionamento diferentes alinhados em uma linha horizontal.

NOTE
Para ver os valores das variáveis no método atual, passe o mouse.

Próximas etapas the-next-steps

Depois de saber mais sobre o Desenvolvimento de Aplicativos com a CLI do PhoneGap, consulte Acessando Recursos do Dispositivo.

recommendation-more-help
2eeeb575-8007-40cc-a72d-206fbc4ddd4b