Phonegap 120118153629-phpapp01

PhoneGapO 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

#comofaz?

Um hello world!

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>


● 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


● 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 120118153629-phpapp01

Software

Transcript of Phonegap 120118153629-phpapp01