Agora, que concluímos a atualização do lado do servidor.
É hora de passar para o cliente reagir.
Para sua conveniência, eu forneci a você o repositório GitHub,
que contém a versão final do cliente que é capaz de se comunicar com o
nosso servidor REST API e, em seguida, processar as várias visualizações para o nosso cliente.
Então, eu tomei a reaplicação que nós desenvolvemos no
segundo curso da especialização e, em seguida, modificá-lo.
Faremos um breve passeio pelo código um pouco mais tarde.
Agora, você clonará o repositório Git para o seu computador
e, em seguida, inicializará seu cliente e, em seguida, vê-lo se comunicando com nosso conjunto de servidores.
Vamos ver os detalhes a seguir.
Para começar com este exercício,
no terminal ou na janela de comando,
vá para o local conveniente e, em seguida, no prompt, digite git clone
https://github.com/jmuppala/conFusion-React.git e, em seguida, deixe
o aplicativo React ser clonado para o computador.
Quando a clonagem estiver concluída,
mova para a pasta Confusion-React
que acabou de ser criada quando você clonou este repositório Git.
Então, você notará imediatamente que já há um monte de arquivos lá.
Agora, no prompt, digite yarn install,
a fim de instalar todos os módulos de nó em
que este aplicativo React é dependente.
Assim, uma vez que os módulos do nó estão todos instalados,
então podemos iniciar o nosso fio começar a compilar e servir até o nosso aplicativo React.
Uma vez que tudo está dentro,
certifique-se de que o seu servidor MongoDB está
funcionando e também o seu servidor API REST também está funcionando.
Caso contrário, o cliente não funcionará.
Então, agora que você instalou seu cliente em seu computador,
adicione o prompt tipo yarn start
e seu aplicativo será recompilado e servido em um curto espaço de tempo.
Uma vez que seu aplicativo é compilado com sucesso,
vá para o navegador e você verá que
seu aplicativo React é iniciado e é visível na tela aqui.
Você notará imediatamente que seu aplicativo é
capaz de buscar os dados do servidor e, em seguida, processar
as várias partes de seu aplicativo exatamente como o que você
fez no final do seu curso React.
Quando você vai para a pasta Sobre,
você também verá que a página Sobre também renderiza as informações.
Como tal anteriormente no menu,
você vê os itens no menu sendo exibidos exatamente como vimos com o aplicativo.
Agora, além disso, adicionei
mais uma página ao aplicativo de página única chamado Meus Favoritos,
para o qual você não pode navegar,
porque nenhum usuário está logado em seu sistema.
Então, você vê que eu não tenho nenhum usuário conectado ao sistema.
Então, é por isso que não há nenhum ponto em indicar meus favoritos porque você não sabe
qual usuário como favoritos deve ser mostrado aqui e a página de contato como de costume.
Agora, vamos entrar.
Para fazer login em nosso aplicativo,
vamos clicar no botão de login e, em seguida, você verá que a caixa de diálogo de login aparece.
Então deixe-me fazer login como um dos usuários registrados,
que registramos como parte deste curso anteriormente.
Então, uma vez que você entrar,
você notará imediatamente que, no canto direito,
você vê que o botão de login agora se transformou em
logout e o nome do usuário é indicado aqui.
Então, quem está logado é indicado aqui.
Você também pode, em princípio, substituir isso pela imagem do usuário.
Agora, para isso você precisa fazer mais modificações
tanto para o cliente quanto para o servidor, a fim de suportar a exibição da imagem aqui.
Mas no momento, estou apenas mostrando a vocês,
como podemos facilmente exibir as informações do usuário aqui.
Então, isso exigiu pequena modificação para a cabeça do componente,
onde eu serei capaz de recuperar o nome de usuário.
Então, uma vez que o usuário faz login,
então, se você agora clicar em Meus Favoritos, você
notaria que não há nada em Meus Favoritos para o usuário.
Obviamente porque o usuário ainda não escolheu nenhum favorito.
Então, vamos agora para o menu.
Então, no menu,
deixe-me selecionar um item e, em seguida, adicionaremos este prato aos nossos favoritos.
Então, indo abaixo aqui,
você verá o símbolo do coração lá,
clique nele, e você verá que isso seria adicionado aos favoritos.
O fato de que isso foi adicionado aos favoritos,
é indicado pela mudança no ícone aqui de um coração não preenchido para um coração cheio.
Agora, se você for a qualquer outro prato,
você notaria que este tem um coração não preenchido,
o que significa que este ainda não está entre os nossos favoritos.
Então, deixe-me adicionar mais um item aos
meus favoritos e, em seguida, vamos adicionar um terceiro item aos meus favoritos também.
Então, agora, você verá que se eu for agora aos meus favoritos,
você verá um conjunto de Meus Favoritos sendo exibido aqui.
Então, você viu que eu acabei de adicionar estes três pratos
aos meus favoritos e assim estes estão sendo exibidos aqui.
Então, isso é rastreado usando
esse ponto de extremidade favoritos
no lado do servidor, o que implementado como parte da sua última atribuição.
Então, se você fez essa atribuição corretamente,
então esta parte deve funcionar como esperado.
Agora, também podemos modificar Meu Favorito.
Então, deixe-me ir em frente e excluir um dos itens de Meus Favoritos.
Então, quando eu clicar nesse botão você vai notar imediatamente que,
que o item é excluído de Meus Favoritos e imediatamente desaparece e
meus favoritos é atualizado e você vê o valor resultante sendo mostrado aqui.
Portanto, observe que os Meus Favoritos serão exibidos somente
para usuários que estão conectados ao sistema.
Então, você percebe imediatamente um conjunto de alterações que foram
feitas para o cliente, a fim de suportar
alguns desses recursos adicionais que você vê aqui.
Você também viu o recurso de login e logout sendo suportado aqui.
Então, quando eu clico no botão de logout,
você percebe imediatamente que o usuário é desconectado e
o nome de usuário desaparece de lá e
assim o botão também é transformado no botão de login.
Agora, então, com isso você percebe como meu cliente foi
atualizado para fazer uso do novo servidor de API REST,
a fim de suportar os favoritos que estão sendo salvos no lado do servidor e, em
seguida, sendo automaticamente refletido em Meu aplicativo Cliente, como mostrado aqui.
Agora, que você já viu o aplicativo React modificado em ação,
é hora de fazer uma visita ao código-fonte para ver como
exatamente ele é implementado e quais são as mudanças
que fizemos correspondentes ao aplicativo Redux no final do curso Redux.
Agora, as duas grandes mudanças que você vai notar,
é o suporte para favoritos e também o suporte de autenticação,
o login do usuário e suporte para logout.
Agora, como estes são implementados?
Começaremos a nossa jornada na parte Redux da nossa aplicação.
Então, indo para a parte Redux,
vamos visitar os tipos de ação.
Em tipos de ação, você verá agora que temos
três novos tipos de ação relacionados aos seus favoritos.
Então, você veria favoritos carregando,
favoritos falharam e adicionar favoritos,
que como você esperaria estar lá.
Em seguida, também seis tipos de ação diferentes relacionados ao seu processo de login e logout.
Agora, para que você possa ver solicitação de login, sucesso de login,
falha de login, solicitação de logout,
sucesso de logout e falha.
Então, vamos ver como esses tipos de ação são realmente usados em nossa criação de ação.
Então, indo para os criadores de ação,
então é aqui que você verá o suporte para os favoritos aqui.
Então, primeiro examinaremos o suporte para favoritos e, em seguida,
examinaremos o suporte para o suporte de autenticação.
Então, aqui, você verá que temos novos métodos abaixo
aqui chamados como FavoritesLoading, FavoritesFailed e addFavorites.
Agora, a partir de suas experiências anteriores
dishesLoading e dishesFailed e addDishes e assim por diante.
Então, essas coisas são muito familiares para você, de
modo que é exatamente o mesmo tipo de configuração para o código aqui.
Além disso, você verá outro método aqui chamado FetchFavorites,
que é novamente como eu disse um tanque Redux,
que é implementado aqui,
onde vamos usar a busca para acessar o servidor para buscar os favoritos.
Então, estes são os métodos que você verá aqui e, em seguida, também você verá
DeleteFavorite aqui e também um tanque Redux para PostFavorite aqui.
Então, no PostFavorite como você esperaria,
você estaria postando o favorito para o servidor aqui.
Então, observe aqui como estamos usando autorização.
Sendo configurado em nosso cabeçalho de autorização, então,
isso é algo que eu chamaria sua atenção neste momento,
voltaremos a isso novamente quando olharmos para a autenticação e autorização do usuário.
Então, estamos configurando o cabeçalho de autorização como este usando buscar aqui.
Então, para buscar, estamos postando um item na busca
aqui e então você vai notar que a estrutura de como a busca é feita é dada aqui.
Agora sempre que você postar um favorito ou excluir um favorito ou buscar um favorito,
nós sempre teremos o servidor devolvido para você,
todo o conjunto de favoritos e então nós simplesmente adicionaremos esses favoritos
em nossa loja redux aqui, então é isso que estamos fazendo aqui.
Novamente, a estrutura de código deve parecer muito familiar para você,
se você simplesmente olhar para como o favorito da postagem,
o favorito excluir e os favoritos da busca são implementados.
Então, tudo isso irá lidar com a questão dos favoritos.
Agora, como exatamente os próprios favoritos são implementados?
Então, a função redutor é implementada na estrutura favorita aqui.
Então, dentro desta função reduzida,
você verá como lidamos com a adição de
favoritos, carregamento de favoritos e favoritos falhou aqui.
Novamente, o código deve parecer muito familiar para você com base em
sua experiência com as funções redutoras que você já viu para redux antes.
Então, novamente preste um pouco de atenção à forma como o código é implementado.
Isso é bastante simples, então eu não estou gastando
muito tempo explicando como essas coisas são implementadas.
Agora, aproveitando estes,
temos nos componentes que agora temos
um novo componente favoritos cujo trabalho é renderizar toda a lista de nossos favoritos.
Então, aqui você vê que o componente de favoritos em si,
a estrutura do componente de favoritos é muito semelhante à
estrutura do componente de menu então aqui temos
o componente de favoritos que é implementado como um componente funcional e
lá estamos renderizando os favoritos em aqui como você vê no código aqui.
Novamente, muito simples eu acho que você deve ser capaz de
entender facilmente como o componente de favoritos é
implementado tendo tido experiência com como o componente de menu é implementado lá.
Então, novamente eu não estou gastando muito tempo explicando código aqui.
Agora analisar o código também é
uma boa experiência para você aprender como o código é implementado, então
processar este código em sua própria cabeça irá ajudá-lo a entender novamente
para consolidar sua compreensão de reagir com mais detalhes.
Então, vou deixar isso como um exercício para você.
Agora estou apontando onde as alterações foram
feitas para implementar o suporte para favoritos.
Agora o termo favorito,
favoritos também é alavancagem
no componente detalhe prato e dentro do componente detalhe prato,
você vai ver que temos o adicional- Aqui,
no componente funcional prato renderizar,
estaremos renderizando o botão que suporta
a seleção ou quando você clicar no contorno do coração,
ele irá adicionar esse item específico em sua lista de favoritos.
Então, tudo isso é suportado aqui usando este botão aqui que
invoca como você vê esta função chamada post favorito que é o redux.
Obrigado que temos implementado lá e este suporte para isso
é implementado nos componentes principais para que quando você vai para o componente principal,
você vai ver como o favorito post é implementado aqui
e você também vai ver que isso está
incluído no mapa enviado para adereços e assim o post favorito implementado.
Então, você vê que a estruturação é muito a
mesma que você viu para o outro código lá.
Então, eu não vou gastar muito tempo em como o suporte de favoritos é implementado,
em vez disso deixe-me gastar um pouco mais de tempo em como
a autorização do usuário e autenticação é suportada no código aqui.
Agora, para a autenticação do usuário,
o que estamos fazendo aqui é que quando você entrar na loja de configuração aqui,
você verá que eu tenho mais uma função redutor chamada Auth que é implementada aqui.
Então, isso rastreará a parte de autorização.
Agora, como isso é implementado?
Mais uma vez, entrando em criadores de
ação, tipos de inação já vimos o conjunto de ações relacionadas ao login e logout.
Então, entrando em criadores de ação,
você verá que aqui em cima temos
todas as funções que são implementadas para fazer login e logout.
Então, você verá uma nova função chamada login de solicitação, receber log,
e assim estes são quando o login é bem sucedido e assim por diante, mas em
particular, esta função particular aqui do usuário de login é onde começamos com o processo de login.
Então, vamos despachar o login de solicitação no ponto em que o usuário tenta fazer login,
depois disso vamos fazer uma busca para os usuários barra ponto final de login com
o post e isso contém no corpo da mensagem as credenciais para o usuário aqui.
Então, uma vez que fazemos a busca,
se a resposta for retornada corretamente,
então a resposta deve conter o token lá.
Então, vamos processar essa resposta aqui e então se o login foi bem sucedido,
então vamos armazenar o token no armazenamento local aqui.
Então, você pode ver que estamos dizendo LocalStorage definir
token de resposta de token de item e, em seguida,
também vamos armazenar as credenciais do usuário no armazenamento local aqui.
Então, esses dois vão me ajudar a rastrear o processo de login do usuário.
Depois disso, enviaremos o login de recebimento.
Agora, neste ponto, quando o usuário está logado com sucesso,
também vamos buscar os favoritos para o usuário.
Agora lembre-se de que você só pode buscar os favoritos para um usuário que está conectado.
Quando nenhum usuário está conectado, não há favoritos a serem buscados,
mas quando o usuário fizer login com sucesso, você deseja buscar
o favorito do usuário para que ele possa exibir isso em seu aplicativo reagir.
Então, é por isso que eu também estou fazendo um buscar favoritos
aqui e, em seguida, vamos receber o login aqui.
Então, se houver um erro, enviaremos o erro de login aqui.
Então, todas essas funções o login de recepção e erro de login irá
então invocar as funções redutor apropriadas que são implementadas no arquivo Auth.Js.
Então, indo para o arquivo Auth.Js,
o estado aqui rastreia o status de login do usuário aqui.
Então, aqui nós também vamos armazenar no estado,
o estado envolve o leste carregamento booleano que
rastreia se você está no processo de login. A facilidade de autenticação -
Indica se o usuário está autenticado e assim o usuário está logado,
assim você será capaz de permitir que o usuário.
Então, esse sinalizador é usado em muitas circunstâncias
para exibir o status de login do usuário e, em seguida, também
a propriedade do usuário para o estado rastreia as credenciais do usuário.
Então, é aí que vamos obter o nome de usuário para exibição em nosso componente de cabeçalho.
Agora, aqui você verá a solicitação de login e quando o sucesso do login for acionado,
então você armazenará o valor do token aqui e, em seguida, a falha de login.
O pedido de logout, logout com sucesso,
todos estes são manipulados por estas várias partes dentro deste redutor o redutor auth.js aqui.
Então, é assim que a autenticação do usuário é tratada aqui.
Agora, no componente de cabeçalho,
indo para o componente de cabeçalho,
então este é o lugar onde temos a função de login aqui.
Então, o HandleLogin, você se lembra que
já implementamos isso no curso de reagir.
No HandleLogin, eles vão alternar o modal.
Então, vamos fechar o modal e, em seguida, vamos fazer login no usuário neste ponto.
Então, vamos dizer isso.props LoginUser e então você verá que as credenciais,
nome de usuário e senha são passados como os parâmetros para
o LoginUser e de modo que entra no func LoginUser,
que então cuida de fazer login no usuário.
Agora, como você exibe o estado de login do usuário.
Então, isso é muito simples novamente.
Na barra de navegação aqui,
você verá que eu adicionei em um novo item aqui.
Então, é aqui que vamos dizer this.props.auth.IsAuthenticated.
Então, o sinalizador IsAuthenticated está sendo usado aqui por mim e então se isso é definido como true,
então eu vou exibir
o botão Logout aqui e então isso é o que eu vou exibir aqui.
Caso contrário, exibirei o botão de login.
Então, usando esse sinalizador IsAuthenticated,
eu estou invertendo qual botão específico será exibido
no cabeçalho lá se você exibir o botão de logout ou o botão de login.
Então, esse é o ponto que estamos exibindo aqui.
Então, o login ou o logout aqui.
Então, é assim que estamos lidando com o processo de login e logout
aqui e também estaremos exibindo o nome de usuário bem ali.
Então, quando você exibir o botão de logout,
você também verá que estamos exibindo o nome do usuário lá.
Então, abaixo aqui,
vamos também exibir o botão handleLogout e,
em seguida, temos o botão logout sendo exibido aqui.
Além disso, esta declaração particular aqui,
é assim que estamos exibindo o nome de usuário aqui.
Então, isso usa o this.props.auth.user.username.
Então, a propriedade de usuário no estado de autenticação contém
as credenciais de usuário e de lá eu busquei o nome de usuário e, em seguida, eu
uso isso para exibir isso na barra de cabeçalho.
Então é assim que o componente de cabeçalho é
atualizado, a fim de lidar com o processo de login e logout.
Novamente, maneiras bastante simples de implementar,
é uma maneira bastante simples que eu implementei aqui.
Agora, obviamente, se você quiser uma maneira mais complexa de lidar com o processo de login e logout,
certamente você pode entrar na maneira completa de fazer as coisas,
mas isso é suficiente para atender aos requisitos para a minha aplicação.
Então, eu implementei o processo de login e logout de
uma maneira muito simples aqui usando a ajuda da loja Redux.
Então, por Redux loja em si está rastreando
meu status de login se eu estou logado e eu estou autenticado e se eu estou desconectado.
Então, se o usuário estiver desconectado,
os Meus Favoritos não serão mostrados aqui.
Agora, um ponto importante que você vai perguntar é,
como nós garantimos que nós não entramos no estado favorito aqui?
Então, isso é tratado no lugar onde lidamos com as rotas aqui.
Então, você notará que para os favoritos aqui,
declaramos para os favoritos o endpoint em vez de
chamar isso como a rota que chamamos como uma rota privada.
Assim, a rota privada permite que você garanta que você terá
permissão para entrar nessa parte apenas
em circunstâncias, onde o usuário está logado.
Então, isso impedirá uma navegação para o endpoint /favorites se nenhum usuário estiver conectado.
Agora, como essa rota privada é implementada?
Esta rota privada está implementada aqui em cima.
Então, você pode ver que esta rota privada é implementada como mostrado aqui.
Então, isso não é nada além de uma rota aqui e, em seguida, aqui,
vamos implementar this.props.auth.IsAuthenticated.
Então, se o usuário for autenticado,
então eu permitirei navegar para
o componente que é o componente favorito.
Caso contrário, eu simplesmente redirecionarei para o componente doméstico.
Então, se nenhum usuário estiver conectado,
vou simplesmente redirecionar para o componente home e assim isso é
implementado usando esta rota privada que eu projetei aqui.
Então, a rota privada é algo que é suportado pelo roteador
que usamos o roteador React Dom que usamos em nosso aplicativo React.
Então, uma maneira muito simples de lidar com situações,
onde você não quer que certas rotas sejam navegadas para quando o usuário não está logado.
Então, novamente, algumas mudanças simples que eu fiz para
o aplicativo para facilitar
todos os diferentes recursos que você vê em seu aplicativo React.
Agora, como você
poderia esperar, você pode estar desiludido neste ponto,
“É tão simples de implementar” e, de fato, é
exatamente isso que foi feito para suportar todos os novos recursos.
Como você pode ver, autenticação do usuário e login e
processo de logout desde o nosso servidor tem suporte completo para tudo,
implementando o acompanhamento do lado do cliente do
processo de login e logout do usuário e tudo o que se torna bastante simples, apenas
modificando alguns dos componentes e adicionando
a função de redutor de autenticação e adicionando no estado de autenticação à nossa loja Redux.
Todo o processo de manipulação da autenticação do usuário
e login e logout torna-se bastante simples neste caso.
Então, com este rápido tour do código React atualizado,
vamos continuar a examinar
nosso aplicativo React mais alguns recursos do nosso aplicativo React.
Então, novamente, voltando para a nossa aplicação,
agora podemos ir para o menu e, em seguida, puxar
qualquer prato aqui e eu posso postar comentários para o prato aqui,
então eu iria imediatamente configurar a classificação aqui e meu valor comentário aqui.
Observe que eu não estou inserindo meu nome de usuário ou o nome do meu autor aqui no formulário aqui.
Agora, é claro, para enviar um comentário, você precisa estar logado.
Então, se você não está logado neste comentário não será aceito pelo meu servidor.
Então, deixe-me primeiro entrar.
Então, eu posso entrar aqui
e no momento em que eu entrar você imediatamente notar que
barra de ferramentas cabeçalho é atualizado para indicar o meu status.
Agora, eu posso postar este comentário e você notaria que quando eu postar
o comentário, o comentário é adicionado na lista dos comentários
e também notar que o campo autor é
automaticamente preenchido aqui porque é assim que nós configuramos nosso lado servidor.
No campo de comentários,
nós configuramos nosso usuário como uma referência para
as informações do usuário que armazenamos em
nosso lado do servidor e desde que usamos o preenchimento Mangusto no lado do servidor,
as informações do usuário são automaticamente
preenchidas nos comentários recebidos do lado do servidor.
Então, é assim que você percebe como eu estou aproveitando
o que o servidor já fornece para que eu preencha automaticamente os detalhes.
Assim, pequenas mudanças novamente até mesmo
na página de detalhes do prato para refletir o uso do suporte de comentários no site do servidor.
Com isso,
concluo a ilustração rápida do cliente React que implementamos como parte
deste exercício e espero que você
passe pelos detalhes do código no cliente também e depois
reflita sobre o que você aprendeu no curso React e veja como
as modificações nos permitem implementar em um modificado,
[inaudível] que agora é capaz de se comunicar com o servidor e, em seguida, suportar todos os recursos que
originalmente pretendíamos implementar como parte do nosso cliente e do lado do servidor.