Começando com Phone Gap 2 (Cordova): Hello World Windows Phone 8

Oi pessoal,

Mais um post sobre PhoneGap aqui no blog, mas em uma plataforma diferente: Windows Phone 8!

Já postei aqui no blog um tutorial Hello World para iOS e para Android também. E ao contrário dessas duas plataformas, onde podemos usar linha de comando para criar o projeto, com Windows Phone 8 é um pouco diferente. A criação do projeto é diretamente no Visual Studio através de um template pronto que é distribuído com o SDK do PhoneGap.

Vamos lá então.

Requisitos:

Passo a Passo

  1. Instalar o PhoneGap SDK e instalar o template no VS
  2. Criar o Projeto
  3. Emular o Projeto
  4. Próximos Passos

1 - Instalar o PhoneGap SDK e instalar o template no VS

Faça o download o SDK do Phonegap e unzipe-o em um diretório de sua preferência. Navegue até o diretório lib/windows-phone-8. Dentro desse diretório você vai encontrar um arquivo chamado CordovaWP8_XXX.zip, dependendo da versão do Phonegap que você esteja usando.

phonegap-windows-phone8-01

Copie o arquivo CordovaWP8_XXX.zip para dentro da pasta ProjectTemplates do Visual Studio. Você encontra essa pasta no diretório My Documents\Visual Studio 2012\Templates\ProjectTemplates.

phonegap-windows-phone8-02

Pronto, o template do cordova/phonegap está instalado no Visual Studio. Agora podemos criar o projeto.

2 - Criando o projeto no Visual Studio

Quando abrir o Visual Studio, clique em New Project:

phonegap-windows-phone8-03

Selecione o template que acabamos de instalar, como mostra a figura abaixo:

phonegap-windows-phone8-04

O projeto será criado com a seguinte estrutura.

phonegap-windows-phone8-05

Assim como no iOS e no Android, todo o nosso código vai ficar dentro da pasta www. Por padrão, a página index.html já vem com um código de teste pronto. Vamos usar esse código mesmo.

3 - Emulando o projeto no Windows Phone 8 Emulator

Para emular o projeto, selecione o Emulator WVGA e emule o projeto. Lembre-se que o Hyper-V precisa estar ativado.

phonegap-windows-phone8-06

Depois é só esperar o emulador carregar e pronto! A mensagem Device is Ready vai ficar piscando:

phonegap-windows-phone8-07

E se navegarmos para a lista de apps do dispositivo, veremos a nossa app instalada, como se fosse uma app nativa!

phonegap-windows-phone8-08

4 – Próximos Passos

O Próximo passo é se aprofundar na documentação e criar apps bem legais! http://docs.phonegap.com/en/2.8.0/index.html

Referência: http://docs.phonegap.com/en/2.8.0/guide_getting-started_windows-phone-8_index.md.html

Código fonte gerado para esse post: https://github.com/loiane/phonegap-projects/tree/master/CordovaWP8_2_8_03

Até a próxima! icon smile Começando com Phone Gap 2 (Cordova): Hello Word iOS