BEIT Xây dựng ứng dụng web với React, Redux và Sanity.io

CMS là một cách mạnh mẽ và dễ dàng để quản lý nội dung và truy cập API. Được xây dựng trên React, Sanity.io là một công cụ liền mạch để quản lý nội dung linh hoạt. Nó có thể được sử dụng để xây dựng các ứng dụng từ đơn giản đến phức tạp. Trong bài viết này, Ifeanyi giải thích cách tạo một ứng dụng danh sách đơn giản với Sanity.io và React. Các trạng thái toàn cầu sẽ được quản lý bằng Redux và ứng dụng sẽ được tạo kiểu với các thành phần được tạo kiểu.

Sự phát triển nhanh chóng của các nền tảng kỹ thuật số đã đặt ra những hạn chế nghiêm trọng đối với các CMS truyền thống như WordPress. Các nền tảng này được kết hợp với nhau, không linh hoạt và tập trung vào dự án hơn là sản phẩm. Rất may, một số CMS không đầu đã được phát triển để giải quyết những thách thức này và nhiều hơn nữa.

Không giống như CMS truyền thống, CMS không đầu, có thể được mô tả là Phần mềm như một dịch vụ (SaaS), có thể được sử dụng để phát triển trang web, ứng dụng di động, màn hình kỹ thuật số và nhiều hơn nữa. Chúng có thể được sử dụng trên các nền tảng vô hạn. Nếu bạn đang tìm kiếm một CMS độc lập với nền tảng, ưu tiên nhà phát triển và cung cấp hỗ trợ đa nền tảng, bạn không cần phải tìm kiếm xa hơn CMS không đầu.

CMS không đầu chỉ đơn giản là CMS không có đầu. Ở headđây đề cập đến giao diện người dùng hoặc lớp trình bày trong khi bodyđề cập đến phụ trợ hoặc kho nội dung. Điều này mang lại rất nhiều lợi ích thú vị. Ví dụ, nó cho phép nhà phát triển chọn bất kỳ giao diện người dùng nào mà họ chọn và bạn cũng có thể thiết kế lớp trình bày theo ý muốn.

Có rất nhiều CMS không đầu trên mạng, một số trong số những CMS phổ biến nhất bao gồm Strapi, Contentful, Contentstack, Sanity, Butter CMS, Prismic, Storyblok, Directus, v.v. Những CMS không đầu này dựa trên API và có điểm mạnh riêng. Ví dụ: CMS như Sanity, Strapi, Contentful và Storyblok miễn phí cho các dự án nhỏ.

Các CMS không đầu này cũng dựa trên các ngăn xếp công nghệ khác nhau. Trong khi Sanity.io dựa trên React.js, Storyblok dựa trên Vue.js. Là một nhà phát triển React, đây là lý do chính khiến tôi nhanh chóng quan tâm đến Sanity. Tuy nhiên, là một CMS không đầu, mỗi nền tảng này có thể được cắm trên bất kỳ giao diện người dùng nào, cho dù là Angular, Vue hay React.

Mỗi CMS không đầu này có cả gói miễn phí và trả phí, thể hiện sự tăng giá đáng kể. Mặc dù các gói trả phí này cung cấp nhiều tính năng hơn, nhưng bạn sẽ không muốn trả nhiều như vậy cho một dự án quy mô vừa và nhỏ. Sanity cố gắng giải quyết vấn đề này bằng cách giới thiệu các tùy chọn thanh toán khi bạn di chuyển. Với những tùy chọn này, bạn sẽ có thể trả tiền cho những gì bạn sử dụng và tránh bị nhảy giá.

Một lý do khác khiến tôi chọn Sanity.io là ngôn ngữ GROQ của họ. Đối với tôi, Sanity nổi bật giữa đám đông bằng cách cung cấp công cụ này. Truy vấn đối tượng quan hệ-đồ họa (GROQ) giảm thời gian phát triển, giúp bạn có được nội dung bạn cần ở dạng bạn cần và cũng giúp nhà phát triển tạo tài liệu với mô hình nội dung mới mà không cần thay đổi mã.

Hơn nữa, các nhà phát triển không bị ràng buộc với ngôn ngữ GROQ. Bạn cũng có thể sử dụng GraphQL hoặc thậm chí là truyền thống axiosvà fetchtrong ứng dụng React của mình để truy vấn phần phụ trợ. Giống như hầu hết các CMS không đầu khác, Sanity có tài liệu toàn diện chứa các mẹo hữu ích để xây dựng trên nền tảng này.

