• Like
Phonegap 120118153629-phpapp01
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Phonegap 120118153629-phpapp01

  • 79 views
Published

 

Published in Software
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
79
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. PhoneGap O que é fácil é melhor! Ildyone Martins
  • 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. 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. A solução!! PhoneGap! HTML5 + CSS + Javascript
  • 5. #comofaz?
  • 6. Um hello world!
  • 7. Com o Eclipse instalado e configurado. ● Crie um novo projeto
  • 8. Defina o nome do projeto como “hello”
  • 9. Escolha a versão do android que a aplicação será disponibilizada
  • 10. Informe o nome do package da app
  • 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. 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. 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. 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. 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. 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. E finalmente, clique no projeto com o botão direito, Run as, Android Project que o aplicativo será aberto no emulador do Android.
  • 18. Ao clicar no botão um alert irá aparecer.
  • 19. Thank you! Ildyone Martins @devmartins / devmartins.com Phonegap.com