Я начну это руководство с признания, что вам не следует использовать 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
- Инструкции для npm 5.1 или более ранней версии
- Полная информация в приложении create-response-app здесь
Ваш браузер должен открыться по адресу 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.
- Откройте меню Файл и нажмите Опубликовать в Интернете.
- Внизу выберите Начать публикацию. * По умолчанию экспортируется весь документ. При необходимости вы можете выбрать конкретную вкладку для экспорта. 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: