Một công việc khá phổ biến đối với front-end developer là phải giả lập một backend REST service để nhận JSON data cung cấp cho ứng dụng front-end, và đảm bảo nó hoạt động như mong đợi trong khi đang chờ phía backend hoàn thiện service.
Bạn vẫn có thể cài đặt backend server đầy đủ, bằng cách sử dụng Node.js, Express và MongoDB, tuy nhiên việc này tốn khá nhiều thời gian và phức tạp. Trong khi đó JSON Server lại là một giải pháp khá hoàn thiện cho yêu cầu nhanh và đơn giản với đầy đủ các thao tác CRUD [Create Read Update Delete].
Vì vậy bài viết này sẽ hướng dẫn bạn cách cài đặt JSON server và publish một sample REST API.
Chuẩn bị
Cài node cho máy tính của bạn bằng cách tải gói phù hợp với hệ điều hành của bạn ở link sau //nodejs.org/en/download/
Sau khi cài đặt xong chúng ta tiến hành kiểm tra version của node và npm bằng cách như sau:
$ node -v $ npm –v
Nếu màn hình xuất hiện version của node và npm [Node Package Managerment] thì có nghĩa bạn đã cài đặt thành công
JSON Server được đóng gói như một NPM package. Vì vậy việc cài đặt có thể được thực hiện thông qua việc sử dụng gói node.js manager:
$ npm install -g json-server
Tuỳ chọn -g sẽ giúp cho package được cài đặt ở level hệ thống.
Tạo JSON File
Tiếp theo, hãy tạo file JSON và đặt tên file theo cú pháp .json ví dụ: data.json. Trong file này sẽ chứa những dữ liệu được trả về bởi REST API. Dưới đây là một ví dụ về file json này:
{ "employees": [
{
"id": 1,
"firstName": "Phuc",
"lastName": "Lê",
"address": "28 Nguyễn Tri Phương, Phú Nhuận, TP Huế",
"username": "phuc.le@codegym.vn",
"email": "phuc.le@codegym.vn",
},
{
"id": 2,
"firstName": "Khanh",
"lastName": "Lê",
"address": "28 Nguyễn Tri Phương, Phú Nhuận, TP Huế",
"profile": {
"username": "khanh.le@codegym.vn",
"email": "khanh.le@codegym.vn",
},
},
{
"id": 3,
"firstName": "Hoàng",
"lastName": "Phan",
"address": "28 Nguyễn Tri Phương, Phú Nhuận, TP Huế",
"profile": {
"username": "hoang.phan@codegym.vn",
"email": "hoang.phan@codegym.vn",
}
}
Khởi động Server
Hãy khởi động JSON server bằng việc chạy câu lệnh sau:
$ json-server --watch data.json
Lưu ý: Nếu file json không nằm ở thư mục gốc thì chúng ta sử dụng lện cd để đặt con trỏ hệ thống tới thư mục chứa file data.json rồi mới thực hiện lệnh trên.
File data.json được truyền vào như một tham số trong câu lệnh trên, và option –watch được thêm vào nhằm đảm bảo server được chạy ở chế độ xem, ở chế độ này, server sẽ xem xét những thay đổi và cập nhật kết quả vào API một cách phù hợp.
Bây giờ hãy mở địa chỉ //localhost:3000/employees trên browser và ta sẽ nhận được kết quả của file json mà ta đã tạo.
Những HTTP endpoints sau đây được tạo tự động bởi JSON server, ta có thể tuỳ chọn để sử dụng sao cho phù hợp 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} Lưu ý:
- Giá trị của id không được thay đổi, và nó sẽ được tăng dần sau mỗi POST request.
- Nếu ta có cung cấp giá trị cho id cho PUT hoặc PATCH request thì giá trị đó sẽ được bỏ qua.
- Các loại POST, PUT và PATCH request thì phải bổ sung thêm Content-Type: application/json trong body. Nếu không có thiết lập này thì dữ liệu sẽ không được cập nhật vào file data.json.
Một số thao tác truy vấn
Filter
Sử dụng dấu . để truy cập vào các thuộc tính
GET /employees?firstName=”Hoàng”&lastName =”Phan” GET /employees?id=1 GET /employees?profile.email=khanh.le@codegym.vn
Paginate
Sử dụng _page và tùy chọn _limit để trả về dữ liệu sau khi được phân trang. Mặc định _limit là 10
GET /employees?_page=7 GET /employees?_page=7&_limit=20
Sort
Sử dụng _sort và _order. Mặc định là sắp xếp tăng dần:
GET /employees?_sort=firstName&_order=asc GET /employees/1/?_sort=firstName&_order=desc Sắp xếp nhiều trường:
GET /employees?_sort=firstName,lastName&_order=desc,asc
Ngoài ra, để tìm hiểu sâu hơn về những hỗ trợ mà json server cung cấp, các bạn có thể tìm hiểu thêm ở đây //github.com/typicode/json-server
Trong bài bài 68 và bài 69 và bài 70 các bạn đã hiểu được RESTful cũng như cách thức hoạt động của HttpPost, HttpGet, HttpPut và HttpDelete. Tuy nhiên để tương tác được với nó thì cần cấu hình lên Webserver, cụ thể là IIS, trước đây Tui có hướng dẫn các bạn cách tạo lên somee.com, các bạn có thể xem lại bài hướng dẫn này ở đây
Trong bài này Tui sẽ hướng dẫn các bạn từng bước cài đặt lên IIS Server ở máy local của các bạn, việc test trên máy local cũng khá quan trọng vì khi test hoàn chỉnh xong thì ta mới publish ra ngoài.
Dưới đây là chi tiết từng bước cách dựng IIS Server và cách triển khai FoodServer lên IIS này [Tui setup trên Win 10, 64 bit]
Bước 1: Vào Control panel chọn Programs and Features
Bước 4: Sử dụng IIS Web Server:
Sau khi cài xong IIS Web Server, bạn quay lại màn hình Control panel, bạn sẽ thấy Administrative Tools:
Bước 4.1 Cấu hình Application Pools:
Application Pool là gì?Application Pool có thể chứa một hoặc nhiều ứng dụng và cho phép chúng ta cấu hình cấp độ giữa các ứng dụng web khác nhau. Ví dụ, nếu bạn muốn cô lập tất cả các ứng dụng web chạy trong cùng một máy, bạn có thể làm điều này bằng cách tạo ra Application Pool riêng biệt cho mỗi ứng dụng web và đặt chúng trong Application Pool tương ứng. Bởi vì mỗi Application Pool chạy trong quá trình làm việc riêng của mình, các lỗi trong Application Pool sẽ không ảnh hưởng đến các ứng dụng đang chạy trong Application Pool khác. Triển khai ứng dụng trong Application Pool là lợi thế chính của IIS trong quá trình làm việc ở chế độ cách ly bởi vì bạn có thể tùy chỉnh Application Pool để đạt được cấp độ tách biệt ứng dụng mà bạn cần.
Khi bạn cấu hình Application Pool để sẵn sàng tối ưu, bạn cũng nên xem xét làm thế nào để cấu hình Application Pool bảo mật ứng dụng. Ví dụ, bạn có thể cần phải tạo ra Application Pool riêng cho ứng dụng đòi hỏi mức độ bảo mật cao, trong khi cho phép các ứng dụng đòi hỏi một mức độ thấp hơn của bảo mật để chia sẻ cùng Application Pool.
Bạn bấm chuột phải vào màn hình Application Pools/ chọn Add Application Pool… như hình dưới đây:
Bước 4.2: Cấu hình WebService lên IIS Server
Bấm chuột phải vào Default Web Site / chọn Add Application …
Màn hình hiển thị Add Application:
Mục Application pool [2]: Nhấn nút Select… và chọn đúng FoodServer_Pool
Mục Physical path [3]: Trỏ tới đường dẫn chứa source code của project
Sau đó bấm OK để tạo.
Bạn quan sát kết quả:
Các bạn có thể dùng Postman và HttpRequester để test HttpPost, HttpGet, HttpPut và HttpDelete.
Các bạn chú ý rằng khi từ Mobile kết nối tới Web Service này thì không thể dùng localhost [vì nó lầm tưởng là của chính mobile], đo dó bạn cần đưa localhost về 1 địa chỉ IP để test.
Cách lấy địa chỉ IP của máy local của ta:
– Nhấn tổ hợp phím có biểu tượng Windows + R để mở cửa sổ Run:
Bây giờ Tui thay thế cho localhost:
Các bạn cố gắng cấu hình để được kết quả như trên.
Bài sau Tui sẽ hướng dẫn cách tương tác từ Mobile Android lên RESTful WebService, các bạn chú ý theo dõi.