Agora que concluímos o desenvolvimento de um servidor API REST completo usando Loopback,
a próxima pergunta imediata que surgirá em sua mente é,
como adaptamos o aplicativo React para fazer uso deste servidor REST API?
Como fizemos nos casos anteriores,
também precisaremos reconfigurar nosso aplicativo React para fazer uso específico dos
pontos finais da API REST e das
várias solicitações da API REST conforme exposto pelo nosso servidor Loopback.
Para começar este exercício, primeiro,
clone o repositório git que contém
um reaplicativo concluído que se comunica com nosso servidor Loopback.
Então, para fazer isso, vá para sua localização conveniente em seus computadores.
Vou clonar o repositório git
digitando git clone
https://github.com/jmuppala/conFusion-React-Loopback.git
e, em seguida, clonar este repositório git.
Uma vez que o repositório git é clonado,
em seguida, vamos mover para a pasta Confusion-react-loopback e
, em seguida, executar uma instalação yarn para instalar todos os módulos de nó para esta aplicação.
Antes de iniciar o aplicativo React,
verifique se o servidor de Loopback está configurado corretamente.
No servidor Loopback,
na pasta cliente,
mova as imagens que demos como o arquivo images.zip,
descompacte-o e, em seguida, mova as imagens para
a pasta de imagens sob a pasta cliente, como mostrado aqui.
Além disso, renomeie o arquivo root.js como root.jsold ou exclua o arquivo root.js.
Não precisamos mais disso em nosso aplicativo porque queremos garantir que
nosso servidor esteja salvando o conteúdo da pasta do cliente.
Então, para conseguir isso,
vamos abrir o arquivo middleware.json,
e no arquivo middleware.json,
na parte de arquivos,
adicione isso na parte de arquivos do seu arquivo middleware.json.
Então, vamos dizer, Loopback static e params: dollar bank dot dot barra client”,
indicando que seu servidor Loopback estará salvando
conteúdo estático da pasta cliente aqui.
Depois de fazer essas alterações,
você pode iniciar seu servidor.
Certifique-se de que o seu servidor MongoDB
também está em funcionamento antes de iniciar o seu servidor Loopback.
Depois disso, compilaremos e lançaremos nosso cliente React.
Agora, novamente certificando-se de que seu servidor MongoDB e seu servidor Loopback em funcionamento,
vá para o terminal e adicione o terminal.
Digite fio começar a iniciar nosso aplicativo Loopback, o aplicativo React.
Então, quando o aplicativo é iniciado no navegador,
você notará que o aplicativo React baseado em Loopback se comporta
exatamente da mesma forma que as versões anteriores do aplicativo React.
Então, aqui temos a página inicial,
então temos a página Sobre Nós como vemos aqui, em
seguida, a página Menu onde os itens de menu estão listados aqui,
a página Fale Conosco como esperado.
Então deixe-me voltar para a página inicial e, em seguida, fazer login como administrador.
Então, vamos fazer login como administrador
e, em seguida, você será capaz de ver os Meus Favoritos.
Fiz login mais cedo e adicionei um item a Meus Favoritos.
Vamos agora para o Menu e, em seguida, adicionar um segundo item em Meus Favoritos.
Então, aqui vamos adicionar este item aos favoritos,
e então você poderá ver que ambos os itens estão agora em Meus Favoritos.
Da mesma forma, você pode excluir itens dos favoritos.
Então, vamos em frente e excluir isso de nossos Favoritos.
Voltando ao item Menu,
vamos adicionar um comentário a um dos pratos.
Então, deixe-me clicar neste prato,
e então vamos enviar um comentário.
Então, quando enviamos um comentário,
como você pode ver, o comentário é adicionado ao
nosso servidor lá como
esperado e o resultado é mostrado na página Detalhes do prato aqui.
Voltando novamente para a página inicial,
descobrimos que nosso aplicativo React agora é capaz de se comunicar com
o servidor Loopback e, em seguida, obter
os dados do servidor e interagir com o servidor como esperado.
Agora, é claro, a pergunta que surgiria em sua mente é,
como esse aplicativo Loopback está se comunicando com o servidor Loopback?
Agora, este é o lugar onde devemos notar que para Loopback,
uma vez que o servidor Loopback expõe os endpoints da API REST,
meu aplicativo React é capaz de acessar o servidor Loopback nos
pontos finais da API REST correspondentes e, em seguida, se comunicar com o servidor,
como fizemos com nosso próprio servidor REST API que tínhamos implementado anteriormente.
Então, vamos em frente e dar uma olhada no código para o aplicativo React modificado.
Indo para o código do nosso aplicativo,
as principais mudanças que você notará estarão no arquivo ActionCreators.js.
Aqui, você notará que agora estamos nos comunicando com
o servidor de Loopback em vez do servidor de API REST que tínhamos anteriormente.
Então, a busca agora estará acessando o servidor Loopback
no ponto de extremidade api/comments ou no ponto de extremidade api/dish e assim por diante.
Então, todas essas solicitações de busca são atualizadas para acessar nosso servidor Loopback instantâneo.
Então, você notará mudanças semelhantes lá.
Agora, além de fazer login no nosso servidor Loopback,
então vamos para o código de login aqui.
Então, no usuário de login,
estamos postando uma busca para o baseURL e API/customers/endpoint de login
e, em seguida, forneceremos as credenciais no corpo da mensagem de solicitação que sai.
Em resposta a isso,
o servidor enviará de volta a resposta.
A resposta, em seguida, contém as informações de token.
As informações do token são enviadas de volta na forma
do ID da mensagem de resposta.
Então, o ID em si serve como o token.
Então, a mensagem de resposta em si,
eu vou salvar isso no meu armazenamento local, como mostrado aqui.
Nós stringify a mensagem de resposta e, em seguida, armazenamos isso lá.
Esta mensagem de resposta, o Response.ID, contém o token.
Então, o response.id serve como o token da Web JSON para acessar o servidor de Loopback.
Então, é por isso que você vai notar que em
situações em que eu preciso acessar o servidor, então, por exemplo,
vamos notar que quando estamos buscando ou postando seu favorito no servidor,
você vai notar que eu obtenho o token dizendo,
let token, JSON parse,
LocalStorage, GetItem, token aqui
e, em seguida, no campo de cabeçalho de autorização,
eu disse que o campo de autorização para ser token.id aqui como mostrado aqui.
Então, é assim que seremos capazes de nos autenticar para o servidor Loopback.
Então, aqui você vê que ele diz, BaseURL, api/favoritos
e, em seguida, obter a lista de favoritos do servidor
e, em seguida, salvá-lo em nossa loja redux.
Então, bem, grande parte do código permanece o mesmo,
exceto pelas atualizações que fizemos para
acessar os pontos finais da API REST Loopbacks.
Agora, para Angular, temos um Loopback SDK que pode ser construído para nossa aplicação Angular.
Mas para React, não há tal suporte disponível a partir de Loopback,
e por isso temos que recorrer a acessar diretamente
os pontos finais da API REST Loopback como mostrado aqui usando fetch,
e então nós somos capazes de se comunicar com o servidor Loopback.
Com esta rápida compreensão de como
nosso aplicativo React foi atualizado para acessar nosso servidor Loopback,
concluímos o exame do servidor Loopback.
Passe mais algum tempo olhando para alguns dos componentes e veja
como eles estão usando as informações obtidas do servidor de Loopback.
Você notará que a maioria dos componentes permanecem exatamente os mesmos de antes,
exceto por algumas modificações menores no componente favorito para obter
as informações do servidor de Loopback
e, em seguida, usá-lo para renderizar a lista de itens favoritos.
Além disso, muitas das alterações estão confinadas ao arquivo ActionCreators.js,
onde atualizamos a busca para usar a URL para
nosso servidor Loopback para poder acessar os vários pontos finais da API REST.
Então, com isso, eu rapidamente demonstrei a você como você pode criar seu aplicativo.
Com esta rápida introdução de como podemos
fazer uso do Loopback dentro de nossa aplicação,
chegamos ao fim deste exercício.