PhoneGap - Guía rápida

Los dispositivos móviles, portátiles y fáciles de transportar han iniciado una nueva revolución en la ingeniería de software. Estos dispositivos pequeños pero eficientes son capaces de ejecutar aplicaciones creadas con lenguajes de programación de alta gama. Las personas que poseen estos dispositivos tienden a usarlos al máximo, ya que estos dispositivos, como los teléfonos móviles, son muy convenientes de usar en cualquier momento y en cualquier lugar.

La arquitectura de un dispositivo móvil es similar a la de un sistema informático. Tiene hardware, firmware y sistemas operativos personalizados.

Estos tres elementos son en su mayoría propietarios y están diseñados, desarrollados y ensamblados bajo una organización insignia. Las aplicaciones (software de aplicación) son desarrolladas tanto por la organización insignia como por desarrolladores externos a la organización.

En el mercado se encuentran disponibles una serie de sistemas operativos móviles reconocidos, tanto en categorías patentadas como de código abierto. Los sistemas operativos móviles más utilizados son:

  • Android
  • IOS
  • BlackBerry
  • Windows

Cada sistema operativo móvil proporciona su propio conjunto de herramientas y entornos para desarrollar aplicaciones que se ejecutarán en ellos. La aplicación hecha para un sistema operativo no se puede ejecutar en ninguna otra plataforma, ya que son completamente diferentes. Los desarrolladores tienden a cubrir todos los principales sistemas operativos móviles para aumentar la accesibilidad entre sus usuarios.

Por lo tanto, se convierte en una tarea tediosa desarrollar un programa de aplicación que pueda ejecutarse en todas las principales plataformas de sistemas operativos, manteniendo su apariencia, sensación y funcionalidad idénticas en todas las plataformas. Para este trabajo, un desarrollador debe comprender todas las plataformas y debe tener un buen conocimiento de las principales herramientas de desarrollo para diferentes sistemas operativos.

PhoneGap

PhoneGap puede verse como una solución a todos los problemas mencionados anteriormente. PhoneGap es un marco que hace que los desarrolladores desarrollen sus aplicaciones utilizando API web estándar para todos los principales sistemas operativos móviles. Es de código abierto y gratuito.

Los desarrolladores solo necesitan conocer el desarrollo web usando HTML, CSS y JavaScript. PhoneGap se encarga del resto del trabajo, como la apariencia de la aplicación y la portabilidad entre varios sistemas operativos móviles.

Con PhoneGap, se pueden crear aplicaciones para todos los principales sistemas operativos móviles como Apple iOS, Android, BlackBerry, Windows, etc. Esto no requiere que el desarrollador tenga experiencia en ninguna de las plataformas mencionadas, ni que el desarrollador tenga conocimientos de programación. para codificar la aplicación desde cero.

PhoneGap permite a sus usuarios cargar el contenido de datos en el sitio web y lo convierte automáticamente en varios archivos de la aplicación.

En este tutorial, veremos cómo crear una aplicación para plataformas Apple, Android y Windows en línea sin usar ninguna herramienta fuera de línea.

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).

Los sitios web sin conexión se copian en el disco duro local y se accede a ellos cuando el usuario lo necesita sin ninguna conexión a Internet. Asimismo, esta aplicación web sin conexión te permitirá crear una aplicación web que se descarga en su totalidad en los dispositivos móviles de un usuario que puede acceder a ella sin conexión.

Una aplicación para este tipo de aplicación puede incluir una aplicación con una colección de historias, tutoriales breves o cualquier otro contenido fuera de línea de interés de los usuarios, que pueden leer sin conexión incluso cuando Internet no está disponible.

Aplicación sin conexión

La siguiente imagen representa la estructura de carpetas para la aplicación sin conexión. En el directorio raíz, solo requiere dos archivos, config.xml e index.xml.

El config.xml contiene los ajustes de configuración de la aplicación que aprendimos en la sección anterior. El archivo index.html contiene la página de inicio de los contenidos web.

