Hướng dẫn tạo blog với React và RESTdb

Khi xây dựng các ứng dụng yêu cầu chương trình phụ trợ, chúng ta dành nhiều thời gian để thiết lập máy chủ và cơ sở dữ liệu, viết các API mà giao diện người dùng có thể gửi và nhận dữ liệu đến và đi từ chương trình phụ trợ. 

Với RestDB , bạn có thể dễ dàng tạo một máy chủ và tạo cơ sở dữ liệu. Mỗi bộ sưu tập cơ sở dữ liệu đi kèm với các điểm cuối Rest API để thực hiện các hoạt động CRUD trên cơ sở dữ liệu và tất nhiên, bạn có thể thêm các bộ sưu tập khác. Trong bài viết này, chúng ta sẽ tìm hiểu cách RestDB hoạt động bằng cách xây dựng một ứng dụng blog với React bằng cách sử dụng RestDB để lưu trữ các bài viết của blog.

RestDB là gì?

RestDB (còn được gọi là restdb.io) là một chương trình phụ trợ cơ sở dữ liệu NoSQL trực tuyến đơn giản với các API tự động và các móc javascript mã thấp. Về cơ bản, với RestDB, bạn sẽ có một cơ sở dữ liệu sẵn sàng sử dụng với các API tự động mà bạn có thể sử dụng để thực hiện các hoạt động CRUD trên cơ sở dữ liệu. RestDB loại bỏ hoàn toàn sự phức tạp của việc xây dựng một máy chủ và viết các điểm cuối cho các hoạt động CRUD cơ bản. Có nhiều lý do tại sao các nhà phát triển phần mềm nên cân nhắc sử dụng RestDB.

• Dễ sử dụng: Với RestDB, bạn có thể xác định lược đồ cho dữ liệu của mình và thêm các bộ sưu tập và mô tả cho các mô hình của bạn.
• Nó miễn phí cho các nhóm: Bạn có thể cấp quyền truy cập cho những người trong nhóm của mình, tùy thuộc vào nhu cầu và cấp độ truy cập của họ.
• Với RestDB, bạn không chỉ nhận được một cơ sở dữ liệu. Bạn cũng có thể liên kết cơ sở dữ liệu với tên miền trang web của mình một cách dễ dàng.

Chúng là các phần mềm phụ trợ cơ sở dữ liệu NoSQL khác như RestDB, như Google Firebase , Amazon DynamoDB , Azure Cosmos DB , Amazon DocumentDB , v.v. Các lựa chọn thay thế này cũng cung cấp cơ sở dữ liệu dựa trên đám mây dễ sử dụng và được quản lý hoàn toàn giống như RestDB với một số tính năng bổ sung khác như khả năng tương thích MongoDB (Amazon DocumentDB), tùy chọn tích hợp với cơ sở dữ liệu SQL (Azure Cosmos DB), v.v. Tìm hiểu thêm về các lựa chọn thay thế RestDB tại đây: 5 Giải pháp thay thế mạnh mẽ cho API REST .

Tiếp theo, chúng ta sẽ học cách làm việc với RestDB bằng cách xây dựng một ứng dụng blog với React và kết nối nó với cơ sở dữ liệu RestDB.

Xây dựng Blog bằng React và RestDB.

Để bắt đầu, chúng ta sẽ sao chép một repo từ Github. Kho lưu trữ này chứa các tệp (thành phần) bắt đầu của dự án và một số cấu hình / thiết lập. Để thực hiện việc này, hãy mở dòng lệnh của bạn và chạy lệnh bên dưới.

Sao chép

1git clone https://github.com/Origho-precious/RestDB-blog-starter.git

Sau khi nhân bản, điều hướng vào thư mục dự án và cài đặt các phần phụ thuộc bằng cách chạy yarn installhoặc npm install. Trong dự án này, tôi đã thêm một số thành phần và cấu hình. chúng ta có thiết lập tailwind để tạo kiểu, react-router-dom để điều hướng, để hiển thị các kiểu đánh dấu, chúng ta sẽ sử dụng react -markdown và hai trong số các plugin của nó: comment-gfm và rehype-raw . Hãy nhanh chóng xem qua các thành phần chúng ta có trong dự án.

