Hoy te traigo un simulacro de prueba técnica de RIAG para juniors y trainees.
Es una prueba técnica 100% real de una empresa que además conozco
y he intentado mantener el espíritu intacto de la prueba.
También le quiero dar las gracias a David Huertas que se prestó para hacer este simulacro
y espero que le dejéis un montón de comentarios positivos
porque imagínate tú cómo te pones de nervios en una entrevista
y este chico lo hizo delante de mil personas en directo,
así que empatízate un poquito con él.
Y deja un like si te gusta este tipo de contenido para que hagamos más.
Ahora sí, disfruta el simulacro y sobre todo, toma apuntes y aprende mucho.
Normalmente en una entrevista preguntaría a David,
bueno David, ¿de dónde vienes? ¿Qué haces? ¿Estás trabajando?
¿Cuántos años de experiencia tienes? ¿Cuáles son tus retos?
¿Conoces CodeSandbox?
Conozco.
¿Has utilizado alguna vez?
No, pero sobre todo en los típicos ejemplos de paquetes que te vienen por ahí
suelen estar hechos algunos que tienen CodeSandbox.
Al final, el editor es muy parecido a Visual Studio Code,
así que si estás habituado a Visual Studio Code no vas a tener ningún problema.
Mira, antes de que te pongas a leer y tal, yo te la explico.
Te la he dejado en inglés y en castellano,
pero obviamente será que él en castellano, perfecto.
La tienes solo en castellano abajo.
Antes de que te pongas a leer el enunciado, te voy a explicar una cosita.
Piensa que en la empresa en la que estamos haciendo esta prueba técnica,
cada empresa tiene diferentes objetivos y busca diferentes cosas.
Esta empresa, esta prueba técnica, es una empresa de producto.
Y lo que busca justamente es mucho el tema de trabajar con Agile.
Y quiere entregar de forma progresiva valor al usuario.
Así que, obviamente, en esta empresa lo que van a valorar mucho
es que de alguna forma, mientras tú vas solucionando,
vayas entregando funcionalidad al usuario.
Porque imagínate que por lo que sea, en mitad del enunciado,
te viene un UX y te dice,
ostras, me he dado cuenta que en lugar de hacer esto, hagámoslo de otra.
Así que intenta ir entregando valor,
de forma que en lugar de ir dejando la pantalla en blanco,
pues podamos ver que vamos avanzando hacia algún sitio.
Vamos con el enunciado, ¿qué prefieres? ¿La de castellano o la que tú quieras?
Vale, la hacemos en castellano para que la entiendas.
Vamos a hacer en castellano.
Tenemos dos URLs a las documentaciones de dos APIs diferentes.
Una que es para recuperar datos de random de gatos
y el otro para atacar a la API de Giphy.
¿Conoces la API de Giphy?
Sí, la conozco y además se hizo un proyecto con Giphy, ¿cierto?
Sí, sí, tal cual.
Pues lo que tenemos que hacer es seleccionamos un gato random de sobre gatos
usando la primera API.
Esto nos devuelve un objeto y a partir de este objeto
lo que vamos a necesitar es el string que nos devuelve del dato.
A lo mejor nos dicen los gatos son peludos.
Vale, pues de ese string tenemos que recuperar solo las tres primeras palabras.
Las tres primeras palabras.
Y de... ¡Ay, no lo he puesto!
Las tres primeras palabras.
Bueno, así, sí.
Usa las tres primeras palabras y buscas un Gip usando la API de Giphy
con esas tres primeras palabras, ¿vale?
Y finalmente lo que tienes que hacer es enseñar este Giphy en pantalla
a un lado y al otro lado el texto.
Todo esto centrado verticalmente, ¿vale?
O sea, que salga la imagen en un lado, el texto al otro lado
y que esté todo centrado verticalmente.
La imagen respecto al texto, ¿ok?
Y para la API de Giphy vas a necesitar la Giphy API Key que la tienes aquí.
Así que, pues nada.
Ahí te ha quedado todo claro.
¿Tienes alguna duda, alguna cuestión?
De momento creo que me ha quedado todo claro.
Seguramente ahora se me olvide algo de cómo era, cómo tenía que representarlo.
Pero bueno, vas a hacer zoom.
No tengo el zoom mágico de Midu.
Lo siento.
No pasa nada.
Puedo, como mucho, intentar hacer...
Puedes hacer comando más.
Estás en...
Ah, bueno, claro.
No sé en qué es este.
Ah, estás en...
Hostia, igual es un poco bestia, pero sobre todo que tú puedas verlo.
Si quieres, puedes cerrar la parte...
Bueno, claro, es que necesitarás para los archivos y tal.
Te voy a...
Otra cosa.
Aunque la prueba técnica la tienes que solucionar con React.
Pero como verás, no está instalado React ni nada.
¿Por qué?
Porque queremos ver cómo empiezas tú el proyecto.
Pero claro, no tienes que escribir React ni nada.
Si tienes dudas de esto, puedes utilizar cualquier documentación.
Puedes buscar la documentación de React.
Si tienes alguna duda, puedes buscar la documentación de MDN.
Lo único que no puedes buscar son soluciones directamente.
¿Sabes?
No podrías buscar cómo recuperar las tres primeras palabras de una frase.
Sí.
¿Ok?
Pero sí que puedes decir método string para lo que sea.
¿Ok?
Vale.
Pues si te ha quedado todo claro, empieza cuando quieras.
Este es el punto de entrada, este index.js.
Así que a partir de aquí puedes importar las dependencias que quieras.
Cuando haces un import de una dependencia, se instala automáticamente.
¿Vale?
O sea, te pedirá la que quieres instalar y ya está.
Entonces, si yo hago un import React, me instalaría React.
Sí.
Te dirá...
Voy a probarlo.
¿Ves?
Te dice...
¿Qué es?
Importar React como...
Ahí está.
¿Me lo ha puesto?
No lo he visto.
En minúscula.
La dependencia tiene que ser en minúsculas.
La de React.
Esto son cosas que nunca me he fijado, la verdad.
Sí.
Fíjate que a la derecha pone Add React as Dependency.
A la derecha tienes la previsualización.
¿Vale?
Pues cada vez que añades una dependencia, le das a ese botón y ya te la añade.
Vale.
Creo que voy a comenzar por buscar en la documentación de React porque creo recordar que aparte de
la dependencia de React se instalaba algo más.
Creo que era React DOM.
¿Puede ser?
Efectivamente.
Vale.
Pues ponla directamente.
No pasa nada.
Aquí.
Import.
Sí.
Import React DOM.
No sé lo que no me acuerdo de la sintaxis.
No sé si la puedo buscar o similaciones.
Esto será React.
React guión DOM.
Vale.
El nombre que has puesto del React DOM este no es ese.
Ahí tienes que poner un nombre que sí que sea válido en JavaScript.
Ahí es la documentación de React.
A ver si está por ahí rápidamente.
Chocar.
Fíjate por aquí.
Agregar React con sitio web.
Perfecto.
Perfecto.
Perfecto.
Estoy creando un componente.
Vale.
Voy a intentar ver dónde está sin mirarlo directamente.
Claro.
O sea, es un poco tricky el decir que tengo que buscarlo sin buscarlo.
En la documentación.
Claro.
Claro.
Cómo buscarlo en la documentación.
Pero bueno, hay tiempo.
Creo una aplicación nueva de React.
Entiendo que por aquí me va a servir directamente el Create CREA.
Así que esto no me sirve.
Vale.
Como sabemos que la dependencia es la de React DOM, vamos a buscar arriba en buscar.
Ahí.
Ponemos React DOM.
React DOM.
Todo junto.
Ahí está.
Vale.
Ahí ya nos está enseñando que para importarlo necesitamos eso.
O sea, que ya vemos cómo se escribe.
La dependencia está bien.
Perfecto.
Así que.
Perfecto.
Esto muchas veces, claro, como utilizamos bit y este tipo de cosas, ¿no?
Pues ya están ahí.
Claro.
Ya están configuradas y es algo que no te preguntas tú realmente.
¿Sabes?
Exacto.
Ya me pido por sorpresas, ¿eh?
Claro.
Pero luego si lo piensas fríamente y dices, ostras, lo más básico justamente de React
sería cómo empezar un proyecto con React.
Vale.
Ahora, si volvemos a la documentación, seguro que nos pone cómo tenemos que empezarlo todo,
¿no?
Tenemos el cliente y el servidor aquí abajo.
¿Ves que pone el paquete de React DOM?
Vale.
Pues vamos al del cliente.
¿Vale?
Aquí vemos que ya nos está diciendo justamente cómo tenemos que ponerle barra client, ¿no?
Para importar solo la parte del cliente.
O sea, que eso lo tenemos que tener en cuenta.
Y luego tenemos abajo el create root o el hydrate root, ¿no?
Correcto.
Sí.
Vale.
Y ahí está.
Eso es lo que queremos.
Ahí tenemos las dos líneas que nos está diciendo, ¿no?
Hidratar.
No queremos hidratar porque no vemos el servidor.
Queremos solo crear aquí, hacer que se renderice las cosas en el root.
Perfecto.
Vale.
Pues vamos a copiar esas dos líneas.
Voy a dejarlas por aquí.
Esto nos voy a comentarlo, yo creo, en un momento.
Lo puedo subcomentar.
No me acuerdo cómo era el input.
¿Te guardas tú el input para comentarlo?
Bueno, igualmente lo que puedes hacer es añadir en la línea 7 una barra de disco.
Cierto.
Tengo un teclado ahí en español.
No, lo tengo en inglés.
Vale.
Y lo que tienes que tener cuidado, claro.
Aquí.
Sí, lo que tienes que...
Si eliminas la línea 22, ya lo tendrías.
Línea 22.
Ahí está.
Ahora sí.
Perfecto.
Vale.
Pues si volvemos arriba, al importar el ReactDome render, vale, el ReactDome, acuérdate que
tiene que ser barra client, ¿vale?
Vale.
ReactDome barra client.
Barra client.
Ahí está.
Perfecto.
Ahora, el career root este, ¿dónde lo sacamos?
Este root lo tenemos que sacar de...
No, pues no te sabría decir ahora, porque aquí no me lo chiva, ¿verdad?
Si yo hago...
Bueno, si hemos importado ReactDome, ReactDome, ReactDome, ReactDome, ReactDome estaría divertido.
Claro, entiendo que tiene que ser de...
Y si yo hago, por ejemplo, ReactDome punto...
Ahí está, ¿ves?
Ahí está.
Perfecto.
Vale.
Ahora, obviamente, lo que nos faltaría es tanto el container como el element.
El container es donde queremos renderizar nuestra aplicación, ¿no?
Vale.
Vale.
Vale, de acuerdo.
Vamos a ver, vamos a ver.
¿Dónde queremos, entonces?
Esto sería...
¿Sería el app aquí?
Vale.
Y en render, ahí lo que queremos renderizar.
Sí, estaría bien que en el index.html revises si realmente tienes el app o qué...
Claro, era lo que iba a ver, porque creo que por aquí...
No me acuerdo si es lo mismo, que en vez de app algunas cosas hay root, pero no sé si es una cosa distinta o lo estoy mezclando.
No, está bien.
Ahí tenemos justamente el contenedor que se llama app.
Perfecto.
El problema es que si vamos al JavaScript, el create root este que hemos hecho, que le hemos pasado un string, ¿realmente es un string?
Ponte encima del create root, a ver qué nos dice.
Si lo pones encima, pone que es un container, es un elemento o un document fragment.
¿Cómo podemos recuperar un elemento en JavaScript sabiendo su selector?
Claro, no, sabiendo su IDE, ¿no?
Vale, sabemos su IDE.
¿Cómo podemos recuperar el elemento del DOM?
Podemos utilizarlo utilizando un document, getElementById y pasando la IDE de app.
Vale, perfecto.
GetElementById.
GetElementById.
Vale, pues ahora ya tenemos ahí.
Ahora lo que nos falta simplemente es que empecemos con la aplicación, porque el root.render, ese element, tenemos que pasarle el componente que queremos rendir, el elemento.
Así que tendrás que crear un, puedes poner ahí lo que quieras, a ver si se renderiza.
¿Puedo poner, por ejemplo, un 1? ¿Se me pudiera renderizar?
Sí.
Un 1.
Se nota un poco la costumbre de tener las extensiones, ¿no?
Que yo aún no lo tiene.
Vale, en el momento.
Vamos a poner, hola mundo.
Perfecto.
Vale, perfecto.
Pues ya has inicializado tu proyecto.
Vale.
Pues ahora.
Entonces, ahora yo por comodidad me voy a crear un JS.
Perfecto.
Voy a hacer un import.
Creo que ya no es necesario, ¿no?
Pero un import.
React from.
Vamos a hacer con start.
Y esto es así.
Vale.
Tenemos la aplicación.
Perfecto.
Vamos a hacer un return.
Es lo mismo.
Que va a ser un tag h1 que diga hola mundo.
Hello world.
Vale.
Aquí en default.
Default.
Default app.
Vale.
Igual estoy mezclando cosas sin querer.
Puedo poner un export const y luego hacer un...
Puedes hacer export default de app después.
Lo puedes dejar así directamente.
Bueno.
Perfecto.
Pero aquí vamos a importar el app.
Creo que me lo pillo también, ¿no?
Sí.
Vale.
Vale.
Pues ya tienes tu aplicación.
Perfecto.
Un poco terror.
Sí, que en este primer minuto, la verdad.
He de decir.
Nada, hombre.
Lo llevas bien.
Ya tienes ahí inicializado.
Piensa que hay gente que tiene años de experiencia con React
y no sabe hacer lo que has hecho.
Claro, sí.
Lo creo porque me ha sacado mucho de lo que es el encuadre que tenía.
Es decir, ostras, ponte a hacer una aplicación de React,
pero añadiendo de React.
Eso no me lo esperaba.
Pero bueno, la zona del confort ya está ampliada un poquito.
Así que vamos con ello.
Ahí está.
Al menos no se puede decir que no has aprendido algo nuevo hoy.
Claro, claro.
O sea, ahora me voy a acordar, cada vez que veo una aplicación de React,
me voy a acordar que React Dome, como se importa,
cuál es su librería.
Muy bien.
Así que vale, vamos a venir por aquí.
Voy a consultar primero la API.
Voy a tenerlas aquí a mano, por lo menos.
Bueno, la documentación de las dos cosas.
Creo que estos ya son los docs.
Pero esto es de GIF, ¿no?
Vamos a ver.
Vale, perfecto.
Cuántas cosas.
Vale.
Vamos a que eso se lo un get.
Aquí te da un dato y aquí una lista.
Vale.
Vamos a volver aquí.
Selecciona un dato, por lo que entiendo que con uno,
con este de aquí, el de facto, ya nos vale.
De ese dato, usa las tres primeras palabras y busca un GIF
utilizando la API de GIF.
Vale.
Pues yo creo que lo que podemos hacer ahora mismo es irnos a la app,
hacer una llamada a la API para que nos devuelvan un dato totalmente aleatorio
y ver por consola lo que nos da.
Perfecto.
Dale.
Así que no sé si aquí se puede abrir la consola.
Mira, ¿ves que tiene una URL?
Sí.
Esa URL te la puedes llevar a otra pestaña, abrirla,
ahí tienes las herramientas de desarrollo, lo que quieras.
Lo que, eso sí, ten en cuenta que tendrías,
si quieres ver reflejados los cambios,
siempre los tienes que guardar en el otro editor, ¿vale?
Vale.
Pero por lo menos lo puedo ver por aquí.
O por lo menos en la pestaña de network, pero bueno.
A ver.
Voy a hacer que se llame a la API cuando se inicie la aplicación.
Bueno, cuando se cargue por lo menos este componente de app.
Así que voy a utilizar un useEffect.
Vale.
Pero dentro del componente, ¿no?
Pero dentro, sí que estoy.
Ah, sí.
Ahí está.
UseEffect.
Ya se ha importado.
Perfecto.
Y déjame ver cómo era.
No me acuerdo exactamente cómo era,
así que voy a tirar de la carta comodín.
Voy a irme a la Stair React.
Porque esto es el doble filo de los snippets,
que por un lado son muy rápidos,
y por otro lado dices, uf,
no me acuerdo exactamente cómo era.
Vamos a ver.
Perfecto.
Voy a pillar por aquí.
¿Puedo ver?
Vale.
Es algo más.
Un poco de pereza, pero quería que me diera la rilla.
Voy a hacer así.
Así.
Esto me lo voy a cargar.
Y esto también.
Vale.
Perfecto.
Bueno, bueno.
No nos carguemos tanto, ¿eh?
El useEffect necesita un método, ¿no?
O sea, te cargas cargarlo de dentro.
Sí, necesita un método,
aunque yo iba a crear un método como tal
y luego lo iba a llamar.
No sé si es mejor dejarlo así.
Sí, sí.
No, no.
Si lo tienes claro, pues como tú quieras.
Sí.
A ver, const.
Coli.
Es que noto que incluso lo más sencillito ahora estoy dudando,
¿sabes?
Porque era así.
Con...
Lo que la constante la tienes que poner fuera, ¿no?
En todo caso.
Porque estás dentro del useEffect.
Por eso te decía de dejar...
Vale.
Ahora sí que voy a hacer con...
Ahí está.
Vale.
Perfecto.
Muchas gracias a la gente que me está dando ánimos por el chat.
Se aprecia.
Entonces, no la ejecutes porque le tienes que pasar una función,
por lo tanto, no la ejecutes, le pones una coma
y ahora lo tiene bien.
Entiendo.
Ahora, solo para ver qué funciona,
vamos a hacer lo típico de console.log.
Abre.
¿Hola?
Vamos a hacer un reloj.
Tarda un poquito.
Cierto.
Esto no.
Es igual.
Igual no me termina de convencer.
Y, bueno, vamos...
Bueno, voy a comentar esto.
Y voy a hacer un fetch.
Un momento.
Creo que los parámetros que necesito...
No son, ¿vale?
Porque la app...
Porque la Piki era para GIFI.
Vale.
GIFI.
De hecho, si bajas un poquito más en la documentación...
¿Vale?
Ah, no.
O más arriba.
A ver.
Debe haber un botón.
Ah, try it out.
¿Ves que hay un botón por ahí que dice probarla?
Entonces, le puedes dar a execute.
Y ahí vas a tener un ejemplo.
Y ahí vas a tener todo.
Cómo tienes que hacer la request y todo.
Y un ejemplo de response.
Vale.
Pues perfecto.
Vale.
Pues voy a poner...
Primero la URL.
Voy a poner un...
Then.
La response.
Lo hacemos en JSON.
Y...
Vamos a hacerlo otra vez.
Vamos a ver por aquí si ha ido todo correctamente.
Perfecto.
Nos da un dato.
Hay aproximadamente más de 500 millones gatos domésticos en el mundo.
Y 40 razas.
Vale.
Pues tenemos un objeto.
Y lo que nos interesa justamente es la parte del dato.
Vale.
Vamos a ello.
Vale.
Vamos a ver otra vez por aquí.
Para estar seguro más que nada.
Tres primeras palabras.
Vale.
Tres primeras palabras.
Pues...
Vemos que esto está dentro de la key fact.
Entonces, voy a venir por aquí.
Una cosa que me gusta hacer, solo porque tengo la manía de comprobar las cosas muchas veces,
es simplemente que me salga exactamente lo que quiero.
Entonces, ahora voy a probar si me tira justamente el fact correcto.
Ahí está.
Entonces, ahora mismo lo que podría hacer, no sé si es una mala práctica, vamos a decir, pero no es paranoia.
Voy a utilizar un useState solo para tener recuperado el valor del fetch y me lo dejo.
No sé si también una forma más nativa sería dejar un let con el array y luego hacer un push,
aunque creo que a veces me ha dado fallos, entonces voy a ir a lo seguro y voy a...
Ahora, en cuanto llegue aquí,
en vez de hacer un console.log, voy a guardar el dato.
Y una vez está hecha la llamada, me gustaría añadir aquí como dependencia catfac para que en cuanto tenga un nuevo valor...
Bueno, no, no, esto se volvería, se volvería tal.
No, no, no, no, no me interesa.
No me interesa.
Entonces digo, por tenerlo los dos.
Pero no, creo que es mucho más sencillo añadir aquí un log de lo mismo,
que más lo he borrado lo podría haber mantenido.
Vale, pero ojo con ese código que tiene trampa, ¿eh?
Tiene trampa.
Claro.
¿Por qué tiene trampa? ¿Qué le pasa a ese código?
Esto me ha pasado varias veces.
Es familiar.
No te sabría decir por qué, porque es verdad que no me he puesto a ver cuál es la causa completa,
pero sí que he visto que creo que el log se está haciendo mucho antes de lo que se hace la llamada.
¿Puede ser?
Claro.
O sea, lo que está ocurriendo ahí, ¿qué pasa con el setcat fact?
¿Qué es lo que hace la línea 9?
Pilla el data y lo guarda con el value, pero para esto tendría que ser asíncrono primero.
Bueno, bueno, antes de escribir, vamos a intentar entender aquí, ¿no?
O sea, cuando actualizamos el estado, ¿la actualización del estado es algo que es síncrono?
La actualización del estado.
Porque si fuese síncrono, la línea 9, una vez que la ejecutas en la línea 10,
lo que estás haciendo debería funcionar, ¿no?
Debería, pero no lo hace.
¿Por qué no lo hace, entonces?
Porque no es síncrono.
Vale, entonces si sabes que no es síncrono, es asíncrono.
Y por lo tanto, ¿cómo podrías justamente, si hay un dato ahí que ya es justamente el que quieres loggear,
que podrías acceder a él porque sabes que sí que está en ese scope?
Entonces, ¿qué pondrías ahí?
Podría cambiar el catfact por lo mismo.
¿Qué tal funciona?
Claro, el tema es que el setState es asíncrono.
Y eso lo que va a hacer es volver a renderizar el componente.
Pero la renderización del componente con el nuevo valor no va a ocurrir en ese ámbito de ejecución,
sino que va a ocurrir cuando se vuelva a renderizar y vuelva a pasar otra vez todo,
si es que acaso pasa.
Si es que entra en ese efecto.
Vale, pues ya tenemos ahí justamente el mensajito.
Muy bien.
Ahora, para hacer lo que yo quería hacer, que era simplemente verlo, era mucho más fácil ponerlo aquí.
Y ya está.
Vale.
Entonces, ahora...
Las tres primeras palabras.
Tendría que pillar las tres primeras palabras y hacer una segunda llamada al API,
pero esta vez al API de Giphy.
Vale.
Entonces, creo que puedo reutilizar este mismo código, modificándolo un poquito,
para luego pasárselo aquí.
Aunque me quiere chirrear un poco la idea.
Voy a elaborarla después.
Primero voy a...
Primero voy a coger las palabras y ya está.
Entonces, veamos.
Esto me lo daba como un string tal cual.
¿Verdad?
¿Verdad?
Entonces, creo que sería mucho más fácil si primero cojo el string, lo segmento por espacios,
y luego me quedo solo con los tres primeros palabras.
Perfecto.
Vale.
Pues, ¿cómo se separa un string?
Con split.
Muy bien.
Ahora, creo que podría hacer...
Creo que no me está surgiendo una duda.
Es que no sé si puedo dejar todo esto en una misma función, porque si yo comienzo a poner código por aquí,
que sería lo que yo si estuviera en mi casa, pues es lo que haría, y luego seguramente me iría mal y ya comenzaría a mirar.
Pero no veo por qué no lo puedo poner aquí también.
¿Vale?
Solo que ten cuidado, ¿no?
Que el fetch es asíncrono, si pones fuera el código.
Pero podría hacer aquí una async y una wait.
Ah, tengo que hacer la propia...
Te doy un consejo.
Te doy un consejo.
Antes de meterte con async await, que igual es algo interesante que podríamos refactorizar después y tal,
¿qué tal si el código que quieres hacer lo puedes hacer en la línea 10?
Desde el 10, ¿no? Vale, me parece bien.
Veamos, ahora una vez que tengo el data.fact, yo creo que además lo que voy a hacer va a ser mover esto hacia abajo luego.
Porque puedo poner...
No estoy seguro de lo que hacer.
Voy a poner data.fact.
Vamos a probar.
Si me pongo a barajar las opciones igual no avanzo.
Puedo hacer un split.
Un espacio.
Y esto, bueno, me lo he juntado ahí un montón.
Pero voy a probar si yo hago esto de aquí.
Vale.
Perfecto.
Vale.
Esta es la red y se ha parado.
Ahora tienes una disyuntiva.
Y te voy a explicar por qué.
Porque, como hemos visto en el enunciado, quieres seguro mostrar la frase entera.
Entonces, la vas a necesitar tener de alguna forma en el estado.
Lo digo porque ahora que has guardado en el estado el split, que tengas en cuenta que de alguna forma o necesitas tener estos dos valores separados.
Tanto la frase entera como el array con las tres palabras.
Aunque creo que ahora podría hacer...
Voy a tener las tres palabras separadas para luego pasárselas a otra función que sea call, giphy y api.
Pasárselas como parámetro y utilizando la piki, pues que me devuelva lo que me tenga que devolver.
Vale.
Vale, entonces vamos a hacer eso.
Después del split, no sé si puedo utilizar un...
No me acuerdo cómo era.
Claro, no sé si es el split que quiero utilizar.
No era redvue, era un...
Ah, se me ha olvidado del método que quería utilizar.
Bueno, sabemos que es un método que es de array.
Porque tienes un array, ¿no?
Sí.
¿Y qué es lo que quieres hacer con el array?
Quiero conseguir los tres primeros elementos, que recuerdo que es una función que simplemente puedes indicar el índex de...
Los dos índex de dónde quieres que empiece y dónde quieres que termine el array.
Porque en este caso creo que pondría...
Lo que queremos es convertirlo otra vez a un string, ¿no?
Queremos pasar de array a string.
Queremos unir los elementos.
Entonces, ¿se te ocurre?
¿Había alguna forma de unir todos los elementos de un array con un método?
Sí, con el método join, ¿verdad?
Pues ya está.
Ya está.
Pero me falta primero...
Ah, primero tienes que quedarte con los tres primeros.
Quedarme con los tres primeros.
Vale, vale, sí.
Me he adelantado yo.
O sea, primero tienes que quedarte con los tres primeros.
Vale, vale.
Ahí lo tienes.
Vale.
Esto que era el slice, ¿no?
Correcto.
Perfecto.
Sí.
Bueno.
Vale.
Pues creo que además esto se podía concatenar.
Si yo hacía un slice de 0 a 2.
No sé si era inclusive el 2.
En fin.
Vamos a...
Bueno, ahora lo verás.
Y ahora que tienes el array, ahora es cuando tenías que hacer el join.
Bueno, que sea.
Sí, es de...
Bueno, me sale por aquí.
Es de 0 a 3, ¿verdad?
Extreme.
Vale, ahora sí.
Correcto.
Bueno.
Me gustaría tener un poco más la consola por aquí.
Porque me parece que...
Bueno, tienes la consola abajo, ¿eh?
Que no te lo he dicho antes porque como me habías contado...
Pero ves que tienes la consola ahí.
No, no la había visto.
Sí, sí.
Es que como antes me habías dicho que querías más de buscarla en otro sitio.
Digo, ah, pues...
Pero si quieres una consola pequeñita, ahí tienes esa.
Ah, vale.
Pues esto me ha valido mucho más.
Voy a cerrar por aquí.
Vale.
Por donde me llamo yo.
Vale, tengo los tres elementos.
Ahora puedo juntarlos.
Ahora, no puedo seguir haciendo aquí virguerías.
Tengo ya...
Tengo ya lo que quiero aquí en el cat.
En el catfact.
Pero lo que creo que sí podría hacer sería llamar desde aquí dentro a la API, ¿ya?
Claro.
Vale.
Es que hacer...
Bueno, creo que incluso sigo esto, ¿sí?
Sí.
Vale.
Perfecto.
Veamos.
Yo ahora podría...
Creo que sería un poco lo mismo que antes porque...
Bueno, no.
Igual no necesito el useState como tal.
Puede ser porque yo sí paso esto.
Claro.
Como parámetro.
No lo necesito y simplemente lo tengo ya.
Puedo hacer un...
Que esto sea...
No sé.
Voy a llamarlo string, simplemente.
También puedo hacer aquí directamente el join.
Vamos a hacer el join.
Y creo que era poniéndolo así.
Tengo que hacerlo otra vez.
Muy bien.
Perfecto.
Vale.
Ah, sí.
Tengo que llamar a callGiphy API.
Voy a hacerle el string que va a ser esto.
Voy a copiarlo.
Clic aquí.
Shift click.
Voy a borrarlo.
Voy a pasarlo por aquí.
Y ahora ya lo tendría aquí.
Vamos a decirlo.
Vale.
Pero una cosa.
Hasta hace poco teníamos una parte del enunciado que habíamos completado.
¿No?
Porque teníamos...
El final es que tenemos que mostrar tanto el gif como el chiste.
Ah, el chiste.
El dato del gato, ¿no?
Y ahora, ¿qué ha pasado?
Porque de repente eso nos ha quedado.
Pues que ahora el dato no está.
Claro.
Vale.
Lo podemos recuperar.
¿Qué ha pasado?
Pues entonces para eso igual sí que podría necesitar el chiste.
Es lo más sencillo ahora mismo.
Vale.
Claro.
Tenemos el estado para el chiste completo, ¿no?
Y le pasamos el cálculo al...
Ahí está.
Entonces, en la línea 10, ponlo de data.fact solo para pasárselo al estado.
Deja, ¿dónde estaba?
¿Qué línea?
10.
Sí.
Ahí le pasamos el data.fact.
O sea, quitas...
En la línea 10 quita todo el punto split, slice, join y todo esto.
Y lo único que guardas en el estado es el chiste.
Exacto.
Aunque si no estoy haciendo lo mismo dos veces, ¿sí?
Ojo, data.fact.
Ahí está.
Ahí está.
Ahora sí.
Vale, perfecto.
Ahora sí.
Vale, ahora ya hemos vuelto...
Perfecto.
Vale, perfecto.
Entonces, ahora estábamos en llamar aquí a la API de Giphy.
Vale.
Así que vamos a buscar en su documentación sobre...
Vale.
Te doy una pistita.
Pone a la izquierda Giphy API y ves que pone API Quick Start Guide y GIF and Sticker Endpoints
y todo esto.
Vale.
En GIF and Sticker Endpoints...
Ahí es donde tienes que darle.
Justo debajo.
Ahí.
Vale.
Ves que ahí tienes que buscar el endpoint que...
Perfecto.
Giphy endpoint.
Vale.
¿Qué es lo que queremos hacer?
Queremos buscar...
Queremos buscar un GIF con palabras aleatorias.
Entonces, lo tenemos aquí.
Parámetros...
Me pone requerido.
Vale.
Es el del API Key, el de la query que es el string y no hay nada más.
Vale.
Entonces, solo necesitaría para poder realizar la API estos dos parámetros de aquí.
Vale.
Entonces, no me pone o no estoy viendo ahora mismo si es un GET.
Entiendo que es un GET.
Ya te digo yo que es un GET.
Vale.
Perfecto.
Entonces, de hecho, creo que esto ya lo puedo cerrar.
Bueno, voy a hacer lo mismo.
Voy a ayudarme de esto.
Voy a dejarlo.
Uy, uy, uy.
Estoy creando...
Oh, ya, ya.
Estoy creando cosas.
Vale.
¿Y el consuelo que sigue haciendo cosas?
Dale a...
Mira, a la derecha.
Dale a restart.
O sea, como a refrescar la página, pero la de...
Esa, esa.
Vale.
Para que al menos así se quede quieto.
No sé si es porque estoy...
Vale.
Igual, además, a lo mejor te han echado los de los gatos.
Seguramente la API de los gatos te han echado.
Y te han dicho...
Te han hecho basta ya.
Define.
¿Si yo la recargo?
No pasa nada.
Lo que podemos hacer en este caso es...
En la línea 14, en el caso de que el data venga vacío,
vamos a poner una frase, ¿vale?
Vale.
Ya lo he visto que funciona.
Ahí está.
Ahora sí.
Voy a poner...
Hola, mi ducha.
No va a salir nada de...
Hola, mi ducha.
Bueno, ha vuelto.
Ya te han vuelto.
Pero por si acaso vuelve a pasar, pues ya lo tenemos ahí.
Ya lo tenemos.
Perfecto.
Entonces, ya lo tenemos aquí.
Vamos a pillar la URL.
Ah, no.
Ahora pensaba que estaba aquí.
Es esta de aquí.
Gif URL.
Vamos a pillarlo por aquí.
Lo colocamos en este fetch.
Y tenemos que poner como para...
Ah, no.
Tenemos que poner como query.
Sí, como parámetros en el string.
No como objeto en el boi.
Vamos a hacer así.
Ahora tenemos que hacer así para añadir el query.
Vamos a hacer string.
Yo creo que con esto sí que valdría.
Bueno.
Valdría, pero creo que aquí me podría dar un error por los espacios, ¿verdad?
No te voy a dar un error.
¿No?
No.
No.
Si no pensaba en utilizar la función esta de encode.
Creo que se sigue llamando code url o ui.
No me acuerdo.
Url en code params.
Pero no lo necesitas.
Si no hace falta, no pasa nada.
Y tenemos que pasar también la api key.
Api key.
Aquí.
Con un guión abajo.
Entre api key.
Vale.
Perfecto.
Lo tengo por aquí.
No me lo había pillado.
Voy a dejar por aquí arriba.
Por aquí.
Y lo mismo.
Esto es igual a dólar gif y api.
Perfecto.
Vale.
Pues vamos a ver si tenemos ahí la información.
Voy a hacer lo mismo, pero esto va a ser en vez de code quick cat fact va a ser cat gif.
Y esto va a ser set cat gif.
Set cat gif de el dicta.
No sé lo que me devuelve.
Aquí estoy pegando.
Porque igual no es una URL que yo me estoy imaginando que me la da tal cual.
Vale.
Pues hacemos un coseno.
Aquí miramos a ver qué hay.
Vamos a hacer esto que me gusta mucho hacerlo también.
Ponerle gif para tener un poco más de orden.
Aquí no me lo pongo.
No me lo está haciendo.
No me lo está haciendo.
Vale.
Vamos a hacer una cosa.
Hay un error en el código.
Pero no te preocupes.
Vamos a detectar el error que hay.
Copia la URL como has hecho antes.
A la derecha.
No, esta no.
En la previsualización.
¿Sabes?
A la parte al lado del...
Ahí está.
Ahí está.
Sí, cópiate esa.
Abre una nueva pestaña.
Y abre las herramientas de desarrollo.
Y vamos a mirar en la red o en la consola a ver qué nos está diciendo esto.
Sobre todo en la consola.
Creo que en la consola verás el error.
Sí.
Sí, porque son muchos, muchos...
Sí, además ahí tienes...
Bueno, está aquí, pero sí la he pillado.
Vale.
Ah, pues mira.
Ahí tienes una...
Tienes una pista de cuál es el problema que tienes.
Si te sirve de consola en el chat tampoco nadie lo está diciendo, así que...
Vale.
Vale.
Vamos a headers.
Ah, no tengo...
No he definido...
Vale.
Porque en el request URL, fíjate que no está haciendo bien la llamada, ¿no?
¿Por qué no estaría haciendo bien la llamada?
Porque parece que está intentando hacer la llamada como si fuese una ruta relativa al endpoint de Giphy.
¿Y esto es lo que tú quieres?
Ah, mira.
Es verdad.
Es verdad, es verdad.
Pues vamos a ver por qué está pasando esto.
Vale.
¿Está pasando esto porque no le especificaba ningún protocolo?
Efectivamente.
Vale.
Vale.
Ahora sí.
Correcto.
Ahora sí.
Perfecto.
Muy bien.
Vale, perfecto.
Pues entonces ahora teniendo dicta, ya sé lo que hay aquí.
Y estos son muchos objetos, son mucho más de los que me esperaba.
Solo tenemos que recuperar el primero.
El primero.
Vale.
Pues podemos hacer así solo por...
Vale.
Pero vamos a ver exactamente cuál es la ruta del...
Data.
Data, ¿verdad?
Sí.
Vale.
Punto data.
Vale, perfecto.
Vale.
Ahí tenemos el primero.
Hemos dicho que queremos la imagen.
Vamos a observar bien este objeto.
A ver si hay una imagen.
O pone algo de imágenes o algo.
Bajamos un poquito más.
Vamos a...
Uy, me lo estoy llevando sin querer.
Aquí.
Bajamos un poquito más.
Vale.
Content URL images.
Vale.
Imágenes es un objeto a su vez.
Ajá.
Vale.
Tienen un reporte original y tienen una URL que es el GIF.
Entiendo.
Pues vamos a intentar acceder a esa ruta del objeto.
Vale.
Vale.
Pues estamos en dicta 0 que es todo esto.
Podemos poner punto images, punto URL.
Yo creo que entre esto...
Vale.
Si fuera un proyecto mío, en todos los puntos pondría el operador este, que no me acuerdo
cómo se llama.
Porque si no, petan las cosas luego y...
Claro.
Obtiene la chaining.
Obtiene la chaining, sí.
Vale.
Ojo que no has puesto bien la ruta del objeto.
Hemos dicho que era original, ¿no?
Por ahí.
Original.
Sí.
Sí.
Punto original.
Vale.
Perfecto.
Ya tengo listo.
Ahora sí tengo la voz real, ¿eh?
Pues nada.
Vamos a ver si somos capaces de...
Vale.
Esto está muy a la derecha.
Voy a intentar hacer lo que quiero.
Esto sí.
Esto sí.
Esto sí.
Un poquito.
Vale.
Ahora vamos a guardar esto en el set catMiff.
Y vamos a hacer lo mismo.
Vale.
Y ahora voy a utilizar aquí un fragment para que no se me queje React.
He intentado meter muchas cosas a la vez.
Sí.
Y así que creo que no hay ninguna diferencia entre ponerlo así y ponerlo con el propio fragment, ¿no?
¿Se ríe?
A ver.
Voy a poner una image.
Y su source voy a ponerle un...
Voy a ponerle el de...
El cat.
Y sí.
Aunque creo que aquí le tendría que añadir...
Ah, no.
O sea, que le iba...
Le tenía que añadir width para que se viera.
Vale.
Bueno, pues parece que está apareciendo.
Ahora nos faltaba una cosita más de enunciado, ¿no?
El enunciado también nos decía que teníamos que conseguir el resultado.
Se tiene que mostrar con una imagen a la izquierda y el texto a la derecha.
Todo centrado verticalmente.
Vale.
Pues perfecto.
Puedo ir...
Tío, puede hacerlo desde estilos inline.
Como quieras.
Voy a ponerlo así.
Voy a poner un style.
Esto.
Creo que lo voy a poner así.
Creo que en React tienes que hacerlo como objeto.
Creo.
No sé si estás obligado, pero...
Puede ser con un objeto así.
Creo que sí.
Justo lo he hecho hoy.
Además, esto ya es trampa.
Justo lo he hecho hoy en el trabajo.
Pero bueno, hoy era React y lo podía poner a pelo con strings.
Bueno.
Entonces, si yo ahora hago, por ejemplo...
Vale.
Vale.
Vamos a intentar que se vea bien.
Que no queremos pelear con la gente de UX.
Vamos a hacer un style por aquí también.
Vamos a hacer un width de 100 píxeles.
Vale.
Vale.
Y un height también de 100 píxeles.
Aunque sí es aquí...
Una coma.
Vale.
Igual el pequeñito para mi gusto voy a poner un...
¡Uy!
Esto es...
Perfecto.
Y ahora vamos a estilar esto.
Aunque he puesto un flex, podría poner un...
No sé qué pasaría ahora si yo pongo un grid y hago un place content center.
Voy a dejarme de experimento para otro día.
Voy a poner flex solo.
Vamos a intentar que no esté tan juntitos, ¿no?
Que está pegado eso.
A ver cómo lo podemos hacer.
Y voy a poner...
Bueno, creo que si ya tengo el flex puedo poner un gap.
¿Píxeles?
Sí, se nota un poquito.
Voy a poner...
Sí, se nota.
Vale.
Muy bien.
Y un justify content de...
Uy, no.
Es verticalmente, ¿no?
¿Habéis dicho?
Verticalmente.
Esto creo que era align items.
Enter.
Puede ser.
Sí.
Vale.
Se ve un poco grande el texto, pero sí.
Perfecto.
La imagen ha quedado un poco chueca, ¿eh?
La imagen la has puesto cuadrada, pero podemos ver al pobre Biden que ha quedado un poco...
¿Se te ocurre alguna cosa de cómo lo podemos arreglar para que guarde bien la relación del aspecto?
Está la propiedad...
La propiedad...
La propiedad...
O sea, bueno, ya no me acuerdo cómo se llama, pero había una propiedad para cambiar la relación del aspecto.
Sé que podría ser 1-1.
¿Fit?
¿Object fit?
Sé que puede ser...
Pues Google estoy mezclando yo con Tailwind, ¿no?
Y me estoy...
Bueno, ahí podemos poner si cover o contain, por ejemplo.
Ah, vale.
Pues contain sería.
Ahí está.
Vale.
Muy bien, David.
Ya has terminado el enunciado.
¿Qué te parece?
Ha sido terrorífico.
Ha sido emocionante.
Sí, ha sido emocionante, pero terrorífico.
Porque es como que...
Para los del chat, para que os hagáis una idea.
Estoy poniendo const y estoy pensando...
¿Const se escribe así?
¿Estoy escribiendo bien const?
Bueno, pero al final lo has conseguido.
Además, lo has hecho más o menos en tiempo.
Cuando se termina, cuando llegamos a este punto,
normalmente se te pide más cosas.
Te podría decir, por ejemplo,
bueno, la gente de UX dice que casi todos nuestros usuarios
son de móvil.
¿Cómo podrías hacer que esto en lugar...
Solo este diseño que has visto solo sea para desktop
y en móvil en realidad sea vertical?
Que esté la imagen encima del otro.
O podríamos decir que haya un botón
que cada vez que lo pulsas, que cambie el GIF.
Ya que tenías un array de 20 o 30,
cada vez que pulsas el botón,
que te consiga otro elemento del array.
No vamos a tener la maldad de pedírtelo ahora.
Pero bueno, os lo digo a todos.
O a ti también, por si quieres continuar
con el ejercicio más adelante, ¿no?
Para que vayáis dando vueltas de este tipo de cosas.
En este caso, lo del botón, yo creo que sería lo más fácil.
Porque sería llamar aquí otra vez.
Y ya sería la más fácil.
Bueno, a ver, cuéntame, ¿cómo lo harías?
Vamos a ver el código.
Vamos a ver.
¿Cómo lo harías?
¿Por qué abro la boca?
Imagínate que te digo, sí.
Imagínate que te digo, venga, un botón
que no hace falta que lo hagas,
me lo puedes ir explicando más o menos.
Ah, bueno.
Pues a ver.
Añadirías un botón y ¿cómo lo harías?
Yo aquí lo que haría ahora,
teniendo en cuenta que es una prueba
y no habría que hacer nada más,
sería poner el botón
o poner el parámetro a un clic
y yo llamaría a la API.
Porque la API lo que haría,
se volvería a llamar a esto,
se volvería a llamar a...
¿Pero llamarías a esa API?
¿A la otra?
O sea, solo tiene que cambiar el GIF.
Ah, solo el GIF.
Vale, vale, vale.
Solo el GIF.
Te había entendido que llamar todo a la otra vez.
Pues bueno,
si fuera completamente random.
Tendría que ser completamente random
de la lista de GIF que ya hay disponibles
como ir cargando diferentes GIFs.
Ah, de la lista de GIFs.
Vale.
Pues podría almacenar en el catGIF
todo el array de los...
creo que 50 parámetros eran
y ponerle un...
que el botón llamara a...
¿Esto de aquí?
Bueno, no.
No, mentira.
Bueno, tendrías que separar la lógica,
yo creo, para asegurarme
de que tengo por un lado
sí o sí en un state
todos los elementos
y hacer que el botón llamara
a una función
que llamara a esta API
pero que además
no, mentira, que llamara a la API
no, que hiciera que catGIF
fuera uno,
uno random de 0 a 50.
Entonces, una vez saldría el 36,
otra es el 27, etc.
Vale.
Vale.
Ahora la has ido mejorando, ¿eh?
Porque eso de llamar otra vez
la API y todo esto
pero bueno, sí,
podrías una de dos,
podría guardar todo el...
bueno, podría guardar en el estado
todos los resultados que tendías.
Sería interesante evitar
guardar toda la información
porque como hemos visto
el objeto era enorme, ¿no?
y claro, guardar toda esa información
cuando solo necesitas una parte.
Sería interesante hacer algún tipo de mapeo.
Eso a lo mejor ya sería para otros niveles
pero mapear la información
para no tener toda la información tan bestia.
Y luego, una cosa que podría ser interesante
es guardar el índice anterior
para si haces un random
evitar que se repita
o aunque sea random,
pues decir, bueno,
si tienes un puntero,
ir incrementándolo
y siempre mostrar un GIF diferente
aunque no sea 100% random
pero para evitar que se puedan...
se pueda repetir
y dar la vuelta
y ya está.
Vale.
Imagínate, David,
que...
mira, ahora porque solo teníamos una hora
pero imagínate que hubieras tenido
80 horas por delante.
Bueno, 80, vamos a poner un día.
Imagínate que hubieras tenido
un día más
de poder trabajar
en este proyecto.
¿Qué hubieras hecho?
¿Qué es lo primero que se te ocurre
que dices, mira, voy a...
hubiera hecho esto?
¿Qué hubieras hecho?
Hubiera metido un input aquí arriba
para que pudieras tú
poner la palabra que quisieras
y te saldrían
todos los resultados,
yo creo.
Vale.
Y como me vengo muy arriba,
yo creo que podría hacer
un...
con los mismos parámetros
que tienes de hacer esta búsqueda,
poder hacer el link
a...
de forma que por los parámetros
fuera la misma búsqueda
si se le compartes el link
a alguien
y quisiera
míralo estos GIFs de gatitos
y que sean gatitos bonitos.
Se mete al link
y le sale la misma query
porque hace la misma de gatito bonito
así que le sale igual.
Vale.
Eso parece interesante
a nivel de producto.
Imagínate que haces la PR
de este código
y viene Feralp,
ve el código
y dices,
ostras, David,
esto lo has hecho aquí
a cuchillo.
No sé,
arregla un poco el código.
¿Qué se te ocurre?
¿Por dónde...
¿Qué es lo que harías?
¿Qué es lo que haría?
Bueno,
yo creo que
estas APIs
me las llevaría
a un archivo
nuevo,
distinto para...
no sé cómo lo llamaría
ahora mismo,
es la verdad,
pero que hiciera
esa encargada
de las llamadas
y bueno,
si esto,
por decir cosas,
si esto es una funcionalidad
que por lo que es
se repite un montón
porque mi página
se entera de GIFs
y se hace un montón
de veces esta llamada,
pues utilizaría
un custom hook
para hacer esto.
Vale.
¿Quieres aprender algo
que te va a volar la cabeza?
Por favor,
vuélame la cabeza.
La línea 22,
¿sabes que habías hecho
el split y el slice?
El split recibe
un segundo parámetro
que le puedes decir
el número de...
de...
bueno,
cuántas tiene que splitear,
básicamente.
Entonces,
podrías haber puesto
coma tres ahí.
¿Coma tres?
Sí.
Y ya está.
Ya lo hubieras tenido.
Me lo voy a guardar.
Me lo voy a guardar.
O sea,
sabe muy poca gente
y está bastante buena.
Vale,
imagínate,
claro,
también en el equipo,
luego viene este machine
y dice,
vale,
vale,
ahora has mejorado el código,
has separado los servicios,
como decías,
y todo esto,
esto está muy bonito,
pero David,
es que no has hecho
ni un test.
Entonces,
¿qué es lo primero
que harías?
¿Cuál es el test
que se te ocurre?
¿Cuál es el test que dices?
Imagínate que solo tienes
tiempo para hacer un test.
Porque claro,
te me echa y te dice,
oye,
que esto hay que
mejearlo ya.
Vamos,
vamos,
haz un test rápido,
el más importante,
el que sea más importante
y le damos.
Yo creo que el test
que pondría sería
el de qué pasa
si no hay nada.
Vale,
pero...
Sí,
para el de...
para el de...
Esto,
por ejemplo,
qué pasa si aquí
no se busca nada,
desde el primer lugar.
Porque eso petaría
también en la próxima,
porque no tendría aquí
nada,
imagino.
Vale,
pero estaríamos testeando
algo de lo que
ni siquiera hemos implementado.
O sea,
sabríamos
que nos va a petar
lo que hemos hecho,
¿no?
Porque seguramente
podría petar
o...
¿Tiene sentido
que testeemos
algo que ni siquiera
hemos implementado?
Bueno,
no.
En mi cabeza
estaba poniendo
el caso
de que había un input
y que un usuario
no escribiese nada
y que le diese a...
Vale,
pero imagínate
que este es el código
y vamos a sacar
esto a producción
y te dicen
oye,
vamos a asegurarnos
que al menos
esto funcione.
Asegurarme al menos
de que me devuelve
algo la API.
Que nos devuelve
algo la API.
¿Pero la API
es nuestra?
No,
la API no es nuestra.
¿Tenemos que hacerle
trabajo a la gente
de la API
para testearla?
No.
En este lado
creo que me pillas.
No se me ocurre
ahora mismo
qué podría hacer.
No,
no pasa nada.
Vale.
Pues vamos a dejar
aquí la entrevista
pero David,
si tienes alguna duda,
pregunta,
feedback o lo que sea,
me gustaría escucharlo.
Así que este es tu momento.
Cualquier cosa
que quieras decir,
yo que sé,
alguna pregunta
que tengas,
algo que no has entendido,
algo que quieras,
clarificación
o si quieres dar feedback
o lo que sea,
soy todo oídos.
Si tienes algún tipo
de feedback general
que me pueda ayudar
en algo,
cualquier cosa
es bien recibida.
¿Sí?
Sí.
Vale,
ahora te lo daré.
Pero aparte de eso,
¿hay algo que quieras,
no sé,
decir o clarificar
sobre la prueba?
¿O algo que...?
Bueno,
primero decir,
creo que la prueba
realmente es menos complicada
de lo que parecía
en un principio.
O sea,
los nervios hacen mucho.
Segundo,
tengo que decir,
muchas gracias,
chat,
porque cuando he echado
un vistacito,
he visto que estáis todos
súper vamos,
David,
en plan,
muchísimas gracias.
Me ha animado bastante.
Súper supporters,
a tope.
Sí.
Ahora,
creo que lo difícil
de estas entrevistas
realmente es
el intentar hacerlo
todo bien a la primera,
¿no?
Entre comillas.
Porque claro,
esto yo,
por mi cuenta,
me empiezo a ferir,
me sale mal,
lo vuelvo a hacer,
lo vuelvo a hacer
y así como todos
y al final
te sale tu proyecto bien.
La parte difícil
es decir,
tengo que tener
absolutamente seguro
de que lo que estoy diciendo
es verdad,
pero ha sido muy emocionante,
me ha gustado bastante.
La verdad es que al final
muy bien,
a ver,
no se te veía nervioso,
igual estabas nervioso,
pero está muy bien
porque no se te notaba.
Con las manos sudando,
o sea.
Bueno,
pero está bien
que al menos
no se te notaba,
hay gente que se nota más,
a mí yo creo que se me nota
un poco más que a ti,
cuando estés nervioso.
Un montón de corazones
que tienes ahí.
Sí.
A ver,
te voy a contar
a ti y a todo el mundo
un poco cositas,
¿vale?
Interesantes.
Bueno,
lo primero que una cosa
que he notado
que a lo mejor
te ha ido un poco
en contra y tal,
es el tema del teclado,
no sé,
o sea,
me ha dado la sensación,
es súper importante
el hecho de estar cómodo
con todo,
que lo tengas súper,
si al teclado todavía
no tenías al 100%
o lo que sea,
es el,
en una entrevista,
no lo digo por ti,
David,
lo digo más en general
también,
de que,
porque a mí me ha pasado,
en una entrevista
es el último día,
o sea,
es el peor día
para hacer experimentos.
Es el día que tenéis que ir,
por ejemplo,
es como cuando tenéis unas bambas,
pues no es el día
de estrenar bamba,
es el día de,
si a lo mejor en el teclado
todavía no estabas al 100%
o vas un poquito más lento
y a lo mejor en el antiguo
vivas mejor o lo que sea,
pues,
oye,
no pasa nada,
hago un rollback,
ya mañana vuelvo a recuperar
mi teclado nuevo
y ya está,
¿sabes?
Es súper importante,
a mí me ha pasado
y la verdad es que
marca un poco la diferencia
porque los nervios
necesitan estar
al 120% de comodidad,
¿sabes?
Sí,
sí,
claro,
de hecho es algo
que me pasa siempre,
pero,
o sea,
es el efecto
de que me estén mirando
mientras hago algo,
porque en el trabajo
cuando viene alguien
aquí a mi lado
a decirme tal
también me pasa exactamente
ahora mismo,
entonces es el efecto stream.
Muchas gracias a todo el mundo,
creo que estáis súper,
súper supportive.
Sí,
sí,
a ver,
otra cosa
que es súper importante
y que esto va bien,
que te haya pasado a ti,
no te va a volver a pasar,
David,
y creo que es súper importante
a la gente del chat
que a lo mejor
le ha sorprendido
el hecho de que te hayan hecho
hacer la aplicación de Real
desde cero.
Si lo pensáis fríamente,
sé que muchos
estamos habituados
a pensar
create bit,
create no sé qué,
y que te abstrae todo esto,
pero si queremos decir
que somos React developers,
algo tan básico
como crear
una aplicación de React,
¿cómo no vamos a ser capaces?
Es como que pone un poco en duda
que realmente
sepamos realmente hacer eso,
¿no?
Así que es súper importante
que cosas así
las tengamos controladas
de decir,
vale,
¿cómo se hace?
Al final habéis visto,
son tres líneas,
Sí,
son tres líneas de nada,
pero que he dicho yo,
me ha dado
por,
vamos,
tenía todos los lados cubiertos
menos ese,
literal.
Exacto,
y es un lado muy importante
de tener cubierto
porque es cómo crear
una aplicación
desde cero con React
y esto
he querido ponerlo
porque es un caso real
de que una prueba técnica
para junior y trainee
piden esto,
pero porque si
pensáis fríamente
es bastante básico
el hecho de cómo crear
desde cero
la aplicación de React.
Es que no se está
viendo algo muy,
¿sabes?
Nos ha dicho
voy a añadir un provider
y tal
y el problema
es que has perdido
mucho tiempo en esa parte
y a lo mejor
eso te ha pesado,
¿no?
Así que os recomiendo
a todos
que le echéis un vistazo
a esto,
¿no?
de cómo hacerlo
aunque sean proyectos
muy sencillos
para que realmente
no lo tengáis cubierto.
Claro,
cositas básicas
que además
en cuanto lo has dicho,
he dicho yo,
verás que esto
lo he visto
5.000 veces
en todos los proyectos
y nunca le he prestado atención
para copiarlo.
Exacto,
ahí está.
Luego hay gente que decía
se me hace raro ver
React sin Webpack.
Realmente tenía,
no está utilizando Webpack
pero está utilizando
Code Sandbox,
está utilizando
empaquetador,
está utilizando Parcel
y por eso justamente
los simpos y tal
todo eso estaba funcionando
de gratis.
O sea,
no es que no tenía
un empaquetador,
estaba,
al final podía haber sido Bit
o lo que sea
pero claro,
que estamos acostumbrados
a que ya estén
las cosas creadas
y es importante
que lo tengáis.
Luego,
así,
nunca digáis
en una entrevista
que es algo fácil.
Nunca digas
esto es fácil.
No me das cuenta
cuando sigue lo dicho.
Sí,
no pasa nada,
no pasa nada.
Pero,
pero ves que me has dicho
esto,
no,
si sería muy fácil.
Entonces,
automáticamente
la gente te va a decir
¿Ah, sí?
Pues bien,
¿sabes?
Por ejemplo,
lo del botón.
Lo del botón.
Ah,
esto es fácil,
no sé qué.
Ah,
pues venga.
Pues cuéntame,
¿cómo lo harías?
Vale,
sobre el tema del testing.
En el tema del testing
hay un test
que es el más importante
siempre.
Siempre.
Cuando me has dicho,
¿no?
Y no caías,
¿no?
Igual lo puedo decir ahora.
A ver,
a lo mejor
la ley de chat
es comprobar que se renderiza
el componente.
Claro,
hacer un test en tu end.
Esto lo he dicho
un montón de directos,
hacer un test en tu end.
Tienes que hacer un test en tu end
de que realmente
podrías haber dicho
hacer un test en tu end
y ver que se está renderizando
un texto
y una imagen.
Porque eso
es lo que hace
este producto,
el valor que tiene
es eso.
Luego,
eso no significa
que no sea importante
lo que has dicho
de qué pasa
si peta esto
pero es que al final
si lo miras fríamente
ni siquiera has hecho
los casos en los que pete.
Entonces,
hubieras hecho el test
y hubieras...
Lo importante es más
el happy path
de que dé el valor
que estamos buscando
con ese producto.
Asegurarnos que funciona,
¿no?
Te me echen cuando decía
el hacer el test este
es decir,
ostras,
vamos a asegurarnos
que funciona.
De hecho,
yo te lo decía,
¿cómo te aseguras
que funciona lo que has hecho?
Bueno,
pues al final
haría un test en tu end
de renderizar
y ver que estos dos elementos
están.
Porque si hay una imagen
y hay un texto
que ni siquiera tienes que ver
qué imagen y qué texto,
al menos voy a saber
que está funcionando
de alguna manera.
Y eso es súper,
súper clave,
porque es una pregunta
muy típica
de qué test harías
y te ponen poner
ejemplos de productos,
por ejemplo,
Amazon,
lo que sea,
o te pueden poner
tu proyecto
y en este caso
lo importante es que tú digas,
ostras,
pues me quiero asegurar
que lo que he hecho funciona
o que el valor
que le esté dando al usuario
es el correcto
y tal.
Claro.
Vale.
Por poquito.
Nada más.
Más cositas.
A ver,
más cositas.
Sí.
Otra cosa.
Cuando
cuando
os dicen
qué le puedes hacer,
ahí se te tiene
que ir la cabeza.
¿Sabes?
Cuando te digan
oye,
imagínate que tienes
cuatro horas
y no sé qué.
¿Qué le harías
al proyecto?
Eso es súper importante
que ahí
nunca te quedes
sin ideas
o sin habla
y que siempre,
por ejemplo,
componentizar,
no solo separar
los servicios
está muy bien,
componentizar,
asegurarme que los
componentizo,
no sé qué.
Me hubiera gustado
configurar el inter,
me aseguraría
que los nombres
de las variables
fuesen los correctos
porque la verdad
es que lo he hecho
muy rápido
y así todo el rato.
Mejorar la accesibilidad
porque la imagen
no he puesto el alt.
Claro,
cierto.
O sea,
montón de cosas,
¿sabes?
De pam,
pam,
pam.
Claro,
primero ha sido
con el tema
del producto
que claro,
era un poco,
ostras,
¿estás seguro
que quieren mejorar
directamente esto
cuando todavía
queda mucha,
¿no?
Voy a ponerle un input,
voy a hacer esto,
no sé qué.
Bueno,
cuando,
sobre todo,
cuando te dan más tiempo
es porque la idea
es que era un código
que ha sido rápido.
Bueno,
pues lo quiero,
oye,
pues me gustaría
entregarlo,
entregarlo primero
que lo pueda desplegar,
pero me gustaría
poder refactorizarlo
tranquilamente,
componentizar bien
las cositas,
bla,
bla,
y todo esto,
¿vale?
Y a ver,
vamos a ver un momento
el código
y te digo
algunas cosillas así.
Vale,
a ver,
por ejemplo,
línea,
la línea 4
obviamente fuera
del componente.
Uy,
la metí de dentro,
no me fijo.
No pasa nada.
Sí,
a veces te está pasando
que las cosas estas
de meter fuera,
adentro y tal,
pero bueno,
yo la línea 4
fuera del componente.
Sí,
o sea,
es una constante,
es obligatorio,
sí.
Al final ha estado bien
que has hecho
solo dos estados
porque hay gente
que hace tres,
por ejemplo,
para el tema este
de guardar
las tres palabras,
pero lo has hecho bien
porque no hace falta
hacer tres estados.
Una opción
de lo que has hecho
a veces es utilizar
dos efectos
que tampoco estaría mal.
¿Por qué?
Porque puedes efectuar,
un efecto sería
llamar a la API
de los gatos
y una vez que actualizas
la API de los gatos
podrías llamar
a otro efecto
que se ejecutaría
siempre que cambia
el estado de los gatos
y llamarías entonces
a la Giphy
y eso queda muy bien
porque al final
tienes dos efectos separados
y no tienes una concatenación
dentro de un fetch
que llamas a otro fetch.
Que bueno,
eso es solo una idea,
¿vale?
Luego,
el tema del naming
en unos strings,
data,
la verdad es que
ahí hay que evitar
el tema de poner así
data,
ves que te ha pasado
ese data.data,
es lo que menos
quería evitar
pero de hecho
me ponía muy nervioso
si dijera
estando dos segundos
pensando en un nombre.
Sí,
está bien,
o sea,
está bien que no hayas
perdido el tiempo
pero bueno,
a la mínima
que tengas un momento
de calma
o lo que sea,
pues una vez que ves
que funciona
pues paras ahí
y además te da tiempo
a respirar también
de no ir todo el rato
a saco.
Vale,
más para,
bueno,
obviamente separarlo
en servicios,
eso sí lo tengo muy claro.
Si lo bajas,
bajas ahí está,
mira,
en la línea 29
yo sinceramente
utilizar los efectos así
de pasarle el método
queda bastante raro.
Yo creo que una cosa
que es bastante típica
en los componentes de React,
o sea,
componentes,
cuando trabajamos con React
es que al useEffect
le pases directamente
un método
y dentro del método
que tú hagas el call API
que a lo mejor
sí lo puedes poner
en un servicio,
en un método,
lo que sea,
pero que lo hagas
dentro de la función
porque fíjate
lo raro que queda esto
de que en el useEffect
que le has pasado al call API
como un efecto,
se llama call API
como se llama el de arriba
que se llama call Giphy
y no sé qué.
Y en cambio uno es,
no es que sea un call,
si te fijas,
no es que sea un call API,
es un efecto
que dentro
debería llamar al call API.
Entonces,
el nombre queda
un poco raro
que debería hacer.
sería mejor
que explicase un poco más
lo que hace.
En el useEffect
yo hubiera puesto directamente
el método
y ya está.
Luego en el console.log
que he visto
que has hecho una cosa
que es,
dices,
a mí me gusta poner esto,
¿no?
Y has puesto GIF,
no sé qué.
Una cosa que te recomiendo
un montón para eso,
para no perder tiempo
muchas veces,
sobre todo cuando tienes,
una cosa que he hecho
en falta en el código
es que no utilizas
muchas constantes.
no estás como
haciendo bien
los pasos
del código,
¿no?
Por ejemplo,
en la línea,
pongamos en la línea 13.
Yo en la línea 13,
sí,
ves que tienes
el console.log
GIF
y a la derecha
todo el valor
y en la línea siguiente
todo el valor.
Sí,
sí,
cierto,
cierto,
cierto.
Son cosas que son sencillas
pero al final
ahí puedes poner
muy rápidamente
un const GIF
igual.
const GIF
y ponerlo aquí
y aquí.
Exacto,
lo sacas ahí,
lo tienes en una constante
y eso al final
es lo que te hace
en el console.log
que hubieras podido
poner el GIF
pero entre llaves
como si fuese un objeto
para que rápidamente
te lo ponga,
eso te ayuda un montón
a ti a la hora
de depurar el código
y además
la elegibilidad del código
mejora un montón.
Entonces,
estas cosas
te pueden ayudar.
No tengas miedo
a tirar de constantes
porque muchas veces
las constantes
ayudan un montón
a la hora
de la elegibilidad
del código,
de verlo
y ya está.
Esto es un poco todo.
Así que,
mira,
hay gente que dice
que ha hecho
cuatro horas de entrevista
pero...
Cuatro horas.
Cuatro horas
y tú una
y también
te has hecho polvo.
Me imagino.
Ha sido decir
¡guau!
Espero que nadie
del chat
me esté matando.
No, hombre.
La gente del chat
estaba encantada contigo.
Bueno, David,
que muchas gracias.
Espero que te lo has pasado bien.
Muchas gracias
por participar
porque, joder,
sé que es durillo
y nada,
que ya volveremos
para repetir
y hacer la segunda parte.
Por supuesto.
Ya la parte la peor
ya está hecho.
Ya de aquí a cielo.
Bueno, David,
que vaya muy bien.
Muchas gracias
por estar por aquí
y nos vamos viendo
en los streams.
Adiós.
Chao.
Hasta luego, crack.
Adiós.