Como fazer e testar uma App em PhoneGap

PhoneGap

O phonegap permite o desenho e desenvolvimento de Apps permitindo a utilização de Html, Css e Javascript no desenvolvimeto das Apps. Olhando para a crescente eficiência dos leitores de JavaScript nos dispositivos móveis, começa a tornar-se dificil distinguir uma App nativa de uma App hibrida.

Um dos pontos mais lentos no processo de desenvolvimento era a exportação, mesmo utilizando o PhoneGap Build na cloud ou correndo o Cordova num editor no Pc, este processo ainda era moroso significando algum tempo desnecessário à espera. Ok só era porreiro mesmo para o café!

Com a introdução do PhoneGap Developer App, a criação de apps tornou-se mais simples. A Developer App corre no dispositivo móvel mantendo ligação com o desktop, significando isto que podemos editar no desktop e assim que gravamos podemos testar nativamente no dispositivo móvel o que torna todo o processo de teste e desenvolvimento significativamente mais rápido.

Vamos começar!

Para começar este mini tutorial vamos ver o processo de instalação e como correr PhoneGap no desktop e a Developer App no telemovel. Para trabalhar com o PhoneGap precisamos de instalar o Node.js.
Caso ainda não tenhas, podes ir ao site http://nodejs.org e basta clicar no botão “instalar”

Instalar o Node.js

Faz duplo click no instalador e segue os passos do mesmo, de forma a garantir que o Node.js fica instalado. A isntalação é simples seguindo as instruções.

Linha de Comandos

Sim, é verdade nada como a linha de comandos em Windows ou Terminal em Mac. Escreve a instrução abaixo na linha de comandos, a instrução fará com que a parte npm do Node faça o download e instalação do PhoneGap no teu computador.

001    sudo npm install -g phonegap

Criar a app

Apos alguns momentos para terminar o download, devera aparecer notificao do final do download.

Escreve agora a instrucao abaixo, para que o phonegap crie uma nova aplicacao phonegap com o nome “myapp”. A pasta do programa com o mesmo nome foi agora criada e estara na raiz do teu utilizador.

001    phonegap create myapp

Mudança Directorias

Este sera o passo mais simples, tal como no “Dos” basta fazer cd para mudar para a directoria da App. Voltaremos ao terminal em seguida.  Agora ha que instalar o Phonegap mobile no dispositivo movel, disponivel para ios, windows e android.

001    cd myapp

Instalar a App movel

Depois do download concluido instala e arranca a app para podermos ligar via desktop a partir do terminal.

Obter endereço IP

Agora com tudo instalado vamos voltar ao terminal. Escreve o código abaixo, para fazer com que o Phonegap lance a aplicação. Irá aparecer a resposta “Listening on 192.168.1.46:3000”, vamos utilizar isto no dispositivo mais à frente.

kay now as we have the PhoneGap Developer app on our device, we need to switch back to the desktop and into terminal. Type the code shown below which will cause phonegap to start serving your application. You will get a response as follows below this ‘listening on 192.168.1.46:3000’, we will use this on the device in just a moment and the IP address will be for your own computer, rather than the one shown.

001    phonegap serve

Ligar o dispositivo

No centro da App no dispositivo móvel, está o server address.
Escreve aqui o IP fornecido no passo anterior. No caso do dispositivo ser android será necessário escrever o protocolo “http://”, antes do IP. Atenção não te esqueças da indicação da porta “:3000”, caso contrário não irá funcionar.

App de Demonstração

Com a App a correr fica no ecrã uma notificação a verde “Device is Ready”. Agora que temos Desktop e dispositvo sincronizados sempre que se grava o ficheiro no desktop, o telefone atualiza para mostrar as ultimas alterações.

Editor de Código

Abre o directório myapp/wwww. Coloca uma imagem no directorio img.
Abre o index.html num editor de código (dreamweaver ou sublime por exemplo) e vamos começar a editar a App.

Adicionar conteúdo

Por defeito o index.html mostra uma imagem Phonegap com uma mensagem a piscar, não necessitando disto procura a secção “body” do documento e a div com a class “app” e limpa todo o seu conteúdo.
Escreve agora o código que html com que costumas trabalhar e coloca a imagem na div.

Acertar o css

Todas as correções CSS, basta abrir o ficheiro index.css elimina tudo excepto a class “.app” e escreve css como farias regularmente.

Acertos

Na class “.app” podemos definir as margens esquerda e direita para “auto” de forma a garantir que o nosso conteúdo ficará posicionado ao centro do ecrã, mesmo em dispositivos com ecrã maior. Se gravares agora o documento, deverás ver a app atualizada no telefone.

001        text-align:center;
002        padding:60px 0px 0px 0px;     
003         margin:10px auto;  
004    }

Para terminar

Podes desenvolver a tua app em tempo real sem necessidade de simuladores, tirando partido do teste diretamente no dispositivo, sem necessidade de exportações e outros tantos passos.
O desenvolvimento pode e deve incluir também javascript para dinâmicas.

Agora é começar a preparar umas Apps.

Leave a Reply

Your email address will not be published. Required fields are marked *