原文： How to Build a Basic CMS with Google Sheets and React

在当今的数字环境中，创建一个既经济实惠又易于维护的内容管理系统（CMS）可能会很困难，特别是当你的预算有限时。

本教程将向你展示一种利用 Google Sheets 作为临时数据库，并用 React 构建前端的解决方案，从而让你有效地绕过对专用服务器或传统数据库系统的需求。

这种方法不仅减少了与 Web 开发相关的开销成本，还简化了内容更新和管理。如果你想在没有大量投资的情况下启动自己的简单 CMS，这是一个理想的解决方案。

这种解决方案适用于职业初期的自由职业者和那些无法在网站上投入大量资金的客户。

为什么选择 Google Sheets？

选择 Google Sheets 作为你的 CMS 的基础，归结于它的简单性、灵活性和成本效益。

传统的网页开发需要一个后端服务器来处理数据，一个数据库来存储信息，以及一个前端来显示内容。但每一层都增加了复杂性和成本。

而 Google Sheets 作为一个高度可访问且直观的界面，消除了对服务器和数据库的需求。它让你的用户能够实时更新内容，就像任何 CMS 一样，但没有通常的设置和维护成本。这使它成为个人、小型企业或任何希望以最低成本快速部署 Web 应用程序的人的最佳选择。

开始

在深入代码之前，确保你在系统上已经安装了 Node.js 和 npm。这些工具将允许我们创建一个 React 应用并管理其依赖。

现在让我们从 Google Sheets 开始。

第一步：设置你的 Google Sheets

  1. 进入你的 Google Sheets
  2. 打开你想使用的表格或创建一个新表格
  3. 点击菜单中的 扩展
  4. 然后点击 Apps Script

在 Apps Script 编辑器中，你可以编写脚本，将其作为你的 endpoint。以下是一个将 Google Sheet 内容以 JSON 格式返回的脚本：

function convertRangeToJson(data) {
  var jsonArray = [];

  // 检查数据是否为空或没有足够的行用于标题和至少一行数据
  if (!data || data.length < 2) {
    // 根据需要返回空数组或有意义的信息
    return jsonArray; // 或者返回 'No data available';
  }

  var headers = data[0];
  for (var i = 1, length = data.length; i < length; i++) {
    var row = data[i];
    var record = {};

    for (var j = 0; j < row.length; j++) {
      record[headers[j]] = row[j];
    }

    jsonArray.push(record);
  }

  return jsonArray;
}

然后：

  1. 点击 文件 > 保存，并为你的项目命名
  2. 点击 部署 > 新建部署
  3. 点击 选择类型 并选择 Web 应用
  4. 填写你的部署详细信息。在 执行身份 下，选择脚本应作为你的帐户执行还是作为访问网页应用的用户执行。在 有访问权限的人员 下，选择谁可以访问你的网页应用。
  5. 点击 部署

你可能会被要求授权脚本访问你的 Google Sheets。按照提示操作。

部署后，你将获得一个用于 Web 应用的网址。这是你的 API endpoint。

为了让你了解目前的进展，以下是你的表格结构：

你的表格当前的样子
你的表格当前的样子

这是你调用 endpoint 时得到的 JSON：

JSON
JSON

第二步：创建你的 React 应用

准备好 Google Sheets API 后，是时候创建一个 React 应用了，这个应用将获取并显示这些数据。

首先，创建一个 React 应用。在你的终端中运行以下命令来创建一个新的 React 应用：

npx create-react-app google-sheets-cards
cd google-sheets-cards
npm start

你也可以使用现代构建工具如 Vite 来实现这个目的，因为 CRA 已不再是构建 React 应用的推荐方式。

接下来，创建卡片组件。在 src 目录下，创建一个名为 Card.js 的文件。这个组件将负责显示每个数据记录：

// src/Card.js
function Card({ title, content }) {
  return (
    <div className="card">
      <h1>{title}</h1>
      <p>{content}</p>
    </div>
  );
}

export default Card;

现在是时候在 App.js 中获取并显示你的数据了。修改 App.js 文件，包含从你的 Google Sheets API 获取数据的逻辑，并使用 Card 组件来显示这些数据：

// src/App.js
import React, { useEffect, useState } from 'react';
import Card from './Card';
import './App.css'; // 确保在 App.css 中创建一些基本的卡片样式

useEffect(() => {
    fetch('YOUR_ENDPOINT_URL') // 用你的实际 endpoint URL 替换
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    <div className="App">
      <h1>Data from Google Sheets</h1>
      <div className="cards-container">
        {data.map((item, index) => (
          <Card key={index} title={item.Title} content={item.Content} />
        ))}
      </div>
    </div>
  );
}

export default App;

接下来，你可以为卡片添加样式。在 App.css 中添加以下 CSS 进行基础卡片样式设计：

.card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  margin: 10px;
  padding: 10px;
  display: inline-block;
  background: #f9f9f9;
}

.cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

第三步：运行你的 React 应用

设置完毕后，你现在可以运行你的 React 应用，并在浏览器中查看来自 Google Sheets 的数据。按以下步骤操作：

首先，启动 React 应用。在终端中，导航到你的 React 应用的根目录（如果你尚未在该目录）。运行以下命令以启动开发服务器：

npm start

该命令会编译你的 React 应用并在你的默认 Web 浏览器中打开。你应该会看到一个标题为 “Data from Google Sheets” 的网页，下面是一系列卡片，每个卡片显示从你的 Google Sheets 数据获取的标题和内容。

实际上，我们得到了以下结果：

屏幕上显示了来自 Google Sheets 的数据及卡片 1、卡片 2 和卡片 3
屏幕上显示了来自 Google Sheets 的数据及卡片 1、卡片 2 和卡片 3

现在你可以查看你的数据。页面上的每个卡片对应于 Google Sheets 中的一行，标题和内容字段按照你的 Card 组件规定显示。如果你对 Google Sheets 数据进行了任何更新，可以刷新网页以立即查看更改。

你可以将你的 React 应用部署到网上的众多服务之一，如 Github Actions 或 Netlify。这是一种简单高效的方法，以显著的性能免费托管你的前端应用。

总结

恭喜你！你已经创建了一个动态 Web 应用，能从 Google Sheets 获取数据并用 React 显示。

这种方法提供了一种灵活、简单的方式来管理应用的内容，无需后端服务器或数据库。

Google Sheets 作为管理数据的一个可访问和协作的工具，而 React 允许你构建响应式和交互式用户界面。两者结合提供了一个强大的方案，用于创建可以快速更新和轻松维护的 Web 应用。