Una cosa importante que aprender aquí es que todos los enlaces dentro de todos los archivos html deben contener solo una ruta relativa. Es decir, no debería haber ninguna ruta absoluta o etiqueta href base.

Aplicación en línea

La siguiente imagen muestra la estructura de carpetas para que nuestra aplicación esté en modo en línea. En el modo en línea, todo el contenido web se carga desde el sitio web de Internet.

Puedes notar que dataFalta la carpeta en la aplicación de modo en línea, porque todos los archivos residen en el servidor real y son accesibles a través de Internet. El archivo index.html contiene enlaces reales, ya que contiene en el servidor web y todos sus enlaces son absolutos o se utilizan conbase href etiqueta.

Una vez que haya decidido el modo de su aplicación y haya organizado sus archivos en la estructura de archivos mencionada anteriormente, debe comprimir su archivo con cualquier herramienta zip estándar y guardarlo. Usaremos este archivo en la siguiente sección.

Firma tu aplicación

Es esencial que cualquier aplicación esté firmada por sus desarrolladores u organización en desarrollo para mantener las cosas en orden. Por este motivo, debe firmar su aplicación. Tu puedes necesitarkeytool que es parte de la distribución estándar de Java.

Ejecute el siguiente comando en% JAVA_HOME% en su símbolo del sistema de Windows o Shell de Linux -

keytool -genkey -v -keystore my_keystore.keystore 
   -alias TutorialsPoint -keyalg RSA -keysize 2048 -validity 10000

Esto debería generar el archivo my_keystore.keystore, que necesitaremos en la siguiente sección.

Ahora estamos listos para compilar nuestra primera aplicación de modo rápido basada en API web. En este segmento final, conoceremos el proceso de transformación de nuestros contenidos web a un formato de aplicación, que se puede cargar en las tiendas de aplicaciones en línea.

PhoneGap acepta el inicio de sesión de usuario creado en GitHub o usando AdobeID. GitHub es un servicio de repositorio donde los usuarios pueden cargar sus contenidos y usarlos proporcionando sus referencias URL. Por ejemplo, el contenido que acabamos de crear se puede cargar en GitHub y luego llamarlo directamente a PhoneGap.

Los siguientes pasos detallan cómo crear un ID de Adobe.

Crear ID de Adobe

Vaya a www.build.phonegap.com y haga clic en Registrarse

Se abrirá una nueva ventana como se muestra a continuación:

Complete sus datos y haga clic en registrarse. Ahora puede iniciar sesión con la misma identificación de usuario en PhoneGap. De forma predeterminada, esta página debería llevar a la consola PhoneGap como se muestra a continuación:

Haga clic en 'Cargar un archivo .zip' y cargue el archivo .zip que creamos, que tiene todo el contenido web y las configuraciones. Debería ver la siguiente ventana después de una carga exitosa:

Es posible que vea instantáneamente que la aplicación de iOS no se ha procesado, ya que no hemos proporcionado ninguna clave firmada. Solo nos estamos concentrando en Android y puedes ver que ha sido creado por PhoneGap. Esta aplicación no se puede cargar en la tienda de Google porque no está firmada por clave.

Haga clic en el icono de Android y debería aparecer la siguiente pantalla:

Haga clic en el menú de opciones desplegable junto al ícono de Android que dice Sin clave seleccionada, haga clic en agregar una clave y debería aparecer la siguiente pantalla:

Proporcione el título y el alias de su elección y haga clic en el archivo Keystore. Proporcione el archivo de almacén de claves creado en la última sección. Luego haga clic en el botón 'Reconstruir' al lado.

La aplicación creada mediante este proceso se puede cargar directamente en Google Play. Haga clic en el archivo .apk y podrá descargar su primera aplicación gratuita basada en la web.

Antes de cargar, la aplicación debe probarse en dispositivos virtuales o reales.