• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Phonegap - Framework Mobile
 

Phonegap - Framework Mobile

on

  • 815 views

Slides do meu artigo sobre o Phonegap. www.devmartins.com

Slides do meu artigo sobre o Phonegap. www.devmartins.com

Statistics

Views

Total Views
815
Views on SlideShare
624
Embed Views
191

Actions

Likes
1
Downloads
33
Comments
0

1 Embed 191

http://www.devmartins.com 191

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 - Framework Mobile Phonegap - Framework Mobile Presentation Transcript

    • PhoneGapO que é fácil é melhor! Ildyone Martins
    • O que é o PhoneGap?Phonegap é um framework para desenvolvimentode aplicações mobile (iOS, Android, etc). Opensource e free, mantido por voluntários eempresas como Adobe, IBM, RIM e Microsoft.
    • Quais as dificuldades para desenvolvimento mobile?● 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)● Dificuldade em adequar a aplicação a 300 milhões de resoluções de telas (Android 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>
    • 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
    • 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;
    • 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, AndroidProject que o aplicativo será aberto no emulador do Android.
    • Ao clicar no botão um alert irá aparecer.
    • Thank you! Phonegap.com Ildyone Martins @devmartins / devmartins.com