SlideShare uma empresa Scribd logo
1 de 19
Baixar para ler offline
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?
●   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, Android
Project 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

Mais conteúdo relacionado

Mais procurados

Hybrid app phonegap angular ionic
Hybrid app   phonegap angular ionicHybrid app   phonegap angular ionic
Hybrid app phonegap angular ionicJoelmir Ribacki
 
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
[Curso Phonegap / Cordova] Aula 01: Introdução ao PhonegapLoiane Groner
 
PhoneGap - Criando aplicações Android e iOS com HTML5
PhoneGap - Criando aplicações Android e iOS com HTML5PhoneGap - Criando aplicações Android e iOS com HTML5
PhoneGap - Criando aplicações Android e iOS com HTML5Rodrigo Cascarrolho
 
Mini curso - Ionic Framework
Mini curso - Ionic FrameworkMini curso - Ionic Framework
Mini curso - Ionic Frameworkjuniorschroder
 
Palestra UFPR - Intro Ionic framework + WordPress
Palestra UFPR - Intro Ionic framework + WordPressPalestra UFPR - Intro Ionic framework + WordPress
Palestra UFPR - Intro Ionic framework + WordPressRômulo Zoch
 
Desenvolvendo APPs Com Angular.JS + Cordova
Desenvolvendo APPs Com Angular.JS �+ CordovaDesenvolvendo APPs Com Angular.JS �+ Cordova
Desenvolvendo APPs Com Angular.JS + CordovaGustavo Costa
 
Ionic Framework - Configuração do ambiente e a criação da primeira APP
Ionic Framework - Configuração do ambiente e a criação da primeira APPIonic Framework - Configuração do ambiente e a criação da primeira APP
Ionic Framework - Configuração do ambiente e a criação da primeira APPFabio Godoy
 
Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)Wennder Santos
 
SESTINFO 2011 Apresentacao Android
SESTINFO 2011 Apresentacao AndroidSESTINFO 2011 Apresentacao Android
SESTINFO 2011 Apresentacao AndroidRafael Sakurai
 
PhoneGap - criando aplicações Android e iOS com HTML5
PhoneGap - criando aplicações Android e iOS com HTML5PhoneGap - criando aplicações Android e iOS com HTML5
PhoneGap - criando aplicações Android e iOS com HTML5Rafael Sakurai
 
FirefoxOS - a web como plataforma
FirefoxOS - a web como plataformaFirefoxOS - a web como plataforma
FirefoxOS - a web como plataformaGuilherme Farias
 
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Daniel Makiyama
 
Phonegap, muito além dos nativos!
Phonegap, muito além dos nativos!Phonegap, muito além dos nativos!
Phonegap, muito além dos nativos!Luiz Gavinho
 
Usando PushWoosh com Ionic Framework
Usando PushWoosh com Ionic FrameworkUsando PushWoosh com Ionic Framework
Usando PushWoosh com Ionic FrameworkEmerson Thompson
 
Introdução ao PhoneGap e Sencha Touch
Introdução ao PhoneGap e Sencha TouchIntrodução ao PhoneGap e Sencha Touch
Introdução ao PhoneGap e Sencha TouchRafael Neri
 
Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...
Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...
Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...Cássio Nandi Citadin
 
TDC2016POA | Trilha Web - Front-end that scales
TDC2016POA | Trilha Web - Front-end that scalesTDC2016POA | Trilha Web - Front-end that scales
TDC2016POA | Trilha Web - Front-end that scalestdc-globalcode
 

Mais procurados (20)

Hybrid app phonegap angular ionic
Hybrid app   phonegap angular ionicHybrid app   phonegap angular ionic
Hybrid app phonegap angular ionic
 
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
 
Conhecendo o PhoneGap
Conhecendo o PhoneGapConhecendo o PhoneGap
Conhecendo o PhoneGap
 
PhoneGap - Criando aplicações Android e iOS com HTML5
PhoneGap - Criando aplicações Android e iOS com HTML5PhoneGap - Criando aplicações Android e iOS com HTML5
PhoneGap - Criando aplicações Android e iOS com HTML5
 
Mini curso - Ionic Framework
Mini curso - Ionic FrameworkMini curso - Ionic Framework
Mini curso - Ionic Framework
 
Palestra UFPR - Intro Ionic framework + WordPress
Palestra UFPR - Intro Ionic framework + WordPressPalestra UFPR - Intro Ionic framework + WordPress
Palestra UFPR - Intro Ionic framework + WordPress
 
Desenvolvendo APPs Com Angular.JS + Cordova
Desenvolvendo APPs Com Angular.JS �+ CordovaDesenvolvendo APPs Com Angular.JS �+ Cordova
Desenvolvendo APPs Com Angular.JS + Cordova
 
Workshop - Ionic + firebase
Workshop - Ionic + firebaseWorkshop - Ionic + firebase
Workshop - Ionic + firebase
 
Ionic Framework - Configuração do ambiente e a criação da primeira APP
Ionic Framework - Configuração do ambiente e a criação da primeira APPIonic Framework - Configuração do ambiente e a criação da primeira APP
Ionic Framework - Configuração do ambiente e a criação da primeira APP
 
Firefox OS
Firefox OSFirefox OS
Firefox OS
 
Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)
 
SESTINFO 2011 Apresentacao Android
SESTINFO 2011 Apresentacao AndroidSESTINFO 2011 Apresentacao Android
SESTINFO 2011 Apresentacao Android
 
PhoneGap - criando aplicações Android e iOS com HTML5
PhoneGap - criando aplicações Android e iOS com HTML5PhoneGap - criando aplicações Android e iOS com HTML5
PhoneGap - criando aplicações Android e iOS com HTML5
 
FirefoxOS - a web como plataforma
FirefoxOS - a web como plataformaFirefoxOS - a web como plataforma
FirefoxOS - a web como plataforma
 
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
 
Phonegap, muito além dos nativos!
Phonegap, muito além dos nativos!Phonegap, muito além dos nativos!
Phonegap, muito além dos nativos!
 
Usando PushWoosh com Ionic Framework
Usando PushWoosh com Ionic FrameworkUsando PushWoosh com Ionic Framework
Usando PushWoosh com Ionic Framework
 
Introdução ao PhoneGap e Sencha Touch
Introdução ao PhoneGap e Sencha TouchIntrodução ao PhoneGap e Sencha Touch
Introdução ao PhoneGap e Sencha Touch
 
Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...
Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...
Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...
 
TDC2016POA | Trilha Web - Front-end that scales
TDC2016POA | Trilha Web - Front-end that scalesTDC2016POA | Trilha Web - Front-end that scales
TDC2016POA | Trilha Web - Front-end that scales
 

Destaque

Play2be Pitch Deck
Play2be Pitch DeckPlay2be Pitch Deck
Play2be Pitch Deckplay2be
 
Planejamento, execucao e avaliacao no ensino a busca de um desejo luckesi
Planejamento, execucao e avaliacao no ensino a busca de um desejo   luckesiPlanejamento, execucao e avaliacao no ensino a busca de um desejo   luckesi
Planejamento, execucao e avaliacao no ensino a busca de um desejo luckesibarbara martins
 
Cristiane machado avaliação interna
Cristiane machado avaliação internaCristiane machado avaliação interna
Cristiane machado avaliação internabarbara martins
 
Asiakkuus 2014 raportti
Asiakkuus 2014 raporttiAsiakkuus 2014 raportti
Asiakkuus 2014 raporttiASML
 
Slideware project
Slideware projectSlideware project
Slideware projectmaria3542
 
Socialização e formação escolar dubet
Socialização e formação escolar   dubetSocialização e formação escolar   dubet
Socialização e formação escolar dubetbarbara martins
 
Rinaldi francesca 2010-11_esercizio 4
Rinaldi francesca 2010-11_esercizio 4Rinaldi francesca 2010-11_esercizio 4
Rinaldi francesca 2010-11_esercizio 41324567
 
Asiakastieto menestystekijana
Asiakastieto menestystekijanaAsiakastieto menestystekijana
Asiakastieto menestystekijanaASML
 
Digitaalinen asiakkuus asml 11 2012
Digitaalinen asiakkuus asml 11 2012Digitaalinen asiakkuus asml 11 2012
Digitaalinen asiakkuus asml 11 2012ASML
 
Verkkokauppakatsaus ASML joulukuu 2013
Verkkokauppakatsaus ASML joulukuu 2013Verkkokauppakatsaus ASML joulukuu 2013
Verkkokauppakatsaus ASML joulukuu 2013ASML
 
Processo de socialização george simmel geigorowitschs
Processo de socialização george simmel   geigorowitschsProcesso de socialização george simmel   geigorowitschs
Processo de socialização george simmel geigorowitschsbarbara martins
 
The return of an old enemy
The return of an old enemyThe return of an old enemy
The return of an old enemyDonSchado
 
Asiakasviestintä 2016 raportti
Asiakasviestintä 2016 raporttiAsiakasviestintä 2016 raportti
Asiakasviestintä 2016 raporttiASML
 
SLIDECAST: Techniki przetwarzania mediów cyfrowych - Tomasz Łoś
SLIDECAST: Techniki przetwarzania mediów cyfrowych - Tomasz ŁośSLIDECAST: Techniki przetwarzania mediów cyfrowych - Tomasz Łoś
SLIDECAST: Techniki przetwarzania mediów cyfrowych - Tomasz ŁośTomasz Łoś
 
Decorator & Presenter Design Pattern
Decorator & Presenter Design PatternDecorator & Presenter Design Pattern
Decorator & Presenter Design PatternDonSchado
 
Eu tietosuoja system error asml
Eu tietosuoja system error asmlEu tietosuoja system error asml
Eu tietosuoja system error asmlASML
 
Luottamus liiketoiminnassa 2014_asml-avaus
Luottamus liiketoiminnassa 2014_asml-avausLuottamus liiketoiminnassa 2014_asml-avaus
Luottamus liiketoiminnassa 2014_asml-avausASML
 
Loyalty world 2012 asml raportti
Loyalty world 2012 asml raporttiLoyalty world 2012 asml raportti
Loyalty world 2012 asml raporttiASML
 

Destaque (18)

Play2be Pitch Deck
Play2be Pitch DeckPlay2be Pitch Deck
Play2be Pitch Deck
 
Planejamento, execucao e avaliacao no ensino a busca de um desejo luckesi
Planejamento, execucao e avaliacao no ensino a busca de um desejo   luckesiPlanejamento, execucao e avaliacao no ensino a busca de um desejo   luckesi
Planejamento, execucao e avaliacao no ensino a busca de um desejo luckesi
 
Cristiane machado avaliação interna
Cristiane machado avaliação internaCristiane machado avaliação interna
Cristiane machado avaliação interna
 
Asiakkuus 2014 raportti
Asiakkuus 2014 raporttiAsiakkuus 2014 raportti
Asiakkuus 2014 raportti
 
Slideware project
Slideware projectSlideware project
Slideware project
 
Socialização e formação escolar dubet
Socialização e formação escolar   dubetSocialização e formação escolar   dubet
Socialização e formação escolar dubet
 
Rinaldi francesca 2010-11_esercizio 4
Rinaldi francesca 2010-11_esercizio 4Rinaldi francesca 2010-11_esercizio 4
Rinaldi francesca 2010-11_esercizio 4
 
Asiakastieto menestystekijana
Asiakastieto menestystekijanaAsiakastieto menestystekijana
Asiakastieto menestystekijana
 
Digitaalinen asiakkuus asml 11 2012
Digitaalinen asiakkuus asml 11 2012Digitaalinen asiakkuus asml 11 2012
Digitaalinen asiakkuus asml 11 2012
 
Verkkokauppakatsaus ASML joulukuu 2013
Verkkokauppakatsaus ASML joulukuu 2013Verkkokauppakatsaus ASML joulukuu 2013
Verkkokauppakatsaus ASML joulukuu 2013
 
Processo de socialização george simmel geigorowitschs
Processo de socialização george simmel   geigorowitschsProcesso de socialização george simmel   geigorowitschs
Processo de socialização george simmel geigorowitschs
 
The return of an old enemy
The return of an old enemyThe return of an old enemy
The return of an old enemy
 
Asiakasviestintä 2016 raportti
Asiakasviestintä 2016 raporttiAsiakasviestintä 2016 raportti
Asiakasviestintä 2016 raportti
 
SLIDECAST: Techniki przetwarzania mediów cyfrowych - Tomasz Łoś
SLIDECAST: Techniki przetwarzania mediów cyfrowych - Tomasz ŁośSLIDECAST: Techniki przetwarzania mediów cyfrowych - Tomasz Łoś
SLIDECAST: Techniki przetwarzania mediów cyfrowych - Tomasz Łoś
 
Decorator & Presenter Design Pattern
Decorator & Presenter Design PatternDecorator & Presenter Design Pattern
Decorator & Presenter Design Pattern
 
Eu tietosuoja system error asml
Eu tietosuoja system error asmlEu tietosuoja system error asml
Eu tietosuoja system error asml
 
Luottamus liiketoiminnassa 2014_asml-avaus
Luottamus liiketoiminnassa 2014_asml-avausLuottamus liiketoiminnassa 2014_asml-avaus
Luottamus liiketoiminnassa 2014_asml-avaus
 
Loyalty world 2012 asml raportti
Loyalty world 2012 asml raporttiLoyalty world 2012 asml raportti
Loyalty world 2012 asml raportti
 

Semelhante a Phonegap - Framework Mobile

Introdução a Plataforma Android
Introdução a Plataforma AndroidIntrodução a Plataforma Android
Introdução a Plataforma AndroidÉdipo Souza
 
Desenvolvendo para Android
Desenvolvendo para AndroidDesenvolvendo para Android
Desenvolvendo para AndroidClaudio Pereira
 
