1
00:00:01,030 --> 00:00:04,400
‫-: Wir sind jetzt fast bereit, unsere Anwendung bereitzustellen.

2
00:00:04,400 --> 00:00:05,860
‫Aber bevor wir das

3
00:00:05,860 --> 00:00:07,750
‫tun, gibt es eigentlich ein paar Dinge,

4
00:00:07,750 --> 00:00:09,410
‫um die wir uns kümmern sollten.

5
00:00:09,410 --> 00:00:10,883
‫Und das machen wir jetzt.

6
00:00:12,640 --> 00:00:14,570
‫Und als erstes möchte

7
00:00:14,570 --> 00:00:15,837
‫ich ein

8
00:00:15,837 --> 00:00:19,060
‫Paket installieren, das alle unsere Antworten komprimiert.

9
00:00:19,060 --> 00:00:22,820
‫Im Grunde also immer dann, wenn wir eine Textantwort an einen Client

10
00:00:22,820 --> 00:00:26,020
‫senden, egal ob es sich um JSON- oder HTML-Code handelt.

11
00:00:26,020 --> 00:00:27,520
‫Mit dem

12
00:00:27,520 --> 00:00:30,820
‫Komprimierungspaket wird dieser Text dann dramatisch komprimiert.

13
00:00:30,820 --> 00:00:33,990
‫Alles klar, also lass uns hier installieren.

14
00:00:33,990 --> 00:00:38,123
‫Npm installieren und einfach Komprimierung.

15
00:00:39,400 --> 00:00:40,233
‫Gut.

16
00:00:41,200 --> 00:00:42,863
‫Also fügen wir das hier ein.

17
00:00:51,061 --> 00:00:53,160
‫Dadurch wird nun eine sehr

18
00:00:53,160 --> 00:00:54,983
‫einfache Mittelschichtfunktion

19
00:00:54,983 --> 00:00:56,820
‫bereitgestellt, die wir einfach

20
00:00:56,820 --> 00:00:59,020
‫in unseren Mittelschichtstapel stecken müssen.

21
00:00:59,020 --> 00:01:00,773
‫Also lass uns das hier irgendwo machen.

22
00:01:02,110 --> 00:01:05,260
‫Kurz vor Schluss, egal.

23
00:01:05,260 --> 00:01:07,133
‫Also App. verwenden,

24
00:01:08,060 --> 00:01:10,570
‫dort Anrufkomprimierung eingeben.

25
00:01:10,570 --> 00:01:13,400
‫Dies hier wird dann eine Funktion in der Mitte links

26
00:01:13,400 --> 00:01:15,620
‫zurückgeben, die dann wieder den gesamten

27
00:01:15,620 --> 00:01:17,910
‫Text komprimiert, der an die Clients gesendet wird.

28
00:01:17,910 --> 00:01:20,520
‫Es wird also nicht für Bilder

29
00:01:20,520 --> 00:01:23,240
‫funktionieren, da diese normalerweise bereits komprimiert sind.

30
00:01:23,240 --> 00:01:26,393
‫So ist beispielsweise ein JPEG-Format bereits komprimiert.

31
00:01:28,090 --> 00:01:30,780
‫Dies wird also nur für Text funktionieren.

32
00:01:30,780 --> 00:01:33,490
‫Sobald unsere Website also tatsächlich bereitgestellt

33
00:01:33,490 --> 00:01:37,490
‫wurde, testen wir, ob diese Komprimierung tatsächlich aktiv ist.

34
00:01:37,490 --> 00:01:40,540
‫Wie auch immer, der nächste Schritt vor der Bereitstellung unserer App besteht darin,

35
00:01:40,540 --> 00:01:43,820
‫den größten Teil der Konsole loszuwerden. Protokolle, die wir noch

36
00:01:43,820 --> 00:01:45,460
‫in unserem Code haben.

37
00:01:45,460 --> 00:01:48,230
‫Und das nur, weil diese Logins in

38
00:01:48,230 --> 00:01:50,053
‫unseren Hosting-Plattform-Logs landen.

39
00:01:50,990 --> 00:01:54,690
‫Und deshalb wollen wir diese Stämme in der Produktion nicht verschmutzen.

40
00:01:54,690 --> 00:01:55,730
‫Okay.

41
00:01:55,730 --> 00:01:58,173
‫Also lass uns hier einfach schnell nach Konsole suchen.

42
00:02:01,310 --> 00:02:03,563
‫Und wie Sie sehen, gibt es viele davon.

43
00:02:04,400 --> 00:02:06,830
‫Dieser ist also bereits auskommentiert.

44
00:02:06,830 --> 00:02:09,563
‫Also werde ich nicht daran arbeiten.

45
00:02:11,010 --> 00:02:13,870
‫Aber dieses hier, lasst uns es tatsächlich loswerden.

46
00:02:13,870 --> 00:02:15,370
‫Und so werden

47
00:02:15,370 --> 00:02:17,620
‫wir uns jetzt nach und nach

48
00:02:17,620 --> 00:02:19,230
‫alle ansehen und diejenigen,

49
00:02:19,230 --> 00:02:21,700
‫die nicht relevant sind, einfach auskommentieren.

50
00:02:21,700 --> 00:02:22,880
‫Gut.

51
00:02:22,880 --> 00:02:26,330
‫Hier im Fehlercontroller haben wir auch eine Menge davon, aber

52
00:02:26,330 --> 00:02:28,033
‫einige sind tatsächlich relevant.

53
00:02:29,570 --> 00:02:31,130
‫Nun, nicht dieser.

54
00:02:31,130 --> 00:02:33,130
‫Lass es uns tatsächlich komplett loswerden.

55
00:02:36,970 --> 00:02:38,240
‫Auch nicht

56
00:02:38,240 --> 00:02:40,190
‫dieser, aber hier haben wir

57
00:02:40,190 --> 00:02:41,920
‫diese drei, die wir tatsächlich

58
00:02:41,920 --> 00:02:45,520
‫mit Absicht erstellt haben, damit sie in unseren Hosting-Plattform-Logs landen.

59
00:02:45,520 --> 00:02:46,353
‫Okay.

60
00:02:46,353 --> 00:02:49,140
‫Denken Sie also daran, dass wir es

61
00:02:49,140 --> 00:02:52,290
‫so eingerichtet haben, dass wir bei einem Fehler auf

62
00:02:52,290 --> 00:02:54,160
‫der Render-Website ein Protokoll

63
00:02:54,160 --> 00:02:56,150
‫des tatsächlich aufgetretenen Fehlers erhalten.

64
00:02:56,150 --> 00:02:58,550
‫Zusammen mit diesem Emoji hier.

65
00:02:58,550 --> 00:03:00,470
‫Und so können wir jedes

66
00:03:00,470 --> 00:03:02,950
‫Mal, wenn wir dies sehen, in unseren Protokollen

67
00:03:02,950 --> 00:03:05,890
‫leicht erkennen, dass auf unserer Seite etwas Schlimmes passiert ist.

68
00:03:05,890 --> 00:03:08,310
‫Okay, und so haben wir hier noch ein paar mehr.

69
00:03:08,310 --> 00:03:11,250
‫Zum Beispiel für andere unbekannte Fehler, bei

70
00:03:11,250 --> 00:03:14,720
‫denen wir die Fehlerdetails nicht an den Client weitergeben möchten.

71
00:03:14,720 --> 00:03:17,293
‫Und so sind diese in Ordnung, sie zu behalten.

72
00:03:18,380 --> 00:03:20,250
‫Diese wollen wir auch behalten,

73
00:03:20,250 --> 00:03:22,140
‫um uns in den Logs mitteilen

74
00:03:22,140 --> 00:03:24,523
‫zu können, dass die Datenbankverbindung erfolgreich war.

75
00:03:25,440 --> 00:03:27,186
‫Auch diese hier.

76
00:03:27,186 --> 00:03:30,500
‫Dieser hier ist tatsächlich in den import-dev-data, also sind

77
00:03:30,500 --> 00:03:32,153
‫sie überhaupt nicht wichtig.

78
00:03:34,290 --> 00:03:36,523
‫Wie auch immer, alle Protokolle hier, behalten wir sie.

79
00:03:38,610 --> 00:03:41,298
‫Dann haben wir hier diese hier, die

80
00:03:41,298 --> 00:03:45,020
‫wir wirklich nur gemacht haben, um diese mittlere Schicht zu verwenden.

81
00:03:45,020 --> 00:03:48,200
‫Lassen Sie uns diese mittlere Ebene also tatsächlich deaktivieren.

82
00:03:48,200 --> 00:03:50,140
‫Was wir wiederum nur

83
00:03:50,140 --> 00:03:52,733
‫zum Testen dieser Mittelschicht verwendet haben.

84
00:03:54,520 --> 00:03:56,533
‫Als nächstes im Benutzermodell.

85
00:03:57,710 --> 00:04:00,690
‫Nun, diese wollen wir auch nicht.

86
00:04:00,690 --> 00:04:03,293
‫Dies war nur noch einmal zu Testzwecken.

87
00:04:04,210 --> 00:04:06,370
‫Dann haben wir das Paket JSON, damit

88
00:04:06,370 --> 00:04:08,593
‫sind diese eigentlich gar nicht in die Logs gekommen.

89
00:04:08,593 --> 00:04:10,470
‫Dann müssen wir

90
00:04:10,470 --> 00:04:13,180
‫bündeln, wo wir nichts ändern werden.

91
00:04:13,180 --> 00:04:14,943
‫Dann haben wir einen Index. js.

92
00:04:17,180 --> 00:04:20,030
‫Das ist also unser clientseitiges JavaScript.

93
00:04:20,030 --> 00:04:22,473
‫Also lass uns diese Konsole loswerden. hier einloggen.

94
00:04:25,848 --> 00:04:28,840
‫Dann haben wir hier auch noch ein paar mehr im Logout, aber

95
00:04:28,840 --> 00:04:30,640
‫dieses hier behalten wir eigentlich bei.

96
00:04:31,600 --> 00:04:33,263
‫Etwas mehr in Streifen.

97
00:04:34,210 --> 00:04:36,840
‫Und die Session interessiert uns hier nicht.

98
00:04:36,840 --> 00:04:38,940
‫Aber dieser hier, wenn ein Fehler auftritt, ist

99
00:04:38,940 --> 00:04:40,133
‫eigentlich in Ordnung.

100
00:04:41,660 --> 00:04:43,560
‫Und dann im Server. js, wir

101
00:04:43,560 --> 00:04:44,760
‫haben diese hier, was

102
00:04:44,760 --> 00:04:47,160
‫wir tatsächlich wieder mit Absicht gemacht haben.

103
00:04:47,160 --> 00:04:51,120
‫Damit sie wirklich in unseren Logfiles auftauchen.

104
00:04:51,120 --> 00:04:53,170
‫Und machen Sie sich keine Sorgen, wenn Sie nicht

105
00:04:53,170 --> 00:04:55,120
‫genau wissen, was ich mit Protokolldateien meine.

106
00:04:55,120 --> 00:04:56,790
‫Sie werden sehen, sobald

107
00:04:56,790 --> 00:04:59,490
‫wir unsere Anwendung tatsächlich auf Heroku gestellt haben.

108
00:04:59,490 --> 00:05:02,980
‫Also zeige ich euch bis dahin mit den Logfiles alles klar.

109
00:05:02,980 --> 00:05:06,360
‫Wie auch immer, all diese Konsolen. Protokolle hier sind mit

110
00:05:06,360 --> 00:05:07,373
‫Absicht.

111
00:05:08,550 --> 00:05:10,010
‫Und so geht

112
00:05:10,010 --> 00:05:12,533
‫es hier um die erfolgreiche Datenbankanbindung.

113
00:05:13,410 --> 00:05:14,320
‫Dieser hier

114
00:05:14,320 --> 00:05:17,410
‫informiert uns auch über den Port, auf dem die App läuft.

