instalação do phonegap(cordova) no windows 8.1
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 160 views

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

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

Statistics

Views

Total Views
160
Views on SlideShare
152
Embed Views
8

Actions

Likes
0
Downloads
3
Comments
0

1 Embed 8

http://www.slideee.com 8

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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: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; 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á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
  • 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
  • TCHARAAAAAAM !!!
  • AH, E O .APK ?????
  • • 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 )