1
00:00:01,350 --> 00:00:02,270
‫Instruktur: Sekarang

2
00:00:02,270 --> 00:00:04,360
‫mari kita gunakan fungsi middleware

3
00:00:04,360 --> 00:00:06,880
‫pihak ketiga dari npm yang disebut

4
00:00:06,880 --> 00:00:10,313
‫Morgan untuk membuat hidup pengembangan kita sedikit lebih mudah.

5
00:00:11,890 --> 00:00:14,450
‫Jadi, seperti yang saya sebutkan, kita akan

6
00:00:14,450 --> 00:00:18,400
‫menggunakan middleware bernama Morgan yang merupakan middleware logging yang sangat populer.

7
00:00:18,400 --> 00:00:21,960
‫Jadi, middleware yang memungkinkan kita melihat data permintaan

8
00:00:21,960 --> 00:00:23,640
‫langsung di konsol.

9
00:00:23,640 --> 00:00:26,320
‫Oke, jadi biarkan saya melanjutkan dan menginstalnya dan

10
00:00:26,320 --> 00:00:28,863
‫Anda akan melihat cara kerjanya, oke?

11
00:00:28,863 --> 00:00:33,340
‫Jadi, saya tidak ingin menyelesaikan proses ini di sini, jadi saya akan

12
00:00:33,340 --> 00:00:36,900
‫membuat terminal baru di sini dalam Kode VS dan,

13
00:00:36,900 --> 00:00:40,300
‫untuk itu saya menekan tombol plus ini di sini

14
00:00:40,300 --> 00:00:42,750
‫dan jadi, sekarang kita mendapatkan terminal

15
00:00:42,750 --> 00:00:44,390
‫baru dan saya

16
00:00:44,390 --> 00:00:48,853
‫tidak 't ingin memperbarui, jadi tidak, dan sekarang npm install morgan.

17
00:00:50,340 --> 00:00:52,500
‫Oke, seperti yang saya sebutkan,

18
00:00:52,500 --> 00:00:54,330
‫middleware logging ini akan

19
00:00:54,330 --> 00:00:57,340
‫membuat hidup pengembangan kita sedikit lebih mudah.

20
00:00:57,340 --> 00:00:58,710
‫Tapi itu masih

21
00:00:58,710 --> 00:01:01,470
‫kode yang sebenarnya akan kita sertakan dalam aplikasi

22
00:01:01,470 --> 00:01:04,630
‫kita dan jadi, itu sebabnya itu bukan ketergantungan pengembangan

23
00:01:04,630 --> 00:01:07,270
‫tetapi hanya ketergantungan biasa yang sederhana, oke

24
00:01:07,270 --> 00:01:10,800
‫dan jadi, itu sebabnya saya tidak menentukan save dev di

25
00:01:10,800 --> 00:01:14,110
‫sini karena sekali lagi, itu bukan ketergantungan dev benar-benar.

26
00:01:14,110 --> 00:01:18,640
‫Oke, jadi kami memilikinya dalam paket kami. json di sini sekarang, morgan dan

27
00:01:18,640 --> 00:01:21,763
‫sebagainya, mari kita lanjutkan dan memintanya dalam kode kita.

28
00:01:23,190 --> 00:01:26,593
‫Jadi, sekali lagi tepat di atas sini

29
00:01:29,500 --> 00:01:33,450
‫const morgan sama dengan require morgan dan Anda melihat

30
00:01:33,450 --> 00:01:35,800
‫lagi konvensi semacam ini yang

31
00:01:35,800 --> 00:01:37,530
‫akan diekspos jika

32
00:01:37,530 --> 00:01:41,750
‫Anda menggunakan nama yang sama dengan nama paket itu sendiri.

33
00:01:41,750 --> 00:01:43,850
‫Jadi, kami memiliki middlewares kami di

34
00:01:43,850 --> 00:01:46,590
‫sini, jadi mari tambahkan tepat setelah ini atau

35
00:01:46,590 --> 00:01:48,623
‫benar-benar menulis sebagai yang pertama.

36
00:01:49,480 --> 00:01:52,150
‫Oke, dan kode sumber berkembang sedikit,

37
00:01:52,150 --> 00:01:53,300
‫jadi mari

38
00:01:53,300 --> 00:01:55,670
‫kita lanjutkan dan tambahkan beberapa

39
00:01:55,670 --> 00:01:57,603
‫komentar di sini, jadi