115
00:05:17,410 --> 00:05:20,063
‫Und dieser und dieser sind auch wichtig.

116
00:05:21,440 --> 00:05:22,680
‫Gut.

117
00:05:22,680 --> 00:05:25,080
‫Und damit haben wir uns um all

118
00:05:25,080 --> 00:05:27,880
‫die unnötige Konsole gekümmert. Protokolle, dass

119
00:05:27,880 --> 00:05:30,210
‫wir nur unsere Protokollausgaben verschmutzen.

120
00:05:30,210 --> 00:05:33,893
‫Okay, schließen wir alle diese Dateien hier.

121
00:05:40,020 --> 00:05:41,230
‫Gut.

122
00:05:41,230 --> 00:05:42,460
‫Und jetzt,

123
00:05:42,460 --> 00:05:45,190
‫im nächsten Schritt, ändern wir URLs oder

124
00:05:45,190 --> 00:05:47,073
‫API-Codes auf der Clientseite, JavaScript.

125
00:05:48,540 --> 00:05:51,720
‫Also zum Beispiel hier im Login. js, im

126
00:05:51,720 --> 00:05:54,170
‫Moment führen wir diese API-Codes

127
00:05:54,170 --> 00:05:56,300
‫für diese Entwicklungs-API aus.

128
00:05:56,300 --> 00:05:58,803
‫Hier haben wir natürlich unsere Entwicklungs-URL.

129
00:06:00,293 --> 00:06:01,126
‫Auf

130
00:06:01,126 --> 00:06:03,090
‫diese Weise wird es in

131
00:06:03,090 --> 00:06:04,840
‫der Produktion nicht funktionieren, da

132
00:06:04,840 --> 00:06:08,740
‫wir von dort aus offensichtlich nicht auf eine Entwicklungs-URL zugreifen können.

133
00:06:08,740 --> 00:06:10,000
‫Und das gleiche hier oben.

134
00:06:10,000 --> 00:06:13,050
‫Aber zum Glück gibt es eine ganz einfache Lösung.

135
00:06:13,050 --> 00:06:17,360
‫Also alles, was wir tun müssen, ist, diesen Teil wirklich loszuwerden.

136
00:06:17,360 --> 00:06:19,760
‫Wenn wir es also einfach

137
00:06:19,760 --> 00:06:22,740
‫so löschen, erhalten wir diese relative URL.

138
00:06:22,740 --> 00:06:24,810
‫Und da die API

139
00:06:24,810 --> 00:06:27,060
‫und die Website auf demselben

140
00:06:27,060 --> 00:06:29,430
‫Server gehostet werden, funktioniert dies perfekt.

141
00:06:29,430 --> 00:06:31,410
‫Dies ist also ein bisschen

142
00:06:31,410 --> 00:06:35,550
‫so, als würde man den Pfad zu Bildern im HTML angeben.

143
00:06:35,550 --> 00:06:38,670
‫Zum Beispiel hier auf der Übersichtsseite, wo

144
00:06:38,670 --> 00:06:40,230
‫wir diese Bilder

145
00:06:40,230 --> 00:06:42,660
‫haben, sagen wir einfach "/img"

146
00:06:42,660 --> 00:06:44,990
‫und das geht dann zur

147
00:06:44,990 --> 00:06:48,510
‫aktuellen URL und fügt dann diesen Pfad hinzu.

148
00:06:48,510 --> 00:06:49,343
‫Okay.

149
00:06:49,343 --> 00:06:51,980
‫Und so wird hier dasselbe passieren.

150
00:06:51,980 --> 00:06:52,930
‫Okay.

151
00:06:52,930 --> 00:06:56,620
‫Auch das funktioniert nur, weil die API und die

152
00:06:56,620 --> 00:06:59,310
‫Website grundsätzlich dieselbe URL verwenden.

153
00:06:59,310 --> 00:07:01,810
‫Also hosten wir sie am selben Ort.

154
00:07:01,810 --> 00:07:03,660
‫Aber wenn Sie Ihre Website

155
00:07:03,660 --> 00:07:05,880
‫oder Ihr Frontend auf einer URL

