DEV Community: Mauricio

MaterialUI. El componente App Bar y la propiedad position="fixed"

Mauricio — Mon, 25 Mar 2024 23:50:58 +0000

En mi proyecto de React, he utilizado el componente App Bar de MaterialUI como barra de navegación. Al emplear position="fixed", el App Bar se mantiene visible en la parte superior de la ventana del navegador, mientras el usuario explora el sitio web.

Ésta propiedad tiene un pequeño detalle, la dimensión del elemento App Bar no afecta al resto de la página. Esto puede causar que alguna parte del contenido sea invisible detrás de la barra de aplicaciones.

Una solución rápida es colocar cualquier elemento, como por ejemplo un "div", que se renderice con la propiedad "height" equivalente a la altura de la App Bar para cubrir éste espacio, es una salida sencilla.

La documentación de MaterialUI brinda tres posibles soluciones también:

https://mui.com/material-ui/react-app-bar/#fixed-placement

Pero ninguna de éstas soluciones contempla que la App Bar cambie de tamaño, como puede ocurrir en el caso de un diseño responsivo, en donde los elementos se pueden reagrupar dependiendo del espacio disponible.

Propiedad "heigh" dinámica

La solución que desarrollo aquí se lleva a cabo utilizando "Redux" pero se podría hacer utilizando las Props de los componentes.

Componente SpaceFixedNavbar.jsx

Creo un componente llamado "SpaceFixedNavbar", será el componente que tomará la propiedad "height" que tenga la App Bar.

import React, { useEffect } from "react";
import { useSelector } from "react-redux";

export const SpaceFixedNavbar = () => {
    const navbarHeight = useSelector((state) => state.heightNavBar);

    // useEffect(() => {
    //  console.log(navbarHeight);
    // }, [navbarHeight]);

    return (
        <div
            style={{
                display: "block",
                width: "100%",
                height: navbarHeight || "56px" ,
                backgroundColor: "#E53170",
            }}></div>
    );
};

Componente App.jsx

Importo el componente "SpaceFixedNavbar" en el componente App.jsx; que se encargará de renderizarlo en cada componente en donde también se renderice la "NavBar"

function App() {
return (
    <>
    <BrowserRouter>
      <SpaceFixedNavbar/>
      <NavBar/>
        <Routes>
          <Route exact path="/" element={<Home/>} />
          <Route path="/AboutUs" element={<AboutUs/>} />
          <Route exact path="/Login" element={<Login/>} />

Componente NavBar.jsx

En éste componente se utiliza "ResizeObserver" para monitorear el tamaño de la App Bar

export default function NavBar() {
    const dispatch = useDispatch();

    const componentRef = useRef(null);

    useEffect(() => {
        handleNavbarHeight(componentRef, dispatch);
    }, []);

    return (
        <AppBar
            position="fixed"
            ref={componentRef}
        >
            {...}
        </AppBar>
    );
}


const handleNavbarHeight = (componentRef, dispatch) => {
    const resizeObserver = new ResizeObserver(entries => {
        if (entries[0]?.target) {
        const newHeight = entries[0].target.offsetHeight;
        // console.log("Nuevo valor de altura:", newHeight);
        dispatch(setHeight(newHeight));
        }
    });

    if (componentRef.current)
        { resizeObserver.observe(componentRef.current); }

    return () => { resizeObserver.disconnect(); };
};

Componente heightNavBar.js

Éste es el archivo "action" de Redux.

export const SET_HEIGHT = 'SET_HEIGHT';

export const setHeight = (height) => ({
    type: SET_HEIGHT,
    payload: height,
  });

Componente RootReducer.js

const initialState = {
    {...}
    heightNavBar: 0,
};

const rootReducer = (state = initialState, action) => {
    switch (action.type) {
        {...}

        case SET_HEIGHT:
            return {
                ...state,
                heightNavBar: action.payload,
            };

        default:
            return { ...state };
    }
};

export default rootReducer;

Finalizado

Finalmente se puede ver que el componente renderizado adapta su altura de acuerdo a la altura que tiene la NavBar.

Ahora que lo he terminado, creo que quedó algo largo para la pequeña funcionalidad que desempeña. Siéntete libre para proponer una solución alternativa más corta en los comentarios. Saludos!

Introducción a los principios S.O.L.I.D.

Mauricio — Sun, 25 Feb 2024 17:29:49 +0000

El aprendizaje de la programación es un viaje emocionante lleno de descubrimientos. Desde entender la dinámica de las variables y tipos de datos hasta dominar los operadores condicionales y los ciclos, cada paso nos acerca más al dominio de este arte digital. Sin embargo, hay un aspecto fundamental que distingue a los programadores junior de los senior: la capacidad de escribir código limpio, mantenible y escalable.

En este artículo, exploraremos uno de los pilares fundamentales para alcanzar esta excelencia en la programación: los principios SOLID. A menudo escuchamos sobre estos principios, pero ¿qué significan realmente y cómo pueden transformar nuestra forma de codificar?

Antes de sumergirnos en los principios SOLID, es importante comprender los fundamentos de la programación orientada a objetos (POO), el paradigma que ha dominado la escena del desarrollo de software desde los años 70. En la POO, modelamos nuestros programas como un conjunto de objetos que interactúan entre sí, representando entidades del mundo real. Estos objetos tienen atributos (propiedades) y comportamientos (métodos), lo que nos permite organizar y modularizar nuestro código de manera más efectiva.

Uno de los conceptos clave en la POO son las clases, que actúan como plantillas para la creación de objetos. Cada objeto es una instancia de una clase, heredando sus atributos y comportamientos. Además, los pilares de la POO, como la abstracción, el encapsulamiento, la herencia y el polimorfismo, nos proporcionan las herramientas necesarias para escribir código modular y flexible.

Ahora, adentrémonos en los principios SOLID:

Principio de Responsabilidad Única (SRP): Este principio establece que una clase debe tener una sola razón para cambiar. En otras palabras, cada clase debe tener una única responsabilidad o función en el sistema. Esto promueve la cohesión y evita que una clase se convierta en un "cajón de sastre" con múltiples funcionalidades.

Principio de Abierto/Cerrado (OCP): Según este principio, una clase debe estar abierta para su extensión pero cerrada para su modificación. Esto significa que debemos diseñar nuestras clases de manera que podamos agregar nuevas funcionalidades sin necesidad de modificar el código existente. La extensión se logra a través de la herencia, la composición u otros mecanismos de extensibilidad.

Principio de Sustitución de Liskov (LSP): Este principio establece que los objetos de un programa deben poder ser reemplazados por instancias de sus subtipos sin alterar la corrección del programa. En otras palabras, los objetos deben comportarse de manera consistente con su interfaz o contrato, independientemente de su tipo concreto.

Principio de Segregación de Interfaces (ISP): Este principio postula que una interfaz debe ser lo suficientemente específica para los clientes que la utilizan. En lugar de tener interfaces monolíticas que contengan múltiples métodos, debemos dividir las interfaces en conjuntos cohesivos de métodos relacionados, lo que permite a los clientes implementar solo los métodos que necesitan.

Principio de Inversión de Dependencias (DIP): Por último, el principio de inversión de dependencias establece que los módulos de alto nivel no deben depender de módulos de bajo nivel, sino de abstracciones. En lugar de que los detalles dependan de las abstracciones, las abstracciones deben depender de los detalles. Esto fomenta la modularidad, la flexibilidad y la reutilización del código.

Al comprender y aplicar estos principios, podemos escribir código más limpio, modular y resistente al cambio. Los principios SOLID son herramientas poderosas en el arsenal de todo desarrollador, guiándonos hacia la excelencia en la programación orientada a objetos.

APIs: Conceptos fundamentales y su importancia en el desarrollo de software

Mauricio — Wed, 07 Feb 2024 16:06:23 +0000

Las APIs (Interfaces de Programación de Aplicaciones, por sus siglas en inglés) son elementos fundamentales en el mundo del desarrollo de software. Permiten la comunicación entre diferentes sistemas y la transferencia de datos de manera eficiente y estandarizada. En este artículo, exploraremos en profundidad qué son las APIs, cómo funcionan, y por qué son tan importantes en el desarrollo de aplicaciones modernas.

¿Qué son las APIs?

En su definición más básica, una API es una interfaz que permite que dos sistemas se comuniquen entre sí. Esta comunicación puede incluir el intercambio de datos, solicitudes de servicios o la ejecución de funciones específicas. Las APIs actúan como una capa de abstracción que oculta la complejidad interna de un sistema, permitiendo que otros sistemas interactúen con él de manera sencilla y estandarizada.

Funcionamiento de las APIs

Las APIs funcionan mediante el uso de solicitudes y respuestas. Un sistema realiza una solicitud a través de la API, especificando qué acción desea realizar o qué datos necesita. La API procesa esta solicitud y devuelve una respuesta que contiene la información solicitada o indica el resultado de la acción solicitada. Esta comunicación sigue ciertos estándares y protocolos, como HTTP, que facilitan la interoperabilidad entre sistemas.

Importancia de las APIs en el desarrollo de software

Las APIs desempeñan un papel crucial en el desarrollo de software por varias razones:

Reutilización de funcionalidades: Las APIs permiten a los desarrolladores aprovechar funcionalidades existentes en otros sistemas, en lugar de tener que desarrollarlas desde cero. Esto ahorra tiempo y recursos, y acelera el proceso de desarrollo.
Integración de sistemas: Las APIs facilitan la integración de diferentes sistemas y aplicaciones, permitiendo que trabajen juntos de manera armoniosa. Esto es especialmente importante en entornos empresariales, donde múltiples sistemas deben intercambiar datos y colaborar entre sí.
Escalabilidad: Al utilizar APIs, los sistemas pueden escalar más fácilmente, ya que pueden aprovechar servicios externos para manejar tareas específicas, como el procesamiento de pagos o la generación de mapas. Esto permite que las aplicaciones crezcan y se adapten a las demandas cambiantes del negocio.
Facilitan la innovación: Las APIs abren la puerta a la innovación al permitir que los desarrolladores construyan sobre la base de servicios existentes. Esto fomenta la creatividad y la experimentación, y puede conducir al desarrollo de nuevas y emocionantes aplicaciones y servicios.

Tipos de APIs

Existen diferentes tipos de APIs, cada uno diseñado para un propósito específico. Algunos de los tipos más comunes incluyen:

APIs REST: Basadas en la arquitectura REST (Representational State Transfer), estas APIs utilizan el protocolo HTTP para la comunicación y son ampliamente utilizadas en el desarrollo web.
APIs SOAP: Basadas en el protocolo SOAP (Simple Object Access Protocol), estas APIs ofrecen un enfoque más estructurado y formal para la comunicación entre sistemas.
APIs públicas y privadas: Las APIs pueden ser públicas, disponibles para cualquier persona que desee acceder a ellas, o privadas, que requieren autenticación para su acceso.
APIs locales y remotas: Las APIs locales se ejecutan en el mismo entorno que el sistema que las utiliza, mientras que las APIs remotas se encuentran en sistemas externos y se accede a ellas a través de la red.

Conclusiones

Las APIs son una parte fundamental del desarrollo de software moderno, permitiendo la integración, la reutilización de funcionalidades y la escalabilidad de las aplicaciones. Comprender cómo funcionan las APIs y cómo utilizarlas de manera efectiva es esencial para cualquier desarrollador de software en la actualidad. Con el crecimiento continuo de la tecnología y la proliferación de servicios en la nube, las APIs seguirán desempeñando un papel crucial en el futuro del desarrollo de aplicaciones.

Página web | Sitio web | Aplicación web

Mauricio — Mon, 03 Jul 2023 16:00:54 +0000

En el contexto del desarrollo web, es importante comprender las diferencias entre página, sitio y aplicación, ya que son conceptos distintos pero interrelacionados.

Una página web es un documento individual que se muestra en un navegador web. Puede contener texto, imágenes, enlaces y otros elementos multimedia. Una página web es la unidad básica de contenido en la web y se accede a través de una URL específica. Por ejemplo, una página web puede ser la página de inicio de un sitio web, una publicación de un blog o una página de productos en una tienda en línea.

Un sitio web, por otro lado, es una colección de páginas web relacionadas que se encuentran bajo un mismo dominio. Un sitio web generalmente tiene una estructura de navegación que permite a los usuarios moverse de una página a otra dentro del sitio. Puede incluir páginas de inicio, páginas de productos o servicios, páginas de contacto, y cualquier otro tipo de contenido relacionado. Un sitio web puede ser pequeño y contener solo unas pocas páginas, o puede ser grande y contener cientos o incluso miles de páginas.
En el contexto del desarrollo web, es importante comprender las diferencias entre página, sitio y aplicación, ya que son conceptos distintos pero interrelacionados.