1
00:00:01,030 --> 00:00:04,400
‫-: Kami hampir siap untuk menerapkan aplikasi kami sekarang.

2
00:00:04,400 --> 00:00:05,860
‫Tapi sebelum kita

3
00:00:05,860 --> 00:00:07,750
‫melakukan itu, sebenarnya ada beberapa

4
00:00:07,750 --> 00:00:09,410
‫hal yang harus kita perhatikan.

5
00:00:09,410 --> 00:00:10,883
‫Jadi mari kita lakukan itu sekarang.

6
00:00:12,640 --> 00:00:14,570
‫Dan hal pertama yang ingin

7
00:00:14,570 --> 00:00:15,837
‫saya lakukan adalah

8
00:00:15,837 --> 00:00:19,060
‫menginstal sebuah paket yang akan memampatkan semua tanggapan kita.

9
00:00:19,060 --> 00:00:22,820
‫Jadi pada dasarnya, setiap kali kami mengirim respons teks ke klien,

10
00:00:22,820 --> 00:00:26,020
‫tidak peduli apakah itu kode JSON atau HTML.

11
00:00:26,020 --> 00:00:27,520
‫Dengan paket kompresi,

12
00:00:27,520 --> 00:00:30,820
‫teks itu kemudian akan dikompresi secara dramatis.

13
00:00:30,820 --> 00:00:33,990
‫Baiklah, jadi mari kita instal di sini.

14
00:00:33,990 --> 00:00:38,123
‫Instal Npm, dan sederhananya, kompresi.

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

16
00:00:41,200 --> 00:00:42,863
‫Jadi mari kita sertakan itu di sini.

17
00:00:51,061 --> 00:00:53,160
‫Sekarang, jadi ini kemudian akan mengekspos

18
00:00:53,160 --> 00:00:54,983
‫fungsi lapisan tengah yang

19
00:00:54,983 --> 00:00:56,820
‫sangat sederhana yang hanya perlu

20
00:00:56,820 --> 00:00:59,020
‫kita tancapkan ke tumpukan lapisan tengah kita.

21
00:00:59,020 --> 00:01:00,773
‫Jadi mari kita lakukan itu di suatu tempat di sini.

22
00:01:02,110 --> 00:01:05,260
‫Mendekati akhir, tidak terlalu penting.

23
00:01:05,260 --> 00:01:07,133
‫Jadi aplikasi. gunakan,

24
00:01:08,060 --> 00:01:10,570
‫masukkan di sana panggilan kompresi.

25
00:01:10,570 --> 00:01:13,400
‫Jadi ini di sini kemudian akan mengembalikan fungsi kiri

26
00:01:13,400 --> 00:01:15,620
‫tengah yang sekali lagi akan

27
00:01:15,620 --> 00:01:17,910
‫memampatkan semua teks yang dikirim ke klien.

28
00:01:17,910 --> 00:01:20,520
‫Jadi itu tidak akan berfungsi

29
00:01:20,520 --> 00:01:23,240
‫untuk gambar karena ini biasanya sudah dikompresi.

30
00:01:23,240 --> 00:01:26,393
‫Jadi misalnya, format JPEG sudah dikompresi.

31
00:01:28,090 --> 00:01:30,780
‫Jadi ini hanya akan berfungsi untuk teks.

32
00:01:30,780 --> 00:01:33,490
‫Jadi setelah situs web kami benar-benar

33
00:01:33,490 --> 00:01:37,490
‫digunakan, kami kemudian akan menguji apakah kompresi ini benar-benar aktif.

34
00:01:37,490 --> 00:01:40,540
‫Bagaimanapun, langkah selanjutnya sebelum menerapkan aplikasi kita adalah

35
00:01:40,540 --> 00:01:43,820
‫menyingkirkan sebagian besar konsol. log yang masih kita

36
00:01:43,820 --> 00:01:45,460
‫miliki dalam kode kita.