156
00:07:05,880 --> 00:07:08,260
‫hosten und dann Ihre API auf einer

157
00:07:08,260 --> 00:07:11,110
‫anderen URL, dann würde das nicht so funktionieren, okay.

158
00:07:11,110 --> 00:07:14,730
‫Aber in dieser einfachen Anwendung können wir es einfach so machen,

159
00:07:14,730 --> 00:07:17,173
‫weil wir diese sehr einfache Einrichtung haben.

160
00:07:20,160 --> 00:07:22,880
‫Also lass es uns hier im Login löschen.

161
00:07:22,880 --> 00:07:26,030
‫Im Index haben wir glaube ich keine URLs.

162
00:07:27,560 --> 00:07:28,563
‫Ja das ist richtig.

163
00:07:29,460 --> 00:07:31,140
‫Auch nicht in den Benachrichtigungen.

164
00:07:31,140 --> 00:07:34,063
‫Ich glaube nicht in Mapbox.

165
00:07:36,090 --> 00:07:36,923
‫Nö.

166
00:07:38,280 --> 00:07:39,763
‫Aber sicherlich in Streifen.

167
00:07:40,780 --> 00:07:42,523
‫Also um unsere Session zu bekommen.

168
00:07:43,890 --> 00:07:46,880
‫Also können wir hier genau dasselbe tun.

169
00:07:46,880 --> 00:07:48,430
‫Und auch in den updateSettings.

170
00:07:52,940 --> 00:07:54,350
‫Okay.

171
00:07:54,350 --> 00:07:55,183
‫Sparen Sie.

172
00:07:55,183 --> 00:07:56,800
‫Und alle.

173
00:07:56,800 --> 00:07:59,780
‫Und damit ist man auch fix.

174
00:07:59,780 --> 00:08:02,890
‫Und nun endlich, und wir arbeiten weiter am

175
00:08:02,890 --> 00:08:04,460
‫clientseitigen JavaScript, müssen

176
00:08:04,460 --> 00:08:06,473
‫wir unser endgültiges Bundle erstellen.

177
00:08:07,370 --> 00:08:08,250
‫Gut.

178
00:08:08,250 --> 00:08:11,420
‫Im Moment ist dies also unsere Bundle-JavaScript-Datei.

179
00:08:11,420 --> 00:08:13,680
‫Aber denken Sie daran, dass dies nur

180
00:08:13,680 --> 00:08:15,453
‫mit der Watch-Funktion erstellt wurde.

181
00:08:17,607 --> 00:08:18,920
‫Also in unserem Paket. json

182
00:08:18,920 --> 00:08:22,350
‫wir haben diese Uhr. js-Skript, das immer dann

183
00:08:22,350 --> 00:08:25,540
‫ein neues Bundle erstellt, wenn wir eine der Dateien ändern.

184
00:08:25,540 --> 00:08:27,030
‫Aber ohne

185
00:08:27,030 --> 00:08:29,723
‫Komprimierung oder ohne Performance-Optimierung.

186
00:08:30,720 --> 00:08:33,670
‫Aber jetzt, da wir mit all unserem JavaScript wirklich

187
00:08:33,670 --> 00:08:36,430
‫fertig sind, sind wir bereit, unser JavaScript tatsächlich

188
00:08:36,430 --> 00:08:38,200
‫zu einem endgültigen Bundle zusammenzufügen.

189
00:08:38,200 --> 00:08:42,120
‫Und hier sollten wir diese Uhr durch Build ersetzen,

190
00:08:42,120 --> 00:08:43,730
‫und so wird

191
00:08:43,730 --> 00:08:46,860
‫dann unser endgültiges komprimiertes JavaScript-Bundle erstellt.

192
00:08:46,860 --> 00:08:48,100
‫Gut.

193
00:08:48,100 --> 00:08:50,590
‫Also probieren wir das jetzt hier aus.

194
00:08:50,590 --> 00:08:51,963
‫Mit npm-Lauf.

195
00:08:54,190 --> 00:08:57,023
‫Und noch einmal mit Tab zum automatischen Vervollständigen.

