instalação do phonegap(cordova) no windows 8.1

Instalação Phonegap no Windows 8.1 ( Android )
https://www.facebook.com/FonsoFernandes
http://social.msdn.microsoft.com/profile/afonso%20fernandes/
afonso.fernandes[at]msn.com

• Downloads Necessários
• Configuração
• Execução
Instalação full com emulação android

• Node JS
• Android SDK (http://developer.android.com/sdk/index.html )
JAVA jdk ( blá )

• Node JS
ANDROID SDK

• Node JS
NODE JS

• Node JS
APACHE ANT

1. Instalar o java ( jdk ) no estilo ( next, next finish )
Configuração

2. INSTALAR O NODE JS ( next, next, finish )
Configuração

1. Criar diretório:
1. C:android
2. Extraia os arquivos baixados ( ant e android sdk )
3. Copie os arquivos na seguinte estrutura
1. C:androidant-apache
2. c:androidandroid-sdk-Windows
Caso não renomear fique atento nas configurações de ambiente para
evitar problemas de configuração
Configuração - Diretórios

3. abrir o sdk manager do android em:
4. c:androidandroid-sdk-Windows
5. Abrirá a tela do sdk manager
Configuração

3. abrir o sdk manager do android em:
4. c:androidandroid-sdk-windows
Configuração

6. Marque a opção ‘Tools’
7. Marque as versões de android ( API 19, API 18 ... ) que desejam trabalhar ( os emuladores )
8. Instalar !! ( pode demorar )
Configuração

Configuração das Variaveis de Ambiente

1. Pesquisar do Windows 8
1. Atalho ( Windows + Q )
2. Pular para o slide 13 “Configuração de variáveis
de ambiente”
Método EASY

1. Vá em:
1. Meu computador
2. botão direito
3. Propriedades
Configuração – Variaveis de Ambiente ( Manual )

1. Configurações Avançadas do Sistema
Configuração – Variáveis de Ambiente 2(Manual)

1. Ir para o menu “avançado”
2. Variáveis de Ambiente ( ultimo botão )
Configuração – Variáveis de Ambiente

1. Clique 2x em path e concatene junto das variáveis
anteriores:
1. C:androidandroid-sdk-Windows
2. C:androidandroid-sdk-windowstools
3. C:androidandroid-sdk-windowsplatform-tools
4. C:androidant-apachebin
Ficará assim:
Anteriores;C:androidandroid-sdk-Windows;
C:androidandroid-sdk-windowstools; C:androidandroid-sdk-
windowsplatform-tools; C:androidant-apachebin;

1. No botão novo do ‘Variaveis do sistema’:
2. Aparece a tela de dialogo para adicionar as
variáveis
3. Adicione as seguintes variáveis caso não tiver:
NOME VALOR
ANDROID_HOME C:androidandroid-sdk-windows
ANT_HOME C:androidant-apache
JAVA_HOME C:Program FilesJavajdk1.8.0_05

Teste seu prompt está ok !!!
• Se algum não tiver, reveja suas variáveis de ambiente e seus path
• Pode testar no CMD ou Power Shell ( tanto faz )

1. Teste o comando ‘node’ segundo o print
2. Se aparecer o ‘>’ está ok!
TESTAR O NODE

1. Teste o comando ‘java’ segundo o print
2. Se aparecer algo semelhante a help ta ok
TESTAR O JAVA

1. Teste o comando ‘adb’ segundo o print
2. Se aparecer algo semelhante a um help está ok
TESTAR O ADB ( os emuladores o/ )

1. Teste o comando ‘android’ segundo o print
TESTAR ANDROID

RESUMINDO ...
• TODOS OS COMANDOS DEVEM RESPONDER AO PROMPT CORRETAMENTE

INSTALANDO OS EMULADORES
• TODOS OS COMANDOS DEVEM RESPONDER AO PROMPT CORRETAMENTE

1. Vá no prompt e digite: android avd
2. Clique em New... ( o meu já configurei hehe )
Instalar emulador

• Cadastre seu emulador preenchendo o nome
• qual dispositivo quer que o emulador seja, qual versão do android ( por
padrão ao criar o app no phonegap, ele usa a api 10, que é a versão 2.3.3
do android )
• Skin, Cameras, quanto de ram
• E assim por diante...
• E clique em ‘OK’
Cadastre o emulador

VAMOS AO CÓDIGO ???????
• ESTANDO TUDO INSTALADO E PRONTO, AQUI AGORA COMEÇA A
BRINCADEIRA !!!

1. Vá ao prompt e digite:
1. npm install phonegap –g
Instalar o phonegap

1. vamos organizar o nosso app no path:
2. C:apps
3. Para isso vamos no prompt e executemos:
1. cd c:apps
2. phonegap create meuaplicativo
3. cd meuaplicativo
• Ao executar o phonegap create <<nome>>, ele cria a estrutura
• Padrão e um template do phonegap
Prompt novamente!

1. Abra a pasta no seu editor ( indiferente qual, no caso vou usar o brackets )
Editando

• .cordova
• Padrão do phonegap
• Hooks
• Padrão do phonegap
• Platforms
• Ao adicionar uma plataforma de so, aparece la a pasta com as configurações ( wp8, android,
ios... ) por exemplo
• Comando para adicionar uma plataforma:
• Cordova platform add <<nome>> ex: (cordova platform add android )
• Plugins
• Sempre que adicionar plug-ins, ficam instalados ali para serem compilados no build
• www
• Os fontes html, css e js que iremos trabalhar !
Entendendo diretórios...

1. Abra a pasta www e coloque qualquer coisa no body do html
Editando

1. para adicionar a plataforma na qual deseja trabalhar usa-se o comando:
1. Cordova platform add <<nome>> ,como vamos trabalhar com android, vamos usar:
1. Cordova platform add android
Adicionando plataforma

1. Para emular é mais fácil ainda, basta
1. Cordova emulate android e aguardar a tela abrir do android haha
Emulando

• O arquivo .apk fica localizado em:
• C:appsmeuaplicativoplatformsandroidant-build
O .apk ...

Porque o nome ficou hello-world?

• Se abrirmos o nosso config, podemos notar a tag ‘name’ que é onde botamos o nosso nome
• No config também há várias outras coisas de configuração e permissão, mas que não serão abordadas agora,
pois o foco é mostrar a parte simples e como iniciar
Config.xml

OBRIGADO !!!
https://www.facebook.com/FonsoFernandes
http://social.msdn.microsoft.com/profile/afonso%20fernandes/
afonso.fernandes[at]msn.com
Duvidas, críticas, sugestões ???
Links uteis:
http://docs.phonegap.com/en/3.5.0/
http://www.loiane.com/2014/02/curso-phonegap-cordova-aula-01-introducao-ao-phonegap/ ( MAC )

instalação do phonegap(cordova) no windows 8.1

Mais conteúdo relacionado

Mais procurados (20)

Destaque (7)

Semelhante a instalação do phonegap(cordova) no windows 8.1 (20)

instalação do phonegap(cordova) no windows 8.1