React app làm việc với Rails 5.1 API

798

Thiết lập Rails 5.1 API

Hãy bắt đầu bằng việc xây dựng Rails API. Chúng ta sẽ sử dụng tính năng được tích hợp của Rails để xây dựng ứng dụng chỉ có API.

Hãy đảm bảo rằng bạn có version 5.1 hoặc cao hơn của Rails gem được cài đặt.

Tiếp theo hãy tạo một Rails API app với flag --api

Tiếp theo hãy tạo ra data model. Chúng ta chỉ cần một data model sử dụng cho các ý tưởng, với hai trường đó là title và body, cả hai đều có type là string.

Hãy khởi tạo và chạy migration:

Như vậy ta đã có bảng dành cho Ideas, và hãy viết một số dữ liệu mẫu để ta có thể hiển thị.

Trong file db/seeds.rb, hãy thêm đoạn code sau:

Bạn có thể thay thế nội dung khác mà bạn mong muốn.

Sau đó chạy lệnh:

Sau đó, ta hãy tạo một IdeasController với action index trong file: app/controllers/api/v1/ideas_controller.rb :

Hãy để ý rằng controller ở bên trong folder app/controllers/api/v1 bởi vì chúng ta đang thiết lập version cho API của mình. Đây là một cách làm tốt để tránh việc lỗi xảy ra do có sự thay đổi và đáp ứng được backward compatibility (tương thích ngược) cho API của chúng ta.

Sau đó ta thêm resource ideas trong config/routes.rb

OK, bây giờ chúng ta hãy test API endpoint đầu tiên của mình:

Chạy lệnh:

Sau đó, kiểm tra endpoint để lấy về dữ liệu của tất cả ideas với curl:

Và ta sẽ thấy các dữ liệu Ideas được trả về dưới dạng JSON:

Chúng ta cũng hoàn toàn có thể test endpoint này trên một browser bằng cách mở đường dẫn: http://localhost:3001/api/v1/ideas

Thiết lập ứng dụng Front-end sử dụng Create React App

Bây giờ ta đã có một API cơ bản, hãy thiết lập ứng dụng Front-end React sử dụng Create React App.

Create React App là một project của Facebook, giúp bạn bắt đầu với React app một cách nhanh chóng mà không cần thiết lập nào cả.

Đầu tiên, bảo đảm rằng bạn đã có Node.js và npm được cài đặt. Bạn có thể download installer từ trang web của Node.js. Sau đó cài đặt Create React App bằng cách chạy lệnh:

Sau đó bạn hãy rời khỏi Rails directory và chạy lệnh sau:

Tiếp theo, chạy React app:

Bạn sẽ được chuyển thẳng tới trang http://localhost:3000

Ứng dụng React này có một trang mặc định với một React component được gọi là App dùng để hiển thị React logo.

Nội dung của trang được render thông qua React component ở trong file src/App.js

React Component đầu tiên

Bước tiếp theo của chúng ta là sửa lại file này để sử dụng API mà chúng ta mới tạo ra và list ra danh sách tất cả các ideas trên page.

Hãy bắt đầu bằng cách thay đổi Welcome message với một <h1> tag có chứa title của ứng dụng của chúng ta : “Idea Board”.

Ta cũng sẽ thêm một component tên là IdeasContainer. Ta cần import nó và cho vào trong function render:

Ta tiếp tục tạo ra component IdeasContainer bên trong một file mới : IdeasContainer.js bên trong directory: src/components:

Ta cũng hãy thay đổi style của App.css để có một header màu trắng và chữ màu đen, và ta cũng bỏ đi những styles ta không cần:

Component mới sẽ cần giao tiếp với Rails API end point của chúng ta để lấy các thông tin về list Ideas và hiển thị chúng.

Lấy dữ liệu API bằng axios

Chúng ta sẽ tạo ra một Ajax call tới API bên trong method lifecycle componentDidMount() của IdeasContainer component và lưu ideas trong state của component.

Và ta sẽ update state trong componentDidMount().

Hãy sử dụng thư viện axios để thực hiện gọi API. Bạn cũng có thể sử dụng jQuery nếu bạn thích cách đó hơn.

Cài đặt axios bằng npm:

Sau đó import nó vào IdeadsContainer:

Và sử dụng nó trong componentDidMount():

Tuy nhiên lúc này ta sẽ gặp lỗi bởi API của chúng ta nằm ở port khác (3001 so với 3000), và chúng ta vẫn chưa enable Cross Origin Resource Sharing (CORS).

Cho phép thực hiện Cross Origin Resource Sharing (CORS)

Trước tiên, hãy enable CORS bằng cách sử dụng gem rack-cors ở Rails app của chúng ta:

Thêm gem vào trong Gemfile:

Cài đặt nó

Sau đó, ta thêm middleware configuration vào file config/application.rb.

Chúng ta giới hạn origins chỉ bao gồm front-end app của mình ở http://localhost:3000và cho phép access vào các methods endpoint chuẩn REST API cho tất cả resouces.

Bây giờ ta cần restart Rails server, và nếu ta refresh lại browser, ta sẽ không gặp lỗi CORS nữa.

Trang web sẽ được load thành công và ta có thể thấy dữ liệu từ phía API Rails được log lại trong console.

Như vậy ta đã biết là có thể lấy được các dữ liệu ideas từ API và hãy sử dụng nó trong React component của chúng ta.

Ta có thể thay đổi function render để chạy một vòng lặp quanh danh sách ideas từ state và hiển thị tất cả.

Hãy chú ý về attributes key của div có className là tile.

Chúng ta cần bao gồm nó khi tạo ra list của các elements. Keys giúp React định danh items nào đã bị thay đổi, được thêm vào hay bị bỏ ra.

Bây giờ hãy thêm vào một vài style trong App.css để khiến cho các item idea nhìn giống một viên đá lát (tile).

Stateless functional components

Trước khi chúng ta tiếp tục, hãy refactor lại code và chuyển phần JSX của các tile idea sang một component riêng gọi là Idea

Đây là một stateless functional componet (hay còn được gọi là một “dumb” component), có nghĩa là nó không có state nào cả. Nó chỉ là một function chấp nhận dữ liệu đầu vào và trả về JSX.

Và trong map function ở IdeasContainer, ta có thể return component Idea mới được tạo như sau:

Ngoài ra cũng đừng quên import Idea:

Như vậy ta đã hoàn thành phần đầu tiên của ứng dụng. Chúng ta có một API với một endpoint để lấy các ideas và có một React app để hiển thị chúng.

Techtalk via Viblo