Как превратить Google Sheets в REST API и использовать его с приложением React

1656083536 kak prevratit google sheets v rest api i ispolzovat ego

Публиковать данные в API никогда не было легко. Но использовали ли вы когда-нибудь React для публикации данных формы в Google Таблицах? Если нет, то это руководство для вас.

Сегодня мы поговорим о том, как передать данные формы из React в Google Sheets, как REST API.

Сначала создайте свое приложение React.

Чтобы начать, вы можете использовать create-react-app, чтобы настроить приложение React.

Просто введите npx create-react-app react-googlesheets чтобы настроить каталог проекта.

Скриншот-2021-02-15-01-00-55
Структура папок

Как установить семантический пользовательский интерфейс

Семантический пользовательский интерфейс — это фреймворк, который используется для проектирования и разработки красивых и отзывчивых макетов. Он имеет компоненты для кнопок, контейнеров, списков, входов и многое другое.

Чтобы установить семантический пользовательский интерфейс в программе React, воспользуйтесь следующей командой:

npm install semantic-ui-react semantic-ui-css

После завершения установки откройте файл index.js и импортируйте следующее:

import 'semantic-ui-css/semantic.min.css'

Теперь запустите программу с помощью команды npm start.

Давайте создадим несколько полей ввода

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

Здесь мы импортируем кнопки, форму, контейнер и заголовок из semantic-ui-react библиотека и создание полей формы.

import React, { Component } from 'react'
import { Button, Form, Container, Header } from 'semantic-ui-react'
import './App.css';

export default class App extends Component {
  render() {
    return (
      <Container fluid className="container">
        <Header as="h2">React Google Sheets!</Header>
        <Form className="form">
          <Form.Field>
            <label>Name</label>
            <input placeholder="Enter your name" />
          </Form.Field>
          <Form.Field>
            <label>Age</label>
            <input placeholder="Enter your age" />
          </Form.Field>
          <Form.Field>
            <label>Salary</label>
            <input placeholder="Enter your salary" />
          </Form.Field>
          <Form.Field>
            <label>Hobby</label>
            <input placeholder="Enter your hobby" />
          </Form.Field>
          
          <Button color="blue" type="submit">Submit</Button>
        </Form>
      </Container>
    )
  }
}
App.js
.form{
  width: 500px;
}

.container{
  padding:20px
}
App.css

Вот как это будет выглядеть:

Скриншот-2021-02-15-01-23-55-1
Форма вывода

Теперь мы кончили с UI. Добавим немного функций.

Прежде всего, давайте создадим состояния для наших четырех полей формы в конструкторе.

import React, { Component } from 'react'
import { Button, Form, Container, Header } from 'semantic-ui-react'
import './App.css';

export default class App extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
       name: '',
       age: '',
       salary: '',
       hobby: ''
    }
  }

  changeHandler = (e) => {
    this.setState({[e.target.name] : e.target.value})
  }

  submitHandler = e => {
    e.preventDefault();
    console.log(this.state);
  }
  
  render() {
    const { name, age, salary, hobby } = this.state;    (*)
    return (
      <Container fluid className="container">
        <Header as="h2">React Google Sheets!</Header>
        <Form className="form" onSubmit={this.submitHandler}>
          <Form.Field>
            <label>Name</label>
            <input placeholder="Enter your name" type="text" name = "name" value = {name} onChange={this.changeHandler}/>
          </Form.Field>
          <Form.Field>
            <label>Age</label>
            <input placeholder="Enter your age" type="number" name = "age" value = {age} onChange={this.changeHandler}/>
          </Form.Field>
          <Form.Field>
            <label>Salary</label>
            <input placeholder="Enter your salary" type="number" name = "salary" value = {salary} onChange={this.changeHandler}/>
          </Form.Field>
          <Form.Field>
            <label>Hobby</label>
            <input placeholder="Enter your hobby" type="text" name = "hobby" value = {hobby} onChange={this.changeHandler}/>
          </Form.Field>
          
          <Button color="blue" type="submit">Submit</Button>
        </Form>
      </Container>
    )
  }
}

Здесь у нас есть четыре поля формы и их соответствующие состояния. У нас также есть метод changeHandler для отслеживания изменений во входных значениях.

Давайте деструктурируем состояния в методе render и добавим их значение в атрибут value входов (строка*).

Последнее, что нам нужно это обработчик onSubmit. В тег формы добавьте событие onSubmit и назначьте метод submitHandler.

Заполните форму и нажмите кнопку «Отправить». Вы вводите данные в консоли.

И все – у нас есть форма, которая берет имя, возраст, зарплату и хобби и регистрирует их в консоли.

Скриншот-2021-02-15-02-13-09

Как опубликовать данные в Google Таблицах

Давайте превратим наши таблицы Google в REST API.

Мы будем публиковать данные в Google Sheets как REST API, и для этого нам нужно установить Axios. Это библиотека, которую вы можете использовать для отправки запросов в API получить

Откройте новую электронную таблицу, нажав «Файл», затем «Создать» и «Электронная таблица».

Скриншот-2021-02-15-02-24-46

Назовите лист по своему выбору и сохраните.

Нажмите кнопку «Поделиться» в правом верхнем углу экрана и отредактируйте доступ к общему доступу.

Скриншот-2021-02-15-02-27-45

Скопируйте ссылки и перейдите к и создайте свою бесплатную учетную запись.

Создайте новое соединение и вставьте скопированный URL-адрес из Google Таблиц в поле URL-адреса подключения.

Скриншот-2021-02-15-02-30-51

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

Скриншот-2021-02-15-02-33-25

Скопируйте URL-адрес ПОДКЛЮЧЕНИЕ. Этот URL-адрес будет использоваться как конечная точка для отправки запросов POST.

Теперь давайте установим Axios. Тип npm install axios в терминале, чтобы установить пакет.

После установки импортируйте его в верхней части файла. Мы запросим POST в функции submitHandler.

submitHandler = e => {
    e.preventDefault();
    console.log(this.state);

    axios.post('url', this.state)
    .then(response => {
      console.log(response);
    })
  }
submitHandler Метод

Замените функцию submitHandler кодом выше. Здесь мы используем Axios для размещения данных на URL и получения ответа на консоли с помощью .потом ключевое слово.

Вставьте скопированный URL-адрес CONNECTION конечная точка от письмо. и замените его URL-адресом в axios.post(‘url’).

submitHandler = e => {
    e.preventDefault();
    console.log(this.state);

    axios.post('api/sheets/a6e67deb-2f00-43c3-89d3-b331341d53ed', this.state)
    .then(response => {
      console.log(response);
    })
  }
функция submitHandler

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

Скриншот-2021-02-15-02-43-12
Добавьте поля имени, возраста, зарплаты и хобби

Запустите программу React и заполните поля ввода. Вы увидите, что данные заполняются в вашей Таблице Google одна за другой.

Скриншот-2021-02-18-14-03-16
Форма реакции
Скриншот-2021-02-15-02-45-27
Образец полей

Это все, уважаемые. Теперь вы знаете, как преобразовать Таблицы Google в REST API. Теперь вы храните свои данные в Google Таблицах с помощью программы React.

Кроме того, вы можете найти код Github для эксперимента.

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

Счастливого обучения.

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

Ваш адрес email не будет опубликован.