Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Phonegap 120118153629-phpapp01

268 views

Published on

Published in: Software
  • Be the first to comment

  • Be the first to like this

Phonegap 120118153629-phpapp01

  1. 1. PhoneGap O que é fácil é melhor! Ildyone Martins
  2. 2. O que é o PhoneGap? Phonegap é um framework para desenvolvimento de aplicações mobile (iOS, Android, etc). Open source e free, mantido por voluntários e empresas como Adobe, IBM, RIM e Microsoft.
  3. 3. Quais as dificuldades para desenvolvimento mobile? ● Dificuldade em adequar a aplicação a 300 milhões de resoluções de telas (Android somente) :( ● Ter que instalar IDEs e SDKs de cada plataforma ● Aprender a linguagem de programação de cada plataforma ● Objective-C (iPhone) ● Java (Android) ● Hardware de desenvolvimento específico (iPhone somente)
  4. 4. A solução!! PhoneGap! HTML5 + CSS + Javascript
  5. 5. #comofaz?
  6. 6. Um hello world!
  7. 7. Com o Eclipse instalado e configurado. ● Crie um novo projeto
  8. 8. Defina o nome do projeto como “hello”
  9. 9. Escolha a versão do android que a aplicação será disponibilizada
  10. 10. Informe o nome do package da app
  11. 11. Alguns passos para configurar o projeto ● Crie a pasta assets/www ● Crie a pasta libs ● Crie um arquivo index.html em assets/www
  12. 12. Código do index.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="phonegap-1.3.0.js"></script> <title>Hello World</title> <style type="text/css"> html, body { height: 100%; } table { width: 100%; height: 100%; text-align: center; vertical-align: middle; } imkg { display: block; margin: 0 auto; } </style> </head> <body> <table> <tr> <td> <img src="imagens/phonegap.png"><br> <button onclick="alert('Olá Mundo');">Mensagem</button> </td> </tr> </table> </body> </html>
  13. 13. Alguns passos para configurar o projeto ● Crie a pasta assets/www ● Crie a pasta libs ● Crie um arquivo index.html em assets/www ● Salve a imagem exemplo do phonegap no www/imagens (disponível no site) ● Baixe o zip do phonegap (phonegap.com) e extraia em algum lugar na sua máquina ● Do zip do phonegap, copie o arquivo Android/phonegap-1.3.0.js para assets/www
  14. 14. Alguns passos para configurar o projeto ● Copie o arquivo Android/phonegap-1.3.0.jar para libs ● Clique nesse jar, botão direito, Build Path > Add to Build Path ● Copie a pasta Android/xml para a pasta res do projeto ● Edite o arquivo Helloactivity.java ● Mude a classe extendida de Activity para DroidGap ● Mude a linha 12 para que fique como: super.loadUrl("file:///android_asset/www/index.html"); ● Configure os imports para que fique como: import android.os.Bundle; import com.phonegap.DroidGap;
  15. 15. Edite o arquivo AndroidManifest.xml conforme o código abaixo <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.hello" android:versionCode="1" android:versionName="1.0" > <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="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" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" />
  16. 16. Edite o arquivo AndroidManifest.xml conforme o código abaixo <uses-sdk android:minSdkVersion="8" /> <application android:icon="@drawable/ic_launcher" android:label="@string/app_name" > <activity android:configChanges="orientation|keyboardHidden" android:label="@string/app_name" android:name=".HelloActivity" > <intent-filter > <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:configChanges="orientation|keyboardHidden" android:label="@string/app_name" android:name="com.phonegap.DroidGap" > <intent-filter > </intent-filter> </activity> </application> </manifest>
  17. 17. E finalmente, clique no projeto com o botão direito, Run as, Android Project que o aplicativo será aberto no emulador do Android.
  18. 18. Ao clicar no botão um alert irá aparecer.
  19. 19. Thank you! Ildyone Martins @devmartins / devmartins.com Phonegap.com

×