Pergi makan dan memahami dasar-dasar Express.js

Pergi makan dan memahami dasar-dasar Express.js

Jika Anda pernah mengunjungi restoran tempat duduk, Anda dapat memahami dasar-dasar Express. Tetapi jika Anda baru mulai membangun back end Node.js pertama Anda… Anda mungkin berada dalam perjalanan yang bergelombang.

Ya - pasti lebih mudah mempelajari Node jika Anda memiliki pengalaman sebelumnya dengan JavaScript. Tapi tantangan yang akan Anda hadapi saat membangun back end sama sekali berbeda dari yang Anda hadapi saat menggunakan JavaScript di front end.

Ketika saya mempelajari Node, saya memilih cara yang sulit. Saya mempelajari eBook, tutorial tertulis, dan video berulang kali sampai saya akhirnya mengerti mengapa saya melakukan apa yang saya lakukan.

Ada cara yang lebih mudah. Saya akan menggunakan analogi restoran untuk menjelaskan empat bagian penting dari aplikasi Express pertama Anda. Express.js adalah kerangka kerja populer untuk mengatur kode Anda, dan saya akan merekomendasikannya untuk pemula mana pun. Saya akan menjelaskan lebih lanjut sebentar lagi.

Berikut adalah empat bagian utama yang akan kami bahas:

  1. Pernyataan yang dibutuhkan
  2. Middleware
  3. Rute
  4. App.listen () / Memulai server

Dalam analogi ini, Anda adalah pemilik restoran yang ingin mempekerjakan seorang manajer umum - orang yang menciptakan semua proses dan mengelola tempat sehingga berjalan lancar dan pelanggan merasa senang.

Berikut ini pratinjau dari apa yang selanjutnya:

Pada akhirnya, Anda akan memahami fungsionalitas setiap bagian dari aplikasi Express dasar.

Langkah 1: Mempekerjakan Manajer (Memerlukan Pernyataan)

Dalam contoh ini, Anda adalah pemilik restoran. Dan Anda perlu menyewa seorang ahli untuk menjalankan operasi sehari-hari restoran baru Anda. Anda tentu bukan seorang ahli, dan Anda tidak bisa menyerahkannya kepada pelayan dan dapur untuk mencari tahu.

Jika Anda ingin menjalankan restoran yang efisien dan aman, Anda memerlukan seseorang untuk menjaga staf Anda bekerja dengan efisiensi maksimum. Express adalah manajer baru.

Bagian pertama cukup mudah. Seperti paket NPM lainnya, Anda perlu menginstal modul ekspres npm dan kemudian menggunakan pernyataan yang diperlukan untuk memuat modul.

Tidak seperti banyak paket NPM lainnya, Anda juga perlu menggunakan baris ini:

const app = express();

Ini karena Anda memerlukan variabel untuk menampung aplikasi Express baru Anda. Express bukanlah bagian default dari Node.

Langkah 2: membuat keputusan di restoran (middleware)

Mari kita mundur selangkah. Apa saja rutinitas umum yang terjadi di restoran? Ada tiga yang langsung terlintas di kepala saya:

  1. Tempat duduk pelanggan baru
  2. Menerima pesanan makanan
  3. Memberikan cek di akhir makan

Untuk masing-masing, ada serangkaian pemeriksaan yang perlu Anda jalankan sebelum Anda dapat menjalankan tindakan. Misalnya, sebelum Anda menempatkan pelanggan, Anda perlu mengetahui:

  1. Apakah mereka mengenakan kemeja dan sepatu (dan celana)? Jika tidak, mereka tidak dapat duduk.
  2. Jika mereka ingin duduk di bar, apakah mereka berusia 21 tahun (jika Anda berada di Amerika Serikat)?

Ini bukan bar pantai! Demikian pula, dalam kode Anda, Anda perlu memvalidasi bahwa permintaan memiliki kriteria tertentu sebelum dapat melanjutkan. Misalnya, jika seseorang mencoba masuk ke situs Anda:

  1. Apakah mereka punya akun?
  2. Apakah mereka memasukkan kata sandi yang benar?

Di sinilah konsep middleware masuk. Fungsi middleware memungkinkan Anda untuk mengambil tindakan atas permintaan yang masuk dan memodifikasinya sebelum mengirim kembali respons.

