Blog personal

En este artículo pretendo explicar cómo se podría desarrollar una aplicación Web APP con la herramienta PHPrunner.

¿Qué es una aplicación APP Web?

Simplemente es una aplicación web que a nivel de Windows o de Android se va a observar como si fuera una aplicación APP (Android) o Aplicación (Windows).

Todos aquellos que escriban aplicaciones nativas APP (Android o IOS) os dirán que es una aberración y yo estoy “casi” de acuerdo.

Con PHPrunner es fácil hacer una aplicación web y es imposible hacer una APP nativa. También, es cada vez más frecuente disponer de aplicaciones para múltiples dispositivos y hacer algo compatible con casi todo es muy complejo, por ello si funcionalmente esta solución “cumple” los requisitos puede ser una solución.

Diferencia entre APP con aplicación web embebida o esta solución.

Es muy sencillo, al menos en Android, hacer una APP que internamente disponga de un navegador y que una aplicación web corra dentro de ese navegador. Sabed que esto es posible y que lo explico en este artículo /blog/otros-ejemplos/crear-una-app-android-sin-programacion/ . ¿Por qué no es la “solución”? Pues no es la solución general ya que hay determinados eventos del interfaz que no funcionan en dicho navegador (por ejemplo hacer clic en un registro o en un campo). Esto hace que el tipo de aplicación que pueda correr con esta solución sea más simple y que no cumpla todos los requisitos.

Vamos al trabajo de creación de un ejemplo fácil de entender

El principio que tenemos que tener en cuenta se explica en este artículo /blog/otros-ejemplos/una-forma-de-ver-las-aplicaciones-web-como-si-fuesen-app/ pero vamos a concretar qué otros requisitos vamos a poner.

Funcionalmente, la aplicación es la gestión de una lista de la compra. Apuntamos lo que hay que comprar y cuando lo vamos comprando, gestionamos la compra.

Los requisitos que queremos que tenga la aplicación son:

  • Los usuarios se podrán auto apuntar y crear los grupos de personas que van a participar en la lista de compra.
  • Estos usuarios podrán pertenecer o gestionar la compra de varios grupos. Los propios usuarios van a gestionar quienes pertenecen al grupo.
  • Cada grupo tiene su catálogo de productos a comprar. Son los miembros del grupo quienes elaboran este catálogo.
  • En el producto se va a poder poner una imagen o foto. Funcionalidad ideal para cuando se trabaje en teléfono.
  • La solución debe funcionar en Windows y en cualquier otro dispositivo que disponga de un navegador HTML5, preferiblemente Chrome.
  • La gestión de compra o de informar que está comprado se realizará con un único clic en el campo de “comprado?”.
  • Existirán al menos 3 listas. Lo pendiente de comprar, lo que hemos comprado hoy y lo que hemos comprado en otras ocasiones. Pasar los productos a comprar de una lista a otra se debe realizar con un clic.
  • Queremos que la aplicación sea atractiva, para ellos en determinadas páginas se pondrá una imagen de fondo.

Modelo de datos

Pretendo que sea un ejemplo didáctico y para ello es imprescindible que sea un modelo de datos sencillo.

Aspectos que diseño que he tenido que tener en cuenta

  • En la página de identificación debe de tener acceso a las instrucciones de uso del aplicativo, es por ello que he tenido que incluir la página de “Menú” en la página de “Login”.
    Este es el aspecto de la aplicación ejecutándose en Windows fuera del navegador.

Funcionalmente se ha programado:

  • Punto que haciendo clic sobre él se define que se ha comprado o que requiere comprar otra vez.
  • Haciendo clic sobre cualquier parte del registro se pasa a consultar los datos de ese producto.
  • La foto se puede ampliar haciendo clic sobre ella. En pantallas pequeñas, este campo no aparece. Siempre se puede ver la foto en la consulta del producto.
  • Las 3 solapas que hay informan lo que hay pendiente de comprar, lo que hemos comprado hoy y lo que se ha comprado cualquier día anterior a hoy. Para hacer la lista de lo que hay que comprar, si son productos que siempre se compran, lo único que hay que hacer es “des-comprarlo” desde la solapa de “C.Todos”.

Modificaciones para la imagen de fondo en determinadas páginas

Se han hecho estos cambios a nivel de “Custom CSS”.

body.function-login {
  height:100%;
 background:transparent url("/compra/mis_imagenes/lista_compra4.png") no-repeat center center fixed;
 background-size:cover;
 }
 body.function-menu {
 height:100%;
 background:transparent url("/compra/mis_imagenes/lista_compra4.png") no-repeat center center fixed;
 background-size:cover;
 }

Personalizar para definir como APP Web

Para trabajar en la versión 10.1, que no deja cambiar la plantilla de las páginas de forma global (como sí lo permitía la versión 9.8) he hecho:

Code:

$customjscript = <<<EOT
<script type="text/javascript">
$(window).load(function () {
	$('head').append('<meta name="mobile-web-app-capable" content="yes" />');
	$('head').append('<link rel="manifest" href="manifest.json" />');              
	$('head').append('<link href="mis_imagenes/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />');
         });
</script>
EOT;

Y para incluirlo en todas las páginas:

Creo que en la versión 10.2 se va a poder hacer esto de forma mucho más sencilla.

También os dejo en fichero “manifest.json” con los datos configurados.

{
  "short_name": "ListaCompra",
  "name": "Lista de la Compra",
  "icons":  [
    {
      "src": "mis_imagenes/favicon-1x.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "mis_imagenes/favicon-2x.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "mis_imagenes/favicon-4x.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "index.html",
  "display": "standalone",
  "orientation": "portrait"
}

Instalación de la aplicación como APP

Os muestro las pantallas del funcionamiento en Windows, pero de la misma forma funciona en Android e IOS.

Os dejo el código fuente en  versión PHPrunner 10.1, una copia de la Base de Datos y un enlace para que la podáis probar antes de decidiros a instalarla en vuestros PC’s.

Puedes acceder y probar el aplicativo en: https://fhumanes.com/compra/

Para cualquier duda o explicación ponte en contacto conmigo en mi email [email protected]