‫Jonas: Selamat datang kembali.
‫Sekarang mari kita akhirnya mengatur Express,
‫membuat server sederhana, dan melakukan beberapa perutean dasar
‫hanya untuk mendapatkan gambaran
‫awal tentang bagaimana kita sebenarnya bekerja di Express.
‫Jadi dalam video ini, kita sebenarnya akan
‫mulai mengerjakan proyek alam, jadi proyek utama besar yang merupakan
‫bagian dari kursus ini.
‫Jadi seperti sebelumnya, silakan
‫dan dapatkan proyek awal dari file kursus.
‫Saya sudah memilikinya di sini.
‫Saya telah membukanya di kode VS saya.
‫Mari kita lihat sekilas apa yang kita miliki di sini.
‫Kami memiliki file konfigurasi yang
‫lebih cantik seperti yang kami atur seperti sebelumnya.
‫Saya juga memiliki file konfigurasi untuk ESLint, dan ESLint yang
‫belum kita siapkan pada saat ini, tetapi
‫kita akan melakukannya
‫juga nanti di bagian ini.
‫Untuk saat ini, saya hanya
‫ingin memulai coding dan tidak khawatir tentang linting kode kita.
‫Linting hanya untuk memperbaiki beberapa kesalahan.
‫Tapi sekali lagi, kita akan melakukannya nanti.
‫Di sini kita hanya memiliki beberapa file
‫untuk nanti, seperti css, gambar, oke, dan sekarang juga misalnya, beberapa
‫data yang kita perlukan untuk membangun aplikasi kita.
‫Sekali lagi, kita akan mulai menggunakan data ini di
‫seluruh bagian ini.
‫Bagaimanapun, kami sekarang memiliki proyek baru.
‫Hal pertama yang biasanya kita lakukan dengan proyek baru
‫adalah membuat paket. json file,
‫seperti yang saya sebutkan sebelumnya.
‫Kami melakukannya di proyek nodefarm,
‫dan sekarang kami juga akan melakukannya di sini.
‫Saya membuka terminal terintegrasi.
‫Anda dapat melakukannya dengan menekan pintasan ini di sini atau cukup datang ke
‫sini untuk Melihat dan kemudian Terminal.
‫Biarkan saya memasangnya sedikit sehingga Anda dapat melihatnya.
‫Ingat perintahnya adalah npm init.
‫Kami memberi nama untuk proyek tersebut.
‫Ini disebut natours.
‫Oh oke, tidak boleh ada huruf kapital.
‫Mari kita lakukan itu lagi.
‫Versinya satu, deskripsi,
‫misalkan learning node, express, dan mongoDB, mongoDB.
‫Titik masuk, indeks. js, sebenarnya,
‫kita akan menggunakan app. sekarang.
‫Sebut saja aplikasi. js.
‫Kami tidak memiliki perintah pengujian, tidak ada git,
‫tidak ada kata kunci, penulis adalah saya, dan hanya itu, jadi oke.
‫Di sini kami memiliki paket. json.
‫Sama seperti sebelumnya, tidak ada yang baru di sini.
‫Sekarang saatnya untuk menginstal Express.
‫Npm saya ungkapkan.
‫Saya akan menggunakan Express
‫untuk di sini,
‫yang pada titik perekaman, versi terbaru, tetapi
‫untuk beberapa waktu, tim Express telah mengerjakan versi 5.
‫Itu adalah versi utama yang dapat
‫memperkenalkan perubahan yang melanggar jika Anda menginstal yang itu.
‫Sekarang, sebenarnya tidak banyak
‫hal yang berubah di versi 5, tetapi untuk
‫memastikan, silakan instal Express di versi 4 seperti yang saya lakukan.
‫Untuk melakukan itu, tekan saja pada 4.
‫Itu kemudian akan menginstal versi terbaru di dalam 4 dengan versi minor
‫dan patch terbaru, jadi 4. 16. 4.
‫Itulah versi yang saya gunakan sekarang dalam
‫kursus ini, dan versi Anda mungkin akan menjadi
‫versi yang lebih baru, tetapi selama Anda memiliki 4 di sini
‫di awal, Anda akan baik-baik saja.
‫Anda melihat bahwa itu
‫benar-benar membuat folder modul simpul kami di sini.
‫Sekarang, kita siap untuk memulai.
‫Saya sedang membuat file baru dan itu disebut app. js.
‫Ini semacam konvensi untuk memiliki semua konfigurasi
‫Express di app. js.
‫Itulah yang saya gunakan di sini sekarang.
‫Kami sekarang memiliki peringatan bahwa itu
‫tidak dapat memuat ESLint.
‫Sekali lagi, kita akan mengonfigurasinya nanti
‫di seluruh bagian ini.
‫Jadi, sekarang mari kita gunakan Express.
‫Saya akan membutuhkan tentu saja, paket Express.
‫Tidak ada yang baru saat ini.
‫Berikan yang aman.
‫Anda melihat bahwa pratinjau sudah melakukan keajaibannya di sini
‫dengan menambahkan titik koma ini dan juga menambahkan baris
‫baru ini di sini.
‫Kami telah mengimpor Express, dan sekarang yang kami
‫lakukan adalah membuat variabel bernama app.
‫Sekali lagi, itu semacam standar.
‫Jadi aplikasi dan hasil yang ditetapkan dari panggilan ekspres.
‫Itu sebenarnya.
‫Ini di sini adalah fungsi yang saat
‫dipanggil akan menambahkan banyak metode ke variabel aplikasi kami di sini.
‫Yang pertama yang akan kita
‫gunakan sebenarnya adalah app. mendengarkan
‫pada dasarnya memulai server.
‫Itu sedikit mirip dengan apa
‫yang kami lakukan sebelumnya dengan paket http di bagian sebelumnya, kan.
‫Jadi sekali lagi, perlu diingat bahwa
‫Express adalah 100% tanpa js di bawah tenda, dan beberapa
‫hal bekerja dengan
‫cara yang sangat mirip di sini di Express.
‫Baiklah, sekali lagi, itu hanya membuat
‫hidup kita sedikit lebih
‫mudah dengan menghilangkan beberapa kerumitan dari kita.
‫Sama seperti sebelumnya, ke dalam aplikasi. dengarkan, kami
‫menempel di port.
‫Mari kita benar-benar membuat variabel untuk itu di sini sebelumnya.
‫Port dan katakanlah 3000 untuk saat ini.
‫Kami akan mengubahnya nanti.
‫Kami menempelkan di port dan fungsi panggilan balik.
‫Sekali lagi, ini
‫adalah fungsi panggilan balik yang akan dipanggil
‫segera setelah server mulai mendengarkan.
‫Mari kita lakukan konsol. log di
‫sini, aplikasi berjalan di port.
‫Baiklah, jadi itu server kami
‫sekarang sebenarnya sudah mendengarkan.
‫Sekarang yang perlu kita lakukan selanjutnya adalah menentukan rute.
‫Dan sekali lagi,
‫kami sebenarnya sudah menentukan rute
‫sebelumnya di proyek nodefarm, ingat itu,
‫tetapi cara kerjanya sangat berbeda dengan Express.
‫Ingat bahwa perutean pada
‫dasarnya berarti untuk menentukan bagaimana aplikasi
‫merespons permintaan klien tertentu, jadi ke URL tertentu.
‫Dan sebenarnya, itu bukan hanya
‫URL tetapi juga
‫metode http yang digunakan untuk permintaan itu.
‫Ingat itu dari kuliah http yang kami miliki sebelumnya.
‫Bagaimana kita melakukannya?
‫Yah, itu sangat sederhana di Express.
‫Yang kita lakukan hanyalah aplikasi, kemudian metode http
‫yang ingin kita tanggapi, dan mari kita
‫mulai dengan yang
‫paling sederhana yaitu get, lalu URL.
‫Kami hanya menentukan jenis URL root di sini.
‫Sekali lagi, rute pada dasarnya adalah
‫URL, yang dalam hal ini, hanya URL root
‫ini dan juga metode http, yang didapat dalam kasus ini.
‫Sekarang, apa yang sebenarnya kita
‫inginkan terjadi ketika seseorang menekan URL itu dengan permintaan get?
‫Nah, apa pun yang
‫ingin kita lakukan, kita perlu menentukannya dalam
‫fungsi panggilan balik, yang kita tentukan sebagai argumen kedua.
‫Kami memiliki fungsi
‫panggilan balik seperti ini, dan fungsi
‫panggilan balik ini dapat menerima beberapa argumen.
‫Yang paling mendasar, dan
‫yang biasanya selalu kita butuhkan adalah get request, entity response.
‫Dalam hal itu, sekali lagi sangat mirip dengan apa
‫yang kami lakukan sebelumnya di proyek nodefarm.
‫Saat itu, ketika kami memulai server
‫kami, kami juga memiliki akses ke
‫objek permintaan dan respons.
‫Sekarang, mereka sedikit berbeda di sini di Express.
‫Mereka memiliki lebih banyak data dan
‫metode, tetapi idenya persis sama.
‫Jadi Anda melihat bahwa aplikasi
‫Express dan juga aplikasi node dalam
‫hal ini, semuanya tentang permintaan dan tanggapan,
‫hanya karena begitulah cara kerja web sebenarnya seperti
‫yang Anda pelajari di bagian sebelumnya.
‫Apa yang ingin kita lakukan sekarang?
‫Nah, yang ingin kita lakukan hanyalah mengirim beberapa
‫data kembali dengan sangat cepat.
‫Kita dapat menggunakan objek respon
‫dan dari sana, kita dapat menggunakan metode send dan
‫menentukan sesuatu yang ingin kita kirim kembali.
‫Halo dari sisi server.
‫Hanya beberapa string lagi yang ingin kami kirim kembali.
‫Kami juga dapat menentukan kode status dan
‫itu sangat mudah.
‫Yang harus kita lakukan adalah sebelum kita benar-benar mengirim
‫string ke klien,
‫kita hanya menambahkan status sebelum itu.
‫Metode status, dan di sini, kami
‫menentukan kode kami.
‫Dan lagi, kita akan menggunakan 200 untuk oke.
‫Itu sebenarnya yang harus kita lakukan.
‫Mari kita menguji ini dengan sangat cepat
‫dan kemudian menambahkan beberapa hal lagi ke dalamnya.
‫Mari gunakan aplikasi nodemon. js.
‫Mari kita lihat apa
‫yang terjadi dan aplikasi kita berjalan pada port 3000.
‫Besar.
‫Dan bagaimana kita sekarang menguji API ini?
‫Nah, itulah mengapa kami menginstal Postman.
‫Mari kita buka Tukang Pos.
‫Sebenarnya masih di sini dari kuliah terakhir.
‫Mari kita lanjutkan dan
‫hapus ini dan tulis URL, atau sebenarnya,
‫IP untuk host lokal dan kemudian port kita.
‫Itu persis sama seperti yang kami
‫lakukan di proyek nodefarm.
‫Kami hanya memukul akarnya.
‫Kita bisa menulis garis miring atau
‫bekerja sama saja tanpa apapun.
‫Mari kita kirim ini dan memang, ini dia.
‫Halo dari sisi server.
‫Itu luar biasa, itu sudah bekerja.
‫Hanya untuk memastikan, kami tentu
‫saja akan mendapatkan hasil yang sama persis di browser.
‫Jika saya menyalin ini di sini, Anda akan melihat hasil yang sama.
‫Tapi sekali lagi, kita akan
‫menggunakan Postman karena membuat semua pengujian API ini jauh lebih mudah bagi kita.
‫Anda akan melihat, begitu kami benar-benar mulai
‫menggunakan lebih banyak fitur dari aplikasi hebat ini.
‫Sekarang, kembali ke sini, mari tambahkan beberapa
‫hal lagi karena send hanya mengirim string
‫ini kembali ke klien, tetapi juga sangat mudah
‫untuk mengirim json ke klien.
‫Alih-alih menggunakan send, mari kita gunakan json.
‫Metode json, dan kemudian di sini,
‫kita bisa menempelkan objek.
‫Mari kita lakukan seperti ini.
‫Katakanlah ini adalah pesannya.
‫Dan kemudian hanya beberapa bidang lain di sini, alam.
‫Oke, dan sekarang Anda lihat, pratinjau
‫di sini memformat ini secara otomatis untuk kami
‫dan mereka juga menginginkan ini di baris lain.
‫Ah oke, tentu saja kita kehilangan koma di sini.
‫Tetapi ekstensi pratinjau masih memasangnya di
‫sini karena suatu alasan.
‫Tapi tentu saja, itu tidak terlalu penting.
‫Ini hanya masalah pemformatan.
‫Mari kita lihat apa yang terjadi sekarang.
‫Sekarang kami memiliki json yang diformat dengan baik di sini.
‫Memberi kita semua warna berbeda
‫di sini untuk kunci dan nilainya.
‫Di sini kita memiliki kode status.
‫Di sini kita memiliki waktu yang dibutuhkan untuk melakukan permintaan ini.
‫Kami juga memiliki ukuran respons.
‫Kita bisa, misalnya, mengubah kode di sini dengan sangat mudah.
‫404 tidak ditemukan, ingat.
‫Lakukan lagi, dan kemudian di sini Anda melihat, 404, tidak ditemukan.
‫Itu adalah
‫hal yang sangat bagus untuk Postman.
‫Mari kita benar-benar meningkatkan ukuran semua ini.
‫Sekarang mari kita lanjutkan, tambahkan saja sesuatu yang lain di sini.
‫Hanya sesuatu yang sangat mudah.
‫Ingat, semua ini hanya untuk mengujinya,
‫untuk membuat kaki kita basah, dan
‫mulai mendapatkan sedikit pengalaman.
‫Ingatlah bahwa ini adalah metode http untuk permintaan.
‫Respons yang kami kirim di sini, jadi
‫yang ini di sini,
‫hanya dikirim ketika metode get ini dikirim ke server kami di URL ini.
‫Biarkan saya benar-benar menunjukkannya kepada Anda.
‫Jika kita melakukannya, misalnya, sebuah posting.
‫Itu sangat mudah lagi dengan Postman.
‫Jika kita melakukan posting, maka kita tidak akan mendapatkan apa-apa.
‫Sebaliknya, apa yang dikirim oleh Express secara otomatis adalah
‫html ini di sini yang mengatakan tidak dapat memposting dan kemudian
‫dengan 404, tidak ditemukan.
‫Itu karena kami tidak memiliki rute
‫yang ditentukan untuk URL ini dan untuk metode http ini.
‫Sekarang mari kita lakukan itu dengan sangat cepat.
‫Jadi posting, kami menginginkan URL yang sama,
‫permintaan dan objek respons.
‫Katakan saja res. kirim, Anda
‫dapat memposting ke titik akhir ini.
‫Agar Anda dapat melihat bahwa
‫ini adalah cara kami mengirim tanggapan
‫yang berbeda untuk metode http yang berbeda dalam permintaan.
‫Mari kita jalankan lagi, dan memang, Anda
‫dapat memposting ke titik akhir ini dengan kode status 200.
‫Ini sebenarnya adalah default
‫ketika kita tidak menentukan apapun dalam kode kita.
‫Di sini kita memiliki 404 yang tidak benar.
‫Tapi sekali lagi, 200 sebenarnya adalah default.
‫Hal cepat lain yang
‫ingin saya tunjukkan kepada Anda adalah bahwa dengan menggunakan
‫metode json ini di sini misalnya, ini akan
‫secara otomatis mengatur tipe konten kami ke json
‫aplikasi, jadi ingatlah bahwa kami melakukannya secara manual di
‫aplikasi nodefarm ketika kami membuat API kami yang sangat sederhana.
‫Saat itu, kami juga mengirim kembali beberapa json,
‫tetapi kami kemudian harus mendefinisikan secara
‫manual bahwa kontennya adalah json sehingga browser tahu
‫apa yang diharapkannya.
‫Tapi Express mengambil pekerjaan itu dari kami.
‫Mari kita periksa itu.
‫Kembali untuk mendapatkan.
‫Di sini kami memiliki header hasil kami.
‫Di sini Anda melihat
‫bahwa tipe konten memang disetel ke json aplikasi.
‫Express kemudian juga secara otomatis
‫mengirimkan banyak header
‫lain, misalnya, ini didukung oleh Express atau tanggal atau koneksi.
‫Tapi sekali lagi, kita
‫akan lebih berhati-hati dengan header nanti di kursus.
‫Ini hanyalah contoh yang sangat kecil dan sederhana
‫di sini, tetapi Anda
‫sudah dapat mulai menghargai betapa mudahnya melakukan respons semacam ini.
‫Untuk membuat rute ini untuk menanggapi permintaan klien, dengan cara yang jauh lebih
‫mudah daripada hanya dengan node biasa. js.
‫Dengan itu, di video
‫berikutnya, kita akan mempelajari semua tentang membangun
‫API menggunakan arsitektur lainnya, sehingga setelah itu, kita
‫akhirnya bisa mulai membangun API kita.