Memahami Mock API di JavaScript: Panduan untuk Pemula

Hai para pengembang! Pernahkah Anda merasa sedang membangun aplikasi web yang luar biasa, tetapi terhenti karena menunggu API siap? Membuat frustrasi, bukan? Nah, di situlah mock API hadir untuk menyelamatkan, terutama saat Anda bekerja dengan JavaScript. Dan tebak apa? Alat seperti Apidog membuat proses ini semakin mudah.

Jadi, mari selami dunia mock API di JavaScript dan jelajahi bagaimana mereka dapat meningkatkan proses pengembangan Anda!

Apa itu Mock API?

Mock API mensimulasikan perilaku API sungguhan dengan menyediakan respons yang telah ditentukan sebelumnya untuk permintaan tertentu. Ini seperti pengganti untuk API yang sebenarnya, memungkinkan pengembang untuk terus membangun dan menguji aplikasi mereka tanpa harus menunggu layanan backend selesai.

Mengapa Menggunakan Mock API?

Mock API sangat berguna karena beberapa alasan:

1. Mempercepat Pengembangan: Tidak perlu lagi menunggu pengembang backend. Mulai integrasikan API segera setelah Anda mulai membuat kode frontend Anda.
2. Pengujian: Mereka membantu dalam menguji aplikasi Anda secara menyeluruh dengan menyediakan respons yang konsisten.
3. Isolasi: Anda dapat mengisolasi pengembangan frontend Anda dari backend, mengurangi ketergantungan.
4. Kolaborasi: Tim dapat bekerja secara paralel tanpa saling menghalangi.

Memulai dengan Mock API di JavaScript

Sekarang, mari kita praktik langsung. Berikut adalah cara Anda dapat menyiapkan mock API di JavaScript.

Langkah 1: Menyiapkan Proyek Anda

Pertama, buat proyek JavaScript baru. Jika Anda menggunakan Node.js, Anda dapat mulai dengan:

mkdir mock-api-demo
cd mock-api-demo
npm init -y

Instal Express.js, kerangka kerja web populer untuk Node.js:

npm install express

Langkah 2: Membuat Mock API Anda

Buat file bernama server.js di direktori proyek Anda. File ini akan berisi kode untuk mock API Anda.

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

app.use(express.json());

app.get('/api/users', (req, res) => {
    res.json([
        { id: 1, name: 'John Doe' },
        { id: 2, name: 'Jane Smith' }
    ]);
});

app.listen(port, () => {
    console.log(`Mock API server berjalan di http://localhost:${port}`);
});

Jalankan server dengan:

node server.js

Anda sekarang memiliki mock API yang berjalan di http://localhost:3000/api/users yang mengembalikan daftar pengguna.

Memperkenalkan Apidog

Meskipun menulis mock API Anda sendiri itu bagus, alat seperti Apidog membuatnya lebih mudah dan lebih kuat. Apidog adalah alat komprehensif yang membantu Anda membuat, mengelola, dan menguji API dengan mudah.

Mengapa Memilih Apidog?

1. Antarmuka yang Ramah Pengguna: Tidak perlu menulis kode dari awal. Apidog menyediakan antarmuka visual untuk menentukan API Anda.
2. Kolaborasi: Bagikan definisi API Anda dengan tim Anda dengan mudah.
3. Pengujian: Alat bawaan untuk menguji API Anda langsung dari antarmuka.
4. Dokumentasi: Secara otomatis menghasilkan dokumentasi API.

Langkah 1. Buat Proyek Baru

Apidog menggunakan proyek untuk mengelola API. Anda dapat membuat beberapa API di bawah satu proyek. Setiap API harus termasuk dalam sebuah proyek. Untuk membuat proyek baru, klik tombol "Proyek Baru" di sisi kanan beranda aplikasi Apidog.

Langkah 2. Buat API Baru

Untuk mendemonstrasikan pembuatan API untuk detail pengguna, ikuti langkah-langkah berikut:

• Metode permintaan: GET.
• URL: api/user/{id}, di mana {id} adalah parameter yang mewakili ID pengguna.
• Jenis respons: json.
• Konten respons:

{
id: number, // id pengguna
name: string, // nama pengguna
gender: 1 | 2, // jenis kelamin: 1 untuk pria, 2 untuk wanita
phone: string, // nomor telepon
avatar: string, // alamat gambar avatar
}

Untuk membuat antarmuka baru, buka beranda proyek yang sebelumnya dibuat dan klik tombol "+" di sisi kiri.

Isi informasi antarmuka yang sesuai dan simpan.

Dengan ini, antarmuka detail pengguna telah dibuat. Sementara itu, Apidog telah secara otomatis menghasilkan mock untuk kita berdasarkan format dan jenis bidang respons. Klik tombol "Permintaan" di bawah Mock untuk melihat respons mock.

Mari kita lihat respons mock. Klik tombol "Permintaan" dan kemudian klik "Kirim" pada halaman yang terbuka.

Langkah 3. Atur Aturan Pencocokan Mock

Apakah Anda memperhatikan sesuatu yang ajaib? Apidog mengatur bidang "name" ke tipe string, namun mengembalikan nama; mengatur bidang "phone" ke tipe string, namun mengembalikan nomor telepon; mengatur bidang "avatar" ke tipe string, namun mengembalikan alamat gambar.

Alasannya adalah Apidog mendukung pengaturan aturan pencocokan untuk Mock. Apidog memiliki aturan bawaan, dan pengguna juga dapat menyesuaikan aturan mereka sendiri. Aturan ini dapat ditemukan di Pengaturan Proyek > Pengaturan Fitur > Pengaturan Mock.

Anda juga dapat mengatur aturan Mock khusus untuk setiap bidang. Klik "Mock" di sebelah bidang:

Aturan pencocokan Apidog Mock adalah sebagai berikut:

1. Ketika sebuah bidang memenuhi aturan pencocokan, respons akan mengembalikan nilai acak yang memenuhi aturan Mock.
2. Jika sebuah bidang tidak memenuhi aturan pencocokan apa pun, respons akan mengembalikan nilai acak yang memenuhi tipe data bidang.

Ada tiga jenis aturan pencocokan:

1. Wildcard: * cocok dengan nol atau lebih karakter, dan ? cocok dengan karakter tunggal apa pun. Misalnya, *name dapat cocok dengan user name, name, dan sebagainya.
2. Ekspresi reguler.
3. Pencocokan persis.

Aturan Mock sepenuhnya kompatibel dengan Mock.js, dan telah memperluas beberapa sintaks yang tidak dimiliki Mock.js (seperti nomor telepon domestik "@phone"). Aturan Mock yang umum digunakan meliputi:

1. @integer: integer. @integer(min, max).
2. @string: string. @string(length): menentukan panjang string.
3. @regexp(regexp): ekspresi reguler.
4. @url: URL.

Selama pengembangan, kita mungkin menemukan skenario Mock yang fleksibel dan kompleks, seperti mengembalikan konten yang disesuaikan berdasarkan parameter permintaan yang berbeda. Misalnya, mengembalikan informasi pengguna normal ketika ID adalah 1, dan melaporkan kesalahan ketika ID adalah 2. Apidog juga mendukung skenario ini, dan mereka yang tertarik dapat melihat dokumen Mock Tingkat Lanjut.

Teknik Mock API Tingkat Lanjut

Respons Dinamis

Terkadang, respons statis tidak cukup. Anda mungkin memerlukan mock API Anda untuk mengembalikan data yang berbeda berdasarkan permintaan. Mari tingkatkan contoh kita sebelumnya.

app.get('/api/users/:id', (req, res) => {
    const users = [
        { id: 1, name: 'John Doe' },
        { id: 2, name: 'Jane Smith' }
    ];

    const user = users.find(u => u.id == req.params.id);
    if (user) {
        res.json(user);
    } else {
        res.status(404).send('User not found');
    }
});

Sekarang, Anda dapat meminta pengguna tertentu berdasarkan ID mereka, dan mock API akan mengembalikan pengguna yang sesuai atau kesalahan 404 jika pengguna tidak ditemukan.

Respons Tertunda

Untuk mensimulasikan latensi jaringan, Anda dapat memperkenalkan penundaan dalam respons Anda. Ini dapat berguna untuk menguji bagaimana aplikasi Anda menangani jaringan yang lambat.

app.get('/api/users', (req, res) => {
    setTimeout(() => {
        res.json([
            { id: 1, name: 'John Doe' },
            { id: 2, name: 'Jane Smith' }
        ]);
    }, 2000); // Penundaan 2 detik
});

Bagaimana Cara Menghasilkan Data Mock yang Ramah Pengguna Secara Efisien dengan Apidog?​

• Apidog dapat menghasilkan aturan mock berdasarkan struktur data dan tipe data dalam definisi API.
• Apidog memiliki mock cerdas bawaan, yang menghasilkan aturan mock berdasarkan nama bidang dan tipe data bidang. Misalnya, jika bidang string berisi "image", "time", "city", dll... dalam namanya, Apidog akan menghasilkan url, string, atau nama sesuai dengan bidangnya.
• Berdasarkan aturan mock bawaan, Apidog dapat secara otomatis mengidentifikasi bidang, seperti gambar, avatar, nama pengguna, nomor ponsel, URL, tanggal, waktu, stempel waktu, email, provinsi, kota, alamat, dan IP, untuk menghasilkan data dummy yang ramah pengguna.
• Selain aturan mock bawaan, pengguna juga dapat menyesuaikan aturan untuk memenuhi berbagai kebutuhan personalisasi. Ini mendukung pencocokan bidang string menggunakan ekspresi reguler atau wildcard.

Di bawah ini adalah contoh data mock yang dihasilkan oleh Apidog tanpa konfigurasi apa pun:

Praktik Terbaik untuk Menggunakan Mock API

1. Buat Sederhana: Mulai dengan respons statis yang sederhana dan secara bertahap tambahkan kompleksitas sesuai kebutuhan.
2. Dokumentasikan Mock API Anda: Pastikan tim Anda mengetahui titik akhir yang tersedia dan responsnya.
3. Pembaruan Reguler: Jaga agar mock API Anda tetap diperbarui seiring dengan evolusi API yang sebenarnya.
4. Uji Secara Menyeluruh: Gunakan mock API untuk menguji berbagai skenario, termasuk kasus ekstrem.

Kasus Penggunaan Dunia Nyata

Pengembangan Frontend

Saat membangun aplikasi frontend, Anda dapat menggunakan mock API untuk mulai mengerjakan fitur segera, tanpa menunggu backend siap. Pendekatan ini membantu dalam pengembangan paralel dan mempercepat keseluruhan proses.

Pengujian Otomatis

Mock API sangat penting untuk pengujian otomatis. Mereka memberikan respons yang konsisten, sehingga lebih mudah untuk menulis pengujian yang andal. Alat seperti Jest dan Cypress dapat berintegrasi dengan mock API untuk menguji berbagai komponen dan alur.

Pembuatan Prototipe

Saat membuat prototipe atau bukti konsep, mock API memungkinkan Anda untuk dengan cepat menyiapkan interaksi backend yang diperlukan tanpa menginvestasikan waktu dalam membangun layanan backend yang sebenarnya.

Kesimpulan

Mock API adalah pengubah permainan bagi pengembang, menyediakan cara untuk mempercepat pengembangan, meningkatkan pengujian, dan memfasilitasi kolaborasi yang lebih baik. Dengan alat seperti Apidog, membuat dan mengelola mock API menjadi sangat mudah, memungkinkan Anda untuk fokus pada pembangunan aplikasi yang luar biasa.

Jadi, lain kali Anda merasa menunggu API, ingatlah bahwa mock API adalah teman terbaik Anda. Dan jangan lupa untuk memeriksa Apidog untuk pengalaman tanpa repot!

Ajakan BertindakUnduh Apidog secara gratis