🎥 👀 Práctica Registro de Imágenes

Índice

• 🎉 Introducción
• 🐳 Puesta en marcha
• 📊 Infraestructura
• 💻 Casos de uso
  • ⛱ Subir imágenes
  • 🔗 Procesar imágenes
  • 🏪 Guardar post
  • 🌍 Galería de imágenes
  • 🎰 Buscador de imágenes
• 👀 Mapa Web
• ✅ Profiling
• 🚀 Arquitectura
• 🤔 Consideraciones

🎉 Introducción

Práctica final de Rendimiento en Aplicaciones Web, esta práctica consiste en una aplicación web de almacenamiento, visualización y tratamiento de imágenes de tipo PNG.

Esta práctica tiene como base el repositorio de MPWAR-Rendimiento-Docker y Symfony Skeleton, se utilizan las herramientas como: Blackfire, Redis, RabbitMq, Elastic Search y Kibana, además de las librerías como Dropzone y Claviska Simple Image para el desarrollo de algunas funcionalidades.

Para más info ver composer

🐳 Puesta en marcha

Previamente se ha de tener instalado Docker

Para inicializar el proyecto se ha de levantar el entorno siguiendo los siguientes pasos:

* Para levantar el servidor y todos los servicios   
    sudo docker-compose up -d

* Para entrar al contenedor de PHP
    sudo docker exec -it mpwarrendimientoweb_php_1 bash

* Para entrar al contenedor de RabbitMq
    sudo docker exec -it mpwarrendimientoweb_rabbitmq_1 bash
    
* Para entrar al contenedor de Redis
    sudo docker exec -it mpwarrendimientoweb_redis_1 bash
    redis-cli

Una vez se haya levantado el entorno es necesario ejecutar el script de nuestro esquema de datos:

• Para crear la tabla de imageRegister en MySQL ImageRegister.sql

📊 Infraestructura

Los ficheros de configuración de los contenedores y del modelo de datos, se encuentran en:

• DB, PHP, MySql y Nginx

  $ tree docker -d  var/mysql -d  etc/php -d    
  src
  .
  docker
  ├── db
  ├── nginx
  └── php-fpm
  var/mysql   
  ├── mysql
  └── performance_schema
  etc/php
  └── php.ini

💻 Casos de uso

⛱ Subir imágenes

El formulario para la subida de imágenes espera un tag, una descripción y una o más imágenes para subirlas al servidor y las guarda en la carpeta de Upload.

🔗 Procesar imágenes

De la subida de imágenes se realiza unas transformaciones de manera concurrente con RabbitMq, el productor envia mensajes al consumidor para que este se encargue de llamar a Claviska para que realice el procesado de filtros:

* Sepia
* Blanco y negro
* Cítrico
* Imagen con bordes en negro  
* Imagen invertida  

y las guarde en la carpeta de imágenes transformadas.

Para que el consumidor pueda recepcionar los mensajes y así se realice la transformación, se ha de seguir los siguientes pasos:

* Entrar al contenedor de PHP
    sudo docker exec -it mpwarrendimientoweb_php_1 bash
    
* Ejecutar el siguiente comando de bin/console de Symfony
    bin/console rabbitmq:consumer image_processing

🏪 Guardar post

La información de nuestro agregado registro de imágenes (imagen original, sus transformaciones, tags y descripción) la guardamos en MySql y en ElasticSearch, de tal manera la aplicación guardará por cada post 6 imágenes, con los valores de filtros de:

* sin filtro (refiérese a la imagen original)
* sepia
* blanco y negro
* citrico
* con bordes  
* invertida  

🌍 Galería de imágenes

En la Galería de imágenes podemos ver todas las imágenes, sus transformaciones y la información de cada uno de ellas. En nuestro caso de uso de Ver imágenes visualizamos la información en Redis previamente se haya cargado de MySql.

Para consultar la información almacenada en Redis, se ha de seguir los siguientes pasos:

* Para entrar al contenedor de Redis
    sudo docker exec -it mpwarrendimientoweb_redis_1 bash
    redis-cli
    get images

🎰 Buscador de imágenes

Para consultar la información almacenada en la aplicación vamos al buscador que tiene como motor de búsqueda ElasticSearch con frontal gráfico de Kibana.

• Para visualizar los datos en Kibana se ha de importar el index pattern images Image.json

👀 Mapa Web

Estos son los diferentes enlaces que hay definidos en nuestra aplicación web:

• ⛱ Subir imágenes http://localhost:8080/upload
• 🌍 Galería de imágenes http://localhost:8080/gallery
• 🎰 Buscador de imágenes http://localhost:8080/search

✅ Profiling

Para realizar el profiling de la aplicación se han utilizado Blackfire y LightHouse, los resultados obtenidos con estas dos herramientas se encuentran en la carpeta Profiling y las mejoras aplicadas se podrán leer en Profiling.

🚀 Arquitectura

Esta practica sigue el patrón de Arquitectura Hexagonal, para ello se ha estructurado de la siguiente manera:

$ tree

src
.
├── ImageRegister
│   ├── Application
│   │   ├── ImageProcessed
│   │   │   ├── ImageProcessed.php
│   │   │   └── ImageProcessedRequest.php
│   │   ├── SaveImage
│   │   │   ├── SaveImage.php
│   │   │   └── SaveImageRequest.php
│   │   ├── SearchImage
│   │   │   ├── SearchImage.php
│   │   │   └── SearchImageRequest.php
│   │   └── ViewImage
│   │       └── ViewImage.php
│   ├── Domain
│   │   ├── ImageRegisterRepository.php
│   │   ├── Model
│   │   │   ├── Aggregate
│   │   │   │   └── ImageRegister.php
│   │   │   └── ValueObject
│   │   │       ├── ImageId.php
│   │   │       └── Image.php
│   │   └── Service
│   │       └── ImageProcess.php
│   └── Infrastructure
│       ├── Controller
│       │   ├── GalleryImagesController.php
│       │   ├── SearchImagesController.php
│       │   └── uploadImagesController.php
│       ├── Form
│       │   └── ImageType.php
│       ├── Persistence
│       │   ├── ElasticSearch.php
│       │   ├── MysqlDatabase.php
│       │   ├── RedisCache.php
│       │   └── Repository
│       │       ├── ElasticSearchRepository.php
│       │       ├── MySQLImageRegisterRepository.php
│       │       └── RedisCacheRepository.php
│       └── Service
│           └── ClaviskaImageProcessing.php
├── Kernel.php
└── Shared
    └── Infrastructure
        └── RabbitMq
            ├── RabbitMqConsumer.php
            └── RabbitMqProducer.php

🤔 Consideraciones

• Se ha utilizado:
  • Symfony 4.4.10
  • ElasticSearch 6.8