37
00:01:45,460 --> 00:01:48,230
‫Dan itu hanya karena login ini akan berakhir

38
00:01:48,230 --> 00:01:50,053
‫di log platform hosting kami.

39
00:01:50,990 --> 00:01:54,690
‫Jadi kami tidak ingin mencemari log ini dalam produksi.

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

41
00:01:55,730 --> 00:01:58,173
‫Jadi mari kita cepat mencari di sini untuk konsol.

42
00:02:01,310 --> 00:02:03,563
‫Dan seperti yang Anda lihat, ada banyak dari mereka.

43
00:02:04,400 --> 00:02:06,830
‫Jadi yang ini sudah dikomentari.

44
00:02:06,830 --> 00:02:09,563
‫Jadi saya tidak akan mengerjakan yang itu.

45
00:02:11,010 --> 00:02:13,870
‫Tapi yang ini di sini, mari kita singkirkan.

46
00:02:13,870 --> 00:02:15,370
‫Jadi sekarang,

47
00:02:15,370 --> 00:02:17,620
‫satu per satu, kita akan

48
00:02:17,620 --> 00:02:19,230
‫melihat semuanya dan yang

49
00:02:19,230 --> 00:02:21,700
‫tidak relevan akan kita komentari saja.

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

51
00:02:22,880 --> 00:02:26,330
‫Di sini, di pengontrol kesalahan kami juga memiliki banyak sekali

52
00:02:26,330 --> 00:02:28,033
‫tetapi beberapa sebenarnya relevan.

53
00:02:29,570 --> 00:02:31,130
‫Sekarang, bukan yang ini.

54
00:02:31,130 --> 00:02:33,130
‫Mari kita benar-benar menyingkirkannya.

55
00:02:36,970 --> 00:02:38,240
‫Juga bukan

56
00:02:38,240 --> 00:02:40,190
‫yang ini, tetapi kemudian di sini

57
00:02:40,190 --> 00:02:41,920
‫kami memiliki ketiga yang kami

58
00:02:41,920 --> 00:02:45,520
‫buat dengan sengaja sehingga mereka berakhir di log platform hosting kami.

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

60
00:02:46,353 --> 00:02:49,140
‫Jadi ingat bahwa kami mengaturnya sedemikian rupa

61
00:02:49,140 --> 00:02:52,290
‫sehingga ketika ada kesalahan pada situs web render

62
00:02:52,290 --> 00:02:54,160
‫maka kami akan mendapatkan

63
00:02:54,160 --> 00:02:56,150
‫log kesalahan yang sebenarnya terjadi.

64
00:02:56,150 --> 00:02:58,550
‫Bersama dengan emoji ini di sini.

65
00:02:58,550 --> 00:03:00,470
‫Jadi setiap kali kita melihat

66
00:03:00,470 --> 00:03:02,950
‫ini, kita kemudian dapat dengan mudah mengidentifikasi di

67
00:03:02,950 --> 00:03:05,890
‫log kita bahwa sesuatu yang buruk terjadi di pihak kita.

68
00:03:05,890 --> 00:03:08,310
‫Oke, dan jadi kami memiliki beberapa lagi di sini.

69
00:03:08,310 --> 00:03:11,250
‫Misalnya, untuk kesalahan lain yang tidak diketahui

70
00:03:11,250 --> 00:03:14,720
‫di mana kami tidak ingin membocorkan detail kesalahan ke klien.

71
00:03:14,720 --> 00:03:17,293
‫Jadi yang ini boleh saja disimpan.

72
00:03:18,380 --> 00:03:20,250
‫Yang ini juga ingin

73
00:03:20,250 --> 00:03:22,140
‫kami simpan untuk memberi tahu

74
00:03:22,140 --> 00:03:24,523
‫kami di log bahwa koneksi database berhasil.

75
00:03:25,440 --> 00:03:27,186
‫Yang ini di sini juga.

76
00:03:27,186 --> 00:03:30,500
‫Yang ini di sini sebenarnya ada di import-dev-data sehingga

77
00:03:30,500 --> 00:03:32,153
‫tidak penting sama sekali.

78
00:03:34,290 --> 00:03:36,523
‫Bagaimanapun, semua log di sini, mari kita simpan.

79
00:03:38,610 --> 00:03:41,298
‫Kemudian di sini, kita memiliki yang ini

80
00:03:41,298 --> 00:03:45,020
‫di sini, yang hanya benar-benar kita lakukan untuk menggunakan lapisan tengah ini.

81
00:03:45,020 --> 00:03:48,200
‫Jadi mari kita matikan layer tengah ini.

82
00:03:48,200 --> 00:03:50,140
‫Yang lagi kami hanya benar-benar

83
00:03:50,140 --> 00:03:52,733
‫digunakan untuk menguji posting ini menemukan lapisan tengah.

84
00:03:54,520 --> 00:03:56,533
‫Selanjutnya dalam model pengguna.

85
00:03:57,710 --> 00:04:00,690
‫Nah, yang satu ini juga tidak kita inginkan.

86
00:04:00,690 --> 00:04:03,293
‫Ini hanya sekali lagi untuk tujuan pengujian.

87
00:04:04,210 --> 00:04:06,370
‫Kemudian kami memiliki paket JSON,

88
00:04:06,370 --> 00:04:08,593
‫jadi ini sebenarnya tidak masuk ke log.

89
00:04:08,593 --> 00:04:10,470
‫Kemudian kita harus bundel

90
00:04:10,470 --> 00:04:13,180
‫di mana kita tidak akan mengubah apa pun.

91
00:04:13,180 --> 00:04:14,943
‫Kemudian kita memiliki index. js.

92
00:04:17,180 --> 00:04:20,030
‫Jadi itulah JavaScript sisi klien kami.

93
00:04:20,030 --> 00:04:22,473
‫Jadi mari kita singkirkan konsol ini. masuk di sini.

94
00:04:25,848 --> 00:04:28,840
‫Kemudian kami juga memiliki beberapa lagi di sini di logout

95
00:04:28,840 --> 00:04:30,640
‫tetapi yang ini mari kita simpan.

96
00:04:31,600 --> 00:04:33,263
‫Beberapa lagi bergaris.

97
00:04:34,210 --> 00:04:36,840
‫Dan kami tidak tertarik di sini dalam sesi ini.

98
00:04:36,840 --> 00:04:38,940
‫Tapi yang ini di sini ketika ada kesalahan

99
00:04:38,940 --> 00:04:40,133
‫sebenarnya tidak apa-apa.

100
00:04:41,660 --> 00:04:43,560
‫Dan kemudian di server. js, kami memiliki

101
00:04:43,560 --> 00:04:44,760
‫yang ini di sini,

102
00:04:44,760 --> 00:04:47,160
‫yang sebenarnya, sekali lagi, kami lakukan dengan sengaja.

103
00:04:47,160 --> 00:04:51,120
‫Sehingga mereka benar-benar muncul di file log kami.

104
00:04:51,120 --> 00:04:53,170
‫Dan jangan khawatir jika Anda tidak benar-benar tahu

105
00:04:53,170 --> 00:04:55,120
‫apa yang saya maksud dengan file log.

106
00:04:55,120 --> 00:04:56,790
‫Anda akan melihat setelah

107
00:04:56,790 --> 00:04:59,490
‫kami benar-benar memasukkan aplikasi kami ke Heroku.

108
00:04:59,490 --> 00:05:02,980
‫Jadi saya akan menunjukkan kepada Anda dengan file log saat itu, baiklah.

109
00:05:02,980 --> 00:05:06,360
‫Pokoknya, semua konsol ini. log di sini

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

