hand Inicio

SERVICIOS

Salir

noched铆a

Programar una herramienta DAFO con React

800 palabras
3 minutos
July 13, 2020

Vamos a programar una herramienta para definirnos un DAFO online con React y con paneles al estilo Trello

Pr贸logo

Por DAFO se entiende el t铆pico gr谩fico de Debilidades, Amenazas, Fortalezas y Oportunidades, al que tambi茅n se le llama FODA, o en ingl茅s SWOT

Se trata de un simple esquema a rellenar que nos ayuda a estructurar nuestras ideas y a saber d贸nde estamos, bien sea nosotros como personas, o nuestro proyecto, o nuestra empresa

Lo mejor del DAFO es que es un ejercicio gratuito y que nos da un punto de partida para situarnos y empezar (o no empezar) con cierto criterio

Lo peor son sus riesgos que se resumen en lo subjetivo del asunto, y es que al final podemos tirar de sesgo de confirmaci贸n y ganar una falsa seguridad que nos deje peor de lo que est谩bamos (tienes una lista de sesgos aqu铆)

En este curso vamos a construir una herramienta que nos va a permitir

  • Rellenar este diagrama en una p谩gina web
  • Tener movilidad al estilo Trello
  • Guardar esos datos en el storage del navegador para implementar un backend persistente dentro del navegador del usuario

C贸mo queda al final? Tienes la herramienta en kuworking.com/dafo

Vamos all谩

  1. Pr贸logo
  2. Recordando react-beautiful-dnd
  3. useLocalStorage
  4. El c贸digo

Recordando react-beautiful-dnd

Tienes el curso de la librer铆a aqu铆, necesario para explorar c贸mo funciona esa librer铆a

Aqu铆 la estructura de datos que voy a utilizar aqu铆 tendr谩 esta forma

Esto es, un array con 4 columnas fijas definidas por un objeto, y cada objeto cuenta con columnId, text, ref y items

  • columnId es un identificador y tiene que ser 煤nico
  • text es el texto que nos saldr谩 en cada columna (si queremos)
  • ref es el lugar donde almacenaremos las referencias de cada columna (con useRef), pero que aqu铆 s贸lo almacenan un 铆ndice
  • items es un array con cada 铆tem que tendremos en cada columna, al que definiremos con id, idNum y text

Te podr铆as preguntar porque en la variable ref no asignamos ya un useRef en lugar de un n煤mero

El motivo es que esta estructura la almacenaremos en localStorage, y all铆 no podemos almacenar funciones (que es lo que es un useRef)

La soluci贸n? Almacenar el 铆ndice que nos servir谩 de baliza para localizar la referencia real

Otra soluci贸n ser铆a crear otra estructura para almacenar las referencias, o simplemente borrar esa propiedad antes de almacenarlo en localStorage (no necesitamos almacenarla en absoluto)

Luego necesitamos volcar esta estructura, y lo hacemos con algo tipo esto

Si te fijas aqu铆 no aparece por ning煤n lado idNum

Para qu茅 me sirve? Es un an谩logo a id, pero mientras id es un texto con un n煤mero, idNum almacena s贸lo el n煤mero

Lo que yo querr铆a es s贸lo el n煤mero

Por qu茅? Porque cada vez que se a帽ada alg煤n elemento en esta estructura tendr茅 que asignarle un nuevo identificador, y para asegurarme que no repito buscar茅 el 铆ndice m谩s alto y le sumar茅 1

Si no tengo un n煤mero y tengo un texto tendr茅 que procesar el texto para extraer un n煤mero, por lo que si ya tengo un n煤mero -> perfecto

Pero y para qu茅 necesito un string? Porque nos lo piden en la documentaci贸n de la librer铆a documentaci贸n

Como antes, podr铆a fabricar ese string sobre la marcha, pero si ya lo tengo en una variable todo eso que me ahorro (y me sirve de recordatorio de este requerimiento)

Luego necesitamos establecer las funciones que reordenan los 铆tems

Esto ya lo vimos en el curso que enlazo arriba, b谩sicamente localizamos el panel (el de origen y el de llegada) y le quitamos / a帽adimos el 铆tem al panel correspondiente

Luego necesitamos definir la funci贸n que llama a la anterior en cuanto soltamos el 铆tem

Y ya lo tenemos

useLocalStorage

Este custom hook nos permitir谩 guardar el estado, algo que normalmente har铆amos con useState, pero que ahora lo haremos en el storage del navegador por lo que a cada nueva sesi贸n seremos capaces de recuperar lo que ten铆amos en la 煤ltima sesi贸n

Por qu茅 crear un custom hook?

Porque as铆 podr茅 utilizarlo del mismo modo que utilizo useState, fant谩stico

El c贸digo se basa ampliamente en los varios usuarios que han hecho implementaciones muy similares entre ellas, por ejemplo:

脡ste es el c贸digo

El valor inicial que le damos al useState se basa en window.localStorage (documentaci贸n oficial)

Y en la funci贸n para asignar un nuevo valor setValue, tambi茅n tenemos la opci贸n de pasarle una funci贸n en lugar de un valor, y si es el caso ejecutamos la funci贸n con el valor almacenado (algo que aqu铆 no utilizaremos, pero da m谩s versatilidad al hook)

Para almacenar una estructura de datos utilizamos JSON.stringify, que nos convierte los objetos en strings, y luego JSON.parse que nos revierte la conversi贸n

El quid de todo esto es que cambiamos en la misma operaci贸n el estado useState, que nos repinta la aplicaci贸n, con el valor de localStorage, que no nos repinta nada

Y para utilizar el hook, pues como con el useState

Es decir, le mandamos una clave de nombre kwdafo y el valor con el que queremos inicializar ese estado, que ser谩 con la variable data

El c贸digo

Ya podemos pasar al c贸digo (con cada secci贸n descrita en los comentarios)

Recuerda importar las librer铆as @emotion/core, @emotion/styled y react-beautiful-dnd en el codesandbox

馃檵鈥嶁檪锔

Qu茅 tal el curso?
馃憣 Bien 馃檶馃檶
馃憤 Bien, pero algunas cosas podr铆an explicarse mejor 馃槵
馃し鈥嶁檪锔 Da por sentadas demasiadas cosas 馃槖
馃し鈥嶁檪锔 A ver, hay poca chicha 馃槵
馃し鈥嶁檪锔 Los ejemplos no son muy claros 馃檱鈥嶁檪锔
馃し鈥嶁檪锔 No se entiende, est谩 mal escrito 馃憥
鉁嶏笍 Hay errores, rev铆salo en cuanto puedas 馃檹

Quiz谩 te interese

Privacidad
by kuworking.com
[ 2020 >> kuworking ]