Краткое подробное руководство.
Автор Игнасио Н. Агирре
Пару месяцев назад я пытался выполнять операции CRUD с электронной таблицей Google с помощью Sheets API V4 для моего приложения Javascript. Я использовал React.js для внешнего интерфейса и Node.js для внутреннего интерфейса: это было очень болезненно. У меня был токен Google на бэкэнде, я отправил его во фронтенд, но когда я попытался получить доступ к API с помощью React / Javascript, он не работал! Наконец, я понял, что вам нужно, чтобы это работало, и как расширить возможности использования API. Я сразу перейду к делу, как это сделать, и объясню более подробно позже.
Я использовал приложение create-react-app. Но он должен работать с любым приложением Javascript, которое использует выборку. Вы можете увидеть возможности того, что этот API может делать с этой игрой:
Www.snowballfinances.com/sheets
Это бюджетная игра, созданная с помощью React и электронных таблиц. Наслаждаться!
Я не рекомендую использовать онлайн-IDE, вы столкнетесь с проблемами CORS . Есть множество руководств по create-response-app (то, что я использую), настройке это должно занять не более 5 минут. Вот быстрая настройка:
npm i -g create-react-app
create-react-app my-app
cd my-app
Откройте его в своем любимом редакторе кода.
Вот что вам нужно для этого:
- Таблица и ее идентификатор
- токен для отправки в API Таблиц с правильными областями действия.
- Запрос fetch () с правильной информацией (тело, заголовки аутентификации)
Пойдем шаг за шагом. Начнем с чего-нибудь простого: обновим значение 10 в ячейке A1.
1. Идентификатор таблицы
Это простая часть. Перейдите на sheet.google.com, войдите в свою учетную запись Google и создайте электронную таблицу. Когда вы увидите таблицу, идентификатор таблицы появится в URL, как показано ниже.
Итак, наш идентификатор в этом случае: 1nIrrHDVn0Jx3AbyWowfvLoBkvHg7jqvtP5LH1yRI2Ks
Используйте свой собственный идентификатор таблицы. Это только для объяснения!
2. Жетон
Чтобы получить токен от Google, вам понадобится система Google OAuth. Мы получим токен из Google Auth2 Playground:
Перейдите на сайт, указанный выше.
Теперь в левом столбце найдите Google Sheets API V4:
Нажмите на него, а затем выберите область: h ttps: //www.googleapis.com/auth/ электронные таблицы
Слева от него должна появиться галочка.
Наконец, нажмите Авторизовать API. Это синяя кнопка вверху.
Вам будет предложено войти в систему с помощью Google и предоставить доступ. Войдите в систему и нажмите Разрешить, чтобы вы могли использовать область.
После входа в систему и авторизации вы получите код авторизации, как показано ниже . Нажмите Обменять код авторизации на токены.
Предупреждение. Убедитесь, что вы находитесь на шаге 2, вам НЕ нужен шаг 3.
Вот и все! Вы только что получили «токен доступа». Скопируйте куда-нибудь! Технически мы готовы обновить нашу таблицу. Так что давай, сделаем это!
3. Fetch Request - код.
Теперь давайте отправим правильный запрос fetch (). Чтобы увидеть правильные параметры запроса на выборку, мы перейдем к документации Sheets API V4. Вы можете не заходить на сайт, ответ все равно будет ниже! Но если вы хотите расширить функциональность, вы захотите проверить это позже.
Код запроса POST
Как видите (если перейти по ссылке), это будет POST-запрос.
Я считаю полезным, когда сначала вижу полный код. Я использую React.js create-response-app. Итак, вот код для обновления ячейки A1 до 10.
Важно: это БУДЕТ работать в любой локальной среде, где вы можете использовать fetch (). Вы НЕ ограничены React!
Этот код обновит вашу электронную таблицу числом 10 в ячейке A1.
Предупреждение: вам необходимо ЗАМЕНИТЬ SHEET_ID и ACCESS_TOKEN своей информацией. Моя не будет работать!
Это сработало!
Когда я запускаю приложение React.js, я нажимаю кнопку, и лист обновляется!
Дайте мне знать, если это не сработало, в комментариях, и я буду рад помочь. Мы увидим, как я создаю объект более подробно ниже.
Остальная часть учебника дает более подробное объяснение.
Строительство объекта
Запрос на выборку принимает строковый аргумент: fetch('https://sheets.googleapis.com/v4/spreadsheets/SHEET_ID_HERE/batchUpdate')
Эту часть нетрудно понять, теперь давайте посмотрим на Заголовки авторизации. Здесь вы будете использовать токен, полученный в ходе тестирования OAuth.
fetch('https://sheets.googleapis.com/v4/spreadsheets/SHEET_ID_HERE/batchUpdate',{ method: 'POST', headers:{ Authorization: 'Bearer TOKEN_GOES_HERE', 'content-type':'application/json', }})
Отлично!
Теперь самое главное: тело. Мы используем запрос batchUpdate от Google. Посмотрите на конец изображения ниже.
URL-адрес запроса (/ batchUpdate) определяет, что, где и как будет обновляться на вашем листе. Есть десятки, и я повторяю, десятки способов обновления электронной таблицы Google. Я выбрал batchUpdate, потому что у вас есть полный контроль над значением, форматом, выравниванием ячеек и т. Д. Другой пример будет позже, но сначала давайте закончим его объяснение.
Тело
И вот так! Вы создали свой первый объект для обновления таблицы!
Дальнейшее объяснение и использование
У вас есть запрос POST с вашим идентификатором листа на URL-адрес batchUpdate Google, содержащий токен, заголовок аутентификации и тело. Этот запрос использует Google Sheets API v4 для обновления вашей конкретной электронной таблицы.
Вы можете использовать все это в приложении! Скажем, вы хотите, чтобы пользователи заполняли форму, которая обновляет ваш лист (/ batchUpdate), или имеет функцию, которая извлекает информацию из электронной таблицы (/ batchGet), или обновляет форматы ячеек, или динамически создает листы, это все возможно (я ' все сделал!). Чтобы узнать, как создавать правильные запросы на выборку с правильными параметрами, у Google есть способ тестировать запросы API и создавать объекты за вас. Вы можете перейти в раздел Обзор каждого запроса.
Каждый раз, когда я создаю метод для взаимодействия с API, я сначала использую этот справочник, затем тестирую их в Postman и, наконец, кодирую их. См. Ссылку на обзор batchUpdate ниже (тот же URL, что и на картинке выше)
Аутентификация - что я сделал
Есть бесчисленное множество способов интегрировать аутентификацию с Google в ваши приложения, я расскажу вам, как я это сделал.
Я использовал Passport.js в серверной части Node.js для аутентификации моих пользователей в Google. Я использовал область действия, которая очень важна для работы с листами, - это область drive.file, поскольку она предоставляет приложению доступ только к созданным им листам, и не более того. . В этом руководстве мы использовали область электронных таблиц для доступа к API из любого приложения.
После аутентификации пользователя я отправил клиенту токен, который вы должны вернуть после аутентификации с помощью Passport. Теперь клиент React.js имеет доступ к API, и из клиента я отправляю запросы в Google Sheets API v4. Я часто использую batchUpdate . Другие методы, которые я использовал, - это / values / batchUpdate (отличается от batchUpdate), / batchClear, и / значения.
Мое приложение создает электронную таблицу в учетной записи Google пользователя, а затем обновляет ее или проверяет соответствующим образом.
Другие более простые способы сделать это
Альтернативой тому, что я сделал, и я рекомендую, является Firebase, который делает для вас некоторую магию vodoo на стороне Google для аутентификации (не нужен сервер), а затем возвращает токен, который вы можете использовать. . Самый полезный учебник, который я смог найти, находится здесь:
https://www.youtube.com/watch?v=zq0TuNqV0Ew&t=195s
Есть небольшая настройка, но она работает! Вы получите токен, который сможете использовать.
Еще один пример: spreadsheet.values / get
Я оставлю вам еще один пример того, как получить информацию из электронной таблицы в определенном диапазоне.
Допустим, я хочу получить следующие значения столбцов:
В этом случае я хочу получить доступ ко всем значениям в диапазоне A1: B5. Что ж, у Google есть способ, который именно это делает!
Для этого я воспользуюсь запросом / values / {range}. См. Ниже структуру URL-адреса запроса.
Я создам другой тип выборки, более простой (потому что это запрос GET) и лучшая часть: в коде намного меньше. Я использую React из своей локальной среды разработки.
В этом приложении есть кнопка, которая получает диапазон значений A1: B5. Теперь у вас есть доступ к этой информации!
Довольно круто, правда?
Дайте мне знать, если у вас возникнут какие-либо вопросы, я буду более чем счастлив помочь вам или даже проверить ваш код!
Загляните на мой сайт!
Мне пришлось научиться использовать этот API для стартапа, который я создаю. Перейдите на www.snowballfinances.com (пока не для мобильных устройств), чтобы увидеть все приложения Google Sheets API! Я учу людей личным финансам, используя реальные инструменты, а затем превращаю их в игры. Дайте мне знать, если вы хотите услышать больше!
Кроме того, если вы хотите узнать больше о функциях Javascript Async / Await, взгляните на другой мой учебник:
Объединение вызовов API с Javascript Async / Await:
https://medium.com/@inaguirre/combining-api-calls-with-javascript-try-catch-ba1b7b9303a5
Спасибо за ваше время и удачного программирования!
Вот репо, если вы хотите то, что мы сделали сегодня:
