Construindo App Wrapper em PhoneGap (pt. 2)

Na parte 1 falamos sobre a instalação básica e sobre construir a base da aplicação "casca". Nesta segunda parte iremos abordar as permissões de navegação das páginas do seu site e sobre alguns arquivos base.
Se você deseja ver a parte 1, clique aqui.

Parte 2 - Abrindo seu site dentro do aplicativo

A versão 6.0.0 do PhoneGap existem algumas restrições de segurança quanto a links externos e páginas navegáveis do aplicativo. Existe uma diretriz de permissões que precisamos editar para que nenhuma página do App seja bloqueada.

Essas diretrizes ficam dentro do arquivo config.xml juntamente com as declarações de plugins e etc. Iremos editar esse arquivo, removendo, editando e inserindo novas linhas a fim de configura-lo corretamente. Abaixo temos o arquivo config.xml (vale lembrar que esse é que fica no root da aplicação):

<?xml version='1.0' encoding='utf-8'?>
<widget id="br.com.pagoate" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
  <name>Meu App</name>
  <description>Meu App é GRÁTIS!</description>
  <author email="contato@pagoate.com.br" href="http://pagoate.com.br">PagoAté</author>
  <preference name="permissions" value="none" />
  <preference name="orientation" value="default" />
  <preference name="target-device" value="universal" />
  <preference name="fullscreen" value="true" />
  <preference name="prerendered-icon" value="true" />
  <preference name="stay-in-webview" value="true" />
  <preference name="ios-statusbarstyle" value="black-opaque" />
  <preference name="detect-data-types" value="true" />
  <preference name="exit-on-suspend" value="false" />
  <preference name="show-splash-screen-spinner" value="true" />
  <preference name="auto-hide-splash-screen" value="true" />
  <preference name="disable-cursor" value="false" />
  <preference name="android-minSdkVersion" value="14" />
  <preference name="android-installLocation" value="auto" />
  <preference name="backup-web-storage" value="local" />
  <gap:plugin name="org.apache.cordova.file" />
  <gap:plugin name="org.apache.cordova.media" />
  <gap:plugin name="org.apache.cordova.device" />
  <gap:plugin name="org.apache.cordova.camera" />
  <gap:plugin name="org.apache.cordova.dialogs" />
  <gap:plugin name="org.apache.cordova.inappbrowser" />
  <gap:plugin name="org.apache.cordova.splashscreen" />
  <gap:plugin name="org.apache.cordova.media-capture" />
  <gap:plugin name="org.apache.cordova.device-orientation" />
  <plugin name="cordova-plugin-whitelist" version="1" />
  <icon src="icon.png" />
  <icon gap:platform="android" gap:qualifier="ldpi" src="www/res/icon/android/icon-36-ldpi.png" />
  <icon gap:platform="android" gap:qualifier="mdpi" src="www/res/icon/android/icon-48-mdpi.png" />
  <icon gap:platform="android" gap:qualifier="hdpi" src="www/res/icon/android/icon-72-hdpi.png" />
  <icon gap:platform="android" gap:qualifier="xhdpi" src="www/res/icon/android/icon-96-xhdpi.png" />
  <icon gap:platform="ios" height="57" src="www/res/icon/ios/icon-57.png" width="57" />
  <icon gap:platform="ios" height="72" src="www/res/icon/ios/icon-72.png" width="72" />
  <icon gap:platform="ios" height="114" src="www/res/icon/ios/icon-57-2x.png" width="114" />
  <icon gap:platform="ios" height="144" src="www/res/icon/ios/icon-72-2x.png" width="144" />
  <gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="www/res/screen/android/screen-ldpi-portrait.png" />
  <gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="www/res/screen/android/screen-mdpi-portrait.png" />
  <gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="www/res/screen/android/screen-hdpi-portrait.png" />
  <gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="www/res/screen/android/screen-xhdpi-portrait.png" />
  <gap:splash gap:platform="ios" height="480" src="www/res/screen/ios/screen-iphone-portrait.png" width="320" />
  <gap:splash gap:platform="ios" height="960" src="www/res/screen/ios/screen-iphone-portrait-2x.png" width="640" />
  <gap:splash gap:platform="ios" height="1136" src="www/res/screen/ios/screen-iphone-portrait-568h-2x.png" width="640" />
  <gap:splash gap:platform="ios" height="1024" src="www/res/screen/ios/screen-ipad-portrait.png" width="768" />
  <gap:splash gap:platform="ios" height="768" src="www/res/screen/ios/screen-ipad-landscape.png" width="1024" />
  <content src="http://pagoate.com.br" />
  <access origin="*" />
  <allow-navigation href="http://pagoate.com.br/*" />
  <allow-navigation href="https://*.twitter.com/*" subdomains="true" />
  <allow-navigation href="https://*.facebook.com/v2.5/" subdomains="true" />
  <allow-navigation href="https://*.facebook.com/dialog/*" subdomains="true" />
  <allow-intent href="tel:*" />
  <allow-intent href="mailto:*" />
  <allow-intent href="https://www.twitter.com/meuapp" />
  <allow-intent href="https://www.facebook.com/meuapp/" />
  <engine name="ios" spec="~4.0.1" />
  <engine name="android" spec="~5.1.0" />
