‫Instruktur: Sekarang mari kita sepenuhnya memperbaiki aplikasi
‫kita yang kita miliki sejauh ini, dan
‫membuat banyak file baru, dan
‫struktur file yang sama sekali baru.
‫Jadi ingat dari video terakhir bahwa
‫kami ingin memisahkan router kami menjadi file
‫yang berbeda.
‫Dan itu akan menjadi langkah pertama yang akan kita lakukan di sini.
‫Jadi saya akan membuat folder baru bernama Routes sekarang,
‫dan kemudian di sana saya akan memiliki satu folder untuk rute tur. js, dan kemudian rute pengguna,. js juga.
‫Oke, jadi ini akan menjadi pertama kalinya kita benar-benar bekerja
‫dengan modul yang berbeda, oke,
‫dan benar-benar menggunakannya dengan cara yang sangat berarti.
‫Jadi, mari kita mulai dengan router tur.
‫Salin di sini, lalu ambil router tur ini
‫di sini, dan taruh di sini.
‫Jadi, selanjutnya kita perlu benar-benar Express di sini, karena kita
‫menggunakan variabel
‫itu, jadi kita perlu mengimpor modul Express.
‫Jadi
‫ekspres, butuh ekspres.
‫Oke, itu semacam
‫konvensi untuk hanya memanggil router ini, dan bukan tourRouter.
‫Jadi router, dan sekarang kita akan mengekspor router, dan kemudian mengimpornya ke aplikasi
‫utama kita, oke?
‫Jadi, ingat bagaimana kami melakukannya ketika kami
‫hanya memiliki satu hal untuk diekspor?
‫Nah, kita menggunakan modul. ekspor, lalu
‫letakkan router di sana.
‫Simpan, dan tentu
‫saja, kami masih mendapatkan beberapa kesalahan, tetapi itu karena
‫router tur tidak ditentukan dalam file aplikasi utama kami.
‫Oke, juga yang tidak
‫didefinisikan dalam file ini adalah semua fungsi ini di sini.
‫Oke, jadi mari kita cepat mendapatkannya, dan
‫memasukkannya ke dalam file router.
‫Setidaknya untuk saat ini, kita nanti akan membuat
‫file baru untuk itu juga.
‫Jadi itu dimulai di sini.
‫Hati-hati, tidak menyalin semuanya.
‫Ya, jadi seperti ini.
‫Dan sebenarnya, saya akan menempatkan mereka sebelum rute.
‫Berikan simpanan.
‫Dan itu harus bekerja sekarang.
‫Dan sekarang lakukan hal yang sama untuk pengguna.
‫Jadi dapatkan routernya.
‫Dan jangan khawatir tentang semua kesalahan yang kami dapatkan.
‫Sekali lagi, itu hanya
‫karena kita kehilangan beberapa variabel di beberapa tempat.
‫Jadi sekali lagi, kami akan mengungkapkan di sini,
‫lalu kami menyebutnya di sini
‫hanya router, dan kemudian kami mengekspornya.
‫Oke, dan sekarang saya juga mendapatkan penangannya.
‫Oke, jadi kita bisa menyingkirkan pengendali rute ini sekarang.
‫Oke, dan sebenarnya yang ini tidak ada
‫di rute tur kami, jadi bagian kode ini di
‫mana kami benar-benar membaca tur
‫dari file JSON.
‫Jadi letakkan itu tepat di atas sini.
‫Dan sekarang akhirnya, kita sebenarnya perlu
‫mengimpor router tur dan router
‫pengguna agar rute-rute ini di sini terus berfungsi.
‫Oke, tapi itu seharusnya cukup mudah, jadi mari kita lakukan itu.
‫Jadi dengan
‫tour router, di butuhkan, route/tourRoutes.
‫Oke, dan kita tidak membutuhkan
‫JS, dan begitu juga untuk userRouter.
‫Jadi tourRoutes sebenarnya ada di sini, userRoutes.
‫Sekarang Anda mungkin bertanya-tanya mengapa saya sebenarnya menyebut
‫variabel sebagai userRoute, tetapi kemudian file tersebut adalah userRoutes, dan itu
‫karena folder ini di sini
‫disebut route, dan di sana kita
‫memiliki tourRoutes dan userRoutes.
‫Oke, tapi yang sebenarnya kita
‫ekspor dari file itu hanyalah router, oke?
‫Tapi saya yakin lebih masuk akal untuk
‫menyebut folder ini di sini Routes.
‫Oke, dan itulah
‫mengapa kami memiliki perbedaan kecil antara route dan router.
‫Sekarang kita masih mendapatkan beberapa kesalahan di sini,
‫dan fs tidak didefinisikan, jadi mari kita ambil itu,
‫dan sebenarnya kita tidak membutuhkannya di
‫sini, jadi mari kita taruh di rute tur di sini.
‫Kami mendapatkan kesalahan lain.
‫Dan kali ini, karena folder ini di sini sekarang tidak ditentukan, karena dirname
‫kita sekarang adalah rutenya.
‫Jadi kita harus keluar dari itu.
‫Jadi naik satu folder, lalu di sana, masuk
‫ke dev-data, data, dan tour-simple.
‫Sekarang jangan khawatir tentang mendapatkan semua kesalahan ini.
‫Itu agak normal ketika kita melakukan semua
‫refactoring ini karena kita
‫mengubah banyak hal, jadi normal jika ada yang rusak.
‫Bagaimanapun, sekarang sudah kembali bekerja,
‫jadi kami sekarang berada di tempat di
‫mana kami dapat menguji ulang rute kami di sini.
‫Dan memang, itu berhasil.
‫Hal yang sama untuk pengguna, anggap saja.
‫Dan semuanya benar.
‫Jadi kita sekarang memiliki router
‫masing-masing dalam satu file yang berbeda, dan
‫kita dapat mengatakan bahwa masing-masing adalah satu sub-aplikasi kecil.
‫Jadi satu aplikasi wisata dan satu aplikasi pengguna.
‫Dan kami kemudian menggabungkan semuanya dalam
‫file aplikasi global kami dengan mengimpor router
‫ini, dan kemudian memasang router di dua rute
‫berbeda yang saat ini
‫kami terapkan, oke?
‫Jadi sekali lagi, di sinilah kami memasang router kami.
‫Dan saya tahu bahwa konsep ini
‫mungkin agak sulit untuk dipahami, tetapi jangan khawatir
‫tentang itu.
‫Semakin lama Anda terus mengerjakan proyek ini dan
‫semakin banyak kode
‫yang Anda tulis, semakin jelas semuanya secara otomatis.
‫Untuk saat ini, hal terpenting
‫yang perlu diingat adalah bahwa kami membuat router yang berbeda
‫ini untuk setiap sumber daya agar memiliki pemisahan
‫perhatian yang baik antara sumber daya ini.
‫Jadi pada dasarnya membuat satu
‫aplikasi kecil untuk masing-masing aplikasi dan kemudian menyatukan semuanya
‫dalam satu file aplikasi utama, yang tentu saja yang ini.
‫Jadi aplikasi ini. File js yang kita miliki di sini biasanya terutama
‫digunakan untuk deklarasi middleware.
‫Jadi kami memiliki
‫semua middleware yang ingin kami terapkan ke semua rute.
‫Jadi dalam hal ini, kami memiliki empat middleware ini di sini.
‫Jadi satu, dua, tiga, empat.
‫Middleware ini, kami ingin menerapkannya untuk
‫semua rute
‫dan kemudian untuk rute ini, kami ingin menerapkan
‫middleware tourRouter, dan untuk
‫rute ini, kami ingin menerapkan middleware userRouter.
‫Oke, sekali lagi, kedua router ini
‫sebenarnya adalah middleware, itulah sebabnya kami dapat menggunakan aplikasi. gunakan untuk memasangnya.
‫Oke, dan dengan itu, mari kita selangkah lebih
‫maju, dan benar-benar menghapus
‫penangan rute
‫ini dari file rute.
‫Oke, jadi mari kita buat lagi folder baru di sini, dan
‫yang ini akan disebut controller, oke?
‫Jadi saya memanggil mereka penangan rute, jadi
‫masuk akal untuk membuat folder penangan.
‫Tapi nanti dalam kursus ini, kita
‫akan mulai menggunakan arsitektur perangkat lunak yang disebut Model
‫View Controller,
‫dan dalam arsitektur itu, fungsi
‫handler ini sebenarnya disebut controller.
‫Dan itulah mengapa saya akan memanggil folder, dan
‫juga file-file di sana, controllers.
‫Jadi sekarang mari kita buat tourController. js, dan
‫userController. js.
‫Oke, dan ini akan sedikit lebih masuk
‫akal setelah
‫kita mencapai bagian kursus di mana kita sebenarnya
‫berbicara tentang MVC, atau pola Model View Controller.
‫Baiklah, jadi sekarang mari kita ambil
‫kode ini, dan
‫letakkan handler ini ke folder controller, atau file sebenarnya.
‫Jadi semua kode ini.
‫Ini tourController, ya, itu dia.
‫Juga, kita membutuhkan
‫modul FS ini di sini, jelas di atas.
‫Dan ini dia.
‫Sekarang, kita ingin benar-benar mengekspor semua fungsi ini dari modul
‫ini, jadi bagaimana kita melakukannya?
‫Nah, dalam hal ini kita tidak hanya memiliki satu
‫ekspor, jadi kita tidak akan menggunakan modul. ekspor, tetapi alih-alih kita akan
‫menempatkan semua fungsi ini pada objek ekspor,
‫oke?
‫Jadi izinkan saya memilih
‫semua ini, consts, sehingga saya
‫benar-benar dapat mengganti semuanya secara bersamaan.
‫Jadi ekspor. deleteTour, dan . updateTour, createTour, getTour, dan
‫getAllTours.
‫Oke, jadi ekspor semuanya dari file ini.
‫Jadi sekarang,
‫mari masuk ke tourRoutes, dan cukup mengimpornya.
‫Jadi const, tourController, sama dengan yang dibutuhkan.
‫Oke, sekarang kita berada di folder rute di sini, kan?
‫Jadi kita perlu naik satu tingkat,
‫lalu masuk ke controller, dan
‫ke tourController. js.
‫Oke, ini tidak benar, dan baiklah.
‫Sekarang, ingat
‫bahwa ketika kita mengekspor data dari file menggunakan objek ekspor.
‫Jadi seperti yang kami lakukan di sini.
‫Ketika kita kemudian mengimpor semuanya ke dalam
‫satu objek, maka semua data
‫yang di ekspor sekarang akan berada di tourController.
‫Jadi kita akan memiliki tourController. getAllTours. buat Tur. getTour, dan sungguh, semua
‫ini, oke?
‫Jadi objek ini di sini akan setara dengan ekspor
‫yang kita miliki di sini.
‫Ingat itu?
‫Jadi, ini sangat sederhana.
‫Yang harus saya lakukan sekarang adalah
‫membuat tourController. , dan hanya itu.
‫Sekarang saya juga bisa
‫menggunakan penataan, yang juga saya tunjukkan sebelumnya.
‫Jadi hanya untuk mendemonstrasikan, saya bisa menggunakannya seperti
‫ini, dan kemudian menentukan nama yang sama persis dengan
‫yang kita miliki di sini.
‫Jadi getAllTours, lalu createTour, dan
‫semua ini, dan kemudian
‫saya bisa menggunakannya langsung di sini tanpa harus menulis tourController, dan dot.
‫Oke, tapi saya sebenarnya suka seperti ini, dan saya tidak melihat masalah
‫memilikinya seperti ini.
‫Jadi terlihat jelas bahwa semua fungsi
‫di sini sebenarnya
‫berasal dari modul tourController ini.
‫Oke, jadi saya menyimpannya sekarang, dan
‫seharusnya tetap berfungsi, jadi mari kita uji itu, dan ya, berhasil.
‫Jadi, itu bekerja sekarang.
‫Mari kita benar-benar menutupnya, dan sekarang sama, di mana itu?
‫Di sini.
‫Sekarang sama tentunya dengan fungsi-fungsi tersebut.
‫Letakkan di sini, lalu ekspor semua orang
‫ini.
‫Jadi ekspor.
‫Ya, jadi itu benar.
‫Sekarang di sini, kita baru saja mengimpor modul, dan sama seperti sebelumnya, kita
‫perlu naik satu tingkat.
‫Kami masuk ke controller, dan userController.
‫Sekarang akhirnya, tambahkan saja di sini.
‫Berikan save, dan uji untuk orang ini juga.
‫Dan memang, itu berhasil.
‫Jadi semua yang kami lakukan di sini adalah benar.
‫Jadi kita mulai memiliki banyak file sekarang, jadi penting
‫untuk benar-benar mengenal,
‫di mana tepatnya semua bagian aplikasi
‫yang berbeda berada, oke?
‫Jadi rekapnya saja, alurnya seperti ini.
‫Kami mulai menerima permintaan di aplikasi. file js, kan?
‫Itu kemudian akan tergantung pada rute yang masuk ke salah
‫satu router, jadi katakanlah router tur, dan kemudian
‫tergantung, sekali lagi, pada rute itu,
‫dan permintaan, itu
‫kemudian akan menjalankan salah satu pengontrol ini di sini,
‫dan ini ada di file tourController.
‫Dan di situlah akhirnya tanggapan dikirim,
‫dan menyelesaikan siklus permintaan-tanggapan.
‫Oke, jadi sekarang kita memiliki tiga file, daripada
‫memiliki semuanya hanya dalam satu file.
‫Baiklah, tapi itu masih belum akhir dari cerita, karena saya
‫menambahkan satu langkah lagi di sini.
‫Jadi yang akan saya lakukan adalah membuat server. file js juga.
‫Jadi pelayan. js.
‫Dan mengapa saya melakukan itu?
‫Yah, hanya karena itu adalah praktik yang baik
‫untuk memiliki semua
‫yang terkait dengan express dalam satu file, dan
‫kemudian semua yang terkait dengan server di file utama lainnya.
‫Jadi mulai sekarang, server. js sebenarnya akan menjadi file awal kami di mana semuanya
‫dimulai, dan itu ada di sana ketika
‫kami mendengarkan server kami.
‫Jadi mari kita lanjutkan dan salin,
‫atau potong, bagian ini dari sini, dan pindahkan ke server.
‫Sekarang tentu saja, modul ini
‫di sini tidak tahu tentang aplikasi, jadi kita perlu mengimpornya.
‫Dan untuk mengimpornya, kita harus mengekspornya terlebih dahulu.
‫Jadi kami menggunakan modul. ekspor, dan kami mengekspor aplikasi kami dari
‫file ini.
‫Oke, jadi sekarang kita memiliki
‫semua yang pada
‫dasarnya adalah konfigurasi aplikasi dalam satu file mandiri.
‫Oke, jadi kembali ke server, sekarang impor itu.
‫Require, dan karena ini adalah modul kita sendiri, kita
‫perlu menggunakan this . / untuk
‫mengatakan bahwa kita berada di folder
‫saat ini, dan ini dia app.
‫Jadi, sesederhana itu.
‫Dan nanti sebenarnya kita akan memiliki hal-hal
‫lain dalam file ini yang tidak berhubungan dengan express,
‫tetapi masih berhubungan dengan aplikasi kita.
‫Jadi hal-hal seperti konfigurasi database,
‫atau beberapa hal penanganan kesalahan, atau variabel lingkungan, semua
‫hal itu akan hidup di server ini. js, yang mana
‫titik masuk kita, oke?
‫Jadi sekarang mari kita selesaikan proses yang kita miliki di sini, karena sekarang kita
‫tidak lagi menjalankan aplikasi nodemon. js, tetapi
‫sebaliknya, kita perlu menjalankan server. js.
‫Oke, dan sebenarnya karena kita sedang melakukan itu, izinkan
‫saya membuat skrip npm untuk itu.
‫Menutup orang itu dengan sangat cepat.
‫Jadi izinkan saya menambahkan
‫di sini, npm start, server nodemon. js.
‫Karena dengan cara ini, saya tidak
‫lagi harus benar-benar tahu file mana yang sebenarnya ingin saya jalankan.
‫Jadi yang harus saya tulis
‫adalah npm start, dan tidak diragukan lagi itu akan berhasil.
‫Kalau tidak, saya mungkin
‫harus berpikir, hm, apakah itu aplikasi. js, atau server. js, atau apa?
‫Apa yang harus kita mulai di sini?
‫Tapi seperti ini, saya tidak perlu berpikir, yang harus saya lakukan
‫adalah npm start, dan itu akan dimulai.
‫Oke, jadi seperti ini, dan
‫di sini kita kembali menjalankan aplikasi kita.
‫Tutup orang itu, dan omong-omong, ini berfungsi, bahkan tanpa
‫menginstal nodemon sebagai ketergantungan dev
‫kami, karena saya
‫telah menginstal nodemon secara global.
‫Jadi kami melakukannya di bagian pertama, dan mudah-mudahan Anda
‫juga melakukannya di sana.
‫Jika tidak, lanjutkan dan di
‫tab lain lakukan
‫npm install nodemon, jadi jika
‫karena alasan tertentu Anda melewatkan bagian itu, Anda
‫mengetik npm install nodemon, dan kemudian Anda dapat menginstalnya secara global
‫seperti ini, atau Anda dapat menginstalnya sebagai
‫pengembang ketergantungan, seperti ini, oke?
‫Jadi pastikan Anda telah menginstal nodemon, tidak peduli apakah itu secara
‫global atau sebagai ketergantungan dev, oke,
‫untuk membuat ini berfungsi.
‫Jadi pemeriksaan terakhir, hanya untuk
‫memastikan, dan menginginkan yang ini, dan ya, memang.
‫Kami telah memfaktorkan ulang aplikasi kami dengan benar.
‫Jadi ini adalah banyak perubahan dalam
‫satu video saja, jadi setelah Anda menyelesaikan yang ini,
‫silakan lanjutkan dan analisis semua yang
‫kami lakukan dan benar-benar mencoba melacak jalur yang akan
‫dilakukan permintaan di
‫dalam aplikasi kami dari awal hingga akhir.
‫Dengan cara ini Anda akan
‫benar-benar merasakan bagaimana semuanya bekerja di sini.
‫Dan sampai jumpa setelah melakukan itu di video berikutnya.