1
00:00:03,650 --> 00:00:10,755
Agora que concluímos o desenvolvimento de um servidor API REST completo usando Loopback,

2
00:00:10,755 --> 00:00:14,639
a próxima pergunta imediata que surgirá em sua mente é,

3
00:00:14,639 --> 00:00:20,090
como adaptamos o aplicativo React para fazer uso deste servidor REST API?

4
00:00:20,090 --> 00:00:23,140
Como fizemos nos casos anteriores,

5
00:00:23,140 --> 00:00:29,190
também precisaremos reconfigurar nosso aplicativo React para fazer uso específico dos

6
00:00:29,190 --> 00:00:31,410
pontos finais da API REST e das

7
00:00:31,410 --> 00:00:37,960
várias solicitações da API REST conforme exposto pelo nosso servidor Loopback.

8
00:00:38,150 --> 00:00:42,075
Para começar este exercício, primeiro,

9
00:00:42,075 --> 00:00:45,275
clone o repositório git que contém

10
00:00:45,275 --> 00:00:51,140
um reaplicativo concluído que se comunica com nosso servidor Loopback.

11
00:00:51,140 --> 00:00:54,760
Então, para fazer isso, vá para sua localização conveniente em seus computadores.

12
00:00:54,760 --> 00:00:58,370
Vou clonar o repositório git

13
00:00:58,370 --> 00:01:00,640
digitando git clone

14
00:01:06,440 --> 00:01:15,270
https://github.com/jmuppala/conFusion-React-Loopback.git

15
00:01:15,270 --> 00:01:18,130
e, em seguida, clonar este repositório git.

16
00:01:19,430 --> 00:01:22,665
Uma vez que o repositório git é clonado,

17
00:01:22,665 --> 00:01:30,780
em seguida, vamos mover para a pasta Confusion-react-loopback e

18
00:01:30,780 --> 00:01:39,355
, em seguida, executar uma instalação yarn para instalar todos os módulos de nó para esta aplicação.

19
00:01:39,355 --> 00:01:42,315
Antes de iniciar o aplicativo React,

20
00:01:42,315 --> 00:01:46,300
verifique se o servidor de Loopback está configurado corretamente.

21
00:01:46,300 --> 00:01:47,705
No servidor Loopback,

22
00:01:47,705 --> 00:01:49,410
na pasta cliente,

23
00:01:49,410 --> 00:01:54,425
mova as imagens que demos como o arquivo images.zip,

24
00:01:54,425 --> 00:01:56,780
descompacte-o e, em seguida, mova as imagens para

25
00:01:56,780 --> 00:02:00,540
a pasta de imagens sob a pasta cliente, como mostrado aqui.

26
00:02:00,540 --> 00:02:08,660
Além disso, renomeie o arquivo root.js como root.jsold ou exclua o arquivo root.js.

27
00:02:08,660 --> 00:02:13,310
Não precisamos mais disso em nosso aplicativo porque queremos garantir que

28
00:02:13,310 --> 00:02:21,050
nosso servidor esteja salvando o conteúdo da pasta do cliente.

29
00:02:21,050 --> 00:02:22,740
Então, para conseguir isso,

30
00:02:22,740 --> 00:02:25,265
vamos abrir o arquivo middleware.json,

31
00:02:25,265 --> 00:02:27,845
e no arquivo middleware.json,

32
00:02:27,845 --> 00:02:32,980
na parte de arquivos,

33
00:02:32,980 --> 00:02:38,435
adicione isso na parte de arquivos do seu arquivo middleware.json.

34
00:02:38,435 --> 00:02:46,320
Então, vamos dizer, Loopback static e params: dollar bank dot dot barra client”,

35
00:02:46,320 --> 00:02:49,595
indicando que seu servidor Loopback estará salvando

36
00:02:49,595 --> 00:02:53,555
conteúdo estático da pasta cliente aqui.

37
00:02:53,555 --> 00:02:55,890
Depois de fazer essas alterações,

38
00:02:55,890 --> 00:03:00,080
você pode iniciar seu servidor.

39
00:03:00,360 --> 00:03:04,100
Certifique-se de que o seu servidor MongoDB

40
00:03:04,100 --> 00:03:07,860
também está em funcionamento antes de iniciar o seu servidor Loopback.

41
00:03:07,860 --> 00:03:14,690
Depois disso, compilaremos e lançaremos nosso cliente React.

42
00:03:14,690 --> 00:03:20,345
Agora, novamente certificando-se de que seu servidor MongoDB e seu servidor Loopback em funcionamento,

43
00:03:20,345 --> 00:03:22,810
vá para o terminal e adicione o terminal.

44
00:03:22,810 --> 00:03:31,405
Digite fio começar a iniciar nosso aplicativo Loopback, o aplicativo React.

45
00:03:31,405 --> 00:03:34,980
Então, quando o aplicativo é iniciado no navegador,

46
00:03:34,980 --> 00:03:40,750
você notará que o aplicativo React baseado em Loopback se comporta

47
00:03:40,750 --> 00:03:46,670
exatamente da mesma forma que as versões anteriores do aplicativo React.

48
00:03:46,670 --> 00:03:48,670
Então, aqui temos a página inicial,

49
00:03:48,670 --> 00:03:52,725
então temos a página Sobre Nós como vemos aqui, em

50
00:03:52,725 --> 00:03:56,770
seguida, a página Menu onde os itens de menu estão listados aqui,

51
00:03:56,770 --> 00:04:00,260
a página Fale Conosco como esperado.

52
00:04:00,260 --> 00:04:04,535
Então deixe-me voltar para a página inicial e, em seguida, fazer login como administrador.

53
00:04:04,535 --> 00:04:11,000
Então, vamos fazer login como administrador

54
00:04:11,000 --> 00:04:14,480
e, em seguida, você será capaz de ver os Meus Favoritos.

55
00:04:14,480 --> 00:04:19,075
Fiz login mais cedo e adicionei um item a Meus Favoritos.

56
00:04:19,075 --> 00:04:24,290
Vamos agora para o Menu e, em seguida, adicionar um segundo item em Meus Favoritos.

57
00:04:24,290 --> 00:04:27,930
Então, aqui vamos adicionar este item aos favoritos,

58
00:04:27,930 --> 00:04:34,850
e então você poderá ver que ambos os itens estão agora em Meus Favoritos.

59
00:04:34,850 --> 00:04:38,194
Da mesma forma, você pode excluir itens dos favoritos.

60
00:04:38,194 --> 00:04:42,020
Então, vamos em frente e excluir isso de nossos Favoritos.

61
00:04:42,020 --> 00:04:43,490
Voltando ao item Menu,

62
00:04:43,490 --> 00:04:47,550
vamos adicionar um comentário a um dos pratos.

63
00:04:47,550 --> 00:04:49,560
Então, deixe-me clicar neste prato,

64
00:04:49,560 --> 00:04:51,855
e então vamos enviar um comentário.

65
00:04:51,855 --> 00:05:01,980
Então, quando enviamos um comentário,

66
00:05:01,980 --> 00:05:05,175
como você pode ver, o comentário é adicionado ao

67
00:05:05,175 --> 00:05:09,710
nosso servidor lá como

68
00:05:09,710 --> 00:05:15,690
esperado e o resultado é mostrado na página Detalhes do prato aqui.

69
00:05:15,690 --> 00:05:18,660
Voltando novamente para a página inicial,

70
00:05:19,260 --> 00:05:24,650
descobrimos que nosso aplicativo React agora é capaz de se comunicar com

71
00:05:24,650 --> 00:05:27,740
o servidor Loopback e, em seguida, obter

72
00:05:27,740 --> 00:05:31,465
os dados do servidor e interagir com o servidor como esperado.