Lưu ý: Bài viết này yêu cầu bạn có hiểu biết cơ bản về React, Redux và CSS

Bắt Đầu Với Sanity.Io

Để sử dụng Sanity trong máy của bạn, bạn cần cài đặt công cụ Sanity CLI. Mặc dù điều này có thể được cài đặt cục bộ trên dự án của bạn, nhưng tốt hơn hết là bạn nên cài đặt nó trên toàn cầu để có thể truy cập vào bất kỳ ứng dụng nào trong tương lai.

Để thực hiện việc này, hãy nhập các lệnh sau vào thiết bị đầu cuối của bạn.

npm install -g @sanity/cli

Các -gcờ trong lệnh trên cho phép lắp đặt toàn cầu.

Tiếp theo, chúng ta cần khởi tạo Sanity trong ứng dụng của mình. Mặc dù điều này có thể được cài đặt như một dự án riêng biệt, nhưng bạn thường nên cài đặt nó trong ứng dụng giao diện người dùng của mình (trong trường hợp này là React).

Trong blog của mình , Kapehe đã giải thích chi tiết cách tích hợp Sanity với React. Sẽ rất hữu ích khi xem qua bài viết trước khi tiếp tục với hướng dẫn này.

Nhập các lệnh sau để khởi tạo Sanity trong ứng dụng React của bạn.

sanity init

Các sanitylệnh trở nên có sẵn cho chúng ta khi chúng ta cài đặt các công cụ Sanity CLI. Bạn có thể xem danh sách các lệnh Sanity có sẵn bằng cách nhập sanityhoặc sanity helptrong thiết bị đầu cuối của bạn.

Khi thiết lập hoặc khởi tạo dự án của bạn, bạn sẽ cần làm theo lời nhắc để tùy chỉnh nó. Bạn cũng sẽ được yêu cầu tạo tập dữ liệu và thậm chí bạn có thể chọn tập dữ liệu tùy chỉnh của họ được điền dữ liệu. Đối với ứng dụng danh sách này, chúng tôi sẽ sử dụng bộ dữ liệu phim khoa học viễn tưởng tùy chỉnh của Sanity. Điều này sẽ giúp chúng ta không phải tự nhập dữ liệu.

Để xem và chỉnh sửa tập dữ liệu của bạn, hãy cdvào thư mục con Sanity trong thiết bị đầu cuối của bạn và nhập sanity start. Điều này thường chạy http://localhost:3333/. Bạn có thể được yêu cầu đăng nhập để truy cập giao diện (đảm bảo rằng bạn đăng nhập bằng cùng một tài khoản mà bạn đã sử dụng khi khởi tạo dự án). Ảnh chụp màn hình của môi trường được hiển thị bên dưới.

Giao Tiếp Hai Chiều Sanity-React

Sanity và React cần giao tiếp với nhau để có một ứng dụng đầy đủ chức năng.

CÀI ĐẶT NGUỒN GỐC CORS TRONG SANITY MANAGER  #

Trước tiên, chúng tôi sẽ kết nối ứng dụng React của chúng tôi với Sanity. Để thực hiện việc này, hãy đăng nhập https://manage.sanity.io/và xác định vị trí CORS origins bên dưới API Settingstrong Settingstab. Tại đây, bạn sẽ cần kết nối nguồn gốc giao diện người dùng của mình với phần phụ trợ Sanity. Ứng dụng React của chúng tôi chạy http://localhost:3000/theo mặc định, vì vậy chúng tôi cần thêm ứng dụng đó vào CORS.

Điều này được thể hiện trong hình bên dưới.

npm install @sanity/client

Tạo một tệp sanitySetup.js(tên tệp không quan trọng), trong srcthư mục dự án của bạn và nhập các mã React sau để thiết lập kết nối giữa Sanity và React.

import sanityClient from "@sanity/client"
export default sanityClient({
projectId: PROJECT_ID,
dataset: DATASET_NAME,
useCdn: true
});

Chúng tôi đã thông qua chúng tôi projectId, dataset namevà một boolean useCdncho trường hợp khách hàng sự tỉnh táo nhập khẩu từ @sanity/client. Điều này hoạt động kỳ diệu và kết nối ứng dụng của chúng tôi với phần phụ trợ.

Bây giờ chúng ta đã hoàn thành kết nối hai chiều, hãy bắt tay ngay vào việc xây dựng dự án của chúng ta.

