Xây dựng một thành phần React lấy dữ liệu từ Google Sheets

Google Sheets có thể được sử dụng để cung cấp một cơ sở dữ liệu dễ chỉnh sửa cho những người không phải là nhà phát triển. Điều này không phải là giải pháp tốt nhất cho các trang web có lưu lượng truy cập lớn, nhưng nó hoạt động tốt cho các trang web nội bộ hoặc khi tạo một nguyên mẫu ứng dụng.

Trong bài hướng dẫn này, chúng ta sẽ sử dụng Papa Parse để lấy dữ liệu từ một trang Google vào React.

Cài đặt Papa Parse

Hãy bắt đầu bằng cách cài đặt Papa Parse trong ứng dụng React của chúng ta bằng cách sử dụng NPM:

npm install papaparse

Đối với bài hướng dẫn này, tôi đã tạo một bảng tính đơn giản với dữ liệu sau:

Có một vài yêu cầu cho cấu trúc dữ liệu này:

• Tất cả các cột phải có một “nhãn” trong hàng đầu tiên và không được chứa ký tự lạ.
• Google xem một dòng trống là cuối của bảng tính và không cung cấp dữ liệu nữa.

Sau khi hoàn thành bảng tính, hãy chọn “File” -> “Publish to the web” để làm cho nó công khai.

Tạo thành phần MovieData.js

Đối với thành phần, hãy tạo một tệp mới có tên MovieData.js với các khai báo nhập sau:

import React, { useState } from "react";
import Papa from "papaparse";

Tiếp theo, hãy tạo một hàm MovieData() và khai báo một biến data để lưu trữ dữ liệu:

const MovieData = () => {
  const [data, setData] = useState({});
}

export default MovieData;

Bây giờ, chúng ta có thể lấy dữ liệu từ bảng tính Google. Chỉ cần cung cấp URL của bảng tính cho Papa Parse. Nếu việc lấy dữ liệu thành công, kết quả sẽ được lưu trữ trong biến data. Sau đó, chúng ta chuyển đổi dữ liệu này thành một mảng để có thể phân tích trong HTML của chúng ta:

const MovieData = () => {
  const [data, setData] = useState({});

  Papa.parse("https://docs.google.com/spreadsheets/d/1SJ8LxWmaxKBTgDJLvfD9NZLctBT931x19-qH2yLxck/pub?output=csv", {
    download: true,
    header: true,
    complete: (results) => {
      setData(results.data);
    },
  });

  const movies = Array.from(data);

  return (
    // TODO: Hiển thị dữ liệu trong HTML
  );
};

export default MovieData;

Hãy thay thế URL bằng URL của bảng tính của bạn, nhớ giữ lại pub?output=csv.

Cuối cùng, hãy trả về dữ liệu phim bằng cách thêm đoạn mã sau vào câu lệnh return:

... 
return (
  <ul>
    {movies.map((data) => (
      <li key={data.movie}>
        {data.movie} ({data.year}) - Đánh giá {data.rating}
      </li>
    ))}
  </ul>
);
...

Bạn sẽ thấy rằng các thuộc tính “movie”, “year” và “rating” tương ứng với văn bản trong các cột của hàng đầu tiên trong bảng tính. Nếu bạn sử dụng mã này với một bảng tính khác, bạn chỉ cần thay đổi chúng tùy theo dữ liệu khác nhau.

Đó là tất cả cho hướng dẫn này. Bây giờ bạn nên có khả năng lấy dữ liệu trong một ứng dụng React từ Google Sheets. Như luôn, bạn có thể tải mã nguồn đầy đủ của hướng dẫn này từ GitHub.

Để biết thêm về các khả năng của Google Sheets và các mẹo về tiếp thị khác, hãy truy cập vào Crawlan.com để khám phá các tài nguyên hữu ích và lời khuyên từ các chuyên gia SEO.

Chúc bạn vui vẻ và hẹn gặp lại với những mẹo tiếp thị mới!