1
00:00:01,160 --> 00:00:02,570
‫Dozent: In der

2
00:00:02,570 --> 00:00:05,280
‫vorherigen Vorlesung habe ich, als ich über

3
00:00:05,280 --> 00:00:08,710
‫das Frontend und das Backend sprach, ein paar Mal

4
00:00:08,710 --> 00:00:11,370
‫einfache, statische und dynamische Websites oder Anwendungen

5
00:00:11,370 --> 00:00:14,600
‫erwähnt, aber ohne wirklich zu definieren, was sie sind.

6
00:00:14,600 --> 00:00:17,870
‫In diesem Video wollte ich diese Dinge klären

7
00:00:17,870 --> 00:00:20,620
‫und auch über APIs sprechen, um

8
00:00:20,620 --> 00:00:23,620
‫all diese Konzepte in das Gesamtbild der

9
00:00:23,620 --> 00:00:26,013
‫Back-End-Webentwicklung im Allgemeinen zu bringen.

10
00:00:27,460 --> 00:00:30,120
‫Beginnen wir also damit, über statische

11
00:00:30,120 --> 00:00:32,410
‫versus dynamische Websites zu sprechen.

12
00:00:32,410 --> 00:00:34,920
‫Eine statische Website oder eine einfache Website,

13
00:00:34,920 --> 00:00:36,630
‫wie ich sie im

14
00:00:36,630 --> 00:00:39,070
‫letzten Video genannt habe, ist also,

15
00:00:39,070 --> 00:00:43,640
‫wenn ein Entwickler die endgültigen servierfertigen Dateien einer Website auf den Webserver hochlädt.

16
00:00:43,640 --> 00:00:46,580
‫Diese Dateien enthalten normalerweise HTML, CSS,

17
00:00:46,580 --> 00:00:50,320
‫JavaScript, Bilder und mehr, und wie gesagt, dies sind

18
00:00:50,320 --> 00:00:53,970
‫genau die Dateien, die der Server später an den

19
00:00:53,970 --> 00:00:57,090
‫Browser sendet, wenn die Website angefordert wird.

20
00:00:57,090 --> 00:00:59,040
‫Der Browser nimmt diese Dateien

21
00:00:59,040 --> 00:01:01,320
‫dann und rendert sie so, wie sie sind.

22
00:01:01,320 --> 00:01:04,320
‫Das bedeutet, dass auf dem Server keine Arbeit

23
00:01:04,320 --> 00:01:07,510
‫verrichtet wird, es keinen Back-End-Code gibt und auch keine

24
00:01:07,510 --> 00:01:08,730
‫Anwendung läuft.

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

26
00:01:09,563 --> 00:01:12,900
‫Es ist also nur ein statischer Webserver, der statische Dateien bereitstellt,

27
00:01:12,900 --> 00:01:15,670
‫genau wie ich im letzten Video erwähnt habe.

28
00:01:15,670 --> 00:01:17,460
‫Jetzt denkst du vielleicht, warte,

29
00:01:17,460 --> 00:01:19,233
‫wenn JavaScript auf der

30
00:01:19,233 --> 00:01:21,290
‫Seite ist, dann gibt es normalerweise

31
00:01:21,290 --> 00:01:23,610
‫dynamische Effekte wie Animationen und so, oder?

32
00:01:23,610 --> 00:01:26,480
‫Nun, diese Dynamik, die Sie meinen, ist

33
00:01:26,480 --> 00:01:28,050
‫eine andere Dynamik.

34
00:01:28,050 --> 00:01:31,580
‫Es ist nur im Kontext der Front-End-Entwicklung.

35
00:01:31,580 --> 00:01:34,370
‫Im Browserkontext hat Dynamik nichts mit Auswirkungen auf

36
00:01:34,370 --> 00:01:37,200
‫eine Seite oder Dinge zu tun, die sich bewegen, sondern

37
00:01:37,200 --> 00:01:40,570
‫mit der Art und Weise, wie Websites auf Servern generiert werden.

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

39
00:01:41,870 --> 00:01:45,210
‫Dynamische Websites unterscheiden sich also von statischen Websites, da sie

40
00:01:45,210 --> 00:01:47,440
‫normalerweise jedes Mal auf dem

41
00:01:47,440 --> 00:01:50,090
‫Server erstellt werden, wenn eine neue Anfrage eingeht.