Thiết Lập Và Kết Nối Redux Với Ứng Dụng Của Chúng Tôi

Chúng tôi sẽ cần một số phụ thuộc để hoạt động với Redux trong ứng dụng React của chúng tôi. Mở thiết bị đầu cuối của bạn trong môi trường React và nhập các lệnh bash sau.

npm install redux react-redux redux-thunk


Redux là một thư viện quản lý trạng thái toàn cầu có thể được sử dụng với hầu hết các thư viện và khuôn khổ giao diện người dùng như React. Tuy nhiên, chúng tôi cần một công cụ trung gian react-reduxđể cho phép giao tiếp giữa cửa hàng Redux và ứng dụng React của chúng tôi. Redux thunk sẽ giúp chúng ta trả về một hàm thay vì một đối tượng hành động từ Redux.

Mặc dù chúng ta có thể viết toàn bộ quy trình làm việc của Redux trong một tệp, nhưng việc phân tách các mối quan tâm của chúng ta thường gọn gàng hơn và tốt hơn. Đối với điều này, chúng tôi sẽ phân chia công việc của chúng tôi vào ba tác phẩm cụ thể là, actions, reducers, và sau đó store. Tuy nhiên, chúng tôi cũng cần một tệp riêng để lưu trữ action types, còn được gọi là constants.

THIẾT LẬP CỬA HÀNG

Lưu trữ là tệp quan trọng nhất trong Redux. Nó tổ chức và đóng gói các trạng thái và chuyển chúng đến ứng dụng React của chúng tôi.

Đây là thiết lập ban đầu của cửa hàng Redux của chúng tôi cần thiết để kết nối quy trình làm việc Redux của chúng tôi.

import { createStore, applyMiddleware } from “redux”;
import thunk from “redux-thunk”;
import reducers from “./reducers/”;

export default createStore(
reducers,
applyMiddleware(thunk)
);

Các createStorechức năng trong tập tin này có ba tham số: reducer(bắt buộc), tình trạng ban đầu và tăng cường (thường là một trung gian, trong trường hợp này, thunkcung cấp thông qua applyMiddleware). Các bộ giảm của chúng tôi sẽ được lưu trữ trong một reducersthư mục và chúng tôi sẽ kết hợp và xuất chúng trong một index.jstệp trong reducersthư mục. Đây là tệp chúng tôi đã nhập trong đoạn mã trên. Chúng tôi sẽ truy cập lại tệp này sau.

Giới Thiệu Về Ngôn Ngữ GROQ Của Sanity

Sanity đưa việc truy vấn dữ liệu JSON lên một bước xa hơn bằng cách giới thiệu GROQ. GROQ là viết tắt của Graph-Relational Object Queries. Theo Sanity.io , GROQ là một ngôn ngữ truy vấn khai báo được thiết kế để truy vấn các bộ sưu tập tài liệu JSON phần lớn không có lược đồ.

Sanity thậm chí còn cung cấp Sân chơi GROQ để giúp các nhà phát triển làm quen với ngôn ngữ này. Tuy nhiên, để tiếp cận sân chơi, bạn cần phải cài đặt tầm nhìn tỉnh táo . Chạy sanity install @sanity/visiontrên thiết bị đầu cuối của bạn để cài đặt nó.

GROQ có cú pháp tương tự như GraphQL nhưng cô đọng hơn và dễ đọc hơn. Hơn nữa, không giống như GraphQL, GROQ có thể được sử dụng để truy vấn dữ liệu JSON.

Ví dụ: để truy xuất mọi mục trong tài liệu phim của chúng tôi, chúng tôi sẽ sử dụng cú pháp GROQ sau đây.

*[_type == "movie"]

Tuy nhiên, nếu chúng tôi muốn chỉ lấy _idsvà crewMemberstrong tài liệu phim của chúng tôi. Chúng ta cần xác định các trường đó như sau.

`*[_type == 'movie']{
_id,
crewMembers
}
Ở đây, chúng tôi đã từng *nói với GROQ rằng chúng tôi muốn mọi tài liệu của _typephim. _typelà một thuộc tính trong bộ sưu tập phim. Chúng tôi cũng có thể trả về kiểu như chúng tôi đã làm _idvà crewMembersnhư sau:

*[_type == 'movie']{
_id,
_type,
crewMembers
}


Chúng tôi sẽ làm việc nhiều hơn trên GROQ bằng cách triển khai nó trong các hành động Redux của chúng tôi nhưng bạn có thể kiểm tra tài liệu của Sanity.io dành cho GROQ để tìm hiểu thêm về nó. Bảng lừa truy vấn GROQ cung cấp rất nhiều ví dụ để giúp bạn nắm vững ngôn ngữ truy vấn.

Thiết lập Hằng số

Chúng tôi cần các hằng số để theo dõi các loại hành động ở mọi giai đoạn của quy trình làm việc Redux. Hằng số giúp xác định loại hành động được thực hiện tại mỗi thời điểm. Ví dụ: chúng tôi có thể theo dõi khi nào API đang tải, được tải đầy đủ và khi nào xảy ra lỗi.

Chúng ta không nhất thiết phải xác định hằng số trong một tệp riêng biệt nhưng để đơn giản và rõ ràng, đây thường là cách tốt nhất trong Redux.

Theo quy ước, hằng số trong Javascript được định nghĩa bằng chữ hoa. Chúng tôi sẽ làm theo các phương pháp hay nhất ở đây để xác định các hằng số của chúng tôi. Đây là một ví dụ về một hằng số để biểu thị các yêu cầu di chuyển tìm nạp phim.

export const MOVIE_FETCH_REQUEST = "MOVIE_FETCH_REQUEST";

Ở đây, chúng tôi đã tạo một hằng số MOVIE_FETCH_REQUESTbiểu thị một loại hành động MOVIE_FETCH_REQUEST. Điều này giúp chúng tôi dễ dàng gọi loại hành động này mà không cần sử dụng stringsvà tránh lỗi. Chúng tôi cũng xuất hằng số để có sẵn ở bất kỳ đâu trong dự án của chúng tôi.

Tương tự, chúng ta có thể tạo các hằng số khác để tìm nạp các kiểu hành động biểu thị thời điểm yêu cầu thành công hay không thành công. Mã hoàn chỉnh cho mã movieConstants.jsnày được đưa ra trong đoạn mã dưới đây.

export const MOVIE_FETCH_REQUEST = "MOVIE_FETCH_REQUEST";
export const MOVIE_FETCH_SUCCESS = "MOVIE_FETCH_SUCCESS";
export const MOVIE_FETCH_FAIL = "MOVIE_FETCH_FAIL";

export const MOVIES_FETCH_REQUEST = “MOVIES_FETCH_REQUEST”;
export const MOVIES_FETCH_SUCCESS = “MOVIES_FETCH_SUCCESS”;
export const MOVIES_FETCH_FAIL = “MOVIES_FETCH_FAIL”;
export const MOVIES_FETCH_RESET = “MOVIES_FETCH_RESET”;

export const MOVIES_REF_FETCH_REQUEST = “MOVIES_REF_FETCH_REQUEST”;
export const MOVIES_REF_FETCH_SUCCESS = “MOVIES_REF_FETCH_SUCCESS”;
export const MOVIES_REF_FETCH_FAIL = “MOVIES_REF_FETCH_FAIL”;

export const MOVIES_SORT_REQUEST = “MOVIES_SORT_REQUEST”;
export const MOVIES_SORT_SUCCESS = “MOVIES_SORT_SUCCESS”;
export const MOVIES_SORT_FAIL = “MOVIES_SORT_FAIL”;

export const MOVIES_MOST_POPULAR_REQUEST = “MOVIES_MOST_POPULAR_REQUEST”;
export const MOVIES_MOST_POPULAR_SUCCESS = “MOVIES_MOST_POPULAR_SUCCESS”;
export const MOVIES_MOST_POPULAR_FAIL = “MOVIES_MOST_POPULAR_FAIL”;

 

Ở đây chúng tôi đã xác định một số hằng số để tìm nạp một bộ phim hoặc danh sách các bộ phim, sắp xếp và tìm nạp các bộ phim phổ biến nhất. Chú ý rằng chúng ta thiết lập các hằng số để xác định khi yêu cầu là loading, successfulvà failed.

Tương tự, personConstants.jstệp của chúng tôi được cung cấp bên dưới:

export const PERSONS_FETCH_REQUEST = “PERSONS_FETCH_REQUEST”;
export const PERSONS_FETCH_SUCCESS = “PERSONS_FETCH_SUCCESS”;
export const PERSONS_FETCH_FAIL = “PERSONS_FETCH_FAIL”;

export const PERSON_FETCH_REQUEST = “PERSON_FETCH_REQUEST”;
export const PERSON_FETCH_SUCCESS = “PERSON_FETCH_SUCCESS”;
export const PERSON_FETCH_FAIL = “PERSON_FETCH_FAIL”;

export const PERSONS_COUNT = “PERSONS_COUNT”;

 

Giống như movieConstants.js, chúng tôi thiết lập một danh sách các hằng số để tìm nạp một người hoặc nhiều người. Chúng tôi cũng đặt một hằng số để đếm số người. Các hằng số tuân theo quy ước được mô tả movieConstants.jsvà chúng tôi cũng đã xuất chúng để có thể truy cập vào các phần khác của ứng dụng của chúng tôi.

Cuối cùng, chúng tôi sẽ triển khai chế độ sáng và tối trong ứng dụng và vì vậy chúng tôi có một tệp hằng số khác globalConstants.js. Chúng ta hãy nhìn vào nó.

export const SET_LIGHT_THEME = "SET_LIGHT_THEME";
export const SET_DARK_THEME = "SET_DARK_THEME";

Ở đây chúng tôi đặt các hằng số để xác định khi nào chế độ sáng hoặc tối được gửi đi. SET_LIGHT_THEMExác định thời điểm người dùng chuyển sang chủ đề sáng và SET_DARK_THEMExác định khi nào chủ đề tối được chọn. Chúng tôi cũng xuất các hằng số của chúng tôi như được hiển thị.

 

THIẾT LẬP CÁC HÀNH ĐỘNG  

Theo quy ước, các hành động của chúng tôi được lưu trữ trong một thư mục riêng biệt. Các hành động được nhóm theo loại của chúng. Ví dụ: các hành động phim của chúng tôi được lưu trữ trong movieActions.jskhi các hành động của người của chúng tôi được lưu trữ trong personActions.jstệp.

Chúng tôi cũng phải globalActions.jsquan tâm đến việc chuyển đổi chủ đề từ chế độ sáng sang chế độ tối.

Hãy tìm nạp tất cả các bộ phim trong moviesActions.js.

import sanityAPI from “../../sanitySetup”;
import {
MOVIES_FETCH_FAIL,
MOVIES_FETCH_REQUEST,
MOVIES_FETCH_SUCCESS
} from “../constants/movieConstants”;

const fetchAllMovies = () => async (dispatch) => {
try {
dispatch({
type: MOVIES_FETCH_REQUEST
});
const data = await sanityAPI.fetch(
`*[_type == ‘movie’]{
_id,
“poster”: poster.asset->url,
} `
);
dispatch({
type: MOVIES_FETCH_SUCCESS,
payload: data
});
} catch (error) {
dispatch({
type: MOVIES_FETCH_FAIL,
payload: error.message
});
}
};

Hãy nhớ khi chúng tôi tạo sanitySetup.jstệp để kết nối React với chương trình phụ trợ Sanity của chúng tôi? Ở đây, chúng tôi đã nhập thiết lập để cho phép chúng tôi truy vấn phần phụ trợ tỉnh táo của mình bằng GROQ. Chúng tôi cũng đã nhập một vài hằng số được xuất từ movieConstants.jstệp trong constantsthư mục.

Tiếp theo, chúng tôi tạo fetchAllMovieshàm action để tìm nạp mọi phim trong bộ sưu tập của chúng tôi. Hầu hết các ứng dụng React truyền thống đều sử dụng axioshoặc fetchđể tìm nạp dữ liệu từ phần phụ trợ. Nhưng trong khi chúng tôi có thể sử dụng bất kỳ thứ nào trong số này ở đây, chúng tôi đang sử dụng Sanity’s GROQ. Để vào GROQchế độ, chúng ta cần gọi sanityAPI.fetch()hàm như trong đoạn mã trên. Đây sanityAPIlà kết nối React-Sanity mà chúng ta đã thiết lập trước đó. Điều này trả về a Promisevà vì vậy nó phải được gọi là không đồng bộ. Chúng tôi đã sử dụng async-awaitcú pháp ở đây, nhưng chúng tôi cũng có thể sử dụng .thencú pháp.

Vì chúng tôi đang sử dụng thunktrong ứng dụng của mình, chúng tôi có thể trả về một hàm thay vì một đối tượng hành động. Tuy nhiên, chúng tôi đã chọn chuyển câu lệnh trả về trong một dòng.

Nguồn: https://www.smashingmagazine.com/2021/02/web-app-react-redux-sanity-io/