Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Laravel
Code

Xây dựng ứng dụng React với Laravel RESTful: Phần 1, Laravel 5.5 API

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Build a React App with Laravel Backend.
Build a React App With a Laravel Back End: Part 2, React

Vietnamese (Tiếng Việt) translation by Thai An (you can also view the original English article)

Laravel và React là hai công nghệ phát triển web phổ biến được dùng để xây dựng các ứng dụng web hiện đại. Laravel là một framework PHP nổi bật chạy ở server, còn React là một thư viện JavaScript ở client. Bài hướng dẫn này giới thiệu về Laravel lẫn React, kết hợp chúng để tạo một ứng dụng web hiện đại.

Trong một ứng dụng web ngày nay, server có nhiệm vụ bị giới hạn trong việc quản lý back-end thông qua vài endpoints (điểm cuối) của API (Application Programming Interface - giao diện lập trình ứng dụng). Client (máy khách) gửi các yêu cầu đển endpoint, và server (máy chủ) gửi phản hồi lại. Tuy vậy, server không bận tâm đến việc client sẽ hiển thị view thế nào, điều này hoàn toàn phù hợp với quy tắc Seperation of Concerns (tách biệt các vấn đề). Kiến trúc này cho phép người phát triển xây dựng những ứng dụng web mạnh mẽ và cho nhiều thiết bị khác nhau.

Trong hướng dẫn này, chúng sẽ sử dụng phiên bản Laravel mới nhất, bản 5.5, để tạo ra một RESTful back-end API. Phần front-end gồm các component được viết bằng React. Chúng sẽ xây dựng một ứng dụng liệt kê danh sách sản phẩm đầy đủ. Phần đầu của bài viết sẽ tập trung nhiều hơn vào các khái niệm của Laravel và back-end. Hãy bắt đầu nào.

Giới thiệu

Laravel là một framework được phát triển dành cho web hiện đại. Nó có cú pháp dễ hiểu và tuân theo nguyên tắc convention over configuration. Laravel có tất cả tính năng bạn cần để bắt đầu ngay với một dự án mới lạ. Nhưng cá nhân tôi thích Laravel vì nó biến việc phát triển với PHP trở thành một quy trình và trải nghiệm hoàn toàn khác biệt.

Mặt khác, React là một thư viện JavaScript phổ biến phát triển bởi Facebook để xây dựng những ứng dụng single-page (chỉ có một trang). React giúp bạn chia nhỏ view thành những component, ở đó mỗi component sẽ mô tả một phần UI của ứng dụng. Cách tiếp cận theo component này có ích trong việc có thể sử dụng lại và được chia theo module cho các component.

Sao lại là Laravel và React?

Nếu bạn đang phát triển web, có lẽ bạn thiên về cách sử dụng một codebase (nền tảng ngôn ngữ) cho cả server và client. Tuy vậy, không phải công ty nào cũng cho phép nhà phát triển tự do chọn lựa công nghệ họ yêu thích, và có vài lý do tích cực khác. Sử dụng JavaScript toàn diện cả dự án là xu thế hiện thời, nhưng bạn hoàn toàn được phép dùng những công nghệ khác nhau cho hai phía server và client.

Vậy Laravel và React thích hợp với nhau đến mức nào? Thực tế là khá tốt. Dù Laravel có tài liệu hỗ trợ Vue.js, đây là một JavaScript framework khác, nhưng chúng ta sẽ sử dụng React cho front-end bởi vì nó phổ biến hơn.

Các yêu cầu cần có

Trước khi bắt đầu, tôi giả thiết bạn đã có hiểu biết sơ bộ về kiến trúc RESTful và cách thức làm việc của API endpoint. Nếu bạn có kinh nghiệm trước đó với React hoặc Laravel, bạn có thể bắt kịp bài hướng dẫn này.

Tuy nhiên, nếu bạn chưa biết về 2 framework này, đừng lo lắng. Bài hướng dẫn được xây dựng cho người mới bắt đầu, và bạn có thể theo kịp không quá khó khăn. Bạn có thể tìm thấy mã nguồn của hướng dẫn tại Github.

