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

4.636 visualizações

Publicada em

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

Publicada em: Celular
4 comentários
5 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
4.636
No SlideShare
0
A partir de incorporações
0
Número de incorporações
34
Ações
Compartilhamentos
0
Downloads
116
Comentários
4
Gostaram
5
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

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

  1. 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. 2. • Downloads Necessários • Configuração • Execução Instalação full com emulação android
  3. 3. • Node JS • Android SDK (http://developer.android.com/sdk/index.html ) JAVA jdk ( blá )
  4. 4. • Node JS • Android SDK (http://developer.android.com/sdk/index.html ) ANDROID SDK
  5. 5. • Node JS • Android SDK (http://developer.android.com/sdk/index.html ) NODE JS
  6. 6. • Node JS • Android SDK (http://developer.android.com/sdk/index.html ) APACHE ANT
  7. 7. 1. Instalar o java ( jdk ) no estilo ( next, next finish ) Configuração
  8. 8. 2. INSTALAR O NODE JS ( next, next, finish ) Configuração
  9. 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. 10. 3. abrir o sdk manager do android em: 4. c:androidandroid-sdk-Windows 5. Abrirá a tela do sdk manager Configuração
  11. 11. 3. abrir o sdk manager do android em: 4. c:androidandroid-sdk-windows Configuração
  12. 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. 13. Configuração das Variaveis de Ambiente
  14. 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. 15. 1. Vá em: 1. Meu computador 2. botão direito 3. Propriedades Configuração – Variaveis de Ambiente ( Manual )
  16. 16. 1. Configurações Avançadas do Sistema Configuração – Variáveis de Ambiente 2(Manual)
  17. 17. 1. Ir para o menu “avançado” 2. Variáveis de Ambiente ( ultimo botão ) Configuração – Variáveis de Ambiente
  18. 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. 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. 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. 21. 1. Teste o comando ‘node’ segundo o print 2. Se aparecer o ‘>’ está ok! TESTAR O NODE
  22. 22. 1. Teste o comando ‘java’ segundo o print 2. Se aparecer algo semelhante a help ta ok TESTAR O JAVA
  23. 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. 24. 1. Teste o comando ‘android’ segundo o print TESTAR ANDROID
  25. 25. RESUMINDO ... • TODOS OS COMANDOS DEVEM RESPONDER AO PROMPT CORRETAMENTE
  26. 26. INSTALANDO OS EMULADORES • TODOS OS COMANDOS DEVEM RESPONDER AO PROMPT CORRETAMENTE
  27. 27. 1. Vá no prompt e digite: android avd 2. Clique em New... ( o meu já configurei hehe ) Instalar emulador
  28. 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. 29. VAMOS AO CÓDIGO ??????? • ESTANDO TUDO INSTALADO E PRONTO, AQUI AGORA COMEÇA A BRINCADEIRA !!!
  30. 30. 1. Vá ao prompt e digite: 1. npm install phonegap –g Instalar o phonegap
  31. 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. 32. 1. Abra a pasta no seu editor ( indiferente qual, no caso vou usar o brackets ) Editando
  33. 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. 34. 1. Abra a pasta www e coloque qualquer coisa no body do html Editando
  35. 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. 36. 1. Para emular é mais fácil ainda, basta 1. Cordova emulate android e aguardar a tela abrir do android haha Emulando
  37. 37. TCHARAAAAAAM !!!
  38. 38. AH, E O .APK ?????
  39. 39. • O arquivo .apk fica localizado em: • C:appsmeuaplicativoplatformsandroidant-build O .apk ...
  40. 40. Porque o nome ficou hello-world?
  41. 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. 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 )

×