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 )