40
00:02:01,170 --> 00:02:05,753
‫middlewares pertama, lalu di sini kita mulai memiliki penangan rute kita.

41
00:02:11,510 --> 00:02:15,623
‫Benar, maka di sini katakan saja kita memiliki rute kita sendiri.

42
00:02:20,050 --> 00:02:21,950
‫Dan akhirnya di sini kita

43
00:02:21,950 --> 00:02:23,173
‫memulai server.

44
00:02:28,405 --> 00:02:31,630
‫Oke, hanya untuk membuat kode kita sedikit lebih

45
00:02:31,630 --> 00:02:33,700
‫mudah dibaca dan dipindai.

46
00:02:33,700 --> 00:02:35,980
‫Jadi, kita memiliki middleware pertama ini tetapi

47
00:02:35,980 --> 00:02:38,453
‫sekali lagi mari kita gunakan milik kita sebelumnya.

48
00:02:39,520 --> 00:02:41,750
‫Jadi, tentu saja aplikasi. gunakan dan

49
00:02:41,750 --> 00:02:44,223
‫sekarang di sini kita sebut morgan.

50
00:02:45,300 --> 00:02:47,040
‫Oke dan ke dalam fungsi

51
00:02:47,040 --> 00:02:48,460
‫ini, kita dapat memberikan

52
00:02:48,460 --> 00:02:49,684
‫argumen yang akan

53
00:02:49,684 --> 00:02:52,310
‫menentukan seperti apa tampilan logging yang kita inginkan.

54
00:02:52,310 --> 00:02:54,920
‫Jadi, kita dapat menggunakan beberapa string yang telah ditentukan untuk itu

55
00:02:54,920 --> 00:02:57,493
‫dan salah satu yang akan saya gunakan disebut dev.

56
00:02:58,550 --> 00:03:01,140
‫Dan sebenarnya Anda dapat melihat di sini berbagai opsi

57
00:03:01,140 --> 00:03:03,180
‫sehingga VS Code sangat cerdas dan

58
00:03:03,180 --> 00:03:04,613
‫dapat memberi saya opsi

59
00:03:04,613 --> 00:03:07,170
‫yang dapat kami berikan ke dalam fungsi ini.

60
00:03:07,170 --> 00:03:08,500
‫Oke, jadi seperti yang

61
00:03:08,500 --> 00:03:11,080
‫saya sebutkan, saya akan menggunakan yang disebut dev.

62
00:03:11,080 --> 00:03:13,650
‫Oke dan jadi itu sebenarnya.

63
00:03:13,650 --> 00:03:15,180
‫Jadi, kami membutuhkannya dan

64
00:03:15,180 --> 00:03:16,960
‫kemudian di sini kami menggunakannya.

65
00:03:16,960 --> 00:03:18,500
‫Jadi, hal-hal yang sangat

66
00:03:18,500 --> 00:03:19,860
‫sederhana tetapi saya

67
00:03:19,860 --> 00:03:23,170
‫pikir penting untuk benar-benar mencoba memahami cara kerjanya.

68
00:03:23,170 --> 00:03:25,260
‫Jadi, memanggil fungsi morgan ini akan

69
00:03:25,260 --> 00:03:28,407
‫mengembalikan fungsi yang mirip dengan yang ini di sini

70
00:03:28,407 --> 00:03:29,910
‫dan ini, itu masuk

71
00:03:29,910 --> 00:03:32,550
‫akal karena sementara ini adalah bagaimana fungsi middleware

72
00:03:32,550 --> 00:03:36,010
‫harus terlihat dan jadi, izinkan saya membuktikannya kepada Anda dengan

73
00:03:36,010 --> 00:03:37,720
‫melihat kode sumber untuk paket

74
00:03:37,720 --> 00:03:38,810
‫ini dan

75
00:03:38,810 --> 00:03:41,170
‫itu adalah latihan lain yang sangat bagus

76
00:03:41,170 --> 00:03:43,513
‫dari mana kita sebenarnya bisa belajar sedikit.

77
00:03:45,090 --> 00:03:50,090
‫Jadi, mari kita cari morgan di GitHub, jadi biasanya semua paket

78
00:03:50,440 --> 00:03:53,430
‫ini selalu ada di GitHub dan,

79
00:03:53,430 --> 00:03:55,620
‫di situlah kita bisa melihat

80
00:03:55,620 --> 00:03:57,463
‫kode sumber terbukanya.

