Conhecendo o PhoneGap

4,236 views

Published on

Apresentação para a aula de Tecnologias WEB no curso Tecnologia em Análise e Desenvolvimento de Sistemas (IFRN) mostrando noções básicas sobre o PhoneGap, e exemplo de codigo.

Published in: Technology

Conhecendo o PhoneGap

  1. 1. PhoneGap Alunos: Cristiano Gomes Leandro Oliveira
  2. 2. O que é PhoneGap? “PhoneGap é uma soluções de código aberto para a construção de aplicativos móveis multi- plataformas com tecnologias web padrão como HTML, JavaScript e CSS.”
  3. 3. História do PhoneGap ● Iniciado por Nitobi Software; ● Adobe adquire Nitobi em 2011; ● PhoneGap foi doado a Fundação Apache Software; ● Inicialmente chamado Apache Callback; ● Depois renomeado para Apache Cordova; ● http://cordova.apache.org/
  4. 4. Apache Cordova x PhoneGap ● PhoneGap é uma distribuição do Apache Cordova ● Apache Cordova é o motor que move o PhoneGap ● PhoneGap poderá possuir outras ferramentas da Adobe que não seriam apropriadas ao Projeto Apache ○ PhoneGap Build
  5. 5. Por quê utilizar o PhoneGap? Bagunça no desenvolvimento mobile Plataforma Linguagem Android Java iOS Objective-C Windows Phone .NET e/ou C# BlackBerry Java Symbian C++, Java, Flash Lite
  6. 6. Por quê utilizar o PhoneGap? Problema: muitas plataformas, aparelhos e lojas de aplicativos. Solução: utilizar o desenvolvimento web ● Multi plataforma; ● Padrões abertos; ● Código aberto.
  7. 7. Plataformas suportadas
  8. 8. O que o PhoneGap faz? Ele é uma ponte entre o browser e as APIs disponíveis no aparelho. Permite acesso a recursos que normalmente não são acessíveis para o browser sozinho.
  9. 9. Recursos Android iPhone BlackBerry Windows Phone Symbian WebOS Bada Acelerômetro ✓ ✓ ✓ ✓ ✓ ✓ ✓ Câmera ✓ ✓ ✓ ✓ ✓ ✓ ✓ Contatos ✓ ✓ ✓ ✓ ✓ X ✓ Bússola ✓ ✓ X ✓ X ✓ ✓ Arquivos ✓ ✓ ✓ ✓ ✓ X X GPS ✓ ✓ ✓ ✓ ✓ ✓ ✓ Internet ✓ ✓ ✓ ✓ ✓ ✓ ✓ Arquivos ✓ ✓ ✓ ✓ ✓ X X Mídia ✓ ✓ X ✓ X X X
  10. 10. Arquitetura
  11. 11. Aplicação nativa Vantagens Desvantagens Experiência do usuário mais específica Necessita de tempo para desenvolver código diferente para cada plataforma. SDK pode facilitar o desenvolvimento e teste dos aplicativos. Mas caro para desenvolver Melhor performace. Cada plataforma possui sua propria linguagem de programação. Acesso completo ao hardware e recursos do dispositivo
  12. 12. Aplicação web Vantagens Desvantagens A aplicação pode rodar em múltiplas plataformas. A experiência do usuário do aplicativo não terá o tom característico do dispositivo. HTML/CSS/JavaScript. Não possui acesso a todos os recursos do dispositivo.
  13. 13. Adobe PhoneGap Build
  14. 14. ● O Phonegap Build é um ambiente feito pela a Adobe para facilitar a compilação do projeto. ● Permite compilar seu projeto para 6 plataformas diferentes ao mesmo tempo. ● Possui integração com o GitHub. ● O codigo do projeto pode ser lido direto do GitHub ou de um arquivo .zip Adobe PhoneGap Build
  15. 15. Adobe PhoneGap Build
  16. 16. Upload do projeto
  17. 17. Informações do projeto
  18. 18. Build do projeto
  19. 19. Build do projeto
  20. 20. PhoneGap + Android
  21. 21. Ferramentas 1. Eclipse 2. Android SDK 3. Node.js 4. PhoneGap
  22. 22. Android SDK http://developer.android.com/sdk/index.html
  23. 23. Node.JS http://nodejs.org/
  24. 24. PhoneGap com Node.js http://phonegap.com/install/ 1. Após instalar o Node.js C:> npm install -g phonegap
  25. 25. PhoneGap com Node.js 2. Apos instalar o PhoneGap $ phonegap create my-app $ cd my-app $ phonegap run android
  26. 26. Download do PhoneGap ● Dessa forma não é necessário instalar o Node.js ● Download do arquivos no site. http: //phonegap.com/install/
  27. 27. Usando o PhoneGap 1. Criar um novo projeto Android 2. Criar a pasta libs 3. Criar a pasta www dentro da pasta assets 4. Criar a pasta xml dentro da pasta res
  28. 28. Usando o PhoneGap 5. Colar o arquivo phonegap-2.9.0.jar em /libs 6. Colar o arquivo cordava.js em /assets/www 7. Criar o arquivo config.xml na pasta /res/xml 8. Na pasta src, alterar o extends da classe MainActivity de Activity para DroidGap
  29. 29. Usando o PhoneGap 9. Na linha onde contém setContentView() substitua por super.loadUrl( “file:///android_asset/www/index.html”);
  30. 30. Usando o PhoneGap Estrutura do projeto
  31. 31. Usando o PhoneGap Abrir o arquivo AndroidManifest.xml no editor e localize a seguinte linha: E inserir o código a seguir <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.olamundo" android:versionCode="1" android:versionName="1.0"> <-- aqui vai o código do phoneGap --> <uses-sdk android:minSdkVersion="8" />
  32. 32. Usando o PhoneGap <supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizeable="true" android:anyDensity="true" /> <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.VIBRATE" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.RECEIVE_SMS" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> <uses-permission android:name="android.permission.READ_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  33. 33. Usando o PhoneGap Ainda no AndroidManifest.xml, localize a linha <activity android:name="com.example.olamundo.MainActivity" android:label="@string/app_name"> e modifique para: <activity android:name="com.example.olamundo.MainActivity" android:configChanges="orientation|keyboardHidden" android:label="@string/app_name">
  34. 34. Eventos no PhoneGap ● Um evento no PhoneGap é similar ao eventos que existem no JavaScript ● Detecta quando uma ação é realizada no dispositivo. deviceready pause resume online offline backbutton batterycritical batterylow batterystatus menubutton searchbutton startcallbutton endcallbutton volumedownbutton volumeupbutton
  35. 35. deviceready ● O evento deviceready é chamado quando o Cordova for completamente carregado e pronto para o uso. ● Esse evento é essencial para qualquer aplicação. function onLoad() { document.addEventListener("deviceready", onDeviceReady, false); } function onDeviceReady() { // Now safe to use device APIs }
  36. 36. deviceready <!DOCTYPE html> <html> <head> <title>Device Ready Example</title> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" charset="utf-8"> function onLoad() { document.addEventListener("deviceready", onDeviceReady, false); } function onDeviceReady() { alert("Ok!"); } </script> </head> <body onload="onLoad()"> </body> </html>
  37. 37. Evento Descrição deviceready É executado quando o Cordova é carregado completamente pause É executado quando uma aplicação é colocaga em segundo plano resume É executado quando a aplicação volta para o primeiro plano online É executado quando o dispositivo se conectado a internet offline É executado quando a aplicação se desconecta e o dispositivo não esta conectado a internet. backbutton É executado quando pressiona o botão voltar batterycritical É executado quando a bateria atinge um nivel critico de carga. Eventos
  38. 38. Evento Descrição batterylow É executado quando a bateria atinge um nivel baixo de carga batterystatus É executado quando ocorre uma mudança no estado da bateria (leve, isPlugged) menubutton É executado quando pressiona o botão menu searchbutton É executado quando pressiona o botão de buscar startcallbutton É executado quando pressiona o botão de iniciar chamada endcallbutton É executado quando pressiona o botão de finalizar chamada volumedownbutton volumeupbutton É executado quando pressiona os botões do volume (+ / -) Eventos
  39. 39. Obrigado!

×