1
00:00:01,240 --> 00:00:02,660
‫Instrutor: E antes de

2
00:00:02,660 --> 00:00:05,610
‫começar, vamos apenas fazer uma rápida recapitulação da renderização do lado

3
00:00:05,610 --> 00:00:07,440
‫do servidor e do lado do cliente.

4
00:00:07,440 --> 00:00:09,860
‫E também, quero mostrar a vocês neste

5
00:00:09,860 --> 00:00:12,850
‫vídeo o site renderizado do lado do servidor que iremos

6
00:00:12,850 --> 00:00:14,393
‫construir nas próximas horas.

7
00:00:15,670 --> 00:00:18,680
‫Portanto, lembre-se de como na renderização do lado do

8
00:00:18,680 --> 00:00:20,600
‫cliente, a construção real do

9
00:00:20,600 --> 00:00:22,720
‫site acontece no lado do cliente.

10
00:00:22,720 --> 00:00:25,330
‫E para isso, precisamos de uma fonte

11
00:00:25,330 --> 00:00:27,722
‫de dados, que geralmente é uma

12
00:00:27,722 --> 00:00:30,590
‫API que envia dados ao cliente conforme solicitado.

13
00:00:30,590 --> 00:00:32,600
‫Então, é isso que estamos construindo

14
00:00:32,600 --> 00:00:34,490
‫até este ponto do curso.

15
00:00:34,490 --> 00:00:36,750
‫Mas agora que você já domina

16
00:00:36,750 --> 00:00:39,900
‫essa parte, é hora de passar para a renderização do

17
00:00:39,900 --> 00:00:43,030
‫lado do servidor e realmente construir o site no servidor.

18
00:00:43,030 --> 00:00:45,780
‫E o principal aspecto da renderização do lado

19
00:00:45,780 --> 00:00:47,930
‫do servidor é construir o

20
00:00:47,930 --> 00:00:52,140
‫HTML real, basicamente porque é onde todos os nossos dados serão armazenados.

21
00:00:52,140 --> 00:00:54,480
‫E para fazer isso, usamos

22
00:00:54,480 --> 00:00:56,090
‫modelos, que têm

23
00:00:56,090 --> 00:00:59,960
‫espaços reservados onde injetaremos nossos dados conforme necessário.

24
00:00:59,960 --> 00:01:02,200
‫Assim, sempre que houver uma solicitação,

25
00:01:02,200 --> 00:01:04,170
‫digamos para a página

26
00:01:04,170 --> 00:01:07,172
‫inicial, obtemos os dados necessários do banco de

27
00:01:07,172 --> 00:01:09,280
‫dados, injetamos em um modelo,

28
00:01:09,280 --> 00:01:11,410
‫que produzirá HTML e, por

29
00:01:11,410 --> 00:01:13,610
‫fim, enviaremos esse HTML, junto

30
00:01:13,610 --> 00:01:15,890
‫com CSS e JavaScript e arquivos

31
00:01:15,890 --> 00:01:18,990
‫de imagem , de volta para o cliente.

32
00:01:18,990 --> 00:01:21,320
‫Muito simples, certo?

33
00:01:21,320 --> 00:01:24,290
‫Agora, ainda podemos usar a API para

34
00:01:24,290 --> 00:01:26,640
‫algumas das coisas no

35
00:01:26,640 --> 00:01:29,840
‫front end e, na verdade, também faremos isso.

36
00:01:29,840 --> 00:01:32,600
‫Ok, de qualquer maneira, deixe-me mostrar o

37
00:01:32,600 --> 00:01:35,150
‫que realmente vamos construir nesta seção.

38
00:01:36,690 --> 00:01:39,900
‫Então, este é o site final renderizado do Natours, e está

39
00:01:39,900 --> 00:01:44,000
‫realmente ativo em www. natours. dev, e se você

40
00:01:44,000 --> 00:01:45,360
‫quiser, vá em frente

41
00:01:45,360 --> 00:01:46,193
‫e abra

42
00:01:46,193 --> 00:01:48,150
‫esta página em seu navegador agora

43
00:01:48,150 --> 00:01:49,500
‫e dê uma olhada.

44
00:01:49,500 --> 00:01:52,360
‫Você terá que especificar este W-W-W, ok?

45
00:01:52,360 --> 00:01:54,320
‫Caso contrário, não vai funcionar.

46
00:01:54,320 --> 00:01:56,760
‫De qualquer forma, aqui você vê todos os

47
00:01:56,760 --> 00:01:58,060
‫tours com os

48
00:01:58,060 --> 00:02:00,020
‫quais trabalhamos enquanto construíamos nossa API,

49
00:02:00,020 --> 00:02:02,940
‫e todos os dados aqui são exatamente os mesmos.

50
00:02:02,940 --> 00:02:06,133
‫Então, todos os nossos nove tours estão aqui,

51
00:02:07,010 --> 00:02:07,920
‫certo,

52
00:02:07,920 --> 00:02:09,800
‫e novamente, isso é

53
00:02:09,800 --> 00:02:12,700
‫exatamente o que iremos construir nesta seção.

54
00:02:12,700 --> 00:02:16,000
‫Vamos dar uma olhada em uma das páginas de detalhes aqui.

55
00:02:16,000 --> 00:02:18,100
‫Então, o Park Camper,

56
00:02:18,100 --> 00:02:21,170
‫e de fato, você tem a classificação média.

57
00:02:21,170 --> 00:02:22,773
‫Você tem todos os guias turísticos.

58
00:02:24,030 --> 00:02:25,600
‫Você tem então algumas fotos.

59
00:02:25,600 --> 00:02:29,870
‫Você tem todos os locais e exibidos em um mapa, na verdade.

60
00:02:29,870 --> 00:02:31,610
‫E você também tem a revisão.

61
00:02:31,610 --> 00:02:34,060
‫E essas, novamente, são as análises

62
00:02:34,060 --> 00:02:37,380
‫reais vindas de usuários reais no banco de dados.

63
00:02:37,380 --> 00:02:39,940
‫Então, se você fosse conferir esse passeio

64
00:02:39,940 --> 00:02:41,363
‫aqui no Postman,

65
00:02:43,500 --> 00:02:46,250
‫digamos, então vamos pegar todos os passeios aqui

66
00:02:47,980 --> 00:02:51,100
‫primeiro apenas para obter a identificação do Park Camper.

67
00:02:51,100 --> 00:02:52,393
‫Então, Sea Explorer,

68
00:02:55,770 --> 00:02:57,003
‫City Wanderer,

69
00:02:58,180 --> 00:02:59,880
‫então onde é isso?

70
00:02:59,880 --> 00:03:01,233
‫Ah, aqui está o Park Camper.

71
00:03:02,170 --> 00:03:04,123
‫Então, se fizermos esse passeio agora, você

72
00:03:08,950 --> 00:03:10,650
‫verá que, por exemplo, os

73
00:03:10,650 --> 00:03:12,690
‫guias turísticos são exatamente as mesmas pessoas.

74
00:03:12,690 --> 00:03:15,123
‫Então, há Aarav, Ben e Kate, e

75
00:03:16,130 --> 00:03:19,410
‫então, de fato, eles são as pessoas que na verdade

76
00:03:19,410 --> 00:03:21,080
‫são os guias turísticos.

77
00:03:21,080 --> 00:03:22,730
‫Então, esses

78
00:03:22,730 --> 00:03:25,210
‫três, e de novo, as

79
00:03:25,210 --> 00:03:29,890
‫resenhas também são as da Ayla, da Laura, da Isabel

80
00:03:29,890 --> 00:03:33,690
‫e do Alexander, além dessas outras ali também.

81
00:03:33,690 --> 00:03:36,640
‫E então, se verificarmos os comentários aqui,

82
00:03:36,640 --> 00:03:38,807
‫então, de fato, eles

83
00:03:38,807 --> 00:03:43,090
‫estão vindo de Ayla e Laura e Isabel e ...

84
00:03:43,090 --> 00:03:46,150
‫Sim, realmente, você vê que esses dados

85
00:03:46,150 --> 00:03:48,520
‫são realmente os dados subjacentes

86
00:03:48,520 --> 00:03:53,023
‫a partir dos quais este site é gerado dinamicamente, certo?

87
00:03:54,140 --> 00:03:56,260
‫Então, também podemos fazer o login, e

88
00:03:56,260 --> 00:03:57,890
‫qualquer um dos usuários que

89
00:03:57,890 --> 00:04:00,353
‫tivermos no banco de dados trabalhará para isso.

90
00:04:01,750 --> 00:04:04,723
‫Então, se dermos uma olhada em um de nossos usuários,

91
00:04:06,430 --> 00:04:08,620
‫por exemplo, vamos usar Steve aqui, que

92
00:04:08,620 --> 00:04:10,593
‫na verdade é um guia turístico.

93
00:04:12,690 --> 00:04:14,093
‫Então, pegamos o

94
00:04:16,600 --> 00:04:17,630
‫exemplo, usamos

95
00:04:17,630 --> 00:04:19,563
‫o e-mail, e a

96
00:04:21,010 --> 00:04:23,010
‫senha é, como sempre, test1234.

97
00:04:23,010 --> 00:04:25,070
‫Ok, então nós logamos, e

98
00:04:25,070 --> 00:04:26,880
‫isso realmente acontece nos bastidores

99
00:04:26,880 --> 00:04:28,390
‫usando nossa API.

100
00:04:28,390 --> 00:04:31,120
‫Ok, e agora, aqui temos Steve.

101
00:04:31,120 --> 00:04:33,663
‫Podemos até abrir sua conta.

102
00:04:35,620 --> 00:04:37,780
‫Podemos então alterar a senha

103
00:04:37,780 --> 00:04:39,720
‫e isso, novamente, acontecerá

104
00:04:39,720 --> 00:04:42,840
‫nos bastidores, usando o endpoint de API exato

105
00:04:42,840 --> 00:04:46,083
‫que construímos para um usuário que altera sua senha.

106
00:04:47,830 --> 00:04:49,610
‫Você também pode verificar as reservas

107
00:04:49,610 --> 00:04:51,460
‫desse usuário em particular, que, neste

108
00:04:51,460 --> 00:04:53,180
‫caso, não deveria ser

109
00:04:53,180 --> 00:04:55,170
‫nenhuma, porque ele é um guia turístico.

110
00:04:55,170 --> 00:04:56,773
‫Então, você vê que está vazio aqui, mas

111
00:04:57,900 --> 00:04:58,970
‫de qualquer forma ...

112
00:04:59,830 --> 00:05:01,520
‫Sim, é isso que

113
00:05:01,520 --> 00:05:03,800
‫eu queria mostrar a você porque é

114
00:05:03,800 --> 00:05:06,130
‫isso que faremos no restante desta seção.

115
00:05:06,130 --> 00:05:07,980
‫Espero que você esteja animado com

116
00:05:07,980 --> 00:05:09,000
‫isso, assim como

117
00:05:09,000 --> 00:05:10,573
‫eu, e agora vamos começar.