Você está na página 1de 34

Instituto Federal de Goiás

Câmpus Goiânia

Aplicações Mobile Híbridas com


Cordova & PhoneGap

Prof. Ms. Renan Rodrigues de Oliveira


Goiânia - GO
Aplicações Híbridas
 Ao pensar em construir aplicativos mobile, é importante pensar em quais
plataformas atacar.
Aplicações Híbridas
 Para desenvolver para cada uma destas plataformas, é necessário aprender
linguagens e frameworks, totalmente diferentes.
Aplicações Híbridas
Cordova é uma solução para construção de aplicativos
híbridos multiplataforma.

 Ele usa o ponto forte da Web de ter linguagens padronizadas e um


ambiente de execução, o navegador, para construir aplicativos.
 São Apps instaláveis que você pode publicar nas lojas, e pode usar recursos
nativos da plataforma, mas são escritas em HTML, CSS e JavaScript.

.
Aplicações Híbridas
O objetivo do Cordova é "empacotar" o projeto HTML, CSS e JS
em um app instalável, fazendo a comunicação das chamadas de código
para chamadas nativas quando necessário.

 O Cordova cria uma WebView para as diversas


plataformas do projeto.
 O resultado é um app instalável, publicável na
loja (e com todas as vantagens que
correspondem), porém implementada com um
código multiplataforma.
Aplicações Híbridas com PhoneGap
Cordova e PhoneGap
Nós falamos até aqui de Cordova, mas e PhoneGap? Do que se trata?

 Basicamente, o PhoneGap é uma distribuição proprietária do Cordova.


 O PhoneGap foi criado em 2009 pela empresa Nitobi. Em 2011, a Adobe comprou
a empresa mas doou todo o código para o projeto Apache.
 O PhoneGap passou a ser o nome do produto da Adobe construído ao redor do
Cordova.
 A base é o Cordova, mas com alguns serviços adicionais da Adobe que podem ser
interessantes dependendo do projeto.
 O Cordova provê a base para uma aplicação híbrida simples. Todos os recursos
adicionais e mais avançados são feitos com plugins.
Cordova e PhoneGap
O PhoneGap é 90% Cordova. Ele é uma distribuição do Cordova, contém o
Cordova dentro de si e permite fazer tudo o que o outro faz.

 O PhoneGap tem serviços a mais, coisas que a Adobe colocou que


facilitam o desenvolvimento, principalmente no início.
 PhoneGap Desktop: App Desktop simples para criar e servir Apps PhoneGap;
 PhoneGap Developer App: App mobile que permite testar sua App no celular
sem precisar empacotar nem instalar;
 PhoneGap Build: Serviço de build remoto, que permite gerar a App final sem
você precisar da infraestrutura na sua máquina.
Cordova não é Web
Uma aplicação híbrida é uma aplicação normal, apenas escrita
em linguagens comuns a desenvolvedores Web.

 Quando usamos Cordova, nosso código HTML é empacotado junto à


casca nativa para se tornar uma aplicação normal.
 O Cordova está mais próximo de um aplicativo do que de uma Web. Por
exemplo, ela não se encontra disponível na internet e não possui uma URL para
acessar a aplicação.
 Elas têm as mesmas vantagens e deficiências de Apps normais: precisam ser
geradas para cada plataforma, precisam ser disponibilizadas na loja de cada
fabricante, e estão submetidas às regras de cada plataforma.
Nativo, Web e Híbrido
 Os aplicativos nativos são softwares autônomos instalados diretamente
em um smartphone.
 Eles são desenvolvidos para uma plataforma única em sua linguagem de
programação nativa – Swift (iOS), Java (Android) ou C # (Windows Phone).
 Os aplicativos da Web funcionam por meio de navegadores web em
dispositivos móveis.
 Eles são desenvolvidos utilizando padrões web (HTML5, JavaScript, CSS3). Isso
significa que uma versão é universal, ou seja, funcionará em iPhone, iPad,
smartphones Android e tablets, e Windows Mobile.
 Uma terceira opção são os aplicativos híbridos, que começam a se tornar
mais populares.
 Eles são desenvolvidos, em grande parte, em HTML5, utilizando tecnologia web
app, mas estão inseridos dentro de um invólucro de aplicativo nativo. Isso
permite que o aplicativo tenha a funcionalidade de um aplicativo nativo e
também reduz o esforço de desenvolvimento ao criar versões para plataformas
adicionais.
Aplicativos Híbridos
O híbrido irá trazer grandes vantagens no desenvolvimento, porque
iremos economizar dinheiro ao criar um único código que rodará em
diversas plataformas.

 Do ponto de vista do usuário, não deve existir diferenças entres os Apps


híbridos e nativos.
 Se o seu projeto demandar muita performance, que tenha muitos
detalhes, realmente o nativo pode ser um melhor desempenho.
 Porém, na maioria dos casos, a performance do nativo e híbrido são
equivalentes.

A escolha entre um nativo ou híbrido é mais uma escolha de


implementação, do que algo que seja perceptível para o usuário. Para
ele, não haverá diferenças e ambos serão usados normalmente.
Criando um Projeto PhoneGap

 Veja mais em:


http://docs.phonegap.com/getting-started/
Framework7
Framework 7 é um framework open-source para desenvolvimento de
aplicações mobile híbridas mas com estética e comportamento nativo,
utilizando HTML, CSS e Javascript.

 Há duas maneiras de começar a usar o


Framework 7:
 customizando um dos layouts/demos no site do
framework;
 começando do zero.
 Veja mais em:
