En esta unidad aprenderemos cómo podemos obtener la aplicación en formato «apk» para instalarla en nuestros propios dispositivos móviles.
Utilizaremos la plataforma VoltBuilder, que facilita la creación de aplicaciones nativas para Android e iOS a partir de proyectos web hechos con HTML, CSS y JavaScript. Sólo tendremos que subir un archivo zip con nuestro proyecto, y la herramienta se encargará de convertirlo en una app nativa. Además, como está disponible en la nube, no tendremos que instalar ningún tipo de software en nuestros equipos.
A continuación se enumeran los pasos que deberemos seguir para compilar nuestra aplicación y obtener el fichero de instalación «.apk».
Icono de la aplicación
Podemos utilizar el mismo icono tanto para mostrarlo en la pestaña del navegador, como para compilar e instalar nuestra aplicación en dispositivos móviles. En nuestro caso, utilizaremos la misma imagen, pero podría ser otra diferente:
Pantalla de bienvenida
La imagen que utilicemos para la pantalla de bienvenida deberá tener cierto margen alrededor, ya que se mostrará en el centro de la pantalla, y la plataforma VoltBuilder la recortará para asegurar que se muestra de manera correcta en cualquier dispositivo y orientación.
Crear fichero de configuración «config.xml»
Primero deberemos crear el archivo «config.xml» en el directorio raiz de la aplicación. A continuación se muestra un ejemplo básico (puedes cambiar el nombre, la descripción, el icono y la pantalla de bienvenida a tu gusto):
<?xml version='1.0' encoding='utf-8'?> <widget id="com.fernandoruizrico.clicker" xmlns="http://www.w3.org/ns/widgets" version="1.0.1"> <name>Cookie Clicker</name> <description>Juego Cookie Clicker</description> <icon src="img/icono.png" /> <splash src="img/pantalla-bienvenida.png" /> <preference name="SplashScreenDelay" value="2000" /> <preference name="AutoHideSplashScreen" value="true" /> <preference name="AndroidWindowSplashScreenAnimatedIcon" value="img/pantalla-bienvenida.png" /> <preference name="AndroidWindowSplashScreenBackground" value="#FFFFFF" /> <plugin name="cordova-plugin-device" /> <plugin name="cordova-plugin-splashscreen" /> <plugin name="cordova-plugin-vibration" /> <preference name="Orientation" value="portrait" /> <access origin="*" /> </widget>
Comprimir la aplicación en formato «.zip»
La página web VoltBuilder necesita que le proporcionemos nuestra aplicación en formato ZIP. Por ello, deberemos comprimir toda nuestra aplicación en un solo fichero ZIP, que incluirá el fichero «config.xml», y todos los ficheros html, CSS y JavaScript. No importa el nombre que tenga el fichero comprimido.
Compilar la «.apk»
El último paso que deberemos seguir para obtener nuestra aplicación en formato «apk» será subir nuestro fichero «.zip» a la página web VoltBuilder. El proceso es muy sencillo:
- Acceder a la página de inicio de VoltBuilder: https://volt.build/
- Iniciar sesión (con tu cuenta de gmail por ejemplo) haciendo click en la opción «Login/Sign Up».
- Hacer click en la opción «Upload».
- Enviar nuestra aplicación arrastrando el fichero ZIP directamente al cuadro de «Android». También se puede hacer click sobre dicho cuadro y seleccionar nuestro fichero después.
- Una vez la aplicación se haya compilado, podremos descargar el fichero «.apk» generado a través de un código QR, y ya podremos instalarlo en nuestro propio móvil.