Demonstração de como o instalar o phonegap no windows 8.1 e usar o emulador de android de exemplo

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

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

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

4. • Node JS
• Android SDK (http://developer.android.com/sdk/index.html )
ANDROID SDK

5. • Node JS
• Android SDK (http://developer.android.com/sdk/index.html )
NODE JS

6. • Node JS
• Android SDK (http://developer.android.com/sdk/index.html )
APACHE ANT

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

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

9. 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

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

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

12. 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

13. Configuração das Variaveis de Ambiente

14. 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

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

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

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

18. 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;
Configuração – Variáveis de Ambiente

19. 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:
Configuração – Variáveis de Ambiente
NOME VALOR
ANDROID_HOME C:androidandroid-sdk-windows
ANT_HOME C:androidant-apache
JAVA_HOME C:Program FilesJavajdk1.8.0_05

20. 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 )

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

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

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

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

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

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

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

28. • 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

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

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

31. 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!

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

33. • .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...

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

35. 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

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

37. TCHARAAAAAAM !!!

38. AH, E O .APK ?????

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

40. Porque o nome ficou hello-world?

41. • 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

42. 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 )