1
00:00:00,360 --> 00:00:01,320
Ben tornato.

2
00:00:01,680 --> 00:00:05,790
Quindi questo video rappresenta una pietra miliare molto importante in questa classe.

3
00:00:05,790 --> 00:00:11,580
Stiamo passando da tecnologie puramente front-end al nostro primo assaggio di back e sviluppo web.

4
00:00:11,580 --> 00:00:13,940
Quindi continueremo a usare tutto ciò che abbiamo imparato.

5
00:00:13,950 --> 00:00:19,230
È un javascript CSS per Gmail, ma impareremo alcune nuove tecnologie che ci aiutano

6
00:00:19,230 --> 00:00:20,880
a realizzare applicazioni web complete.

7
00:00:20,880 --> 00:00:25,300
Naturalmente, prima di iniziare a scrivere del codice, abbiamo alcune altre cose di cui dobbiamo occuparci.

8
00:00:25,410 --> 00:00:27,840
Inizieremo esaminando come funziona Internet.

9
00:00:27,840 --> 00:00:32,310
Quindi parleremo di statico vs. siti dinamici e dove il front end si

10
00:00:32,310 --> 00:00:37,650
adatta e dove back e si inserisce e per lo più parleremo più approfonditamente del back e delle tecnologie

11
00:00:37,650 --> 00:00:38,580
specifiche con cui lavoreremo.

12
00:00:39,030 --> 00:00:43,660
OK, iniziamo con la versione da 60 secondi di come funziona Internet.

13
00:00:43,980 --> 00:00:49,890
Quando andiamo a un Euro qui per me, ci sono alcune cose che succedono dietro le quinte.

14
00:00:50,790 --> 00:00:56,130
La prima cosa è che il nostro computer ha bisogno di capire a quale indirizzo IP inviare una richiesta.

15
00:00:56,490 --> 00:01:03,180
Quindi ti ci porta R-OH tu a leggere fuori entra l'indirizzo IP corretto che è il localizzatore unico

16
00:01:03,180 --> 00:01:04,840
per te e me server.

17
00:01:05,130 --> 00:01:10,050
Quindi, una volta ottenuto l'indirizzo IP e la richiesta TTP New Age viene inviata.

18
00:01:10,290 --> 00:01:14,910
Quindi una richiesta viene inviata a quell'indirizzo IP e non è solo una richiesta vuota.

19
00:01:14,910 --> 00:01:16,800
Ha un sacco di informazioni.

20
00:01:16,800 --> 00:01:20,830
Parleremo di più sui dettagli specifici presenti in quella richiesta nel prossimo video.

21
00:01:21,090 --> 00:01:26,220
Ma la versione breve è che ha cose come il tuo indirizzo IP il tempo che stai

22
00:01:26,220 --> 00:01:27,910
inviando a quel tipo di richiesta.

23
00:01:27,990 --> 00:01:31,920
E soprattutto la pagina specifica che stai chiedendo.

24
00:01:31,950 --> 00:01:34,710
Quindi in questo caso stiamo chiedendo la pagina del corso.

25
00:01:34,830 --> 00:01:42,510
In modo che è codificato nella richiesta che viene inviata accanto a me ottiene quella richiesta e capisce cosa

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

27
00:01:43,140 --> 00:01:44,810
E poi risponde con qualcosa.

28
00:01:45,030 --> 00:01:51,250
Quindi, se stiamo chiedendo dei corsi di Slash, il server Tomy capirà cosa deve andare sulla pagina

29
00:01:51,300 --> 00:01:52,230
del corso.

30
00:01:52,230 --> 00:01:58,380
Quindi presumo che entri in un database e afferri un sacco di corsi e le immagini li

31
00:01:58,380 --> 00:02:05,310
compili in questo unico file HTL con un po 'di successo e qualche javascript e poi alla fine mi

32
00:02:05,310 --> 00:02:13,580
rispedisca al mio computer abbia una risposta HTP e poi ottiene a un browser il cui compito è quello di rendere la pagina.

33
00:02:13,860 --> 00:02:18,870
Ecco come appare il contenuto reale prima che il nostro browser si occupi di esso e lo rende

34
00:02:18,870 --> 00:02:19,880
per noi come umani.

35
00:02:20,010 --> 00:02:24,880
Questo è ciò che il computer vede solo con successo HMO in javascript.

36
00:02:25,050 --> 00:02:31,320
Per riassumere tutto ciò quando vado a un URL e premo invio, la prima cosa che

37
00:02:31,320 --> 00:02:39,330
succede è che dobbiamo trovare l'indirizzo IP per quel dominio e poi mandiamo una richiesta HTP chiedendo una pagina particolare a

38
00:02:39,330 --> 00:02:42,600
quell'indirizzo IP e poi al server riceve quella richiesta.

39
00:02:42,750 --> 00:02:45,310
Capisce cosa fare con cosa rispondere.

40
00:02:45,570 --> 00:02:51,300
E poi risponde con H. M. SS in javascript.

41
00:02:51,300 --> 00:02:56,510
La prossima cosa che voglio discutere è la differenza tra pagine web statiche e dinamiche.

42
00:02:56,610 --> 00:03:00,960
Ne abbiamo parlato anche in uno dei primi video su come funziona Internet.

43
00:03:00,960 --> 00:03:05,100
Voglio fare un rapido riassunto perché è importante per la discussione sul back-end che stiamo per avere.

44
00:03:06,330 --> 00:03:13,560
Quindi ci sono due diversi tipi di siti Web pagine statiche e pagine dinamiche pagine web dinamiche sono

45
00:03:13,710 --> 00:03:19,860
siti compilati sul lato server in cui il server sta riunendo o costruendo una pagina

46
00:03:19,890 --> 00:03:22,530
Web prima di essere rispedito come risposta.

47
00:03:22,530 --> 00:03:25,610
Tutto ciò che abbiamo scritto finora è statico.

48
00:03:25,650 --> 00:03:31,330
Quindi, anche qualcosa del genere non sembra statico perché c'è un contenuto dinamico.

49
00:03:31,350 --> 00:03:35,000
Otteniamo colori casuali ogni volta ed è un gioco.

50
00:03:35,010 --> 00:03:42,030
Non sembra statico come l'esempio di pagina Web del ristorante che ho usato nel video precedente su

51
00:03:42,030 --> 00:03:48,030
questo argomento, ma è ancora statico perché è lo stesso HMO C S in javascript.

52
00:03:48,060 --> 00:03:49,160
Ogni singola volta.

53
00:03:49,440 --> 00:03:54,630
Sì, sembra diverso perché abbiamo alcuni colori casuali ma sono gli stessi pezzi fondamentali ogni

54
00:03:54,630 --> 00:03:58,530
volta che stiamo aprendo nel browser su un sito web dinamico.

55
00:03:58,560 --> 00:04:03,900
Potremmo avere javascript diversi o diverse C S diverse per ogni squadra che viene rimandata

56
00:04:03,900 --> 00:04:04,620
ogni volta.

57
00:04:04,980 --> 00:04:11,100
Quindi, quando andiamo a qualcosa come Reddit per esempio e aggiorno la pagina, posso ottenere diversi contenuti

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

59
00:04:11,820 --> 00:04:17,790
E in effetti ogni volta che fai fresca la pagina ottieni nuovi contenuti e quindi c'è un database

60
00:04:17,790 --> 00:04:19,330
che sta compilando le cose.

61
00:04:19,380 --> 00:04:24,960
Alcuni codici controllano se sei loggato e se hai effettuato l'accesso non visualizzerai un modulo

62
00:04:24,960 --> 00:04:28,020
qui ma ti mostrerà un pulsante di disconnessione.

63
00:04:28,320 --> 00:04:34,360
E se non sei loggato ti mostra un modulo e ti mostra i log in o i pulsanti registrati.