https://framework7.io/get-started/
https://phonegap.com/blog/2015/11/30/framework7/
https://github.com/phonegap/phonegap-template-framework7
Projeto “Cozinha Criativa”
Projeto “Cozinha Criativa”
Projeto “Cozinha Criativa”
Projeto “Cozinha Criativa”
Um App Híbrido é uma Página HTML
 Uma App híbrida é apenas um código HTML, CSS e JavaScript empacotado
em uma App instalável.
Testando o Projeto
Definições do Projeto “Cozinha Criativa”
O arquivo config.xml possui as principais definições do aplicativo. Este
arquivo fica localizado no diretório raiz do projeto.

 Dois atributos aqui são importantes:


 id: define um identificador único para o projeto. Esse id é usado nas lojas das
plataformas para publicação e deve ser único.
 version: um número de versão, que deve ser incrementado conforme for
lançando novas as versões da App.

No arquivo config.xml também devem


ser definidos os metadados do projeto,
comportamentos, ícones, splashscreen
e preferências específicas por
plataforma.
Estrutura do Projeto
 A raiz do projeto da aplicação possui os seguintes diretórios.
 www: armazena o código HTML, CSS e JavaScript, além das imagens e outros
recursos estáticos.
 config.xml: arquivo de configurações do PhoneGap.
 platforms: pasta gerada onde ficam os projetos nativos de cada plataforma em
uso.
 plug-ins: pasta onde ficam os plugins instalados no PhoneGap.
 res: pasta comum onde é armazenado os ícones e splash screens para todas as
plataformas.
 hooks: pasta para inclusão de scripts para serem executados durante os
procedimentos do PhoneGap. Vem vazia e não é necessária.
Customização do Projeto
 A seguir, apresentam-se alguns diretórios importantes para customização
de cores, ícones e imagens de spash:
 www/dist: armazena ícones e todos os arquivos do Framework7. A customização
da interface da aplicação deve ser realizada alterando os arquivos deste
diretório.
 www/res: armazena ícones e imagens de spash screens.
 www/images: armazena imagens câmpus e cursos.
Arquivo Principal do Aplicativo
 O arquivo index.html deve seguir o esqueleto padrão de um HTML5
importar todos os arquivos CSS e JavaScript utilizados na aplicação.
 O menu esquerdo da aplicação também é definido neste arquivo. O arquivo
index.html encontra-se no seguinte diretório:
 www/index.html
Definição dos Conteúdos Estáticos das Páginas
 Os conteúdos estáticos das páginas do aplicativo são definidos no
seguinte arquivo:
 www/js/my-app.js
Definição do Servidor para Requisições
Dinâmicas
 O endereço do servidor que responderá as requisições dinâmicas deve
ser configurado na variável servidor, no arquivo cozinha-criativa.js.
 Este arquivo encontra-se no seguinte diretório:
 www/js/cozinha-criativa.js
Criando o Projeto para Android e iOS
O diretório platforms do projeto armazena os projetos nativos de cada
plataforma em uso.

 Para adicionar uma nova plataforma, utilize o seguinte comando:


phonegap platform add <platforms>.
 Em plataforms/android é armazenado o código para Android com o projeto
completo do Android Studio.
 Em plataforms/ios é armazenado o código para iOS com o projeto completo do
Xcode.
Scripts Server-Side
Na programação no lado do servidor utilizou-se a linguagem PHP rodando
com o Servidor HTTP Apache.

 Estrutura de Diretórios
 adodb5: diretório da biblioteca de abstração de
banco de dados.
 classes: armazena as classes que respondem
dinamicamente a diversas funcionalidades do
aplicativo.
 config: define as configurações de banco de dados
do MySQL.
 img-receitas: armazena as imagens das receitas.
Banco de Dados MySQL
 A seguir é apresentado a tabela do MySQL utilizadas para armazenamento
das receitas do App.
 Neste projeto, deve-se o phpMyAdmin para fazer a gestão destes registros.
Banco de Dados MySQL

CAMPO DESCRIÇÃO
ID Identificador da tabela.
TITULO Título da receita.
INGREDIENTES Lista de ingredientes da receita.
PREPARO Lista de instruções para preparo da receita.
IMAGEM URL da imagem da receita.
FONTE Link da página web da receita.
ORDEM Definição da ordenação da lista de receitas.
ATIVO “S” para publicado e “N” para não publicado.
DATA_FIM Data limite da publicação.
Páginas do Aplicativo
 Página Inicial
 Interface de entrada do aplicativo.
 Arquivo em:
 www/index.html

o www/inicio.html
 Imagem em:
 www/images/pictures/capa.jpg
Páginas do Aplicativo
 Sobre o App
 Lista informações sobre o App Cozinha Criativa, com
opção de envio de comentário por e-mail.
 Arquivo em:
 www/sobre.html
Páginas do Aplicativo
 Receitas do Dia
 Lista as receitas cadastradas no banco de dados MySQL
do aplicativo. As imagens das notícias devem ser
inseridas no diretório img-receitas do servidor.
 Arquivo em:
 www/lista-receitas.html

 www/detalhe-receitas.html

 Requisição para:
 classes/ListaReceitas.class.php
Páginas do Aplicativo
 Dicas de Gastronomia
 As informações sobre Dicas de Gastronomia são
definidas no arquivo.
 Arquivo em:
 www/lista-receitas.html

 www/info-detalhe.html

 Informações sobre os regulamentos em:


 www/js/my-app.js
Dúvidas?
Renan Rodrigues de Oliveira
renan.rodrigues@ifg.edu.br