lens up

Lente arriba

1. El huésped ve Gallery UI con otras fotos de invitados. También ve el código QR en la esquina de la aplicación.

2. El huésped escanea el código QR, que lo redirige a Photo Collector UI y allí puede cargar fotos y deseos.

3. Photo Collector UI envía datos al Photo Collector Service .

4. Photo Collector Service carga la foto del invitado en el almacenamiento de blobs.

5. Photo Collector Service agrega los datos de los huéspedes a la base de datos.

6. Photo Collector Service publica el evento en la cola.

7. Gallery Service recibe el evento y lo procesa.

8. Notificación automática Gallery Service sobre una nueva foto en la galería para Gallery UI , y luego Gallery UI agrega una nueva foto de invitado a la colección de la galería.

Panorama general de LensUp:

Descripción:

• Servicios de back-end:

  • Servicio de recopilación de fotografías (.NET Web API)
  • Servicio de galería (.NET Web API)
  • Servicio BackOffice (API web .NET)
  • Simulador de activación de Webhooks (función Azure)

• Aplicaciones de interfaz de usuario:

  • Interfaz de usuario del recopilador de fotos (React.js)
  • Interfaz de usuario de la galería (React.js)
  • Interfaz de usuario de la oficina administrativa (React.js)

• Servicios de Azure:

  • Almacenamiento de mesa
  • Almacenamiento en cola
  • Almacenamiento de blobs

? Cómo ejecutar LensUp localmente

Puede ejecutar el proyecto localmente en su máquina usando Docker. Siga los pasos a continuación para ejecutar la aplicación localmente:

1. Antes de comenzar, debe generar dev-certs para LensUp en su máquina. Esta operación es necesaria para alojar imágenes de ASP.NET Core con Docker a través de HTTPS. Entonces genere un certificado usando estos comandos:

   dotnet dev-certs https -ep " %USERPROFILE%.aspnethttpslens-up.pfx " -p localCertPassword
   dotnet dev-certs https --trust

   Reemplace %USERPROFILE% con el nombre de su computadora. Ejemplo "C:UsersDell Precision 7520.aspnethttpslens-up.pfx"

   Para fines de desarrollo local, usaremos la contraseña localCertPassword . No cambie esto, ya que se usa la misma contraseña en el archivo docker-compose.yml .

   Los comandos anteriores deberían generar un certificado lens-up.pfx y deberían colocarlo en el directorio como se muestra en la captura de pantalla siguiente.

   

   ¡Este es un paso necesario, porque docker-compose se refiere a ese certificado!

2. Instale docker desktop en su máquina (omita si ya lo hizo) .

3. Ejecute su aplicación docker desktop .

4. En el directorio principal del proyecto ( lens-up ), donde se encuentra el archivo docker-compose.yml , ejecute el comando docker-compose build . Esto generará 7 imágenes LensUp necesarias. La primera construcción puede tardar unos minutos (hasta 10 minutos). Después de completar estos pasos, debería ver nuevas imágenes en la aplicación Docker Desktop.

   

5. Después del comando de compilación, ejecute docker-compose up para iniciar toda la infraestructura. Debería ver en Docker Desktop que se han iniciado 7 contenedores relacionados con LensUp.

   

6. Ahora toda la aplicación se está ejecutando en su máquina. Puede utilizar las siguientes direcciones:

   • Servicios de back-end:

     • Arrogancia LensUp.BackOfficeService.API : https://localhost:8085/swagger/index.html
     • Arrogancia de LensUp.GalleryService.API : https://localhost:8083/swagger/index.html
     • LensUp.GalleryService.WebhookTriggerSimulator - http://localhost:8086/
     • Arrogancia de LensUp.PhotoCollectorService.API : https://localhost:8081/swagger/index.html

   • Aplicaciones de interfaz de usuario:

     • LensUp.GalleryService.UI - http://localhost:5001/

     • LensUp.PhotoCollectorService.UI - http://localhost:5002/

       En LensUp.PhotoCollectorService.UI verá una página de error, porque necesita navegar a la vista asociada con una galería específica, que aún no ha creado.

¿Cómo crear tu primera galería y divertirte con LensUp?

1. Vaya a LensUp.BackOfficeService.API : https://localhost:8085/swagger/index.html

2. Utilice Create punto final para crear su galería. El punto final devuelve el identificador de la galería después de su creación (1) .

   

3. Antes de utilizar la galería, debemos activarla. En ese caso, utilice Activate punto final y pase galleryId y endDate en el cuerpo de la solicitud. Recuerde que la endDate está validada y debe ser mayor que la hora actual. De lo contrario, tu galería se considerará caducada. El punto final devuelve el enterCode de la galería después de activarlo (1) .

   

4. Con enterCode de tu galería puedes abrir tu galería usando LensUp.GalleryService.UI - http://localhost:5001/

   Inicie sesión en su galería usando enterCode .

   

5. Ahora puedes escanear el código QR de la galería y cargarle fotos. El código redirige a un formulario para agregar fotos a la galería. Puede utilizar la herramienta del navegador para escanear el código QR o, si no funciona, puede ir a http://localhost:5002/upload-photo/{enterCode} .

   

6. El código QR lo redirige para agregar una foto y un formulario de deseos. Ahora puedes subir tus datos a la galería.

   

7. Después de completar con éxito el formulario, deberíamos ver una notificación de éxito y la foto debería aparecer en la galería.

   

? Lista de tareas pendientes de 100 días

Aspectos generales:

• Configurar la infraestructura monorepo para el backend
• Configurar la infraestructura monorepo para el frontend
• Crear scripts en ejecución de LensUp
• Crear documentación sobre cómo ejecutar LensUp localmente
• Crear vídeo tutorial "Cómo ejecutar LensUp localmente"
• Cree documentación sobre cómo ejecutar LensUp localmente en una red WLAN.

Aspectos de back-end:

• Crear un proyecto de backend común compartido
• Crear un conjunto de reglas de codificación para servicios backend
• Crear paquete de cola en un proyecto común compartido
• Crear paquete Table Storage en un proyecto común compartido
• Paquete Crate Blob en un proyecto común compartido

Servicio de Back Office:

• Crear estructura de proyecto
• Crear agregar punto final de usuario
• Crear agregar punto final de galería
• Crear punto final de activación de galería

Servicio de galería:

• Crear estructura de proyecto
• Crear punto final para obtener información de la galería
• Crear centro de notificaciones de la galería

Servicio de coleccionista de fotografías:

• Crear estructura de proyecto
• Crear agregar foto y punto final de deseos
• Crear cambio de tamaño de imagen

Aspectos frontales:

• Crear un proyecto frontend común compartido
• Cree un conjunto de reglas de codificación para aplicaciones frontend
• Crear componentes compartidos en un proyecto frontend común compartido

Interfaz de usuario de la oficina administrativa:

• Crear panel de administración (opcional)

Interfaz de usuario de la galería:

• Crear inicio de sesión en la página de la galería
• Crear página principal con galería.
• Manejar notificaciones desde el backend
• Agregar animaciones a la galería.
• Agregar carrusel para fotos

Interfaz de usuario del recopilador de fotografías:

• Cree una sola página con agregar foto y formulario de deseos