Latihan - Membuat aplikasi web Express baru

  • 5 menit

Tailwind Traders telah menugaskan Anda untuk membuat API sederhana menggunakan kerangka kerja Express. Peritel online ingin mengevaluasi Express untuk melihat apakah kerangka kerja ini mudah digunakan. Sebagai bagian dari evaluasi itu, mereka ingin Anda membangun aplikasi web yang melayani rute yang berbeda.

Buka proyek dalam kontainer pengembangan

Gunakan kontainer pengembangan yang disediakan untuk menyelesaikan latihan dalam modul ini. Kontainer pengembangan telah dikonfigurasi sebelumnya dengan alat yang Anda butuhkan untuk menyelesaikan latihan.

  1. Mulai proses untuk membuat GitHub Codespace baru di main cabang MicrosoftDocs/node-essentials repositori GitHub.

    Buka proyek ini di GitHub Codespaces

  2. Pada halaman Buat codespace , tinjau pengaturan konfigurasi codespace, lalu pilih Buat codespace baru

    Screenshot of the confirmation screen before creating a new codespace.

  3. Tunggu hingga codespace dimulai. Proses startup ini dapat memakan waktu beberapa menit.

  4. Buka terminal baru di codespace.

    Tip

    Anda dapat menggunakan menu utama untuk menavigasi ke opsi menu Terminal lalu pilih opsi Terminal Baru.

    Screenshot of the codespaces menu option to open a new terminal.

  5. Validasi bahwa Node.js diinstal di lingkungan Anda:

    node --version

    Kontainer dev menggunakan versi Node.js LTS seperti v20.5.1. Versi yang tepat mungkin berbeda.

  6. Latihan yang tersisa dalam proyek ini berlangsung dalam konteks kontainer pengembangan ini.

Buat aplikasi web dasar dengan Express

Buat aplikasi dasar yang menangani permintaan.

  1. Buka terminal di kontainer dev.

  2. Gunakan perintah berikut untuk membuat proyek Node.js baru dan instal kerangka kerja Ekspres:

    mkdir my-express-app
cd my-express-app
npm init -y
npm install express

    Perintah init membuat file package.json default untuk proyek Node.js Anda. Perintah install menginstal kerangka kerja Ekspres.

  3. Di penyunting kode, buka file package.json.

    Di bagian dependencies, cari entri express:

    "dependencies": {
  "express": "^4.18.2"
  ...
}

    Entri ini menunjukkan kerangka kerja Ekspres diinstal. Versi Anda mungkin lebih baru. Kode sampel ini menggunakan kerangka kerja Ekspres versi 4.

  4. Di editor kode di my-express-app folder, buat file bernama app.js, dan tambahkan kode berikut:

    const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => res.send('Hello World!'));

app.listen(port, () => console.log(`Example app listening on port ${port}! http://localhost:${port}/`));

    Kode membuat instans aplikasi Ekspres dengan memanggil metode express(). Ini adalah fungsi tingkat atas yang diekspor oleh modul Ekspres. Semua konfigurasi dan fungsionalitas lebih lanjut ditambahkan melalui app variabel .

    Perhatikan bagaimana kode menyiapkan rute untuk memangkas /, akar, dengan sintaks:

    app.get('/', (req, res) => res.send('Hello World!'));

    Setelah menyiapkan rute, kode memulai aplikasi web dengan memanggil metode listen():

    app.listen(port, () => console.log('Example app listening on port ${port}!'));

  5. Buka terminal untuk subfolder ini dengan mengklik kanan nama subfolder dan memilih Buka di terminal terintegrasi.

  6. Di terminal, jalankan perintah berikut untuk memulai aplikasi web Ekspres:

    node app.js

    Anda akan menemukan output berikut:

    Example app listening at http://localhost:3000

    Output ini berarti aplikasi Anda aktif dan berjalan dan siap menerima permintaan.

  7. Anda dapat mengklik kanan dan memilih URL di terminal atau Anda dapat membuka browser saat Visual Studio Code memunculkan pemberitahuan yang menanyakan apakah Anda ingin Membuka di browser. Anda akan menemukan output berikut:

    Hello World!

  8. Di terminal, tekan Ctrl + C untuk menghentikan program Ekspres web.

Membuat aplikasi web yang menampilkan data JSON

Gunakan file app.js yang sama untuk menambahkan rute baru.

  1. Di editor kode, buka app.js file .

  2. Tambahkan kode berikut setelah sintaks yang ada app.get setelah kode untuk rute pertama, /:

     app.get('/products', (req, res) => {
     const products = [
         { id: 1, name: 'hammer' },
         { id: 2, name: 'screwdriver' },
         { id: 3, name: 'wrench' },
     ];

     res.json(products);
 });

  3. Pastikan file app.js Anda terlihat seperti contoh ini:

     const express = require('express');
 const app = express();
 const port = 3000;

 app.get('/', (req, res) => res.send('Hello World!'));

 app.get('/products', (req, res) => {
     const products = [
         { id: 1, name: 'hammer' },
         { id: 2, name: 'screwdriver' },
         { id: 3, name: 'wrench' },
     ];

     res.json(products);
 });

 app.listen(port, () => {
     console.log(`Example app listening on port ${port}! http://localhost:${port}/`);
 });

  4. Simpan perubahan Anda ke file app.js dan tutup file.

  5. Di terminal, jalankan perintah berikut untuk menghidupkan ulang aplikasi Ekspres web:

    node app.js

    Anda akan menemukan output berikut:

    Example app listening at http://localhost:3000

  6. Di browser, kembali ke tab dari langkah sebelumnya dan tambahkan rute baru, /products, ke akhir URL. Anda akan melihat output JSON berikut:

    [{"id":1,"name":"hammer"},{"id":2,"name":"screwdriver"},{"id":3,"name":"wrench"}]

  7. Di terminal, tekan Ctrl + C untuk menghentikan program Ekspres web.

Selamat! Anda menerapkan rute kedua yang dapat melayani data JSON statis.