Я начну это руководство с признания, что вам не следует использовать Google Таблицы в качестве CMS для сайта или проекта производственного уровня. Однако на ум приходят несколько вариантов использования:

  • Для нетехнических людей, чтобы иметь доступ для записи в вашу «базу данных»
  • Возможность отправлять любые данные Google Sheet в реагирующее приложение
  • Реагировать на практику

К концу этого руководства вы сможете передавать любые данные из Google Sheet в настоящее приложение React. Давайте начнем.

В этом руководстве мы будем использовать create-react-app в качестве отправной точки. Зачем создавать-реагировать-приложение? Он прост в использовании (без конфигурации wepback или babel) и работает. Сначала создайте новый каталог и перейдите в него.

npx create-react-app sheets-cms-demo
cd sheets-cms-demo
npm start

Ваш браузер должен открыться по адресу localhost: 3000 и отобразить следующее:

Теперь перейдем к коду. Давайте быстро рассмотрим файловую структуру, которая автоматически настраивается приложением create-react-app:

sheets-cms-demo
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js 
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── registerServiceWorker.js
// App.js is where will will be making the majority of our changes.

Откройте App.js и проверьте основной компонент, который создает представление вашего браузера. Любые сохраненные изменения, внесенные в App.js, будут автоматически отражены в вашем браузере. См. Пример изменения ниже:

Теперь, когда приложение react-app настроено, давайте перейдем к Google Таблицам, чтобы создать вашу «базу данных». Для этого урока мы собираемся создать простую веб-страницу, на которой будут отображаться любимые собаки наших сотрудников. Мы попросим сотрудников заполнить этот лист, и ответы будут отражены в нашем приложении для реагирования в режиме реального времени.

Как только у нас появятся данные, мы можем отправить их обратно в наше приложение-реакцию. Для этого мы воспользуемся инструментом Tabletop.js. Tabletop - это действительно простой пакет npm, который позволяет нам брать данные Google Sheet и экспортировать их как объект JSON. Что касается реакции, мы можем взять этот ответ JSON и использовать его так, как захотим. Довольно круто.

Важные примечания к настройке Google Sheet - Tabletop экспортирует ваши данные в виде массива. Каждая строка будет создана как объект с заголовками столбцов в качестве свойств.

  • Нет пустых заголовков столбцов
  • Нет пустых строк. Tabletop перестанет читать данные, если есть пустые строки

Во-первых, давайте установим Tabletop в наш проект.

npm install tabletop

Чтобы Tabletop мог читать наши данные, нам нужно внести несколько быстрых изменений в настройки Google Sheet.

  1. Откройте меню Файл и нажмите Опубликовать в Интернете.
  2. Внизу выберите Начать публикацию. * По умолчанию экспортируется весь документ. При необходимости вы можете выбрать конкретную вкладку для экспорта. Tabletop также по умолчанию будет захватывать вашу первую вкладку, если у вас их несколько. В документации для планшетов есть информация о переходе на определенные вкладки.

3. Сохраните ключ электронной таблицы. В URL-адресе ключ вашей электронной таблицы будет представлять собой всю строку после / spreadsheets / d / KEY / edit # gid = 0.

Вернуться, чтобы отреагировать.

Нам нужно будет внести несколько обновлений в наш файл App.js, прежде чем мы начнем работать с Tabletop. Мы добавим локальное состояние к этому компоненту, чтобы мы могли хранить результаты нашего вызова Tabletop и отражать любые обновления, сделанные в Google Sheets. Затем обновите файл App.js, чтобы включить следующее локальное состояние с нашими данными, инициализированными как пустой массив. Помните, что ответ, который мы получаем от Tabletop, будет массивом.

Пришло время собрать наши данные. Давайте импортируем Tabletop в App.js и добавим функцию инициализации Tabletop к вызову componentDidMount (). Не забудьте обновить ключ ключом Google Sheet, который мы сохранили ранее. Прямо сейчас мы просто записываем данные в консоль с помощью функции обратного вызова.

Откройте браузер и консоль. При обновлении вы должны увидеть, что ваш новый массив вышел из консоли.

Это стол на работе. В документации гораздо больше функциональности, но для нашего проекта это все, что нам нужно.

Теперь мы хотим обновить наше локальное состояние, которое мы устанавливаем, с новыми данными, полученными из Tabletop. В функции обратного вызова мы обновим простой console.log, чтобы установить наше состояние с новыми данными Tabletop.

Теперь, если мы откроем нашу консоль и обновим, мы увидим, что обновленная консоль состояния вышла из системы из строки 29. Мы увидим журнал состояний дважды - один раз с исходным пустым массивом и второй раз с данными после загрузки.

Теперь, когда у нас есть данные, хранящиеся в локальном состоянии, мы можем написать несколько простых JSX-файлов для отображения любимых собак наших сотрудников. Мы будем использовать функцию карты, чтобы перебрать массив и отобразить каждого сотрудника.

Теперь любимые собаки должны отображаться в нашем браузере.

Поскольку мы используем функцию карты, любое обновление, которое мы вносим в нашу таблицу Google, будет отражаться в нашем браузере.

Вот и все. Добавьте немного дизайна, и у вас будет простое приложение, построенное на данных в реальном времени из Google Таблиц. Помните, что любые данные, которые мы используем, технически «общедоступны», поэтому любой, у кого есть ссылка, будет иметь доступ для чтения.

Давайте рассмотрим, что мы рассмотрели в этом руководстве:

  • Настройка приложения create-response-app
  • Публикация таблицы Google в Интернете
  • Использование Tabletop.js для отправки объекта JSON в наше приложение для реагирования
  • Отображение данных Google Sheet в React
  • Обработка обновлений в Google Таблицах в реальном времени

В целом технический аспект этого руководства относительно прост. Определенно есть способы, которыми мы можем взять базовые концепции и расширить их, чтобы сделать значимое приложение. Один из примеров, который я использовал лично, - это добавление слоя Google Forms. Любая форма Google имеет возможность экспортировать ответы в таблицу Google. Теперь, экспортируя в Google Таблицы, вы можете отправлять простую форму Google и отправлять ответы в свое приложение для реагирования в режиме реального времени.

Как человек, который до программирования работал в основном в Excel / Google Sheets, я всегда искал способы отображения данных в индивидуальном порядке. Если вы тоже только начинаете, я надеюсь, что этот урок вдохновит вас на новые проекты.

Ссылка на репозиторий Github:

Https://github.com/ryanMcNierney/React-GoogleSheets