Conforme prometido no tópico anterior, hoje daremos início à instalação da ferramenta PhoneGap em dispositivo móvel, aprendendo como criar um projeto, como compilar para o sistema operacional desejado, dentre outras funcionalidades, deixando-o preparado para criar uma aplicação Web, procedimento que será demonstrado na Parte 3 deste tópico.
PhoneGap
Passo 1 - Instalação
Primeiramente, é necessário baixar (para o seu computador Desktop) a última versão do PhoneGap no site oficial:
Agora, basta instalar o Software e depois executá-lo. Você deverá contemplar a seguinte tela:
Passo 2 - Criando o projeto
Agora, clique no símbolo de "+" para adicionar um novo projeto. Escolha a pasta e o novo do projeto:
Muito bem, agora deverá aparecer uma mensagem sobre o diretório dos arquivos de projeto e também informando que o seu projeto se encontra agora em execução na Web, informando o IP e a porta para acessá-lo, conforme a figura abaixo:
Se quiser, você pode copiar e colar o link em seu navegador (Browser) e visualizar o aspecto default da aplicação criada pelo PhoneGap. O interessante é que possível ver essa aplicação de qualquer lugar, seja do Desktop, seja através de um dispositivo móvel, etc.
Passo 3 - Executando o projeto em dispositivo móvel
O próximo passo é baixar o aplicativo PhoneGap Developer (gratuito) para o seu dispositivo móvel:
Depois de instalado, execute-o. Você irá se deparar com a tela para inserção do endereço IP e porta para acessar a sua aplicação:
Depois disso, você irá visualizar a aplicação Web em seu dispositivo móvel em tempo real. Qualquer modificação no código HTML/CSS/Javascript será imediatamente sentida em seu aparelho.
Passo 4 - O código do projeto
Agora que temos a ferramenta perfeitamente implementada, vamos acessar a pasta do projeto para visualizar o código HTML a ser editado por nós. Dentro da pasta de projeto haverá várias pastas adicionais.
A que nos interessa por enquanto é a pasta [www], que contém os arquivos da página HTML da nossa aplicação. Se você tem alguma experiência com HTML, a próxima imagem o fará se sentir em casa. Caso contrário, aconselho fortemente que procure a aprender pelo menos o básico em alguma das referências deste post. Mas, tendo ou não conhecimento sobre HTML, vamos continuar, abrindo o arquivo index.HTML para a sua edição.
Nesta parte do tutorial tenho que advertir que há N meios de se editar um arquivo HTML, desde o bloco de notas até a IDE Netbeans, já apresentada neste blog. Primeiro, vou editar o arquivo HTML para demonstrar o poder do PhoneGap:
Assim que o código HTML for salvo, uma nova mensagem de boas-vindas deve ser exibida agora em seu dispositivo móvel (basta aguardar em torno de 3 segundos): "Bora Programar!". Experimente brincar um pouco com esse código ou com os arquivos .js (javascript) ou .css (estilo) antes de avançar para o próximo passo deste tutorial. Divirta-se!
Passo 5 - Usando o NetBeans
A IDE Netbeans não traz nenhum retorno imediato para a edição em HTML, a não ser exibir os arquivos da pasta de projeto em um mesmo local, deixando a edição mais agradável. Você pode muito bem continuar usando o bloco de notas ou pesquisar outro editor de HTML na internet, talvez até mais poderoso.
Mas enfim, para o netbeans, basta criar um novo projeto em HTML5 (não selecione aplicação Cordova, não é necessário):
Escolha para nome de Projeto o mesmo nome do projeto do PhoneGap, e a pasta de projeto deve também coincidir com a do PhoneGap. Exclua o arquivo index.html gerado e acessa as propriedades da pasta Raiz do Site. Nós sabemos que a pasta raiz deve ser a [www]:
Sinta-se poderoso agora! Agora você pode editar o seu projeto diretamente do Netbeans, compilá-lo em seu dispositivo móvel em tempo real e ainda pode visualizar a aplicação em seu navegador Browser:
Passo 6 - Compilando o projeto
Para compilar o projeto, transformando o formato Web em um aplicativo destinado para iOS ou para Android (onde a mágina acontece), retorne ao site do phonegap e clique no botão indicado:
Você deverá criar uma conta Adobe. Depois de se registrar, você irá se deparar com a seguinte tela para a criação de aplicações:
Se você clicar no símbolo de algum sistema operacional, irá baixar a sua aplicação. Mas primeiro, é necessário realizar o Upload do seu código. Para isso, zipe o seu arquivo de projeto para .zip. Clique depois em Uptade Code, selecione o seu arquivo e dê Upload. Se o seu aplicativo for para iOS, talvez seja necessário implantar um chave de registro (pesquise como fazer isso).
Caso contrário, já é possível baixar o aplicativo para Android. Você pode também usar o código QR para automaticamente instalar o aplicativo em seu celular.
Se o o aplicativo funcionou de forma inesperada, é possível usar a opção Debug do painel acima para testar o seu código em tempo real e corrigir qualquer problema eventual, sem tem que editar o seu código novamente, zipá-lo, etc..
Passo 7 - Distribuindo o Aplicativo
O passo final é distribuir o aplicativo, disponibilizando-o para download ou colocando-o em uma loja virtual, como por exemplo a Google Play, para aplicativos Android.
Veja a referência para obter mais informações de como colocar o seu aplicativo na Google Play.
Conclusão
Agora que conhecemos bem a ferramenta que iremos utilizar em nosso projeto, podemos desenvolver com muito mais segurança o nosso projeto Web, sabendo que existem meios de transformá-lo para aplicativo móvel e também reaproveitá-lo para exibir do navegador Browser.
Para o próximo post, teremos a última parte desta série de tutoriais sobre o PhoneGap, em que será ensinado um pouco sobre como programar a sua própria aplicação. Como veremos, não basta somente saber HTML, Javascript e CSS. Há algumas sutilezas e diferenças pequenas.
Referências:
[PhoneGap]
http://www.mobiltec.com.br/blog/index.php/tutorial-de-phonegap-primeiros-passos/
http://www.devmedia.com.br/projetando-e-criando-aplicativos-para-dispositivos-moveis/30671
http://coenraets.org/blog/phonegap-tutorial/
[HTML]
http://www.codecademy.com/pt-BR/courses/web-beginner-pt-BR/0/1?curriculum_id=5355c39d516bcbd91200000a
http://www.w3schools.com/html/
[Google Play]
http://www.tutoriandroid.com/2012/05/como-publicar-no-google-play.html
Nenhum comentário:
Postar um comentário