Cài đặt và cấu hình dự án Laravel của bạn

Laravel sử dụng Composer để quản lý tất cả phần phụ thuộc. Vì thế trước khi bắt đầu với Laravel, hãy download và cài đặt Composer cho máy tính của bạn. Bạn cũng sẽ cần cấu hình các biến môi trướng để composer có thể truy cập toàn cục.

Chạy lệnh sau đây để tải bộ cài đặt Laravel.

Nếu bạn cấu hình chính xác biến $PATH và bổ sung ~/.composer/vendor/bin vào path (đường dẫn), bạn có thể tạo ra một dự án Laravel hoàn toàn mới theo cách sau:

Một cách khác, bạn có thể dùng Composer để tạo một dự án Laravel mới mà không cần trình cài đặt Laravel.

Nếu mọi thứ ổn, bạn sẽ có thể chạy ứng dụng của mình trên server phát triển tại http://localhost:8000/

Lưu ý: Artisan là công cụ dòng lênh bạn cần phải có khi làm việc với Laravel. Artisan cung cấp một lượng lớn các lệnh cho phép bạn tạo mã nguồn cho ứng dụng. Chạy php artisan list để xem tất cả câu lệnh artisan được hỗ trợ.

Cấu hình cho môi trường

Ứng dụng của bạn có một file .env trong thư mực gốc. Tất cả thông tin cấu hình cụ thể cho môi trường được khai báo ở đây. Nếu bạn chưa có thì hãy tạo một database cho ứng dụng của bạn, và bổ sung thông tin của database vào file .env.

Hiểu về Model, Route và Controller

Larave là framework tuân thủ kiến trúc Model-View-Controller. Tổng quan, MVC giúp bạn tách biệt các câu truy vấn database (Model) với logic về việc các yêu cầu được xử lý (Controller) và layout (bố cục) được xây dựng ra sao (View). Hình bên dưới minh hoạ cho vận hành của một ứng dụng Laravel điển hình.

Overview of Laravels architecture for building RESTful API endpoints
Kiến trúc của Laravel. Controller trả về phản hồi và tầng view không bắt buộc.

Khi chúng ta xây dựng API bằng Laravel, chúng ta giới hạn chủ đề ở Model và Controller. Chúng ta sẽ xem xét những chọn lựa để tạo View ở phần thứ hai của hướng dẫn.

Router

Khi server nhận yêu cầu HTTP, Laravel cố gắng khớp nó với một route đã đăng ký trong các file route. Tất cả file route nằm trong thư mục routes. routes/web.php chứa route cho giao diện web, trong khi routes/api.php chứa route cho API. Các route được đăng ký trong api.php sẽ có tiền tố /api (như trong localhost:3000/api). Nếu bạn cần thay đổi hành vi này, bạn nên tìm class RouteServiceProvider trong /app/Providers/RouteServiceProvider.php và thực hiện thay đổi.

Khi xây dựng ứng dụng liệt kê sản phẩm, đây là những endpoint cho API và hoạt động HTTP tương ứng với các endpoint này.

  • GET /products/: lấy về tất cả sản phẩm.
  • GET /product/{id}: lấy sản phẩm có id phù hợp
  • POST /products: tạo sản phẩm mới và thêm vào database
  • PUT /products/{id}: cập nhật sản phẩm đã có với id phù hợp
  • DELETE /products/{id}: xoá sản phẩm với id cho trước

Hãy tìm hiểu những thuật ngữ đúng đắn. GET, POST, PUT, và DELETE là những động từ HTTP (cách goi phổ biến là phương thức HTTP), chủ yếu cần có để xây dựng dịch vụ RESTful. /products là URI tương ứng với các tài nguyên sản phẩm. Các phương thức HTTP yêu cầu server thực hiện những hành động được yêu cầu trên tài nguyên có sẵn.

HTTP actions acting on the Product resource
GET, POST, PUT và DELETE thường được dùng trong các hoạt động của REST.

Router cho phép bạn khai báo các route cho tài nguyên cùng với các phương thức HTTP nhắm đến các tài nguyên. Đây là một file route mẫu dùng trả về một số dữ liệu đã định sẵn.

