﻿1
00:00:01,240 --> 00:00:02,660
‫Istruttore: E prima

2
00:00:02,660 --> 00:00:05,610
‫di iniziare, facciamo solo un breve riassunto del rendering

3
00:00:05,610 --> 00:00:07,440
‫lato server e lato client.

4
00:00:07,440 --> 00:00:09,860
‫E inoltre, voglio mostrarvi in questo video

5
00:00:09,860 --> 00:00:12,850
‫il sito web renderizzato lato server che costruiremo nelle

6
00:00:12,850 --> 00:00:14,393
‫prossime due ore.

7
00:00:15,670 --> 00:00:18,680
‫Quindi, ricorda come nel rendering lato client, la

8
00:00:18,680 --> 00:00:20,600
‫costruzione effettiva del sito

9
00:00:20,600 --> 00:00:22,720
‫Web avviene sul lato client.

10
00:00:22,720 --> 00:00:25,330
‫E per questo, abbiamo bisogno di un'origine

11
00:00:25,330 --> 00:00:27,722
‫dati, che di solito è un'API

12
00:00:27,722 --> 00:00:30,590
‫che invia i dati al client come richiesto.

13
00:00:30,590 --> 00:00:32,600
‫Quindi, questo è ciò che abbiamo costruito

14
00:00:32,600 --> 00:00:34,490
‫fino a questo punto del corso.

15
00:00:34,490 --> 00:00:36,750
‫Ma ora che hai imparato quella

16
00:00:36,750 --> 00:00:39,900
‫parte, è il momento di passare al rendering lato

17
00:00:39,900 --> 00:00:43,030
‫server e costruire effettivamente il sito web sul server.

18
00:00:43,030 --> 00:00:45,780
‫E l'aspetto principale del rendering lato server è

19
00:00:45,780 --> 00:00:47,930
‫la creazione dell'HTML vero e

20
00:00:47,930 --> 00:00:52,140
‫proprio, fondamentalmente perché è lì che verranno archiviati tutti i nostri dati.

21
00:00:52,140 --> 00:00:54,480
‫E per farlo, utilizziamo modelli,

22
00:00:54,480 --> 00:00:56,090
‫che hanno segnaposto

23
00:00:56,090 --> 00:00:59,960
‫in cui inseriremo i nostri dati secondo necessità.

24
00:00:59,960 --> 00:01:02,200
‫Quindi, ogni volta che c'è

25
00:01:02,200 --> 00:01:04,170
‫una richiesta, diciamo

26
00:01:04,170 --> 00:01:07,172
‫per la homepage, otteniamo quindi i dati

27
00:01:07,172 --> 00:01:09,280
‫necessari dal database, li iniettiamo

28
00:01:09,280 --> 00:01:11,410
‫in un modello, che quindi

29
00:01:11,410 --> 00:01:13,610
‫produrrà HTML e infine invieremo

30
00:01:13,610 --> 00:01:15,890
‫quell'HTML, insieme a CSS e JavaScript

31
00:01:15,890 --> 00:01:18,990
‫e file di immagine , torna al cliente.

32
00:01:18,990 --> 00:01:21,320
‫Abbastanza semplice, vero?

33
00:01:21,320 --> 00:01:24,290
‫Ora, possiamo ancora usare l'API per alcune

34
00:01:24,290 --> 00:01:26,640
‫delle cose sul front-end,

35
00:01:26,640 --> 00:01:29,840
‫e in realtà lo faremo anche noi.

36
00:01:29,840 --> 00:01:32,600
‫Ok, comunque, lascia che ora ti mostri

37
00:01:32,600 --> 00:01:35,150
‫cosa costruiremo effettivamente in questa sezione.

38
00:01:36,690 --> 00:01:39,900
‫Quindi, questo è il sito Web Natours reso finale, ed è in

39
00:01:39,900 --> 00:01:44,000
‫realtà live su www. natours. dev, quindi se ne

40
00:01:44,000 --> 00:01:45,360
‫hai voglia, vai avanti

41
00:01:45,360 --> 00:01:46,193
‫e

42
00:01:46,193 --> 00:01:48,150
‫apri questa pagina nel tuo browser

43
00:01:48,150 --> 00:01:49,500
‫ora e dai un'occhiata.

44
00:01:49,500 --> 00:01:52,360
‫Dovrai specificare questo W-W-W, ok?

45
00:01:52,360 --> 00:01:54,320
‫Altrimenti, non funzionerà.

46
00:01:54,320 --> 00:01:56,760
‫Ad ogni modo, qui puoi vedere tutti i

47
00:01:56,760 --> 00:01:58,060
‫tour con cui

48
00:01:58,060 --> 00:02:00,020
‫abbiamo lavorato mentre stavamo costruendo la nostra

49
00:02:00,020 --> 00:02:02,940
‫API, e tutti i dati qui sono esattamente gli stessi.

50
00:02:02,940 --> 00:02:06,133
‫Quindi, tutti i nostri nove tour sono qui,

51
00:02:07,010 --> 00:02:07,920
‫giusto,

52
00:02:07,920 --> 00:02:09,800
‫e quindi di nuovo, questo

53
00:02:09,800 --> 00:02:12,700
‫è esattamente ciò che costruiremo in questa sezione.

54
00:02:12,700 --> 00:02:16,000
‫Diamo un'occhiata a una delle pagine di dettaglio qui.

55
00:02:16,000 --> 00:02:18,100
‫Quindi, il Park Camper,

56
00:02:18,100 --> 00:02:21,170
‫e così in effetti, hai la valutazione media.

57
00:02:21,170 --> 00:02:22,773
‫Hai tutte le guide turistiche.

58
00:02:24,030 --> 00:02:25,600
‫Hai quindi alcune immagini.