81
00:03:58,410 --> 00:04:02,160
‫Oke dan morgan sebenarnya adalah paket yang sangat sederhana dan jadi, yang harus kita

82
00:04:02,160 --> 00:04:05,930
‫lakukan adalah pergi ke indeks ini. js, jadi biasanya itu

83
00:04:05,930 --> 00:04:08,000
‫adalah titik masuk dan dalam

84
00:04:08,000 --> 00:04:11,233
‫hal ini, ini adalah satu-satunya file yang ada.

85
00:04:12,680 --> 00:04:16,020
‫Oke, sekarang, saya tidak akan membahas semua kode ini

86
00:04:16,020 --> 00:04:18,510
‫tetapi saya ingin menyoroti bahwa ekspor utama

87
00:04:18,510 --> 00:04:21,330
‫dari file ini di sini adalah morgan, jadi

88
00:04:21,330 --> 00:04:23,780
‫fungsi yang disebut morgan, jadi mari

89
00:04:23,780 --> 00:04:24,880
‫kita cari

90
00:04:26,070 --> 00:04:27,623
‫dan sebenarnya ini dia.

91
00:04:28,460 --> 00:04:31,960
‫Oke, jadi ketika kita membutuhkan paket dalam kode

92
00:04:31,960 --> 00:04:35,520
‫kita, apa yang akan dikembalikan adalah fungsi morgan ini, kan?

93
00:04:35,520 --> 00:04:38,190
‫Sekali lagi karena mereka menggunakan modul. ekspor dan

94
00:04:38,190 --> 00:04:41,110
‫itu adalah ekspor default seperti yang

95
00:04:41,110 --> 00:04:44,650
‫kita pelajari di modul yang membutuhkan kuliah satu

96
00:04:44,650 --> 00:04:47,650
‫atau dua bagian yang lalu, bukan?

97
00:04:47,650 --> 00:04:49,720
‫Jadi, sekali lagi fungsi

98
00:04:49,720 --> 00:04:54,720
‫morgan ini akan menjadi fungsi morgan ini di sini dalam kode ini, oke?

99
00:04:55,520 --> 00:04:57,490
‫Jadi, mari kita lihat apa

100
00:04:57,490 --> 00:05:00,830
‫fungsi ini dan saya tidak peduli dengan implementasi ini

101
00:05:00,830 --> 00:05:02,150
‫di sini,

102
00:05:02,150 --> 00:05:06,000
‫yang benar-benar ingin saya tunjukkan kepada Anda adalah bahwa fungsi ini

103
00:05:06,000 --> 00:05:07,650
‫sebenarnya mengembalikan fungsi lain

104
00:05:07,650 --> 00:05:09,850
‫yang merupakan pencatat dan Anda melihat

105
00:05:09,850 --> 00:05:11,600
‫bahwa fungsi ini hanya memiliki

106
00:05:11,600 --> 00:05:14,630
‫fungsi kita sendiri. fungsi middleware memiliki tanda tangan permintaan,

107
00:05:14,630 --> 00:05:17,020
‫respons, dan berikutnya yang sangat khas ini.

108
00:05:17,020 --> 00:05:18,200
‫Oke?

109
00:05:18,200 --> 00:05:22,120
‫Jadi, fungsi ini seperti fungsi middleware kita sendiri.

110
00:05:22,120 --> 00:05:24,060
‫Jadi, Anda melihat bahwa sebenarnya pada

111
00:05:24,060 --> 00:05:26,620
‫akhirnya ketika sudah siap, itu juga memanggil berikutnya,

112
00:05:26,620 --> 00:05:28,250
‫jadi seperti yang kita lakukan.

113
00:05:28,250 --> 00:05:30,370
‫Jadi, ini hanyalah fungsi

114
00:05:30,370 --> 00:05:33,393
‫middleware biasa seperti yang kami tulis.

115
00:05:33,393 --> 00:05:35,078
‫Oke?

116
00:05:35,078 --> 00:05:37,067
‫Jadi, mari kembali ke sini dan

117
00:05:37,067 --> 00:05:40,430
‫sekarang mari kita lihat hasilnya di sini di terminal kita, jadi

118
00:05:40,430 --> 00:05:42,660
‫mari kembali ke yang pertama, jadi beginilah

119
00:05:42,660 --> 00:05:44,500
‫cara kita beralih di antara

