Как использовать электронную таблицу Google в качестве серверной части для вашего приложения

Иногда электронная таблица может выступать в качестве облегченной базы данных. Вот как это сделать

Если у вас есть простое приложение и вам не нужна очень сложная серверная часть, вы можете использовать электронную таблицу Google для хранения данных. Что такое база данных в наших бэкэндах? Это таблица, и таблицы Google также являются таблицами. Давайте посмотрим, как мы можем использовать эти таблицы в качестве серверной части для наших приложений.

Инициировать

Давайте начнем работать с настройкой учетных данных Google API, потому что они нам понадобятся для передачи данных между внешним и внутренним интерфейсом.

Очевидно, нам понадобится учетная запись разработчика Google. Вы можете пойти сюда и создать его, это бесплатно.

Затем давайте создадим новый проект:

После создания нового проекта давайте сгенерируем учетные данные для проекта - ключи API, которые нам понадобятся для доступа к службам Google. Если вы хотите только читать таблицы, вы можете сгенерировать только ключи API, и этого будет достаточно. Но мы хотим выполнять все CRUD, и для этого нам понадобится учетная запись службы.

Просто дайте новой учетной записи службы имя и пропустите роли и доступ пользователей к этой учетной записи. Теперь у нас есть сервисный аккаунт. Давайте откроем его и сгенерируем для него ключ.

Выберите json:

После того, как вы нажмете «создать», он загрузит файл .json с очень длинным именем, который содержит все необходимые нам учетные данные.

Затем давайте создадим электронную таблицу, которую мы собираемся использовать. Просто откройте эту ссылку и создайте электронную таблицу. В URL-адресе вы можете найти идентификатор таблицы:

Этот идентификатор понадобится нам, чтобы получить доступ к конкретной таблице.

И последнее, что нам нужно сделать, это настроить параметры общего доступа. Нажмите большую зеленую кнопку ПОДЕЛИТЬСЯ и сделайте эту таблицу доступной для редактирования всем, у кого есть ссылка.

Настройка внешнего интерфейса

Когда наши учетные данные будут готовы, давайте займемся внешним интерфейсом. Первым шагом будет создание простого проекта React.js. Прочтите здесь, чтобы узнать, как это сделать.

Чтобы упростить взаимодействие с Google API, мы воспользуемся библиотекой google-spreadsheet. Установим:

yarn add google-spreadsheet
Or
npm i google-spreadsheet — save

Теперь мы готовы приступить к кодированию.

Дизайн внешнего интерфейса

Во-первых, нам нужно убедиться, что мы можем безопасно использовать ключи API. Для этого создадим файл .env в корне нашего проекта реакции. Откройте файл и создайте три переменные; мы собираемся использовать их как переменные окружения:

REACT_APP_SHEET_ID = ‘’
REACT_APP_GOOGLE_PRIVATE_KEY = ‘’
REACT_APP_GOOGLE_SERVICE_ACCOUNT_EMAIL = ‘’

Мы уже где-то сохранили идентификатор таблицы, верно? Если это так, присвойте этот идентификатор переменной REACT_APP_SHEET_ID. Затем давайте откроем файл longname.json с ключами API и назначим private_key для REACT_APP_GOOGLE_PRIVATE_KEY, а client_email - для REACT_APP_GOOGLE_SERVICE_ACCOUNT_EMAIL.

Отлично, теперь мы можем перейти к коду React и описать, как следует отправлять запросы к Google API.

На данный момент у нас есть пустой компонент приложения. Давайте импортируем библиотеку google-spreadsheet. И нам также нужен хук useState, потому что мы используем функциональные компоненты, и здесь нам нужно управлять состоянием.

Вот переменные, в которых будут храниться входные данные, прежде чем они будут отправлены на бэкэнд.

А вот форма JSX, которая будет отображаться пользователю:

И наконец, давайте создадим функцию, которая отправляет запросы на серверную часть. Вот как это выглядит:

Давайте разберемся.

Во-первых, нам нужно получить идентификатор электронной таблицы из .env. Мы можем сделать это с помощью process.env, внедренного Node.js при запуске приложения.

const SHEET_ID = process.env.REACT_APP_SHEET_ID;

Затем давайте создадим новый экземпляр GoogleSpreadsheet и передадим ему идентификатор листа.

const doc = new GoogleSpreadsheet(SHEET_ID);

Теперь нам нужно авторизоваться. Мы собираемся использовать метод useServiceAccountAuth, чтобы продолжить авторизацию. Этот метод будет принимать объект в качестве аргумента (или он может принимать файл json с учетными данными, но этот способ более безопасен).

private_key: process.env.REACT_APP_GOOGLE_PRIVATE_KEY.replace(/\\n/gm, “\n”),

Закрытый ключ - это очень длинная многострочная строка. Чтобы он заработал, нам нужно заменить все символы «\ n» на новые строки. replace (/ \\ n / gm, «\ n») сделает это.

Ура, авторизовались! Теперь давайте загрузим данные о таблице, к которой мы подключаемся.

await doc.loadInfo()

Далее мы должны выбрать, с каким листом мы хотим работать. Мы можем сделать это по индексу или по id. Изначально у нас есть только один лист, поэтому я бы просто выбрал индекс 0.

const sheet = doc.sheetsByIndex[0]

А теперь давайте что-нибудь сделаем с этим листом. Как насчет добавления новой строки? Мы можем это сделать. Предполагая, что в электронной таблице есть такие столбцы, как Имя, Электронная почта и Текст, мы можем сделать следующее:

await sheet.addRow({ Name: name, Email: email, Text: text });

Если все верно, то при нажатии кнопки «Завершить» все, что вы вводите в поля, должно появиться в электронной таблице.

Окончательный код:

Заключение

Для простого приложения, не требующего сложной серверной части, мы можем использовать доступные простые и бесплатные инструменты. Электронная таблица Google - одна из них. В моем примере я отправляю только почтовые запросы, но вы можете хранить там данные и отправлять GET-запросы для рендеринга чего-либо в DOM.

Продолжайте учиться, продолжайте расти!