Transcripciones
1. Introduccion: Es posible que hayas oído hablar de las API, pero ¿sabes cómo usarlas? Hoy, vamos a
recorrer todo lo
que necesitas saber para crear tu propia
aplicación web usando API gratuitas. Hola, mi nombre es Zoe. Soy ingeniero de software
y ex profesor al que le encanta educar a otros sobre
cómo comenzar con la codificación He creado toneladas
de sitios web y aplicaciones
web usando React CSS, HTML. Siguiente S y más. Hoy utilizaremos la API
gratuita de Rest Country para hacer esta aplicación web de búsqueda de
país. Este proyecto nos
permitirá
aprender a usar el siguiente S y reaccionar, cómo interactuar
e incorporar APIs en nuestros proyectos. Y cómo usar Javascript
o Typescript para
filtrar y devolver sucintamente los datos solicitados en
función de
la consulta de un usuario Comenzaremos con una visión general
básica de qué son las API y
por qué estamos usando a continuación. Sí. Y luego nos sumergiremos
directamente en nuestro tutorial. El tutorial se
dividirá en tres partes distintas. Primero, diseñaremos la aplicación web, luego la
engancharemos a la API. Y finalmente,
refinaremos la lógica de consulta para asegurarnos de que los usuarios obtengan exactamente lo
que buscan. Este curso es para
cualquier persona interesada en aprender a trabajar
con una API en una aplicación web. Al final de este curso, podrás hacerlo todo por ti mismo. Empecemos.
2. Proyecto de clase: Proyecto de clase. El proyecto
para esta clase es construir una aplicación web de búsqueda de
países completamente funcional utilizando una API gratuita. Para ello, necesitarás
acceso a una computadora
y un editor de código como código de
Visual Studio. También debes tener algo de
comprensión de Javascript o escribir script así
como HTML y CSS. Para hacer girar nuestra app,
vamos a usar un framework llamado Next
S, que usa React. También usaremos material I para algunos componentes básicos de
estilo. Dejaré enlaces a cualquier
activo y recurso que necesite en la pestaña Proyecto y
Recursos justo debajo.
3. API y bases de datos: Api y bases de datos. Una API o una interfaz de
programación de aplicaciones es un conjunto de reglas que permiten a los desarrolladores
front-end crear, leer, actualizar y eliminar
datos en el back-end, estas API son creadas por desarrolladores
backend que utilizan
lenguajes como Python, Ruby, Java Script y otros Las bases de datos, por otro lado, son donde viven los datos y se accede a ellos a través de estas API. Dependiendo del
tipo de solicitud de API que se envíe desde el front-end, ya sea crear, leer, actualizar o eliminar, se devolverá un conjunto diferente
de datos. Por ejemplo, si un nuevo
usuario va a configurar una cuenta escribiendo su dirección de
correo electrónico y contraseña. Una vez que golpeen Enviar, esa
información será enviada a la base de datos y se creará un nuevo
usuario.
4. Next.js: Siguiente S. En los años que
han pasado desde que reacciona introdujo
por primera vez muchos marcos se
han construido y
desarrollado a partir de ella. Un
framework muy popular hoy en día es Next S. Next S proporciona una gran cantidad de optimización fuera de la caja, como enrutamiento de renderizado lateral de
servi y el SEO mejorado Y como tal, es uno de los favoritos
de los desarrolladores front-end. Lo usaremos
en nuestro proyecto, así que vamos a sumergirnos
y comenzar.
5. Configuración de proyectos: Empecemos a trabajar
en este proyecto. La app que estamos buscando construir es algo así. Es una aplicación de
búsqueda de país que cuando escribes el
nombre de un país, realmente
puedes obtener
el resultado para ello. También deberías poder
simplemente seguir adelante y
filtrar por región. Entonces,
en algún lugar que esté en África o en
las Américas o en Europa,
etcétera, etcétera. Y también, debería decir que también
se puede cambiar
a modos oscuros. Se puede activar el
modo oscuro o el modo de luz. Y entonces, sí, vamos a
construir esta aplicación usando
esta API gratuita de Country Rest que se proporciona aquí. Entonces, como puedes ver, tenemos una API
Country Rest que
nos permite llegar a este punto final y luego recibir un montón
de detalles diferentes. Para que podamos obtener el
nombre, las banderas. Hay mucha información
diferente. Entonces dejaré un enlace
a este sitio web en la pestaña Proyectos y
Recursos a continuación, para que puedas seguirlo y usarlo en tu proyecto. Y también la inspiración
para este proyecto y el diseño para ello en realidad
proviene de este sitio web llamado
Front End Mentor. Ahí es donde
realmente consigo muchos de mis proyectos para trabajar y
construir proyectos, si quieres
comprobarlo, front-end, o es un proyecto totalmente
gratuito para usar, pero puedes agarrar
el diseño aquí y vamos a estar trabajando con esta imagen aquí para
construir nuestro proyecto. Sí, sigamos adelante
y comencemos. Voy a
empezar, como mencioné, vamos a estar
usando la siguiente
interfaz de usuario de material JS y escriba script. De hecho, he construido
una plantilla que
vamos a utilizar para
trabajar realmente en nuestro proyecto. Aquí, voy a seguir adelante y conseguir que un repositorio comience a
usar esta plantilla. Impresionante. Ahora se crea el
repositorio. De hecho, podemos
usarlo localmente para desarrollar
nuestra aplicación de búsqueda de países. Y también voy a dejar un enlace tanto
a la plantilla al repositorio que
utilizo para esto que
puedes usar eso para comenzar
como punto de partida. Y también puedes revisar tu
trabajo a medida que vas avanzando si quieres ver cómo terminó pareciendo el
proyecto final . Bien, así que voy a seguir
adelante y clonar esto. Impresionante. Y entonces sólo voy a seguir adelante
y abrirla. Perfecto. Entonces
lo siguiente que tenemos que hacer, como cada vez que clonamos un proyecto
es que tenemos que instalarlo. Así que hagamos una instalación rápida de NPM. Bien, genial. Entonces
ya está instalado. Solo deberíamos poder
hacer MPM run dev. Impresionante. Y es comenzar en
host local 3,000 y genial, tenemos nuestra aplicación en
funcionamiento así que estamos bien para ir. Sigamos adelante y comencemos.
6. Cómo diseñar la aplicación: En esta sección,
vamos a estar centrándonos mayormente en el estilo. Entonces, si te
interesa más la lógica, podrías pasar
a la siguiente lección. Bien,
lo primero que quiero hacer como costumbre es crear una nueva
carpeta para mis componentes. Entonces quiero seguir adelante y
despejar esta siguiente página de GS. Entonces solo voy a
aclarar todo en la sección principal
aquí, salvo eso. También voy a
quitar los estilos en
el di aquí, esta búsqueda de
país. Eso debería ser bueno por ahora cuando estamos viendo
este proyecto de ejemplo. ¿Correcto? Tenemos un par
de secciones diferentes con las
que estamos trabajando, ¿verdad? Hay como esta sección de
encabezado, hay esta sección de entrada, hay un filtro de región aquí, un selecto, lo veo como
algunas secciones distintas. Ahí está el encabezado y
luego está esta más grande, la propia pieza country real. Después está la exhibición de
todas estas diferentes tarjetas. Vamos a romperlo en pedazos. Lo que vamos
a hacer aquí, primero, voy a crear un
contenedor para todo el asunto. Voy a llamarlo el contenedor de búsqueda
Country. Eso sólo va a albergar todo lo que
estamos trabajando. Fresco. Y usaremos Emmett
y luego solo
importaremos esto aquí.
¿Todo bien? Perfecto. Si revisamos esto el frente, vemos
que tenemos nuestro contenedor de
búsqueda de país ahí. Perfecto. Esto va a contener un par de cosas
diferentes. Vamos a crear otro
componente llamado header. Vamos a crear otro
componente llamado, um, vamos a llamar a este
País Buscar. Bien, e importaremos ambos al contenedor
Country Search. Sólo voy a cambiar esto a una caja porque eso es como el, el material que a
modo de hacerlo. Y eso solo nos
permitiría usar diferentes apoyos usando X,
X, si no has
oído hablar de él antes El prop SX básicamente te
permite acceder a los mismos apoyos con los que
podrías agregar como un prop de estilo en
un elemento regular Pero te permite hacer cosas
especiales así como media queries y cosas así que no puedes
hacer en el prop de estilo. Prefiero usar los elementos
de los componentes muy siempre que sea posible cuando
estén disponibles para todos nosotros. Verás que tenemos nuestro
jefe de búsqueda de país. Muy bien, entonces
mirando el diseño aquí, notarás que
tenemos un poco de margen o relleno en cada lado, y luego es igual en
ambos componentes, y luego tenemos la pieza
más grande aquí. Bien, quiero acercarme a
esto en varios pasos. Lo primero que quiero
hacer, como mencioné, es que queremos darle estilo al proyecto
real en sí. Así que vamos a trabajar en el
estilo y luego pasar de ahí para ser básicamente
querer estilizar estos de
una manera que ambos puedan tener algún relleno a
la izquierda y a la derecha. Vamos a saltar primero
al encabezado. La cabeza también cambia a una caja. El encabezado tiene dos elementos
principales. Tiene la guerra en el mundo y luego también tiene el botón de modo
oscuro. Entonces vamos a empezar
usando un elemento tipográfico,
digamos, que
vamos a usar,
vamos a decir en el
texto que estamos en el mundo, esto será de
la variante H uno, porque cada página
necesita tener uno H. Y entonces probablemente no
va a ser el formato correcto, pero podemos lidiar con
eso con x, ¿verdad? Sí, es un poco demasiado grande. Así que vamos a SX y
después vamos a configurarlo para que sea tal vez tamaño de fuente uno Ram, tal vez dos Ram 1.5 Entonces vamos a hacer fuente
esperar como 700. Bien, genial.
Ese es el elemento uno. Y entonces el
segundo es este botón. Y el botón dice modo
oscuro como a. Sí, también
hay un botón de
botón. Lo siento. También hay un icono icono
que es como una especie de media
luna, luna creciente. Busquemos lunas. Y éste se ve bastante cerca, así que vamos a
usar esto en nuestro botón, así que voy a usar. Fresco. Y
ahí tenemos nuestra pequeña luna. Todo bien. Impresionante. Lo siguiente
que vamos a querer hacer aquí es que vamos
a querer poner esto en una fila. Entonces voy a usar los apoyos
SS y solo voy
a cambiar la pantalla
a flex y guardar eso Voy a justificar el espacio de
contenido entre, voy a alinear
los elementos al centro. Impresionante. Sí. Bien, así que para el cabezazo ahora también
sé que
quiero algunos acolchados. Voy a hacer relleno
de arriba y abajo
va a ser una M e izquierda y derecha va
a ser dos ram. Eso debería ser bueno por ahora.
¿Qué más tenemos que hacer? Queremos asegurarnos de que,
oh sí, el color en realidad, si te das cuenta, es
ligeramente diferente. De hecho, quiero
establecer el color de
fondo general de la
aplicación para que sea así, gris
claro, y luego este en realidad
va
a ser nuestro blanco. Voy a agarrar eso, solo
voy a usar este seleccionador de color Solo voy a agarrar este
color aquí mismo e increíble, ese va a ser el color
del fondo real
de toda la aplicación. Lo que quiero hacer aquí, creo que vamos a ir con índice. En realidad vamos a establecer
el color de fondo aquí de este general para que sea ese color. Así que vamos a ir al color de
fondo, configurarlo para que sea increíble. Y se puede ver que apenas cambió
un poco aquí. Es un poco difícil de
ver solo porque es solo como una especie
de sección pequeña, Pero va a ser un poco más evidente ya que empecemos a trabajar
un poco más en la manzana. La otra cosa que
quiero hacer aquí es establecer el tamaño de este elemento, porque es una especie de cosa de una
página. Quiero que la altura mínima del elemento
sea de 100 ew alturas Eso va a ser el 100% de la altura de la vista
que estamos tomando. Y entonces quiero que solo la altura
regular o la, la altura máxima probablemente esté
en forma de contenido. Y esto será más
relevante una vez que empecemos a obtener un montón
de resultados diferentes. Muy bien, voy a quitar
estos estilos extra aquí. Bien, genial. Entonces, lo siguiente que
vamos a querer hacer ahora es cambiar el color
de fondo del encabezado. Entonces el encabezado, ahora
vamos a volver aquí y establecer el color de fondo
para que sea solo blanco, genial y
apenas se puede ver, pero aquí hay una ligera
diferencia. Voy a hacer una cosa más
para distinguirla. Ya ves cómo hay esta
pequeña sombra de caja aquí. Solo vamos a
agregar una sombra de caja al fondo de esto,
esta pieza de aquí. Entonces voy a copiar esto
y luego agregarlo a nuestra cabeza. Y lo vamos a modificar
un poco. Bien, así que sólo
vamos a tenerlo desplazado, tal vez dos pixeles
en cada dirección. Vamos a hacer que
sea un gris claro. Guarde eso. Como pueden ver, solo
tenemos una especie
de diferenciación realmente básica entre los dos. Eso es lo suficientemente bueno por ahora. Sabes, creo que
también podemos hacer cosas como el cambio en el color del botón
y cosas así. No necesariamente como lo
más importante que hay que hacer. Creo que el siguiente tipo de cosa
más importante
que hacer sería
bajar la venta por el resto de esto. Bien, así que lo siguiente que
vamos a hacer aquí es trabajar en nuestro contenedor de
búsqueda de país. Entonces nuestro país busca, lo siento. Entonces en la búsqueda del país, va a ser
un montón de elementos
diferentes, bueno tres. Entonces vamos a
cambiar a una caja. Primero vamos
a tener un insumo, vamos a tener el selecto. Y luego vamos
a exhibir todas
las tarjetas, creo material. Tengo un componente de campo de texto de entrada de
texto de texto. Y creo que vamos
a querer usar como el
esquema uno para esto. Así que solo voy a
agarrar esta línea de código aquí y copiarla de nuevo en nuestro proyecto y agregarla
como nuestro primer elemento. Entonces vamos a
tener un campo de texto que importamos del material I. Y luego también tienen un componente
Select Select. Y sólo
vamos a agarrar
todo esto aquí mismo y usarlo. Perfecto. Y solo tenemos que sumar todas estas importaciones faltantes
para que no consigamos ningún error. Solo estoy usando esto como
plantilla en este momento. Vamos a seguir adelante
y cambiarlo para que se ajuste a nuestros propósitos. Bien, genial. Entonces tenemos nuestra entrada de texto y
tenemos nuestro H o nuestro
desplegable seleccione. Voy a hacer una cosa
más, y
voy a envolver estos en una caja porque en
realidad vamos a tener nuestras tarjetas
mostradas en esta página también. Así que vamos a salvar eso.
Y entonces voy a cambiar el display
de esto para que sea Flex. Guarde eso. Impresionante.
Fresco. Entonces ahora están en una línea pero el
espaciado no es correcto. Realmente correcto. Ahora mismo, el control de formulario está diciendo ancho
completo.
En realidad no queremos eso. Queremos que sea con
tal vez como cinco rime, diez Ram, porque
van a ser palabras, pero realmente no necesitamos que
sea tan amplia Y entonces
realmente vamos a querer que estos tengan espacio entre ellos también
tengan espacio entre ellos. Entonces vamos
a hacer lo mismo. ¿Listo para ir? Justificar el contenido. Vamos a ponerla en
espacio entre seis tiempos. Fresco. Impresionante. Como notarás, todavía
nos falta ese
relleno en el exterior ahí. Entonces solo vamos
a agregar otro S x pro a la caja exterior y
agregar algo de relleno ahí. Así que sólo vamos a ir
relleno y
vamos a ir dos Ram por todas partes y decir eso, increíble, genial. Es un poco más en la fila. Ahora, lo último que quiero
hacer con la entrada de texto es hacerla un
poco más larga porque
puedes ver que en realidad es
bastante más larga. Y yo solo voy a lograrlo, vamos a establecer el
ancho para que sea, ¿qué, 20 Ram? De hecho, digamos que
es un ancho de vista 20 que el peso cambia con el tamaño real del ancho de la vista de
pantalla en lugar M. Eso siempre
será como 30% del
ancho de la vista. Es un poco
más receptivo. Haré lo mismo
con el selecto aquí. Podría ser necesario cambiar
eso a 2015. O 20. A lo mejor 15. Sí, se ve
bien. Bien, genial. Y entonces éste en realidad puede
ser un poco más largo, tal vez 40. Fresco. Eso debería ser bueno. Entonces
otra cosa que noté, acabo de notar es que el color de
fondo es en realidad blanco en la natación también,
puse eso en blanco. Di eso. Bien,
increíble, genial Así que tenemos una entrada de texto realmente
básica, Tenemos nuestro selecto. Y luego vamos a
hacer nuestra tarjeta desplegable solo para personalizar esto
un poco más Mientras que aquí notaremos que el texto inicial es
buscar país punto punto. Entonces
queremos cambiar eso. En vez de que eso sea el laico, vamos a decir buscar un país y decir que
entonces aquí dice edad. Realmente queremos que eso
se filtre por región. Vamos a cambiar
eso para filtrar por región. Eso lo
vamos a decir. Hagámoslo un poco más, hagamos que este 20 sea perfecto. Um, y supongo el fondo de eso también
debería ser blanco Di eso. Impresionante.
Lo siguiente que queremos hacer ahora es cambiar las diferentes opciones reales
aquí, Los elementos del menú. Lo que voy a hacer, en realidad
voy a
cerrar esto y voy
a empezar con uno. Es África, América. Sigamos adelante y
tecleándolos. Entonces vamos a hacer África.
África, África. Y luego sólo
voy a copiar y pegar estas pocas veces América. De hecho voy
a hacer uno por encima y
eso va
a ser nuestro todo. Voy a añadir otra. Verás por qué voy a
añadir esto más tarde, pero sólo voy a
hacer uno. Eso es todo. Muy bien, América. Una cosa interesante
de esta API, en
realidad no es América. Está buscando, es América,
como América del Norte, América del Sur,
América del Sur. Desea querer
cambiar el valor de
este elemento del menú a América, a pesar de que la
pantalla dice América. En realidad, podemos
cambiar a América solo para ser semánticamente correctos Bien, bajando por la lista, vamos a cambiar
este a Asia y cambiarlo a ti. Y lo que estoy haciendo aquí,
por si acaso no lo has hecho, no estás familiarizado con
este tipo de truco de teclado, estoy presionando el comando
D para
seleccionar la palabra en la que
estoy trabajando. Y luego la siguiente
versión de esa palabra, el siguiente duplicado de esa palabra. Entonces solo quiero presionar el
comando D hasta que seleccione todo el número de versiones de esa palabra
que están frente a mí. Entonces vamos a hacer Europa, y luego
vamos a hacer Oceana Todo bien. Impresionante. Entonces tenemos nuestro filtro por región. Fresco. Lo siguiente que
vamos a querer hacer, vamos a querer crear
nuestras tarjetas para nuestro país. Entonces estas van a
ser tarjetas que tienen algunas propiedades,
algunos aspectos diferentes. Vamos a
tomar la imagen, vamos a conseguir el nombre, la población, la
región, y el capitolio Bien, genial. Entonces
voy a crear otro componente para
esto llamarlo tarjeta. Di eso ahora mismo, solo
quiero ver cómo se ve con algunos datos simulados. Así que voy a volver a mi búsqueda de país y
voy a crear
algo llamado, o simplemente una matriz de
cadenas para datos simulados. Entonces hagamos mo data. En realidad vamos a hacer
una matriz de objetos. Vamos a hacer una variedad de
países. Entonces hagámoslo a Alemania. Hagamos United. Estados de América, y haremos Brasil
igual que en el ejemplo. Bien, genial.
Eso lo guardaremos entonces. Ahora lo que quiero
hacer, como pueden ver, tenemos nuestra caja con
nuestro control de formularios, nuestro input y nuestro componente
selecto. Queremos salir de
esa caja y luego solo
queremos hacer nuestro
bucle a través de eso. Lo vamos a hacer aquí,
vamos a ir a simulacros de datos. Entonces quiero mapear esos datos
simulados para cada país. Quiero devolver una tarjeta tarjeta material de la tarjeta. Guarde eso. Ah, sí. Cada vez que
usas el mapa, necesitas una llave. Entonces solo voy a poner
la llave para que sea el nombre
del país por ahora.
Eso lo guardaremos. Bien, genial. Entonces,
si voy a nuestra tarjeta, deberíamos simplemente, sí, tenemos tres países
en nuestros datos simulados. Básicamente es el bucle para el número de veces
que tenemos el país. Entonces tenemos tres tarjetas.
Impresionante. Sigamos adelante y arreglemos un poco
esta tarjeta En realidad tiene un componente
llamado las diferentes tarjetas, pero queremos usar uno
que tenga una imagen. Um, tal vez la tarjeta de medios. Creo que esta podría ser
la mejor para nosotros. Entonces voy a seguir adelante y copiar esta información aquí
mismo. Y solo vamos
a crear la tarjeta, guardarla y simplemente agregar todas
estas importaciones faltantes. Oh si, yo le di el nombre de la tarjeta. Bien, así que vamos
a importar porque nombro el propio
componente real, tarjeta. Hay un conflicto porque estamos importando tarjeta para material Y. He creado
algo llamado tarjetas. Entonces voy a nombrar
su tarjeta de tarjeta solo para que sea diferente y no
haya ese conflicto. Bien, voy a quitar
un par de estas piezas. Al igual que las acciones de tarjetas, no
necesitamos eso. Literalmente solo estamos buscando
mostrar información. Y entonces, sí, eso
debería ser bastante decente. La altura de la imagen
y el ancho máximo. Quiero que el ancho máximo
sea tal vez 20 ancho de vista, tal vez solo vamos a establecer que sea el
ancho definitivo porque
se supone que debemos ser capaces de
caber cuatro cruz 20 ancho. Y entonces
realmente voy a volver aquí y debería envolverlo en una caja. Sí, déjame envolverlo en una caja. Y luego voy a convertir
esto en una caja flexible. Eso voy a
decir, genial, genial. Entonces ahora están empezando
a extenderse. Agreguemos un país más. Hagamos Jamaica. Solo para que tenga los cuatro
cruzados, puedo tener una idea
de cómo se ve eso. Y entonces quiero
justificar el contenido. Yo creo que quiero espaciar de
manera uniforme . No hay espacio alrededor. Espacio. Espacio entre. Quiero espacio entre otra vez. Muy bien, Genial e increíble. Entonces sí, tenemos nuestras
cuatro cartas ahí mismo. Todos dicen lagarto
ahora mismo porque eso es
lo que dicen los datos simulados.
Pero vamos a trabajar en eso. Bien, solo quiero
retocar esta pequeña
pieza de aquí mismo. No hay suficiente espacio entre la tarjeta y la entrada real, así que voy a agregar algo de
margen a esta caja superior, así que voy a
ir al margen inferior. Perfecto. Y luego sólo voy a retocar un poco
la tarjeta. Entonces voy a establecer la altura
de la tarjeta real para que sea, digamos diez
alturas de vista que demasiado pequeñas. A lo mejor 15, a lo mejor diez está bien. Y luego vamos a
terminar pasando en algunas
propiedades de,
desde la propia API
una vez que las obtengamos. Así que creo que somos bastante decentes
en el estilo general. Sin embargo, hay una cosa más que
quiero hacer, solo para permitirnos hacer
y trabajar con modo oscuro.
7. Modo oscuro y Zustand: Lo último que vamos
a querer hacer para estilizar es trabajar en nuestro
modo oscuro Materialmente, realidad
tengo esta característica realmente
impresionante donde te
proporciona un
tema predeterminado que está en modo de luz Entonces, lo que voy
a hacer es en realidad tratar de apuntar a ese tema del modo de
luz y simplemente hacer que se
mueva entre el modo claro y modo
oscuro dependiendo del
modo en el que queramos estar. Entonces vamos a encender,
vamos a aprovechar eso para que nuestra aplicación
aquí acceda a esto. Vive en un par
de lugares diferentes. Si miramos nuestra aplicación de puntuación de aplicaciones, verás que
aquí
hay algo que
proporciona el tema, un proveedor de temas
y está proporcionando algo llamado
el tema ligero. Entonces el tema ligero, el tema
ligero se ha creado usando la función create
theme aquí. Y vamos a
simplemente comprobar que vive en los estilos
en la carpeta de temas, en un archivo llamado
light theme options. Entonces, si solo
lo revisamos aquí mismo, podemos verlo como
un archivo bastante básico y debería ser bastante fácil crear una
versión en modo oscuro de esto. Entonces lo que voy a
hacer es simplemente copiar todo esto y crear un
nuevo archivo y llamarlo opciones de tema
oscuro
y pegar eso. Pero en lugar de donde quiera
que diga luz, solo
voy a
cambiarlo a oscuro. Y estoy bastante seguro de que
esto va a funcionar. Sólo vamos a
dejarnos voltear entre oscuridad y la luz. Impresionante. Entonces tenemos que ir. Lo siguiente que voy
a querer hacer ahora es que básicamente
necesito insertar
esto en el punto correcto. Entonces, si voy a app, básicamente lo que quiero
hacer aquí y no va a estar
solo aquí en esta parte de la app,
va a estar por todas partes. Entonces lo que estoy pensando es que
quiero instalar Zustand
para poder gestionar esta sencilla
pieza de estado global Podríamos apuntalar a
Joe todo el camino, pero creo que esto va
a ser un poco más limpio. Entonces, si no estás
familiarizado con Zustan,
Zustand es como una alternativa de
Redux pero mucho Tiene mucho menos tipo de
boilerplate para comenzar. Entonces buscamos a Zustand, básicamente
es solo una
forma de administrar el estado Si, este es el doc, solo
lo voy a instalar muy
rápido. Entonces voy a
crear una tienda. Voy a crear una
nueva carpeta llamada store. Voy a crear un archivo
ahí llamado index TS. Lo que quiero hacer
es literalmente crear una tienda de Zand Voy a copiar
su formato aquí. Um, Oh, y es
quejarse del tipo. lo arreglaremos. Sí, básicamente
quiero crear
este gancho llamado tienda, que va a crear una tienda que solo podamos tener
nuestro estado global viviendo. Así que solo
necesito dos apoyos es modo
oscuro y va
a ser falso para empezar Y luego quiero
alternar el modo oscuro. Lo que eso va a hacer
es quitar esto. Es el modo es modo oscuro, va a tomar ese
pedazo de estado y luego solo
lo va a poner en lo contrario
de lo que es. Va a,
digamos allá atrás, va a ser el estado
opuesto es el modo oscuro. Cuando presiono Toggle dark mode, sea cual sea el modo oscuro, va a ser
lo contrario de eso. Una última cosa que
vamos a hacer aquí es agregar los tipos que
vamos a crear. Esta es la tienda es modo oscuro, va a ser un lingote Entonces vamos a
alternar el modo oscuro. Esto sólo va a ser una función
sencilla
que devuelva void. Entonces vamos a establecer
tienda, tienda, estado. Sólo vamos
a llamarlo tienda. Di eso y genial, ahora
hemos arreglado nuestro error de tipo. Ahora podemos acceder a esta tienda desde cualquier parte
de nuestro proyecto. Entonces si vuelvo a las aplicaciones
X y ahora puedo engancharme a esto y básicamente acceder al valor
de es Stark Boat. Entonces, cómo vamos a
hacer esto es que
queremos copiar esta funcionalidad aquí. Aquí vamos a entrar en
nuestro componente, hacerlo un poco más grande. Y voy a ir
constante es modo oscuro, vas a ir a la tienda. Eso vamos a importar. Oh, ¿sabes qué? Olvidé exportarlo. Asegúrate de exportar la tienda porque de lo contrario
importarás la tienda equivocada. Entonces vamos a exportar tienda
e importarla de tienda. Y van
a declarar modo oscuro. Esto es todo lo que tienes
que hacer para configurar el estado. Es súper sencillo,
súper simple. Si no has visto mi otro
video sobre cómo declarar, nosotros hacemos exactamente lo mismo. Esto está en el para hacer en proyecto. Es muy, muy
sencillo, muy simple de usar. Pero entonces lo
recomendaría encarecidamente usarlo porque, quiero decir, mira lo rápido
que acabamos de configurar el estado. Entonces, en base a si es o
no modo oscuro, quiero mostrar el
tema claro o el tema oscuro. Entonces voy a hacer
un chequeo rápido aquí. Entonces si es modo oscuro,
quiero usar el tema oscuro. Y déjame importarlo
y crear el tema oscuro. E importarlo,
vamos a ir tema oscuro. Y si no es entonces
vamos a querer hacer tema
ligero y
decir eso, increíble. Bien, así que lo
siguiente que
vamos a hacer es que tenemos
que encenderlo de verdad. Porque ahora mismo
no está haciendo nada. ¿Verdad? Nada está
activando ese togle Entonces si vuelvo a la cabecera, quiero ir al botón de aquí. Y queremos hacer
lo mismo. Queremos, queremos acceder
al toggle, que era este
formato aquí mismo. Y vamos a
hacer Toggle Dark Mode. Y va a
hacer lo mismo. Vamos a importar
la tienda de la tienda y estado
toggle Modo Oscuro. Vamos a salvar eso. Impresionante. Es reconocer
que es una función. Y luego al hacer clic aquí, literalmente solo queremos
llamar a toggle Modo oscuro. Si conectamos esto correctamente, cuando presiono el botón de modo oscuro, algunas cosas simplemente deberían
oscurecerse y algunas cosas deberían quedarse Si le damos
clic, increíble. Entonces no es perfecto porque
hemos hecho muchas personalizaciones nosotros mismos como
con los fondos aquí Pero este es un primer paso realmente
bueno, así que sabemos que está funcionando. Ahora todo lo que tenemos que hacer es
enganchar las otras piezas. Entonces verás que este
trasfondo no cambia. Ese fondo no cambia, ese fondo no cambia, y este fondo
no cambia. Así que tenemos un par de
antecedentes que arreglar. Entonces si vuelves a, o
en realidad podemos empezar aquí, así que si agarramos es modo oscuro de la misma tienda que es modo
oscuro y guardamos eso. Entonces si acabo de hacer otro
check en esta línea aquí mismo. Entonces si voy es modo oscuro y
si lo es, quiero que sea. Volvamos a nuestro diseño. Quiero que sea de este color.
Entonces déjame agarrarlo muy rápido. Esto es para el encabezado. En realidad, este color
es el que quiero. Voy a agarrar eso.
Si es modo oscuro, quiero que el
color de fondo sea eso. Si no lo es, quiero
que sea esto. Y guarda eso si lo alternamos. Impresionante. Trabajando muy bien. Fresco. Lo siguiente que quiero hacer es cambiar eso
para el país. Busca en toda la app. Entonces eso va a estar
aquí en nuestro índice. Aquí vamos a hacer
lo mismo. En realidad podemos literalmente
simplemente copiar el modo oscuro aquí. Pega eso ahí dentro. Y luego importar la tienda, guardar eso. Entonces vamos a
cambiarlo a este color aquí. Agarra eso ahí, eso. Y entonces vamos a ir es modo
oscuro y hacer la pregunta. Y vamos a
hacerlo. Va a ser, si no lo es, va
a ser que vamos
a salvar eso entonces. Impresionante. Entonces, si lo hemos hecho bien,
increíble. Eso cambia. Bien,
Lo último que tenemos que
cambiar son estos Toggle, creo que esos son lo
mismo que este color de aquí arriba. Eso va a estar en
nuestra búsqueda de país. Para que podamos hacer el mismo
check in Búsqueda de País. Guarde eso. Importa eso. Ah, sí. Dondequiera que sea FFF Nags,
cámbielos para que sean de este color Aquí para ir es modo oscuro y lo mismo aquí, modo oscuro. Y definitivamente hay una manera más
sucinta de hacer esto. Esto es solo una especie de
hacerlo rápido, guárdalo. Bien, impresionante. Entonces si le doy la
vuelta al modo oscuro
ahora funciona dulce. Muy bien, así que hemos cuidado
y ordenado el modo
oscuro para que podamos pasar más allá
de nuestros estilos
como pequeñas cosas, pequeños retoques que hacer, un
poco de retoques
para hacer en el camino, especialmente una vez que importamos nuestras imágenes y cosas así Pero esto es como un muy
buen comienzo por ahora.
8. Cómo usar una API: Bien, así que si echamos un vistazo a nuestra
información de API aquí, nuestro punto final, Ok. Básicamente
podemos agarrar todos
los países desde
este único enlace. Ahora probablemente vamos
a terminar filtrándolo, pero este es un buen
lugar para comenzar. Vamos a
querer agarrar esto. Ahora, tenemos que pensar en
la jerarquía aquí, ¿verdad? Tenemos nuestro insumo, tenemos nuestro filtro,
y tenemos nuestro auto. Ahora mismo está todo en el mismo
componente. Y eso se hace intencionalmente para que esto sea un poco
más fácil para nosotros mismos. Lo que vamos a hacer
aquí está en realidad dentro del mismo componente es donde
vamos a hacer nuestra búsqueda. Ahora en una especie de montaje más limpio, podemos empezar a
separar estas piezas, pero como MVP, podemos
empezar por juntarlo todo y conseguir una especie
de versión básica de trabajo Cómo vamos a
hacer eso es que en
realidad vamos a
llamar en un efecto de uso. Vamos a hacer un fetch de esta API y
eso debería estar entre comillas co. ¿Qué fetch nos permite hacer? Si buscamos la
documentación aquí, fetch nos permite esencialmente
recibir una respuesta Básicamente, estamos
enviando una solicitud. Es un método que
usamos para tomar un recurso de cualquiera que sea ese punto final, y luego podemos transformar esos datos en algo utilizable. Lo que vamos a hacer aquí
es que vamos a buscarlo, y luego vamos a
encadenar un punto luego a él Entonces vamos a decir “buscar”. Entonces vamos a agarrar la respuesta porque
queremos asegurarnos no siempre sabemos si nuestra respuesta
es
o no en formato Json o
si es legible. Vamos a
cambiarlo a Json. Vamos a ir
respuesta a tomar esa respuesta y la
vamos a convertir en Jon. Bien, entonces ahora
tenemos una respuesta de Jason. Impresionante. Lo último que
vamos a querer hacer, y en realidad deberíamos crear
algo para guardar esto. Vamos a
crear un objeto de datos o una variable de datos y
vamos a establecer los datos. Cuando esto se haga,
vamos a usar el estado. Los datos solo van a
ser un objeto vacío. Ahora necesitamos importar
estado, así funciona. Sí, eso lo hicimos. Hacer, entonces van
a hacer uno más, ponerse, tomar datos y luego
vamos a
establecer datos para que sean datos.
Vamos a salvarlo. Deberíamos estar bien
para irnos. Una cosa que quiero hacer ahora es ver
si esto realmente funciona. Quiero consolar
y ver si estamos obteniendo nuestros resultados.
Aquí la consola. Impresionante. Verás que aquí
tenemos 250 resultados, que es el número
de países. Y yo solo quiero, así
no creamos infilooplet me refrescar la página que
está Bien, y
solo vamos a pasar una matriz vacía aquí para detener el bucle infinito. Entonces
si solo nos refrescamos. Impresionante. Así que hemos conseguido que
nuestros datos sean perfectos. Entonces, si miramos un
dato individual aquí, si miramos a un país
individual, voy a describir el primero de, así veremos que tenemos
mucha información aquí. Bien, así que estos
son Turcos y Kakos. Verás que hay como
una tonelada, tonelada de información. Ahora no queremos
sobrebuscar los datos porque van a ser consultas
muy caras de ida y
vuelta Entonces, lo que podemos hacer, como dice la API aquí, en realidad
podemos simplemente recuperar
los campos que necesitamos Entonces podemos hacer todos los campos de
interrogación y luego es igual al
campo que necesitemos, ¿verdad Entonces sabemos que
probablemente necesitamos la bandera, necesitamos la población,
necesitamos la región, el capitolio Y necesitamos el nombre siguiendo el formato de esta estructura de
datos aquí. De hecho, podemos
cambiar nuestra consulta, nuestro fetch on line 25 aquí Y así haremos todo, y
luego iremos a los campos iguales, así que solo nos aseguraremos de que
estamos haciendo lo correcto. Sí, los campos son iguales,
y luego
los separaremos con comas Bien, genial. Entonces vamos a
hacer campos igual nombre. Necesitamos banderas, necesitamos capital, necesitamos población y necesitamos región. Y eso lo
guardaremos. Y creo que eso es
todo lo que necesitamos. Entonces, si nos
refrescamos, aún debemos obtener 250 resultados. Consigue todos los
países, pero si
ves los datos
ya son mucho menos. Obtenemos el capital,
obtenemos las banderas y el formulario
PNG y SVG. Obtenemos el nombre, obtenemos la población,
y obtenemos la región. Impresionante. Entonces
ya estamos obteniendo muchos menos datos y
eso va a hacer
que nuestras consultas sean mucho más fáciles. Perfecto. Entonces lo siguiente que
vamos a querer hacer ahora, en realidad, si
echamos un vistazo más. Notarás en realidad que los datos están en una forma muy
interesante. El capital está en realidad
dentro de una matriz. Así que básicamente queremos pasar estos datos a nuestras tarjetas, ¿verdad? Solo queremos que esto pase directo
dentro de nuestras cartas. Vamos a querer
tomar en toda esta información. Sí,
hagámoslo así. Vamos a pasar, luego vamos a pasar bandera. Y eso va a ser
bandera, Uy, país. Flagg. Y luego
vamos a pasar población, y eso solo va a
ser población del país. Y luego vamos
a pasar por región. Y esa va a
ser la región del país, entonces va a ser el nombre de
país.Com Bien,
entonces, ¿qué estoy haciendo aquí? Bien, estoy creando
todos estos errores. Entonces estos datos, que en realidad, vamos a usar nuestros datos
reales en un segundo, van a mapear a
través de cada país. Entonces por cada país
queremos ir y agarrar, y lo cambiaré en realidad, el nombre que vamos a
querer para agarrar el país. Y luego queremos entrar en el nombre que se nos proporciona. Y queremos agarrar
el nombre común porque el nombre común es el nombre con el que
vamos a ir. También podrías ir con
el nombre oficial, pero a veces el nombre
oficial no es el nombre que tu
usuario podría buscar. Entonces descubrí que el nombre
común basado en la API es un
poco mejor para ir con. Entonces queremos agarrar
la bandera, ¿no? La bandera es la imagen real, la ubicación de la imagen que han subido a una CDN Yo sólo voy a
ir con el PNG por ahora. Podríamos cambiar el
SVG si quisiéramos. Depende totalmente de ti,
pero vamos a ir flagg y esa
va a ser nuestra bandera También queremos
agarrar a la población y la población
en realidad no está anidada Es como
ahí mismo como un número. Así que sólo podemos ir país punto
población y agarrar eso. Vamos a agarrar la región. Lo mismo que solo una cuerda. Entonces vamos a
agarrar esa región. Y entonces la clave
sólo va a ser el nombre de la llave
va a ser el nombre
del país. Country.name.com
porque cada país debe tener un Awesome.com. Impresionante. Entonces lo que
vamos a hacer ahora es que
vamos a seguir adelante y
vamos a pasar
esto a nuestra tarjeta y básicamente configurarla para que pueda tomar
todos estos datos. Entonces vamos a crear
una interfaz aquí. Esto es solo para que
podamos definir nuestro prop, tenemos el nombre que
va a ser una cadena. Tenemos la región, que también va
a ser una cadena. Tenemos a la población, que también va
a ser una cadena. Tenemos la bandera, que
va a ser una cadena. Oh, ¿sabes qué? En realidad, nos olvidamos de la capital. También necesitamos del
Capitolio Capitolio. Y esta es una interesante. Por lo que en realidad va a ser Country Capitolio grupo cero Va a ser la primera
cadena de esa matriz. El primer objeto de esa matriz, que es una cadena,
será el Capitolio Eso también va
a ser una cuerda. Guardar esa bandera de
población de región. Creo que lo tengo
todo. Todo bien. Y entonces voy a
pasar esto a aquí, así nombra región,
población, bandera, capital. Y voy a pasar apoyos. Voy al tipo
props y guarda eso. Bien, genial. Entonces
tenemos eso funcionando. Lo siguiente que
probablemente voy a querer simplemente cambiar esto para usar datos porque me está
dando muchos errores. Datos. Ah, y sabes qué, es, oh, me está dando un
error porque
no es del tipo array. Así que en realidad necesita
ser una matriz de objetos. Así que para ser una
matriz de objetos, probablemente también me haya dado errores porque los he establecido, básicamente
he inicializado
un tipo de esto Podría simplemente crear un tipo
común, como un país. No tengo que
pasarlo entre los dos. Si creo otra carpeta, creo tipos,
voy archivo Indexador. Entonces cada país va a tener un nombre que es una cadena. Nombre va a ser, el nombre es una propiedad común que va a ser la cadena. Y entonces vamos a
tener una bandera que
va a tener una cadena de
propiedad PNG. Y entonces vamos
a tener una población que va a ser un número. Y van
a tener una región que va a ser una cadena. Y vamos a
tener un capital, que va a
ser una matriz de cadenas. Bien, si puedo importar, si exporto el tipo de país, veamos si esto
funciona y lo importo. ¿Importar? No, no, todavía quiere una
especie de tipo básico. Bien, entonces oh, tal vez
funcione en realidad árbol. Bien, genial. Así que simplemente crearemos el objeto aquí e
inicializaremos esos Nombramos va a ser una cadena. Nombre va a ser de común, va a tener una propiedad común que va a
ser de tipo string. Básicamente lo que esto está
buscando es como un valor inicial antes de que
la API se recupere. Lo que vamos a
hacer es dárselo. Quiere saber bien banderas PNG aún no ha devuelto nada. ¿Qué queremos que sea
hasta que obtengamos una respuesta? Así que vamos a escribir banderas y como sabemos por nuestra API, incluso
podemos simplemente mirar
nuestra respuesta inicial. En realidad, no
creo que lo tenga arriba, pero sabemos que Flags tiene una propiedad PNG y
solo vamos a inicializarla para que sea una cadena vacía por ahora Y luego sólo
vamos a ir por la línea y hacer lo mismo. Entonces vamos a ir capital. El capital va a ser una matriz. Y va a
ser una matriz vacía. O una matriz con una cadena
por ahora puede leer mayúscula. En realidad, podría país. Déjame quitar este tipo. Bien, ahí vamos. Hacerlo mejor. Oh, yo porque lo deletreé mal. Capital, Di eso. Y población, recuento
poblacional. Oh, solo necesito agregarlo.
Entonces agregaremos población para que sea cero y haremos region
para que sea una cadena vacía. Bien, increíble. Entonces creo que
nos hemos deshecho de todos nuestros errores
de tipo. Fresco. Así que estamos obteniendo tantos resultados que ni siquiera podemos
mostrarlos todos. Necesitamos tener el flex wrap o algo así para
que no obtengamos
tantos resultados. Bien, para que podamos deshacernos de nuestros datos simulados aquí porque
ya no los necesitamos. Guarde eso. ¿Qué otro
error podemos corregir aquí? El número de tipo de población no es
asignable al flujo de tipo. Oh, ¿es un tipo de cuerda? El tipo es una tira aquí, por lo que
en realidad es el número de span. Fresco. Eso es una gran
cosa del tipo de guión. Quiero decir que encontrará
estos pequeños errores y se asegurará de que no los
hagas como a lo largo de todo tu
proyecto, pero bien, así que déjame seguir adelante y
crear un wrap en esta caja. Impresionante, ahí vamos. Entonces
tenemos todos nuestros países, debería
haber 250 cajas. Lo que voy a hacer ahora es realidad utilizar estos datos en las propias tarjetas. Esperamos que
nuestro componente de tarjeta solo le dé un
poco de margen en la parte inferior solo para que se
vea un poco más agradable Donde dice lagarto,
vamos a cambiar ese nombre. Vamos a echarle un vistazo, en realidad
parece muy pequeño. Vamos a la, el tamaño de
la fuente para que
sea como un carnero. Y vamos a cambiar
el peso de la fuente para que sea unos 700 porque
parece realmente en negrilla. Vamos a decir que
tenemos nuestros nombres. Entonces necesitamos a la población, la región y al
Capitolio. Todo bien. Usando nuestro cuerpo dos. Vamos a ir,
voy a usar la etiqueta, así que son solo las etiquetas de tazón
regulares les
voy a decir en población entonces solo
voy a
copiar y pegar esto. El siguiente fue
creo que era región. Región y la capital simplemente
escribiendo capital que increíble. Entonces finalmente queremos acceder
a la imagen, así que vamos a simplemente
escribir aquí bandera porque esa va
a ser nuestra fuente PNG. Impresionante. Básicamente, con un
par de simples apoyos que hemos pasado desde nuestro
país desde la API Literalmente
los pasamos a nuestro
componente de tarjeta y luego simplemente
accedemos a ellos como lo haríamos pasando
props o en cualquier otro lugar, y los mostramos en nuestra aplicación Nuestra app está 50% hecha, tal vez más. Hemos hecho como nuestro tipo de
prueba
inicial con la API y la lógica allí. Entonces
va bastante bien. Ahora lo siguiente que vamos
a querer hacer es que lo estamos. Bien, entonces tenemos nuestra app
formateada y estilizada, pero lo siguiente que
vamos a querer hacer es agregar
algo de lógica, ¿verdad Porque ahora mismo si
tecleamos algo que tecleamos en Francia,
no pasa absolutamente nada. Entonces queremos agregar en esa lógica, y lo haremos en
la siguiente sección.
9. Añade lógica de búsqueda: Bien, así que lo
siguiente que tenemos hacer ahora es poner en esa lógica para asegurarnos que cuando alguien escribe en
un país, en la barra de búsqueda de aquí
arriba,
realmente devuelva una respuesta. Ahora mismo, no hacemos
absolutamente nada. No hay filtrado
en ninguno de estos resultados. Entonces, sigamos adelante e
implementemos eso ahora. Bien, entonces cómo
vamos a empezar con esto es que esencialmente
queremos filtrar por todos los países
que tenemos como opciones, desde nuestros datos,
desde nuestra llamada API. Estoy seguro, bueno, una forma en que podríamos hacer esto es
como a través de solicitudes API. Pero en
realidad podemos simplemente filtrar esto por el lado del cliente, como en función de los datos que ya
recibimos de vuelta, ya que es una llamada muy, es una
llamada de costo bastante bajo en relación con, sabes, una
aplicación más grande que está recuperando como toneladas y toneladas de
megabytes de Lo que quiero hacer
aquí es que quiero ir
a la búsqueda del país y vamos a hacer esto
dentro de este componente. Lo que quiero hacer
aquí, quiero, quiero crear una variable llamada los países filtrados
y quiero establecerlos. Quiero inicializar
esto para que sean datos. Sean cuales sean los datos, es lo que van a ser los países
filtrados. Esto va a ser
lo que recorremos. Si cambio datos para que sean países
filtrados, vamos a dejar
eso por ahora, ¿de acuerdo? Bien, así que sí, los países
filtrados van a ser lo que
recorremos, pero tenemos que configurarlo, así que tenemos que inicializarlo Cuando escribimos aquí, queremos que algo suceda, queremos que se lleve a cabo algún tipo
de F. Podemos acceder a eso usando el prop
on change en
el campo de texto. Queremos básicamente algo así
como filtrar países. Filtrar países,
Filtrar países. Sé que voy a
querer pasar el evento porque voy a necesitar
apuntar ese valor ahí dentro. Vamos a crear este
filtro países, synovus
filtro constante Y pasando en ese evento
vamos a decir que queremos establecer países
filtrados en B. Queremos filtrar
países y
queremos filtrarlos . Queremos filtrar cada país por nombre de país, país. Y lo haremos en minúsculas para asegurarnos de que en realidad estamos
obteniendo el mismo valor. Vamos a
transformarlos a ambos. Queremos ver si el, el nombre común del
país en minúsculas, si incluye algo en valor
objetivo a minúsculas,
son el mismo caso. No va a haber ningún desajuste
ahí y eso debería funcionar. Estamos recibiendo este error
porque necesitamos darle un tipo de países fríos y
filtrados. Bien, así que en realidad estoy
llamando a la función, bien. Bien, así que ahora lo
tenemos configurando. Entonces está filtrando a través países
filtrados para ver
si ese es el valor. Bien, y entonces lo que
queremos hacer ahora, queremos,
queremos devolver eso,
queremos mostrar esto,
queremos mostrar países filtrados en lugar de datos y decir eso. Y creo, sí, aquí estamos
recibiendo un error. Básicamente solo estamos
obteniendo el valor predeterminado porque tenemos que
esperar estos datos. Lo que queremos hacer en realidad establece países
filtrados aquí. Entonces queremos establecer datos, entonces deberíamos querer
establecer países filtrados. Así que podríamos simplemente ser
capaces de deshacernos de los datos. Derecha. Bien. Y
entonces auto hace eso. Bien, perfecto. Así que
hemos filtrado países. Entonces ahora si escribo en
Francia, increíble. Entonces es la búsqueda de Francia. Así que vamos a repasar
lo que hicimos aquí. Entonces creamos esta función
llamada países de filtro. Establece que los países
filtrados sean lo que sean, entonces los inicializan los datos
y luego queremos filtrar por cada país y
buscar el país, el nombre del país,
el nombre común Estamos transformando ese nombre
común a minúsculas, y estamos comprobando si
ese valor de cadena incluye lo que estamos escribiendo
en nuestra barra de búsqueda aquí. Entonces si escribo, sabes qué, creo que también
necesitamos, vamos a tener que corregir un
par de errores. Pero si me refresco, funciona genial. Entonces notarás que
ya hay un par de
errores que tienes que corregir. Pero el
concepto inicial está funcionando, así que estamos avanzando en
la dirección correcta. Bien, entonces un
error que acabamos notar es que si no
hay nada ahí dentro, no
lo restablece. Entonces veamos si podemos hacer un FL para establecerlo como
el valor correcto. Entonces podríamos decir que si el
valor objetivo es igual a esto, si es igual es solo
una cadena vacía, queremos establecer
países filtrados para que sean saltos de datos, datos más queremos establecer países filtrados
para que sean lo que hemos hecho Bien, escribe
eso y luego, sí. Bien, genial. Entonces si retrocedo
el espacio ahora funciona. Impresionante. Ese es un
error que arreglamos. Lo siguiente que
vamos a querer hacer, así podemos filtrar por país, pero ahora mismo no podemos
filtrar por región. Entonces queremos agregar la capacidad de filtrar por región también. Así que en realidad podemos
empezar a utilizar este tipo de cambio
de mango incorporado que se incluyó con
nuestro elemento de formulario. Podemos simplemente cambiar el valor
para ser región y vamos a, cambiaremos esto para que sea región, así que simplemente aprovecharemos
la región del conjunto inicial. Bien, genial. Sí, básicamente podemos utilizar este evento de cambio de mango
para establecer nuestra región. Ahora, cuando elegimos
una región diferente, solo debería configurarla
automáticamente. El tema aquí es que ahora
vamos a necesitar filtrar por región y
filtrar por país. Entonces tenemos que pensar en cómo
vamos a hacer esto de
una manera lógica. ¿Todo bien? Creo que lo que quiero hacer aquí es como una combinación de cosas. Quiero crear
otro manejador. Entonces voy a
crear handle typing y va a llevar un evento. Voy a crear otra variable, valor de búsqueda constante. Esto va a ser lo que
escriban en esta entrada. Voy a crear una
variable para sostener eso. Voy a ir al estado,
voy a comenzar con un manejador de cadena stempty
escribiendo se va a establecer el valor de búsqueda en el valor
objetivo Y entonces voy a llamar a esto, teclean cuando alguien
escribe en la app. Entonces va a hacer
eso. Impresionante. Y sólo vamos a conseguirlo más allá. Paratipos. Impresionante. Fresco. Ahora tenemos ese valor de búsqueda almacenado para que puedas acceder en
más de un lugar, este filtro de países podría
terminar por desaparecer transformándose. Lo siguiente que quiero hacer es dentro como un uso
efector use memo. Quiero verificar
tanto la región, quiero verificar la región y tal vez verificar
el filtro también. Entonces déjame comenzar con un memo de uso. Y lo que voy a
hacer es que voy a crear una matriz vacía
llamada países. Y entonces voy a hacer una comprobación si región
no es igual a cadena, ¿verdad? Entonces sabemos que la región está
comenzando como una válvula de cadena vacía. Si no es una cuerda,
queremos hacer algo, ¿verdad? Si región no es igual a cadena, queremos establecer
países para que sean datos. ¿O es filtrar datos? Datos. Filtra por país entonces. Si ese país, región igual igual a
región, fresco. Sí, queremos verificar,
queremos básicamente establecer esta matriz de países para
que sean los datos que tengamos. Sí, los países van a ser. Tomando los datos, todos los
datos que obtenemos de la APA, los
vamos a filtrar
por país. Si ese país tiene una región que coincide con
la región a la que lo establecemos, va a entrar en la variable de
ese país. Fresco. Entonces queremos
establecer los datos filtrados, pero también queremos considerar qué configuramos los datos filtrados, como cómo entra en esto el texto, el bit de mecanografía. Déjame pensar en
esto por un segundo. Bien, así que
básicamente queremos
pasar como una lógica similar. Entonces, si region hace eso, entonces queremos verificar
el valor de búsqueda. El valor de búsqueda no
equivale a cadena vacía, entonces queremos hacer esta comprobación, queremos establecer los países filtrados para que
sean básicamente esto, ¿verdad? Queremos hacer esto, pero aquí abajo, así que vamos a tomar
países, salvo eso. Entonces, en lugar del valor de punto
objetivo, va a ser valor de búsqueda.
Voy a salvar eso. No estoy seguro de trabajar porque básicamente solo
tomamos qué es el
valor de punto objetivo y lo guardamos como valor de búsqueda. Bien, genial. Entonces tenemos dos, si probablemente
necesitamos que establezca el valor de búsqueda de
algún otro, region no es nulo, ¿verdad? Queremos que los países
filtren por eso. Si el valor de búsqueda no es nulo, queremos luego filtrar
por los países. Pero si el valor de búsqueda es nulo, entonces solo queremos establecer países
filtrados
para que sean países, cierto, sin filtrado extra. La región hace igual. Nada como si no
hay región, entonces queremos hacer una comprobación
similar aquí, ¿verdad? Básicamente queremos volver a
hacer esto pero luego configurarlo a data. Creo, sí, configurarlo a datos, pero en cambio queremos hacer el conjunto de
países filtrados y lo
vamos a hacer en datos, creo que es el país
filtrado de datos. Lo haremos en archivado. Si el valor de búsqueda no es nulo, vamos a tomar
los países filtrados y luego filtrarlos de lo contrario
vamos a simplemente establecer los
países filtrados para que sean datos, la región, si
no hay región establecida, pero si el
valor de búsqueda no es nada, todavía
queremos filtrar
por el país de búsqueda. Eso es algo que
podríamos perder función de
ese país filtrante porque en
realidad no es tan útil. Pero si la región es, el valor de búsqueda
también es una cadena vacía, queremos establecer los
países de filtro a datos. Esto debería funcionar. Sólo
tenemos que sumar nuestra dependencia. Por lo que debería ser región de datos y región de datos
y valor de búsqueda. Guarde eso. Creo que
eso debería funcionar. Creo que eso debería
funcionar. Vamos a intentarlo. Vamos a Francia. Pero vamos y después intentemos filtrar
por alcance alcance. Europa, ¿bien? Estados Unidos está bien. África. Sí. Todo bien. Así que funciona increíble. Fresco. Genial, genial, increíble. Todo bien. Fresco. Así
que eso funciona muy bien. Entonces, lo siguiente, sí. Entonces lo siguiente que
vamos a querer hacer, creo que lo que
voy a querer hacer ahora es que quiero configurarlo. Yo quería que todos trabajaran. Yo básicamente quiero
que puedas
resetear la región porque
ahora mismo sin el todo solo
puedes configurarla. No puedes desconfigurarlo, ¿verdad? No puedes restablecerlo
si está configurado en todos, para que también devuelva
toda la región. Si hago region igual
region es igual igual a igual, todo funciona, no, no funciona. Lo que voy a hacer aquí
en realidad es simplemente cambiar el valor de todos para que sea una cadena vacía para que
cuando vaya a África, América, Asia, y
luego vuelva a todos, simplemente regrese
de una cadena vacía. Realmente simple, limpio, arreglado, genial. Veamos qué más hay ahí. ¿Hay
algo más que pueda hacer aquí? Creo que
lo único que queda por hacer aquí es probablemente
limpiarlo un poco. Dice que quiere
países filtrados como dependencia, pero no sé si
va a funcionar si hago eso. Déjeme decir eso y luego tratar. Oh, espera, lo siento. Yo no lo soy. Sí, no, se rompe
si hago eso. Sí, así que no
quiero hacer eso. Sólo voy a
dejar eso fuera. Sólo voy a desactivar las dependencias exhaustivas
para esta línea Fresco. Yo creo, ¿en realidad
usamos países filtrantes? Al igual que si comento esto
y lo elimino de aquí, ejecutarán las aplicaciones? Oh, eso es un bicho. No lo hace. Bien, así que no creo que en realidad, no
creo que realmente
necesitemos filtrar país. Entonces me voy a deshacer de ella y voy a deshacerme
de la columna a ella aquí. Simplemente va a ser
reemplazado por la escritura de manejadores, que esencialmente toma ese valor objetivo
y solo le da una variable que
soluciona ese problema. Uh, ¿qué más? ¿
Qué más podemos hacer aquí? Oh, podemos sacar
esta ley de consola. Ya no necesitamos eso. Entonces, por datos, sí, esa
podría ser la solución. Bien, esa fue la solución. Entonces estaba recibiendo este
error donde si escribí un par de letras
y me dirigía a una región, si volvía a todos, no
lo estaba ordenando Entonces eso es porque yo
erróneamente, cometí un error. Debería haber dicho datos en la línea 60 o debería haber dicho países
filtrados, que era lo que
estamos filtrando por línea 60 para que
en realidad sean datos. Entonces solo vamos a usar datos,
no vamos a usar países
filtrados. Vamos a usar
países filtrados simplemente no
en ese momento. Impresionante. Creo que aquí tenemos
todo lo que necesitamos. Creo que estamos
bastante arreglados para ir bien. Supongo que otras cosas
que podrías hacer con este proyecto es
hacerlo mobiley responsive Entonces para que sea,
ya sabes, se convierta en una especie de vista desplegable similar que
tienen aquí como opción Ya sabes, cualquier filtro
por región y es solo un país tras otro y hacer una versión móvil. Ese sería otro proyecto
genial para hacer. Podrías retocar el modo
oscuro, ya sabes, conseguir un mejor icono que esté un poco más
acorde con el diseño. Un montón de cosas que aún podrías hacer si quisieras
en este proyecto. Totalmente depende de
ti si quieres
seguir adelante con eso. Y luego también puedes agregar una especie de página individual aquí para los
países individuales que realmente solo muestra su
información allí. Así que aún queda mucho por hacer
con este proyecto, pero sí, ojalá eso te haya sido
útil y
realmente hayas podido aprender a usar una API con la
búsqueda de países y puedas trabajar con APIs
en el futuro e incorporarlas a
tus proyectos futuros.
10. CONCLUSIÓN: Hablamos mucho en este
video desde los orígenes de reaccionar hasta construir tu propia aplicación web de búsqueda de
países completamente funcional. futuro,
deberías poder
abordar cualquier proyecto de API
que se te presente. Solo recuerda buscar
algo cuando no estés seguro y peinar el
desbordamiento de pila según sea necesario Me encantaría ver cómo decidiste implementar tu aplicación web. Así que por favor deja un enlace a tu código o al
sitio alojado en la pestaña Proyectos y Recursos para que pueda ver todo el
trabajo duro que has hecho. Leo cada comentario, cada reseña y miro
cada envío de proyectos. Entonces, si tiene alguna pregunta, no
dude en
dejar un comentario en la sección de revisión
a continuación o comunicarse conmigo directamente. Consulta mi página de perfil para obtener más información al respecto. Si quieres saber
más sobre codificación, consulta los otros videos
que tengo en mi página de perfil. También tengo videos en HTML y CSS disponibles en el sitio web de mi canal de
Youtube. Los vincularé a continuación y en mi perfil si
también te
interesa aprender esos idiomas . Y voy a ver
en la siguiente.
Zoë Davidson, Software Engineer & Cinematographer