64
00:04:35,370 --> 00:04:42,210
stessa HG M L C S in javascript che mi viene restituita ogni volta che il server sta effettivamente decidendo cosa inviare.

65
00:04:42,210 --> 00:04:44,430
Quindi questa pagina web non è la

66
00:04:44,430 --> 00:04:51,990
Nel costruire una pagina web prima di inviarmela contro questo sito è lo stesso contenuto

67
00:04:51,990 --> 00:04:53,540
esatto ogni volta.

68
00:04:56,320 --> 00:04:59,260
OK quindi concentriamoci un po 'di più sul back-end ora.

69
00:04:59,350 --> 00:05:06,940
Quindi questo diagramma è uno stack generico e lo stack è un termine che viene utilizzato per fare riferimento a tutte le

70
00:05:07,210 --> 00:05:09,800
tecnologie utilizzate da una particolare applicazione Web.

71
00:05:09,820 --> 00:05:16,840
Quindi H. T. Melchior dice che in javascript sono sempre quasi sempre parte di uno stack al giorno

72
00:05:16,840 --> 00:05:17,770
d'oggi su grandi app web fantasiose.

73
00:05:17,770 --> 00:05:21,310
Tecnicamente potremmo avere un sito Web che non ha alcun successo.

74
00:05:21,340 --> 00:05:22,690
Sarebbe solo orribile.

75
00:05:22,780 --> 00:05:27,430
Potremmo avere un sito Web che non ha alcun javascript sul lato client e non

76
00:05:27,430 --> 00:05:28,420
sarebbe molto interattivo.

77
00:05:28,540 --> 00:05:34,150
Ma possiamo ancora creare un sito Web perfettamente funzionante come abbiamo fatto con il sito portfolio fotografico

78
00:05:34,150 --> 00:05:41,110
originale di ogni team Eliseus, ma la maggior parte delle applicazioni web come ho detto tutte hanno HDMI e dice che

79
00:05:41,350 --> 00:05:46,050
Javascript che viene inviato sul backend è dove vediamo un molte più varianti.

80
00:05:46,270 --> 00:05:51,910
tornare e usare Ruby o Python o Skala o Java o javascript o THP.

81
00:05:51,910 --> 00:05:57,720
Quindi ci sono diverse lingue che possiamo scrivere sul lato server e possiamo scrivere o

82
00:05:57,820 --> 00:05:59,500
Ci sono così tante scelte lì.

83
00:05:59,530 --> 00:06:01,930
Ci sono tutti i tipi di database diversi là fuori.

84
00:06:01,930 --> 00:06:07,760
Post post-crisi e sequel nel mio pure e Mongo e ci sono così tante scelte.

85
00:06:07,810 --> 00:06:14,590
Quindi il termine stack si riferisce a quali scelte particolari sono state fatte dagli sviluppatori e quali sono le

86
00:06:14,590 --> 00:06:16,110
tecnologie esatte che usano.

87
00:06:16,180 --> 00:06:19,200
È una domanda molto comune per gli sviluppatori chiedersi l'un l'altro.

88
00:06:19,450 --> 00:06:25,010
Qual è il tuo stack in quell'azienda o quale stack stai utilizzando in questo specifico progetto.

89
00:06:25,030 --> 00:06:28,290
Quindi, ecco un esempio di vita reale di stack Reddit.

90
00:06:28,510 --> 00:06:32,830
Quindi queste sono alcune delle tecnologie che Reddit usa sul suo sito web.

91
00:06:33,160 --> 00:06:37,010
Quindi il sito è scritto in Python usando un framework chiamato flask.

92
00:06:37,410 --> 00:06:42,610
È costruito su un server X del motore e utilizza i postscript come database.

93
00:06:42,610 --> 00:06:48,250
C'è in realtà un sito Web dedicato alla condivisione di stack di aziende diverse chiamate Stack share.

94
00:06:48,460 --> 00:06:54,760
Quindi l'ho aperto qui e questa è la pagina di Reddit sulla trama e possiamo vedere tutte le diverse tecnologie

95
00:06:54,760 --> 00:06:55,470
che usano.

96
00:06:55,660 --> 00:06:59,270
E la genetica di Python post gresse Amazon S3.

97
00:06:59,410 --> 00:07:02,590
E ti dice di seguito un po 'su per cosa sono usati.

98
00:07:02,590 --> 00:07:04,980
Non essere sopraffatto da quante icone ci sono.

99
00:07:05,110 --> 00:07:09,530
Quanti nomi e tutte queste diverse categorie e tutti questi diversi termini.

100
00:07:09,790 --> 00:07:11,100
Questo non è l'obiettivo qui.

101
00:07:11,340 --> 00:07:15,910
Tutto quello che voglio mostrarti è che diversi siti Web usano tecnologie diverse.

102
00:07:15,910 --> 00:07:20,190
Quindi facciamo clic sugli stack e possiamo dare un'occhiata ad alcuni stack di altre società.

103
00:07:20,290 --> 00:07:31,570
Per esempio, l'aria B e B possono vedere che FBN B usa rotaie e Ruby che usano il mio pozzo Esky per

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

105
00:07:33,520 --> 00:07:35,720
Usano un sacco di diverse tecnologie.

106
00:07:35,770 --> 00:07:38,500
Quindi torniamo alle nostre diapositive qui.

107
00:07:38,500 --> 00:07:44,110
Un'altra cosa che voglio sottolineare è che questa linea blu qui indica il confine tra back

108
00:07:44,110 --> 00:07:45,650
end e front end.

109
00:07:46,000 --> 00:07:51,490
Quindi abbiamo discusso di come un sito dinamico è costruito da un server sul back-end.

110
00:07:51,490 --> 00:07:57,050
Quindi qui questa parte del diagramma è dove entra la parte dinamica del sito.

111
00:07:57,250 --> 00:08:02,810
rosso è il caso che capisce se un utente è loggato se abbiamo bisogno di mostrare un modulo cosa

112
00:08:03,280 --> 00:08:10,120
aggiungere per aggiungere alla pagina quali immagini inserire se abbiamo bisogno di avere una registrazione e pulsante di blocco o un pulsante di uscita.

113
00:08:10,120 --> 00:08:13,130
Quindi questa è tutta la logica scritta in Python in

114
00:08:13,240 --> 00:08:20,290
Tutto ciò è fatto nella parte posteriore e in questa parte del diagramma e quindi restituisce h

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

116
00:08:23,680 --> 00:08:26,170
Quindi ecco lo stack che stiamo per imparare.

117
00:08:26,380 --> 00:08:27,800
Useremo il nodo j.

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

119
00:08:28,450 --> 00:08:33,120
Quindi scriveremo ancora javascript ma lo scriveremo sul backend.

120
00:08:33,280 --> 00:08:39,610
Useremo un framework chiamato Express e useremo anche Mangu DBI come nostro database.

121
00:08:40,370 --> 00:08:45,610
E poi ovviamente avremo h t m l c s s e Javascript proprio come abbiamo usato

122
00:08:45,610 --> 00:08:46,490
nelle ultime unità.

123
00:08:46,720 --> 00:08:52,510
Quindi ora, a questo punto del corso, puoi considerarti uno sviluppatore front-end o uno sviluppatore front-end in formazione

124
00:08:52,510 --> 00:08:57,490
in cui abbiamo coperto tutto ciò che devi sapere per iniziare a fare il front

125
00:08:57,490 --> 00:08:58,950
end dei siti web.

126
00:08:58,960 --> 00:09:03,160
Ora inizieremo a parlare di back nello sviluppo del web e una volta che porteremo questi due insieme verso la fine

127
00:09:03,160 --> 00:09:09,790
del corso, ovunque scriviamo il codice lato server con Express A. J. come Mongo D-B abbiamo il

128
00:09:09,790 --> 00:09:14,510
login dell'utente, ma stiamo anche scrivendo javascript lato client o front-end.

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

130
00:09:16,390 --> 00:09:19,090
Questo è ciò che chiameremmo lo sviluppo web dello stack completo.

131
00:09:19,270 --> 00:09:25,450
Il termine sviluppo completo dello stack web si riferisce al codice di scrittura su tutte le parti dello stack, il back-end

132
00:09:25,450 --> 00:09:26,380
e il front-end.

133
00:09:26,710 --> 00:09:30,990
Ecco un diagramma di alcune delle funzionalità che possiamo implementare nel carrello.

134
00:09:31,210 --> 00:09:37,240
usando Reddit come esempio di nuovo puoi vedere che abbiamo caratteristiche come controllare se l'utente è loggato

135
00:09:37,240 --> 00:09:44,140
iscriviti un utente aggiungi un nuovo post al database crea un nuovo commento rimuovi un post dal database sort e

136
00:09:44,140 --> 00:09:50,290
classifica i post crea un nuovo sub Reddit aggiunge un iscritto alla newsletter e lo salva nel database.

137
00:09:50,290 --> 00:09:51,420
E questo sta

138
00:09:51,760 --> 00:09:57,640
E il più importante, naturalmente, è capire cosa ogni team vedrà valutare in javascript per

139
00:09:57,640 --> 00:10:00,270
tornare all'utente che verrà poi rispedito.

140
00:10:00,460 --> 00:10:06,880
Attraversando questa linea blu dove stiamo andando al front end che H. M. S. gli assassini e Javascript

141
00:10:06,910 --> 00:10:10,730
vengono inviati a me e quindi vedo questo nel mio browser.

142
00:10:11,020 --> 00:10:16,360
Ho ancora uno schema qui che parla anche di front end contro back end ma è formattato in

143
00:10:16,360 --> 00:10:17,260
modo leggermente diverso.

144
00:10:17,560 --> 00:10:23,770
Questo diagramma la sequenza di eventi tra front-end e back e nel corso di alcuni carichi di pagina.

145
00:10:24,370 --> 00:10:29,410
Quindi sul front end se vado a leggerlo dot com e aggiornare.

146
00:10:29,680 --> 00:10:34,790
Sto inviando una richiesta per la home page di Reddit e poi la leggerò.

147
00:10:34,960 --> 00:10:39,340
Quella richiesta lo fa al loro server e il server vede che sto chiedendo la home page.

148
00:10:39,370 --> 00:10:45,650
Quindi c'è una logica lato server che afferra il primo post dal database e fa tutto il tempo

149
00:10:45,730 --> 00:10:52,040
di LNC SS e javascript che vedo qui e poi mi restituisce quello che poi visualizzo nel mio browser.

150
00:10:52,780 --> 00:11:00,400
Il prossimo passo è che potrei digitare qualcosa in una casella di ricerca come i cani, che ora farò, digitare i

151
00:11:00,460 --> 00:11:02,370
cani qui e premere invio.

152
00:11:02,710 --> 00:11:09,340
invio una nuova richiesta viene inviata di nuovo al server Reddit questa volta dicendo che sto cercando cani.

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

154
00:11:10,570 --> 00:11:16,630
Quindi il server ha una logica che prende il mio termine di ricerca cani e trova tutti i post che

155
00:11:16,630 --> 00:11:23,080
corrispondono a quel termine nel database e poi mi fa qualche nuovo maschio di età in javascript per la pagina dei

156
00:11:23,080 --> 00:11:25,930
risultati del cane e poi me lo rispedisce .

157
00:11:26,620 --> 00:11:32,700
E poi il mio browser lo rende e vedo che questa è una versione molto molto semplificata, ovviamente.

158
00:11:32,810 --> 00:11:37,300
C'è molto di più che accade dietro le quinte e Reddit creerà la nostra

159
00:11:37,330 --> 00:11:39,660
versione di un'applicazione molto simile a leggerla.

160
00:11:39,820 --> 00:11:46,540
Una volta che impareremo di più su Express e conosciamo J. S. e Mongo DB E realizzeremo un'applicazione completa.