ReactJS、GatsbyJS、またはNextJSを使用してフォームデータをGoogleスプレッドシートに保存する方法

これについて書いたのは、ユーザーのフォーム データを Gatsby の Google スプレッドシートに保存する際に問題があったためです.バックエンドから実行されているのを見ましたが、ストレスをほとんど受けずにフロントエンドに実装したかったのですが、頭痛の種だったので、これがその日を救った究極のソリューションです.

ソリューションの仕組み

ソリューションの主なアイデアは、ReactJS、NextJS、またはこの場合は GatsbyJS POST フォーム データを REST API のような Google スプレッドシートに作成することでした.

まず、ワークスペースを初期化します

ReactJS、GatsbyJS、および NextJS でプロジェクトをセットアップする方法に関するドキュメントを次に示します.

ReactJS-https://reactjs.org/docs/create-a-new-react-app.html

GatsbyJS-https://www.gatsbyjs.com/docs/tutorial/part-1/

NextJS-https://nextjs.org/docs/getting-started

ただし、この場合、GatsbyJS を使用します.GatsbyJS でプロジェクトを正しく設定していれば、次の画面が表示されます.

フォームを作成する

さて、今度はフォームを作成します.フォームの作成には Material-UI を使用し、フォームの処理と検証には Formik と Yup を使用します.

上記のテクノロジー スタックの詳細を読むことができます.

マテリアル UI - https://mui.com

フォーム - https://formik.org/docs/overview

うん - https://formik.org/docs/guides/validation

ただし、選択した任意のテクノロジ スタックで作成できます.

データを Google スプレッドシートに投稿する方法

フォーム データを Google スプレッドシートに投稿するには、Stein を使用します. Stein は、Google スプレッドシートをデータベースに変換するためのオープンソース プログラムです.データを Google スプレッドシートに POST できます.

stein-js-client もインストールする必要があります. Stein API とやり取りするための JavaScript クライアント ライブラリです.

Google スプレッドシートに移動し、[ファイル]、[新規]、[スプレッドシート] の順にクリックして、新しいスプレッドシートを開きます.



シートに好きな名前を付けて保存します.

画面右上の共有ボタンをクリックし、公開権限を編集します.



リンクをコピーして https://steinhq.com にアクセスし、無料のアカウントを作成してください.



[API の作成] をクリックします.詳細ページにリダイレクトされます.ここでは、シートの URL と API の URL を確認できます. API URL のコピーをクリックします.この URL は、リクエストを送信するためのエンドポイントとして使用されます.



それでは、stein-js-client をインストールしましょう.ターミナルに npm install stein-js-client と入力して、パッケージをインストールします.

インストールが完了したら、ファイルの先頭にインポートします. submitHandler 関数で POST リクエストを作成します.

import React from "react";
import SteinStore from "stein-js-client";
 const store = new SteinStore("url");

submitHandler = () => {
   store
  .append("Sheet1", [
    {
      title: "Awesome article",
      author: "Me!",
      content: "A brief summary",
      link: "blog.me.com/awesome-article"
    }
  ])
  .then(res => {
    console.log(res);
  });
    })
  }

submitHandler 関数を上記のコードに置き換えます.ここでは、stein-js-client を使用してデータを URL に投稿し、.then キーワードを使用してコンソールに応答を返します.

stein からコピーした API URL エンドポイントを貼り付け、new SteinStore("url") の URL に置き換えます.

import React from "react";
import SteinStore from "stein-js-client";
 const store = new SteinStore("https://api.steinhq.com/v1/storages/61eea0ad8d29ba237915e07d");

submitHandler = () => {
   store
  .append("Sheet1", [
    {
      title: "Awesome article",
      author: "Me!",
      content: "A brief summary",
      link: "blog.me.com/awesome-article"
    }
  ])
  .then(res => {
    console.log(res);
  });
    })
  }

次に、Google スプレッドシートを開いて、名前、年齢、給与、趣味の最初の列に入力します.慎重に入力してください.そうしないと機能しません.大文字と小文字を区別する必要があります.



次に、React アプリを実行し、入力フィールドに入力します.データが Google スプレッドシートに入力されていることがわかります.



ここで使用されるデフォルト値の代わりに、フォームから取得した値を渡します

submitHandler = () => {
   store
  .append("Sheet1", [
    {
      title: values.title,
      author: values.author,
      content: values.content,
      link: values.link,
    }
  ])
  .then(res => {
    console.log(res);
  });
    })
  }

今、あなたはこれを手に入れます



スタインの詳細を読むことができます
特徴: https://docs.steinhq.com/introduction

それは今のところすべてです.これで、ReactJS、GatsbyJS、または NextJS アプリケーションを使用してフォーム データを Google スプレッドシートに保存する方法がわかりました.

詳細については、こちらの dev.to と Twitter でフォローしてください.また、Google スプレッドシートで Gatsby Serverless Functions を使用する際のサポートを提供してくれてありがとう.その here について知ることができます.