1
00:00:01,160 --> 00:00:02,570
‫Instrutor: Na

2
00:00:02,570 --> 00:00:05,280
‫aula anterior, enquanto falava sobre front-end

3
00:00:05,280 --> 00:00:08,710
‫e back-end, mencionei algumas vezes sites simples e

4
00:00:08,710 --> 00:00:11,370
‫estáticos e dinâmicos, ou aplicativos,

5
00:00:11,370 --> 00:00:14,600
‫mas sem realmente definir o que são.

6
00:00:14,600 --> 00:00:17,870
‫Então, neste vídeo, eu queria esclarecer essas coisas e

7
00:00:17,870 --> 00:00:20,620
‫também falar sobre APIs, a fim de

8
00:00:20,620 --> 00:00:23,620
‫trazer todos esses conceitos para o quadro geral do

9
00:00:23,620 --> 00:00:26,013
‫desenvolvimento back-end da web em geral.

10
00:00:27,460 --> 00:00:30,120
‫Portanto, vamos começar falando sobre sites

11
00:00:30,120 --> 00:00:32,410
‫estáticos e sites dinâmicos.

12
00:00:32,410 --> 00:00:34,920
‫Então, um site estático, ou um site

13
00:00:34,920 --> 00:00:36,630
‫simples, como chamei no

14
00:00:36,630 --> 00:00:39,070
‫último vídeo, é quando um desenvolvedor carrega

15
00:00:39,070 --> 00:00:43,640
‫os arquivos finais prontos para serem veiculados de um site no servidor web.

16
00:00:43,640 --> 00:00:46,580
‫Esses arquivos geralmente contêm HTML, CSS,

17
00:00:46,580 --> 00:00:50,320
‫JavaScript, imagens e muito mais, e como eu disse,

18
00:00:50,320 --> 00:00:53,970
‫esses são os arquivos exatos que o servidor enviará

19
00:00:53,970 --> 00:00:57,090
‫posteriormente ao navegador quando o site for solicitado.

20
00:00:57,090 --> 00:00:59,040
‫O navegador pegará esses

21
00:00:59,040 --> 00:01:01,320
‫arquivos e os renderizará como estão.

22
00:01:01,320 --> 00:01:04,320
‫Isso significa que não há trabalho feito no servidor,

23
00:01:04,320 --> 00:01:07,510
‫não há código de back-end e também não há nenhum

24
00:01:07,510 --> 00:01:08,730
‫aplicativo em execução.

25
00:01:08,730 --> 00:01:09,563
‫OK?

26
00:01:09,563 --> 00:01:12,900
‫Então, é apenas um servidor web estático servindo arquivos

27
00:01:12,900 --> 00:01:15,670
‫estáticos, exatamente como mencionei no último vídeo.

28
00:01:15,670 --> 00:01:17,460
‫Agora, você pode pensar, espere,

29
00:01:17,460 --> 00:01:19,233
‫quando há JavaScript

30
00:01:19,233 --> 00:01:21,290
‫na página, geralmente há efeitos dinâmicos,

31
00:01:21,290 --> 00:01:23,610
‫como animações e outras coisas, certo?

32
00:01:23,610 --> 00:01:26,480
‫Bem, essa dinâmica que você quer dizer é

33
00:01:26,480 --> 00:01:28,050
‫uma dinâmica diferente.

34
00:01:28,050 --> 00:01:31,580
‫É apenas no contexto de desenvolvimento de front-end.

35
00:01:31,580 --> 00:01:34,370
‫No contexto do navegador, dinâmico não tem nada a

36
00:01:34,370 --> 00:01:37,200
‫ver com os efeitos em uma página ou coisas que se

37
00:01:37,200 --> 00:01:40,570
‫movem, mas com a maneira como os sites são gerados nos servidores.

38
00:01:40,570 --> 00:01:41,870
‫OK?

39
00:01:41,870 --> 00:01:45,210
‫Portanto, os sites dinâmicos são diferentes dos sites estáticos

40
00:01:45,210 --> 00:01:47,440
‫porque geralmente são construídos no

41
00:01:47,440 --> 00:01:50,090
‫servidor cada vez que uma nova solicitação chega.

42
00:01:50,090 --> 00:01:51,740
‫Então, como vimos no

43
00:01:51,740 --> 00:01:55,040
‫último vídeo, sites dinâmicos geralmente contêm um banco de

44
00:01:55,040 --> 00:01:57,410
‫dados, então há também um aplicativo

45
00:01:57,410 --> 00:02:01,400
‫em execução, como um Node. js app, que busca dados

46
00:02:01,400 --> 00:02:04,340
‫do banco de dados e, em seguida, junto com

47
00:02:04,340 --> 00:02:07,730
‫um modelo predefinido, cria cada página que o usuário solicita dinamicamente

48
00:02:07,730 --> 00:02:10,670
‫com base nos dados provenientes do banco de dados.

49
00:02:10,670 --> 00:02:13,360
‫Portanto, cada vez que um navegador

50
00:02:13,360 --> 00:02:18,360
‫solicita uma página, essa página é construída como arquivos HTML, CSS e JavaScript,

51
00:02:18,560 --> 00:02:21,640
‫que serão enviados de volta ao navegador.

52
00:02:21,640 --> 00:02:23,790
‫Todo esse processo às vezes é chamado

53
00:02:23,790 --> 00:02:25,860
‫de renderização do lado do servidor.

54
00:02:25,860 --> 00:02:28,540
‫Então, novamente, é por isso que é chamado de

55
00:02:28,540 --> 00:02:31,560
‫dinâmico, porque o site pode mudar o tempo todo de acordo

56
00:02:31,560 --> 00:02:33,700
‫com o conteúdo que está no banco

57
00:02:33,700 --> 00:02:36,520
‫de dados ou com as ações do usuário no site.

58
00:02:36,520 --> 00:02:38,870
‫Por exemplo, se você entrou no Twitter,

59
00:02:38,870 --> 00:02:41,140
‫ele irá mostrar uma página

60
00:02:41,140 --> 00:02:43,510
‫completamente diferente daquela quando você saiu, certo?

61
00:02:43,510 --> 00:02:45,920
‫E também vai mostrar uma página diferente amanhã

62
00:02:45,920 --> 00:02:48,600
‫do que hoje porque há novos tweets, portanto,

63
00:02:48,600 --> 00:02:50,938
‫novos dados no banco de dados.

64
00:02:50,938 --> 00:02:54,330
‫E é disso que se tratam os sites dinâmicos.

65
00:02:54,330 --> 00:02:56,860
‫Agora, se você, por exemplo, for para Jonas. io, e você

66
00:02:56,860 --> 00:02:58,223
‫deveria, aliás, então você

67
00:02:59,150 --> 00:03:01,130
‫sempre verá o mesmo conteúdo, o

68
00:03:01,130 --> 00:03:03,680
‫mesmo site, não importa quando você o visita ou

69
00:03:03,680 --> 00:03:05,060
‫o que você faz lá.

70
00:03:05,060 --> 00:03:08,870
‫E isso significa que é uma página estática, certo?

71
00:03:08,870 --> 00:03:10,950
‫Essa diferença faz sentido?

72
00:03:10,950 --> 00:03:14,200
‫Agora, às vezes usamos o termo sites dinâmicos e às

73
00:03:14,200 --> 00:03:16,450
‫vezes o termo aplicativo da web,

74
00:03:16,450 --> 00:03:18,790
‫mas eles são quase a mesma coisa.

75
00:03:18,790 --> 00:03:21,320
‫Normalmente, quando as pessoas se referem a

76
00:03:21,320 --> 00:03:24,450
‫aplicativos da web, elas se referem a um site

77
00:03:24,450 --> 00:03:27,180
‫dinâmico com algumas funcionalidades, como fazer login, criar

78
00:03:27,180 --> 00:03:30,540
‫perfis de usuário, pesquisar coisas e coisas assim em geral.

79
00:03:30,540 --> 00:03:34,220
‫Os sites são, por exemplo, algo como um blog WordPress.

80
00:03:34,220 --> 00:03:36,380
‫Eles ainda são gerados dinamicamente,

81
00:03:36,380 --> 00:03:39,793
‫mas não podemos fazer nada além de lê-los, certo?

82
00:03:40,790 --> 00:03:44,510
‫E, tradicionalmente, os sites estáticos e dinâmicos eram os únicos dois

83
00:03:44,510 --> 00:03:47,300
‫tipos de sites, mas nos últimos anos,

84
00:03:47,300 --> 00:03:49,840
‫graças ao quão poderosos os navegadores

85
00:03:49,840 --> 00:03:53,070
‫se tornaram do lado do cliente, vemos cada vez

86
00:03:53,070 --> 00:03:55,930
‫mais sites que são, basicamente, baseados em APIs.

87
00:03:55,930 --> 00:03:57,580
‫Então, vamos aprender como eles funcionam e

88
00:03:57,580 --> 00:04:00,193
‫como podemos usar o Node. js para alimentá-los.

89
00:04:02,060 --> 00:04:04,430
‫Vamos apenas manter os sites dinâmicos aqui

90
00:04:04,430 --> 00:04:07,380
‫no slide para que possamos comparar melhor os dois.

91
00:04:07,380 --> 00:04:10,610
‫Então, assim como acontece com os sites dinâmicos, temos

92
00:04:10,610 --> 00:04:13,880
‫um banco de dados aqui e um aplicativo que busca

93
00:04:13,880 --> 00:04:16,020
‫dados do banco de dados cada

94
00:04:16,020 --> 00:04:20,090
‫vez que um cliente faz uma solicitação, então, nesse sentido, um site

95
00:04:20,090 --> 00:04:23,210
‫baseado em API é bastante semelhante a um site

96
00:04:23,210 --> 00:04:25,150
‫dinâmico local na rede Internet.

97
00:04:25,150 --> 00:04:27,820
‫Portanto, ambos funcionam dinamicamente.

98
00:04:27,820 --> 00:04:31,130
‫Agora, a grande diferença aqui é que com uma

99
00:04:31,130 --> 00:04:33,890
‫API, enviamos apenas os dados para o

100
00:04:33,890 --> 00:04:36,340
‫navegador, geralmente no formato de

101
00:04:36,340 --> 00:04:38,990
‫dados JSON, e não o site inteiro.

102
00:04:38,990 --> 00:04:42,090
‫Portanto, novamente, apenas os dados são enviados ao cliente e

103
00:04:42,090 --> 00:04:44,670
‫não o site pronto para ser exibido.

104
00:04:44,670 --> 00:04:49,670
‫Então, sem HTML, sem CSS, apenas os dados JSON, certo?

105
00:04:49,860 --> 00:04:52,370
‫Então, ao construir sites baseados em

106
00:04:52,370 --> 00:04:54,670
‫API, há sempre essas

107
00:04:54,670 --> 00:04:58,100
‫duas etapas, construir uma API e, em seguida,

108
00:04:58,100 --> 00:05:01,110
‫consumir a API no lado do cliente

109
00:05:01,110 --> 00:05:04,850
‫e, a propósito, API significa interface de programação de

110
00:05:04,850 --> 00:05:07,800
‫aplicativo e, em um nível muito alto,

111
00:05:07,800 --> 00:05:11,260
‫é basicamente um software que pode ser usado por

112
00:05:11,260 --> 00:05:15,340
‫outro software para, basicamente, permitir que os aplicativos se comuniquem.

113
00:05:15,340 --> 00:05:17,220
‫E falaremos um pouco mais profundamente

114
00:05:17,220 --> 00:05:21,160
‫sobre o que realmente é uma API assim que começarmos a construir uma.

115
00:05:21,160 --> 00:05:24,750
‫Enfim, agora sobre o lado do cliente que acabei de mencionar.

116
00:05:24,750 --> 00:05:28,300
‫Então, é aqui que o site é realmente

117
00:05:28,300 --> 00:05:31,470
‫montado, conectando os dados que recebemos em

118
00:05:31,470 --> 00:05:35,500
‫algum tipo de modelo, geralmente usando alguma estrutura de front-end

119
00:05:35,500 --> 00:05:38,600
‫sofisticada como React, Angular ou Vue.

120
00:05:38,600 --> 00:05:40,540
‫Não vou entrar em detalhes

121
00:05:40,540 --> 00:05:43,170
‫aqui porque isso seria para um curso de front-end,

122
00:05:43,170 --> 00:05:46,080
‫mas em termos muito gerais, é assim que funciona.

123
00:05:46,080 --> 00:05:49,200
‫Então, você vê que ao construir um site com

124
00:05:49,200 --> 00:05:52,080
‫base em API, a fase de construção

125
00:05:52,080 --> 00:05:54,970
‫do site mudou do back-end para o front-end, certo?

126
00:05:54,970 --> 00:05:59,410
‫Ou também podemos dizer que mudou do servidor para o cliente.

127
00:05:59,410 --> 00:06:01,120
‫É por isso que muitas

128
00:06:01,120 --> 00:06:04,560
‫vezes você verá sites dinâmicos sendo chamados de renderizados do lado

129
00:06:04,560 --> 00:06:07,730
‫do servidor, porque na verdade eles são construídos no servidor.

130
00:06:07,730 --> 00:06:10,980
‫Por outro lado, sites baseados em API são

131
00:06:10,980 --> 00:06:15,360
‫frequentemente chamados de renderizados do lado do cliente, o que faz sentido, certo?

132
00:06:15,360 --> 00:06:17,200
‫Portanto, para nós, desenvolvedores de

133
00:06:17,200 --> 00:06:20,750
‫back-end, é realmente muito mais fácil apenas construir uma API

134
00:06:20,750 --> 00:06:24,460
‫e deixar que o pessoal do front-end construa um site, certo?

135
00:06:24,460 --> 00:06:27,760
‫E, de fato, o Node é uma ferramenta absolutamente perfeita

136
00:06:27,760 --> 00:06:31,510
‫para construir APIs, e é muito comumente usada para isso, mas

137
00:06:31,510 --> 00:06:33,610
‫é claro, também é perfeitamente

138
00:06:33,610 --> 00:06:37,210
‫adequada para construir um site dinâmico renderizado no lado do servidor.

139
00:06:37,210 --> 00:06:40,730
‫Portanto, neste curso, faremos as duas versões, começando com

140
00:06:40,730 --> 00:06:43,960
‫a API e, ao final do curso,

141
00:06:43,960 --> 00:06:47,870
‫também construindo um site renderizado usando exatamente os mesmos dados.

142
00:06:47,870 --> 00:06:51,670
‫Escolhi fazer ambos porque acredito que é extremamente importante que você

143
00:06:51,670 --> 00:06:54,960
‫saiba como construir uma API e um site renderizado

144
00:06:54,960 --> 00:06:56,710
‫do lado do servidor.

145
00:06:58,150 --> 00:06:59,840
‫E agora, para terminar este

146
00:06:59,840 --> 00:07:02,020
‫vídeo, gostaria de mencionar rapidamente que as

147
00:07:02,020 --> 00:07:05,630
‫APIs que construímos com o Node, ou realmente, qualquer outra linguagem, podem,

148
00:07:05,630 --> 00:07:07,150
‫é claro, ser

149
00:07:07,150 --> 00:07:09,930
‫consumidas por outros clientes além do navegador, o que

150
00:07:09,930 --> 00:07:12,920
‫é uma grande vantagem de construir uma API em vez

151
00:07:12,920 --> 00:07:15,350
‫de um site renderizado do lado do servidor.

152
00:07:15,350 --> 00:07:17,320
‫Então, digamos que construamos

153
00:07:17,320 --> 00:07:22,320
‫uma API de exemplo no jonas. io / api / myCourseData.

154
00:07:22,380 --> 00:07:27,350
‫Portanto, sempre que acessarmos essa URL, o servidor enviará de volta dados sobre os

155
00:07:27,350 --> 00:07:28,980
‫cursos de desenvolvimento

156
00:07:28,980 --> 00:07:31,130
‫web que estou ministrando no momento.

157
00:07:31,130 --> 00:07:33,970
‫Até agora, falamos apenas sobre solicitações

158
00:07:33,970 --> 00:07:38,060
‫provenientes de navegadores da web, mas também podemos solicitar

159
00:07:38,060 --> 00:07:41,060
‫e consumir os mesmos dados JSON

160
00:07:41,060 --> 00:07:44,860
‫em um aplicativo iOS nativo ou Android, ou

161
00:07:44,860 --> 00:07:47,890
‫mesmo em aplicativos de desktop para Mac

162
00:07:47,890 --> 00:07:50,440
‫ou para computadores Windows.

163
00:07:50,440 --> 00:07:54,130
‫As possibilidades são realmente infinitas quando construímos uma API porque simplesmente

164
00:07:54,130 --> 00:07:56,640
‫temos uma fonte de dados, que pode

165
00:07:56,640 --> 00:07:59,380
‫então ser solicitada e usada em qualquer lugar,

166
00:07:59,380 --> 00:08:00,880
‫não apenas nos navegadores.

167
00:08:00,880 --> 00:08:03,210
‫Esse é o tipo de problema quando construímos

168
00:08:03,210 --> 00:08:04,520
‫um site dinâmico normal.

169
00:08:04,520 --> 00:08:07,700
‫Retornamos arquivos HTML, CSS e

170
00:08:07,700 --> 00:08:10,960
‫JavaScript, e apenas os navegadores podem realmente

171
00:08:10,960 --> 00:08:14,470
‫entendê-los, então ficamos presos naquela plataforma única.

172
00:08:14,470 --> 00:08:16,840
‫E isso pode não ser um

173
00:08:16,840 --> 00:08:19,860
‫problema em muitos casos, mas para produtos complexos que

174
00:08:19,860 --> 00:08:22,350
‫exigem muitos aplicativos e, em seguida, sites

175
00:08:22,350 --> 00:08:25,450
‫e aplicativos da web, geralmente, uma API é sempre necessária.

176
00:08:25,450 --> 00:08:29,530
‫Então, neste exemplo em Jonas. Io, eu poderia construir essa

177
00:08:29,530 --> 00:08:32,820
‫API e, em seguida, construir um site com base em API

178
00:08:32,820 --> 00:08:35,020
‫e alguns aplicativos e obter meus dados

179
00:08:35,020 --> 00:08:37,830
‫sobre todos esses clientes de apenas uma fonte, certo?

180
00:08:37,830 --> 00:08:41,100
‫E algumas pessoas ou equipes nem mesmo têm nenhum

181
00:08:41,100 --> 00:08:44,240
‫cliente próprio e simplesmente vendem o acesso à

182
00:08:44,240 --> 00:08:46,120
‫sua API para terceiros

183
00:08:46,120 --> 00:08:49,560
‫que irão consumir essas APIs e não as suas.

184
00:08:49,560 --> 00:08:51,680
‫Portanto, existem negócios inteiros construídos em

185
00:08:51,680 --> 00:08:54,830
‫torno dessa filosofia de apenas vender uma API para

186
00:08:54,830 --> 00:08:56,563
‫outros desenvolvedores ou empresas.

187
00:08:57,520 --> 00:09:00,670
‫De qualquer forma, espero que com este slide final o

188
00:09:00,670 --> 00:09:03,740
‫conceito e a razão e, tipo de filosofia

189
00:09:03,740 --> 00:09:07,380
‫por trás da construção de APIs agora tenham ficado claros para você.

190
00:09:07,380 --> 00:09:09,313
‫Então, vamos seguir em frente.