• Button- Đây là một thành phần Nút đơn giản với hai biến thể.
• Navbar- Thành phần này hiển thị tên blog và nút định tuyến trang nơi chúng ta có thể tạo bài đăng và nút để quay lại trang chủ.
• PreviewPost- Thành phần này hiển thị nội dung của một bài đăng với react-markdown. chúng ta sẽ sử dụng điều này trong một trang viết để xem trước phần nội dung của bài viết trông như thế nào.

chúng ta cũng có ba hàm trợ giúp trong src / utils / helperFunctions.js,

• truncateTextsẽ được sử dụng để cắt bớt văn bản để chúng không tràn ra khỏi các phần tử mẹ của chúng.
• calcReadTimetính toán thời gian đọc của một bài báo, sử dụng số từ có trong nội dung bài báo và số liệu 200 từ mỗi phút.
• convertDatechuyển đổi dấu thời gian sang một định dạng dữ liệu cụ thể bằng cách sử dụng moment.

Cuối cùng, trong src/page, có ba thư mục với index.jsxcác tệp. Hiện tại, các tệp trong mỗi đoạn chỉ hiển thị các đoạn văn, nhưng chúng ta sẽ cập nhật chúng sau trong bài viết này.

Tiếp theo, hãy tạo tài khoản RestDB, thiết lập cơ sở dữ liệu và kết nối ứng dụng của chúng ta với nó.

Tạo tài khoản RestDB

Hãy điều hướng đến trang web chính thức của RestDB .

Nhấp vào nút "Nhận tài khoản của bạn". Điều đó sẽ đưa bạn đến một trang mà bạn có thể đăng ký.

Sau khi đăng ký và xác minh tài khoản của bạn (nếu bạn không sử dụng tùy chọn đăng ký Google hoặc Facebook), Bạn sẽ thấy một trang như bên dưới.

Yay !! Bây giờ bạn đã tạo tài khoản RestDB của mình. Tiếp theo, hãy để chúng ta tạo cơ sở dữ liệu cho ứng dụng blog của chúng ta. Để thực hiện việc này, hãy nhấp vào nút “Tạo mới” ở trên cùng bên phải của trang. Nó sẽ hiển thị một phương thức như bên dưới, nơi chúng ta có thể nhập tên của cơ sở dữ liệu hoặc thậm chí sao chép cơ sở dữ liệu hiện có. Nhưng chúng ta sẽ tạo một cái mới ở đây. Vì vậy, hãy nhập những gì bạn muốn đặt tên cho cơ sở dữ liệu; Tôi sẽ đặt tên của tôi restblog.

chúng ta vừa tạo cơ sở dữ liệu RestDB đầu tiên của mình. Bạn sẽ thấy một màn hình như thế này.

Nhấp vào tên cơ sở dữ liệu để tạo một bộ sưu tập, xác định một lược đồ cho các mô hình của bộ sưu tập và kết nối blog của chúng ta với nó.

Bạn sẽ thấy một trang giống như bên dưới, về cơ bản là trống ngoại trừ thanh bên và một biểu tượng ở trên cùng bên phải của trang. Nhấp vào biểu tượng bánh răng đó. Nó sẽ kích hoạt chế độ nhà phát triển để chúng ta có thể thực hiện tất cả những điều đã nêu trong đoạn trên.

Khi bạn nhấp vào biểu tượng đó, bạn sẽ thấy một màn hình như thế này,