73
00:05:31,465 --> 00:05:35,160
Agora, é claro, a pergunta que surgiria em sua mente é,

74
00:05:35,160 --> 00:05:41,455
como esse aplicativo Loopback está se comunicando com o servidor Loopback?

75
00:05:41,455 --> 00:05:47,610
Agora, este é o lugar onde devemos notar que para Loopback,

76
00:05:47,610 --> 00:05:51,495
uma vez que o servidor Loopback expõe os endpoints da API REST,

77
00:05:51,495 --> 00:05:55,575
meu aplicativo React é capaz de acessar o servidor Loopback nos

78
00:05:55,575 --> 00:05:59,860
pontos finais da API REST correspondentes e, em seguida, se comunicar com o servidor,

79
00:05:59,860 --> 00:06:07,845
como fizemos com nosso próprio servidor REST API que tínhamos implementado anteriormente.

80
00:06:07,845 --> 00:06:15,020
Então, vamos em frente e dar uma olhada no código para o aplicativo React modificado.

81
00:06:15,020 --> 00:06:17,690
Indo para o código do nosso aplicativo,

82
00:06:17,690 --> 00:06:23,200
as principais mudanças que você notará estarão no arquivo ActionCreators.js.

83
00:06:23,200 --> 00:06:27,620
Aqui, você notará que agora estamos nos comunicando com

84
00:06:27,620 --> 00:06:33,930
o servidor de Loopback em vez do servidor de API REST que tínhamos anteriormente.

85
00:06:33,930 --> 00:06:37,550
Então, a busca agora estará acessando o servidor Loopback

86
00:06:37,550 --> 00:06:43,800
no ponto de extremidade api/comments ou no ponto de extremidade api/dish e assim por diante.

87
00:06:43,800 --> 00:06:52,350
Então, todas essas solicitações de busca são atualizadas para acessar nosso servidor Loopback instantâneo.

88
00:06:52,700 --> 00:06:56,215
Então, você notará mudanças semelhantes lá.

89
00:06:56,215 --> 00:07:00,095
Agora, além de fazer login no nosso servidor Loopback,

90
00:07:00,095 --> 00:07:08,190
então vamos para o código de login aqui.

91
00:07:08,190 --> 00:07:09,750
Então, no usuário de login,

92
00:07:09,750 --> 00:07:18,035
estamos postando uma busca para o baseURL e API/customers/endpoint de login

93
00:07:18,035 --> 00:07:25,260
e, em seguida, forneceremos as credenciais no corpo da mensagem de solicitação que sai.

94
00:07:25,260 --> 00:07:27,215
Em resposta a isso,

95
00:07:27,215 --> 00:07:29,830
o servidor enviará de volta a resposta.

96
00:07:29,830 --> 00:07:33,950
A resposta, em seguida, contém as informações de token.

97
00:07:33,950 --> 00:07:38,905
As informações do token são enviadas de volta na forma

98
00:07:38,905 --> 00:07:44,790
do ID da mensagem de resposta.

99
00:07:44,790 --> 00:07:47,325
Então, o ID em si serve como o token.

100
00:07:47,325 --> 00:07:49,545
Então, a mensagem de resposta em si,

101
00:07:49,545 --> 00:07:55,200
eu vou salvar isso no meu armazenamento local, como mostrado aqui.

102
00:07:55,200 --> 00:07:59,320
Nós stringify a mensagem de resposta e, em seguida, armazenamos isso lá.

103
00:07:59,320 --> 00:08:06,945
Esta mensagem de resposta, o Response.ID, contém o token.

104
00:08:06,945 --> 00:08:12,815
Então, o response.id serve como o token da Web JSON para acessar o servidor de Loopback.

105
00:08:12,815 --> 00:08:15,650
Então, é por isso que você vai notar que em

106
00:08:15,650 --> 00:08:19,235
situações em que eu preciso acessar o servidor, então, por exemplo,

