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

Like this? Share it with your network

Share

Phonegap 120118153629-phpapp01

on

  • 145 views

 

Statistics

Views

Total Views
145
Views on SlideShare
144
Embed Views
1

Actions

Likes
0
Downloads
4
Comments
0

1 Embed 1

http://www.slideee.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Phonegap 120118153629-phpapp01 Presentation 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