</widget>

1 - <name> Como o próprio nome da tag diz é o nome da aplicação, que irá aparecer logo abaixo do ícone quando instalarmos o aplicativo no dispositivo mobile

2 - <description> Segundo a documentação do PhoneGap, a tag não oferece valor real durante envia as Stores, serve apenas para você descrever seu App

3 - <author> Nome, email e link para o autor da aplicação. Geralmente é o nome da empresa, mas pode ser também o do desenvolvedor (no caso de apenas uma pessoa)

4 - <preference> São diversas as opções para essa tag. Como o nome diz, elas gerencias as diversas preferências de uso da aplicação, como por exemplo, se ele irá funcionar em tela cheia ou não. Veja mais aqui

4 - <plugin> Essas são as tags para inclusão dos diversos plugins disponíveis utilizáveis com o framework. Alguns dos plugins e preferencias são específicas do sistema iOS (veja mais aqui)

5 - <content> Aquie specificamos a "porta de entrada" da nossa aplicação. Por padrão o valor dessa tag é index.html, pois o PhoneGap leva em consideração o arquivo raiz da pasta www o qual é o arquivo base da aplicação quando ela é escrita inteiramente dentro do framework. No nosso caso será uma URL, pois estamos carregando o nosso site dentro do App

6 - <access origin> Podem haver várias declarações dessa tag, cada uma delas content a URL na qual você deseja que seu App receba requisições. No caso de termos botões de compartilhamento, plugins de chat com clientes ou banners de Ads, é interessante deixar isso aberto (com o símbolo *) Veja mais

7 - <allow-navigation> Aqui declaramos as URLs nas quais permitimos que sejam navegadas sem sairmos de dentro da aplicação. Devido ao fato da maioria das aplicações possuirem login com Facebook/Twitter é interessante configurar as rotas do OAuth para esses casos, como no exemplo acima. Veja mais

8 - <allow-intent> São as rotas nas quais permitimos que o usuário SAIA do aplicativo para serem executadas, como por exemplo, páginas no Facebook/Twitter, links para emails, telefones e etc. Veja mais

Rebuild no Projeto

Alguns erros podem acontecer caso, após uma modificação no arquivo config.xml, caso você não dê rebuild no projeto novamente. Para isso, executamos novamente os seguintes comandos:

1 - phonegap run ios --build

2 - phonegap run android --build

Depois disso é só rodar os emuladores novamente e conferir os resultados.

Autor:
Patrick muller
Patrick Müller
Líder Tecnológico na COSMIT. Já trabalhou com planejamento e desenvolvimento de diversas Startups ao longo dos últimos anos. Adora animes, desenhos antigos e aproveita boa parte do tempo livre em busca de conhecimento que possa ajudar seus clientes a atingirem seus objetivos.
Compartilhe: