Hướng Dẫn Chi Tiết Tạo REST API Trong Trình Duyệt Không Cần Máy Chủ

Nếu bạn là lập trình viên Front-End và muốn tối ưu hóa kỹ năng của mình, có thể bạn đã gặp phải một số hạn chế khi sử dụng các nền tảng như GitHub Pages hoặc Netlify. Tuy nhiên, bạn hoàn toàn có thể tạo REST API ngay trong trình duyệt mà không cần tới bất kỳ máy chủ nào. Phương pháp này cho phép bạn thể hiện kỹ năng của mình bằng cách tương tác với phần backend mà không cần truy cập vào máy chủ ngoài. Bài viết này sẽ hướng dẫn bạn một cách chi tiết về cách thực hiện điều đó.

Service Worker Là Gì?

Service Worker là một API trong trình duyệt cho phép bạn xử lý các yêu cầu HTTP và tạo phản hồi HTTP trực tiếp trong trình duyệt. API này được thiết kế để chặn các yêu cầu HTTP và phục vụ chúng từ bộ nhớ cache. Điều này không chỉ giúp bạn tạo ra Progressive Web Apps (PWA) mà còn cho phép ứng dụng của bạn hoạt động ngay cả khi không có kết nối internet.

Tính Năng Nổi Bật của Service Worker:

• Chặn các yêu cầu HTTP từ trình duyệt.
• Tạo và phục vụ các phản hồi tùy chỉnh.
• Hỗ trợ chế độ ngoại tuyến cho ứng dụng.

Cách Đăng Ký Service Worker

Để đăng ký một Service Worker, bạn cần tạo một tệp riêng (thường có tên là sw.js) và thực hiện mã đăng ký sau:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('sw.js')
    .then(function(reg) {
      console.log('Đăng ký thành công. Phạm vi là ' + reg.scope);
    }).catch(function(error) {
      console.log('Đăng ký thất bại với ' + error);
    });
}

Lưu ý: Service Worker chỉ hoạt động trên HTTPS hoặc localhost.

Tạo Phản Hồi HTTP Cơ Bản

Dưới đây là một ví dụ đơn giản để tạo phản hồi HTTP thông qua Service Worker:

self.addEventListener('fetch', event => {
    const url = new URL(event.request.url);
    if (url.pathname === '/api/hello/') {
        const msg = 'Xin chào, Service Worker!';
        event.respondWith(new Response(msg, { headers: {'Content-Type': 'text/plain'} }));
    }
});

Khi bạn mở URL /api/hello/, nó sẽ trả về văn bản "Xin chào, Service Worker!".

Tạo Dự Án Cơ Bản Với React

1. Thiết Lập Vite Để Tạo Ứng Dụng React

Để bắt đầu, bạn cần thiết lập một ứng dụng React đơn giản bằng cách sử dụng Vite. Thực hiện các bước sau:

npm create vite@latest

Tiếp theo, bạn cần cài đặt các phụ thuộc cần thiết và chỉnh sửa tệp cấu hình Vite.

2. Sử Dụng Thư Viện Wayne

Cài đặt Wayne để giúp bạn dễ dàng tạo các route mà không cần viết nhiều mã:

npm install @jcubic/wayne

Tạo tệp sw.js và định nghĩa các route:

import { Wayne } from '@jcubic/wayne';

const app = new Wayne();

app.get('/api/hello/', (req, res) => {
   res.text('Xin chào, Service Worker!');
});

3. Đăng Ký Service Worker

Để đăng ký service worker, bạn cần sử dụng thư viện register-service-worker:

npm install register-service-worker

Cập nhật mã trong tệp src/main.jsx để đăng ký Service Worker:

import { register } from 'register-service-worker';

register('./sw.js');

4. Kiểm Tra Ứng Dụng Trên Máy Chủ Web

Bạn có thể sử dụng lệnh sau để tạo một máy chủ HTTP đơn giản:

npx http-server -p 3000 ./dist/

Mở trình duyệt và truy cập vào URL http://127.0.0.1:3000 để kiểm tra ứng dụng.

Thêm Xác Thực Trong Ứng Dụng React

Bạn có thể sử dụng mã thông báo JWT để thực hiện xác thực người dùng. Cài đặt thư viện jose:

npm install jose

Tạo các endpoint xác thực và logic giao diện người dùng để quản lý phiên đăng nhập. Tạo một hàm gửi yêu cầu đăng nhập đến endpoint API:

function login(username, password) {
    return fetch('/api/login', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ username, password })
    }).then(res => res.json());
}

Bên cạnh đó, bạn cần tạo một biểu mẫu để người dùng nhập thông tin đăng nhập. Sử dụng state và refs trong React để quản lý đầu vào từ người dùng và hiển thị phản hồi từ server.

Cuối cùng, bạn có thể cải thiện ứng dụng bằng cách kiểm tra và lưu trữ mã thông báo trong localStorage, đồng thời thêm nút đăng xuất để cải thiện trải nghiệm người dùng.

Hy vọng rằng bài viết này sẽ giúp bạn nắm vững cách tạo REST API ngay trong trình duyệt mà không cần máy chủ, từ đó mở rộng khả năng phát triển ứng dụng của bạn một cách hiệu quả hơn.
source: viblo