Cách tạo REST API với JSON Server

Bizfly Cloud

1267

17-06-2022

Có nhiều cách khác nhau để có thể cài đặt backend Server đầy đủ như sử dụng Node.js, Express và MongoDB. Tuy nhiên các cách này thường khá phức tạp và tốn kém nên ít được sử dụng. Bài viết dưới đây Bizfly Cloud sẽ hướng dẫn cho bạn cách tạo REST API với JSON Server đơn giản nhất. 

JSON Server là gì? 

JSON Server là một máy chủ mà trong đó, các dữ liệu được trả về dưới dạng JSON. Nó giúp người dùng có thể tạo một fake REST API bằng cách sử dụng JSON với mục đích chính là tương tác với dữ liệu nhanh chóng. Nhờ tính năng này mà người dùng không cần phải tạo Database từ đầu đến cuối.

Cần chuẩn bị gì để tạo REST API với JSON Server? 

Trước khi tạo REST API với JSON Server, bạn cần tải gói phù hợp với hệ điều hành của mình để cài node cho máy tính bằng cách sử dụng link sau: https://nodejs.org/en/download/. Tiếp đó, bạn cần kiểm tra phiên bản của Node và NPM bằng cú pháp: $ node -v $ NPM -v. Màn hình của bạn sẽ hiển thị đã cài đặt thành công nếu xuất hiện version của Node và NPM (Node Package Management).

Cài đặt JSON Server 

JSON Server được đóng gói tương tự như một NPM Package nên việc cài đặt nó có thể được thực hiện bằng cách sử dụng gói Node.js Manager. Cú pháp như sau: $ NPM Install -g json -server. Trong đó, tuỳ chọn -g sẽ giúp cài đặt package ở level hệ thống.

Tạo JSON File 

Trong bước này, bạn cần tạo file JSON có tên là data.json, file này chứa các dữ liệu được trả về bởi REST API. Ví dụ về file JSON:

Khởi động Server 

Chạy lệnh "$ json - server - -watch data.json" để khởi động JSON Server. File data.json được truyền vào như một tham số trong câu lệnh này, option - -watch được thêm vào nhằm đảm bảo server được start ở watch mode. Server sẽ xem chừng các thay đổi của file đồng thời cập nhật kết quả vào API một cách phù hợp trong mode này. Bạn mở địa chỉ https://localhost:3000/employees trên browser và nhận lại kết quả của file JSON đã tạo trước đó. 

Dưới đây là các HTTP Endpoints đã được JSON Server tạo tự động và người dùng có thể tuỳ ý lựa chọn để phù hợp nhất với mục đích của mình:

• GET /employees
• GET /employees/ {id}
• POST /employees
• PUT /employees/ {id}
• PATCH /employees / {id}
• DELETE /employees / {id}

Cần lưu ý một số điểm sau khi khởi động Server:

• Giá trị của Id không được thay đổi và sau mỗi POST request, giá trị này sẽ được tăng dần.
• Giá trị của id sẽ được bỏ qua nếu ta cung cấp giá trị cho id cho PUT hoặc PATCH request.
• Cần bổ sung thêm Content- Type: Application/JSON trong body. Dữ liệu sẽ không được cập nhật vào file data.json nếu không có thiết lập này.

Ngoài ra, bạn cũng có thể thêm vào URL các params khác và kết quả trả về sẽ là một Object Employee.

Dùng địa chỉ IP để Deploy lên Localhost

Deploy lên Localhost sẽ không thể sử dụng trong các trường hợp test từ bên ngoài như mobile app. Bạn cần deploy nó với địa chỉ IP của máy chủ. Đầu tiên, truy cập vào System Preferences/ Network/ Wifi và sao chép địa chỉ IP của máy (ví dụ x.x.x). Tiếp đó, start json server bằng cú pháp $ json-server - - host X.X.X data.json. Lúc này, bạn hoàn toàn có thể truy xuất thông tin bằng cách truy cập vào địa chỉ https://x.x.x.x:3000/employees từ bên ngoài.

Một số thao tác truy vấn 

Bên cạnh việc tạo REST API với JSON Server, bạn cũng cần nắm được các thao tác truy vấn cơ bản dưới đây.

Filter 

Thao tác truy vấn đầu tiên là Filter, cho phép truy cập vào các thuộc tính bằng cách sử dụng dấu ".". Ví dụ về các thuộc tính cho phép người dùng truy cập là:

• GET / employees?firstName="Hoàng"& lastName ="Phan"
• GET / employees?id=1
• GET / employees?profile.email=khanh.le@codegym.vn

Paginate 

Thao tác thứ hai là Paginate, trả về dữ liệu sau khi được phân trang bằng cách sử dụng _page và tuỳ chọn _limit. Trong đó _limit mặc định là 10. Cú pháp GET / employees?_page=7 GET / employees?_page=7&_limit=20.

Sort 

Sort và Order là thao tác mặc định thứ tự sắp xếp tăng dần:

• GET / employees?_sort=firstName&_order=asc
• GET / employees/1/?_sort=firstName&_order=desc.

Cú pháp sắp xếp nhiều trường:

GET / employees?_sort=firstName, lastName&_order=desc,asc.

Tạo REST API cho các chức năng CRUD 

Để lưu trữ các API của mình hoặc sử dụng Collection của Postman để chia sẻ API, bạn cần khởi tạo thư mục API - Collection và 2 file class.http và students.http.

- Bước 1, chạy lệnh sau để chạy server:

• npm run render-data
• npm run dev

- Bước 2, lấy danh sách lớp (GET): bạn lấy toàn bộ danh sách cơ bản trong link dưới đây: http://localhost:3000/api/class". Bằng cách sử dụng phương thức GET, người dùng cần phân trang cho dữ liệu nhằm mục đích tối ưu quá trình gọi và sử dụng phía Client nếu dữ liệu lớn. Bởi JSON - Server chỉ hỗ trợ lấy được tổng số phần tử của danh sách. Người dùng cần tiếp tục theo dõi Response headers trả về để tìm ra phương pháp tối ưu cho API phân trang. Link gọi API là http://localhost:3000/api/class?_page=1&_limit=10. Điều này có nghĩa là ta đang gọi các phần tử của trang thứ 1 và mỗi trang sẽ có 10 phần tử. Chúng ta có thể dựa vào query hoặc search để lấy được page và limit cho response của mình. Bạn cũng có thể sử dụng thêm thư viện query-string để lấy dữ liệu từ query.

- Bước 3, tạo POST- tạo một lớp mới: Bạn truy cập vào link tạo lớp http://localhost:3000/api/class. Với các API có phương thức POST, PUT, PATCH, người dùng sẽ tự động cập nhật thời gian tạo, cập nhật tương ứng. Đồng thời, bạn cũng sử dụng Postman để kiểm tra tương tự với các phương thức POST, PUT, PATCH.

Đối với Front-End, một công việc khá phổ biến và quan trọng là phải giả lập một Backend REST Service nếu muốn nhận JSON data cung cấp cho ứng dụng. Đồng thời phải đảm bảo nó hoạt động như mong đợi trong khi đang chờ phía Backend hoàn thiện Service. 

Hi vọng bài viết trên đã cung cấp cho bạn toàn bộ thông tin về cách tạo REST API với JSON Server. Có thể nói, JSON là một phương thức hiệu quả giúp bạn cài đặt backend với đầy đủ các thao tác CRUD. Nếu muốn tìm hiểu sâu hơn về những hỗ trợ của JSON Server, bạn có thể tham khảo tại https://github.com/typicode/json-server.