Desenvolvimento de aplicativos com CLI PhoneGap

Observação

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

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

Para executar os seguintes exemplos, você precisará de um sistema que execute o OSx (Mac) com Xcode ou de um sistema Mac/Win/Linux com o Android SDK instalado.

Bootstrap de seu ambiente de desenvolvimento

Configurar CLI do PhoneGap

Para iOS: Para desenvolver para iPhones e iPads, você precisa do Xcode IDE da Apple.

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

Baixar a fonte

Depois de inicializar com êxito seu ambiente de desenvolvimento, baixe a fonte do bloco AEM App Build:

  • Clique no ícone suspenso PhoneGap Build.

chlimage_1-45

  • Clique em Baixar fonte.
  • Selecione a fonte desejada no modal Download Source.

chlimage_1-46

Observação

A fonte de desenvolvimento contém o estado mais recente do seu aplicativo, ao mesmo tempo que inclui alterações não preparadas. Use a fonte de armazenamento temporário para criar candidatos de lançamento para enviar aos fornecedores da app store.

Se você nunca preparar seu aplicativo, selecionar a opção Armazenamento temporário acionará o fluxo de trabalho de armazenamento temporário (dica: isso será exibido como um aplicativo de preparo no aplicativo PhoneGap Enterprise Viewer disponível na AppStore e no Google PlayStore).

  • Clique em Baixar e salve o ZIP em seu computador.
  • Extraia o arquivo zip baixado para a área de trabalho.

Criar e carregar o aplicativo (da origem)

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

Observação

Você pode executar todas essas etapas separadamente, consulte Documentos CLI doPhoneGap.

  1. Verifique se você instalou a CLI PhoneGap, consulte 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
Observação

Se tiver problemas neste momento, volte ao básico para solucionar problemas -

  1. Criar uma nova pasta (teste mkdir)
  2. Navegar nesta nova pasta (teste cd)
  3. Executar 'phonegap criar helloWorld'
  4. Navegue até helloWorld (cd helloWorld)
  5. Execute 'phonegap run android (ou substitua o Android por ios como acima).
  6. O Emulador abrirá a execução do aplicativo PhoneGap recém-criado, dizendo "Pronto para dispositivo" se a ponte JavaScript para nativo estiver operacional.

Isso verificará se o ambiente de desenvolvimento PhoneGap CLI está ativo e funcionando corretamente.

Depurar Javascripts com depuração Safari e IOS

Você pode depurar JavaScripts de seu aplicativo usando as ferramentas de desenvolvedor do Safari, da mesma forma que faria com um aplicativo da Web.

Ativar ferramentas para desenvolvedores do Safari

Para ativar as ferramentas do desenvolvedor:

  • Abrir preferências do Safari

    • Clique em Safari na barra de menus
    • Clique em Preferências
  • Clique em Avançado na janela Preferência

chlimage_1-47

  • Marque "Mostrar menu Revelação na barra de menus"
  • Fechar a janela Preferência

Connect Safari para iOS

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

  • Em uma janela do console, navegue até o diretório raiz da fonte extraída.
  • Digite o seguinte comando 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
  • Selecione o submenu Simulador do iOS
  • Clique em home.html

chlimage_1-48

Depurar JavaScript com o Inspetor da Web do Safari

Você pode definir pontos de interrupção em qualquer lugar na sua origem. Quando você interage com seu emulador ou dispositivo, a execução do aplicativo será interrompida nesses pontos de interrupção. Você pode percorrer a execução e inspecionar os valores em variáveis.

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

chlimage_1-49

  • Use os botões de controle para continuar a execução, passe o mouse sobre, passe para dentro e saia dos métodos:

Observação

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

Próximas etapas

Depois de saber mais sobre como desenvolver aplicativos com a CLI PhoneGap, consulte Acessar recursosdo dispositivo.

Nesta página