1
00:00:01,240 --> 00:00:02,660
‫Kursleiter: Und bevor

2
00:00:02,660 --> 00:00:05,610
‫wir beginnen, lassen Sie uns kurz das serverseitige

3
00:00:05,610 --> 00:00:07,440
‫und clientseitige Rendering zusammenfassen.

4
00:00:07,440 --> 00:00:09,860
‫Außerdem möchte ich Ihnen in diesem Video

5
00:00:09,860 --> 00:00:12,850
‫die serverseitig gerenderte Website zeigen, die wir in den

6
00:00:12,850 --> 00:00:14,393
‫nächsten Stunden erstellen werden.

7
00:00:15,670 --> 00:00:18,680
‫Denken Sie also daran, wie beim clientseitigen Rendering

8
00:00:18,680 --> 00:00:20,600
‫die eigentliche Erstellung der

9
00:00:20,600 --> 00:00:22,720
‫Website auf der Clientseite erfolgt.

10
00:00:22,720 --> 00:00:25,330
‫Und dafür brauchen wir eine Datenquelle, die

11
00:00:25,330 --> 00:00:27,722
‫normalerweise eine API ist, die

12
00:00:27,722 --> 00:00:30,590
‫auf Anfrage Daten an den Client sendet.

13
00:00:30,590 --> 00:00:32,600
‫Das ist es, was wir bis zu

14
00:00:32,600 --> 00:00:34,490
‫diesem Punkt im Kurs aufgebaut haben.

15
00:00:34,490 --> 00:00:36,750
‫Aber jetzt, da Sie diesen Teil

16
00:00:36,750 --> 00:00:39,900
‫beherrschen, ist es an der Zeit, zum serverseitigen Rendering überzugehen

17
00:00:39,900 --> 00:00:43,030
‫und die Website tatsächlich auf dem Server zu erstellen.

18
00:00:43,030 --> 00:00:45,780
‫Und der Hauptaspekt des serverseitigen Renderings

19
00:00:45,780 --> 00:00:47,930
‫besteht darin, den eigentlichen

20
00:00:47,930 --> 00:00:52,140
‫HTML-Code zu erstellen, weil dort alle unsere Daten gespeichert werden.

21
00:00:52,140 --> 00:00:54,480
‫Und dafür verwenden wir Vorlagen,

22
00:00:54,480 --> 00:00:56,090
‫die Platzhalter haben,

23
00:00:56,090 --> 00:00:59,960
‫in die wir dann unsere Daten nach Bedarf einfügen.

24
00:00:59,960 --> 00:01:02,200
‫Also, wann immer es eine Anfrage

25
00:01:02,200 --> 00:01:04,170
‫gibt, sagen wir für

26
00:01:04,170 --> 00:01:07,172
‫die Homepage, dann holen wir die notwendigen Daten

27
00:01:07,172 --> 00:01:09,280
‫aus der Datenbank, fügen sie

28
00:01:09,280 --> 00:01:11,410
‫in ein Template ein, das

29
00:01:11,410 --> 00:01:13,610
‫dann HTML ausgibt, und senden

30
00:01:13,610 --> 00:01:15,890
‫dieses HTML schließlich zusammen mit CSS

31
00:01:15,890 --> 00:01:18,990
‫und JavaScript und Bilddateien , zurück zum Kunden.

32
00:01:18,990 --> 00:01:21,320
‫Ziemlich einfach, oder?

33
00:01:21,320 --> 00:01:24,290
‫Jetzt können wir die API immer noch

34
00:01:24,290 --> 00:01:26,640
‫für einige der Dinge am

35
00:01:26,640 --> 00:01:29,840
‫Frontend verwenden, und das werden wir auch tun.

36
00:01:29,840 --> 00:01:32,600
‫Okay, wie auch immer, lassen Sie mich Ihnen jetzt zeigen,

37
00:01:32,600 --> 00:01:35,150
‫was wir in diesem Abschnitt tatsächlich bauen werden.

38
00:01:36,690 --> 00:01:39,900
‫Dies ist also die endgültig gerenderte Natours-Website, und sie ist

