Show Menu
TÓPICOS×

Desenvolvimento de aplicativos com CLI PhoneGap

A Adobe recomenda usar o Editor SPA para projetos que exigem renderização do lado 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 um sistema Mac/Win/Linux com o Android SDK instalado.

Inicialize seu ambiente de desenvolvimento

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 de ferramentas de criação do aplicativo AEM:
  • Clique no ícone suspenso PhoneGap Build.
  • Clique em Baixar fonte.
  • Selecione a fonte desejada no modal Download Source.
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.
Você pode executar todas essas etapas separadamente, consulte Documentos CLI do PhoneGap.
  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

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 da CLI PhoneGap está ativo e funcionando corretamente.

Depurar Javascripts com depuração Safari e IOS

Você pode depurar JavaScripts do aplicativo usando as ferramentas do 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
  • 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

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
  • Use os botões de controle para continuar a execução, navegue até, entre e saia dos métodos:
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 recursos do dispositivo.