107
00:08:19,235 --> 00:08:25,520
vamos notar que quando estamos buscando ou postando seu favorito no servidor,

108
00:08:25,520 --> 00:08:28,550
você vai notar que eu obtenho o token dizendo,

109
00:08:28,550 --> 00:08:30,420
let token, JSON parse,

110
00:08:30,420 --> 00:08:33,990
LocalStorage, GetItem, token aqui

111
00:08:33,990 --> 00:08:38,890
e, em seguida, no campo de cabeçalho de autorização,

112
00:08:38,890 --> 00:08:44,300
eu disse que o campo de autorização para ser token.id aqui como mostrado aqui.

113
00:08:44,300 --> 00:08:51,380
Então, é assim que seremos capazes de nos autenticar para o servidor Loopback.

114
00:08:51,380 --> 00:08:55,450
Então, aqui você vê que ele diz, BaseURL, api/favoritos

115
00:08:55,450 --> 00:08:59,440
e, em seguida, obter a lista de favoritos do servidor

116
00:08:59,440 --> 00:09:03,430
e, em seguida, salvá-lo em nossa loja redux.

117
00:09:03,430 --> 00:09:06,710
Então, bem, grande parte do código permanece o mesmo,

118
00:09:06,710 --> 00:09:09,740
exceto pelas atualizações que fizemos para

119
00:09:09,740 --> 00:09:13,455
acessar os pontos finais da API REST Loopbacks.

120
00:09:13,455 --> 00:09:22,665
Agora, para Angular, temos um Loopback SDK que pode ser construído para nossa aplicação Angular.

121
00:09:22,665 --> 00:09:27,070
Mas para React, não há tal suporte disponível a partir de Loopback,

122
00:09:27,070 --> 00:09:30,460
e por isso temos que recorrer a acessar diretamente

123
00:09:30,460 --> 00:09:34,840
os pontos finais da API REST Loopback como mostrado aqui usando fetch,

124
00:09:34,840 --> 00:09:38,860
e então nós somos capazes de se comunicar com o servidor Loopback.

125
00:09:38,860 --> 00:09:42,115
Com esta rápida compreensão de como

126
00:09:42,115 --> 00:09:48,360
nosso aplicativo React foi atualizado para acessar nosso servidor Loopback,

127
00:09:48,360 --> 00:09:51,795
concluímos o exame do servidor Loopback.

128
00:09:51,795 --> 00:09:56,980
Passe mais algum tempo olhando para alguns dos componentes e veja

129
00:09:56,980 --> 00:10:02,340
como eles estão usando as informações obtidas do servidor de Loopback.

130
00:10:02,340 --> 00:10:06,530
Você notará que a maioria dos componentes permanecem exatamente os mesmos de antes,

131
00:10:06,530 --> 00:10:13,650
exceto por algumas modificações menores no componente favorito para obter

132
00:10:13,650 --> 00:10:18,495
as informações do servidor de Loopback

133
00:10:18,495 --> 00:10:22,700
e, em seguida, usá-lo para renderizar a lista de itens favoritos.

134
00:10:22,700 --> 00:10:29,545
Além disso, muitas das alterações estão confinadas ao arquivo ActionCreators.js,

135
00:10:29,545 --> 00:10:34,260
onde atualizamos a busca para usar a URL para

136
00:10:34,260 --> 00:10:41,125
nosso servidor Loopback para poder acessar os vários pontos finais da API REST.

137
00:10:41,125 --> 00:10:48,460
Então, com isso, eu rapidamente demonstrei a você como você pode criar seu aplicativo.

138
00:10:48,460 --> 00:10:51,590
Com esta rápida introdução de como podemos

139
00:10:51,590 --> 00:10:54,755
fazer uso do Loopback dentro de nossa aplicação,

140
00:10:54,755 --> 00:10:59,110
chegamos ao fim deste exercício.