routes/api.php

Nếu bạn muốn xác thực các route hoạt động ổn thoã, bạn nên dùng công cụ POSTMAN hoặc curl.

Product Model

Các sản phẩm cần một model có thể tương tác với database. Model là layer nằm trên cùng của database, ẩn đi tất cả những khó hiểu cụ thể về database. Laravel sử dụng Eloqiemt ORM để lập mô hình database.

Eloquent ORM gồm Laravel cung cấp một triển khai tuyệt vời, đơn giản theo mô hình Active Record để làm việc với database. Mỗi bảng trong database có một "model" tương ứng được dùng để tương tác với bảng đó. Model cho phép bạn truy vấn dữ liệu trong các bảng, cũng như chèn các giá trị mới vào bảng.
Laravel Docs

Định nghĩ mô hình database là gì? Migration của Laravel đảm nhiệm phần đó. Artisan có lệnh migration cho phép bạn định nghĩa mô hình và dần cập nhật ở giai đoạn sau đó. Hãy tạo một model và một migration for Product.

Chú ý: có rất nhiều lệnh artisan ngoài kia, và rất dễ lạc lối. Mỗi lệnh artisan có một màn hình trợ giúp để hiển thị thông tin bổ sung như các chọn lựa và tham số hỗ trợ. Để thấy trang trợ giúp, tên của lệnh cần có từ help đứng trước. Chạy lệnh help sau đây để xem chọn -m hiển thị gì: $ php artisan help make:model.

Đây là file migration được tạo ra.

database/migrations/timestamp_create_products_table.php

Phương thức up được gọi khi migrate các bảng và cột dữ liệu mới vào database, trong khi phương thức down được gọi khi đảo ngược lại một migration. Chúng ta tạo ra một Schema (hình mẫu) cho một bảng với 3 dòng dữ liệu: id, created_atupdated_at. Phương thức $table->timestamps() đảm trách việc duy trì cột created_atupdated_at. Hãy thêm vào vài dòng cho định nghĩa của hình mẫu này.

Chúng ta cập nhật schema với 4 cột mới. Trình xây dựng schema của Laravel hỗ trợ các kiểu dữ liệu đa dạng như string, text, integer, boolean, etc.

Để xử lý migration đang chờ duyệt, bạn chạy câu lệnh sau đây:

Theo quy ước, Laravel giả định Product model tương ứng với bảng products. Tuy nhiên, nếu bạn cần tương tác model với một tên bảng tuỳ ý, bạn có thể dùng thuộc tính $table để khai báo tên cho bảng đó. Model sẽ tương tác với bảng có tên gọi custom_products.

Nhưng ta sẽ đơn giản tuân theo quy ước. Product model được tạo ra nằm ở trong thư mục app/. Dù class của model đang rỗng, nhưng nó có một số phương thức tạo câu truy vấn mà bạn có thể dùng để truy vấn database. Ví dụ, bạn có thể dùng Product::all() để lấy tất cả sản phẩm hoặc Product::find(1) để lấy sản phẩm cụ thể với id là 1.

Laravel có các model với cơ chế bảo vệ có sẵn để tránh mass assignment vulnerability (nguy cơ khi thay đổi nhiều cột dữ liệu ngoài mong đợi). Thuộc tính fillable được sử dụng để khai báo tên các attributes được áp dụng mass assignment một cách an toàn.

app/Product.php

Mã lệnh bên trên cho phép các attribute như title, description, priceavailability thành các giá trị có thể thực hiện mass assignment. Giờ bạn có thể dùng phương thức Product::create để bổ sung những dòng dữ liệu mới vào bảng products.

Database Seeding (tạo dữ liệu mẫu)

Laravel cho phép bạn populate (thêm dữ liệu ban đầu) vào database lúc đang phát triển và hoàn thành sản phẩm với dữ liệu giả, bạn sẽ cần các dữ liệu này để kiểm thử các endpoint của API. Bạn có thể tạo ra một class của seed bằng câu lệnh sau đây:

Các file seeder được tạo ra nằm ở trong thư mục database/seeds.

