1
00:00:00,360 --> 00:00:01,320
Bem vindo de volta.

2
00:00:01,680 --> 00:00:05,790
Então este vídeo representa um marco bastante importante nesta classe.

3
00:00:05,790 --> 00:00:11,580
Estamos passando de tecnologias puramente front-end para nosso primeiro gosto de desenvolvimento de back-end e web.

4
00:00:11,580 --> 00:00:13,940
Então vamos continuar usando tudo o que aprendemos.

5
00:00:13,950 --> 00:00:19,230
É o JavaScript do CSSA do G-mail, mas vamos aprender algumas novas tecnologias que nos ajudam

6
00:00:19,230 --> 00:00:20,880
a fazer aplicações web completas.

7
00:00:20,880 --> 00:00:25,300
Claro que antes de começar a escrever um código, temos algumas outras coisas de que precisamos cuidar.

8
00:00:25,410 --> 00:00:27,840
Começaremos por analisar como funciona a Internet.

9
00:00:27,840 --> 00:00:32,310
Então, vamos falar sobre estática vs. sites dinâmicos e onde o front-end se encaixa

10
00:00:32,310 --> 00:00:37,650
e onde volta e se encaixa e, principalmente, falaremos mais detalhadamente sobre as costas e tecnologias específicas com as

11
00:00:37,650 --> 00:00:38,580
quais vamos trabalhar.

12
00:00:39,030 --> 00:00:43,660
OK, então comecemos com a versão de 60 segundos de como a Internet funciona.

13
00:00:43,980 --> 00:00:49,890
Quando chegamos a um Euro aqui para mim com os cursos de ponto com slash, há algumas coisas que acontecem nos bastidores.

14
00:00:50,790 --> 00:00:56,130
A primeira coisa é que nosso computador precisa descobrir o endereço IP para enviar um pedido.

15
00:00:56,490 --> 00:01:03,180
Então, leva-nos você R-OH para ler, ele obtém o endereço IP correto, que é o localizador exclusivo para

16
00:01:03,180 --> 00:01:04,840
você e para o servidor.

17
00:01:05,130 --> 00:01:10,050
Então, uma vez que temos esse endereço IP e a solicitação New Age TTP é enviada.

18
00:01:10,290 --> 00:01:14,910
Então, um pedido é enviado para esse endereço IP e não é apenas um pedido em branco.

19
00:01:14,910 --> 00:01:16,800
Tem um monte de informações.

20
00:01:16,800 --> 00:01:20,830
Vamos falar mais sobre os detalhes específicos que estão nesse pedido no próximo vídeo.

21
00:01:21,090 --> 00:01:26,220
Mas a versão curta é que tem coisas como seu próprio endereço de IP o tempo que você está

22
00:01:26,220 --> 00:01:27,910
enviando para esse tipo de solicitação.

23
00:01:27,990 --> 00:01:31,920
E, o mais importante, a página específica que você está pedindo.

24
00:01:31,950 --> 00:01:34,710
Então, neste caso, estamos pedindo a página do curso.

25
00:01:34,830 --> 00:01:42,510
Então, isso está codificado no pedido que é enviado ao meu lado, obtém esse pedido e descobre o que

26
00:01:42,510 --> 00:01:43,010
fazer.

27
00:01:43,140 --> 00:01:44,810
E então responde com alguma coisa.

28
00:01:45,030 --> 00:01:51,250
Então, se estamos pedindo cursos Slash, o servidor Tomy descobrirá o que precisa seguir na página

29
00:01:51,300 --> 00:01:52,230
do curso.

30
00:01:52,230 --> 00:01:58,380
Então eu assumiria que ele entra em um banco de dados e agarra um monte de cursos

31
00:01:58,380 --> 00:02:05,310
e imagens compila-os neste longo arquivo HTL com algum sucesso e algum javascript e, finalmente, ele é finalmente enviado

32
00:02:05,310 --> 00:02:13,580
de volta para mim no meu computador tem resposta HTP e, em seguida, ele obtém para um navegador cujo trabalho é renderizar a página.

33
00:02:13,860 --> 00:02:18,870
Então, este é o aspecto do conteúdo atual antes que nosso navegador cuide dele e o processe para

34
00:02:18,870 --> 00:02:19,880
nós como seres humanos.

35
00:02:20,010 --> 00:02:24,880
Isto é o que o computador vê apenas o sucesso da HMO em javascript.

36
00:02:25,050 --> 00:02:31,320
Para resumir tudo isso quando eu vou para um URL e eu acertei, entre primeiro o que acontece

37
00:02:31,320 --> 00:02:39,330
é que precisamos encontrar o endereço IP para esse domínio e, em seguida, enviamos uma solicitação HTP solicitando uma página específica para esse

38
00:02:39,330 --> 00:02:42,600
endereço IP e, em seguida, o servidor recebe esse pedido.

39
00:02:42,750 --> 00:02:45,310
Ele descobre o que fazer com o que responder.

40
00:02:45,570 --> 00:02:51,300
E então responde de volta com H. M. SS em javascript.

41
00:02:51,300 --> 00:02:56,510
A próxima coisa que quero discutir é a diferença entre páginas web estáticas e dinâmicas.

42
00:02:56,610 --> 00:03:00,960
Nós conversamos sobre isso também em um dos primeiros vídeos sobre como funciona a internet.

43
00:03:00,960 --> 00:03:05,100
Eu quero fazer uma recapitulação rápida, porque é importante para a discussão final que estamos prestes a ter.

44
00:03:06,330 --> 00:03:13,560
Portanto, existem dois tipos diferentes de páginas estáticas de páginas da Web e páginas dinâmicas. As páginas da web dinâmicas são

45
00:03:13,710 --> 00:03:19,860
sites compilados no lado do servidor onde o servidor está juntando ou construindo uma página da Web antes

46
00:03:19,890 --> 00:03:22,530
de ser enviada de volta como uma resposta.

47
00:03:22,530 --> 00:03:25,610
Tudo o que escrevemos até agora tem sido estático.

48
00:03:25,650 --> 00:03:31,330
Então, mesmo assim, não parece que seja estático porque há conteúdo dinâmico.

49
00:03:31,350 --> 00:03:35,000
Recebemos cores aleatórias de cada vez e é um jogo.

50
00:03:35,010 --> 00:03:42,030
Não parece tão estático quanto o exemplo da página da Web do restaurante que usei no vídeo anterior

51
00:03:42,030 --> 00:03:48,030
sobre este assunto, mas ainda é estático porque é o mesmo HMO C Ss no javascript.

52
00:03:48,060 --> 00:03:49,160
Toda vez.

53
00:03:49,440 --> 00:03:54,630
Sim, parece diferente porque temos algumas cores aleatórias, mas são as mesmas peças fundamentais

54
00:03:54,630 --> 00:03:58,530
sempre que estamos abrindo no navegador em um site dinâmico.

55
00:03:58,560 --> 00:04:03,900
Podemos ter diferentes javascript ou diferentes C Ss diferentes de cada equipe que está sendo enviada de volta a

56
00:04:03,900 --> 00:04:04,620
cada vez.

57
00:04:04,980 --> 00:04:11,100
Então, quando vamos a algo como Reddit, por exemplo, e atualizo a página, posso obter conteúdo diferente

58
00:04:11,100 --> 00:04:11,580
aqui.

59
00:04:11,820 --> 00:04:17,790
E, na verdade, faço todas as vezes que você está fresco na página, você recebe novos conteúdos e, portanto, há um banco

60
00:04:17,790 --> 00:04:19,330
de dados que está compilando coisas.

61
00:04:19,380 --> 00:04:24,960
Há alguns códigos que verificam se você está logado e, se você estiver logado, não mostrará um

62
00:04:24,960 --> 00:04:28,020
formulário aqui, mas isso lhe mostrará um botão de logout.

63
00:04:28,320 --> 00:04:34,360
E se você não está logado, mostra-lhe um formulário e mostra que você inicia sessão ou assina os botões.

64
00:04:35,370 --> 00:04:42,210
o mesmo H G M L C Ss no javascript que me enviou sempre que o servidor realmente está decidindo o que devolver.