120
00:05:44,500 --> 00:05:47,423
‫terminal berbeda yang telah kita buka di VS Code.

121
00:05:49,190 --> 00:05:51,190
‫Beri kami lebih banyak ruang di

122
00:05:51,190 --> 00:05:52,460
‫sini, bersihkan

123
00:05:52,460 --> 00:05:54,900
‫ini karena Anda mungkin tidak dapat melihat

124
00:05:54,900 --> 00:05:56,710
‫bagian bawah layar dengan baik.

125
00:05:56,710 --> 00:05:59,070
‫Jadi ya, sekarang mari

126
00:05:59,070 --> 00:06:00,893
‫kita buat permintaan

127
00:06:04,200 --> 00:06:07,240
‫saja, oke, kembali dan ini dia.

128
00:06:07,240 --> 00:06:09,730
‫Jadi, kami memiliki informasi tentang permintaan yang

129
00:06:09,730 --> 00:06:11,170
‫baru saja kami lakukan.

130
00:06:11,170 --> 00:06:13,060
‫Jadi, kami mendapatkan metode

131
00:06:13,060 --> 00:06:16,250
‫HTTP, kami mendapatkan URL, kami mendapatkan kode status,

132
00:06:16,250 --> 00:06:18,637
‫waktu yang diperlukan untuk mengirim kembali

133
00:06:18,637 --> 00:06:21,603
‫respons dan juga ukuran respons dalam byte.

134
00:06:22,440 --> 00:06:25,550
‫Jadi, ingat kita bisa menggunakan opsi lain

135
00:06:25,550 --> 00:06:28,183
‫di sini, misalnya, kecil adalah yang

136
00:06:28,183 --> 00:06:32,370
‫lain, sehingga mungkin akan terlihat sedikit berbeda dan sebenarnya

137
00:06:32,370 --> 00:06:34,680
‫terlihat mirip di sini.

138
00:06:34,680 --> 00:06:36,380
‫Itu tidak melakukan pewarnaan

139
00:06:36,380 --> 00:06:37,710
‫kode status ini

140
00:06:37,710 --> 00:06:40,923
‫dan juga memiliki urutan yang sedikit berbeda di sini.

141
00:06:43,760 --> 00:06:46,893
‫Oke dan jika kami melakukan sesuatu, jika kami menyebabkan

142
00:06:48,060 --> 00:06:50,880
‫kesalahan, misalnya, 404, mari kita uji dengan

143
00:06:50,880 --> 00:06:53,890
‫menggunakan ID yang tidak valid di sini, sehingga

144
00:06:56,380 --> 00:06:59,210
‫akan mendapatkan warna lain di sini, kan, Anda

145
00:06:59,210 --> 00:07:00,410
‫bisa melihatnya?

146
00:07:01,246 --> 00:07:03,530
‫Mari kita lakukan itu lagi kalau-kalau Anda tidak melihatnya.

147
00:07:03,530 --> 00:07:06,440
‫Jadi, ya, itu memberi kita warna yang berbeda.

148
00:07:06,440 --> 00:07:09,420
‫Jadi, ya, itu bisa sangat berguna untuk pengembangan.

149
00:07:09,420 --> 00:07:11,100
‫Anda sebenarnya bisa menyimpan log

150
00:07:11,100 --> 00:07:13,960
‫ini ke file tapi itu terlalu banyak untuk contoh

151
00:07:13,960 --> 00:07:15,060
‫kecil ini,

152
00:07:15,060 --> 00:07:16,460
‫jadi ini lebih dari cukup

153
00:07:16,460 --> 00:07:17,800
‫dan Anda akan melihat

154
00:07:17,800 --> 00:07:20,910
‫sepanjang kursus bahwa itu berguna untuk benar-benar memilikinya di sini.

155
00:07:20,910 --> 00:07:23,620
‫Oke, ini adalah cara kami menggunakan middleware

156
00:07:23,620 --> 00:07:28,160
‫pihak ketiga dari npm dan ada banyak middleware di sana dan izinkan

157
00:07:28,160 --> 00:07:30,010
‫saya menunjukkannya kepada Anda.

158
00:07:31,970 --> 00:07:34,143
‫Jadi, di situs

159
00:07:37,850 --> 00:07:42,290
‫Express sendiri, jadi expressjs. com dan kami sebenarnya tidak pernah

160
00:07:42,290 --> 00:07:44,170
‫mengunjungi situs web ini,

