PhoneGap - Configuração de ambiente

Neste capítulo, aprenderemos como configurar o ambiente básico para criar aplicativos sem esforço. Embora o PhoneGap suporte a criação offline de aplicativos usando a interface de linha de comando Cordova e o mecanismo de repositório Github , devemos nos concentrar no procedimento de mínimo esforço.

Presumimos que você conheça bem as tecnologias da web e tenha seu aplicativo pronto para ser enviado como um aplicativo. Como o PhoneGap suporta apenas HTML, CSS e JavaScript, é obrigatório que o aplicativo seja criado usando apenas essas tecnologias.

Do ponto de vista de um desenvolvedor, um aplicativo deve ter os seguintes itens incluídos em seu pacote -

Arquivos de configuração
Ícones para aplicativo
Informação ou conteúdo (construído usando tecnologias da web)

Configuração

Nosso aplicativo da web precisará apenas de um arquivo de configuração que deve ser adequado para definir todas as configurações necessárias. Seu nome é config.xml. Este arquivo contém todas as informações necessárias para compilar o aplicativo.

Vamos ver config.xml para nosso exemplo -

<?xml version = "1.0" encoding = "UTF-8"?>

<widget xmlns = "http://www.w3.org/ns/widgets" 
   xmlns:gap = "http://phonegap.com/ns/1.0" id = "com.tutorialspoint.onlineviewer" version = "1.0">
   
   <name>Tutorials Point</name>
   
   <description>
      Tutorials Point Online Viewer
   </description>
   
   <author href = "http://tutorialspoint.com" email = "[email protected]">
      Tutorials Point
   </author>
   
   <preference name = "permissions" value = "none"/>
   
   <icon src = "res/icon/android/drawable-ldpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "ldpi" />
		
   <icon src = "res/icon/android/drawable-mdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "mdpi" />
		
   <icon src = "res/icon/android/drawable-hdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "hdpi" />
		
   <icon src = "res/icon/android/drawable-xhdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "xhdpi" />
		
   <icon src = "res/icon/android/drawable-xxhdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "xxhdpi" />
   
   <icon src = "res/icon/ios/Icon-72.png" gap:platform = "ios" gap:qualifier = ""/>
   <icon src = "res/icon/ios/icon-57.png" gap:platform = "ios" width = "57" height = "57" />
   <icon src = "res/icon/ios/icon-72.png" gap:platform = "ios" width = "72" height = "72" />
   <icon src = "res/icon/ios/icon-57-2x.png" gap:platform = "ios" width = "114" height = "114" />
   <icon src = "res/icon/ios/icon-72-2x.png" gap:platform = "ios" width = "144" height = "144" />
   
</widget>

Todos os conteúdos de configuração são agrupados na tag <widget>. Uma breve descrição destes é a seguinte -

<widget id = ”app_id”>

id é o seu id de aplicativo reservado em várias lojas de aplicativos. É no estilo de nome de domínio reverso, ou seja, com.tutorialspoint.onlineviewer etc.

<widget version = "x.y.z">

Este é o número da versão do aplicativo no formato xyz onde (x, y, z) são inteiros positivos, ou seja, 1.0.0, ele representa o sistema da versão principal.minor.patch.

<name> App Name</name>

Este é o nome do aplicativo, que será exibido abaixo do ícone do aplicativo na tela do celular. Seu aplicativo pode ser pesquisado usando este nome.

<description> My First Web App </description>

Esta é uma breve descrição do que é o aplicativo e do que é.

<author> Author_Name </author>

Este campo contém o nome do criador ou programador, geralmente definido como o nome da organização que está iniciando este aplicativo.

<preferences name = "permissions" value = "none">

A tag de preferências é usada para definir várias opções como FullScreen, BackgroundColor e Orientation for app. Essas opções estão no par de nome e valor. Por exemplo: name = "FullScreen" value = "true" etc. Como não exigimos nenhuma dessas configurações avançadas, apenas atribuímos permissão a nenhuma.

<icon>

Permite-nos adicionar ícones aos nossos aplicativos. Ele pode ser codificado de várias maneiras, mas como estamos aprendendo atalhos de tudo, aqui está. o.srcdetermina o caminho da imagem do ícone. ogap:platformdetermina para qual plataforma de sistema operacional este ícone deve ser usado. ogap:qualifieré a densidade usada por dispositivos Android. Os dispositivos iOS usamwidth & height parâmetros.

Ícones

Existem dispositivos de vários tamanhos com o mesmo sistema operacional móvel, portanto, para atingir o público de uma plataforma, você precisa fornecer ícones de todos os tipos de celulares também. É importante que preparemos ícones de formas e tamanhos exatos, conforme exigido por determinado sistema operacional móvel.

Aqui estamos usando as pastas res/icon/ios e res/icon/android/drawable-xxxx..

Para fazer esse trabalho rapidamente, você pode criar um logotipo de tamanho 1024x1024 e fazer logon em makeappicon.com. Este site irá ajudá-lo a criar instantaneamente logotipos de todos os tamanhos para plataformas Android e iOS.