‫Instruktur: Sekarang
‫mari kita gunakan fungsi middleware
‫pihak ketiga dari npm yang disebut
‫Morgan untuk membuat hidup pengembangan kita sedikit lebih mudah.
‫Jadi, seperti yang saya sebutkan, kita akan
‫menggunakan middleware bernama Morgan yang merupakan middleware logging yang sangat populer.
‫Jadi, middleware yang memungkinkan kita melihat data permintaan
‫langsung di konsol.
‫Oke, jadi biarkan saya melanjutkan dan menginstalnya dan
‫Anda akan melihat cara kerjanya, oke?
‫Jadi, saya tidak ingin menyelesaikan proses ini di sini, jadi saya akan
‫membuat terminal baru di sini dalam Kode VS dan,
‫untuk itu saya menekan tombol plus ini di sini
‫dan jadi, sekarang kita mendapatkan terminal
‫baru dan saya
‫tidak 't ingin memperbarui, jadi tidak, dan sekarang npm install morgan.
‫Oke, seperti yang saya sebutkan,
‫middleware logging ini akan
‫membuat hidup pengembangan kita sedikit lebih mudah.
‫Tapi itu masih
‫kode yang sebenarnya akan kita sertakan dalam aplikasi
‫kita dan jadi, itu sebabnya itu bukan ketergantungan pengembangan
‫tetapi hanya ketergantungan biasa yang sederhana, oke
‫dan jadi, itu sebabnya saya tidak menentukan save dev di
‫sini karena sekali lagi, itu bukan ketergantungan dev benar-benar.
‫Oke, jadi kami memilikinya dalam paket kami. json di sini sekarang, morgan dan
‫sebagainya, mari kita lanjutkan dan memintanya dalam kode kita.
‫Jadi, sekali lagi tepat di atas sini
‫const morgan sama dengan require morgan dan Anda melihat
‫lagi konvensi semacam ini yang
‫akan diekspos jika
‫Anda menggunakan nama yang sama dengan nama paket itu sendiri.
‫Jadi, kami memiliki middlewares kami di
‫sini, jadi mari tambahkan tepat setelah ini atau
‫benar-benar menulis sebagai yang pertama.
‫Oke, dan kode sumber berkembang sedikit,
‫jadi mari
‫kita lanjutkan dan tambahkan beberapa
‫komentar di sini, jadi
‫middlewares pertama, lalu di sini kita mulai memiliki penangan rute kita.
‫Benar, maka di sini katakan saja kita memiliki rute kita sendiri.
‫Dan akhirnya di sini kita
‫memulai server.
‫Oke, hanya untuk membuat kode kita sedikit lebih
‫mudah dibaca dan dipindai.
‫Jadi, kita memiliki middleware pertama ini tetapi
‫sekali lagi mari kita gunakan milik kita sebelumnya.
‫Jadi, tentu saja aplikasi. gunakan dan
‫sekarang di sini kita sebut morgan.
‫Oke dan ke dalam fungsi
‫ini, kita dapat memberikan
‫argumen yang akan
‫menentukan seperti apa tampilan logging yang kita inginkan.
‫Jadi, kita dapat menggunakan beberapa string yang telah ditentukan untuk itu
‫dan salah satu yang akan saya gunakan disebut dev.
‫Dan sebenarnya Anda dapat melihat di sini berbagai opsi
‫sehingga VS Code sangat cerdas dan
‫dapat memberi saya opsi
‫yang dapat kami berikan ke dalam fungsi ini.
‫Oke, jadi seperti yang
‫saya sebutkan, saya akan menggunakan yang disebut dev.
‫Oke dan jadi itu sebenarnya.
‫Jadi, kami membutuhkannya dan
‫kemudian di sini kami menggunakannya.
‫Jadi, hal-hal yang sangat
‫sederhana tetapi saya
‫pikir penting untuk benar-benar mencoba memahami cara kerjanya.
‫Jadi, memanggil fungsi morgan ini akan
‫mengembalikan fungsi yang mirip dengan yang ini di sini
‫dan ini, itu masuk
‫akal karena sementara ini adalah bagaimana fungsi middleware
‫harus terlihat dan jadi, izinkan saya membuktikannya kepada Anda dengan
‫melihat kode sumber untuk paket
‫ini dan
‫itu adalah latihan lain yang sangat bagus
‫dari mana kita sebenarnya bisa belajar sedikit.
‫Jadi, mari kita cari morgan di GitHub, jadi biasanya semua paket
‫ini selalu ada di GitHub dan,
‫di situlah kita bisa melihat
‫kode sumber terbukanya.
‫Oke dan morgan sebenarnya adalah paket yang sangat sederhana dan jadi, yang harus kita
‫lakukan adalah pergi ke indeks ini. js, jadi biasanya itu
‫adalah titik masuk dan dalam
‫hal ini, ini adalah satu-satunya file yang ada.
‫Oke, sekarang, saya tidak akan membahas semua kode ini
‫tetapi saya ingin menyoroti bahwa ekspor utama
‫dari file ini di sini adalah morgan, jadi
‫fungsi yang disebut morgan, jadi mari
‫kita cari
‫dan sebenarnya ini dia.
‫Oke, jadi ketika kita membutuhkan paket dalam kode
‫kita, apa yang akan dikembalikan adalah fungsi morgan ini, kan?
‫Sekali lagi karena mereka menggunakan modul. ekspor dan
‫itu adalah ekspor default seperti yang
‫kita pelajari di modul yang membutuhkan kuliah satu
‫atau dua bagian yang lalu, bukan?
‫Jadi, sekali lagi fungsi
‫morgan ini akan menjadi fungsi morgan ini di sini dalam kode ini, oke?
‫Jadi, mari kita lihat apa
‫fungsi ini dan saya tidak peduli dengan implementasi ini
‫di sini,
‫yang benar-benar ingin saya tunjukkan kepada Anda adalah bahwa fungsi ini
‫sebenarnya mengembalikan fungsi lain
‫yang merupakan pencatat dan Anda melihat
‫bahwa fungsi ini hanya memiliki
‫fungsi kita sendiri. fungsi middleware memiliki tanda tangan permintaan,
‫respons, dan berikutnya yang sangat khas ini.
‫Oke?
‫Jadi, fungsi ini seperti fungsi middleware kita sendiri.
‫Jadi, Anda melihat bahwa sebenarnya pada
‫akhirnya ketika sudah siap, itu juga memanggil berikutnya,
‫jadi seperti yang kita lakukan.
‫Jadi, ini hanyalah fungsi
‫middleware biasa seperti yang kami tulis.
‫Oke?
‫Jadi, mari kembali ke sini dan
‫sekarang mari kita lihat hasilnya di sini di terminal kita, jadi
‫mari kembali ke yang pertama, jadi beginilah
‫cara kita beralih di antara
‫terminal berbeda yang telah kita buka di VS Code.
‫Beri kami lebih banyak ruang di
‫sini, bersihkan
‫ini karena Anda mungkin tidak dapat melihat
‫bagian bawah layar dengan baik.
‫Jadi ya, sekarang mari
‫kita buat permintaan
‫saja, oke, kembali dan ini dia.
‫Jadi, kami memiliki informasi tentang permintaan yang
‫baru saja kami lakukan.
‫Jadi, kami mendapatkan metode
‫HTTP, kami mendapatkan URL, kami mendapatkan kode status,
‫waktu yang diperlukan untuk mengirim kembali
‫respons dan juga ukuran respons dalam byte.
‫Jadi, ingat kita bisa menggunakan opsi lain
‫di sini, misalnya, kecil adalah yang
‫lain, sehingga mungkin akan terlihat sedikit berbeda dan sebenarnya
‫terlihat mirip di sini.
‫Itu tidak melakukan pewarnaan
‫kode status ini
‫dan juga memiliki urutan yang sedikit berbeda di sini.
‫Oke dan jika kami melakukan sesuatu, jika kami menyebabkan
‫kesalahan, misalnya, 404, mari kita uji dengan
‫menggunakan ID yang tidak valid di sini, sehingga
‫akan mendapatkan warna lain di sini, kan, Anda
‫bisa melihatnya?
‫Mari kita lakukan itu lagi kalau-kalau Anda tidak melihatnya.
‫Jadi, ya, itu memberi kita warna yang berbeda.
‫Jadi, ya, itu bisa sangat berguna untuk pengembangan.
‫Anda sebenarnya bisa menyimpan log
‫ini ke file tapi itu terlalu banyak untuk contoh
‫kecil ini,
‫jadi ini lebih dari cukup
‫dan Anda akan melihat
‫sepanjang kursus bahwa itu berguna untuk benar-benar memilikinya di sini.
‫Oke, ini adalah cara kami menggunakan middleware
‫pihak ketiga dari npm dan ada banyak middleware di sana dan izinkan
‫saya menunjukkannya kepada Anda.
‫Jadi, di situs
‫Express sendiri, jadi expressjs. com dan kami sebenarnya tidak pernah
‫mengunjungi situs web ini,
‫jadi itu sebenarnya cukup bagus, jadi
‫Anda memiliki ini. Memulai dengan beberapa artikel yang
‫menjelaskan dasar-dasar Express dan kemudian Anda memiliki referensi API
‫yang bagus dalam kasus kami, 4. x dan sebagainya, di sini Anda memiliki
‫semua metode yang
‫ada dalam permintaan, jadi tentu saja
‫metode pada properti, jadi semua hal
‫yang kita miliki, misalnya, permintaan. tubuh yang sudah kami
‫gunakan atau di sini pada respons, Anda
‫memiliki, misalnya, respons. json atau
‫respon. kirim
‫dan ada banyak metode lain dan
‫kami akan menggunakan banyak dari mereka nanti
‫tetapi kemudian di sini Anda memiliki sumber daya ini
‫dan salah satu yang
‫ingin saya tunjukkan adalah middleware dan, ini adalah sekelompok
‫middleware yang dapat
‫Anda gunakan dan Express merekomendasikan, oke?
‫Dan sekali lagi, kami akan menggunakan beberapa di antaranya
‫nanti dan sebenarnya Express merekomendasikan ini
‫karena banyak dari ini digunakan untuk dibangun di Express
‫3, jadi
‫di versi sebelumnya tetapi kemudian dikeluarkan dari Express.
‫Misalnya, tubuh. parser adalah salah
‫satunya tetapi sebenarnya dalam versi
‫empat poin, saya percaya 14 atau 16, itu ditambahkan
‫kembali dan itulah mengapa kami dapat melakukannya mari kita lihat, di
‫mana itu?
‫Ya, itu sebabnya kami bisa menggunakan ekspresi. json untuk
‫mengurai data dari badan.
‫Sebelum itu, kita sebenarnya harus menggunakan tubuh. parser dari npm dan
‫gunakan yang itu untuk mengurai data dari badan tetapi sekali
‫lagi, mereka baru saja menambahkannya
‫kembali untuk sedikit mengurangi kebingungan bagi pemula seperti Anda.
‫Oke, jadi bermainlah sedikit
‫dengan referensi ini.
‫Lihatlah beberapa
‫hal yang mungkin sudah kami lakukan jika Anda
‫suka atau tidak, Anda selalu dapat melanjutkan
‫ke video berikutnya.