PhoneGap: Uma introdução ao framework para desenvolvimento mobile híbrido

PhoneGap
O que é fácil é melhor!
Ildyone Martins

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.

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)

A solução!!
PhoneGap!
HTML5 + CSS + Javascript

Com o Eclipse instalado e
configurado.
● Crie um novo projeto

Defina o nome do projeto como
“hello”

Escolha a versão do android que a
aplicação será disponibilizada

Informe o nome do package da app

Alguns passos para configurar o
projeto
● Crie a pasta assets/www
● Crie a pasta libs
● Crie um arquivo index.html em assets/www

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>

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

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;

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" />

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>

E finalmente, clique no projeto com o botão direito, Run as, Android
Project que o aplicativo será aberto no emulador do Android.

Ao clicar no botão um alert irá aparecer.

Thank you!
Ildyone Martins
@devmartins / devmartins.com
Phonegap.com

PhoneGap: Uma introdução ao framework para desenvolvimento mobile híbrido

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a PhoneGap: Uma introdução ao framework para desenvolvimento mobile híbrido

Semelhante a PhoneGap: Uma introdução ao framework para desenvolvimento mobile híbrido (20)

Mais de TrioBlack Trioblack

Mais de TrioBlack Trioblack (14)

PhoneGap: Uma introdução ao framework para desenvolvimento mobile híbrido