161
00:07:44,170 --> 00:07:46,490
‫jadi itu sebenarnya cukup bagus, jadi

162
00:07:46,490 --> 00:07:49,410
‫Anda memiliki ini. Memulai dengan beberapa artikel yang

163
00:07:49,410 --> 00:07:52,730
‫menjelaskan dasar-dasar Express dan kemudian Anda memiliki referensi API

164
00:07:52,730 --> 00:07:57,400
‫yang bagus dalam kasus kami, 4. x dan sebagainya, di sini Anda memiliki

165
00:07:57,400 --> 00:07:58,713
‫semua metode yang

166
00:07:59,970 --> 00:08:01,980
‫ada dalam permintaan, jadi tentu saja

167
00:08:01,980 --> 00:08:03,980
‫metode pada properti, jadi semua hal

168
00:08:03,980 --> 00:08:07,294
‫yang kita miliki, misalnya, permintaan. tubuh yang sudah kami

169
00:08:07,294 --> 00:08:10,020
‫gunakan atau di sini pada respons, Anda

170
00:08:10,020 --> 00:08:12,920
‫memiliki, misalnya, respons. json atau

171
00:08:12,920 --> 00:08:14,610
‫respon. kirim

172
00:08:14,610 --> 00:08:16,870
‫dan ada banyak metode lain dan

173
00:08:16,870 --> 00:08:19,587
‫kami akan menggunakan banyak dari mereka nanti

174
00:08:19,587 --> 00:08:22,840
‫tetapi kemudian di sini Anda memiliki sumber daya ini

175
00:08:22,840 --> 00:08:24,210
‫dan salah satu yang

176
00:08:24,210 --> 00:08:27,280
‫ingin saya tunjukkan adalah middleware dan, ini adalah sekelompok

177
00:08:27,280 --> 00:08:28,520
‫middleware yang dapat

178
00:08:28,520 --> 00:08:30,790
‫Anda gunakan dan Express merekomendasikan, oke?

179
00:08:30,790 --> 00:08:33,890
‫Dan sekali lagi, kami akan menggunakan beberapa di antaranya

180
00:08:33,890 --> 00:08:36,220
‫nanti dan sebenarnya Express merekomendasikan ini

181
00:08:36,220 --> 00:08:39,510
‫karena banyak dari ini digunakan untuk dibangun di Express

182
00:08:39,510 --> 00:08:40,650
‫3, jadi

183
00:08:40,650 --> 00:08:43,550
‫di versi sebelumnya tetapi kemudian dikeluarkan dari Express.

184
00:08:43,550 --> 00:08:46,170
‫Misalnya, tubuh. parser adalah salah

185
00:08:46,170 --> 00:08:48,430
‫satunya tetapi sebenarnya dalam versi

186
00:08:48,430 --> 00:08:51,910
‫empat poin, saya percaya 14 atau 16, itu ditambahkan

187
00:08:51,910 --> 00:08:56,260
‫kembali dan itulah mengapa kami dapat melakukannya mari kita lihat, di

188
00:08:56,260 --> 00:08:57,380
‫mana itu?

189
00:08:57,380 --> 00:09:00,830
‫Ya, itu sebabnya kami bisa menggunakan ekspresi. json untuk

190
00:09:00,830 --> 00:09:03,380
‫mengurai data dari badan.

191
00:09:03,380 --> 00:09:07,360
‫Sebelum itu, kita sebenarnya harus menggunakan tubuh. parser dari npm dan

192
00:09:07,360 --> 00:09:11,620
‫gunakan yang itu untuk mengurai data dari badan tetapi sekali

193
00:09:11,620 --> 00:09:14,040
‫lagi, mereka baru saja menambahkannya

194
00:09:14,040 --> 00:09:18,210
‫kembali untuk sedikit mengurangi kebingungan bagi pemula seperti Anda.

195
00:09:18,210 --> 00:09:20,130
‫Oke, jadi bermainlah sedikit

196
00:09:20,130 --> 00:09:21,950
‫dengan referensi ini.

197
00:09:21,950 --> 00:09:23,120
‫Lihatlah beberapa

198
00:09:23,120 --> 00:09:26,032
‫hal yang mungkin sudah kami lakukan jika Anda

199
00:09:26,032 --> 00:09:28,660
‫suka atau tidak, Anda selalu dapat melanjutkan

200
00:09:28,660 --> 00:09:29,963
‫ke video berikutnya.