111
00:05:08,550 --> 00:05:10,010
‫Dan begitu juga

112
00:05:10,010 --> 00:05:12,533
‫yang ini tentang koneksi database yang sukses.

113
00:05:13,410 --> 00:05:14,320
‫Yang ini

114
00:05:14,320 --> 00:05:17,410
‫di sini juga memberi tahu kami port tempat aplikasi berjalan.

115
00:05:17,410 --> 00:05:20,063
‫Dan yang ini, dan yang ini juga penting.

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

117
00:05:22,680 --> 00:05:25,080
‫Jadi dengan ini kami menangani semua konsol

118
00:05:25,080 --> 00:05:27,880
‫yang tidak perlu. log bahwa kami

119
00:05:27,880 --> 00:05:30,210
‫hanya mencemari keluaran log kami.

120
00:05:30,210 --> 00:05:33,893
‫Oke, jadi mari kita tutup semua file ini di sini.

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

122
00:05:41,230 --> 00:05:42,460
‫Dan sekarang,

123
00:05:42,460 --> 00:05:45,190
‫langkah selanjutnya, mari kita ubah URL atau kode

124
00:05:45,190 --> 00:05:47,073
‫API di sisi klien, JavaScript.

125
00:05:48,540 --> 00:05:51,720
‫Jadi misalnya di sini di login. js, sekarang

126
00:05:51,720 --> 00:05:54,170
‫kami melakukan kode API ini

127
00:05:54,170 --> 00:05:56,300
‫ke API pengembangan ini.

128
00:05:56,300 --> 00:05:58,803
‫Jadi di sini, kami tentu saja memiliki URL pengembangan kami.

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

130
00:06:01,126 --> 00:06:03,090
‫seperti ini, itu tidak akan

131
00:06:03,090 --> 00:06:04,840
‫berfungsi dalam produksi karena jelas

132
00:06:04,840 --> 00:06:08,740
‫dari sana, kami tidak akan dapat mengakses URL pengembangan apa pun.

133
00:06:08,740 --> 00:06:10,000
‫Dan sama di sini.

134
00:06:10,000 --> 00:06:13,050
‫Tapi untungnya, ada solusi yang sangat sederhana.

135
00:06:13,050 --> 00:06:17,360
‫Jadi yang perlu kita lakukan adalah benar-benar menyingkirkan bagian ini.

136
00:06:17,360 --> 00:06:19,760
‫Jadi jika kita hanya menghapusnya seperti

137
00:06:19,760 --> 00:06:22,740
‫ini, maka kita akan berakhir dengan URL relatif ini.

138
00:06:22,740 --> 00:06:24,810
‫Dan karena API dan

139
00:06:24,810 --> 00:06:27,060
‫situs web dihosting di server yang

140
00:06:27,060 --> 00:06:29,430
‫sama, ini akan berfungsi dengan baik.

141
00:06:29,430 --> 00:06:31,410
‫Jadi melakukannya seperti

142
00:06:31,410 --> 00:06:35,550
‫ini seperti menentukan jalur ke gambar dalam HTML.

143
00:06:35,550 --> 00:06:38,670
‫Misalnya, di sini, di halaman ikhtisar, di mana

144
00:06:38,670 --> 00:06:40,230
‫kita memiliki gambar-gambar

145
00:06:40,230 --> 00:06:42,660
‫ini, kita cukup mengatakan "/ img" dan

146
00:06:42,660 --> 00:06:44,990
‫itu akan pergi ke URL saat

147
00:06:44,990 --> 00:06:48,510
‫ini dan kemudian akan menambahkan jalur itu ke sana.

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

149
00:06:49,343 --> 00:06:51,980
‫Dan hal yang sama akan terjadi di sini.

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

151
00:06:52,930 --> 00:06:56,620
‫Sekali lagi, ini hanya berfungsi karena API dan situs web

152
00:06:56,620 --> 00:06:59,310
‫pada dasarnya menggunakan URL yang sama.