Di restoran Anda, Anda memerlukan serangkaian aturan untuk memutuskan apakah Anda harus mendudukkan orang yang masuk atau tidak. Katakanlah pasangan berjalan melewati pintu Anda. Anda memiliki satu aturan sebelum memberi mereka meja: apakah mereka mengenakan kemeja dan sepatu?

Pertama, Anda mulai dengan app.use (). Ini berarti bahwa ini hanyalah aturan yang perlu diterapkan untuk rute berikutnya. Mereka bukan GET, POST, PUT atau DELETE.

Di baris 4, Anda memiliki fungsi anonim dengan parameter req, res dan next. Untuk keperluan blok kode ini, Anda hanya memeriksa permintaan (req) untuk melihat apakah ada kemeja dan sepatu.

Anda juga perlu menggunakan fungsi next () di akhir karena Anda hanya memvalidasi pakaian di sini. Nanti, di rute, Anda akan mengizinkan para tamu untuk mendapatkan meja yang sebenarnya.

Di baris 5 dan 6, Anda memeriksa apakah mereka memiliki kemeja dan sepatu.

Dan di baris 7–9, Anda hanya melanjutkan jika mereka memiliki keduanya.

Blok kode di atas kehilangan satu hal penting: Sebuah jalur . Ini adalah string khusus yang disertakan dengan permintaan. Dan karena tidak memiliki jalur, itu akan berjalan di setiap permintaan.

Bisakah Anda bayangkan? Ketika pelanggan memasuki restoran… memesan makanan… meminta cek… karyawan akan dipaksa untuk melihat ke atas dan ke bawah pada mereka untuk memastikan mereka berpakaian! Itu adalah cara cepat untuk keluar dari bisnis.

Jadi, kami mengubah baris 4 pada contoh di atas. Sekarang, kami hanya akan menjalankan kode ini ketika pengguna meminta sepanjang rute '/ table'.

Penjelasan lengkapnya:

Langkah 3: Menjalankan Rutinitas Umum (Perutean)

Mari lanjutkan dengan contoh tempat duduk. Sejauh ini, kami hanya mengetahui cara memvalidasi apakah seseorang harus duduk atau tidak. Tapi sebenarnya kita tidak tahu bagaimana menuntun mereka ke meja dan mendudukkan mereka.

Di sinilah peran rute masuk. Rute memungkinkan kita untuk membuat skrip tindakan tertentu berdasarkan jalur . Opsinya adalah GET, POST, PUT dan DELETE, tetapi kami akan fokus pada GET dan POST untuk saat ini.

Dalam konteks restoran, kita perlu membuat permintaan GET untuk memilih meja dan tempat duduk khusus bagi para tamu. GET tidak mengubah atau menambah database Anda. Mereka hanya mengambil informasi berdasarkan parameter tertentu.

Dalam hal ini, katakanlah Anda perlu membuat prosedur untuk menampung dua orang. Angka 2 berasal dari permintaan pelanggan .

Oke, sebelum saya jelaskan: Ya, ini hanya mengirim pesan di akhir. Ini belum benar-benar menemukan meja khusus untuk menampung pelanggan. Saya perlu mencari array untuk tabel terbuka, memiliki lebih banyak cerita latar belakang… yang berada di luar cakupan tutorial ini.

Sejalan 12, kita mendefinisikan prosedur untuk menemukan sebuah meja ketika tamu permintaan sepanjang '/ table' rute . Sama seperti contoh middleware di atas, kami memiliki parameter permintaan dan respons yang tersedia. Ini juga memiliki parameter , jumlah. Ini dua, dalam contoh ini.

Faktanya, segala sesuatu setelah deklarasi fungsi di baris 12 secara teknis adalah middleware karena memodifikasi permintaan pengguna. Anda akan melihat diagram di bagian akhir.

Sejalan 13, kami mengakses jumlah orang di pesta dari parameter objek permintaan. Itu tidak dideklarasikan di mana pun karena permintaan datang dari pengguna, dan kami tidak memiliki kode front-end. Jadi, inilah tampilan permintaan jika ini adalah aplikasi nyata:

req = { params: { amount: 2; }}

Sejalan 13, variabel pihak kita mengakses properti jumlah dari objek params dalam permintaan .

Akhirnya di baris 14, kami mengirimkan tanggapan kembali kepada pelanggan: kami mencari tabel dengan ukuran yang sesuai.

Itu banyak sekali. Berikut diagramnya:

Langkah 3.5: Membuat Restoran Anda Efisien (Router)

Sekarang Anda dapat melacak jalur lengkap dari permintaan ke respons. Namun seiring bertambahnya ukuran aplikasi Anda, Anda tidak ingin membuat kode aturan untuk setiap rute satu per satu. Anda akan menemukan bahwa beberapa rute memiliki aturan yang sama, jadi Anda perlu menemukan cara untuk menerapkan satu kumpulan aturan ke beberapa rute.

Dalam hal tempat duduk, Anda dapat mendudukkan pelanggan Anda di bar atau di meja. Mereka memiliki aturan yang sama seperti kemeja + sepatu, tetapi tempat duduk di bar mengharuskan setiap anggota party berusia 21 tahun.

Dan, dalam hal melayani pelanggan, Anda perlu menggunakan prosedur yang sedikit berbeda untuk menyajikan hidangan pembuka, hidangan utama, dan makan malam. Namun, ketiga rute tersebut juga memiliki banyak kesamaan.

Di sinilah peran router . Router memungkinkan Anda mengelompokkan rute sehingga Anda dapat membuat aturan umum.

Kita perlu membuat middleware untuk mencakup setiap kasus ini. Saya hanya akan membahas kasus tempat duduk untuk saat ini karena itu akan menimpa kode di atas.

Berikut adalah cuplikan kode lengkapnya:

Saya akan membahas setiap bagian satu per satu.

Sejalan 4, kami mendeklarasikan router kami.

Di baris 6 dan 14, kita sekarang memiliki tempat dudukRouter.use () di tempat app.use () untuk menunjukkan bahwa middleware ini hanya terkait dengan rute tempat dudukRouter.

Akhirnya, di baris 21, kami menambahkan lebih banyak middleware untuk menunjukkan bahwa setiap rute seatingRouter dimulai dengan '/ tempat duduk'. Jadi, jika seseorang meminta tempat duduk di bar, jalur lengkapnya adalah '/ tempat duduk / bar'. Ini mungkin terasa sedikit rusak, karena Anda mungkin mengharapkan jalur ditentukan saat Anda membuat router di baris 4. Itu normal!

Ini dalam bentuk diagram:

Dan, saat Anda menambahkan rute GET, ia berada di atas pernyataan terakhir tempat Anda menetapkan rute ke router.

Langkah 4: pembukaan untuk bisnis (pelabuhan)

Oke, bagian terakhir. Sejauh ini, Anda telah mempekerjakan seorang manajer, menentukan apa yang harus dilakukan sebelum menerima permintaan pelanggan, dan menentukan apa yang harus dilakukan dengan permintaan pelanggan tertentu begitu mereka masuk. Sekarang, Anda hanya perlu menentukan alamat lokasi tempat semua ini akan terjadi.

Server Anda memiliki porta yang mirip dengan alamat restoran itu sendiri.Karena server Anda dapat menangani banyak jenis restoran (atau skrip sisi server) sekaligus, Anda perlu memberi tahu di mana setiap skrip harus dijalankan.

Dalam contoh di atas, porta adalah 3000 dan terletak di komputer Anda. Jadi jika Anda mengetik:

//localhost:3000/

ke browser Anda, dan Anda menjalankan aplikasi Node Anda, server tahu untuk menjalankan skrip tertentu. Dalam kasus ini, segera setelah Anda memasukkan URL, Anda akan mencatat pesan di konsol dan dapat menggunakan salah satu rute Anda . Jika restoran itu sendiri adalah seluruh aplikasi Anda, maka sekarang buka untuk bisnis di alamat 3000.

Apakah kamu menikmati ini? Beri tepuk tangan agar orang lain dapat menemukannya juga. Dan, jika Anda ingin mendapatkan pemberitahuan ketika saya merilis tutorial mendatang yang menggunakan analogi, daftar di sini: