SlideShare uma empresa Scribd logo
DESENVOLVIMENTO DE
APLICATIVOS MOBILES
UTILIZANDO A PLATAFORMA PHONEGAP BUILD
ADILMAR COELHO DANTAS
MESTRANDO EM CIÊNCIA DA COMPUTAÇÃO
INTRODUÇÃO
PhoneGap é uma plataforma para desenvolvimento de
aplicativos móveis em código aberto. Ela utiliza-se da
tecnologia Apache Cordova para acessar a funções dos
aparelhos móveis como acelerômetro, câmera e
geolocalização. Além disso, permite que os desenvolvedores
criem aplicações utilizando HTML5, CSS3 e JavaScript,
sem a necessidade de depender de APIs específicas. Os
aplicativos criados são compatíveis com iOS, Windows
Phone e Android.
INTRODUÇÃO
A plataforma phonegap pode ser utilizada de duas maneiras:
• Integrado a sua SDK (Plataforma de Desenvolvimento)
• De forma hibrida através da plataforma web phonegap
build, abordada nesta aula.
PASSO 1 - CADASTRO
• Para ter acesso a plataforma é necessário um cadastro.
• Link: https://build.phonegap.com/
• Faça seu cadastro na plataforma ou conecte-se com alguma
das redes sociais a Adobe.
PASSO 2 - SDK
Definir a plataforma de programação web de sua preferência.
Para isso, temos algumas sugestões:
• Notepad ++
• Eclipse
• Adobe Dreamweaver
• Ou qualquer outra plataforma de sua preferência, que
permita o desenvolvimento web.
PASSO 3 - PROJETO
Agora que temos a plataforma definida, devemos iniciar
nosso projeto móbile, mas algumas observações devem ser
lavadas em consideração, são elas:
• Responsividade da Aplicação;
• Quais recursos utilizar do dispositivo (internet, dados,
GPS, câmera);
• Configuração da aplicação para compilação no phonegap
build.
PASSO 4 - RESPONSIVIDADE
A responsividade é um novo padrão de desenvolvimento,
que tem como objetivo garantir que as aplicações web
comportem-se da mesma maneira em diferentes dispositivos,
através das seguintes tecnologias:
• HTML5
• CSS
• JAVA SCRIPT
PASSO 5 - RESPONSIVIDADE
Para garantir essa responsividade vamos utilizar a biblioteca
Jquery Móbile, para garantir que nossa aplicação execute de
forma responsiva e integrada com os dispositivos móbiles. Para
isso você pode usar um tema predefinido por algum
desenvolvedor ou personalizar seu próprio tema, veja:
• Desenvolva seu próprio tema - http://themeroller.jquerymobile.com/
PASSO 6 - TEMAS
Nesta tela é exibido o painel de
personalização do seu tema.
Através dele é possível personalizar
características como: fonte, cores,
em três templates distintos A,B,C.
Exercício – Desenvolva seu próprio
template, com a finalidade de buscar
supermercados em sua cidade.
SEJA CRIATIVO (A)!
• Construindo seu próprio tema:
• Salvando seu tema:
No menu superior selecione:
Download Theme zip file.
Em seguida, dê um nome ao
seu tema e faça o download.
PASSO 7- TEMAS
• Preparando seu projeto
Extraia o arquivo zip
Abra o index.html
*Se for exibido o seu tema “A”,
conforme o passo anterior, seus
arquivos estão configurados
corretamente.
PASSO 8- PROJETO
PASSO 9 – SERVIDOR WEB APACHE
XAMPP é um servidor independente de plataforma, software
livre, que consiste principalmente na base de dados MySQL,
servidor web Apache e os interpretadores para linguagens de
script: PHP e Perl.
Faça o download e instalação do mesmo
https://www.apachefriends.org/pt_br/index.html
PASSO 10 – CONFIGURANDO O XAMPP
Após a instalação acesse o seguinte diretório: c:xampphtdocs
Delete os arquivos existentes neste diretório
Copie os arquivos referentes ao seu tema para este diretório
Acesse o painel xampp em programas e inicie o apache.
PASSO 11 – CONFIGURANDO O XAMPP
Do seu navegador acessa a seguinte url: localhost
Será exibido a mesma tela do tema, dessa forma, seu
servidor está configurado para simular a aplicação web.
Abra o index.html em sua plataforma de desenvolvimento,
de sua escolha, para realizarmos a edição.
PASSO 12 – CRIANDO O APP
Edite sua aplicação para que a mesma fique o mais similar com esta:
<div data-role="content" data-theme="a"> <p>Bem vindo(a) selecione o bairro mais
proximo</p> <a href="santamonica.html" data-role="button" data-
theme="b"><img src="images/c1.png"/><br>Santa Mônica</a> <a
href="granada.html" data-role="button" data-theme="b"><img
src="images/c2.png"/><br>Granada</a> <a href="luizote.html" data-
role="button" data-theme="b"><img src="images/c1.png"/><br>Luizote</a> <a
href="tibery.html" data-role="button" data-theme="b"><img
src="images/c2.png"/><br>Tibery</a> </div>
Codificação completa em: https://github.com/Adilmar/Phonegap
PASSO 13 – CRIANDO O APP
Segunda tela -> Listagem de supermercados por bairros
<tr>
<td><img src="images/valor.jpg" width="60px"/></td> <td><h3>Valor
Supermecado</h3></td> </tr> <tr> <td><strong>Endereço</strong></td> <td>rua
teste teste </td> </tr> <tr> <td><strong>Telefone</strong></td> <td>(34) 3232-
3244</td> </tr> <tr> <td><strong>Mapa</strong></td> <td>&nbsp;</td>
</tr>
Codificação completa em: https://github.com/Adilmar/Phonegap
PASSO 14 – CRIANDO O APP
Teste a aplicação no navegador através da url: localhost
PASSO 15 – CONFIGURANDO O APP
Agora que temos nossa aplicação desenvolvida, é necessário algumas
configurações para que seja possível compila-la no PhoneGap Buil.
A primeira configuração, é mais importante, é o arquivo config.xml
Este arquivo contém as configurações necessárias para que sua
aplicação seja compilada de forma correta.
O arquivo config.xml necessário encontra-se em
Codificação completa em: https://github.com/Adilmar/Phonegap
PASSO 16 – CONFIGURANDO O APP
Vamos entender melhor o arquivo config.xml
id = "com.emp.market“ <!– nome do pacote em que o mesmo sera instalado no aparelho -->
<!--nome do seu aplicativo -->
<name>Market App</name>
<!-- Core plugins ou seja quais recursos do aparelho que você precisa -->
<gap:plugin name="org.apache.cordova.battery-status" />
<!-- icones para as plataformas -->
<icon src="icon.png" />
PASSO 17 – CONFIGURANDO O APP
Feito o arquivo config.xml, salve-o no mesmo diretório do
index.html, em c:xampphtdocs
Construa um ícone com as mesmas medidas do modelo em
anexo e salve o mesmo na raiz, com o nome icon.png
Veja o exemplo do ícone abaixo:
PASSO 18 – PREPARANDO PARA COMPILAR
Verifique se no diretório c:xampphtdocs existe a mesma
estrutura.
O próximo passo é configurar a plataforma web,
mas faremos isso na próxima aula!
SOBRE E CONTATOS
Site: www.adilmar.com.br
Email: akanehar@gmail.com
Lattes: http://lattes.cnpq.br/2462384793631673

Mais conteúdo relacionado

Mais procurados

Utilização do JDB Framework para agilizar o desenvolvimento em Java Desktop
Utilização do JDB Framework para agilizar o desenvolvimento em Java DesktopUtilização do JDB Framework para agilizar o desenvolvimento em Java Desktop
Utilização do JDB Framework para agilizar o desenvolvimento em Java Desktop
Felipe Torres
 
Manual Joomla 1.5
 Manual Joomla 1.5 Manual Joomla 1.5
Manual Joomla 1.5
Nuno Pereira
 
Literacia da informacao
Literacia da informacaoLiteracia da informacao
Literacia da informacao
jccaaparicio
 
Responsive Web Design - Introdução
Responsive Web Design - IntroduçãoResponsive Web Design - Introdução
Responsive Web Design - Introdução
Vítor Teixeira
 
Mini curso introdutório ao Django
Mini curso introdutório ao DjangoMini curso introdutório ao Django
Mini curso introdutório ao Django
Vinicius Mendes
 
Workshop de Web Components
Workshop de Web ComponentsWorkshop de Web Components
Workshop de Web Components
Guilherme Ventura
 
Softwares para desenvolvimento web (KompoZer)
Softwares para desenvolvimento web (KompoZer)Softwares para desenvolvimento web (KompoZer)
Softwares para desenvolvimento web (KompoZer)
Tuesla Santos
 
Wordpress e suas funções
Wordpress e suas funçõesWordpress e suas funções
Wordpress e suas funções
Daniel Marcos
 
WordPress SEO - SearchLabs 2010
WordPress SEO - SearchLabs 2010WordPress SEO - SearchLabs 2010
WordPress SEO - SearchLabs 2010
Guga Alves
 

Mais procurados (9)

Utilização do JDB Framework para agilizar o desenvolvimento em Java Desktop
Utilização do JDB Framework para agilizar o desenvolvimento em Java DesktopUtilização do JDB Framework para agilizar o desenvolvimento em Java Desktop
Utilização do JDB Framework para agilizar o desenvolvimento em Java Desktop
 
Manual Joomla 1.5
 Manual Joomla 1.5 Manual Joomla 1.5
Manual Joomla 1.5
 
Literacia da informacao
Literacia da informacaoLiteracia da informacao
Literacia da informacao
 
Responsive Web Design - Introdução
Responsive Web Design - IntroduçãoResponsive Web Design - Introdução
Responsive Web Design - Introdução
 
Mini curso introdutório ao Django
Mini curso introdutório ao DjangoMini curso introdutório ao Django
Mini curso introdutório ao Django
 
Workshop de Web Components
Workshop de Web ComponentsWorkshop de Web Components
Workshop de Web Components
 
Softwares para desenvolvimento web (KompoZer)
Softwares para desenvolvimento web (KompoZer)Softwares para desenvolvimento web (KompoZer)
Softwares para desenvolvimento web (KompoZer)
 
Wordpress e suas funções
Wordpress e suas funçõesWordpress e suas funções
Wordpress e suas funções
 
WordPress SEO - SearchLabs 2010
WordPress SEO - SearchLabs 2010WordPress SEO - SearchLabs 2010
WordPress SEO - SearchLabs 2010
 

Semelhante a Programação Android Phonegap 1

Phonegap - Framework Mobile
Phonegap - Framework MobilePhonegap - Framework Mobile
Phonegap - Framework Mobile
Ildyone Martins
 
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
 
Desenvolvimento Web Parte I
Desenvolvimento Web Parte IDesenvolvimento Web Parte I
Desenvolvimento Web Parte I
igorpimentel
 
PhoneGap
PhoneGapPhoneGap
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Diego Cavalca
 
Apresentação realidade aumentada para aplicações web e mobile
Apresentação   realidade aumentada para aplicações web e mobileApresentação   realidade aumentada para aplicações web e mobile
Apresentação realidade aumentada para aplicações web e mobile
RWTH Aachen University
 
O que você faz para ser Mobile? TDC2013
O que você faz para ser Mobile? TDC2013O que você faz para ser Mobile? TDC2013
O que você faz para ser Mobile? TDC2013
Jackson F. de A. Mafra
 
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open WebNovo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Leonardo Balter
 
Conhecendo o PhoneGap
Conhecendo o PhoneGapConhecendo o PhoneGap
Conhecendo o PhoneGap
Cristiano Gomes
 
Raymundo ferreira desenvolvendo apps com html e java script no windows phon...
Raymundo ferreira   desenvolvendo apps com html e java script no windows phon...Raymundo ferreira   desenvolvendo apps com html e java script no windows phon...
Raymundo ferreira desenvolvendo apps com html e java script no windows phon...
INdT
 
Android
AndroidAndroid
App CrossMobile com C# para Android, Iphone e WindowsPhone
App CrossMobile com C# para Android, Iphone e WindowsPhoneApp CrossMobile com C# para Android, Iphone e WindowsPhone
App CrossMobile com C# para Android, Iphone e WindowsPhone
Alessandro Binhara
 
Phonegap 120118153629-phpapp01
Phonegap 120118153629-phpapp01Phonegap 120118153629-phpapp01
Phonegap 120118153629-phpapp01
TrioBlack Trioblack
 
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerry
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerryDesenvolvimento HTML5 para Smartphones e Tablets BlackBerry
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerry
felipebzr
 
Progressive Web Apps - MeetUp MobileDevBH
Progressive Web Apps - MeetUp MobileDevBHProgressive Web Apps - MeetUp MobileDevBH
Progressive Web Apps - MeetUp MobileDevBH
Rafael Schettino
 
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicCurso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Felipe Blini
 
Cake Php
Cake PhpCake Php
Cake Php
Laura Lopes
 
Alta Performance em Aplicações Web
Alta Performance em Aplicações WebAlta Performance em Aplicações Web
Alta Performance em Aplicações Web
Anderson Aguiar
 
Mobile First e Offline First
Mobile First e Offline FirstMobile First e Offline First
Mobile First e Offline First
Dan Vitoriano
 
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
Rafael Sakurai
 

Semelhante a Programação Android Phonegap 1 (20)

Phonegap - Framework Mobile
Phonegap - Framework MobilePhonegap - Framework Mobile
Phonegap - Framework Mobile
 
Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_
 
Desenvolvimento Web Parte I
Desenvolvimento Web Parte IDesenvolvimento Web Parte I
Desenvolvimento Web Parte I
 
PhoneGap
PhoneGapPhoneGap
PhoneGap
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec Cafelândia
 
Apresentação realidade aumentada para aplicações web e mobile
Apresentação   realidade aumentada para aplicações web e mobileApresentação   realidade aumentada para aplicações web e mobile
Apresentação realidade aumentada para aplicações web e mobile
 
O que você faz para ser Mobile? TDC2013
O que você faz para ser Mobile? TDC2013O que você faz para ser Mobile? TDC2013
O que você faz para ser Mobile? TDC2013
 
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open WebNovo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
 
Conhecendo o PhoneGap
Conhecendo o PhoneGapConhecendo o PhoneGap
Conhecendo o PhoneGap
 
Raymundo ferreira desenvolvendo apps com html e java script no windows phon...
Raymundo ferreira   desenvolvendo apps com html e java script no windows phon...Raymundo ferreira   desenvolvendo apps com html e java script no windows phon...
Raymundo ferreira desenvolvendo apps com html e java script no windows phon...
 
Android
AndroidAndroid
Android
 
App CrossMobile com C# para Android, Iphone e WindowsPhone
App CrossMobile com C# para Android, Iphone e WindowsPhoneApp CrossMobile com C# para Android, Iphone e WindowsPhone
App CrossMobile com C# para Android, Iphone e WindowsPhone
 
Phonegap 120118153629-phpapp01
Phonegap 120118153629-phpapp01Phonegap 120118153629-phpapp01
Phonegap 120118153629-phpapp01
 
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerry
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerryDesenvolvimento HTML5 para Smartphones e Tablets BlackBerry
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerry
 
Progressive Web Apps - MeetUp MobileDevBH
Progressive Web Apps - MeetUp MobileDevBHProgressive Web Apps - MeetUp MobileDevBH
Progressive Web Apps - MeetUp MobileDevBH
 
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicCurso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
 
Cake Php
Cake PhpCake Php
Cake Php
 
Alta Performance em Aplicações Web
Alta Performance em Aplicações WebAlta Performance em Aplicações Web
Alta Performance em Aplicações Web
 
Mobile First e Offline First
Mobile First e Offline FirstMobile First e Offline First
Mobile First e Offline First
 
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
 

Mais de Adilmar Dantas

Querying nosql stores
Querying nosql storesQuerying nosql stores
Querying nosql stores
Adilmar Dantas
 
APLICATIVO MÓVEL PARA AFERIÇÃO DA FREQUÊNCIA CARDÍACA E ACOMPANHAMENTO MÉDICO...
APLICATIVO MÓVEL PARA AFERIÇÃO DA FREQUÊNCIA CARDÍACA E ACOMPANHAMENTO MÉDICO...APLICATIVO MÓVEL PARA AFERIÇÃO DA FREQUÊNCIA CARDÍACA E ACOMPANHAMENTO MÉDICO...
APLICATIVO MÓVEL PARA AFERIÇÃO DA FREQUÊNCIA CARDÍACA E ACOMPANHAMENTO MÉDICO...
Adilmar Dantas
 
Potenciação Divide and Conquer
Potenciação Divide and ConquerPotenciação Divide and Conquer
Potenciação Divide and Conquer
Adilmar Dantas
 
Cinta de expansão torácica utilizando Arduino aplicado na fisioterapia respir...
Cinta de expansão torácica utilizando Arduino aplicado na fisioterapia respir...Cinta de expansão torácica utilizando Arduino aplicado na fisioterapia respir...
Cinta de expansão torácica utilizando Arduino aplicado na fisioterapia respir...
Adilmar Dantas
 
Análise de Técnicas Computacionais para Classificação de Emoções
Análise de Técnicas Computacionais para Classificação de EmoçõesAnálise de Técnicas Computacionais para Classificação de Emoções
Análise de Técnicas Computacionais para Classificação de Emoções
Adilmar Dantas
 
Reconhecimento Automático de Emoções
Reconhecimento Automático de EmoçõesReconhecimento Automático de Emoções
Reconhecimento Automático de Emoções
Adilmar Dantas
 
Reconhecimento automático de emoções
Reconhecimento automático de emoçõesReconhecimento automático de emoções
Reconhecimento automático de emoções
Adilmar Dantas
 
Detecção de Faces - Redes Neurais *MLP
Detecção de Faces - Redes Neurais *MLPDetecção de Faces - Redes Neurais *MLP
Detecção de Faces - Redes Neurais *MLP
Adilmar Dantas
 
Rede Neural MLP para reconhecimento de Faces
Rede Neural MLP para reconhecimento de FacesRede Neural MLP para reconhecimento de Faces
Rede Neural MLP para reconhecimento de Faces
Adilmar Dantas
 
ALgoritmo Genético - Escalonamento
ALgoritmo Genético - EscalonamentoALgoritmo Genético - Escalonamento
ALgoritmo Genético - Escalonamento
Adilmar Dantas
 
BIODATA: SOFTWARE WEB PARA GERENCIAMENTO DE COLETA DE DADOS BIOMÉDICOS
BIODATA: SOFTWARE WEB PARA GERENCIAMENTO DE COLETA DE DADOS BIOMÉDICOSBIODATA: SOFTWARE WEB PARA GERENCIAMENTO DE COLETA DE DADOS BIOMÉDICOS
BIODATA: SOFTWARE WEB PARA GERENCIAMENTO DE COLETA DE DADOS BIOMÉDICOS
Adilmar Dantas
 
Alinhamento de Sequencia DNA
Alinhamento de Sequencia DNAAlinhamento de Sequencia DNA
Alinhamento de Sequencia DNA
Adilmar Dantas
 
3ª maratona de games – facom ufu
3ª maratona de games – facom  ufu3ª maratona de games – facom  ufu
3ª maratona de games – facom ufu
Adilmar Dantas
 
Monitor Cardíaco usando Arduino
Monitor Cardíaco usando Arduino Monitor Cardíaco usando Arduino
Monitor Cardíaco usando Arduino
Adilmar Dantas
 
Algoritmo clique maximo - Analise de Algoritmos
Algoritmo clique maximo  - Analise de AlgoritmosAlgoritmo clique maximo  - Analise de Algoritmos
Algoritmo clique maximo - Analise de Algoritmos
Adilmar Dantas
 
Servidores Web
Servidores WebServidores Web
Servidores Web
Adilmar Dantas
 
TCC: WebLab Laboratório de Experimentação Remota
TCC: WebLab Laboratório de Experimentação RemotaTCC: WebLab Laboratório de Experimentação Remota
TCC: WebLab Laboratório de Experimentação Remota
Adilmar Dantas
 
Weblab TCC
Weblab TCCWeblab TCC
Weblab TCC
Adilmar Dantas
 
Engenharia de software testes
Engenharia de software  testesEngenharia de software  testes
Engenharia de software testes
Adilmar Dantas
 
Qualidade de Software Web
Qualidade de Software WebQualidade de Software Web
Qualidade de Software Web
Adilmar Dantas
 

Mais de Adilmar Dantas (20)

Querying nosql stores
Querying nosql storesQuerying nosql stores
Querying nosql stores
 
APLICATIVO MÓVEL PARA AFERIÇÃO DA FREQUÊNCIA CARDÍACA E ACOMPANHAMENTO MÉDICO...
APLICATIVO MÓVEL PARA AFERIÇÃO DA FREQUÊNCIA CARDÍACA E ACOMPANHAMENTO MÉDICO...APLICATIVO MÓVEL PARA AFERIÇÃO DA FREQUÊNCIA CARDÍACA E ACOMPANHAMENTO MÉDICO...
APLICATIVO MÓVEL PARA AFERIÇÃO DA FREQUÊNCIA CARDÍACA E ACOMPANHAMENTO MÉDICO...
 
Potenciação Divide and Conquer
Potenciação Divide and ConquerPotenciação Divide and Conquer
Potenciação Divide and Conquer
 
Cinta de expansão torácica utilizando Arduino aplicado na fisioterapia respir...
Cinta de expansão torácica utilizando Arduino aplicado na fisioterapia respir...Cinta de expansão torácica utilizando Arduino aplicado na fisioterapia respir...
Cinta de expansão torácica utilizando Arduino aplicado na fisioterapia respir...
 
Análise de Técnicas Computacionais para Classificação de Emoções
Análise de Técnicas Computacionais para Classificação de EmoçõesAnálise de Técnicas Computacionais para Classificação de Emoções
Análise de Técnicas Computacionais para Classificação de Emoções
 
Reconhecimento Automático de Emoções
Reconhecimento Automático de EmoçõesReconhecimento Automático de Emoções
Reconhecimento Automático de Emoções
 
Reconhecimento automático de emoções
Reconhecimento automático de emoçõesReconhecimento automático de emoções
Reconhecimento automático de emoções
 
Detecção de Faces - Redes Neurais *MLP
Detecção de Faces - Redes Neurais *MLPDetecção de Faces - Redes Neurais *MLP
Detecção de Faces - Redes Neurais *MLP
 
Rede Neural MLP para reconhecimento de Faces
Rede Neural MLP para reconhecimento de FacesRede Neural MLP para reconhecimento de Faces
Rede Neural MLP para reconhecimento de Faces
 
ALgoritmo Genético - Escalonamento
ALgoritmo Genético - EscalonamentoALgoritmo Genético - Escalonamento
ALgoritmo Genético - Escalonamento
 
BIODATA: SOFTWARE WEB PARA GERENCIAMENTO DE COLETA DE DADOS BIOMÉDICOS
BIODATA: SOFTWARE WEB PARA GERENCIAMENTO DE COLETA DE DADOS BIOMÉDICOSBIODATA: SOFTWARE WEB PARA GERENCIAMENTO DE COLETA DE DADOS BIOMÉDICOS
BIODATA: SOFTWARE WEB PARA GERENCIAMENTO DE COLETA DE DADOS BIOMÉDICOS
 
Alinhamento de Sequencia DNA
Alinhamento de Sequencia DNAAlinhamento de Sequencia DNA
Alinhamento de Sequencia DNA
 
3ª maratona de games – facom ufu
3ª maratona de games – facom  ufu3ª maratona de games – facom  ufu
3ª maratona de games – facom ufu
 
Monitor Cardíaco usando Arduino
Monitor Cardíaco usando Arduino Monitor Cardíaco usando Arduino
Monitor Cardíaco usando Arduino
 
Algoritmo clique maximo - Analise de Algoritmos
Algoritmo clique maximo  - Analise de AlgoritmosAlgoritmo clique maximo  - Analise de Algoritmos
Algoritmo clique maximo - Analise de Algoritmos
 
Servidores Web
Servidores WebServidores Web
Servidores Web
 
TCC: WebLab Laboratório de Experimentação Remota
TCC: WebLab Laboratório de Experimentação RemotaTCC: WebLab Laboratório de Experimentação Remota
TCC: WebLab Laboratório de Experimentação Remota
 
Weblab TCC
Weblab TCCWeblab TCC
Weblab TCC
 
Engenharia de software testes
Engenharia de software  testesEngenharia de software  testes
Engenharia de software testes
 
Qualidade de Software Web
Qualidade de Software WebQualidade de Software Web
Qualidade de Software Web
 

Programação Android Phonegap 1

  • 1. DESENVOLVIMENTO DE APLICATIVOS MOBILES UTILIZANDO A PLATAFORMA PHONEGAP BUILD ADILMAR COELHO DANTAS MESTRANDO EM CIÊNCIA DA COMPUTAÇÃO
  • 2. INTRODUÇÃO PhoneGap é uma plataforma para desenvolvimento de aplicativos móveis em código aberto. Ela utiliza-se da tecnologia Apache Cordova para acessar a funções dos aparelhos móveis como acelerômetro, câmera e geolocalização. Além disso, permite que os desenvolvedores criem aplicações utilizando HTML5, CSS3 e JavaScript, sem a necessidade de depender de APIs específicas. Os aplicativos criados são compatíveis com iOS, Windows Phone e Android.
  • 3. INTRODUÇÃO A plataforma phonegap pode ser utilizada de duas maneiras: • Integrado a sua SDK (Plataforma de Desenvolvimento) • De forma hibrida através da plataforma web phonegap build, abordada nesta aula.
  • 4. PASSO 1 - CADASTRO • Para ter acesso a plataforma é necessário um cadastro. • Link: https://build.phonegap.com/ • Faça seu cadastro na plataforma ou conecte-se com alguma das redes sociais a Adobe.
  • 5. PASSO 2 - SDK Definir a plataforma de programação web de sua preferência. Para isso, temos algumas sugestões: • Notepad ++ • Eclipse • Adobe Dreamweaver • Ou qualquer outra plataforma de sua preferência, que permita o desenvolvimento web.
  • 6. PASSO 3 - PROJETO Agora que temos a plataforma definida, devemos iniciar nosso projeto móbile, mas algumas observações devem ser lavadas em consideração, são elas: • Responsividade da Aplicação; • Quais recursos utilizar do dispositivo (internet, dados, GPS, câmera); • Configuração da aplicação para compilação no phonegap build.
  • 7. PASSO 4 - RESPONSIVIDADE A responsividade é um novo padrão de desenvolvimento, que tem como objetivo garantir que as aplicações web comportem-se da mesma maneira em diferentes dispositivos, através das seguintes tecnologias: • HTML5 • CSS • JAVA SCRIPT
  • 8. PASSO 5 - RESPONSIVIDADE Para garantir essa responsividade vamos utilizar a biblioteca Jquery Móbile, para garantir que nossa aplicação execute de forma responsiva e integrada com os dispositivos móbiles. Para isso você pode usar um tema predefinido por algum desenvolvedor ou personalizar seu próprio tema, veja: • Desenvolva seu próprio tema - http://themeroller.jquerymobile.com/
  • 9. PASSO 6 - TEMAS Nesta tela é exibido o painel de personalização do seu tema. Através dele é possível personalizar características como: fonte, cores, em três templates distintos A,B,C. Exercício – Desenvolva seu próprio template, com a finalidade de buscar supermercados em sua cidade. SEJA CRIATIVO (A)! • Construindo seu próprio tema:
  • 10. • Salvando seu tema: No menu superior selecione: Download Theme zip file. Em seguida, dê um nome ao seu tema e faça o download. PASSO 7- TEMAS
  • 11. • Preparando seu projeto Extraia o arquivo zip Abra o index.html *Se for exibido o seu tema “A”, conforme o passo anterior, seus arquivos estão configurados corretamente. PASSO 8- PROJETO
  • 12. PASSO 9 – SERVIDOR WEB APACHE XAMPP é um servidor independente de plataforma, software livre, que consiste principalmente na base de dados MySQL, servidor web Apache e os interpretadores para linguagens de script: PHP e Perl. Faça o download e instalação do mesmo https://www.apachefriends.org/pt_br/index.html
  • 13. PASSO 10 – CONFIGURANDO O XAMPP Após a instalação acesse o seguinte diretório: c:xampphtdocs Delete os arquivos existentes neste diretório Copie os arquivos referentes ao seu tema para este diretório Acesse o painel xampp em programas e inicie o apache.
  • 14. PASSO 11 – CONFIGURANDO O XAMPP Do seu navegador acessa a seguinte url: localhost Será exibido a mesma tela do tema, dessa forma, seu servidor está configurado para simular a aplicação web. Abra o index.html em sua plataforma de desenvolvimento, de sua escolha, para realizarmos a edição.
  • 15. PASSO 12 – CRIANDO O APP Edite sua aplicação para que a mesma fique o mais similar com esta: <div data-role="content" data-theme="a"> <p>Bem vindo(a) selecione o bairro mais proximo</p> <a href="santamonica.html" data-role="button" data- theme="b"><img src="images/c1.png"/><br>Santa Mônica</a> <a href="granada.html" data-role="button" data-theme="b"><img src="images/c2.png"/><br>Granada</a> <a href="luizote.html" data- role="button" data-theme="b"><img src="images/c1.png"/><br>Luizote</a> <a href="tibery.html" data-role="button" data-theme="b"><img src="images/c2.png"/><br>Tibery</a> </div> Codificação completa em: https://github.com/Adilmar/Phonegap
  • 16. PASSO 13 – CRIANDO O APP Segunda tela -> Listagem de supermercados por bairros <tr> <td><img src="images/valor.jpg" width="60px"/></td> <td><h3>Valor Supermecado</h3></td> </tr> <tr> <td><strong>Endereço</strong></td> <td>rua teste teste </td> </tr> <tr> <td><strong>Telefone</strong></td> <td>(34) 3232- 3244</td> </tr> <tr> <td><strong>Mapa</strong></td> <td>&nbsp;</td> </tr> Codificação completa em: https://github.com/Adilmar/Phonegap
  • 17. PASSO 14 – CRIANDO O APP Teste a aplicação no navegador através da url: localhost
  • 18. PASSO 15 – CONFIGURANDO O APP Agora que temos nossa aplicação desenvolvida, é necessário algumas configurações para que seja possível compila-la no PhoneGap Buil. A primeira configuração, é mais importante, é o arquivo config.xml Este arquivo contém as configurações necessárias para que sua aplicação seja compilada de forma correta. O arquivo config.xml necessário encontra-se em Codificação completa em: https://github.com/Adilmar/Phonegap
  • 19. PASSO 16 – CONFIGURANDO O APP Vamos entender melhor o arquivo config.xml id = "com.emp.market“ <!– nome do pacote em que o mesmo sera instalado no aparelho --> <!--nome do seu aplicativo --> <name>Market App</name> <!-- Core plugins ou seja quais recursos do aparelho que você precisa --> <gap:plugin name="org.apache.cordova.battery-status" /> <!-- icones para as plataformas --> <icon src="icon.png" />
  • 20. PASSO 17 – CONFIGURANDO O APP Feito o arquivo config.xml, salve-o no mesmo diretório do index.html, em c:xampphtdocs Construa um ícone com as mesmas medidas do modelo em anexo e salve o mesmo na raiz, com o nome icon.png Veja o exemplo do ícone abaixo:
  • 21. PASSO 18 – PREPARANDO PARA COMPILAR Verifique se no diretório c:xampphtdocs existe a mesma estrutura. O próximo passo é configurar a plataforma web, mas faremos isso na próxima aula!
  • 22. SOBRE E CONTATOS Site: www.adilmar.com.br Email: akanehar@gmail.com Lattes: http://lattes.cnpq.br/2462384793631673