phonegap ambiente de desenvolvimento
DESCRIPTION
Introdução ao phonegapTRANSCRIPT
![Page 1: Phonegap ambiente de desenvolvimento](https://reader035.vdocuments.mx/reader035/viewer/2022062313/5590ac321a28abbf2a8b4682/html5/thumbnails/1.jpg)
PhoneGapAmbiente de desenvolvimento
Grupo: Aruã de Mello SousaRenata Guimarães D. de F. Costa
![Page 2: Phonegap ambiente de desenvolvimento](https://reader035.vdocuments.mx/reader035/viewer/2022062313/5590ac321a28abbf2a8b4682/html5/thumbnails/2.jpg)
Introdução
• PhoneGap é um framework de desenvolvimento móvel
• A principal vantagem do PhoneGap é ser cross-platform: uma vez desenvolvido o aplicativo, o mesmo código-fonte poderá ser utilizado para qualquer outra plataforma sem a necessidade de ser reescrito em Java, Objective-C ou qualquer outra linguagem especifica
• Possibilita construir aplicativos para dispositivos móveis utilizando javascript html5 e css3
![Page 3: Phonegap ambiente de desenvolvimento](https://reader035.vdocuments.mx/reader035/viewer/2022062313/5590ac321a28abbf2a8b4682/html5/thumbnails/3.jpg)
Introdução● Open-Source
● Capaz de gerar aplicativos híbridos e até mesmo nativos
● PhoneGap-Build ○ Geração de aplicativos para
diversas plataformas○ Build em nuvem○ Elimina necessidade de
Sistemas Operacionais específicos
![Page 4: Phonegap ambiente de desenvolvimento](https://reader035.vdocuments.mx/reader035/viewer/2022062313/5590ac321a28abbf2a8b4682/html5/thumbnails/4.jpg)
PhoneGap
• As aplicações resultantes são híbridas:
- não são completamente nativas ao aparelho, pois todo o layout é renderizado através de web views ao invés de um framework nativo
- nem são aplicativos web, pois são rodados nativamente e tem acesso as APIs dos dispositivos.
![Page 5: Phonegap ambiente de desenvolvimento](https://reader035.vdocuments.mx/reader035/viewer/2022062313/5590ac321a28abbf2a8b4682/html5/thumbnails/5.jpg)
Ambiente de desenvolvimento• Permite a utilização de diferentes IDEs:
• Eclipse
• Sublime
• XCode (MacOS)
• Visual Studio (Windows)
• Existem diversos plugins, tanto da própria Adobe quanto de terceiros para auxiliar no desenvolvimento
![Page 6: Phonegap ambiente de desenvolvimento](https://reader035.vdocuments.mx/reader035/viewer/2022062313/5590ac321a28abbf2a8b4682/html5/thumbnails/6.jpg)
Eclipse
![Page 7: Phonegap ambiente de desenvolvimento](https://reader035.vdocuments.mx/reader035/viewer/2022062313/5590ac321a28abbf2a8b4682/html5/thumbnails/7.jpg)
![Page 8: Phonegap ambiente de desenvolvimento](https://reader035.vdocuments.mx/reader035/viewer/2022062313/5590ac321a28abbf2a8b4682/html5/thumbnails/8.jpg)
![Page 9: Phonegap ambiente de desenvolvimento](https://reader035.vdocuments.mx/reader035/viewer/2022062313/5590ac321a28abbf2a8b4682/html5/thumbnails/9.jpg)
![Page 10: Phonegap ambiente de desenvolvimento](https://reader035.vdocuments.mx/reader035/viewer/2022062313/5590ac321a28abbf2a8b4682/html5/thumbnails/10.jpg)
![Page 11: Phonegap ambiente de desenvolvimento](https://reader035.vdocuments.mx/reader035/viewer/2022062313/5590ac321a28abbf2a8b4682/html5/thumbnails/11.jpg)
Configuração do Ambiente de Desenvolvimento
É possível utilizar multiplas IDEs pois, tanto a configuração quanto a compilação são independentes da IDE
![Page 12: Phonegap ambiente de desenvolvimento](https://reader035.vdocuments.mx/reader035/viewer/2022062313/5590ac321a28abbf2a8b4682/html5/thumbnails/12.jpg)
Cordova - Instalação em Unix
• Primeiramente faça download e instalação de node.js (http://nodejs.org/) e após instale o cordova
$ sudo npm install -g cordova
• No diretório onde está o código fonte$ cordova create hello com.example.hello "HelloWorld"$ cd hello $ cordova platform add $ cordova build
![Page 13: Phonegap ambiente de desenvolvimento](https://reader035.vdocuments.mx/reader035/viewer/2022062313/5590ac321a28abbf2a8b4682/html5/thumbnails/13.jpg)
Cordova - Instalação em MacOS
• Instalar Xcode
• Baixar e instalar PhoneGap (http://phonegap.com/install/)
![Page 14: Phonegap ambiente de desenvolvimento](https://reader035.vdocuments.mx/reader035/viewer/2022062313/5590ac321a28abbf2a8b4682/html5/thumbnails/14.jpg)
Emulação
SDKs para plataformas móveis vem empacotados com emuladores que executam uma imagem de dispositivos, para que seja possivel ver a interação do aplicativo com as funcionalidades da plataforma.
![Page 15: Phonegap ambiente de desenvolvimento](https://reader035.vdocuments.mx/reader035/viewer/2022062313/5590ac321a28abbf2a8b4682/html5/thumbnails/15.jpg)
EmulaçãoRode este
comando para reconfigurar o aplicativo e vê-lo no emulador da plataforma
$ cordova emulate android
![Page 16: Phonegap ambiente de desenvolvimento](https://reader035.vdocuments.mx/reader035/viewer/2022062313/5590ac321a28abbf2a8b4682/html5/thumbnails/16.jpg)
Dúvidas?
![Page 17: Phonegap ambiente de desenvolvimento](https://reader035.vdocuments.mx/reader035/viewer/2022062313/5590ac321a28abbf2a8b4682/html5/thumbnails/17.jpg)
Referências
• http://www.adobe.com/devnet/html5/articles/getting-started-with-phonegap-in-xcode-for-ios.html
• http://mark.burazin.net/phonegap-apache-cordova-osx-sublime-text-2/
• http://docs.phonegap.com/en/3.4.0/guide_platforms_index.md.html#Platform%20Guides
• http://docs.phonegap.com/en/3.4.0/guide_cli_index.md.html#The%20Command-Line%20Interface
• http://anindita9.wordpress.com/tag/phonegap-windows-phone-visual-studio-2010-2012/