1
00:00:01,160 --> 00:00:02,570
‫Docente: Nella lezione

2
00:00:02,570 --> 00:00:05,280
‫precedente, parlando del front-end e del

3
00:00:05,280 --> 00:00:08,710
‫back-end, ho citato un paio di volte siti

4
00:00:08,710 --> 00:00:11,370
‫web, o applicazioni, semplici e statici

5
00:00:11,370 --> 00:00:14,600
‫e dinamici, ma senza definire bene cosa siano.

6
00:00:14,600 --> 00:00:17,870
‫Quindi, in questo video, volevo chiarire queste cose e

7
00:00:17,870 --> 00:00:20,620
‫parlare anche delle API per portare tutti

8
00:00:20,620 --> 00:00:23,620
‫questi concetti nel quadro più ampio dello

9
00:00:23,620 --> 00:00:26,013
‫sviluppo web back-end in generale.

10
00:00:27,460 --> 00:00:30,120
‫Quindi, iniziamo parlando di siti Web statici

11
00:00:30,120 --> 00:00:32,410
‫rispetto a siti Web dinamici.

12
00:00:32,410 --> 00:00:34,920
‫Quindi, un sito Web statico, o un semplice

13
00:00:34,920 --> 00:00:36,630
‫sito Web come l'ho

14
00:00:36,630 --> 00:00:39,070
‫chiamato nell'ultimo video, è quando uno sviluppatore carica

15
00:00:39,070 --> 00:00:43,640
‫i file finali pronti per essere serviti di un sito Web sul server Web.

16
00:00:43,640 --> 00:00:46,580
‫Questi file di solito contengono HTML,

17
00:00:46,580 --> 00:00:50,320
‫CSS, JavaScript, immagini e altro e, come ho detto, questi

18
00:00:50,320 --> 00:00:53,970
‫sono i file esatti che il server invierà successivamente

19
00:00:53,970 --> 00:00:57,090
‫al browser quando viene richiesto il sito Web.

20
00:00:57,090 --> 00:00:59,040
‫Il browser prenderà quindi questi

21
00:00:59,040 --> 00:01:01,320
‫file e li renderà così come sono.

22
00:01:01,320 --> 00:01:04,320
‫Ciò significa che non c'è lavoro sul server,

23
00:01:04,320 --> 00:01:07,510
‫non c'è codice di back-end e non c'è nessuna

24
00:01:07,510 --> 00:01:08,730
‫applicazione in esecuzione.

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

26
00:01:09,563 --> 00:01:12,900
‫Quindi, è solo un server web statico che serve file

27
00:01:12,900 --> 00:01:15,670
‫statici, esattamente come ho detto nell'ultimo video.

28
00:01:15,670 --> 00:01:17,460
‫Ora, potresti pensare, aspetta, quando

29
00:01:17,460 --> 00:01:19,233
‫c'è JavaScript sulla pagina,

30
00:01:19,233 --> 00:01:21,290
‫di solito ci sono effetti dinamici,

31
00:01:21,290 --> 00:01:23,610
‫come animazioni e cose del genere, giusto?

32
00:01:23,610 --> 00:01:26,480
‫Bene, quella dinamica che intendi è

33
00:01:26,480 --> 00:01:28,050
‫una dinamica diversa.

34
00:01:28,050 --> 00:01:31,580
‫È solo nel contesto dello sviluppo front-end.

35
00:01:31,580 --> 00:01:34,370
‫Nel contesto del browser, la dinamica non ha nulla a che

36
00:01:34,370 --> 00:01:37,200
‫fare con gli effetti su una pagina o le cose che si

37
00:01:37,200 --> 00:01:40,570
‫muovono, ma con il modo in cui i siti web vengono generati sui server.

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

39
00:01:41,870 --> 00:01:45,210
‫Quindi, i siti Web dinamici sono diversi dai siti Web statici

40
00:01:45,210 --> 00:01:47,440
‫perché di solito sono costruiti sul

41
00:01:47,440 --> 00:01:50,090
‫server ogni volta che arriva una nuova richiesta.

