Hướng dẫn cài đặt restful web service
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 https://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 FileTiếp theo, hãy tạo file JSON và đặt tên file theo cú pháp { "employees": [ "profile": { }, }
Cấu trúc trên mô tả employee object với các trường id, firstName, lastName, address và profile.Khởi động ServerHã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ỉ http://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 ý:
Một số thao tác truy vấnFilterSử 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 /[email protected] PaginateSử 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 SortSử 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 https://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ạn click vào biểu tượng Administrative Tools, ta có giao diện tiếp theo:Bạn chọn “Internet Information Services (IIS) Manager” như hình trên:Trong màn hình quản trị bạn thấy có 2 vùng: Application Pools và Default Web site.Bước 4.1 Cấu hình Application Pools: Application Pool là gì? 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: Màn hình tạo mới Application Pool hiển thị lên, ta nhập “FoodServer_Pool” rồi bấm OK:Sau khi bấm OK, bạn quan sát:Ở màn hình trên bạn tiếp tục chọn Advanced Settings.. cho FoodServer_Pool:Bạn cần chỉnh ApplicationPoolIdentity qua LocalSystem.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 Alias (1): Đặt tên cho Service, ở đây ta đặt foodserverMụ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: – gõ lệnh cmd, màn hình command line hiển thị lên, tiếp tục gõ lệnh ipconfigỞ trên máy local của Tui có địa chỉ IP: 192.168.100.3Bây giờ Tui thay thế cho localhost: Như vậy ta cũng có được kết quả mong muốn.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. |