Tôi biết rằng điều đó trông không rõ ràng lắm và bạn có thể muốn hỏi tại sao chúng ta có những thứ đó ở đó khi chúng ta chưa tạo bất kỳ bộ sưu tập nào trong cơ sở dữ liệu. Khi bạn tạo cơ sở dữ liệu trong RestDB, nó sẽ tự động tạo một bộ sưu tập “người dùng” và nó cũng tạo các bộ sưu tập email khác, v.v. Đối với bài viết này, chúng ta sẽ không xử lý xác thực. Hãy chỉ cần thêm một bộ sưu tập cho các bài viết trên blog của chúng ta.

Để thực hiện việc này, hãy nhấp vào nút “Thêm Bộ sưu tập”. Tôi sẽ gọi bộ sưu tập articles. Thêm một mô tả nữa (tuy nhiên, nó là tùy chọn) và lưu.

Sau khi lưu, Bạn sẽ thấy rằng bộ sưu tập chúng ta vừa tạo nằm trong danh sách các bộ sưu tập. Nhấp vào nó để thêm các mô hình vào nó. Bạn sẽ thấy một trang như thế này.

Ở đây chúng ta sẽ thêm các trường (mô hình cho bộ sưu tập mà chúng ta đã tạo). Nhấp vào nút "Thêm trường" để bắt đầu.

Bạn sẽ thấy một màn hình như trên. chúng ta sẽ tạo bốn trường:

• title - Đây sẽ là tiêu đề của một bài báo
• body - Nội dung bài viết
• tags - Các công nghệ được sử dụng trong bài viết, ví dụ: react, react-router-dom, v.v. nó sẽ là tùy chọn.
• dấu thời gian - thời gian bài báo được đăng.

Đây là ý chính của Github chứa những gì chúng ta cần để tạo mỗi trường.

Nếu bạn đã thêm các trường theo sau bảng trên, bạn sẽ thấy một cái gì đó như thế này.

Hiện chúng ta đã tạo thành công tài khoản RestDB, tạo cơ sở dữ liệu, bộ sưu tập trong cơ sở dữ liệu đó cho các bài viết của blog. chúng ta cũng thêm các mô hình vào bộ sưu tập. Những gì chúng ta phải làm tiếp theo là kết nối ứng dụng React của chúng ta với cơ sở dữ liệu này, để chúng ta có thể thêm, xóa hoặc chỉnh sửa các bài viết trong cơ sở dữ liệu.

Hãy xem các điểm cuối mà chúng ta có thể đạt được. RestDB cung cấp một tài liệu Swagger cho mỗi cơ sở dữ liệu được tạo. Để truy cập tài liệu này, hãy nhấp vào tên của cơ sở dữ liệu trên đầu thanh bên, ngay bên dưới đầu vào tìm kiếm. Nó sẽ điều hướng chúng ta đến một trang như thế này.

Nhấp vào “Công cụ API” để mở một trang mới.

Nhấp vào liên kết trong “Tạo API REST Swagger” sẽ mở ra các tài liệu swagger. Bạn sẽ thấy các điểm cuối được tạo tự động cho các bộ sưu tập trong tài liệu Swagger.

chúng ta sẽ cần một khóa API để có thể truy cập cơ sở dữ liệu từ ứng dụng của mình. Quay lại liên kết Swagger docs và nhấp vào “API Keys”, và bạn sẽ thấy điều này.

Nhấp vào “Quản lý khóa API”. Bạn sẽ được chuyển đến một trang mới.

Hãy thêm khóa API mới cho dự án của chúng ta bằng cách nhấp vào nút “Thêm mới”. Một phương thức sẽ bật lên.

Thêm mô tả và chọn loại yêu cầu HTTP mà chúng ta muốn khóa API này hỗ trợ. Như đã thấy ở trên, tôi đã chọn GET, POST, DELETE và PATCH. Lưu và sao chép khóa API được tạo cho bạn. Bạn có thể xem của tôi bên dưới.

Sao chép khóa API và chuyển đến dự án bạn đã nhân bản. Trong thư mục gốc, hãy tạo một .envtệp. Trong đó, thêm khóa API ở định dạng này,

Sao chép

1REACT_APP_API_KEY = $ {YOUR_API_KEY}