42
00:01:50,090 --> 00:01:51,740
‫Quindi, come abbiamo visto

43
00:01:51,740 --> 00:01:55,040
‫nell'ultimo video, i siti Web dinamici di solito contengono

44
00:01:55,040 --> 00:01:57,410
‫un database, quindi c'è anche un'applicazione

45
00:01:57,410 --> 00:02:01,400
‫in esecuzione, come un Node. js, che recupera i

46
00:02:01,400 --> 00:02:04,340
‫dati dal database e quindi, insieme a un

47
00:02:04,340 --> 00:02:07,730
‫modello predefinito, costruisce ogni pagina che l'utente richiede in modo

48
00:02:07,730 --> 00:02:10,670
‫dinamico in base ai dati provenienti dal database.

49
00:02:10,670 --> 00:02:13,360
‫Quindi, ogni volta che un browser

50
00:02:13,360 --> 00:02:18,360
‫richiede una pagina, quella pagina viene quindi creata come file HTML, CSS e

51
00:02:18,560 --> 00:02:21,640
‫JavaScript, che verranno quindi restituiti al browser.

52
00:02:21,640 --> 00:02:23,790
‫L'intero processo è talvolta chiamato

53
00:02:23,790 --> 00:02:25,860
‫rendering lato server.

54
00:02:25,860 --> 00:02:28,540
‫Quindi, di nuovo, ecco perché si chiama

55
00:02:28,540 --> 00:02:31,560
‫dinamico, perché il sito Web può cambiare continuamente in

56
00:02:31,560 --> 00:02:33,700
‫base al contenuto che è

57
00:02:33,700 --> 00:02:36,520
‫nel database o alle azioni dell'utente sul sito.

58
00:02:36,520 --> 00:02:38,870
‫Ad esempio, se hai effettuato l'accesso a

59
00:02:38,870 --> 00:02:41,140
‫Twitter, ti mostrerà una pagina completamente

60
00:02:41,140 --> 00:02:43,510
‫diversa rispetto a quando ti sei disconnesso, giusto?

61
00:02:43,510 --> 00:02:45,920
‫E domani ti mostrerà anche una pagina

62
00:02:45,920 --> 00:02:48,600
‫diversa rispetto a oggi perché ci sono nuovi

63
00:02:48,600 --> 00:02:50,938
‫tweet, quindi nuovi dati nel database.

64
00:02:50,938 --> 00:02:54,330
‫E questo è ciò che sono i siti Web dinamici.

65
00:02:54,330 --> 00:02:56,860
‫Ora, se tu, per esempio, vai da Jonas. io, e

66
00:02:56,860 --> 00:02:58,223
‫dovresti, tra l'altro, vedrai

67
00:02:59,150 --> 00:03:01,130
‫sempre lo stesso contenuto, lo

68
00:03:01,130 --> 00:03:03,680
‫stesso sito web, indipendentemente da quando visiti

69
00:03:03,680 --> 00:03:05,060
‫o cosa fai lì.

70
00:03:05,060 --> 00:03:08,870
‫E quindi, questo significa che è una pagina statica, ok?

71
00:03:08,870 --> 00:03:10,950
‫Ha senso questa differenza?

72
00:03:10,950 --> 00:03:14,200
‫Ora, a volte usiamo il termine siti web dinamici e

73
00:03:14,200 --> 00:03:16,450
‫talvolta il termine applicazione web, ma

74
00:03:16,450 --> 00:03:18,790
‫sono più o meno la stessa cosa.

75
00:03:18,790 --> 00:03:21,320
‫Di solito quando le persone fanno riferimento

76
00:03:21,320 --> 00:03:24,450
‫ad applicazioni web, intendono un sito web dinamico con

77
00:03:24,450 --> 00:03:27,180
‫alcune funzionalità come l'accesso, la creazione di profili

78
00:03:27,180 --> 00:03:30,540
‫utente, la ricerca di cose e cose del genere in generale.

79
00:03:30,540 --> 00:03:34,220
‫I siti web sono, ad esempio, qualcosa come un blog WordPress.

80
00:03:34,220 --> 00:03:36,380
‫Sono ancora generati dinamicamente, ma

81
00:03:36,380 --> 00:03:39,793
‫non possiamo davvero fare altro che leggerli, giusto?

82
00:03:40,790 --> 00:03:44,510
‫E tradizionalmente, i siti Web statici e dinamici erano gli unici

83
00:03:44,510 --> 00:03:47,300
‫due tipi di siti Web, ma negli

84
00:03:47,300 --> 00:03:49,840
‫ultimi anni, grazie a quanto potenti

85
00:03:49,840 --> 00:03:53,070
‫sono diventati i browser lato client, vediamo sempre più

86
00:03:53,070 --> 00:03:55,930
‫siti Web che sono, fondamentalmente, basati su API.

87
00:03:55,930 --> 00:03:57,580
‫Quindi, impariamo come funzionano e come

88
00:03:57,580 --> 00:04:00,193
‫possiamo usare Node. js per alimentarli.

89
00:04:02,060 --> 00:04:04,430
‫Manteniamo solo i siti Web dinamici qui

90
00:04:04,430 --> 00:04:07,380
‫nella diapositiva in modo da poter confrontare meglio i due.

91
00:04:07,380 --> 00:04:10,610
‫Quindi, proprio come con i siti Web dinamici, abbiamo

92
00:04:10,610 --> 00:04:13,880
‫un database qui e abbiamo un'app che recupera i dati

93
00:04:13,880 --> 00:04:16,020
‫dal database ogni volta che un

94
00:04:16,020 --> 00:04:20,090
‫client effettua una richiesta, quindi in questo senso, un sito Web basato

95
00:04:20,090 --> 00:04:23,210
‫su API è in realtà abbastanza simile a un

96
00:04:23,210 --> 00:04:25,150
‫sito Web dinamico sito web.

97
00:04:25,150 --> 00:04:27,820
‫Quindi, entrambi funzionano in modo dinamico.

98
00:04:27,820 --> 00:04:31,130
‫Ora, la grande differenza qui è che con

99
00:04:31,130 --> 00:04:33,890
‫un'API inviamo solo i dati al browser,

100
00:04:33,890 --> 00:04:36,340
‫di solito nel formato dati

101
00:04:36,340 --> 00:04:38,990
‫JSON, e non all'intero sito web.

102
00:04:38,990 --> 00:04:42,090
‫Quindi, di nuovo, solo i dati vengono inviati al cliente e

103
00:04:42,090 --> 00:04:44,670
‫non il sito Web pronto per essere visualizzato.

104
00:04:44,670 --> 00:04:49,670
‫Quindi, niente HTML, niente CSS, solo i dati JSON, va bene?

105
00:04:49,860 --> 00:04:52,370
‫Quindi, quando si creano siti Web

106
00:04:52,370 --> 00:04:54,670
‫basati su API, ci sono

107
00:04:54,670 --> 00:04:58,100
‫sempre questi due passaggi, creare un'API e quindi

108
00:04:58,100 --> 00:05:01,110
‫consumare l'API sul lato client e, a

109
00:05:01,110 --> 00:05:04,850
‫proposito, API sta per interfaccia di programmazione dell'applicazione e, a

110
00:05:04,850 --> 00:05:07,800
‫un livello molto alto, è fondamentalmente un

111
00:05:07,800 --> 00:05:11,260
‫pezzo di software che può essere utilizzato da un

112
00:05:11,260 --> 00:05:15,340
‫altro software per, fondamentalmente, consentire alle applicazioni di comunicare tra loro.

113
00:05:15,340 --> 00:05:17,220
‫E parleremo un po' più a

114
00:05:17,220 --> 00:05:21,160
‫fondo di cosa sia effettivamente un'API una volta che inizieremo a crearne una.

115
00:05:21,160 --> 00:05:24,750
‫Comunque, ora riguardo al lato client che ho appena menzionato.

116
00:05:24,750 --> 00:05:28,300
‫Quindi, è qui che il sito Web viene

117
00:05:28,300 --> 00:05:31,470
‫effettivamente assemblato collegando i dati che riceviamo a

118
00:05:31,470 --> 00:05:35,500
‫una sorta di modello, di solito utilizzando un framework front-end

119
00:05:35,500 --> 00:05:38,600
‫fantasioso come React, Angular o Vue.

120
00:05:38,600 --> 00:05:40,540
‫Non entrerò nello specifico qui

121
00:05:40,540 --> 00:05:43,170
‫perché sarebbe per un corso front-end, ma

122
00:05:43,170 --> 00:05:46,080
‫in termini molto generali, è così che funziona.

123
00:05:46,080 --> 00:05:49,200
‫Quindi, vedi che durante la creazione di un sito Web

124
00:05:49,200 --> 00:05:52,080
‫basato su API, la fase di costruzione del

125
00:05:52,080 --> 00:05:54,970
‫sito Web si è spostata dal back-end al front-end, giusto?

126
00:05:54,970 --> 00:05:59,410
‫Oppure possiamo anche dire che è stato spostato dal server al client.

127
00:05:59,410 --> 00:06:01,120
‫Ecco perché molte

128
00:06:01,120 --> 00:06:04,560
‫volte vedrai siti Web dinamici chiamati rendering lato

129
00:06:04,560 --> 00:06:07,730
‫server perché in realtà sono costruiti sul server.

130
00:06:07,730 --> 00:06:10,980
‫D'altra parte, i siti Web basati su API

131
00:06:10,980 --> 00:06:15,360
‫sono spesso chiamati rendering lato client, il che ha senso, giusto?

132
00:06:15,360 --> 00:06:17,200
‫Quindi, per noi sviluppatori

133
00:06:17,200 --> 00:06:20,750
‫di back-end, in realtà è molto più semplice creare un'API

134
00:06:20,750 --> 00:06:24,460
‫e lasciare che le persone del front-end creino un sito, giusto?

135
00:06:24,460 --> 00:06:27,760
‫E infatti, Node è uno strumento assolutamente perfetto per

136
00:06:27,760 --> 00:06:31,510
‫la creazione di API, ed è molto comunemente usato per questo,

137
00:06:31,510 --> 00:06:33,610
‫ma ovviamente è anche perfettamente

138
00:06:33,610 --> 00:06:37,210
‫adatto per creare un sito Web renderizzato dinamico lato server.

139
00:06:37,210 --> 00:06:40,730
‫Quindi, in questo corso, realizzeremo effettivamente entrambe le versioni,

140
00:06:40,730 --> 00:06:43,960
‫a partire dall'API, e alla fine del corso,

141
00:06:43,960 --> 00:06:47,870
‫anche costruendo un sito Web renderizzato utilizzando gli stessi dati.

142
00:06:47,870 --> 00:06:51,670
‫Ho scelto di fare entrambe le cose perché credo che sia estremamente

143
00:06:51,670 --> 00:06:54,960
‫importante per te sapere come costruire sia un'API che un

144
00:06:54,960 --> 00:06:56,710
‫sito Web renderizzato lato server.

145
00:06:58,150 --> 00:06:59,840
‫E ora, solo per finire

146
00:06:59,840 --> 00:07:02,020
‫questo video, volevo menzionare rapidamente che le

147
00:07:02,020 --> 00:07:05,630
‫API che creiamo con Node, o in realtà, qualsiasi altro linguaggio,

148
00:07:05,630 --> 00:07:07,150
‫possono, ovviamente, essere

149
00:07:07,150 --> 00:07:09,930
‫consumate da altri client oltre al semplice browser, il

150
00:07:09,930 --> 00:07:12,920
‫che è un enorme vantaggio di costruire un'API invece

151
00:07:12,920 --> 00:07:15,350
‫di un sito Web renderizzato lato server.

152
00:07:15,350 --> 00:07:17,320
‫Quindi, supponiamo di

