Autor: Juan Pablo Fuentes
Codificar Hash con SHA256 en C#
https://hdeleon.net/funcion-para-encriptar-en-sha256-en-c-net/
public class Encrypt{ public static string GetSHA256(string str) { SHA256 sha256 = SHA256Managed.Create(); ASCIIEncoding encoding = new ASCIIEncoding(); byte[] stream = null; StringBuilder sb = new StringBuilder(); stream = sha256.ComputeHash(encoding.GetBytes(str)); for (int i = 0; i < stream.Length; i++) sb.AppendFormat("{0:x2}", stream[i]); return sb.ToString(); } }
Todos los elementos HTML
Arquitectura hexagonal
Arquitectura Hexagonal (Puertos y Adaptadores)
La arquitectura hexagonal, también conocida como arquitectura de puertos y adaptadores, es un estilo de diseño de software propuesto por Alistair Cockburn. Su objetivo es aislar el núcleo de la aplicación (la lógica de negocio) del mundo exterior (interfaces de usuario, bases de datos, APIs externas, etc.), creando un diseño más modular, escalable y fácil de probar.
Conceptos clave
- Core de la aplicación (Dominios):
- Es el núcleo que contiene la lógica de negocio, los casos de uso y las reglas de la aplicación.
- Es completamente independiente de cualquier tecnología o infraestructura externa.
- Puertos:
- Interfaces que definen cómo interactuar con el núcleo de la aplicación.
- Hay dos tipos:
- Puertos de entrada: Permiten interactuar con la aplicación desde el exterior (e.g., controladores de una API o eventos).
- Puertos de salida: Permiten que la aplicación interactúe con servicios externos (e.g., base de datos, APIs de terceros).
- Adaptadores:
- Implementaciones concretas de los puertos. Son responsables de conectar el núcleo con el mundo exterior.
- Adaptadores de entrada: Transforman las solicitudes externas (API, CLI, UI) en comandos comprensibles para el núcleo.
- Adaptadores de salida: Implementan las interacciones con servicios externos (e.g., repositorios de datos, APIs externas).
- Implementaciones concretas de los puertos. Son responsables de conectar el núcleo con el mundo exterior.
- Separación de preocupaciones:
- Los adaptadores y la infraestructura están separados del núcleo. Esto permite cambiar tecnologías o interfaces externas sin afectar la lógica de negocio.
Beneficios de la arquitectura hexagonal
- Independencia tecnológica:
- Puedes cambiar tecnologías (base de datos, frameworks) sin modificar el núcleo.
- Facilidad de pruebas:
- El núcleo puede ser probado de forma aislada con simulaciones o stubs.
- Escalabilidad:
- Es fácil añadir nuevos adaptadores o integrar nuevos sistemas externos.
- Mantenimiento:
- Reduce la complejidad al desacoplar la lógica de negocio de las dependencias externas.
Ejemplo práctico
Imaginemos un sistema para gestionar órdenes de compra. Implementaremos:
- Backend (C#): Con un núcleo que maneja órdenes y un adaptador para la base de datos.
- Frontend (React): Como adaptador de entrada para interactuar con el usuario.
Backend con C# (Puertos y Adaptadores)
Estructura del proyecto
/Core
- IOrderService.cs (Puerto de entrada)
- IOrderRepository.cs (Puerto de salida)
- OrderService.cs (Implementación del servicio)
- Models/
- Order.cs
/Infrastructure
- DatabaseOrderRepository.cs (Adaptador de salida)
/API
- OrderController.cs (Adaptador de entrada)
Código
- Core: Definición de puertos
- Puerto de entrada (IOrderService):
public interface IOrderService { void CreateOrder(Order order); Order GetOrderById(Guid orderId); }
- Puerto de salida (IOrderRepository):
public interface IOrderRepository { void Add(Order order); Order FindById(Guid orderId); }
- Core: Lógica de negocio
- Modelo de Orden:
public class Order { public Guid Id { get; set; } public string ProductName { get; set; } public int Quantity { get; set; } public decimal Price { get; set; } }
- Implementación del servicio:
public class OrderService : IOrderService { private readonly IOrderRepository _orderRepository; public OrderService(IOrderRepository orderRepository) { _orderRepository = orderRepository; } public void CreateOrder(Order order) { // Validaciones de negocio if (order.Quantity <= 0) throw new ArgumentException("La cantidad debe ser mayor a cero."); _orderRepository.Add(order); } public Order GetOrderById(Guid orderId) { return _orderRepository.FindById(orderId); } }
- Infraestructura: Adaptador de salida
- Adaptador para la base de datos:
public class DatabaseOrderRepository : IOrderRepository { private readonly List<Order> _orders = new List<Order>(); public void Add(Order order) { _orders.Add(order); } public Order FindById(Guid orderId) { return _orders.FirstOrDefault(o => o.Id == orderId); } }
- API: Adaptador de entrada
- Controlador:
[ApiController] [Route("api/orders")] public class OrderController : ControllerBase { private readonly IOrderService _orderService; public OrderController(IOrderService orderService) { _orderService = orderService; } [HttpPost] public IActionResult CreateOrder([FromBody] Order order) { _orderService.CreateOrder(order); return Ok("Orden creada con éxito."); } [HttpGet("{id}")] public IActionResult GetOrderById(Guid id) { var order = _orderService.GetOrderById(id); return order != null ? Ok(order) : NotFound(); } }
Frontend con React (Adaptador de entrada)
Estructura del proyecto
/components
- OrderForm.jsx
- OrderList.jsx
/services
- api.js
Código
- Servicio para interactuar con el backend (
api.js
):const BASE_URL = "http://localhost:5000/api/orders"; export const createOrder = async (order) => { const response = await fetch(`${BASE_URL}`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(order), }); return response.json(); }; export const getOrderById = async (id) => { const response = await fetch(`${BASE_URL}/${id}`); return response.json(); };
- Formulario para crear órdenes (
OrderForm.jsx
):import React, { useState } from "react"; import { createOrder } from "../services/api"; const OrderForm = () => { const [productName, setProductName] = useState(""); const [quantity, setQuantity] = useState(1); const [price, setPrice] = useState(0); const handleSubmit = async (e) => { e.preventDefault(); const order = { productName, quantity, price }; await createOrder(order); alert("Orden creada con éxito."); }; return ( <form onSubmit={handleSubmit}> <input type="text" placeholder="Nombre del producto" value={productName} onChange={(e) => setProductName(e.target.value)} /> <input type="number" placeholder="Cantidad" value={quantity} onChange={(e) => setQuantity(e.target.value)} /> <input type="number" placeholder="Precio" value={price} onChange={(e) => setPrice(e.target.value)} /> <button type="submit">Crear Orden</button> </form> ); }; export default OrderForm;
Ventajas en este ejemplo
- Backend:
- La lógica de negocio está aislada (
OrderService
) y puede probarse fácilmente con mocks. - Cambiar la base de datos o usar un servicio externo solo requiere modificar
DatabaseOrderRepository
.
- La lógica de negocio está aislada (
- Frontend:
- El adaptador para interactuar con el backend (
api.js
) desacopla los detalles de implementación del resto del código.
- El adaptador para interactuar con el backend (
Para saber más:
https://salesystems.es/arquitectura-hexagonal/
https://www.hackio.com/blog/que-es-arquitectura-hexagonal-en-programacion
https://medium.com/@edusalguero/arquitectura-hexagonal-59834bb44b7f
Ejercicio useForm
Crear un formulario para poner la garantía de un electrodoméstico. Tiene dos campos ‘años’ y ‘precio’. Los dos son requeridos y el primero tiene que estar entre 2 y 5 y el segundo ser mayor de 500.
Cuando le demos a enviar que envíe los datos por post a ‘https://mitienda.com/garantia’
CRUD completo
Tenemos la siguiente tabla:
Producto
id, nombre, precio, referencia
Vamos a hacer un CRUD que nos de el mantenimiento completo. Lo hacemos, de momento, con json-server. Podéis ‘buscar inspiración’ en el de alumnos.
Una vez funcione:
- El id lo pone el json server ¿Qué tendríamos que modificar para que fuera lo más parecido a un id autonumérico?
- Vamos a añadir un campo de buscar. Lo que hará será filtrar los productos que tengan la cadena en el nombre
Repositorio React
CRUD sencillo
Vamos a hacer un CRUD para la siguiente ‘base de datos’
{ "notes": [ { "id": 1, "content": "HTML is easy", "date": "2023-01-03T10:30:11.414Z", "important": false }, { "id": 2, "content": "Browser can execute only JavaScript", "date": "2019-05-30T18:39:34.091Z", "important": false }, { "id": 3, "content": "GET and POST are the most important methods of HTTP protocol", "date": "2023-01-09T09:29:26.131Z", "important": true }, { "content": "Cchuetes", "date": "2022-12-18T20:25:10.598Z", "important": true, "id": 4 }, { "id": 5, "content": "Comprar pan", "date": "2023-01-09T08:46:37.794Z", "important": false }, { "content": "Nueva nota", "date": "2023-01-09T09:29:21.122Z", "important": false, "id": 6 } ] }
De momento solo gestionamos el contenido. La fecha la ponemos automáticamente y si es importante o no lo dejamos de lado, ponemos siempre ‘false’.
CRUD comentado
import React, { useState, useEffect } from 'react'; import axios from 'axios'; const App = () => { // Estado de los posts. Aquí cargaremos la información de la api // Parecido a la de tareas const [posts, setPosts] = useState([]); // Para el formulario, en este caso todos los campos dentro de un objeto const [nuevoPost, setNuevoPost] = useState({ title: '', body: '' }); // Esto se ejecuta la primera vez useEffect(() => { // Llamamos a la función que carga los posts obtenerPosts(); }, []); // Aquí tenemos tres funciones porque son las tres operaciones que podemos hacer: // Leer, añadir y eliminar. // Es mejorable, pero funciona // Llamamos con axios a la api y ponemos lo obtenido en el estado const obtenerPosts = async () => { try { const response = await axios.get('http://localhost:4000/posts'); setPosts(response.data); } catch (error) { console.error('Error al obtener posts:', error); } }; // LLamamamos a la api con POST y los datos del formulario const agregarPost = async () => { try { await axios.post('http://localhost:4000/posts', nuevoPost); // Ponemos a cero el formulario setNuevoPost({ title: '', body: '' }); // Cargadmos los datos de la api (podríamos hacerlo directamente en el estado) obtenerPosts(); } catch (error) { console.error('Error al agregar post:', error); } }; // Llamamos a la api con DELETE const eliminarPost = async (id) => { try { await axios.delete(`http://localhost:4000/posts/${id}`); // Cargamos los datos de nuevo obtenerPosts(); } catch (error) { console.error('Error al eliminar post:', error); } }; return ( <div> <h1>Posts</h1> <ul> {/* Lista de todos los posts con su 'key */} {posts.map((post) => ( <li key={post.id}> <h2>{post.title}</h2> <p>{post.body}</p> <button onClick={() => eliminarPost(post.id)}>Eliminar</button> </li> ))} </ul> {/** Formulario, el change no llama a ninguna función, directamente cambia el estado en * los dos campos. Yo prefiero hacerlo con una sola función. */} <h2>Agregar nuevo post</h2> <input type="text" value={nuevoPost.title} onChange={(e) => setNuevoPost({ ...nuevoPost, title: e.target.value })} placeholder="Título" /> <textarea value={nuevoPost.body} onChange={(e) => setNuevoPost({ ...nuevoPost, body: e.target.value })} placeholder="Cuerpo" /> <button onClick={agregarPost}>Agregar post</button> </div> ); }; export default App;
db.json
{ "posts": [ { "id": "1", "title": "Post 1", "body": "Cuerpo del post 1" }, { "id": "29d4", "title": "Post 3", "body": "holi" }, { "id": "e4da", "title": "dfsdfsdfsd", "body": "asdasd" } ] }
Ejemplo useref
import React, { useRef } from "react"; function App() { // Crear una referencia con useRef const inputRef = useRef(null); // Función para obtener el valor actual del input const handleGetValue = () => { alert(`Valor actual del input: ${inputRef.current.value}`); }; // Función para cambiar el valor del input const handleChangeValue = () => { inputRef.current.value = "Nuevo valor dinámico"; alert("El valor del input ha sido cambiado"); }; return ( <div> <h1>Ejemplo de obtener y cambiar valor con useRef</h1> {/* Input con referencia */} <input ref={inputRef} type="text" placeholder="Escribe algo aquí..." /> <br /> {/* Botón para obtener el valor */} <button onClick={handleGetValue}>Obtener valor</button> {/* Botón para cambiar el valor */} <button onClick={handleChangeValue}>Cambiar valor</button> </div> ); } export default App;