Membuat aplikasi web kerangka kerja Ekspres baru

  • 8 menit

Perusahaan sering menyimpan sejumlah besar data dalam sistem file dan database. Mereka mengakses data tersebut dengan melayaninya melalui aplikasi web dari API dengan menggunakan HTTP.

Server web dan aplikasi web

Server web adalah perangkat lunak yang merespons permintaan dari klien. Aplikasi web berada di atas server web. Beberapa lingkungan, seperti Node.js, menyediakan server web dan aplikasi web dalam kerangka kerja. Dalam modul ini, server web disediakan oleh HTTP modul. Aplikasi web disediakan oleh kerangka kerja Express.js dan menyertakan server web.

Pelajari lebih lanjut:

  • Aplikasi web: Aplikasi mengirimkan aplikasi web ke klien:
    • Secara visual dengan HTML, CSS, dan JavaScript
    • Data dengan API
    • Baik visual maupun data dengan kombinasi HTML, CSS, JavaScript, dan API. Ini dianggap sebagai aplikasi monolitik.
  • Perutean URL: Perutean URL adalah mekanisme untuk menyediakan fungsionalitas server web saat alamat URL tertentu diminta. Misalnya, URL /products mungkin dikaitkan dengan fungsi yang mengembalikan daftar produk. URL /products/1 mungkin dikaitkan dengan fungsi yang mengembalikan produk tertentu.
  • Header HTTP: Ini adalah pasangan kunci-nilai yang dikirim dari klien ke server. Mereka berisi informasi tentang permintaan atau respons.
    • Dukungan untuk jenis konten yang berbeda: Klien dapat meminta data dalam format tertentu dan dapat kembali dalam format tersebut seperti teks biasa, JSON, HTML, atau CSV.
    • Autentikasi/Otorisasi: Beberapa data mungkin sensitif. Pengguna mungkin perlu masuk atau memiliki peran atau tingkat izin tertentu untuk mengakses data tersebut. Ini ditangani di header HTTP.
  • Pertukaran data: Pengguna mungkin perlu melihat dan menambahkan data ke sistem. Untuk menambahkan data, pengguna mungkin memasukkan data dalam formulir atau mengunggah file.
  • Waktu untuk memasarkan: Untuk membuat aplikasi web dan API secara efisien, pilih alat dan kerangka kerja yang memberikan solusi untuk masalah umum. Pilihan ini membantu pengembang dengan cepat memenuhi persyaratan bisnis pekerjaan.

Modul HTTP di Node.js

Node.js dilengkapi dengan modul HTTP bawaan. Ini adalah modul yang cukup kecil yang menangani sebagian besar jenis permintaan. Ini mendukung jenis data umum seperti header, URL, dan data.

Contoh kode berikut adalah server web sederhana yang mendengarkan permintaan masuk pada port 3000. Ini merespons dengan pesan hello world teks sederhana ke klien, terlepas dari rute URL atau header HTTP yang digunakan.

// Include the HTTP module
const http = require('http');

// Set the port to 3000
const PORT = 3000;

// 1. Process incoming requests (req), reply with response (res)
const requestHandler = (req, res) => {

  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('hello world');
}

// 2. Create a server with the requestHandler
const server = http.createServer(requestHandler);

// 3. Start listening for incoming requests on port
server.listen(PORT, () => {
  console.log(`listening on port ${PORT}`)
})

Contoh ini mengonfigurasi aplikasi web dengan langkah-langkah berikut:

  1. requestHandler: Fungsi membaca permintaan (req) dan menentukan respons apa yang akan dikirim (res).
  2. server: Metode createServer() didefinisikan dengan handler permintaan. Karena hanya ada satu handler permintaan, server akan selalu merespons dengan respons yang sama. Dalam aplikasi dunia nyata, Anda akan memiliki beberapa penangan permintaan untuk menangani berbagai jenis permintaan dan rute yang berbeda. Ini akan dibahas secara lebih rinci nanti.
  3. server.listen: Metode listen() ini dipanggil dengan port tertentu. Setelah panggilan ke metode listen(), server siap menerima permintaan klien. Saat dijalankan secara lokal, aplikasi akan tersedia di http://localhost:3000. Pernyataan console.log dijalankan untuk memberi tahu pengembang bahwa server siap digunakan.

Contoh kode Express.js ini menggunakan beberapa gaya fungsi:

  • panggilan balik masuk server.listen(PORT string, callback_function)
  • fungsi panah di requestHandler = (req, res) => {} mana memiliki aturan cakupan yang berbeda dari fungsi reguler

kerangka kerja Express.js

Sejauh ini Anda telah mempelajari tentang kemampuan modul HTTP di Node.js. Ini adalah pilihan yang sangat valid untuk aplikasi web yang lebih kecil. Jika aplikasi menjadi besar, kerangka kerja seperti Ekspres dapat membantu Anda membangun arsitektur dengan cara yang scalable.

Setelah membangun beberapa aplikasi web, Anda akan melihat bahwa Anda memecahkan masalah yang sama berulang kali. Masalah seperti manajemen rute, autentikasi dan otorisasi, serta manajemen kesalahan sering terjadi. Pada titik ini, Anda mulai mencari kerangka kerja seperti Express yang mengatasi beberapa atau semua masalah ini.