153
00:07:17,320 --> 00:07:22,320
‫creare un'API di esempio su jonas. io/api/myCourseData.

154
00:07:22,380 --> 00:07:27,350
‫Quindi, ogni volta che raggiungiamo quell'URL, il server invierà i dati sui

155
00:07:27,350 --> 00:07:28,980
‫corsi di sviluppo

156
00:07:28,980 --> 00:07:31,130
‫web che sto attualmente insegnando.

157
00:07:31,130 --> 00:07:33,970
‫Ora, finora abbiamo parlato solo di

158
00:07:33,970 --> 00:07:38,060
‫richieste provenienti da browser web, ma potremmo anche richiedere

159
00:07:38,060 --> 00:07:41,060
‫e quindi consumare gli stessi esatti dati

160
00:07:41,060 --> 00:07:44,860
‫JSON su un'app iOS nativa o un'app Android,

161
00:07:44,860 --> 00:07:47,890
‫o anche su app desktop per Mac

162
00:07:47,890 --> 00:07:50,440
‫o per computer Windows.

163
00:07:50,440 --> 00:07:54,130
‫Le possibilità sono davvero infinite quando costruiamo un'API perché

164
00:07:54,130 --> 00:07:56,640
‫abbiamo semplicemente un'origine dati, che può

165
00:07:56,640 --> 00:07:59,380
‫essere richiesta e utilizzata ovunque, non solo

166
00:07:59,380 --> 00:08:00,880
‫nei browser.

167
00:08:00,880 --> 00:08:03,210
‫Questo è un po' il problema quando costruiamo un

168
00:08:03,210 --> 00:08:04,520
‫normale sito web dinamico.

169
00:08:04,520 --> 00:08:07,700
‫Restituiamo file HTML e CSS e

170
00:08:07,700 --> 00:08:10,960
‫JavaScript e solo i browser possono davvero

171
00:08:10,960 --> 00:08:14,470
‫capirli, quindi siamo intrappolati in quella singola piattaforma.

172
00:08:14,470 --> 00:08:16,840
‫E questo potrebbe non essere un

173
00:08:16,840 --> 00:08:19,860
‫problema in molti casi, ma per prodotti complessi che

174
00:08:19,860 --> 00:08:22,350
‫richiedono molte app e quindi siti Web

175
00:08:22,350 --> 00:08:25,450
‫e app Web, di solito è sempre necessaria un'API.

176
00:08:25,450 --> 00:08:29,530
‫Quindi, in questo esempio su Jonas. io, potrei creare questa API

177
00:08:29,530 --> 00:08:32,820
‫e quindi creare un sito Web basato su API e

178
00:08:32,820 --> 00:08:35,020
‫alcune app e ottenere i miei dati

179
00:08:35,020 --> 00:08:37,830
‫su tutti questi client da un'unica fonte, ok?

180
00:08:37,830 --> 00:08:41,100
‫E alcune persone o team non hanno nemmeno alcun

181
00:08:41,100 --> 00:08:44,240
‫cliente proprio e vendono semplicemente l'accesso alla loro

182
00:08:44,240 --> 00:08:46,120
‫API a terze parti

183
00:08:46,120 --> 00:08:49,560
‫che poi consumeranno queste API e non le proprie.

184
00:08:49,560 --> 00:08:51,680
‫Quindi, ci sono davvero intere aziende costruite

185
00:08:51,680 --> 00:08:54,830
‫attorno a questa filosofia di vendere semplicemente un'API ad

186
00:08:54,830 --> 00:08:56,563
‫altri sviluppatori o aziende.

187
00:08:57,520 --> 00:09:00,670
‫Ad ogni modo, spero che con questa diapositiva finale il concetto,

188
00:09:00,670 --> 00:09:03,740
‫la ragione e, in qualche modo, la filosofia alla

189
00:09:03,740 --> 00:09:07,380
‫base della creazione delle API ora ti siano chiari come il cristallo.

190
00:09:07,380 --> 00:09:09,313
‫Quindi, ora andiamo avanti.