Desenvolvimento de aplicativos com a CLI do PhoneGap

OBSERVAÇÃO

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, será necessário um sistema que execute OSx (Mac) com Xcode ou um sistema Mac/Win/Linux com o Android SDK instalado.

Bootstrap do ambiente de desenvolvimento

Configurar CLI do PhoneGap

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

Baixe gratuitamente aqui.
Guia da plataforma PhoneGap iOS

Para Android: para desenvolver iPhones e iPads, é necessário o Android Studio IDE da Google.

Baixe gratuitamente aqui.
Guia da plataforma PhoneGap Android

Baixar a Origem

Depois de 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 origem.
Selecione a origem desejada no modal Origem de download.

chlimage_1-46

OBSERVAÇÃO

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: isso será 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)

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

OBSERVAÇÃO

É possível executar todas essas etapas separadamente, consulte Documentos CLI do PhoneGap.

Certifique-se de ter instalado a CLI do PhoneGap; veja acima.
Em uma janela de console (ou terminal), navegue até o diretório raiz da origem extraída.
Digite o seguinte comando:

phonegap run android

// -- or -- //

phonegap run ios

OBSERVAÇÃO

Se você tiver problemas neste momento, volte aos conceitos básicos para solucionar problemas -

Criar uma nova pasta (teste mkdir)
Navegar para esta nova pasta (teste de cd)
Executar 'phonegap create helloWorld'
Navegue até helloWorld (cd helloWorld)
Execute 'phonegap run android (ou substitua android por ios como descrito acima).
O emulador será aberto executando o aplicativo PhoneGap recém-criado, informando "Device Ready" (Pronto para dispositivo) se a ponte JavaScript para o nativo estiver operacional.

Isso verificará se o ambiente de desenvolvimento da CLI do PhoneGap está funcionando corretamente.

Depurar JavaScripts com a depuração do Safari e do IOS

Você pode depurar os JavaScripts 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

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

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 seguinte comando para iniciar seu 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 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 o emulador ou dispositivo, a execução do aplicativo é interrompida nesses pontos de interrupção. Você pode percorrer a execução e inspecionar os valores nas variáveis.