Minicurso de Android
Minicurso de AndroidMinicurso de Android
Minicurso de AndroidEdgar Eler
 
Programação Android Phonegap 1
Programação Android Phonegap 1Programação Android Phonegap 1
Programação Android Phonegap 1Adilmar Dantas
 
2017 08-11 - Androidos V - Minicurso - Introdução ao android
2017 08-11 - Androidos V - Minicurso - Introdução ao android2017 08-11 - Androidos V - Minicurso - Introdução ao android
2017 08-11 - Androidos V - Minicurso - Introdução ao androidMessias Batista
 
Curso de android
Curso de androidCurso de android
Curso de androidflaviokreis
 
Aula Aula03 estrutura phone_gap
Aula Aula03 estrutura phone_gapAula Aula03 estrutura phone_gap
Aula Aula03 estrutura phone_gapRoberson Alves
 
Apresentacao android por Júlio Cesar Bueno Cotta
Apresentacao android por Júlio Cesar Bueno CottaApresentacao android por Júlio Cesar Bueno Cotta
Apresentacao android por Júlio Cesar Bueno CottaGPrimola
 
Chega de lendas! JavaFX em Android
Chega de lendas! JavaFX em AndroidChega de lendas! JavaFX em Android
Chega de lendas! JavaFX em AndroidBruno Oliveira
 
Introdução ao android
Introdução ao androidIntrodução ao android
Introdução ao androidPaulo Remoli
 
Introdução ao Android (minicurso 4h)
Introdução ao Android (minicurso 4h)Introdução ao Android (minicurso 4h)
Introdução ao Android (minicurso 4h)Rodrigo Rocha
 
Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_Rodrigo Urubatan
 

Semelhante a Phonegap - Framework Mobile (20)

Phonegap 120118153629-phpapp01
Phonegap 120118153629-phpapp01Phonegap 120118153629-phpapp01
Phonegap 120118153629-phpapp01
 
Introdução a Plataforma Android
Introdução a Plataforma AndroidIntrodução a Plataforma Android
Introdução a Plataforma Android
 
Apresentação Google Android
Apresentação Google AndroidApresentação Google Android
Apresentação Google Android
 
Introdução ao Android
Introdução ao AndroidIntrodução ao Android
Introdução ao Android
 
Desenvolvendo para Android
Desenvolvendo para AndroidDesenvolvendo para Android
Desenvolvendo para Android
 
Minicurso de Android
Minicurso de AndroidMinicurso de Android
Minicurso de Android
 
Programação Android Phonegap 1
Programação Android Phonegap 1Programação Android Phonegap 1
Programação Android Phonegap 1
 
2017 08-11 - Androidos V - Minicurso - Introdução ao android
2017 08-11 - Androidos V - Minicurso - Introdução ao android2017 08-11 - Androidos V - Minicurso - Introdução ao android
2017 08-11 - Androidos V - Minicurso - Introdução ao android
 
Empreendedori$mo com Android
Empreendedori$mo com AndroidEmpreendedori$mo com Android
Empreendedori$mo com Android
 
Android
AndroidAndroid
Android
 
Android FREETEC
Android FREETECAndroid FREETEC
Android FREETEC
 
Mulheres na tecnologia 2015
Mulheres na tecnologia 2015Mulheres na tecnologia 2015
Mulheres na tecnologia 2015
 
Curso de android
Curso de androidCurso de android
Curso de android
 
Aula Aula03 estrutura phone_gap
Aula Aula03 estrutura phone_gapAula Aula03 estrutura phone_gap
Aula Aula03 estrutura phone_gap
 
Apresentacao android por Júlio Cesar Bueno Cotta
Apresentacao android por Júlio Cesar Bueno CottaApresentacao android por Júlio Cesar Bueno Cotta
Apresentacao android por Júlio Cesar Bueno Cotta
 
Chega de lendas! JavaFX em Android
Chega de lendas! JavaFX em AndroidChega de lendas! JavaFX em Android
Chega de lendas! JavaFX em Android
 
Introdução ao android
Introdução ao androidIntrodução ao android
Introdução ao android
 
Introdução ao Android (minicurso 4h)
Introdução ao Android (minicurso 4h)Introdução ao Android (minicurso 4h)
Introdução ao Android (minicurso 4h)
 
Android - Notas de aula
Android - Notas de aulaAndroid - Notas de aula
Android - Notas de aula
 
Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_
 

Phonegap - Framework Mobile

  • 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? ● 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) :(
  • 4. A solução!! PhoneGap! HTML5 + CSS + Javascript
  • 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! Phonegap.com Ildyone Martins @devmartins / devmartins.com