Как развернуть программу React на Netlify, читающую с Google Sheet

kak razvernut programmu react na netlify chitayushhuyu s google sheet

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

Перейдите в «Настройки», если вас не волнует, откуда будут поступать данные или почему я решил создать это. Я не буду сердиться, обещаю.

Сейчас конечный результат выглядит так, но в скором времени я добавлю к нему больше функций.

B0fW0hCrk6UNfnyhZz49Wyigj8BSLWe6H-yN
Вы можете найти его на https://dougscore.netlify.com

Почему

я люблю машины? ?️. Если вы хоть немного интересуетесь автомобилями, вы, наверное, в какой-то момент наткнулись на канал Дуга Демуро на Youtube. Он обозревает широкий ассортимент автомобилей от Ferrari Enzo за 3 миллиона долларов до 3-х колесного BMW Isetta. Формат Дуга немного отличается от большинства отзывов пользователей. Его видео продолжительностью примерно 20 минут имеют три основных момента:

  • Интересные капризы и особенности: около 70% видео он рассказывает о внешних и внутренних прихотях автомобиля. Они могут варьироваться от параграфа в руководстве пользователя к интересной форме фонарей.
PRwgOYulrc9WjHVypGBsN84K-kMaZdTARG4W
На самом деле не Даг, а счастливый пес?
  • За рулем: около 20% видео – это Даг, который выводит машину на дорогу и делает забавные гримасы, когда ускоряется. Он также рассказывает о внутреннем шуме, управляемости, скорости и так далее.
  • DougScore: Дуг создал электронную таблицу со всеми автомобилями, которые он когда-либо просматривал (с момента создания системы оценки) и оценил их с помощью собственной системы. Он разбит на две категории:
    * Оценка в выходные дни: по сути, насколько весела машина.
    * Ежедневная оценка: по сути, насколько практичный автомобиль.
2pf1-UBRO1QVYtj6hntKdeHSHpr077skCXkB
Интересно, читает ли Даг все это
6Mmm4aJZrLSRGzfI3fimEpDhy0BraT31sylA
Тогда он найдет опечатку на странице 73

Поэтому, по моему мнению, он может получить более 1,5 млн просмотров 25-минутного видео минивэна‍. Поскольку видео столь необычны, а сам Даг тоже довольно вычурный, его последователи придумали несколько творческих комментариев. Мое любимое замечание «Дуг — тип парня, который…», как и выше.

А теперь для всех вас, кто застрял после этого вступления, не имеющего ничего общего с созданием программы, Google Sheets API или React, вот о чем я говорю.

Настройка

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

React Создать приложение

Шаблон React от Facebook позволит нам достаточно быстро начать работу без необходимости настраивать какие-либо бекенды. В выбранном терминале (для меня Hyper) введите:

npx create-react-app doug-score
cd doug-score
yarn start

(Или npm startвсе, что плавает на вашей лодке, но я буду использовать пряжу.)

Откройте папку в выбранном редакторе (для меня VS Code) и перейдите к App.js. Мы собираемся создать отдельный компонент под названием CarList поместив его внутрь a components папку и добавив ее в App .

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import CarList from "./components/CarList";
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <CarList />
      </div>
    );
  }
}
export default App;

Теперь компонент CarList будет выглядеть так:

import React, { Component } from 'react';
class CarList extends Component {
  render() {
    return (
      <div>
        This will be the car list
      </div>
    );
  }
}

API Google Таблиц

Давайте создадим новый проект в Google. Я назвал это doug-score. После создания в поле API нажмите «Перейти к обзору API». После того, как вы нажмете «Включить API и услуги», вам будет представлена ​​библиотека API. Мы продолжим поиск Google Sheets API. После того, как вы нажмете его, нажмите «Включить», и после его обработки вы увидите эту страницу.

XmCCcDJkZbQM7lLZLE1F6V25c2CwRtKvpEEt
Панель инструментов API Google

На боковой панели выделите «Учетные данные», нажмите кнопку «Создать аккаунт» и выберите «Ключ API». Нажмите «Ключ ограничения» и установите название (я установил «DougScore»). В разделе «Ограничение приложений» мы установим для него значение «Направления HTTP» и добавим сейчас. В разделе «Ограничение API» выберите «API Google Sheets» и сохраните. Мы должны быть добры, чтобы идти к этому концу.

Соединение

Теперь, когда у нас есть ключ API, вернитесь к коду программы и создайте новый файл под названием config.js . Введите ключ API и идентификатор электронной таблицы.