Manajemen rute di Ekspres

Ketika klien membuat permintaan ke aplikasi web, mereka menggunakan URL, yang merupakan alamat yang menunjuk ke server tertentu. URL mungkin terlihat seperti ini:

http://localhost:3000/products

Istilah localhost dalam URL mengacu pada komputer Anda sendiri. URL yang terlihat lebih produksi mungkin telah mengalihkan istilah localhost untuk nama domain seperti microsoft.com. Bagian akhir URL adalah rute. Ini memutuskan tempat logis tertentu untuk masuk ke server. Dalam hal ini, rutenya adalah /products.

Kerangka kerja Ekspres menggunakan URL, rute, dan kata kerja HTTP untuk manajemen rute. Kata kerja HTTP seperti post, put, dan get menjelaskan tindakan yang diinginkan oleh klien. Setiap kata kerja HTTP memiliki arti khusus untuk apa yang seharusnya terjadi pada data. Ekspres membantu mendaftarkan rute dan memasangkannya ke kata kerja HTTP yang sesuai untuk mengatur aplikasi web. Ekspres memiliki metode khusus untuk menangani kata kerja HTTP yang berbeda, dan memiliki sistem cerdas untuk mengaitkan rute yang berbeda dengan bagian yang berbeda dari kode Anda.

Dalam contoh berikut, Express membantu Anda menangani permintaan yang ditujukan untuk rute dengan alamat /products yang terkait dengan kata kerja getHTTP :

app.get('/products', (req, res) => {
  // handle the request
})

Express melihat sebagai /products berbeda dari app.post untuk /products, seperti yang app.get ditunjukkan dalam contoh kode berikutnya ini:

app.get('/products', (req, res) => {
  // handle the request
})

app.post('/products', (req, res) => {
  // handle the request
})

Kata kerja get HTTP berarti bahwa pengguna ingin membaca data. Kata kerja post HTTP berarti bahwa mereka ingin menulis data. Memba lagi aplikasi Anda sehingga pasangan rute dan kata kerja yang berbeda menjalankan potongan kode yang berbeda adalah umum. Konsep ini akan dibahas lebih rinci nanti.

Menayangkan berbagai jenis konten

Ekspres mendukung banyak format konten berbeda yang dapat dikembalikan ke klien panggilan. Objek res dilengkapi dengan sekumpulan fungsi pembantu untuk mengembalikan berbagai jenis data. Untuk mengembalikan teks biasa, Anda akan menggunakan metode seperti itu send() :

res.send('plain text')

Untuk jenis data lain, seperti JSON, ada metode khusus yang memastikan jenis konten dan konversi data yang benar dibuat. Untuk mengembalikan JSON di Ekspres, gunakan metode json(), seperti ini:

res.json({ id: 1, name: "Catcher in the Rye" })

Metode kode Ekspres sebelumnya setara dengan kode modul HTTP ini:

res.writeHead(200, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ id: 1, name: "Catcher in the Rye" }))

Header Content-Type di HTTP diatur dan respons juga dikonversi dari objek JavaScript ke string sebelum dikembalikan ke klien panggilan.

Membandingkan dua contoh kode, Anda dapat melihat bahwa Ekspres menyimpan beberapa baris pengetikan menggunakan metode pembantu untuk jenis file umum, seperti JSON dan HTML.

Membuat aplikasi Ekspres

Untuk mulai mengembangkan aplikasi Node.js menggunakan kerangka kerja Ekspres, Anda perlu memasangnya sebagai dependensi. Anda juga disarankan untuk menginisialisasi proyek Node.js terlebih dahulu sehingga semua dependensi yang diunduh berakhir di file package.json. Ini adalah rekomendasi umum untuk aplikasi apa pun yang dikembangkan untuk runtime bahasa umum Node.js. Manfaat melakukannya muncul ketika mendorong kode ke repositori seperti GitHub. Siapa pun yang mengambil kode dari GitHub dapat dengan mudah menggunakan kode yang Anda tulis dengan memasang dependensinya terlebih dahulu.

Untuk membuat aplikasi web dengan kerangka kerja Ekspres, langkah-langkah umum meliputi:

  1. Membuat aplikasi web: Membuat instans aplikasi web. Pada titik ini, server web tidak dapat dijalankan, tetapi Anda memiliki sesuatu yang dapat Anda perluas.
  2. Menentukan rute dan penangan rute: Tentukan rute yang harus didengarkan aplikasi. Manajemen rute umum meliputi:
    • rute root: '/'
    • rute fitur: '/products'
    • rute catch-all: '*'
  3. Mengonfigurasi middleware: Middleware adalah bagian dari kode yang dapat dijalankan sebelum atau setelah permintaan. Contohnya termasuk autentikasi, validasi data, dan pengelogan.
  4. Memulai aplikasi: Tentukan port, lalu instruksikan aplikasi untuk mendengarkan port tersebut. Sekarang aplikasi siap menerima permintaan.