DEV Community: Daniel Yafacb

MS-SQL, React, Fetch ... Mostrar imagen desde un campo tipo Imagen

Daniel Yafacb — Fri, 25 Oct 2024 18:20:58 +0000

No es una gran idea el tener un campo de base de datos donde se almacene una fotografía o cualquier otro tipo de archivo. Pero como programador uno debe adaptarse a las necesidades en cualquier escenario.

A continuación la estructura de los datos. Se asume que luego se ha creado un procedimiento almacenado llamado APL_WEB_TRABAJADOR_FOTO el cual devuelve el campo llamado "imagen".

Backend: Al devolver los datos desde backend, este debe ser usando .send, como este ejemplo:
export const getPersonalFoto = async (req, res) => { const cnServidor = await getConnection(); const result = await cnServidor .request() .input("CODTRAB", sqlRef.VarChar, req.params.codtrab) .query("EXEC APL_WEB_TRABAJADOR_FOTO @CODTRAB"); res.send( result.recordset[0].imagen ); };
Frontend: Primero debemos comprobar que nuestro Backend funciona correctamente, para esto, usaremos Postman y aquí muestro el resultado que debería tener un parecido a lo siguiente:

Esto ratifica que el Blob funciona ...

React: Como llenar un Select/Option Padre-Hijo

Daniel Yafacb — Sat, 01 Aug 2020 03:30:01 +0000

How to populate a Select/Option with Father-Children

Llenar un "combobox", el mismo que en HTML se llama "Select" y a sus items, se les denomina "Options" es algo complicado con React.
En mi base de datos, a manera de reto, utilicé una colección (tabla en SQL) con 2 campos: Nombre de la clase y una lista de las sub clase (una relación padre-hijo, uno a varios), que realmente en Firebase es un campo de tipo Array.
Por ejemplo la clase "TV & Entertaiment", tendría una sub-clase de "Television", "Media Players", "Gaming", "Accesories", etc ...

Lo más fácil era realizar un método que reacciones después del clic sobre un Select para que retorne desde la base de datos los valores de la Sub Clase .. sin embargo, cuando utilizas servicios On-Line, como Firebase, te van a cobrar por cada "transacción" que realices, por lo tanto debes ingeniarte en procurar invocar pocas veces a los servicios.

    const QUERY_CLASS = gql`
        query{
            Gear_ClassAll{
                clase_nombre
                sub_clase
            }
        }
    `;
    const { loading, error, data } = useQuery(QUERY_CLASS)
    if (loading) return <p>Loading...</p>
    if (error) return <p>Error :(</p>
    let arrClases = data.Gear_ClassAll

La sentencia de arriba, es una expresión de un ESQUEMA de GraphQL que le permite al cliente obtener los datos.
clase_nombre es un campo de tipo String
sub_clase es un campo de tipo Array.

<FormControl as="select"
    value={clase}
    onChange ={(e) => fnLlenarSubClases(e)}>
    <option value="">Select a item ...</option>
    {arrClases.map((item, index) => {
        return <option key={`op${index}`}
            data-tag={item.sub_clase.toString()}
        >{item.clase_nombre}</option>
    })}
</FormControl>

{clase} es una variable de estado, que contiene el nombre y valor del padre. Debido a que el control HTML SELECT permite atributos personalizados donde puedes almacenar cualquier información, vamos a colocar en el atributo data-tag (puede llamarse data-array o data-elementos) el array de sub elementos del padre, o sea los hijos. Para eso convertimos el array, en una cadena con separaciones de ","

data-tag={item.sub_clase.toString()}

Ahí radica la magia. Luego cuando el usuario selecciona un elemento del padre, de-construimos la cadena almacenada en el atributo mediante la función .split() y la asignamos a una variable de estado, para que REACT se encargue de construir nuevamente las opciones del Select hijo.

    function fnLlenarSubClases(e) {
        setclase(e.target.value);
        if (e.target.value) {
            setarrSubClases(e.target.options[e.target.selectedIndex].getAttribute("data-tag").split(","))
        } else {
            setarrSubClases([])
        }
        setsub_clase("")
    }

Abajo, la construcción del SELECT hijo.

<FormControl as="select"
    value={sub_clase}
    onChange={(e) => setsub_clase(e.target.value)}>
    <option>Select a item ...</option>
    {arrSubClases.map((item, index) => {
        return <option key={index}>{item}</option>
    })}
</FormControl>

Proyecto: Gear

Daniel Yafacb — Sat, 01 Aug 2020 02:21:58 +0000

Tengo otra carrera profesional: La fotografía (https://danielyafacb.tumblr.com). Y lógico en mis almacenes tengo mucho equipo, a la cual siempre le he prestado mucho cuidado (pues cuestan mucho dinero). He buscado alguna APP que me solucione el control o gestión de mis activos pero no he encontrado uno a mi gusto, así que haré uno a mi gusto ... por yo quiero, y porque - creo - que yo puedo.
Lo llamaré: Apliset Gear (no pregunten que significa Apliset).

Estoy utilizando:

Apple iMac 27"
VS Code (Después de VBA, lo mejor de Windows)
Google Firebase: Firestore + Search Customer + Storage + Auth
Express
Nodemon
Babel
React
React-Router
Apollo Client 3.0
Axios
FortAwesome
React-Bootstrap

Y dejé de usar React-Apollo y ahora soy full Hooks!

¿Porqué hoy soy fans de React, GraphQL y Firebase?

Daniel Yafacb — Fri, 31 Jul 2020 22:24:49 +0000

Ya con una amplia experiencia de trabajo en el desarrollo de soluciones bajo plataformas Windows y con un buen producto bajo la manga, que me brinda dinero extra y seguridad (en caso de desempleo) .. me pregunté un día si estaba correcto continuar programando en .Net y SQL Server (últimas versiones). Sumado a que me preocupaba mucho la lentitud de las respuestas de IIS (si, el servidor web de Windows), la gran inversión en adquirir nuevas licencias para el virtualizador y licencias SQL para cluster ... asomé mi atención sobre algunas otras alternativas. Y pues empecé a estudiar nuevamente, al estilo de ahora: por Youtube.

Encontré muchos capos y empecé a programar mis “HOLA MUNDO“ en muchos lenguajes - no tantos la verdad - Python, Angular, Go, Rust ... hasta que llegué a uno del cual muchos hablaban ... NODE JS, y descubrí que junto a otros complementos como Express y React estaban dominando al mundo ... era otra pandemia que tenía años en el mercado, y que yo - muy mal - los había ignorado.

Poco a poco llegaron conceptos nuevos como Contenedores o Kubernetes, Docker, Amazon ... Firebase .. con dicha herramienta de Google puse mucho énfasis ... nadie más que una gran empresa para un gran producto. Una base de datos NO-SQL que sería todo lo que yo andaba buscando. Goodbye SQL, muérdete tus índices, roles, collate y la maldita lentitud en tus operaciones. Good bye ASP.Net, espero que JSON les corte la cabeza muy pronto. Aunque tendré que seguir trabajando con ellos por unos meses hasta migrar todo.

Ahora, React ... fue agradable encontrar mucha información ... abundante, vigente, y prometedora. A pesar que aún no lo domino, ya gozo de sus potenciales. Especialmente la gran cantidad de paquetes FREE que empoderizan su nombre ... pero hasta ahora no ha existido un solo tema o pregunta que no haya encontrado respuesta en la nube. Gracias a todos los que publican.

GraphQL ... aquella interface entre tus APPS y la Data, que te aseguran portabilidad - un lenguaje de consultas para cualquier base de datos. Código abierto desarrollado por Facebook.

Indagando como usar MS-SQL Server en la web, llegué a Firebase, sin pagar licencias de servidor, sin pagar licencias por microprocesador, por region, por usuario ... muy aparte que Firebase te brinda todo el potencial para tus apps como almacenamiento, seguridad y todas las API del mundo de Google (Drive, Search, Docs, Maps, etc).

React ... para Novatos de los 90’

Daniel Yafacb — Fri, 31 Jul 2020 21:21:58 +0000

Hola, esta serie de post, tienen como objetivo (aparte de hacerme recordar) ayudar a quienes, como yo, mayor de 40 años, con experiencia en la programación estructurada, de aquellos donde existía un Main() en tu proyecto ... de aquellos que nacieron con Turbo Basic, Turbo Pascal .. C++

Espero sea de su utilidad