экспорт по умолчанию { apiKey: "YOUR_API_KEY", discoveryDocs: 
    ["
  spreadsheetId: "1KTArYwDWrn52fnc7B12KvjRb6nmcEaU6gXYehWfsZSo"
};

Now, we’ll need the Google API library, so we’ll use our index.html file inside the public library after our <div id="root"></div>

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Stuff -->
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <script src="
    <!-- Stuff -->
  </body>
</html>

This will give us access to window.gapi which we’ll use to connect to the Sheets API. For more information on it, head over to Google’s Docs.

The Data

Now that we have access to the API, let’s establish the connection to it. The best place to do that would be inside the componentDidMount lifecycle of the CarList component we created earlier. Let’s head over there.

componentDidMount() {
  // 1. Load the JavaScript client library.
  window.gapi.load("client", this.initClient);
}

window.gapi.load accepts a callback so our initClient function looks like this:

initClient = () => {
  // 2. Initialize the JavaScript client library.
  window.gapi.client
    .init({
      apiKey: config.apiKey,
      // Your API key will be automatically added to the Discovery Document URLs.
      discoveryDocs: config.discoveryDocs
    })
    .then(() => {
    // 3. Initialize and make the API request.
    load(this.onLoad);
  });
};

A few things are introduced here. config is coming from the config.js file we created earlier, so don’t forget to do import config from “../config”; at the top of the CarList.js file.

load is a function that we’ll be creating now. It will be in charge of connecting to the right spreadsheet, formatting the data correctly, and returning it to the component within the this.onLoad callback (or returning an error if we messed something up).

I wanted to separate that logic from the component to keep the files small and fairly readable. Let’s create a new folder called helpers inside src and put a spreadsheet.js file in there.

import config from "../config";
/**
 * Load the cars from the spreadsheet
 * Get the right values from it and assign.
 */
export function load(callback) {
  window.gapi.client.load("sheets", "v4", () => {
    window.gapi.client.sheets.spreadsheets.values
      .get({
        spreadsheetId: config.spreadsheetId,
        range: "Sheet1!A4:T"
      })
      .then(
        response => {
          const data = response.result.values;
const cars = data.map(car => ({
            year: car[0]марка: автомобиль[1]модель: автомобиль[2]
          })) || [];  обратный вызов ({ автомобилей });  }, response => { callback(false, response.result.error);  } );  });  }

Итак, мы вызываем API таблиц и получаем значение из электронной таблицы, передавая spreadsheetId и range . Предложение возвращает два ответа: один, если есть данные, и один, если есть ошибка. Значение ответов – это массив массивов, каждый из которых является строкой в ​​электронной таблице.

Дисплей

Теперь, когда мы имеем данные внутри CarList компонента, мы можем начать настройку дисплея для него. Внутри initClient функция, мы имели load(this.onLoad) функция, так что давайте разберемся там.

onLoad = (data, error) => {
  if (data) {
    const cars = data.cars;
    this.setState({ cars });
  } else {
    this.setState({ error });
  }
};

Если load функционировать внутри spreadsheet.js возвращает данные, мы устанавливаем cars указать эти данные. Иначе мы устанавливаем an error чтобы показать нашим пользователям, что что-то пошло не так.

Состояние по умолчанию

Поскольку данные не будут доступны мгновенно, необходимо установить состояние по умолчанию для нашего компонента.

state = {
  cars: [],
  error: null
}

Рендер

Теперь внутри render функции мы можем отразить состояние:

render() {
  const { cars, error } = this.state;
  if (error) {
    return <div>{this.state.error}</div>;
  }
  return (
    <ul>
      {cars.map((car, i) => (
        <li key={i}>
          {car.year} {car.make} {car.model}
        </li>
      ))}
    </ul>
  );
}

Здесь мы деструктурируем состояние (ES6 FTW ??) и сначала проверяем, есть ли ошибка. В противном случае мы наносим на карту автомобили и отображаем их в неупорядоченном списке.

s4i4xPrmJ5iQs9yt7v2jNI4EcbTdZujHhtmb

Развертывание

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

yarn build

Это создаст a build папка в программе, которая будет готова к производству. Теперь все, что вам нужно сделать, это:

npm install netlify-cli -g
netlify deploy

Когда спросит, обязательно вставьте build как Path to deploy? (current dir) .

Netlify сделает свое дело и покажет вам конечный URL-адрес (моя?)

Если вы попытаетесь получить доступ к созданному, вы увидите ошибку на вашей консоли, так как ваш URL не был добавлен в консолю Google API. Добавьте нужный URL-адрес, и после этого все должно работать, как ожидалось.

бросить

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

Если это руководство имело смысл, дайте ему ?? и поделитесь ею с другом. Если вы хотите сказать мне, что это отстойно, или у вас есть дополнительные вопросы, прокомментируйте ниже или крикните на меня в Twitter, я действительно не против. Если Даг читает это, привет, Дуг??!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *