phonegap autorefresh - app direto no celular sem emulador
DESCRIPTION
Slides simples e diretos de como utilizar o phonegap autorefresh ( phonegap serve ) direto no seu device, sem precisar de instalar emulador nem nada, a grande vantagem é que quem é usuário windows pode testar apps para ios e vice versa. Fora que aumenta muito a produtividade do desenvolvedor por não precisar toda hora subir o emuladorTRANSCRIPT
![Page 1: Phonegap autorefresh - app direto no celular sem emulador](https://reader033.vdocuments.com.br/reader033/viewer/2022050721/5598b9e91a28abac4a8b4651/html5/thumbnails/1.jpg)
Phonegap AutoRefresh
https://www.facebook.com/FonsoFernandeshttp://social.msdn.microsoft.com/profile/afonso%20fernandes/afonso.fernandes[at]msn.com
![Page 2: Phonegap autorefresh - app direto no celular sem emulador](https://reader033.vdocuments.com.br/reader033/viewer/2022050721/5598b9e91a28abac4a8b4651/html5/thumbnails/2.jpg)
• Phonegap autorefresh, é basicamente, o recurso que permite enviar o app direto pro dispositivo, sem intermédios de emulador aumentando produtividade de desenvolvimento ao máximo.
• simplesmente sexy !!!
Afinal, para que serve... ?
![Page 3: Phonegap autorefresh - app direto no celular sem emulador](https://reader033.vdocuments.com.br/reader033/viewer/2022050721/5598b9e91a28abac4a8b4651/html5/thumbnails/3.jpg)
• Instalando o Node JS
• Instalar Phonegap
• Instalar Phonegap Developer no dispositivo
• Ser feliz
Como usar ?!
![Page 4: Phonegap autorefresh - app direto no celular sem emulador](https://reader033.vdocuments.com.br/reader033/viewer/2022050721/5598b9e91a28abac4a8b4651/html5/thumbnails/4.jpg)
• Node JS
• Android SDK (http://developer.android.com/sdk/index.html )
NODE JS
![Page 5: Phonegap autorefresh - app direto no celular sem emulador](https://reader033.vdocuments.com.br/reader033/viewer/2022050721/5598b9e91a28abac4a8b4651/html5/thumbnails/5.jpg)
1. Vá ao prompt e digite:1. npm install phonegap –g
Instalar o phonegap
![Page 6: Phonegap autorefresh - app direto no celular sem emulador](https://reader033.vdocuments.com.br/reader033/viewer/2022050721/5598b9e91a28abac4a8b4651/html5/thumbnails/6.jpg)
No android
https://play.google.com/store/apps/details?id=com.adobe.phonegap.app&hl=pt_BR
![Page 7: Phonegap autorefresh - app direto no celular sem emulador](https://reader033.vdocuments.com.br/reader033/viewer/2022050721/5598b9e91a28abac4a8b4651/html5/thumbnails/7.jpg)
IOS
https://itunes.apple.com/br/app/phonegap-developer/id843536693?mt=8
![Page 8: Phonegap autorefresh - app direto no celular sem emulador](https://reader033.vdocuments.com.br/reader033/viewer/2022050721/5598b9e91a28abac4a8b4651/html5/thumbnails/8.jpg)
Windows Phone
http://www.windowsphone.com/pt-br/store/app/phonegap-developer/5c6a2d1e-4fad-4bf8-aaf7-71380cc84fe3
![Page 9: Phonegap autorefresh - app direto no celular sem emulador](https://reader033.vdocuments.com.br/reader033/viewer/2022050721/5598b9e91a28abac4a8b4651/html5/thumbnails/9.jpg)
VAMOS AO CÓDIGO ???????
• ESTANDO TUDO INSTALADO E PRONTO, AQUI AGORA COMEÇA A BRINCADEIRA !!!
![Page 10: Phonegap autorefresh - app direto no celular sem emulador](https://reader033.vdocuments.com.br/reader033/viewer/2022050721/5598b9e91a28abac4a8b4651/html5/thumbnails/10.jpg)
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!
![Page 11: Phonegap autorefresh - app direto no celular sem emulador](https://reader033.vdocuments.com.br/reader033/viewer/2022050721/5598b9e91a28abac4a8b4651/html5/thumbnails/11.jpg)
1. Abra a pasta no seu editor ( indiferente qual, no caso vou usar o brackets )
Editando
![Page 12: Phonegap autorefresh - app direto no celular sem emulador](https://reader033.vdocuments.com.br/reader033/viewer/2022050721/5598b9e91a28abac4a8b4651/html5/thumbnails/12.jpg)
• .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...
![Page 13: Phonegap autorefresh - app direto no celular sem emulador](https://reader033.vdocuments.com.br/reader033/viewer/2022050721/5598b9e91a28abac4a8b4651/html5/thumbnails/13.jpg)
1. Abra a pasta www e coloque qualquer coisa no body do html
Editando
![Page 14: Phonegap autorefresh - app direto no celular sem emulador](https://reader033.vdocuments.com.br/reader033/viewer/2022050721/5598b9e91a28abac4a8b4651/html5/thumbnails/14.jpg)
1. Após editar, salve, e digite no prompt:1. Phonegap serve
2. utilize o ip demonstrado no pc na próxima etapa
Executando
![Page 15: Phonegap autorefresh - app direto no celular sem emulador](https://reader033.vdocuments.com.br/reader033/viewer/2022050721/5598b9e91a28abac4a8b4651/html5/thumbnails/15.jpg)
1. Para emular o APP direto no seu device basta abrir o aplicativo (Phonegap developer) no celular
2. Digitar o ip da sua máquina 1. Caso der erro de conexão com o phonegap serve executado verifique:
1. Firewall
2. Antivirus
2. Algum desses pode estar bloqueando o acesso
Executando
![Page 16: Phonegap autorefresh - app direto no celular sem emulador](https://reader033.vdocuments.com.br/reader033/viewer/2022050721/5598b9e91a28abac4a8b4651/html5/thumbnails/16.jpg)
1. Para emular o APP direto no seu device basta abrir o aplicativo (Phonegap developer) no celular
2. Digitar o ip da sua máquina 1. Caso der erro de conexão com o phonegap serve executado verifique:
1. Firewall
2. Antivirus
2. Algum desses pode estar bloqueando o acesso
Executando
![Page 17: Phonegap autorefresh - app direto no celular sem emulador](https://reader033.vdocuments.com.br/reader033/viewer/2022050721/5598b9e91a28abac4a8b4651/html5/thumbnails/17.jpg)
TCHARAAAAAAM !!!
Print tirado de um smartphone Motorola Moto X
![Page 18: Phonegap autorefresh - app direto no celular sem emulador](https://reader033.vdocuments.com.br/reader033/viewer/2022050721/5598b9e91a28abac4a8b4651/html5/thumbnails/18.jpg)
OBRIGADO !!!
https://www.facebook.com/FonsoFernandeshttp://social.msdn.microsoft.com/profile/afonso%20fernandes/afonso.fernandes[at]msn.com
Duvidas, críticas, sugestões ???
Links uteis:http://phonegap.com/blog/2014/04/23/phonegap-developer-app
https://www.youtube.com/watch?v=-bGR5b45N-s (pt-br)
http://devgirl.org/2014/04/22/introducing-the-phonegap-developer-app/