65
00:04:42,210 --> 00:04:44,430
Portanto, esta página da web não é exatamente

66
00:04:44,430 --> 00:04:51,990
Ao construir uma página da Web antes de enviá-la para mim, em relação a este site, é o mesmo conteúdo

67
00:04:51,990 --> 00:04:53,540
exato a cada momento.

68
00:04:56,320 --> 00:04:59,260
OK, então vamos focar um pouco mais na parte de trás agora.

69
00:04:59,350 --> 00:05:06,940
Então, este diagrama é de uma pilha genérica e a pilha é um termo que é usado para se referir a todas

70
00:05:07,210 --> 00:05:09,800
as tecnologias que uma determinada aplicação web usa.

71
00:05:09,820 --> 00:05:16,840
Então H. T. Melchior diz que, em JavaScript, sempre são quase sempre parte de uma pilha hoje em

72
00:05:16,840 --> 00:05:17,770
dia em grandes aplicativos web extravagantes.

73
00:05:17,770 --> 00:05:21,310
Tecnicamente, poderíamos ter um site que não tenha sucesso.

74
00:05:21,340 --> 00:05:22,690
Seria apenas horrível.

75
00:05:22,780 --> 00:05:27,430
Poderíamos ter um site que ainda não possui javascript do lado do cliente e simplesmente não

76
00:05:27,430 --> 00:05:28,420
seria muito interativo.

77
00:05:28,540 --> 00:05:34,150
Mas ainda podemos fazer um site perfeitamente bom, como fizemos com o site de portfólio de fotografia original,

78
00:05:34,150 --> 00:05:41,110
apenas cada equipe, Eliseus, nós, mas a maioria dos aplicativos da web, como mencionei, todos têm HDMI elsea diz e o Javascript

79
00:05:41,350 --> 00:05:46,050
que está sendo enviado de volta no backend é onde vemos um muito mais variantes.

80
00:05:46,270 --> 00:05:51,910
ou voltar e usar Ruby ou Python ou Skala ou Java ou javascript ou THP.

81
00:05:51,910 --> 00:05:57,720
Portanto, existem diferentes idiomas que podemos escrever o código do lado do servidor e podemos escrever

82
00:05:57,820 --> 00:05:59,500
Há muitas escolhas lá.

83
00:05:59,530 --> 00:06:01,930
Existem todos os tipos de bases de dados diferentes lá fora.

84
00:06:01,930 --> 00:06:07,760
Poste depois da crise e sequela na minha também e Mongo e há tantas opções.

85
00:06:07,810 --> 00:06:14,590
Então, o termo "stack" refere-se a quais escolhas particulares os desenvolvedores criaram e quais as tecnologias

86
00:06:14,590 --> 00:06:16,110
exatas que eles usam.

87
00:06:16,180 --> 00:06:19,200
É uma questão muito comum para os desenvolvedores se perguntarem.

88
00:06:19,450 --> 00:06:25,010
Qual é a sua pilha naquela empresa ou qual pilha você está usando neste projeto específico.

89
00:06:25,030 --> 00:06:28,290
Então, aqui é um exemplo da vida real da pilha do Reddit.

90
00:06:28,510 --> 00:06:32,830
Então, estas são algumas das tecnologias que o Reddit usa em seu site.

91
00:06:33,160 --> 00:06:37,010
Então, o site está escrito em Python usando um quadro chamado frasco.

92
00:06:37,410 --> 00:06:42,610
É construído em um servidor X do mecanismo e usa postscripts como seu banco de dados.

93
00:06:42,610 --> 00:06:48,250
Na verdade, há um site dedicado a compartilhar pilhas de diferentes empresas chamadas compartilhamento de pilha.

94
00:06:48,460 --> 00:06:54,760
Então eu tenho isso aberto aqui e esta é a página Reddit sobre textura e podemos ver todas as diferentes tecnologias que

95
00:06:54,760 --> 00:06:55,470
eles usam.

96
00:06:55,660 --> 00:06:59,270
E genética Python post gresse Amazon S3.

97
00:06:59,410 --> 00:07:02,590
E diz-lhe um pouco sobre o que eles são usados.

98
00:07:02,590 --> 00:07:04,980
Não se surpreenda com a quantidade de ícones que existem.

99
00:07:05,110 --> 00:07:09,530
Quantos nomes e todas essas categorias diferentes e todos esses termos diferentes.

100
00:07:09,790 --> 00:07:11,100
Esse não é o foco aqui.

101
00:07:11,340 --> 00:07:15,910
Tudo o que quero mostrar é que diferentes sites usam diferentes tecnologias.

102
00:07:15,910 --> 00:07:20,190
Então, vamos clicar em pilhas e podemos dar uma olhada em algumas outras pilhas da empresa.

103
00:07:20,290 --> 00:07:31,570
Por exemplo, o ar B e B podem ver que FBN B usa trilhos e Ruby que usam o meu lote bem Esky para

104
00:07:32,230 --> 00:07:33,130
javascript Java.

105
00:07:33,520 --> 00:07:35,720
Eles usam todo um conjunto de tecnologias diferentes.

106
00:07:35,770 --> 00:07:38,500
Então vamos voltar para nossos slides aqui.

107
00:07:38,500 --> 00:07:44,110
Outra coisa que quero mostrar é que esta linha azul aqui denota o limite entre

108
00:07:44,110 --> 00:07:45,650
o back-end eo front-end.

109
00:07:46,000 --> 00:07:51,490
Então, discutimos como um site dinâmico é construído por um servidor no backend.

110
00:07:51,490 --> 00:07:57,050
Então, aqui mesmo, esta parte do diagrama é onde a parte dinâmica do site entra.

111
00:07:57,250 --> 00:08:02,810
vermelho, é o caso que descobre se um usuário está logado se precisarmos mostrar um formulário que adiciona

112
00:08:03,280 --> 00:08:10,120
para adicionar à página quais imagens devem ser inseridas se precisarmos fazer uma inscrição e botão de bloqueio ou botão de saída.

113
00:08:10,120 --> 00:08:13,130
Então, esta é toda a lógica escrita em Python em

114
00:08:13,240 --> 00:08:20,290
Tudo isso é feito na parte de trás e nesta parte do diagrama e, em seguida, envia de volta

115
00:08:20,410 --> 00:08:23,600
h tim L C S S e Javascript.

116
00:08:23,680 --> 00:08:26,170
Então, aqui está a pilha que vamos aprender.

117
00:08:26,380 --> 00:08:27,800
Nós vamos usar o nó j.

118
00:08:27,870 --> 00:08:28,440
Sim.

119
00:08:28,450 --> 00:08:33,120
Então, ainda estaremos escrevendo javascript, mas nós vamos escrever isso no backend.

120
00:08:33,280 --> 00:08:39,610
Nós vamos usar um framework chamado Express e também usaremos o Mangu DBI como nosso banco de dados.

121
00:08:40,370 --> 00:08:45,610
E então, claro, também teremos h t m l c s s e Javascript, como nós usamos

122
00:08:45,610 --> 00:08:46,490
nas últimas unidades.

123
00:08:46,720 --> 00:08:52,510
Então, agora, neste momento do curso, você pode se considerar um desenvolvedor de front-end ou um desenvolvedor de

124
00:08:52,510 --> 00:08:57,490
front-end em treinamento onde cobrimos tudo o que você precisa saber para começar a fazer

125
00:08:57,490 --> 00:08:58,950
a frente dos sites.

126
00:08:58,960 --> 00:09:03,160
Agora, vamos começar a falar de volta no desenvolvimento da web e, uma vez que trazemos esses dois juntos para o final do curso,

127
00:09:03,160 --> 00:09:09,790
sempre que escrevendo o código do lado do servidor com o Express A. J. Como o Mongo D-B, temos o login

128
00:09:09,790 --> 00:09:14,510
do usuário, mas também estamos escrevendo o javascript do lado do cliente ou da frente.

129
00:09:14,510 --> 00:09:16,170
H Tim L e C Ss.

130
00:09:16,390 --> 00:09:19,090
Isso é o que chamaríamos de desenvolvimento web completo.

131
00:09:19,270 --> 00:09:25,450
O desenvolvimento de web full stack completo refere-se ao código de escrita em todas as partes da pilha, a parte traseira

132
00:09:25,450 --> 00:09:26,380
e a frente.

133
00:09:26,710 --> 00:09:30,990
Aqui está um diagrama de algumas das funcionalidades que podemos implementar na cesta.

134
00:09:31,210 --> 00:09:37,240
o Reddit como um exemplo novamente você pode ver que temos características como verificar se o usuário está logado inscrever

135
00:09:37,240 --> 00:09:44,140
um usuário adicionar uma nova postagem ao banco de dados criar um novo comentário remover uma postagem do banco de dados classificar e

136
00:09:44,140 --> 00:09:50,290
classificar as postagens criar um novo sub Reddit adicione um assinante ao boletim e salve isso no banco de dados.

137
00:09:50,290 --> 00:09:51,420
E isso está usando

138
00:09:51,760 --> 00:09:57,640
E o mais importante, claro, é descobrir o que cada equipe verá em javascript para enviar de volta

139
00:09:57,640 --> 00:10:00,270
para o usuário que é enviado de volta.

140
00:10:00,460 --> 00:10:06,880
Atravessando esta linha azul, onde agora vamos ao front-end que H. M. S. assassins e Javascript são enviados

141
00:10:06,910 --> 00:10:10,730
de volta para mim e então vejo isso no meu navegador.

142
00:10:11,020 --> 00:10:16,360
Eu tenho um diagrama mais aqui que também fala sobre front-end versus back-end, mas é formatado de

143
00:10:16,360 --> 00:10:17,260
forma ligeiramente diferente.

144
00:10:17,560 --> 00:10:23,770
Este diagrama mostra a seqüência de eventos entre front-end e back e ao longo de algumas cargas de páginas.

145
00:10:24,370 --> 00:10:29,410
Então, no front-end, se eu for ler ele com ponto e atualizar.

146
00:10:29,680 --> 00:10:34,790
Estou enviando um pedido para a página inicial Reddit e então isso é para lê-lo.

147
00:10:34,960 --> 00:10:39,340
Esse pedido o torna no servidor e o servidor vê que estou pedindo a página inicial.

148
00:10:39,370 --> 00:10:45,650
Então, há alguma lógica do lado do servidor que agarra a primeira publicação do banco de dados e faz todo o tempo LNC

149
00:10:45,730 --> 00:10:52,040
SS e javascript que eu vejo aqui e, em seguida, envia isso de volta para mim, o que eu vejo no meu navegador.

150
00:10:52,780 --> 00:11:00,400
O próximo passo é que eu poderia digitar algo em uma caixa de pesquisa como cães que eu vou fazer agora, digite

151
00:11:00,460 --> 00:11:02,370
cães aqui e pressione enter.

152
00:11:02,710 --> 00:11:09,340
acertar, digite uma nova solicitação é enviada de volta ao servidor Reddit desta vez dizendo que estou procurando por cães.

153
00:11:09,340 --> 00:11:10,320
E quando eu

154
00:11:10,570 --> 00:11:16,630
Então, o servidor tem alguma lógica que leva meus cachorros de pesquisa e encontra todas as postagens que combinam esse termo

155
00:11:16,630 --> 00:11:23,080
no banco de dados e, em seguida, faz-me uma idade nova masculina avaliar em javascript para a página de resultados do cão

156
00:11:23,080 --> 00:11:25,930
e depois envia isso de volta para mim .

157
00:11:26,620 --> 00:11:32,700
E então o meu navegador o processa e vejo isso, é uma versão muito simplificada, obviamente.

158
00:11:32,810 --> 00:11:37,300
Há muito mais acontecendo nos bastidores e Reddit estará realmente criando nossa própria versão

159
00:11:37,330 --> 00:11:39,660
de um aplicativo muito parecido para lê-lo.

160
00:11:39,820 --> 00:11:46,540
Uma vez que aprendemos mais sobre Express e conheça J. S. e Mongo DB E estaremos fazendo uma aplicação de stack cheio.