Esta guía le enseñará cómo crear una aplicación híbrida utilizando la popular plataforma de creación de aplicaciones PhoneGap. Lo que vamos a hacer es convertir su sitio web en un archivo .apk (aplicación de Android) instalable que se puede instalar en cualquier teléfono Android. Cuando se inicia la aplicación, simplemente abrirá su sitio web en el navegador WebView nativo de Android, pero aparecerá como una aplicación de pantalla completa, sin barra de navegación de URL ni ninguna otra pista de que su sitio web simplemente se presenta en un navegador.
Requisitos
Su propio sitio web (con el fin de seguir esta guía, simplemente podría iniciar un blog gratuito de WordPress)
Cuenta de GitHub
Cuenta PhoneGap
Bloc de notas ++ (o software de edición de texto similar que pueda reconocer código)
Software de edición de fotos para crear iconos de aplicaciones (Photoshop, GIMP, etc.)
Plantillas de codificación
Estas son plantillas de código que puede usar para el propósito de esta guía; son de mi propia aplicación desarrollada con PhoneGap, pero las he despojado de mi información personal. Configurarlos desde cero con todos los parámetros correctos me llevó muchos días de resolución de problemas, así que los proporciono para su conveniencia. ¡De nada!
> Config.XML
> Index.HTML
Empezando
Cree una carpeta en su escritorio y llámela ' www: ” sin las comillas. Este será el directorio principal del proyecto, donde el constructor PhoneGap esperará encontrar todos los archivos para su proyecto. Ahora vamos a crear un ícono para tu aplicación.
Abra su software de edición de fotos y cree una nueva imagen en formato .PNG. La configuración de su imagen debería verse así:
Y ahora puedes dibujar tu ícono, por ejemplo, solo voy a hacer un pequeño botón:
El tamaño de la imagen depende de la pantalla de su teléfono personal, pero si tiene la intención de desarrollar una aplicación para varios dispositivos, por supuesto, creará varios tamaños del mismo icono. A continuación se muestra una tabla de los tamaños de imagen utilizados:
36 × 36 (120 ppp / LDPI)
48 × 48 (160 ppp / MDPI)
72 × 72 (240 ppp / HDPI)
96 × 96 (320 ppp / XHDPI)
144 × 144 (480 ppp / XXHDPI)
192 × 192 (640 ppp / XXXHDPI)
No quiero pasar mucho tiempo hablando de tamaños de pantalla y DPI, solo sé que DPI se correlaciona prácticamente con la resolución de la pantalla. Un teléfono que usa una resolución de pantalla de 1080 × 1920 usará 480 ppp, pero esto no necesariamente correlacionar exactamente con el tamaño de la pantalla. Un teléfono puede tener una pantalla de 5,2 ”o una pantalla de 6” y tener una resolución de 1080 × 1920. Pero esta guía no trata sobre las pantallas de los teléfonos inteligentes, así que sigamos adelante.
Después de dibujar su icono, guárdelo como icon.png y muévalo dentro de su carpeta www:. Esto se convertirá en el defecto icono de su aplicación. Si desea crear iconos en diferentes tamaños que coincidan con la resolución de pantalla del usuario, debería guardar el icono en diferentes tamaños y nombres, por ejemplo, Icon144.png, Icon192.png, Icon96.png, etc. Entonces editarías el Config.xml archivo para apuntar a cada icono individual. Vamonos.
Entonces, ahora que tiene un ícono para su aplicación, necesita una imagen de presentación. Se trata básicamente de una pantalla de carga, como un fondo de pantalla que se muestra antes de que se cargue la aplicación. Los tamaños de las imágenes de bienvenida funcionan según el mismo principio que los iconos, pero son un poco más grandes. Aquí está la tabla:
- LDPI:
- Retrato: 200x320px
- Paisaje: 320x200px
- MDPI:
- Retrato: 320x480px
- Paisaje: 480x320px
- HDPI:
- Retrato: 480x800px
- Paisaje: 800x480px
- XHDPI:
- Retrato: 720px1280px
- Paisaje: 1280x720px
- XXHDPI:
- Retrato: 960 px 1600 px
- Paisaje: 1600x960px
- XXXHDPI:
- Retrato: 1280px1920px
- Paisaje: 1920x1280px
Así que cree su imagen de bienvenida en la resolución de su dispositivo, guárdela como Splash.png y luego muévelo dentro de la carpeta de tu proyecto. Genial, ahora tiene el ícono y la imagen de presentación de su aplicación, pasemos a configurar sus archivos de configuración e índice.
Explicación de Index.HTML y Config.XML
El archivo config.xml es lo que establece el entorno de compilación (Android, iPhone, Windows Phone), las ubicaciones de iconos y salpicaduras, y los complementos de Apache Cordova que desea utilizar en su aplicación.
Abra la plantilla que proporcioné en Notepad ++ y verá estas líneas cerca de la parte superior:
Actualice esos campos con su información, pero deje los campos de 'preferencia' solos. El resto del archivo de configuración se explica por sí mismo si solo observa los valores. Nombre de preferencia = 'pantalla completa', por ejemplo, le dice a la aplicación que se inicie como una aplicación de pantalla completa. Deje todo en paz, excepto por este último valor al final del archivo:
Cámbielo a la URL de su sitio web real. Esto permitirá que el usuario de la aplicación navegue completamente por su sitio web, y solo por su sitio web; no pueden salir de su sitio web mientras usa su aplicación. Por supuesto, la aplicación no tendrá una barra de navegación de URL, esto ni siquiera es realmente una preocupación, pero también asegura que el usuario pueda acceder a todas las páginas de su sitio web. El * después de la URL del sitio web es un comodín , que en la jerga de codificación significa que aceptará todo lo que se ingrese en lugar del signo *.
Por supuesto, si desea limitar al usuario a solo ciertas páginas en su sitio web, debe agregar valores separados como este:
Pasemos al Index.html , este es el pan y la mantequilla para hacer que la aplicación realmente funcione. Ábralo dentro de Notepad ++ y cambie el idioma del documento a HTML. Lo que index.html básicamente hace es decirle al navegador de Android cómo mostrar su sitio web; en la plantilla que proporcioné, hay etiquetas para eliminar la barra de navegación de URL del navegador, permitir que el botón 'Atrás' del teléfono salga de la aplicación y ejecutar la aplicación después de que se muestre la pantalla de bienvenida. La línea que querrá cambiar está aquí:
var url = 'http://yourwebsite.com'
Construyendo la aplicación en PhoneGap Build
Así que inicie sesión en su cuenta de GitHub y navegue hasta la página principal de su repositorio. Debajo del nombre del repositorio, haga clic en 'Cargar archivos' y arrastre la carpeta de su proyecto a la pantalla del árbol de archivos. Ahora escriba un mensaje de confirmación en la parte inferior, como ' mi primer intento de aplicación ' . Finalmente, haga clic en Confirmar cambios.
Ahora ve al Compilación de PhoneGap e inicie sesión. Ahora haga clic en el botón 'Nueva aplicación' en la página de compilación. Esto le pedirá que ingrese la ruta a su repositorio de GitHub, así que hágalo, y luego haga clic en 'Extraer de repositorio .git'.
Ahora, de vuelta en la página principal de compilación, haga clic en 'Actualizar código' y 'Extraer más reciente'.
Finalmente, haga clic en 'Construir'. Compilará su aplicación en un archivo .apk y luego le presentará la opción de descargar el .apk. Ahora puede descargar este archivo .apk a su computadora y transferirlo a su teléfono, luego instalarlo desde allí. Alternativamente, puede usar su teléfono para escanear el código QR en la pantalla de su computadora para instalar automáticamente el archivo .apk en su dispositivo Android.
¡Eso es! Ahora, para explicarte algunas cosas importantes:
- Esta fue una guía extremadamente simplificada que lo guió a través de la construcción de las aplicaciones híbridas más básicas. Por lo general, las personas no envuelven sus sitios web en un navegador nativo y lo hacen pasar como una aplicación de Android en la tienda Google Play. Pero ahora que sabe cómo hacerlo, puede comenzar a leer la documentación de PhoneGap sobre cómo personalizar su aplicación y agregarle mucho sabor, para que con suerte pueda crear una aplicación realmente útil.
- En segundo lugar, Google Play prohíbe este tipo de método de creación de aplicaciones para crear aplicaciones de esquema de enlaces con el único propósito de generar ingresos. Por lo tanto, no puede crear una aplicación llamada '¡Gane dinero hoy!' que abre un sitio web absolutamente lleno de anuncios y cuenta con ingresos por publicidad. Serás expulsado de la tienda Google Play.