59
00:02:25,600 --> 00:02:29,870
‫Hai tutte le posizioni e visualizzate su una mappa, in realtà.

60
00:02:29,870 --> 00:02:31,610
‫E hai anche la recensione.

61
00:02:31,610 --> 00:02:34,060
‫E queste, ancora una volta, sono

62
00:02:34,060 --> 00:02:37,380
‫le vere recensioni provenienti da utenti reali nel database.

63
00:02:37,380 --> 00:02:39,940
‫Quindi, se dovessi dare un'occhiata a

64
00:02:39,940 --> 00:02:41,363
‫questo tour qui

65
00:02:43,500 --> 00:02:46,250
‫a Postman, diciamo, facciamo prima tutti i

66
00:02:47,980 --> 00:02:51,100
‫tour solo per ottenere l'ID del Park Camper.

67
00:02:51,100 --> 00:02:52,393
‫Allora, Sea Explorer,

68
00:02:55,770 --> 00:02:57,003
‫City

69
00:02:58,180 --> 00:02:59,880
‫Wanderer, allora dov'è?

70
00:02:59,880 --> 00:03:01,233
‫Ah, ecco il Park Camper.

71
00:03:02,170 --> 00:03:04,123
‫Quindi, se otteniamo questo tour ora,

72
00:03:08,950 --> 00:03:10,650
‫vedrai che, ad esempio, le

73
00:03:10,650 --> 00:03:12,690
‫guide turistiche sono esattamente le stesse persone.

74
00:03:12,690 --> 00:03:15,123
‫Quindi, ci sono Aarav, Ben e Kate,

75
00:03:16,130 --> 00:03:19,410
‫e quindi, in effetti, sono le persone che sono

76
00:03:19,410 --> 00:03:21,080
‫effettivamente le guide turistiche.

77
00:03:21,080 --> 00:03:22,730
‫Quindi, queste

78
00:03:22,730 --> 00:03:25,210
‫tre, e ancora, le

79
00:03:25,210 --> 00:03:29,890
‫recensioni sono anche quelle di Ayla, Laura, Isabel

80
00:03:29,890 --> 00:03:33,690
‫e Alexander, più anche queste altre laggiù.

81
00:03:33,690 --> 00:03:36,640
‫E quindi, se diamo un'occhiata alle

82
00:03:36,640 --> 00:03:38,807
‫recensioni qui, allora

83
00:03:38,807 --> 00:03:43,090
‫in effetti provengono da Ayla, Laura, Isabel e...

84
00:03:43,090 --> 00:03:46,150
‫Sì, quindi davvero, vedi che questi dati

85
00:03:46,150 --> 00:03:48,520
‫sono davvero i dati

86
00:03:48,520 --> 00:03:53,023
‫sottostanti da cui questo sito Web viene generato dinamicamente, ok?

87
00:03:54,140 --> 00:03:56,260
‫Quindi, possiamo anche accedere e tutti

88
00:03:56,260 --> 00:03:57,890
‫gli utenti che

89
00:03:57,890 --> 00:04:00,353
‫abbiamo nel database funzioneranno per questo.

90
00:04:01,750 --> 00:04:04,723
‫Quindi, se diamo un'occhiata a uno dei nostri utenti, quindi,

91
00:04:06,430 --> 00:04:08,620
‫ad esempio, usiamo Steve qui, che in

92
00:04:08,620 --> 00:04:10,593
‫realtà è una guida turistica.

93
00:04:12,690 --> 00:04:14,093
‫Quindi, prendiamo l'esempio,

94
00:04:16,600 --> 00:04:17,630
‫usiamo

95
00:04:17,630 --> 00:04:19,563
‫l'e-mail e la password

96
00:04:21,010 --> 00:04:23,010
‫è, come sempre, test1234.

97
00:04:23,010 --> 00:04:25,070
‫Ok, quindi accediamo e questo

98
00:04:25,070 --> 00:04:26,880
‫accade dietro le quinte usando

99
00:04:26,880 --> 00:04:28,390
‫la nostra API.

100
00:04:28,390 --> 00:04:31,120
‫Ok, e adesso ecco Steve.

101
00:04:31,120 --> 00:04:33,663
‫Possiamo persino aprire il suo conto.

102
00:04:35,620 --> 00:04:37,780
‫Possiamo quindi modificare la password e

103
00:04:37,780 --> 00:04:39,720
‫ciò, ancora una volta, accadrà

104
00:04:39,720 --> 00:04:42,840
‫dietro le quinte utilizzando l'esatto endpoint API che abbiamo

105
00:04:42,840 --> 00:04:46,083
‫creato per un utente che cambia la sua password.

106
00:04:47,830 --> 00:04:49,610
‫Puoi quindi anche controllare le prenotazioni

107
00:04:49,610 --> 00:04:51,460
‫di questo particolare utente, che in

108
00:04:51,460 --> 00:04:53,180
‫questo caso non dovrebbero

109
00:04:53,180 --> 00:04:55,170
‫essere nessuna perché è una guida turistica.

110
00:04:55,170 --> 00:04:56,773
‫Quindi, vedi che qui è

111
00:04:57,900 --> 00:04:58,970
‫vuoto, ma comunque...

112
00:04:59,830 --> 00:05:01,520
‫Sì, è quello che

113
00:05:01,520 --> 00:05:03,800
‫volevo mostrarti perché è quello che

114
00:05:03,800 --> 00:05:06,130
‫faremo nel resto di questa sezione.

115
00:05:06,130 --> 00:05:07,980
‫Quindi, spero che tu ne sia

116
00:05:07,980 --> 00:05:09,000
‫entusiasta, come lo

117
00:05:09,000 --> 00:05:10,573
‫sono io, quindi iniziamo ora.