39
00:01:39,900 --> 00:01:44,000
‫tatsächlich live unter www. Natur. dev, und wenn Ihnen

40
00:01:44,000 --> 00:01:45,360
‫danach ist, öffnen Sie

41
00:01:45,360 --> 00:01:46,193
‫einfach diese

42
00:01:46,193 --> 00:01:48,150
‫Seite jetzt in Ihrem Browser und

43
00:01:48,150 --> 00:01:49,500
‫sehen Sie sich um.

44
00:01:49,500 --> 00:01:52,360
‫Sie müssen dieses W-W-W angeben, okay?

45
00:01:52,360 --> 00:01:54,320
‫Sonst wird es nicht funktionieren.

46
00:01:54,320 --> 00:01:56,760
‫Wie auch immer, hier sehen Sie alle Touren,

47
00:01:56,760 --> 00:01:58,060
‫mit denen wir

48
00:01:58,060 --> 00:02:00,020
‫gearbeitet haben, als wir unsere API

49
00:02:00,020 --> 00:02:02,940
‫erstellt haben, und alle Daten hier sind wirklich identisch.

50
00:02:02,940 --> 00:02:06,133
‫Also, alle unsere neun Touren sind hier,

51
00:02:07,010 --> 00:02:07,920
‫richtig,

52
00:02:07,920 --> 00:02:09,800
‫und genau das

53
00:02:09,800 --> 00:02:12,700
‫werden wir in diesem Abschnitt aufbauen.

54
00:02:12,700 --> 00:02:16,000
‫Werfen wir einen Blick auf eine der Detailseiten hier.

55
00:02:16,000 --> 00:02:18,100
‫Also, der Park Camper, und

56
00:02:18,100 --> 00:02:21,170
‫damit hast du in der Tat die durchschnittliche Bewertung.

57
00:02:21,170 --> 00:02:22,773
‫Sie haben alle Reiseleiter.

58
00:02:24,030 --> 00:02:25,600
‫Sie haben dann einige Bilder.

59
00:02:25,600 --> 00:02:29,870
‫Sie haben tatsächlich alle Standorte und auf einer Karte angezeigt.

60
00:02:29,870 --> 00:02:31,610
‫Und Sie haben auch die Bewertung.

61
00:02:31,610 --> 00:02:34,060
‫Und dies sind wiederum die

62
00:02:34,060 --> 00:02:37,380
‫echten Bewertungen von echten Benutzern in der Datenbank.

63
00:02:37,380 --> 00:02:39,940
‫Also, wenn Sie sich diese Tour hier in

64
00:02:39,940 --> 00:02:41,363
‫Postman ansehen würden,

65
00:02:43,500 --> 00:02:46,250
‫sagen wir, lassen Sie uns zuerst alle Touren

66
00:02:47,980 --> 00:02:51,100
‫hier abrufen, nur um die ID des Parkcampers zu erhalten.

67
00:02:51,100 --> 00:02:52,393
‫Also, Sea Explorer,

68
00:02:55,770 --> 00:02:57,003
‫City Wanderer,

69
00:02:58,180 --> 00:02:59,880
‫also wo ist das?

70
00:02:59,880 --> 00:03:01,233
‫Ah, hier ist der Park Camper.

71
00:03:02,170 --> 00:03:04,123
‫Wenn wir diese Tour jetzt bekommen,

72
00:03:08,950 --> 00:03:10,650
‫werden Sie beispielsweise feststellen,

73
00:03:10,650 --> 00:03:12,690
‫dass die Reiseleiter genau dieselben Leute sind.

74
00:03:12,690 --> 00:03:15,123
‫Da sind also Aarav, Ben und Kate,

75
00:03:16,130 --> 00:03:19,410
‫und das sind in der Tat die Leute, die

76
00:03:19,410 --> 00:03:21,080
‫eigentlich die Reiseleiter sind.

77
00:03:21,080 --> 00:03:22,730
‫Also, diese

78
00:03:22,730 --> 00:03:25,210
‫drei und wieder die

79
00:03:25,210 --> 00:03:29,890
‫Rezensionen sind auch die von Ayla, Laura, Isabel

80
00:03:29,890 --> 00:03:33,690
‫und Alexander, plus diese anderen da drüben.

81
00:03:33,690 --> 00:03:36,640
‫Wenn wir uns also die Bewertungen

82
00:03:36,640 --> 00:03:38,807
‫hier ansehen, dann kommen

83
00:03:38,807 --> 00:03:43,090
‫sie tatsächlich von Ayla und Laura und Isabel und...

84
00:03:43,090 --> 00:03:46,150
‫Ja, also wirklich, Sie sehen, dass diese

85
00:03:46,150 --> 00:03:48,520
‫Daten wirklich die zugrunde liegenden

86
00:03:48,520 --> 00:03:53,023
‫Daten sind, aus denen diese Website hier dynamisch generiert wird, okay?

87
00:03:54,140 --> 00:03:56,260
‫Dann können wir uns auch anmelden, und

88
00:03:56,260 --> 00:03:57,890
‫jeder der Benutzer, die

89
00:03:57,890 --> 00:04:00,353
‫wir in der Datenbank haben, wird dafür arbeiten.

90
00:04:01,750 --> 00:04:04,723
‫Wenn wir uns also einen unserer Benutzer ansehen, so

91
00:04:06,430 --> 00:04:08,620
‫verwenden wir zum Beispiel hier Steve,

92
00:04:08,620 --> 00:04:10,593
‫der eigentlich ein Reiseleiter ist.

93
00:04:12,690 --> 00:04:14,093
‫Nehmen wir also

94
00:04:16,600 --> 00:04:17,630
‫das Beispiel,

95
00:04:17,630 --> 00:04:19,563
‫verwenden die E-Mail und das

96
00:04:21,010 --> 00:04:23,010
‫Passwort lautet wie immer test1234.

97
00:04:23,010 --> 00:04:25,070
‫Okay, wir loggen uns ein, und

98
00:04:25,070 --> 00:04:26,880
‫das passiert tatsächlich hinter den

99
00:04:26,880 --> 00:04:28,390
‫Kulissen mit unserer API.

100
00:04:28,390 --> 00:04:31,120
‫Okay, und jetzt haben wir hier Steve.

101
00:04:31,120 --> 00:04:33,663
‫Wir können sogar sein Konto eröffnen.

102
00:04:35,620 --> 00:04:37,780
‫Wir können dann das Passwort ändern,

103
00:04:37,780 --> 00:04:39,720
‫und das geschieht wiederum

104
00:04:39,720 --> 00:04:42,840
‫hinter den Kulissen mit dem genauen API-Endpunkt, den wir

105
00:04:42,840 --> 00:04:46,083
‫für einen Benutzer erstellt haben, der sein Passwort ändert.

106
00:04:47,830 --> 00:04:49,610
‫Sie können dann auch die Buchungen

107
00:04:49,610 --> 00:04:51,460
‫dieses bestimmten Benutzers überprüfen, die in

108
00:04:51,460 --> 00:04:53,180
‫diesem Fall keine sein

109
00:04:53,180 --> 00:04:55,170
‫sollten, da er ein Reiseleiter ist.

110
00:04:55,170 --> 00:04:56,773
‫Sie sehen also, dass es hier

111
00:04:57,900 --> 00:04:58,970
‫leer ist, aber trotzdem...

112
00:04:59,830 --> 00:05:01,520
‫Ja, das wollte ich

113
00:05:01,520 --> 00:05:03,800
‫Ihnen zeigen, denn genau das werden

114
00:05:03,800 --> 00:05:06,130
‫wir im Rest dieses Abschnitts tun.

115
00:05:06,130 --> 00:05:07,980
‫Ich hoffe, Sie sind genauso aufgeregt

116
00:05:07,980 --> 00:05:09,000
‫wie ich,

117
00:05:09,000 --> 00:05:10,573
‫und fangen wir jetzt an.