42
00:01:50,090 --> 00:01:51,740
‫Wie wir im

43
00:01:51,740 --> 00:01:55,040
‫letzten Video gesehen haben, enthalten dynamische Websites normalerweise

44
00:01:55,040 --> 00:01:57,410
‫eine Datenbank, dann läuft auch eine

45
00:01:57,410 --> 00:02:01,400
‫Anwendung, wie ein Node. js-App, die Daten aus

46
00:02:01,400 --> 00:02:04,340
‫der Datenbank abruft und dann zusammen mit einer

47
00:02:04,340 --> 00:02:07,730
‫vordefinierten Vorlage jede Seite erstellt, die der Benutzer dynamisch auf

48
00:02:07,730 --> 00:02:10,670
‫der Grundlage von Daten aus der Datenbank anfordert.

49
00:02:10,670 --> 00:02:13,360
‫Jedes Mal, wenn ein Browser

50
00:02:13,360 --> 00:02:18,360
‫eine Seite anfordert, wird diese Seite als HTML-, CSS- und JavaScript-Dateien erstellt,

51
00:02:18,560 --> 00:02:21,640
‫die dann an den Browser zurückgesendet werden.

52
00:02:21,640 --> 00:02:23,790
‫Dieser ganze Prozess wird manchmal

53
00:02:23,790 --> 00:02:25,860
‫als serverseitiges Rendering bezeichnet.

54
00:02:25,860 --> 00:02:28,540
‫Aus diesem Grund wird es auch als

55
00:02:28,540 --> 00:02:31,560
‫dynamisch bezeichnet, da sich die Website ständig entsprechend dem

56
00:02:31,560 --> 00:02:33,700
‫Inhalt der Datenbank oder den

57
00:02:33,700 --> 00:02:36,520
‫Aktionen des Benutzers auf der Website ändern kann.

58
00:02:36,520 --> 00:02:38,870
‫Wenn Sie sich beispielsweise bei Twitter angemeldet haben,

59
00:02:38,870 --> 00:02:41,140
‫wird Ihnen eine völlig andere Seite

60
00:02:41,140 --> 00:02:43,510
‫angezeigt, als wenn Sie sich abgemeldet haben, oder?

61
00:02:43,510 --> 00:02:45,920
‫Und es zeigt Ihnen morgen auch eine andere

62
00:02:45,920 --> 00:02:48,600
‫Seite als heute, weil es neue Tweets gibt,

63
00:02:48,600 --> 00:02:50,938
‫also neue Daten in der Datenbank.

64
00:02:50,938 --> 00:02:54,330
‫Und genau darum geht es bei dynamischen Websites.

65
00:02:54,330 --> 00:02:56,860
‫Wenn Sie jetzt zum Beispiel zu Jonas gehen. io, und das

66
00:02:56,860 --> 00:02:58,223
‫solltest du übrigens, dann

67
00:02:59,150 --> 00:03:01,130
‫siehst du immer den gleichen Inhalt,

68
00:03:01,130 --> 00:03:03,680
‫die gleiche Website, egal wann du besuchst oder

69
00:03:03,680 --> 00:03:05,060
‫was du dort machst.

70
00:03:05,060 --> 00:03:08,870
‫Das bedeutet, dass es sich um eine statische Seite handelt, in Ordnung?

71
00:03:08,870 --> 00:03:10,950
‫Macht dieser Unterschied Sinn?

72
00:03:10,950 --> 00:03:14,200
‫Nun, manchmal verwenden wir den Begriff dynamische Websites

73
00:03:14,200 --> 00:03:16,450
‫und manchmal den Begriff

74
00:03:16,450 --> 00:03:18,790
‫Webanwendung, aber sie sind irgendwie dasselbe.

75
00:03:18,790 --> 00:03:21,320
‫Wenn Leute von Webanwendungen sprechen,

76
00:03:21,320 --> 00:03:24,450
‫meinen sie normalerweise eine dynamische Website mit

77
00:03:24,450 --> 00:03:27,180
‫einigen Funktionen wie Anmelden, Erstellen von

78
00:03:27,180 --> 00:03:30,540
‫Benutzerprofilen, Suchen nach Inhalten und dergleichen im Allgemeinen.

79
00:03:30,540 --> 00:03:34,220
‫Websites sind zum Beispiel so etwas wie ein WordPress-Blog.

80
00:03:34,220 --> 00:03:36,380
‫Sie werden immer noch dynamisch generiert,

81
00:03:36,380 --> 00:03:39,793
‫aber wir können eigentlich nichts anderes tun, als sie zu lesen, oder?

82
00:03:40,790 --> 00:03:44,510
‫Und traditionell waren statische und dynamische Websites die einzigen

83
00:03:44,510 --> 00:03:47,300
‫beiden Arten von Websites, aber in den

84
00:03:47,300 --> 00:03:49,840
‫letzten Jahren sehen wir dank

85
00:03:49,840 --> 00:03:53,070
‫der leistungsstarken Browser auf der Clientseite immer mehr

86
00:03:53,070 --> 00:03:55,930
‫Websites, die im Wesentlichen auf APIs basieren.

87
00:03:55,930 --> 00:03:57,580
‫Lassen Sie uns also lernen, wie diese

88
00:03:57,580 --> 00:04:00,193
‫funktionieren und wie wir Node. js, um sie mit Strom zu versorgen.

89
00:04:02,060 --> 00:04:04,430
‫Lassen Sie uns einfach die dynamischen Websites hier

90
00:04:04,430 --> 00:04:07,380
‫in der Folie belassen, damit wir die beiden besser vergleichen können.

91
00:04:07,380 --> 00:04:10,610
‫Genau wie bei den dynamischen Websites haben wir

92
00:04:10,610 --> 00:04:13,880
‫hier eine Datenbank und wir haben eine App,

93
00:04:13,880 --> 00:04:16,020
‫die jedes Mal, wenn ein

94
00:04:16,020 --> 00:04:20,090
‫Client eine Anfrage stellt, Daten aus der Datenbank abruft. In

95
00:04:20,090 --> 00:04:23,210
‫diesem Sinne ist eine API-basierte Website einer dynamischen

96
00:04:23,210 --> 00:04:25,150
‫Website ziemlich ähnlich Webseite.

97
00:04:25,150 --> 00:04:27,820
‫Beide arbeiten also dynamisch.

98
00:04:27,820 --> 00:04:31,130
‫Der große Unterschied besteht nun darin, dass wir

99
00:04:31,130 --> 00:04:33,890
‫mit einer API nur die Daten, meist

100
00:04:33,890 --> 00:04:36,340
‫im JSON-Datenformat, an den Browser

101
00:04:36,340 --> 00:04:38,990
‫senden und nicht die gesamte Website.

102
00:04:38,990 --> 00:04:42,090
‫Es werden also wieder nur die Daten an den Client

103
00:04:42,090 --> 00:04:44,670
‫gesendet und nicht die zur Anzeige bereite Website.

104
00:04:44,670 --> 00:04:49,670
‫Also kein HTML, kein CSS, nur die JSON-Daten, in Ordnung?

105
00:04:49,860 --> 00:04:52,370
‫Beim Erstellen von API-basierten Websites gibt

106
00:04:52,370 --> 00:04:54,670
‫es also immer diese beiden

107
00:04:54,670 --> 00:04:58,100
‫Schritte, eine API zu erstellen und dann die

108
00:04:58,100 --> 00:05:01,110
‫API auf der Clientseite zu konsumieren, und

109
00:05:01,110 --> 00:05:04,850
‫übrigens steht API für Application Programming Interface, und auf einer

110
00:05:04,850 --> 00:05:07,800
‫sehr hohen Ebene ist es im Grunde

111
00:05:07,800 --> 00:05:11,260
‫eine Software, die von einer anderen Software verwendet werden

112
00:05:11,260 --> 00:05:15,340
‫kann, um im Grunde Anwendungen zu ermöglichen, miteinander zu kommunizieren.

113
00:05:15,340 --> 00:05:17,220
‫Und wir werden etwas ausführlicher darüber

114
00:05:17,220 --> 00:05:21,160
‫sprechen, was eine API eigentlich ist, sobald wir mit der Erstellung einer API beginnen.

115
00:05:21,160 --> 00:05:24,750
‫Wie auch immer, jetzt zur Client-Seite, die ich gerade erwähnt habe.

