PhoneGap - Configuración del entorno

En este capítulo, aprenderemos cómo configurar un entorno básico para crear aplicaciones sin esfuerzo. Aunque PhoneGap admite la creación sin conexión de aplicaciones utilizando la interfaz de línea de comandos de Cordova y el mecanismo de repositorio de Github , nos concentraremos en el procedimiento de mínimo esfuerzo.

Asumimos que está bien versado en tecnologías web y tiene su aplicación web lista para ser enviada como una aplicación. Debido a que PhoneGap solo admite HTML, CSS y JavaScript, es obligatorio que la aplicación se cree utilizando solo estas tecnologías.

Desde la perspectiva de un desarrollador, una aplicación debe tener los siguientes elementos incluidos en su paquete:

Archivos de configuración
Iconos para la aplicación
Información o contenido (construido usando tecnologías web)

Configuración

Nuestra aplicación web solo necesitará un archivo de configuración que debería ser adecuado para configurar todos los ajustes necesarios. Su nombre es config.xml. Este archivo contiene toda la información necesaria para compilar la aplicación.

Veamos config.xml para nuestro ejemplo:

<?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>

Todo el contenido de la configuración está envuelto en la etiqueta <widget>. Una breve descripción de estos es la siguiente:

<widget id = ”app_id”>

id es su id de aplicación reservada en varias tiendas de aplicaciones. Está en estilo de nombre de dominio inverso, es decir, com.tutorialspoint.onlineviewer, etc.

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

Este es el número de versión de la aplicación en formato xyz donde (x, y, z) son números enteros positivos, es decir, 1.0.0, representa el sistema de versiones major.minor.patch.

<name> App Name</name>

Este es el nombre de la aplicación, que se mostrará debajo del icono de la aplicación en la pantalla del móvil. Su aplicación se puede buscar con este nombre.

<description> My First Web App </description>

Esta es una breve descripción de de qué se trata la aplicación y de qué se trata.

<author> Author_Name </author>

Este campo contiene el nombre del creador o programador, generalmente configurado con el nombre de la organización que está lanzando esta aplicación.

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

La etiqueta de preferencias se usa para configurar varias opciones como Pantalla completa, Color de fondo y Orientación para la aplicación. Estas opciones están en pares de nombre y valor. Por ejemplo: name = "FullScreen" value = "true", etc. Como no requerimos ninguna de estas configuraciones avanzadas, simplemente asignamos permisos a none.

<icon>

Nos permite agregar íconos a nuestras aplicaciones. Se puede codificar de varias maneras, pero como estamos aprendiendo atajos de todo, aquí está. los.srcdetermina la ruta de la imagen del icono. losgap:platformdetermina para qué plataforma de sistema operativo se utilizará este icono. losgap:qualifieres la densidad que utilizan los dispositivos Android. Los dispositivos iOS utilizanwidth & height parámetros.

Iconos

Hay dispositivos de varios tamaños que tienen el mismo sistema operativo móvil, por lo que para dirigirse a una audiencia de una plataforma, también debe proporcionar iconos de todos los tipos de móviles. Es importante que preparemos íconos de formas y tamaños exactos según lo requiera el sistema operativo móvil en particular.

Aquí estamos usando las carpetas res/icon/ios y res/icon/android/drawable-xxxx..

Para realizar este trabajo rápidamente, puede crear un logotipo de tamaño 1024x1024 e iniciar sesión en makeappicon.com. Este sitio web lo ayudará a crear instantáneamente logotipos de todos los tamaños para plataformas Android e iOS.

Después de proporcionar la imagen del icono de tamaño 1024x1024, makeappicon.com debe proporcionar lo siguiente:

Icons for iOS

Icons for Android

Este sitio web le brinda la opción de enviar por correo electrónico todos los logotipos en formato zip a su puerta (también conocido como correo electrónico, por supuesto).

↰ Previous page Next page ↱