Để tạo dữ liệu mẫu, bạn có thể dùng str_random(10) để tạo một chuỗi ngẫu nhiên. Nhưng nếu bạn cần dữ liệu gần giống với dữ liệu thật, thì bạn có thể dùng thư viện faker. Faker là một thư viện của bên thứ ba dùng cho Laravel để tạo ra dữ liệu giả.

database/seeds/ProductsTableSeeder.php

Xử lý lệnh artisan db:seed để tạo database.

Hãy đến file routes/api.php và điền vào những chỗ còn thiếu.

routes/api.php

Controller

File route hiện giờ lưu logic cho điều hướng và xử lý các yêu cầu. Chúng ta có thể đưa logic việc xử lý các yêu cầu đển Controller class để mã lệnh của chúng ta được tổ chức tốt hơn và dễ đọc hơn. Trước tiên, hãy tạo class Controller.

Class controller gồm nhiều phương thức (index, show, store, update và delete) tương ứng với những hoạt động HTTP khác nhau. Tôi đã đưa logic xử lý yêu cầu từ route về controller.

app/HTTP/Controllers/ProductsController.php

routes/api.php

Nếu bạn chưa chú ý, tôi đã thêm vào một giá trị đối tượng Product vào các phương thức của controller. Đây là một ví dụ về implicit binding (ràng buộc ẩn) của Laravel. Laravel nỗ lực giúp khớp đối tượng model Product $product với phân đoạn URI {product}. Nếu phù hợp, một giá trị của Product model được chèn vào các hoạt động của Controller. Nếu database không có sản phẩm, lỗi 404 được trả về. Kết quả giống với trước đó nhưng ít code hơn.

Mở POSTMAN và các endpoint của product sẽ hoạt động. Bảo đảm rằng bạn đã cho phép header Accept:application/json.

Xác thực và xử lý exception

Nếu bạn từng nhận tài nguyên không tồn tại, đây là điều bạn sẽ gặp:

The error page displayed for the NotFoundHTTPException

NotFoundHTTPException là cách Laravel thông báo khi gặp lỗi 404. Nếu bạn muốn server trả về JSON thay vào đó, thì bạn sẽ phải thay đổi hành vi xử lý exception mặc định. Laravel có class Handler chuyên xử lý exception, class này nằm trong app/Exception/Handler.php. Class nguyên gốc có 2 phương thức: report()render(). Phương thức report hữu dụng khi báo cáo và ghi log các sự kiện exception, trong khi phương thức render được dùng để trả phản hồi khi gặp phải một exception. Cập nhật phương thức render để trả về phản hồi JSON.

app/Exceptions/Handler.php

Laravel cũng cho phép chúng ta xác thực các yêu cầu HTTP bằng các quy tắc xác thực và tự động trả về phản hồi kiểu JSON nếu xác thực thất bại. Logic cho xác thực sẽ để trong controller. Đối tượng Illuminate\Http\Request cung cấp một phương thức xác thực, chúng ta có thể dùng nó để định nghĩa các quy tắc. Hãy bổ sung một số kiểm tra xác thực cho phương thức store.

app/HTTP/Controllers/ProductsController.php

Tóm tắt

Giờ chúng ta đã có một API hoạt động dùng cho ứng dụng liệt kê sản phẩm. Tuy vậy, API thiếu những tính năng cơ bản như xác thực và giới hạn truy xuất với người dùng chưa xác minh. Laravel hỗ trợ tuyệt vời cho xác thực và việc xây dựng một API tương đối dễ dàng. Tôi khuyến khích các bạn dùng việc triển khai xác thực cho API như một bài tập.

Với những bạn vừa mới khởi đầu với Laravel hoặc đang mở rộng kiến thức, site hoặc ứng dụng với các phần mở rộng, chúng ta có nhiều thứ để học trên Envato Market.

Giờ chúng ta đã hoàn thành phần back-end, chúng ta sẽ chuyển hướng sang các khái niệm front-end. Hãy đón chờ phần hai của loạt bài viết. Chia sẻ cảm nghĩ của bạn trong phần bình luận nhé.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.