196
00:09:00,050 --> 00:09:01,810
‫Mal sehen, ob...

197
00:09:01,810 --> 00:09:03,530
‫Und es ist vollbracht.

198
00:09:03,530 --> 00:09:06,593
‫Werfen wir also jetzt einen Blick auf unser Bundle.

199
00:09:07,610 --> 00:09:10,560
‫Und um das jetzt zu sehen, ist es wirklich

200
00:09:10,560 --> 00:09:12,003
‫so schön komprimiert.

201
00:09:13,840 --> 00:09:14,800
‫Gut.

202
00:09:14,800 --> 00:09:19,000
‫Jetzt sehen Sie auch, dass wir eine Menge dieser neuen Dateien hier haben,

203
00:09:19,000 --> 00:09:23,110
‫und das liegt daran, dass Sie sich in unserem Dateibaum befinden.

204
00:09:23,110 --> 00:09:26,230
‫Parcel erstellt tatsächlich diesen Cache-Ordner.

205
00:09:26,230 --> 00:09:31,230
‫Aber wir wollen diesen Ordner nicht in unserem Git-Depot haben.

206
00:09:31,360 --> 00:09:32,193
‫Rechts.

207
00:09:32,193 --> 00:09:33,300
‫Also fügen wir das hier hinzu.

208
00:09:38,610 --> 00:09:39,610
‫Und

209
00:09:39,610 --> 00:09:42,280
‫jetzt sehen Sie, dass es

210
00:09:42,280 --> 00:09:44,560
‫automatisch zu den aktualisierten

211
00:09:44,560 --> 00:09:47,910
‫Originaldateien zurückkehrt, sobald wir es speichern.

212
00:09:47,910 --> 00:09:48,743
‫Okay.

213
00:09:48,743 --> 00:09:51,380
‫Also noch einmal, VS Code ist wirklich

214
00:09:51,380 --> 00:09:54,380
‫schlau in allem, was mit Git zu tun hat.

215
00:09:54,380 --> 00:09:55,213
‫Gut.

216
00:09:56,550 --> 00:09:57,383
‫Okay.

217
00:09:57,383 --> 00:09:59,403
‫Und ich denke, das ist es tatsächlich.

218
00:10:00,755 --> 00:10:03,840
‫Unsere Anwendung ist nun also bereit, wirklich eingesetzt zu werden.

219
00:10:03,840 --> 00:10:06,800
‫Der letzte Schritt besteht nun darin, alle

220
00:10:06,800 --> 00:10:10,300
‫diese geänderten Dateien tatsächlich in unser Repository zu übertragen.

221
00:10:10,300 --> 00:10:13,490
‫Denken Sie also daran, dass der erste Schritt darin besteht, alle Dateien

222
00:10:13,490 --> 00:10:14,643
‫zum Staging-Bereich hinzuzufügen.

223
00:10:15,510 --> 00:10:19,740
‫Also git add, und in diesem Fall alle Dateien.

224
00:10:19,740 --> 00:10:20,660
‫Gut.

225
00:10:20,660 --> 00:10:24,880
‫Und jetzt müssen wir nur noch git

226
00:10:24,880 --> 00:10:27,907
‫commit, dann die Nachricht

227
00:10:27,907 --> 00:10:32,907
‫und sagen wir "App für die Bereitstellung vorbereitet".

228
00:10:34,970 --> 00:10:35,803
‫Groß!

229
00:10:35,803 --> 00:10:38,820
‫Sie sehen also, dass alle unsere Modifikationen weg sind.

230
00:10:38,820 --> 00:10:40,290
‫Auch von hier.

231
00:10:40,290 --> 00:10:42,700
‫Das bedeutet, dass der aktuelle Arbeitszweig

232
00:10:42,700 --> 00:10:44,333
‫so genannt wird sauber.

233
00:10:45,735 --> 00:10:48,810
‫Und ja, wir sind jetzt tatsächlich bereit, unsere App im

234
00:10:48,810 --> 00:10:49,823
‫nächsten Video bereitzustellen.