Esta es la lista de la compra informatizada.
El objetivo es que esté accesible y compartida en todo momento.
Los usuarios pueden registrarse ellos mismos y si crean un Grupo (familia, amigos, etc.) serán Administradores de dicho grupo, salvo que ellos decidan que sea otro miembro del grupo.
El Administrador del grupo será quién vaya dando de alta usuarios a dicho grupo (por el email hará el acceso). El usuario, previamente debe estar registrado.
Cada grupo tiene su conjunto de productos de compra y la lista se realizará en base a este catálogo de productos. Los productos pueden tener su fotografía de cara a describir menos de ellos.
Espero y deseo que os sea útil.
PASOS:
- Registrase, para disponer de un login y password de acceso a la aplicación.
- Dependiendo del objetivo:
- Su objetivo es crear un nuevo grupo, acceda al sistema y cree un nuevo grupo.
- Su objetivo es pertenecer a un grupo existente tendrá que comunicar –fuera de la aplicación- con el Administrador de ese grupo para que le incluya en el grupo.
Además de poner a prueba PHPRunner para aplicaciones móviles, expliqué que cambios había que hacer para poderla instalar como una aplicación Web en el móvil.
Yo pude contemplar, y espero que vosotros también, que estas aplicaciones creadas con PHPRunner podían funcionar, pero se alejaban bastante de las típicas aplicaciones que disfrutábamos en los móviles y estaban entre una aplicación de escritorio y de móvil.
Cuando ya dispuse de conocimientos en React, me propuse ver esta misma aplicación en este nuevo entorno de desarrollo y este artículo viene a explicar cómo lo he hecho.
Pasar una aplicación típica de móvil realizada en PHPrunner a React, para su funcionamiento, principalmente, para el móvil y para usuarios del móvil.
DEMO (PHPRunner): https://fhumanes.com/compra/
DEMO (REACT): Compra (realizada por FHumanes en REACT)
Comparten la base de datos y si no deseáis daros de alta podéis utilizar los usuarios «user1» y «user2». El Login/User Name y Password son iguales. Os pido que no destruyáis los datos de estos usuarios.
Por favor, dedicar un momento para leer la explicación del funcionamiento del aplicativo para diferenciar qué es un «Producto» y qué un «Artículo de la Lista» y la gestión de los Grupos.
Para desarrollar este ejemplo practiqué con la nueva bibliotecas de Material UI y además tuve que resolver los siguientes apartados:
- Disponer de opciones de menú para usuario identificado y sin identificar. Menú dinámico según su estado.
- Establecer una solución para la identificación del usuario y definición y gestión de un «token» que identifica en el Server las credenciales del usuario.
- Definir y establecer un mecanismo similar a las cookie de sesión y almacenamiento del estado para cada usuario. Se mantiene el estado asociado al «token» generado y la persistencia se hace en una tabla de base de datos.
- Definir un mecanismo (ahora en el cliente) para mantener el estado del aplicativo. Nunca se almacena ni en «contexto» y en el «Almacén local», la password y datos significativos del usuario conectado.
- Gestión de subida de imágenes y reducción de estas para ajustarse a las características de la aplicación. Se ha resulto un problema (general y de siempre) que tiene PHPRunner que las imágenes de móvil, si es vertical y se recorta, se pierde la orientación de la imagen.
- Se establece formar dinámicas de los botones de acciones, dependiendo del estado del producto o del usuario conectado y sus privilegios.
- Se establece cómo hacer cambios dinámicos en texto y botones dependiendo del estado o usuario.
- Se resuelve la configuración para la instalación automática de la aplicación en el móvil.
Para hacer este ejemplo he tenido que revisar muchas publicaciones (existe una cantidad muy grande y de calidad, de publicaciones) y combinarlas para hacer una gestión de identidad parecida a la que hace PHPRunner. Tenemos que tener siempre presente, que ambas soluciones comparten el modelo de datos y sus datos serán gestionable por ambos sistemas.
La parte del Server en PHP he seguido las indicaciones de este artículo publicado hace un tiempo.
La parte que se ha añadido para responder a la aplicación REACT es:
La parte del «Include», es la configuración de la solución, para
disponer de la personalización del entorno de Desarrollo y el de
Producción.
Los otros 2 ficheros son las funciones que se utilizan. En
«DbCompra.php», son todas las que acceden a la base de datos y el otro,
las funciones que no acceden a base de datos.
En directorio «libs» es el FrameWork SLIM v4.X y en V1, es el interfaz de la aplicación con su «.htaccess» para que todas las peticiones vayan al fichero «index.php» y el fichero «index.php», todas la peticiones posibles y sus controles de validación de parámetros y y llamadas al resto de funciones.
Para la parte de REACT, su explicación es:
Esta figura representa el proyecto en MS Visual Studio, una vez que el ejemplo ha sido «instalado». ver comandos aquí.
(1).- En donde hay que configurar para cuando la aplicación no va a ejecutarse en el «Document Root» , del servidor web.
(2).- Ficheros que se utilizarán para construir el directorio «build» y donde se define el fichero «index.html», «manifiesf.json», los logos e iconos, así como el fichero «.htaccess», que van a requerir para su despliegue.
(3).- Son los fuentes del programa. Donde vamos a trabajar para construir la solución.
(4),(5) y (6).- son los directorio que yo he definido para distribuir mis ficheros . En (4) tengo la definición de todas las pantalla y sus controles.
(5).- Defino en «Contexto», para guardar información entre pantallas, del usuario conectado
(6).- Definido el control de qué opciones son de usuario sin identificación y usuario identificado
(7).- Primer ejecutable que se lanza cuando se accede y que tiene la relación de las url’s y los ficheros del código a ejecutar.
En el directorio «FrontEnd» está todo el código de React.
En el directorio «BackEnd» está el código del PHPRunner y el directorio «restapi» (dentro del directorio «files»), está el desarrollo PHP+SLIM 4, que responde a la aplicación de REACT.
En el directorio «Documentos», están los ficheros de imágenes de los Productos y cuando se genere el proyecto de PHPRunner, hay que desplegar ese fichero en el path "Documentos/Compra", directamente en el Document Root del web server.
Si tenéis algún problema en cargar el ejemplo, por favor, escribirme a mi email y gustosamente, os ayudaré.