Creación de una WishList utilizando Amazon Elastic Cache
En esta ocasión os voy a enseñar a como crear y implementar Elastic Cache consumiendo los servicios de Amazon Web Servicies.
Elastic Cache es una herramienta muy útil que nos permite almacenar, como dice su propio nombre, en la Cache la información que nosotros queramos de nuestra aplicación.
Sus usos son variados, lo pueden implementar tanto para Session, como para una WishList o un Carrito de Compras.
AWS
Lo primero que necesitamos es tener una cuenta activa en AWS al entrar debemos comprobar que estamos en el Norte de Virginia, lo siguiente que haremos es dirigirnos al apartado de Elastic Cache.
Elastic Cache
Vamos a Acceder a Cluster de Redis que se encuentra en Recursos, ubicado en el panel de la izquierda.
Y vamos a crear un nuevo Cluster
La creación es bastante sencilla y intuitiva.
En el método de creación de clúster vamos a marcar Configuración y Creación de un nuevo clúster, a la par en el modo de clúster lo vamos a dejar en desactivado
En información del clúster lo que haremos es dotarle de un nombre y descripción que nosotros queramos, en mi caso he puesto el nombre de la aplicación y mis iniciales
Ahora en Ubicación vamos ha dejar marcada la nube de AWS y vamos a desmarcar las casillas de Multi-AZ y la de comunicación por error automática también deshabilitada.
Este es el paso más importante de la creación, lo que debemos hacer es fijarnos en el tipo de nodo debemos poner cache.t2.micro, ponemos esto para que el precio de nuestro consumo no aumente.
Ahora lo que debemos hacer es crear un nuevo grupo de subredes, le vamos a dar un nombre que nosotros consideremos adecuado para el proyecto.
Ahora nos quedaría la ubicación de zonas de disponibilidad, en ellas debemos eliminar quitando el check de las demás regiones y quedarnos con la us-east-1a y por ultimo tenemos que dar a especificar zonas de disponibilidad.
Ahora le damos a siguiente y pasamos ya al último paso.
En Administrar grupos de seguridad vamos a seleccionar grupo-ec2-cache-lto (en mi caso)
Por último deshabilitaremos la opción de Copia de seguridad, para evitar futuros costes
Vamos a darle a siguiente y terminamos, al terminar se nos generará un punto de enlace, el cual debemos inyectar en nuestro código para que este sea funcional.
Código
Como he comentado anteriormente, la acción más importantes es la inyección de dicho punto de enlace , en nuestro código, para ello abrimos nuestro proyecto.
Antes que nada debemos tener instalado en nuestro proyecto, estos tres Nuggets.
Vamos a crear una carpeta Helpers y una clase llamada CacheRedisMultiplexer y el using será el siguiente «using StackExchange.Redis;», como podéis observar lo que hacemos es llamar al Conector y que nos cree una nueva conexión, que posteriormente será llamada en el Service, en Connect debemos poner el enlace que nos ha creado el ElasticCache.
public class CacheRedisMultiplexer
{
private static Lazy<ConnectionMultiplexer> CreateConnection =
new Lazy<ConnectionMultiplexer>(() =>
{
return ConnectionMultiplexer.Connect("clusteramazonlto.amnhs3.ng.0001.use1.cache.amazonaws.com:6379");
});
public static ConnectionMultiplexer GetConnection
{
get
{
return CreateConnection.Value;
}
}
}Ahora creamos la carpeta Services y en ella creamos la clase ServiceCacheRedis, lo primero que haremos será inyectar el CacheRedis
private IDatabase database;
public ServiceCacheRedis()
{
this.database = CacheRedisMultiplexer.GetConnection.GetDatabase();
}Ahora vamos a crear los métodos de Agregar , Seleccionar y Eliminar Favoritos.
Agregar
public void AddFavoriteProduct(Productos producto)
{
List<Productos> favoritos;
string jsonProductos = this.database.StringGet("favoritos");
if (jsonProductos == null)
{
//NO HAY DATOS EN CACHE
favoritos = new List<Productos>();
}
else
{
favoritos = JsonConvert.DeserializeObject<List<Productos>>(jsonProductos);
}
favoritos.Add(producto);
jsonProductos = JsonConvert.SerializeObject(favoritos);
this.database.StringSet("favoritos", jsonProductos,TimeSpan.FromMinutes(30));
}Seleccionar
public List<Productos> GetFavoriteProducts()
{
string jsonProductos = this.database.StringGet("favoritos");
if (jsonProductos == null)
{
return null;
}
else
{
List<Productos> favoritos =
JsonConvert.DeserializeObject<List<Productos>>(jsonProductos);
return favoritos;
}
}Eliminar
public void DeleteFavoriteProduct(int idProducto)
{
List<Productos> productos = this.GetFavoriteProducts();
if (productos != null)
{
Productos eliminar =
productos.SingleOrDefault(z => z.IdProducto == idProducto);
//ELIMINAMOS
productos.Remove(eliminar);
if (productos.Count == 0)
{
this.database.KeyDelete("favoritos");
}
else
{
string jsonProductos = JsonConvert.SerializeObject(productos);
this.database.StringSet("favoritos", jsonProductos
, TimeSpan.FromMinutes(30));
}
}
}Ahora lo que haremos es crear un Controller, en mi caso mi Controller se llama ProductosController, ahi inyectaremos el ServiceCacheRedis y pondremos el código.
Inyección
private RepositoryKibunshi repo;
private ServiceCacheRedis service;
public ProductosController(RepositoryKibunshi repo,ServiceCacheRedis service)
{
this.service = service;
this.repo = repo;
}En mi caso he inyectado de mi repository los métodos creados y del servicio.
Ahora creamos los métodos de Seleccionar, eliminar y agregar favortios.
public IActionResult SeleccionarFavorito(int id)
{
Productos favorito = this.repo.FindProducto(id);
this.service.AddFavoriteProduct(favorito);
TempData["MENSAJE"] = "Producto " + favorito.Nombre
+ " almacenado en Cache";
return RedirectToAction("Productos");
}
public IActionResult EliminarFavorito(int id)
{
this.service.DeleteFavoriteProduct(id);
return RedirectToAction("Productos");
}
public IActionResult Favoritos()
{
List<Productos> favoritos = this.service.GetFavoriteProducts();
return View(favoritos);
}Lo que hacemos en seleccionar es filtrar por el id del producto y seleccionarlo, almacenándolo en un TempData.
En eliminar favorito llamamos al service en donde hemos creado el método de Eliminar.
Y en favoritos llamamos al método de favoritos creado.
Por último la vista sería a elección vuestra, poniendo vuestra edición en práctica.
View
<table>
<thead>
<tr>
<th>Productos</th>
<th>Descripcion</th>
<th>Total</th>
@*<th>Acciones</th>*@
</tr>
</thead>
<tbody>
@foreach (Productos productos in Model)
{
<tr>
<td><img src="~/images/@productos.Imagen" /></td>
<td>@productos.Nombre</td>
<td>@productos.Precio €</td>
<td><a asp-controller="Productos" asp-action="EliminarFavorito" asp-route-id="@productos.IdProducto" class="btn btn-danger">Eliminar Favorito</a></td>
</tr>
}
</tbody>
</table>Por último paso, lo que debemos hacer es subir nuestra app o proyecto en un EC2 o en un ElasticBeanstalk.
Subida en ElasticBeanstalk
Vamos hacer un Build en nuestro proyecto y debemos tener instalada la herramienta de AWS ToolKit, si la tenemos lo que debemos hacer es botón derecho sobre nuestro proyecto y publish to AWS ElasticBeanstalk
Y nos saldrá una ventana como la siguiente, en la que debemos asegurarnos de que esta al norte de Virginia.
Le damos siguiente y debemos tener cuidado en el siguiente paso para no tener perdida de dinero en nuestra billetera de AWS
Aquí nos aseguramos de poner t2.micro y utilizar las llaves que hayamos creado y utilicemos habitualmente en AWS, en mi caso tengo activo el RDS es por eso que lo tengo seleccionado, si por algún casual no implementarais RDS no pasaría nada.
Por último el rol viene definido, lo único que debemos hacer es Next, Next y Deploy
Conexión
Si por algún casual Visual Studio no nos abre una ventana emergente en el cual podríamos ver visualmente como se va subiendo nuestra aplicación, lo que debemos hacer es redirigirnos a AWS y buscar ElasticBeanstalk, cuando este listo en el Estado deberá estar en Green y como vemos tenemos el apartado de nuestra URL ya determinado, clicamos y se nos abriría nuestra aplicación.
Resultado
Como podéis observar en la imagen, estoy logeado con mi cuenta de administrador y en mi apartado de favoritos ya tengo seleccionado a los favoritos, vemos que también aparece un botón que servirá para eliminar dichos productos de favorito.
Autor/a: Luis Alberto Torres Olivera
Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma
Centro: Tajamar
Año académico: 2021-2022
Código / recursos utilizados / Otros datos de interés:
GitHub: https://github.com/LuisTorresW