153
00:06:59,310 --> 00:07:01,810
‫Jadi kami menampung mereka di tempat yang sama.

154
00:07:01,810 --> 00:07:03,660
‫Tetapi jika Anda menghosting situs

155
00:07:03,660 --> 00:07:05,880
‫web Anda atau ujung depan Anda di

156
00:07:05,880 --> 00:07:08,260
‫satu URL, dan kemudian API Anda di URL

157
00:07:08,260 --> 00:07:11,110
‫lain, maka itu tidak akan berfungsi seperti ini, oke.

158
00:07:11,110 --> 00:07:14,730
‫Tetapi dalam aplikasi sederhana ini kita bisa melakukannya seperti ini karena

159
00:07:14,730 --> 00:07:17,173
‫kita memiliki pengaturan yang sangat sederhana ini.

160
00:07:20,160 --> 00:07:22,880
‫Jadi mari kita hapus di sini di login.

161
00:07:22,880 --> 00:07:26,030
‫Dalam indeks saya yakin kami tidak memiliki URL apa pun.

162
00:07:27,560 --> 00:07:28,563
‫Ya itu benar.

163
00:07:29,460 --> 00:07:31,140
‫Juga tidak dalam peringatan.

164
00:07:31,140 --> 00:07:34,063
‫Tidak di Mapbox saya percaya.

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

166
00:07:38,280 --> 00:07:39,763
‫Tapi pasti di garis.

167
00:07:40,780 --> 00:07:42,523
‫Jadi untuk mendapatkan sesi kami.

168
00:07:43,890 --> 00:07:46,880
‫Jadi kita bisa melakukan hal yang sama persis di sini.

169
00:07:46,880 --> 00:07:48,430
‫Dan juga di updateSettings.

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

171
00:07:54,350 --> 00:07:55,183
‫Berikan simpanan.

172
00:07:55,183 --> 00:07:56,800
‫Dan semuanya.

173
00:07:56,800 --> 00:07:59,780
‫Dan yang satu itu juga diperbaiki.

174
00:07:59,780 --> 00:08:02,890
‫Dan sekarang akhirnya, dan terus bekerja pada JavaScript

175
00:08:02,890 --> 00:08:04,460
‫sisi klien, kita

176
00:08:04,460 --> 00:08:06,473
‫perlu membuat bundel terakhir kita.

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

178
00:08:08,250 --> 00:08:11,420
‫Jadi sekarang, ini adalah file JavaScript bundel kami.

179
00:08:11,420 --> 00:08:13,680
‫Tetapi ingat bahwa ini baru saja

180
00:08:13,680 --> 00:08:15,453
‫dibuat menggunakan fungsi arloji.

181
00:08:17,607 --> 00:08:18,920
‫Jadi dalam paket kami. json

182
00:08:18,920 --> 00:08:22,350
‫kita punya jam tangan ini. js yang hanya akan

183
00:08:22,350 --> 00:08:25,540
‫membuat bundel baru setiap kali kami mengubah salah satu file.

184
00:08:25,540 --> 00:08:27,030
‫Tetapi tanpa kompresi

185
00:08:27,030 --> 00:08:29,723
‫apa pun, atau tanpa pengoptimalan kinerja apa pun.

186
00:08:30,720 --> 00:08:33,670
‫Tapi sekarang setelah kita benar-benar selesai dengan semua

187
00:08:33,670 --> 00:08:36,430
‫JavaScript kita, kita siap untuk benar-benar membangun JavaScript

188
00:08:36,430 --> 00:08:38,200
‫kita menjadi bundel terakhir.

189
00:08:38,200 --> 00:08:42,120
‫Dan di sini kita harus mengganti jam tangan ini dengan

190
00:08:42,120 --> 00:08:43,730
‫build, dan kemudian

191
00:08:43,730 --> 00:08:46,860
‫akan membuat bundel JavaScript terkompresi terakhir kita.

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

193
00:08:48,100 --> 00:08:50,590
‫Jadi mari kita coba di sini sekarang.

194
00:08:50,590 --> 00:08:51,963
‫Dengan menjalankan npm.

195
00:08:54,190 --> 00:08:57,023
‫Dan sekali lagi dengan tab untuk melengkapi otomatis.

196
00:09:00,050 --> 00:09:01,810
‫Jadi mari kita lihat apakah...

197
00:09:01,810 --> 00:09:03,530
‫Dan itu selesai.

198
00:09:03,530 --> 00:09:06,593
‫Jadi mari kita lihat bundel kami sekarang.

199
00:09:07,610 --> 00:09:10,560
‫Dan untuk melihatnya sekarang, itu benar-benar dikompresi

200
00:09:10,560 --> 00:09:12,003
‫dengan baik.

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

202
00:09:14,800 --> 00:09:19,000
‫Sekarang Anda juga melihat bahwa kami memiliki banyak sekali file baru ini

203
00:09:19,000 --> 00:09:23,110
‫di sini dan itu karena Anda berada di pohon file kami.

204
00:09:23,110 --> 00:09:26,230
‫Parcel sebenarnya membuat folder cache ini.

205
00:09:26,230 --> 00:09:31,230
‫Tetapi kami tidak ingin folder itu ada di penyimpanan git kami.

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

207
00:09:32,193 --> 00:09:33,300
‫Jadi mari kita tambahkan di sini.

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

209
00:09:39,610 --> 00:09:42,280
‫sekarang Anda melihat bahwa secara otomatis

210
00:09:42,280 --> 00:09:44,560
‫segera setelah kami menyimpannya, itu

211
00:09:44,560 --> 00:09:47,910
‫akan kembali ke file asli yang diperbarui.

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

213
00:09:48,743 --> 00:09:51,380
‫Jadi sekali lagi, VS Code sangat

214
00:09:51,380 --> 00:09:54,380
‫pintar dalam segala hal yang berhubungan dengan git.

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

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

217
00:09:57,383 --> 00:09:59,403
‫Dan saya pikir itu sebenarnya.

218
00:10:00,755 --> 00:10:03,840
‫Jadi aplikasi kita sekarang siap untuk benar-benar di-deploy.

219
00:10:03,840 --> 00:10:06,800
‫Dan sekarang langkah terakhir adalah untuk benar-benar

220
00:10:06,800 --> 00:10:10,300
‫mengkomit semua file yang dimodifikasi ini ke repositori kami.

221
00:10:10,300 --> 00:10:13,490
‫Jadi ingat bahwa langkah pertama adalah menambahkan semua file

222
00:10:13,490 --> 00:10:14,643
‫ke staging area.

223
00:10:15,510 --> 00:10:19,740
‫Jadi git add, dan dalam hal ini, semua file.

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

225
00:10:20,660 --> 00:10:24,880
‫Dan sekarang yang perlu kita lakukan

226
00:10:24,880 --> 00:10:27,907
‫adalah git commit, lalu

227
00:10:27,907 --> 00:10:32,907
‫pesan, dan katakanlah, "Aplikasi yang disiapkan untuk penerapan".

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

229
00:10:35,803 --> 00:10:38,820
‫Jadi Anda melihat bahwa semua modifikasi kami hilang.

230
00:10:38,820 --> 00:10:40,290
‫Juga dari sini.

231
00:10:40,290 --> 00:10:42,700
‫Yang berarti bahwa cabang kerja saat

232
00:10:42,700 --> 00:10:44,333
‫ini, disebut bersih.

233
00:10:45,735 --> 00:10:48,810
‫Dan ya, kami sebenarnya sekarang siap untuk menerapkan aplikasi kami

234
00:10:48,810 --> 00:10:49,823
‫di video berikutnya.