116
00:05:24,750 --> 00:05:28,300
‫Hier wird die Website also tatsächlich zusammengestellt, indem

117
00:05:28,300 --> 00:05:31,470
‫die Daten, die wir erhalten, in eine

118
00:05:31,470 --> 00:05:35,500
‫Art von Vorlagen eingefügt werden, normalerweise unter Verwendung eines ausgefallenen

119
00:05:35,500 --> 00:05:38,600
‫Front-End-Frameworks wie React, Angular oder Vue.

120
00:05:38,600 --> 00:05:40,540
‫Ich werde hier nicht

121
00:05:40,540 --> 00:05:43,170
‫auf Einzelheiten eingehen, weil das für einen

122
00:05:43,170 --> 00:05:46,080
‫Front-End-Kurs wäre, aber ganz allgemein funktioniert es so.

123
00:05:46,080 --> 00:05:49,200
‫Sie sehen also, dass sich beim Erstellen einer

124
00:05:49,200 --> 00:05:52,080
‫API-basierten Website die Aufbauphase der Website

125
00:05:52,080 --> 00:05:54,970
‫vom Backend zum Frontend verlagert hat, oder?

126
00:05:54,970 --> 00:05:59,410
‫Oder wir können auch sagen, dass es vom Server zum Client verschoben wurde.

127
00:05:59,410 --> 00:06:01,120
‫Aus diesem Grund

128
00:06:01,120 --> 00:06:04,560
‫werden dynamische Websites oft als serverseitig gerendert bezeichnet,

129
00:06:04,560 --> 00:06:07,730
‫da sie tatsächlich auf dem Server erstellt wurden.

130
00:06:07,730 --> 00:06:10,980
‫Auf der anderen Seite werden API-gestützte

131
00:06:10,980 --> 00:06:15,360
‫Websites oft als clientseitig gerendert bezeichnet, was Sinn macht, oder?

132
00:06:15,360 --> 00:06:17,200
‫Für uns Back-End-Entwickler ist

133
00:06:17,200 --> 00:06:20,750
‫es eigentlich viel einfacher, einfach eine API zu erstellen

134
00:06:20,750 --> 00:06:24,460
‫und die Front-End-Leute eine Site erstellen zu lassen, oder?

135
00:06:24,460 --> 00:06:27,760
‫Und tatsächlich ist Node ein absolut perfektes Tool zum

136
00:06:27,760 --> 00:06:31,510
‫Erstellen von APIs, und es wird sehr häufig dafür verwendet,

137
00:06:31,510 --> 00:06:33,610
‫aber es ist natürlich auch

138
00:06:33,610 --> 00:06:37,210
‫perfekt geeignet, um eine dynamische serverseitig gerenderte Website zu erstellen.

139
00:06:37,210 --> 00:06:40,730
‫In diesem Kurs werden wir also tatsächlich beide Versionen durchführen,

140
00:06:40,730 --> 00:06:43,960
‫beginnend mit der API und am Ende des

141
00:06:43,960 --> 00:06:47,870
‫Kurses auch eine gerenderte Website mit genau den gleichen Daten erstellen.

142
00:06:47,870 --> 00:06:51,670
‫Ich habe mich für beides entschieden, weil ich glaube, dass es für Sie

143
00:06:51,670 --> 00:06:54,960
‫äußerst wichtig ist, zu wissen, wie Sie sowohl eine API als auch

144
00:06:54,960 --> 00:06:56,710
‫eine serverseitig gerenderte Website erstellen.

145
00:06:58,150 --> 00:06:59,840
‫Und jetzt, um dieses Video

146
00:06:59,840 --> 00:07:02,020
‫zu beenden, wollte ich noch kurz

147
00:07:02,020 --> 00:07:05,630
‫erwähnen, dass die APIs, die wir mit Node oder wirklich jeder

148
00:07:05,630 --> 00:07:07,150
‫anderen Sprache erstellen,

149
00:07:07,150 --> 00:07:09,930
‫natürlich von anderen Clients als nur dem Browser

150
00:07:09,930 --> 00:07:12,920
‫verwendet werden können, was ein großer Vorteil ist Erstellen

151
00:07:12,920 --> 00:07:15,350
‫einer API anstelle einer serverseitig gerenderten Website.

152
00:07:15,350 --> 00:07:17,320
‫Nehmen wir an,

153
00:07:17,320 --> 00:07:22,320
‫wir erstellen eine Beispiel-API auf Jonas. io/api/myCourseData.

154
00:07:22,380 --> 00:07:27,350
‫Wenn wir also auf diese URL zugreifen, sendet der Server Daten

155
00:07:27,350 --> 00:07:28,980
‫über die Webentwicklungskurse

156
00:07:28,980 --> 00:07:31,130
‫zurück, die ich derzeit unterrichte.

157
00:07:31,130 --> 00:07:33,970
‫Bisher haben wir nur über

158
00:07:33,970 --> 00:07:38,060
‫Anfragen von Webbrowsern gesprochen, aber wir könnten auch

159
00:07:38,060 --> 00:07:41,060
‫genau dieselben JSON-Daten in einer nativen

160
00:07:41,060 --> 00:07:44,860
‫iOS-App oder einer Android-App oder sogar in Desktop-Apps

161
00:07:44,860 --> 00:07:47,890
‫für den Mac oder für Windows-Computer

162
00:07:47,890 --> 00:07:50,440
‫anfordern und dann konsumieren.

163
00:07:50,440 --> 00:07:54,130
‫Die Möglichkeiten sind wirklich endlos, wenn wir eine API bauen,

164
00:07:54,130 --> 00:07:56,640
‫weil wir einfach eine Datenquelle haben, die

165
00:07:56,640 --> 00:07:59,380
‫dann überall angefordert und verwendet werden kann, nicht

166
00:07:59,380 --> 00:08:00,880
‫nur in Browsern.

167
00:08:00,880 --> 00:08:03,210
‫Das ist das Problem, wenn wir eine normale

168
00:08:03,210 --> 00:08:04,520
‫dynamische Website erstellen.

169
00:08:04,520 --> 00:08:07,700
‫Wir geben HTML-, CSS- und JavaScript-Dateien

170
00:08:07,700 --> 00:08:10,960
‫zurück, und nur Browser können diese wirklich verstehen,

171
00:08:10,960 --> 00:08:14,470
‫also sind wir dann in dieser einzigen Plattform gefangen.

172
00:08:14,470 --> 00:08:16,840
‫Und das mag in vielen

173
00:08:16,840 --> 00:08:19,860
‫Fällen kein Problem sein, aber für komplexe Produkte,

174
00:08:19,860 --> 00:08:22,350
‫die viele Apps und dann Websites und

175
00:08:22,350 --> 00:08:25,450
‫Web-Apps benötigen, wird normalerweise immer eine API benötigt.

176
00:08:25,450 --> 00:08:29,530
‫Also in diesem Beispiel auf Jonas. io, ich könnte diese API

177
00:08:29,530 --> 00:08:32,820
‫erstellen und dann eine API-basierte Website und einige Apps erstellen

178
00:08:32,820 --> 00:08:35,020
‫und meine Daten zu all diesen

179
00:08:35,020 --> 00:08:37,830
‫Clients aus einer einzigen Quelle beziehen, in Ordnung?

180
00:08:37,830 --> 00:08:41,100
‫Und manche Leute oder Teams haben noch nicht einmal

181
00:08:41,100 --> 00:08:44,240
‫einen eigenen Client und verkaufen einfach den Zugriff

182
00:08:44,240 --> 00:08:46,120
‫auf ihre API an

183
00:08:46,120 --> 00:08:49,560
‫Dritte, die dann diese APIs konsumieren und nicht ihre eigenen.

184
00:08:49,560 --> 00:08:51,680
‫Es gibt also wirklich ganze Unternehmen, die

185
00:08:51,680 --> 00:08:54,830
‫auf dieser Philosophie basieren, eine API einfach an andere Entwickler

186
00:08:54,830 --> 00:08:56,563
‫oder Unternehmen zu verkaufen.

187
00:08:57,520 --> 00:09:00,670
‫Wie auch immer, ich hoffe, dass Ihnen mit dieser

188
00:09:00,670 --> 00:09:03,740
‫letzten Folie das Konzept und der Grund und

189
00:09:03,740 --> 00:09:07,380
‫gewissermaßen die Philosophie hinter dem Erstellen von APIs kristallklar geworden sind.

190
00:09:07,380 --> 00:09:09,313
‫Also, lass uns jetzt weitermachen.