Transcrições
1. Introdução: Você já deve ter ouvido falar de APIs, mas sabe como usá-las? Hoje, veremos tudo o que
você precisa saber para criar seu próprio
aplicativo web usando APIs gratuitas. Oi, meu nome é Zoe. Sou engenheiro de software
e ex-professor que adora educar outras pessoas sobre como começar
a programar Eu criei muitos
sites e aplicativos
da web usando React CSS, HTML. Next S e muito mais. Hoje, utilizaremos a API
gratuita
do Rest Country para criar esse aplicativo web de pesquisa de
países Este projeto nos
permitirá aprender como usar o next S e reagir, como interagir
e incorporar APIs em nossos projetos. E como usar Javascript
ou Typescript para
filtrar e retornar sucintamente os dados solicitados com base na consulta de um usuário Começaremos com uma visão geral
básica do que são as APIs e
por que estamos usando a seguir. Sim. E então vamos mergulhar
direto em nosso tutorial. O tutorial será
dividido em três partes distintas. Primeiro, vamos estilizar o aplicativo web depois
conectá-lo à API. E, por fim,
refinaremos a lógica da consulta para garantir que os usuários recebam exatamente o que estão procurando Este curso é para
qualquer pessoa interessada em aprender a trabalhar
com uma API em um aplicativo web. Ao final deste curso, você poderá fazer tudo
isso sozinho. Vamos começar.
2. PROJETO DO CURSO : Projeto de classe. O projeto
dessa classe é criar um aplicativo web de busca de
países totalmente funcional usando uma API gratuita. Para isso, você precisará
acessar um computador
e um editor de código como o
Visual Studio Code. Você também deve ter algum
conhecimento de Javascript ou script
de tipo, bem
como HTML e CSS. Para acelerar nosso aplicativo,
usaremos uma estrutura chamada Next
S, que usa o React. Também usaremos o material I para alguns componentes básicos de
estilo Deixarei links para todos
os ativos e recursos que você precisará na guia Projeto e
Recursos logo abaixo.
3. APIs e bancos de dados: Apis e bancos de dados. Uma API ou interface de
programação de aplicativos é um conjunto de regras que permite aos desenvolvedores de
front-end criar, ler, atualizar e excluir
dados no back-end Essas APIs são criadas por desenvolvedores de
back-end usando
linguagens como Python,
Ruby, Java Os bancos de dados, por outro lado, são onde os dados residem e são acessados por meio dessas APIs. Dependendo do
tipo de solicitação
de API enviada pelo front-end, seja para criar, ler, atualizar ou excluir, um conjunto diferente
de dados será retornado. Por exemplo, se um novo
usuário configurar uma conta digitando seu endereço de
e-mail e senha Depois de clicarem em Enviar,
essas informações serão enviadas ao banco de dados e um novo
usuário será criado.
4. Next.js: Next S. Nos anos que
passaram desde que o Reacts introduzido
pela primeira vez, muitos frameworks foram construídos e
desenvolvidos a partir dele Uma
estrutura muito popular hoje em dia é o Next S. O Next S fornece muitas otimizações prontas uso, como renderização
do lado do
serviço,
roteamento e E, como tal, é o favorito dos desenvolvedores
de front-end. Vamos usá-lo
em nosso projeto, então vamos nos aprofundar
e começar.
5. Configuração de projeto: Vamos começar a trabalhar
nesse projeto. O aplicativo que estamos procurando criar é mais ou menos assim. É um aplicativo de
busca de países que, ao digitar o
nome de um país, você pode realmente obter
o resultado. Você também deve poder filtrar por região. Então,
em algum lugar que seja na África ou nas Américas ou na Europa,
etc., etc. Além disso, devo dizer que você também
pode alterná-lo
para os modos escuros. Você pode ativar o
modo escuro ou o modo claro. Então, sim, vamos
criar esse aplicativo usando
a API Country's Rest gratuita que é fornecida aqui. Então, como você pode ver, temos uma API
Country Rest que
nos permite acessar esse endpoint e receber vários
detalhes diferentes Assim, podemos obter o
nome, as bandeiras. Há muitas informações
diferentes. Então, deixarei um link
para este site na guia Projetos e
Recursos abaixo, para que você possa acompanhar e usá-lo em seu projeto. E também a inspiração
para este projeto e o design dele, na verdade,
vêm de um site chamado
Front End Mentor É aí que eu
realmente coloco muitos dos
meus projetos para trabalhar e
construir projetos,
se você quiser dar uma meus projetos para trabalhar e
construir projetos, olhada
, no front-end, ou é um projeto totalmente
gratuito para usar, mas você pode pegar
o design aqui e vamos trabalhar essa imagem aqui para
criar nosso projeto. Sim, vamos
começar. Vou
começar, como mencionei, usaremos a próxima
interface de usuário de material JS e o script de tipo. Na verdade, criei
um modelo que
vamos usar para realmente
trabalhar em nosso projeto. Aqui, vou seguir em frente e
começar a usar esse modelo em um repositório Incrível. Agora, o
repositório foi criado Na verdade, podemos
usá-lo localmente para desenvolver
nosso aplicativo de busca de países. E também deixarei um link
para o modelo e
o repositório que eu
uso para isso, que você pode usar para começar
como ponto de partida E você também pode verificar seu
trabalho à medida que avança, se quiser ver como ficou o
projeto final . Tudo bem, então eu vou
continuar e clonar isso. Incrível. E então eu vou seguir em frente
e abri-lo. Perfeito. Então, a próxima
coisa que precisamos fazer, como sempre que clonamos um projeto,
é instalá-lo Então, vamos fazer uma instalação rápida do NPM. Tudo bem, legal. Então
, ele está instalado agora. Devemos apenas ser capazes de
fazer MPM run dev. Incrível. E tudo começa no
host local 3.000 e ótimo, temos nosso aplicativo
instalado e funcionando, então estamos prontos para Vamos continuar e começar.
6. Estilizando o aplicativo: Nesta seção,
vamos nos concentrar principalmente no estilo. Então, se você estiver mais
interessado na lógica, pode pular
para a próxima lição Tudo bem, a primeira
coisa que eu quero fazer, como costume, é criar uma nova
pasta para meus componentes. Então eu quero ir em frente e
limpar a próxima página do GS. Então, vou
limpar tudo na seção
principal
aqui, exceto isso. Também vou
remover os estilos
do di aqui, nesta pesquisa de
país. Isso deve ser bom por enquanto quando estamos analisando
este projeto de exemplo. Certo? Temos algumas
seções diferentes com
as quais estamos trabalhando, certo? Há uma seção de
cabeçalho, seção de entrada, um filtro de região aqui, uma seleção, eu vejo isso como
algumas seções distintas. Há o cabeçalho e
depois essa peça maior, a própria peça country. Depois, há a exibição de
todas essas cartas diferentes. Vamos dividi-lo em pedaços. O que vamos
fazer aqui, primeiro, vou criar um
contêiner para a coisa toda. Vou chamá-lo de contêiner de busca de
países. Isso só vai abrigar tudo em que
estamos trabalhando. Legal. E usaremos o Emmett
e depois
importaremos isso aqui.
Tudo bem? Perfeito. Se verificarmos isso na frente, veremos
que temos nosso contêiner de
busca de países lá. Perfeito. Isso vai conter algumas coisas
diferentes. Vamos criar outro
componente chamado cabeçalho. Vamos criar outro
componente chamado, hum, vamos chamá-lo de Country Search. Ok, e vamos importar os dois para o contêiner
Country Search. Vou trocar isso uma caixa porque é como
o material que você usa
para fazer isso. E isso nos
permitiria usar adereços
diferentes usando X, X, se você nunca
ouviu falar disso antes O adereço SX basicamente
permite que você acesse
os mesmos adereços que
você pode adicionar como um adereço de estilo em
um Mas isso permite que você faça coisas
especiais, como consultas de
mídia e coisas assim que você não pode
fazer no suporte de estilo Eu prefiro usar os elementos
dos componentes muy sempre que possível, quando
eles estão disponíveis para todos nós Veja, temos nosso
chefe de busca de país. Tudo bem, então
olhando o design aqui, você notará que
temos um pouco de margem ou preenchimento em cada lado, e então é igual em
ambos os componentes, e então temos a peça
maior aqui Tudo bem, eu quero abordar
isso em várias etapas. A primeira coisa que quero
fazer, como mencionei, é estilizar o
projeto em si. Então, vamos trabalhar no
estilo e, a partir daí, basicamente queremos de
uma forma que ambos estilizá-los de
uma forma que ambos possam ter algum preenchimento
à esquerda e à direita Vamos entrar primeiro
no cabeçalho. A cabeça também se transforma em uma caixa. O cabeçalho tem dois elementos
principais. Tem a guerra no mundo e também tem o botão do modo
escuro. Então, vamos começar
usando um elemento tipográfico, digamos, que vamos usar, vamos dizer que no
texto que estamos no mundo, isso será
da variante H, porque cada página
precisa ter um H. E então provavelmente não
será o formato certo, mas podemos lidar com
isso com x, certo? Sim, é um pouco grande demais. Então, vamos usar o SX e
, em seguida, vamos configurá-lo para ter talvez o tamanho da fonte: um Ram, talvez dois Ram 1.5 Então, vamos fazer com que a fonte
espere cerca de 700 Tudo bem, legal.
Esse é o elemento um. E então o segundo
é esse botão. E o botão diz modo
escuro como a. Sim, também
há um botão de
botão. Desculpe. Há também um ícone
que parece um tipo de
meia-lua, lua crescente Vamos procurar por luas. E este parece bem próximo, então vamos realmente
usar isso em nosso botão, então eu vou usar. Legal. E temos nossa pequena lua
bem ali. Tudo bem. Incrível. A próxima coisa que
vamos querer fazer aqui é
colocar isso em uma linha. Então, vou usar os adereços
SS e vou simplesmente mudar a tela
para
flexionar e salvá-la Vou justificar o espaço de
conteúdo entre eles, vou alinhar
os itens ao centro Incrível. Sim. Tudo bem, então, para o cabeçalho, agora eu também sei que
quero alguns preenchimentos Vou fazer com que o preenchimento
da parte superior e inferior seja um M e a esquerda e
a direita sejam dois ram Isso deve ser bom por enquanto.
O que mais precisamos fazer? Queremos ter certeza de que,
sim, a cor, na verdade, se você notar, é
um pouco diferente. Na verdade, quero
definir a cor geral do plano de
fundo do
aplicativo para ser assim, cinza claro, e então esse será nosso branco. Vou pegar isso,
vou usar esse seletor de cores Vou pegar essa
cor aqui e, incrível, essa será a cor do plano de fundo real
de todo o aplicativo. O que eu quero fazer aqui, acho que vamos usar o índice. Na verdade, vamos definir aqui
a cor de fundo
desse geral para ser essa cor. Então, vamos usar a cor
de fundo, configurá-la para ser incrível. E você pode ver que isso mudou
um pouco aqui. É um pouco difícil de
ver só porque é apenas uma pequena seção, mas ficará um pouco mais aparente à medida que começarmos a trabalhar
um pouco mais na maçã. A outra coisa
que eu quero fazer aqui é definir o tamanho desse elemento, porque é uma coisa do tipo uma
página. Eu quero que a altura mínima do elemento
seja de 100 w de altura. Isso será 100% da altura da visão
que estamos ocupando. E então eu quero que apenas a altura
normal ou
a altura máxima provavelmente seja adequada
ao conteúdo. E isso será mais
relevante quando começarmos a obter
vários resultados diferentes. Tudo bem, vou remover
esses estilos extras aqui. Tudo bem, legal. Então, a próxima coisa que
vamos querer fazer agora é realmente mudar a cor
de fundo do cabeçalho. Então, o cabeçalho, agora
vamos voltar aqui e definir a cor de fundo
para ser apenas branca, fria e que você mal consegue ver, mas há uma pequena
diferença aqui. Vou fazer mais uma coisa
para diferenciá-lo. Você vê como há essa
pequena caixa de sombra aqui. Vamos apenas
adicionar uma sombra
de caixa na parte inferior
desta peça, aqui. Então, vou copiar isso
e depois adicioná-lo à nossa cabeça. E vamos
modificá-lo um pouco. Tudo bem, então
vamos fazer com que seja deslocado, talvez dois pixels
em cada direção Vamos
torná-lo cinza claro. Guarde isso. Como você pode ver, temos apenas um tipo muito básico de diferenciação entre os dois. Isso é bom o suficiente por enquanto. Sabe, acho que
também podemos fazer coisas como mudar a cor do botão
e coisas assim. Não necessariamente como a coisa
mais importante a fazer. Acho que a próxima coisa
mais importante a fazer seria
reduzir as vendas do resto. Tudo bem, então a próxima coisa que
vamos fazer aqui é trabalhar em nosso contêiner de
busca de países. Então, nossa busca por país, desculpe. Então, na busca por país
, haverá
um monte de elementos
diferentes, bem, três. Então, vamos
mudar para uma caixa. Primeiro, teremos uma entrada, teremos a seleção. E então vamos
mostrar todas
as cartas, acredito que sejam materiais. Ele tem um componente de campo de
texto de entrada de texto. E acho que vamos querer usar o
esboço para isso Então, vou
pegar essa linha de código aqui e copiá-la de volta em nosso projeto e adicioná-la
como nosso primeiro elemento. Então, vamos
ter um campo de texto que importamos do material I. E então eles também têm um componente
Select Select. E
vamos pegar
tudo isso aqui e usar isso. Perfeito. E só precisamos adicionar todas essas importações ausentes
para que não ocorram erros. Estou apenas usando isso
como modelo agora. Vamos prosseguir
e alterá-lo de acordo com nossos propósitos. Tudo bem, legal. Portanto, temos nossa entrada de texto e
temos nosso H ou nossa seleção
suspensa Vou fazer
mais uma coisa e
vou embrulhá-las em uma caixa porque na verdade, nossos cartões também
serão exibidos nesta página. Então, vamos guardar isso.
E então eu vou mudar a exibição
disso para Flex Guarde isso. Incrível.
Legal. Então, agora eles estão em uma linha, mas o
espaçamento não está certo Realmente correto. No momento, o controle do formulário está dizendo largura
total.
Na verdade, não queremos isso. Queremos que seja com
talvez cinco
vezes, dez RAM, porque serão palavras, mas na verdade não precisamos
que seja tão largo E então vamos
realmente querer que eles tenham espaço entre eles também
tenham espaço entre eles. Então, vamos
fazer a mesma coisa. Pronto para ir? Justifique o conteúdo. Vamos configurá-lo para um
espaço entre seis vezes. Legal. Incrível. Como você notará, ainda falta aquele
acolchoamento do lado de fora Então, vamos
adicionar outro S x pro à caixa externa e
adicionar um pouco de preenchimento lá Então, vamos usar o
padding e
vamos usar dois Ram ao redor e dizer isso, incrível, legal Está um pouco mais alinhado. Agora, a última coisa que quero
fazer com a entrada de texto é torná-la um
pouco mais longa, porque você pode ver que na verdade é um
pouco mais longa. E eu vou fazer isso, vamos definir a
largura para ser, o que, 20 Ram? Na verdade, digamos
que
é uma largura de visualização de 20% , cujo peso muda com o tamanho real da largura da visualização da
tela, em oposição a M. Isso sempre
será cerca de 30% da
largura da visualização. É um pouco
mais responsivo. Eu farei a mesma coisa
com o select here. Talvez seja necessário mudar
isso para 2015. Ou 20. Talvez 15. Sim, parece
certo. Tudo bem, legal. E então este pode realmente
ser um pouco mais longo, talvez 40. Legal. Isso deve ser bom. Então,
outra coisa que notei, acabei de notar, é que a cor de
fundo também é branca na natação,
eu a defini como branca. Diga isso. Tudo bem,
incrível, legal Então, temos uma entrada de texto realmente
básica, temos nosso select. E então vamos
fazer nosso cartão suspenso apenas para personalizar isso
um pouco mais Enquanto estamos aqui, notaremos que o texto inicial é pesquisar por ponto do país. Então,
queremos mudar isso. Em vez de ser leigo, vamos dizer que procure um país e diga que
aqui diz idade. Nós realmente queremos que isso
seja filtrado por região. Vamos mudar
isso para filtrar por região. Nós
vamos dizer isso. Vamos fazer um pouco mais, vamos tornar esses 20 perfeitos. Hum, e acho que
o fundo disso também
deveria ser branco Diga isso. Incrível. O próximo que
queremos fazer agora é alterar as diferentes opções reais
aqui, os itens do menu. O que eu vou fazer é, na verdade
,
encerrar isso e
começar com um. É a África, a América. Vamos
digitá-los. Então, vamos fazer a África.
África, África. E então eu
vou copiar e colar isso algumas vezes na América. Na verdade, vou
fazer um acima disso e isso será tudo
para nós. Vou adicionar outro. Você verá por que estou
adicionando isso mais tarde, mas vou
criar apenas um. Isso é tudo. Tudo bem, América. Uma coisa interessante
sobre essa API é
que, na verdade, ela não é a América. Está procurando, são as Américas,
como a América do Norte, a
América do Sul, as Américas Você deseja
alterar o valor
desse item de menu para Américas, mesmo que a
tela mostre América Na verdade, podemos
mudar para as Américas apenas para sermos semanticamente corretos Tudo bem, analisando a lista, vamos mudar
essa para a Ásia e mudar aquela para você. E o que estou fazendo aqui,
caso você não tenha,
você não esteja familiarizado com
esse tipo de truque de teclado, estou pressionando o comando
D para
selecionar a palavra em que
estou trabalhando. E então a próxima
versão dessa palavra, a próxima duplicata dessa palavra Então, eu só quero pressionar o
comando D até selecionar todo o número de versões dessa palavra
que estão na minha frente. Então, vamos fazer a Europa e depois
vamos fazer a Oceana Tudo bem. Incrível. Então, temos nosso filtro por região. Legal. A próxima coisa que
vamos querer fazer é criar
nossos cartões para nosso país. Então, esses
serão cartões que terão algumas propriedades,
alguns aspectos diferentes. Vamos ver a imagem, vamos obter o nome, a população, a
região e a capital Ok, legal. Então,
vou criar outro componente para
esse cartão de chamada. Digamos que agora, eu só quero ver como
fica com alguns dados simulados Então, vou voltar à minha pesquisa por país e
vou criar
algo chamado, ou apenas uma matriz de
sequências de caracteres para dados simulados Então, não vamos fazer dados. Na verdade, vamos fazer
uma matriz de objetos. Vamos fazer uma variedade de
países. Então, vamos fazer a Alemanha. Vamos fazer o United. Estados da América, e faremos o Brasil exatamente
como no exemplo. Tudo bem, legal.
Vamos guardar isso então. Agora, o que eu quero
fazer, como você pode ver, temos nossa caixa com
nosso controle de formulário, nossa entrada e nosso componente de
seleção. Queremos sair
dessa caixa e depois só
queremos percorrê-la. Vamos fazer aqui,
vamos simular dados. Então eu quero mapear esses dados
simulados para cada país. Quero devolver um de cartão material
de cartão
de cartão. Guarde isso. Ah, sim. Toda vez que você
usa o mapa, você precisa de uma chave. Então, vou definir
a chave para ser o nome
do país por enquanto.
Vamos guardar isso. Tudo bem, legal. Então,
se eu for até nosso cartão, devemos apenas, sim, temos três países
em nossos dados simulados É basicamente o ciclo do número de vezes
que temos o país. Então, temos três cartas.
Incrível. Vamos continuar e enfeitar um pouco
este cartão Na verdade, tem um componente
chamado de cartões diferentes, mas queremos usar um
que tenha uma imagem. Talvez o cartão de memória. Acho que essa pode ser
a melhor para nós. Então, vou seguir em frente e copiar essas informações
aqui. E vamos
criar o cartão, salvá-lo e adicionar todas
essas importações ausentes. Ah, sim, eu o chamei de cartão. Tudo bem, então vamos importar porque eu chamo o
componente real de cartão. Há um conflito porque estamos importando cartões para o material Y. Eu criei
algo chamado Então, vou nomear o cartão do cartão
deles apenas para que seja diferente e não
haja esse conflito. Tudo bem, vou remover
algumas dessas peças. Assim como as ações com cartas, não
precisamos disso. Estamos literalmente apenas procurando
exibir informações. E então, sim, isso
deve ser bem decente. A altura da imagem
e a largura máxima. Quero que a largura máxima
seja talvez 20 de largura de visualização, talvez definamos essa como a largura definitiva, porque
devemos ser capazes de
caber quatro em 20 de largura E então eu vou
realmente voltar aqui e deveria embrulhá-lo em uma caixa. Sim, deixe-me embrulhá-lo em uma caixa. E então eu vou transformar
isso em uma caixa flexível. Eu vou dizer
isso, incrível, legal. Então, agora eles estão começando
a se espalhar. Vamos adicionar mais um país. Vamos fazer a Jamaica. Só para colocar os quatro do outro lado, posso ter uma ideia
de como é. E então eu quero
justificar o conteúdo. Eu quero espaçar uniformemente, eu acredito. Não há espaço ao redor. Espaço. Espaço entre. Eu quero espaço entre eles novamente. Tudo bem, legal e incrível. Então, sim, temos nossas
quatro cartas ali. Todos dizem lagarto
agora porque é isso que dizem os dados simulados.
Mas vamos trabalhar nisso. Tudo bem, eu só quero
retocar esse
pedacinho aqui. Não há espaço suficiente entre o cartão e a entrada real, então vou adicionar alguma
margem à caixa superior, então vou usar a
margem inferior. Perfeito. E depois vou retocar um pouco
o cartão. Então, vou definir a altura
do cartão real como sendo,
digamos, dez
alturas de visualização muito pequenas. Talvez 15, talvez dez esteja bem. E então vamos
acabar passando algumas
propriedades da própria API
assim que as obtivermos. Então, acho que somos bastante decentes
no estilo geral. Mas há mais uma coisa que
eu quero fazer, apenas para nos permitir fazer
e trabalhar com o modo escuro.
7. Dark Mode e Zustand: A última coisa que vamos
querer fazer para
estilizar é trabalhar em nosso
modo escuro. Materialmente, eu tenho esse recurso realmente
incrível, que fornece um
tema padrão que está no modo claro Então, o que vou
fazer é realmente tentar direcionar esse tema do modo
claro e alternar
entre o modo claro e modo
escuro, dependendo do
modo em que queremos estar Então, vamos esclarecer,
vamos aproveitar
isso para que nosso aplicativo
aqui acesse isso. Ele mora em alguns
lugares diferentes. Se examinarmos nosso aplicativo de pontuação de aplicativos, você verá que
há algo aqui que está
fornecendo o tema, um provedor de temas,
e está fornecendo algo chamado
tema leve. Então, o tema claro, o tema
claro foi criado usando a função de criação de
tema aqui. E vamos
apenas verificar se nos
estilos
na pasta do tema, em um arquivo chamado opções de tema
leve. Então, se dermos uma olhada
aqui, podemos ver isso como
um arquivo bem básico e deve ser muito fácil criar uma
versão em modo escuro disso. Então, o que vou
fazer é copiar tudo isso e criar um
novo arquivo, chamá-lo opções de tema
escuro
e colar. Mas em vez de
onde quer que esteja escrito claro, vou
mudar para escuro. E tenho certeza que
isso vai funcionar. Só vai
nos deixar alternar entre escuridão e a luz. Incrível. Então, temos isso acontecendo. A próxima coisa que vou
querer fazer agora é basicamente
inserir
isso no ponto certo. Então, se eu for para o aplicativo, basicamente o que eu quero
fazer aqui e não vai estar aqui
apenas
nesta parte do aplicativo,
vai acabar. Então, o que eu estou pensando é que eu quero instalar o Zustand
para gerenciar essa
parte simples do estado global Poderíamos apoiar
Joe o tempo todo, mas acho que isso vai
ser um pouco mais limpo Então, se você não está
familiarizado com o Zustan, Zustand é como uma alternativa ao
Redux , mas muito mais simples Tem muito menos tipos de
clichês para começar. Então, procuramos Zustand, é basicamente apenas uma
forma de gerenciar o estado Sim, este é o documento, vou instalá-lo muito
rapidamente. Então eu vou
criar uma loja. Vou criar uma
nova pasta chamada store. Vou criar um arquivo
lá chamado index TS. O que eu quero fazer
é literalmente criar uma loja da Zand. Vou copiar a formatação
deles aqui. Ah, e está
reclamando do tipo. Vamos consertar isso. Sim, eu quero basicamente criar
esse gancho chamado loja, que criará uma loja na possamos simplesmente viver em
nosso estado global. Então, eu realmente
preciso de dois adereços no modo
escuro e,
para começar, será falso E então eu quero
alternar o modo escuro. O que isso vai fazer
é remover isso. É o modo escuro, ele pegará essa
parte do estado e depois a configurará para
o oposto do que é. Digamos que lá atrás, será o estado
oposto ao modo escuro. Quando eu clico em Alternar modo escuro, seja qual for o modo escuro, será o
oposto
disso Uma última coisa que
vamos fazer aqui é adicionar os tipos que
vamos criar. Esta é a loja no modo escuro, vai ser uma barra de ouro Em seguida, vamos
ativar o modo escuro. Essa será apenas uma função
simples
que retorna void Então vamos definir
loja, loja, estado. Vamos
chamá-la apenas de loja. Diga isso e tudo bem, agora
corrigimos nosso erro de tipo. Agora podemos acessar essa loja de qualquer lugar
em nosso projeto. Então, se eu voltar aos aplicativos
X, agora posso me conectar a eles e basicamente acessar o valor
de é Stark Boat Então, como vamos
fazer isso é
copiar essa funcionalidade aqui. Vamos abordar
nosso componente aqui, torná-lo um pouco maior. E eu vou ficar
constante no modo escuro, você vai para a loja. Vamos importar
isso. Oh, você sabe o que, eu esqueci de exportá-lo Certifique-se de exportar a loja caso contrário, você
importará a loja errada. Então, vamos exportar a loja
e importá-la da loja. E eles vão
declarar o modo escuro. Isso é tudo que você precisa
fazer para configurar o estado. É super direto,
super simples. Se você ainda não viu meu outro
vídeo sobre como declarar, fazemos exatamente a mesma coisa. Isso está no projeto para fazer. É muito, muito
simples, muito simples de usar Mas então eu
recomendo fortemente usá-lo porque,
quero dizer, veja a rapidez com
que acabamos de configurar o estado. Portanto, com base no fato de estar ou
não no modo escuro, quero mostrar o
tema claro ou o tema escuro. Então, vou fazer
uma verificação rápida aqui. Então, se estiver no modo escuro, eu
quero usar o tema escuro. E deixe-me importá-lo
e criar o tema escuro. E importe-o,
vamos usar o tema escuro. E se não for, então
vamos querer fazer tema
leve e
dizer isso, incrível. Tudo bem, então a
próxima coisa que
vamos fazer é realmente ligá-lo. Porque agora
não está fazendo nada. Certo? Nada está
acionando essa Então, se eu voltar para o cabeçalho, quero ir para o botão aqui. E queremos fazer
a mesma coisa. Queremos, queremos
acessar o botão de alternância, que era esse
formato aqui E vamos
fazer o Toggle Dark Mode. E vai
fazer a mesma coisa. Vamos importar a loja
da loja e
ativar
o modo escuro Nós vamos salvar isso. Incrível. É reconhecer
que isso é uma função E então, ao clicar aqui, queremos literalmente
ligar para o modo escuro Se conectarmos isso corretamente, quando eu aperto o botão do modo escuro, algumas coisas devem
ficar escuras e outras devem permanecer. Se
clicarmos nele, incrível. Portanto, não é perfeito porque
nós mesmos fizemos muitas
personalizações, como acontece
com os planos de fundo Mas esse é um primeiro passo muito
bom, então sabemos que está funcionando. Agora tudo o que precisamos fazer é
conectar as outras peças. Então você verá que esse
plano de fundo não muda. Esse plano de fundo não muda, esse plano de fundo não muda e esse plano de fundo
não muda. Portanto, temos alguns
antecedentes para resolver. Então, se você voltar, ou
na verdade, podemos começar aqui, então se pegarmos o modo escuro
da mesma loja, esse é o modo
escuro e salvá-lo. Então, se eu fizer outra
verificação nesta linha aqui. Então, se eu entrar no modo escuro e,
se estiver, eu quero que seja. Vamos voltar ao nosso design. Eu quero que seja dessa cor.
Então, deixe-me pegá-lo bem rápido. Isso é para o cabeçalho. Na verdade, essa cor
é a que eu quero. Eu vou pegar isso.
Se estiver no modo escuro, quero que a
cor de fundo seja essa. Se não for, eu quero
que seja isso. E guarde isso se a ativarmos. Incrível. Funcionando muito bem. Legal. A próxima coisa que quero fazer é mudar isso
para o país. Pesquise em todo o aplicativo. Então, isso vai estar
aqui em nosso índice. Nós vamos fazer
a mesma coisa aqui. Na verdade, podemos
literalmente copiar o modo escuro aqui. Cole isso aí. E depois importe a loja, salve isso. Em seguida, vamos
mudá-lo para essa cor aqui. Pegue isso aí, aquilo. E então vamos entrar no modo
escuro e fazer a pergunta. E nós vamos fazer
isso. Será que, se não for, será
que vamos guardar isso então. Incrível. Então, se fizemos isso direito,
ótimo. Isso muda. Tudo bem, a última
coisa que precisamos
mudar são esses Toggle, acho que são iguais
a essa cor aqui em cima Isso estará em
nossa busca por país. Assim, podemos fazer a mesma
verificação no Country Search. Guarde isso. Importe isso. Ah, sim. Onde quer que seja FFF Nags, mude esses dois
para ter essa cor Aqui está o modo escuro e a mesma coisa aqui, o modo escuro. E definitivamente há uma maneira mais
sucinta de fazer isso. Isso é meio que fazer
isso rápido, guarde isso. Tudo bem, incrível. Então, se eu mudar o modo escuro
agora, funciona bem. Tudo bem, então resolvemos
e classificamos o modo
escuro para que possamos superar nossos estilos,
como pequenas coisas, pequenos ajustes a serem feitos modo
escuro para que possamos , pequenos retoques
a serem feitos ao longo do caminho, especialmente quando importamos nossas imagens e coisas assim Mas isso é um
ótimo começo por enquanto.
8. Usando uma API: Tudo bem, então, se dermos
uma olhada nas
informações da nossa API aqui, nosso endpoint, ok. Basicamente,
podemos pegar todos
os países a partir
deste único link. Agora, provavelmente vamos
acabar filtrando,
mas esse é um bom
lugar para começar Nós vamos
querer pegar isso. Agora, temos que pensar
na hierarquia aqui, certo? Temos nossa entrada, temos nosso filtro
e temos nosso carro. Está tudo no mesmo
componente agora. E isso é feito intencionalmente para tornar isso um pouco
mais fácil para nós mesmos O que vamos fazer
aqui é, na verdade, dentro do mesmo componente em que
faremos nossa busca Agora, em uma configuração mais limpa, podemos começar a
separar essas peças,
mas, como MVP, podemos
começar juntando
tudo e obtendo uma versão básica
de trabalho forma como vamos
fazer isso é na verdade,
invocar um efeito de uso. Vamos fazer
uma busca a partir dessa API e
ela deve estar entre aspas co O que a busca nos permite fazer? Se consultarmos a
documentação aqui, fetch nos permite essencialmente
receber uma resposta Basicamente, estamos
enviando uma solicitação. É um método que
usamos para obter um recurso de qualquer endpoint
e, em seguida, podemos transformar esses dados em algo utilizável O que vamos fazer aqui
é buscá-lo
e, em seguida,
amarrar um ponto nele Então, vamos dizer buscar. Em seguida, vamos pegar
a resposta porque
queremos ter certeza nem sempre sabemos se nossa resposta
está
ou não no formato Json ou
se é legível Vamos
transformá-lo em Json. Vamos
responder para pegar essa resposta e
vamos transformá-la em Jon. Tudo bem, agora
temos uma resposta de Jason. Incrível. Última coisa que
vamos querer fazer, e devemos realmente criar
algo para salvar isso. Vamos
criar um objeto de dados ou uma variável de dados e
vamos definir os dados. Quando isso for feito,
usaremos o estado. Os dados
serão apenas um objeto vazio. Agora precisamos importar o
estado, para que funcione. Sim, nós fizemos isso. Faça, então eles farão mais uma, vestindo
, coletando dados e, em seguida,
definiremos os dados como dados.
Nós vamos salvá-lo. Devemos estar prontos
para ir. Uma coisa que eu quero fazer agora é ver
se isso realmente funciona. Quero consolar
e ver se estamos obtendo nossos resultados.
O console aqui. Incrível. Você verá que
temos 250 resultados aqui, que é o número
de países. E eu só quero, para
não criarmos um infilooplet deixe-me atualizar a página que Tudo bem, e vamos
passar uma matriz vazia aqui para parar o loop infinito. Então,
se apenas atualizarmos Incrível. Então, aperfeiçoamos
nossos dados. Então, se olharmos para um
dado individual aqui, se olharmos para um país
individual ,
descreverei o primeiro, então veremos que temos
muitas informações aqui. Tudo bem, então esses
são Turks e Kakos. Você verá que há
uma tonelada, tonelada de informações. Agora, não queremos
exagerar na busca de dados porque serão consultas
muito caras Então, o que podemos fazer, como diz a API aqui, podemos simplesmente buscar
os campos de que precisamos Então, podemos fazer todos os campos de ponto de
interrogação e, em seguida, igualar qualquer
campo que precisarmos Então, sabemos que
provavelmente precisamos da bandeira, precisamos da população,
precisamos da região, da capital E precisamos do nome seguindo o formato dessa estrutura de
dados aqui. Na verdade, podemos
alterar nossa consulta, nossa busca na linha 25 aqui Então, faremos tudo e, em
seguida, usaremos campos iguais, para garantir que
estamos fazendo a coisa certa Sim, os campos são iguais,
e depois vamos separá-los com
vírgulas Tudo bem, legal. Então,
faremos campos iguais Precisamos de bandeiras, precisamos de capital, precisamos de população e precisamos de região. E
vamos guardar isso. E acho que é
tudo o que precisamos. Portanto, se atualizarmos, ainda
devemos obter 250 resultados Pegue todos os
países, mas se você ver os dados
já são muito menores. Nós obtemos o capital,
obtemos as bandeiras e os formulários PNG e SVG Pegamos o nome, a população
e a região. Incrível. Então,
já estamos recebendo muito menos dados, o
que tornará nossas consultas
muito mais fáceis Perfeito. Então, a próxima coisa que
vamos querer fazer agora, na verdade, é dar mais uma
olhada. Você notará, na verdade
, que os dados estão em uma forma muito
interessante. A capital está, na verdade,
dentro de uma matriz. Então, queremos basicamente passar esses dados para nossos cartões, certo? Queremos que isso passe direto
em nossas cartas. Vamos querer
absorver todas essas informações. Sim,
vamos fazer assim. Nós vamos passar, depois vamos passar a bandeira. E isso vai ser
bandeira, opa, país. Bandeira. E então
vamos ultrapassar a população, que
será apenas a população do país. E então vamos
passar na região. E isso vai
ser a região do país, depois vai ser o nome do
país.com Tudo bem, então o que estou fazendo aqui? Certo, estou criando
todos esses erros. Então, esses dados, que na verdade, usaremos nossos dados
reais em um segundo, serão
mapeados em cada país. Então, para cada país
que queremos conquistar, e eu vou mudar, na verdade, o nome que vamos
querer conquistar o país. E então queremos entrar
no nome que nos é fornecido. E queremos pegar
o nome comum porque o nome comum é o nome que
vamos usar. Você também pode usar
o nome oficial, mas às vezes o nome
oficial não é o nome que seu
usuário pode pesquisar. Então, descobri que o nome
comum baseado na API é um
pouco melhor. Então queremos pegar
a bandeira, certo? A bandeira é a imagem real, a localização da imagem que eles enviaram para uma CDN Eu
vou usar o PNG por enquanto. Poderíamos mudar o
SVG se quiséssemos. Depende totalmente de você,
mas vamos pegar a bandeira e essa
será a nossa bandeira Também queremos
conquistar a população
e a população ,
na verdade, não está aninhada É como se estivesse
ali como um número. Então, podemos simplesmente pegar a
população de pontos do país e pegá-la. Vamos conquistar a região. A mesma coisa que apenas uma corda. Então, vamos
pegar essa região. E então a chave será
apenas o nome da chave será o nome
do país. Country.name.com
porque cada país deve ter um Awesome.com. Incrível. Então, o que
vamos fazer agora é passar
isso para o nosso cartão e basicamente configurá-lo para que ele possa receber
todos esses dados. Então, vamos criar
uma interface aqui. Isso é só para que
possamos definir nosso adereço, temos o nome
que será uma string Temos a região, que também será
uma corda. Temos a população, que também será
uma string. Temos a bandeira,
que será uma corda. Oh, você sabe o que, na verdade, esquecemos a capital Também precisamos do
Capitólio. E essa é interessante. Então, na verdade, será a faixa zero do Capitólio do País. Será a primeira
string nessa matriz. O primeiro objeto nessa matriz, que é uma string,
será o Capitol Isso também vai
ser uma corda. Salve a bandeira da
população dessa região. Acho que tenho
tudo. Tudo bem E então eu vou
passar isso aqui,
então nomeie a região, a
população, a bandeira, a capital. E eu vou passar adereços. Vou até o tipo de
adereços e guardo isso. Tudo bem, legal. Então
, temos isso funcionando. A próxima coisa que eu
provavelmente vou querer é trocar isso por dados, porque isso está me
causando muitos erros Dados. Ah, e você sabe o que,
é, oh, está me dando um
erro porque
não é do tipo array. Então, na verdade, precisa
ser uma matriz de objetos. Então, por ser uma
matriz de objetos
, provavelmente também me deu erros porque eu os
configurei, basicamente inicializei
um tipo disso Eu poderia simplesmente criar um tipo
comum, como um país. Eu não preciso
passá-lo entre os dois. Se eu criar outra pasta, eu crio tipos,
vou para o indexador de arquivos Então, cada país
terá um nome que é uma string. O nome será, o nome é uma propriedade comum que será a string. E então
teremos uma bandeira que terá uma string de
propriedade PNG. E então teremos
uma população que será um número. E eles
terão uma região que será uma corda. E
teremos uma maiúscula, que
será uma matriz de strings. Tudo bem, se eu posso importar, se eu exportar o tipo de país, vamos ver se isso
funciona e eu importo. Para importar? Não, não, ele ainda quer um
tipo básico. Tudo bem, então, oh, talvez
funcione, na verdade. Ok, legal. Então, vamos apenas criar o objeto aqui e
inicializá-lo. Nosso nome será uma string. O nome será comum, terá uma propriedade comum que
será do tipo string. Basicamente, o que isso está
procurando é como um valor inicial antes
da busca da API O que vamos
fazer é entregá-lo a ele. Ele quer saber se ok flags PNG ainda não retornou nada. O que queremos que seja
até obtermos uma resposta? Então, vamos digitar sinalizadores e, como sabemos pela nossa API, podemos até mesmo ver
nossa resposta inicial Na verdade,
acho que não entendi, mas sabemos que Flags tem uma propriedade PNG e
vamos inicializá-la para ser uma string vazia por enquanto E então
vamos seguir a linha e fazer a mesma coisa. Então, vamos para a capital. O capital será uma matriz. E
será uma matriz vazia. Ou uma matriz com uma string,
por enquanto, pode ler maiúsculas. Na verdade, talvez o país. Deixe-me remover esse tipo. Ok, vamos lá. Fazendo melhor. Oh, eu porque eu escrevi errado. Capital, diga isso. E população, contagem
da população. Oh, eu só preciso adicioná-lo.
Então, adicionaremos a população a zero e faremos com que
a região seja uma string vazia. Tudo bem, incrível. Então, acho que
nos livramos de todos os nossos erros de tipo. Legal. Então, estamos obtendo tantos resultados que nem conseguimos
exibir todos eles. Precisamos ter o envoltório flexível ou algo
parecido para não obtermos
tantos resultados Tudo bem, então podemos nos livrar de nossos dados simulados aqui porque não
precisamos mais deles Guarde isso. Que outro
erro podemos corrigir aqui? O número do tipo de população não
pode ser atribuído ao tipo stream. Oh, é um tipo de string? O tipo é uma faixa aqui, então
na verdade é o número do intervalo. Legal. Isso é ótimo
sobre o script de tipos. Quero dizer, ele encontrará
esses pequenos erros e garantirá que
você não os
cometa em todo o
projeto, mas tudo bem, então deixe-me
criar uma embalagem nesta caixa. Incrível, vamos lá. Então,
temos todos os nossos países, deveria
haver 250 caixas. O que vou fazer agora é realmente utilizar esses dados nos próprios cartões reais. Esperamos que
nosso componente de cartão forneça
apenas um
pouco de margem
na parte inferior para que
fique um pouco melhor Onde diz lagarto,
vamos mudar esse nome. Vamos dar uma olhada, na verdade,
parece muito pequeno. Vamos para o, o tamanho
da fonte
deve ser como um carneiro. E vamos alterar
o peso da fonte para cerca de 700 porque
parece muito em negrito Vamos dizer que
temos nossos nomes. Então precisamos da população,
da região e do
Capitólio. Tudo bem Usando nosso corpo dois. Vamos, eu
vou usar a etiqueta, então são apenas as etiquetas
normais da tigela que vou dizer à população, então vou
copiar e colar isso. A próxima foi,
acredito, uma região. A região e a capital estão apenas
digitando uma capital tão incrível. Então, finalmente,
queremos acessar a imagem, então vamos apenas
digitar a bandeira aqui porque essa será nossa fonte PNG. Incrível. Basicamente, com
alguns adereços simples que transferimos do nosso
país a partir da API Nós literalmente
os passamos para nosso
componente de cartão e depois os
acessamos da mesma faríamos com
adereços ou em qualquer outro lugar, e os exibimos em nosso aplicativo Nosso aplicativo está 50% pronto, talvez mais. Fizemos como nosso tipo
inicial de teste com a API e a lógica de lá. Então
, está indo muito bem. Agora, a próxima coisa que vamos
querer fazer é sermos. Tudo bem, então temos nosso aplicativo
todo formatado e estilizado, mas a próxima coisa que
vamos querer fazer é realmente adicionar
alguma lógica, Porque agora, se
digitarmos qualquer coisa que digitamos na França, absolutamente
nada acontece. Então, queremos adicionar essa lógica e faremos isso
na próxima seção.
9. Adicionando lógica de pesquisa: Tudo bem, então a
próxima coisa que temos fazer agora é colocar essa lógica para garantir
que quando alguém
digitar em um país, na barra de pesquisa aqui em
cima, ele realmente retorne uma resposta. No momento, não fazemos
absolutamente nada. Não há filtragem acontecendo
em nenhum desses resultados. Então, vamos prosseguir e
implementar isso agora. Tudo bem, então
vamos começar com isso porque
queremos basicamente filtrar todos os países
que temos como opções, a partir de nossos dados,
de nossa chamada de API. Tenho certeza de que, bem, uma maneira de fazer isso é
por meio de solicitações de API. Mas, na
verdade, podemos simplesmente filtrar isso no lado do cliente, com base
nos dados que já recebemos de volta, já que é uma
chamada de
custo muito baixo em relação a, você sabe, um
aplicativo maior que está buscando toneladas e toneladas de
megabytes de O que eu quero fazer
aqui é acessar a pesquisa por país e vamos fazer isso
dentro desse componente. O que eu quero fazer
aqui criar uma variável chamar os países filtrados
e quero defini-los Eu quero inicializar
isso como dados. Quaisquer que sejam os dados, é o que os países
filtrados serão Isso vai ser o
que vamos percorrer. Se eu mudar os dados para serem países
filtrados, vamos deixar
isso por enquanto, certo? Tudo bem, então sim, os países
filtrados serão o que
percorreremos, mas precisamos configurá-los, então precisamos inicializá-los Quando digitamos aqui, queremos que algo aconteça, queremos que algum tipo
de F aconteça. Podemos acessar isso usando o suporte on change no campo
de texto Queremos basicamente algo
como filtrar países. Filtrar países,
filtrar países. Sei que vou
querer passar no evento porque vou precisar
direcionar esse valor para lá. Vamos criar esses países
filtrantes, países filtro constante
synovus E, passando esse evento
, diremos que queremos definir os países
filtrados como B. Queremos filtrar os países e
queremos filtrá-los Queremos filtrar cada país pelo nome do país, país. E faremos isso em letras minúsculas para ter certeza de que estamos realmente
obtendo o mesmo valor. Vamos
transformar os dois. Queremos ver se o,
o nome comum do
país em minúsculas, se inclui algo valor
alvo para minúsculas,
é o mesmo. Não haverá nenhuma incompatibilidade
e isso deve funcionar. Estamos recebendo esse erro
porque precisamos atribuir a ele um tipo frio e
filtrado de países Tudo bem, então eu estou realmente
chamando a função, tudo bem. Tudo bem, agora
temos a configuração. Então, ele está filtrando os países
filtrados para ver
se esse é o valor Tudo bem, e então o que
queremos fazer agora,
queremos devolver isso,
queremos mostrar isso,
queremos mostrar países filtrados em vez de dados e dizer isso E acho que, sim, estamos
recebendo um erro aqui. Basicamente, estamos apenas
obtendo o padrão porque precisamos
esperar por esses dados. O que queremos fazer é definir países
filtrados aqui Então, queremos definir dados, então devemos
definir países filtrados Então, talvez consigamos
nos livrar dos dados. Certo. Ok. E então
ele faz isso automaticamente. Tudo bem, perfeito. Então,
filtramos os países. Então, agora, se eu digitar na
França, incrível. Então, está procurando pela França. Então, vamos revisar
o que fizemos aqui. Então, criamos essa função
chamada filtrar países. Ele define os países
filtrados como o que são, então inicializa os dados
e, em seguida, queremos filtrar por cada país e
pesquisar o país, o nome do país,
o nome comum Estamos transformando esse nome
comum em minúsculas e verificando se
esse valor de string inclui
o que estamos digitando
em nossa barra de pesquisa Então, se eu digitar,
você sabe , acho que também
precisamos corrigir
alguns erros. Mas se eu atualizar, funciona bem. Então, você notará que
já existem alguns
erros que precisam ser corrigidos. Mas o
conceito inicial está funcionando, então estamos indo
na direção certa. Tudo bem, então um
erro que acabamos notar é que, se não
há nada lá,
ele não o reinicializa. Então, vamos ver se podemos fazer um FL para defini-lo como
o valor correto. Então, poderíamos dizer que se o
valor-alvo for igual a isso, se for igual a
uma string vazia, queremos definir os
países filtrados como saltos de dados, caso contrário, queremos definir
os países filtrados como
o que fizemos filtrados como
o Tudo bem, digite
isso e depois, sim. Ok, legal. Então, se eu voltar para
o espaço agora, ele funciona. Incrível. Esse é um
erro que corrigimos. A próxima coisa que
vamos querer fazer filtrar por país, mas no momento não podemos
filtrar por região. Então, queremos adicionar a capacidade de filtrar por região também. Assim, podemos realmente
começar a utilizar esse tipo de alteração de identificador incorporada
que foi incluída
em nosso elemento de formulário. Podemos simplesmente alterar o valor
para região e
vamos mudar isso para região, então vamos aproveitar
a região inicial definida. Tudo bem, legal. Sim, podemos basicamente utilizar esse evento de mudança de identificador
para definir nossa região. Agora, quando escolhemos
uma região diferente, ela deve ser configurada
automaticamente. O problema aqui é que agora
precisaremos filtrar por região
e
filtrar por país. Então, precisamos pensar em como
vamos fazer isso de
uma forma lógica. Tudo bem? Acho que o que eu quero fazer aqui é uma combinação de coisas. Quero criar
outro manipulador. Então, vou
criar a digitação de
identificadores e isso exigirá um evento Vou criar outra variável, valor de pesquisa constante. Isso será o que
eles digitarem nessa entrada. Vou criar uma
variável para manter isso. Vou começar com
um identificador de string vazio
digitando que pesquisa
será definido como valor
alvo E então eu vou chamar isso, eles digitam quando alguém
digita no aplicativo. Então, vai fazer
isso. Incrível. E vamos ir mais longe. Parátipos. Incrível. Legal. Agora que temos esse valor de pesquisa armazenado para que você possa acessar em
mais de um lugar, esse filtro de países pode
acabar se transformando. A próxima coisa que quero fazer é inserir efeito
de uso ou um memorando de uso Quero verificar a
região, quero verificar a região e talvez verificar
o filtro também. Então, deixe-me começar com um memorando de uso. E o que vou
fazer é
criar uma matriz vazia
chamada países. E eu vou então fazer uma verificação se a região
não é igual a string, certo? Portanto, sabemos que a região está
começando como uma válvula de cadeia vazia. Se não for uma string,
queremos fazer alguma coisa, certo? Se a região não for igual a uma string, queremos definir
os países como dados. Ou são dados de filtro? Dados. Filtre por país então. Se esse país, região igual a
região, legal Sim, queremos verificar,
queremos basicamente definir esse conjunto de países para ser
qualquer dado que tenhamos. Sim, os países serão. Pegando os
dados, todos os dados que
obtemos da APA, vamos
filtrá-los por país. Se esse país tiver uma região que corresponda à
região que definimos, ela entrará na variável
desse país. Legal. Em seguida, queremos
definir os dados filtrados, mas também queremos considerar o que definimos nos dados filtrados,
como a forma como o texto e o bit de digitação entram nisso Deixe-me pensar sobre
isso por um segundo. Tudo bem, então
basicamente queremos
passar por uma lógica similar. Então, se a região fizer isso, queremos verificar
o valor da pesquisa. O valor da pesquisa não é
igual a uma string vazia, então queremos fazer essa verificação, queremos definir os países filtrados para
serem basicamente isso, certo? Queremos fazer isso, mas aqui embaixo, então vamos pegar
países, exceto isso. Então, em vez do valor do ponto
alvo, será o valor da pesquisa.
Eu vou guardar isso. Não é certo que funcione porque basicamente
pegamos o
valor do ponto-alvo e o salvamos como valor de pesquisa. Ok, legal. Então, temos dois, se provavelmente
precisarmos que valor de pesquisa de
outra pessoa esteja definido, região não é nula, certo? Queremos que os países
filtrem isso. Se o valor da pesquisa não for nulo, queremos filtrar
os países Mas se o valor da pesquisa for nulo, queremos apenas definir os países
filtrados como países
,
certo, sem filtragem extra A região é igual. Nada como se não
houvesse uma região, então queremos fazer uma verificação
semelhante aqui, certo? Basicamente, queremos
fazer isso de novo , mas depois definir isso como data. Acho que sim, configurá-lo para dados, mas em vez disso, queremos definir
os
países filtrados e
vamos fazer isso com dados, acredito que seja o país
filtrado pelos dados Faremos isso em arquivo. Se o valor da pesquisa não for nulo, pegaremos
os países filtrados e depois os filtraremos. Caso contrário,
definiremos os
países filtrados como dados,
a região, se
não houver uma região definida,
mas se o
valor da pesquisa não for nada, ainda
queremos filtrar
pelo Isso é algo
que
podemos simplesmente perder a função do país de filtro porque, na
verdade, não é tão útil. Mas se a região for, o valor da pesquisa
também é uma string vazia Queremos definir os
países do filtro como dados. Isso deve funcionar. Só
precisamos adicionar nossa dependência. Portanto, deve ser a região dos dados região dos dados
e o valor da pesquisa. Guarde isso. Eu acho
que isso deveria funcionar. Eu acho que isso deveria
funcionar. Vamos tentar. Vamos para a França. Mas vamos lá e depois vamos tentar filtrar
por escopo de alcance. Europa, ok? A América está bem. África. Sim. Tudo bem Então, funciona muito bem. Legal. Legal, legal, incrível. Tudo bem Legal. Então
isso funciona muito bem. Então, a próxima coisa, sim. Então, a próxima coisa que
vamos querer fazer, acho que o que
vou querer fazer agora é configurá-la. Eu queria que tudo funcionasse. Basicamente, quero
que você possa
redefinir a região porque, no
momento , sem tudo, você só
pode configurá-la. Você não pode desativá-lo, certo? Você não pode redefini-lo
se estiver definido como tudo, para que ele também retorne
toda a região. Se eu fizer região igual a
região igual a igual,
tudo funciona, não, não funciona O que vou fazer aqui,
na verdade, é apenas alterar o valor de all para ser uma string vazia para que,
quando eu for para a África, América, Ásia e
depois volte para tudo, ela simplesmente retorne
de uma string vazia. Muito simples, limpo, conserto, legal. Vamos ver o que mais está lá. Há
mais alguma coisa que eu possa fazer aqui? Acho que a única
coisa que resta a fazer aqui é provavelmente
limpá-lo um pouco. Diz que quer
países filtrados como dependência, mas não sei se
vai funcionar se eu fizer isso Deixe-me dizer isso e depois tentar. Oh, espere, desculpe. Eu não sou. Sim, não, ele quebra
se eu fizer isso. Sim, então eu não
quero fazer isso. Eu só vou
deixar isso de fora. Vou apenas desativar
as dependências exaustivas desta linha Legal. Acho que realmente
usamos países filtrantes? se eu comentar isso
e removê-lo daqui, os aplicativos
funcionarão? Oh, isso é um bug. Isso não acontece. Tudo bem, então eu não acho que nós realmente, eu não acho que realmente
precisamos de um país de filtro. Então, eu vou me livrar dela e vou me livrar
da coluna que está aqui. Ele será
substituído pela digitação de identificadores, que basicamente pega esse valor alvo
e apenas fornece uma variável que
corrige o problema Uh, o que mais? O que
mais podemos fazer aqui? Oh, podemos acabar com
essa lei do console. Não precisamos mais disso. Então, pelos dados, sim, essa
pode ser a solução. Ok, essa foi a solução. Então, eu estava recebendo esse
erro
em que, se eu digitasse algumas letras
e fosse para uma região, se eu voltasse para todas,
não estava classificando Então isso é porque eu
erroneamente, eu cometi um erro. Eu deveria ter dito dados na linha 60 ou deveria ter dito países
filtrados, que é o que
estamos filtrando na linha 60 para realmente serem Então, vamos usar apenas dados,
não vamos usar países
filtrados Vamos usar
países filtrados , mas não nesse
momento Incrível. Acho que temos
tudo o que precisamos aqui. Acho que estamos
praticamente prontos para sermos legais. Acho que outras coisas
que você poderia fazer com este projeto é
torná-lo responsivo para dispositivos móveis Então, para fazer isso, você
sabe, se transformar em uma espécie de visualização suspensa que
eles têm aqui como opção Você sabe, qualquer filtro
por região e é apenas um país após o outro e crie uma versão móvel. Esse seria outro projeto
interessante de se fazer. Você poderia retocar o modo
escuro, você sabe, obter um ícone melhor que esteja um pouco mais
alinhado com o design. Um monte de coisas que você ainda poderia fazer se quisesse
neste projeto. Depende totalmente de
você, se você quiser
continuar com isso. E então você também pode adicionar uma espécie de página individual aqui para cada
país que,
na verdade apenas exibe suas
informações lá. Então, ainda há muito a ser feito
com este projeto, mas sim, espero que tenha sido
útil para você e você
realmente tenha aprendido a usar uma API com a
pesquisa de países e possa trabalhar com APIs
no futuro e incorporá-las em
seus projetos futuros
10. Conclusão: Falamos muito neste
vídeo, desde as origens do react até a criação seu próprio aplicativo de pesquisa de
países totalmente funcional. No futuro, você
deve ser capaz de
lidar com qualquer projeto de API
que surgir em seu caminho. Lembre-se de pesquisar
algo quando não tiver certeza e vasculhar o stack
overflow Eu adoraria ver como você decidiu implementar seu aplicativo web. Portanto, deixe um link para seu código ou para o
site hospedado na guia Projetos e Recursos para que eu possa ver todo o
trabalho árduo que você fez. Eu leio todos os comentários, todas as avaliações e vejo
cada envio de projeto. Portanto, se você tiver alguma dúvida, sinta-se à vontade para
deixar um comentário
na seção de avaliações abaixo ou
entrar em contato comigo diretamente. Confira minha página de perfil para obter mais informações sobre isso. Se você quiser saber
mais sobre programação, confira os outros vídeos que
tenho na minha página de perfil Também tenho vídeos em HTML e CSS disponíveis no site
do meu canal no Youtube. Vou vinculá-los abaixo e no meu perfil se você
também estiver interessado em aprender esses idiomas em aprender esses idiomas. E eu vou ver
na próxima.
Zoë Davidson, Software Engineer & Cinematographer
