PhotoStore App

Introducción

Este tutorial le ayudará a crear una aplicación web React llamada PhotoStore App, que le permitirá cargar y descargar imágenes desde su cliente. También contará con las siguientes funcionalidades:

• Todas las funcionalidades de inicio de sesión.
• También podrá ver las imágenes cargadas en diferentes vistas, como miniatura, lista y tamaño completo.
• Podrá ajustar la vista de su panel de control en vista de Cuadrícula o Lista.
• Podrá compartir sus imágenes cargadas con otros usuarios que se hayan registrado en la aplicación.
• Se le presentarán dos paneles de control:
  • Your Gallery: Para mostrar las imágenes cargadas por usted.
  • Shared Gallery: Para mostrar las imágenes que otros usuarios registrados compartieron con usted.
• También tendrá la opción de gestionar el acceso de los usuarios a las imágenes que haya compartido previamente con ellos.

El lado del cliente de la aplicación se verá así:

La lógica de esta aplicación está codificada empleando los siguientes servicios de Catalyst y sus respectivos componentes:

1. Catalyst Serverless:

   • AppSail: Agrupará el código del frontend y del cliente juntos y lo desplegará en AppSail, para alojar toda la aplicación.

2. Catalyst CloudScale:

   • Authentication: Para agregar usuarios finales a la aplicación. Implementará el tipo de Hosted Authentication para manejar el requisito de autenticación.
   • Data Store: Para almacenar los diversos detalles de las imágenes presentes en la aplicación.
   • ZCQL: Para publicar y obtener datos del Data Store.
   • Stratus: Para almacenar las imágenes que se cargan a través de la aplicación.

3. Catalyst Pipelines: Para mantener todo el proyecto de manera fluida en su repositorio de GitHub sin perder nunca un ciclo de vida de desarrollo. Más importante aún, usar Pipelines para desplegar esta aplicación de Catalyst nos permite utilizar Sharp, un paquete dependiente de la plataforma, para convertir las imágenes cargadas en miniaturas. De esta manera, Pipelines maneja todas las dependencias necesarias para usar el paquete y alojarlo en Catalyst, que se ejecuta en una máquina Linux.

Utilizará la consola web de Catalyst y la Interfaz de Línea de Comandos (CLI) de Catalyst para crear esta aplicación.

Flujo de trabajo de la aplicación

El flujo de trabajo de la aplicación ocurre como se describe a continuación:

• Un usuario final se registra en la aplicación.
• Puede ver, descargar o cargar imágenes en el cliente.
• Si elige ver las imágenes, por defecto, las imágenes se mostrarán en la vista de miniaturas. Los detalles que se muestran para proporcionar más contexto sobre las imágenes se gestionan en el Data Store.
• Cuando un usuario carga una imagen desde el cliente, la imagen se sube a Stratus y se referencia mediante su URL de objeto.
• La imagen recién cargada se mostrará en tamaño de miniatura, junto con su nombre, y se puede ver en tamaño completo cuando un usuario hace clic en ella.
• Además, cualquier cambio que realice en su ciclo de desarrollo de la aplicación se reflejará automáticamente en la aplicación presente en su repositorio de GitHub con la ayuda de Catalyst Pipelines.

Flujo de despliegue