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 (http://developer.android.com/sdk/index.html )
ANDROID SDK
• Node JS• Android SDK (http://developer.android.com/sdk/index.html )
NODE JS
• Node JS• Android SDK (http://developer.android.com/sdk/index.html )
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:\android\ant-apache2. c:\android\android-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:\android\android-sdk-Windows
5. Abrirá a tela do sdk manager
Configuração
3. abrir o sdk manager do android em:
4. c:\android\android-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 computador2. botão direito3. 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:\android\android-sdk-Windows2. C:\android\android-sdk-windows\tools3. C:\android\android-sdk-windows\platform-tools4. C:\android\ant-apache\bin
Ficará assim:Anteriores;C:\android\android-sdk-Windows; C:\android\android-sdk-windows\tools; C:\android\android-sdk-windows\platform-tools; C:\android\ant-apache\bin;
Configuração – Variáveis de Ambiente
1. No botão novo do ‘Variaveis do sistema’:2. Aparece a tela de dialogo para adicionar as
variáveis3. Adicione as seguintes variáveis caso não tiver:
Configuração – Variáveis de Ambiente
NOME VALOR
ANDROID_HOME C:\android\android-sdk-windows
ANT_HOME C:\android\ant-apache
JAVA_HOME C:\Program Files\Java\jdk1.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 print2. Se aparecer o ‘>’ está ok!
TESTAR O NODE
1. Teste o comando ‘java’ segundo o print2. Se aparecer algo semelhante a help ta ok
TESTAR O JAVA
1. Teste o comando ‘adb’ segundo o print2. 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 avd2. 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:\apps2. 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, basta1. Cordova emulate android e aguardar a tela abrir do android haha
Emulando
TCHARAAAAAAM !!!
AH, E O .APK ?????
• O arquivo .apk fica localizado em:• C:\apps\meuaplicativo\platforms\android\ant-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 )