Frontend - Web de usuarios

Por su parte, para el almacenamiento de las im´agenes, se utiliz´o S3 (Amazon Simple Storage Service) de AWS. El mismo permite el almacenamiento de objetos, y adem´as ofrece escalabilidad, disponibilidad de datos, seguridad y rendimiento.

Asimismo se utiliz´o la estrategiamultipartepara el almacenamiento de las im´age- nes. La cargamultiparte permite cargar un solo objeto como un conjunto de partes.

Utilizar esta estrategia proporciona varias ventajas, como por ejemplo, provee un mayor rendimiento, ya que se pueden cargar las partes de forma simult´anea lo que aumenta el rendimiento.

de contexto de lenguajes entre las diferentes aplicaciones.

Configuraci´on

Para crear el proyecto, se utiliz´o la herramientaCLI (Command Line Interface) create-next-app [38]. Se utiliz´o este comando ya que es mantenido oficialmente por los creadores del framework y el mismo configura e inicializa el proyecto de forma autom´atica en cuesti´on de segundos.

Por otro lado, al igual que el backend, se utiliz´o el manejador de paquetes pa- quetes JavaScript Yarn para la instalaci´on de nuevas dependencias. Tanto para las aplicaciones de frontend, backend y la extensi´on de Chrome, se utilizo el mismo manejador, para evitar diferencias entre las diferentes aplicaciones.

M´odulos

Esta aplicaci´on se separ´o en m´odulos peque˜nos como se muestra en el diagrama a continuaci´on:

Figura 6.8: Vista de m´odulos del sitio web de usuarios

Cada uno de estos m´odulos cumple una responsabilidad. A continuaci´on se de- tallan los m´as importantes:

Api: Contiene los endpoints de la API service. Tener definidos los API end- points en un mismo lugar facilita la mantenibilidad.

Components: Contiene todos los componentes de la app. Son peque˜nas piezas independientes que abarcan una funcionalidad y/o una vista.

Hooks: Consiste de custom hooks de React. Son funciones que proporcionan un estado y un ciclo de vida a otros componentes funcionales.

Pages: Representan la vista de una p´agina. Son componentes de React que son contenedores de todos aquellos componentes mas peque˜nos que una vista abarca. Los nombre de archivo de estos componentes corresponde a la ruta definida para el usuario. En ellos es donde se llama a los endpoints del backend para cargar la informaci´on.

Public: En este m´odulo se almacenan todas las im´agenes o archivos p´ublicos que el sitio contiene.

Comunicaci´on

A diferencia de las cl´asicas aplicaciones web client-side rendering, la comunica- ci´on de la aplicaci´on y el backend tiene una peque˜na diferencia. Al ser server-side rendering, las llamadas al backend se hacen desde un servidor de Node.js que el framework Next.js crea autom´aticamente.

Figura 6.9: Comunicaci´on entre sitio web y backend

Cuando se realiza la petici´on HTML inicial desde el navegador, la misma es recibida por la funci´on getInitialProps, la cual se ejecuta del lado del servidor de Next.js. La responsabilidad de la misma es de obtener los datos necesarios para la construcci´on de la p´agina. Una vez que la misma obtiene los datos necesarios, se transfieren los mismos a la aplicaci´on deReact, que es la responsable de agregar los datos en los componentes de la interfaz de usuario.

Luego que elHTML es construido, este es enviado al navegador. Una vez recibi- do, el mismo se ejecuta del lado del cliente para hacer la hidrataci´on, es decir, se le agrega los event listeners al mismo.

En esta ocasi´on, el 99 % de las llamadas a los endpoints del backend est´an hechas desde el lado del sevidor de Next.js, con la finalidad de mejorar el tiempo de carga inicial de la p´agina. Solo el endpoint de realizar una consulta fue llamado desde el lado del cliente, ya que no se quer´ıa volver a cargar la p´agina al realizar la request a dicho endpoint.

Hosting y costos

Para hostear la aplicaci´on, se decidi´o utilizar una instancia de EC2 (Amazon Elastic Compute Cloud), al igual que el backend. Entrando en detalle, los tres sis- temas est´an almacenados en la misma instancia, a trav´es de una imagen de Docker.

De esta forma y al no ser sistemas complejos, se reducir´ıan los costos de tener que mantener diferentes instancias de servicios deAWS.

A su vez, para reducir costos, se tomaron ciertas decisiones en conjunto con el cliente que se detallan a continuaci´on.

Por un lado, a la hora de implementar la funcionalidad del buscador de propieda- des, el mismo por requisito, deb´ıa de tener unautocomplete. Se analizaron diferentes librer´ıas que brindan la funcionalidad como Google Places y OpenStreetMap. Am- bas cuentan con ciertas ventajas y desventajas que se encuentran en Anexos 13.7.

An´alisis de comparativa de autocompletadores

A modo de resumen, se decidi´o que no se utilizar´ıaOpenStreetMap por m´as que sea gratuito ya que no contiene todos los barrios de Uruguay, niGoogle Places API, debido a que podr´ıa generarle un gasto extra a la inmobiliaria. Por cada caracter ingresado se le hace una petici´on, por lo que si hay muchas personas en el sitio web, podr´ıa aumentarle el costo. Por estos motivos, se decidi´o implementar un sistema propio deautocomplete, donde los barrios se guardaron en la base de datos del bac- kend y la funcionalidad deautocomplete fue implementada por el equipo.

Por otro lado, se debi´o analizar una situaci´on similar al mostrar el mapa en este sitio. Por cada vez que se renderiza la p´agina de ver una propiedad, el mismo pide un request del mapa por lo que se genera un m´ınimo gasto, pero si el sitio llega a ser muy visitado, este gasto se podr´ıa elevar.

Se analizaron diferentes plataformas de mapas como MapBox y Google Maps.

En la secci´on de Anexos 13.7. An´alisis de comparativa de mapas se encuentran en detalle las ventanas y desventajas de las mismas. Se opt´o por utilizar Google Maps pero con una leve diferencia. Cuando se abre la p´agina de ver una propiedad, el mismo no muestra el mapa pero s´ı una imagen del mismo. Esta petici´on es realizada a la API deGoogle Maps Static, lo cual es menos costosa que Google Maps.

Figura 6.10: Costos de Google Maps y Google Static Maps

Si el usuario hace click en dicha imagen del mapa, se quita la imagen y se renderiza el mapa. De esta forma, se evita que los usuarios que no est´en interesados en ver la ubicaci´on de la propiedad no se le renderize el mapa. De tal manera, no se le genera unarequest innecesaria a laAPI por las personas que no est´en interesadas, pero a aquellas personas que si est´en interesadas, se les muestre.