ワンクリックで反応アプリケーションからGoogleシートを作成する

33158 ワード

react tutorial codenewbie javascript テキストリンク

私のプロジェクトの背景のためにこのシリーズの最初の記事をチェックしてください.この記事では、GoogleシートAPIの統合を設定するいくつかの既存のリソースを変更する方法を説明します.あなたがフォローしたいならば、あなた自身の既存の反応アプリケーションのうちの1つの新しいブランチに次のステップを実装しようとして、1つのクリックであなたのデータを新しいシートに輸出することを学んでください!

Google統合の設定
まず、新しいGoogleクラウドプラットフォームプロジェクトを設定し、シートAPIを有効にする必要があります.指示に従ってくださいStep 1 of the Browser Quickstart Guide . この手順の最後に、ClientRound IDとapiKeenキーを書き留めておく必要があります.
注意:ブラウザクイックスタートのステップ1の方向は誤解を招く.あなた自身のGoogle開発者コンソールの中で「APIキーを作成する」ボタンをクリックして、クイックスタート方向ページからでないことを確認してください!

秘密の保管及び確保
次に、使用する必要がありますdotenv ClientRound IDとapIRAKEキーを格納して保護します.この依存関係をインストールするには、次のコマンドを端末で実行します.npm install dotenv空を作る.env ファイルをルートディレクトリに置く.次に、追加することを確認します.env あなたに.gitignoreファイルは、そのように.env ファイルは追跡されません.
さて、あなたはあなたのclientRound idとapihenキーを保存することができます.env 以下のようにします.

REACT_APP_CLIENT_ID=<ENTER-YOUR-CLIENT-ID-HERE>
REACT_APP_API_KEY=<ENTER-YOUR-API-KEY-HERE>

ステップ5では、私たちはdotenvを必要とすることによってこれらの変数にアクセスすることができますprocess.env 値にアクセスする名前空間require('dotenv').config() process.env.REACT_APP_API_KEY process.env.REACT_APP_CLIENT_ID
3 .インデックスの変更HTMLファイル
インデックスのbody要素の下部にあります.HTMLファイルには、スクリプト要素を追加する必要がありますGoogle APIs Client for JavaScript . 下記を参照

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>

  <body>

    <div id="root"></div>

    <!-- JAVASCRIPT GOOGLE CLIENT  -->
    <script async defer src="https://apis.google.com/js/api.js"></script>

  </body>
</html>

既存のコンポーネントを更新し、新しいコンポーネントにプロップとしてデータを渡す
すでにあなたのスプレッドシートレポートに含めるデータへのアクセスがあるあなたの反応アプリケーションのコンポーネントを選択します.私たちは新しいGoogleDownload コンポーネントを既存のコンポーネントにし、新しいコンポーネントをレンダリングし、スプレッドシートに含まれるデータを新しいプロップとして渡しますGoogleDownload コンポーネント.

...
import {GoogleDownload} from './GoogleDownload'

    ...

    return (
        <div>

            ...

            <GoogleDownload data={data}/>

        </div>
    )
}

新しい再利用可能なGoogleDownloadコンポーネントを作成する
この手順では、3つのボタンを含むコンポーネントを作成します.

ユーザーのGoogleシートに対する読み取りおよび書き込みアクセスを許可し、アクセスします.

Googleからサインアウトして

スプレッドシート作成プロセスを起動します.

ここでのコードのほとんどはStep 2 of the Browser Quickstart Guide . しかしながら、私は、バニラJavaScriptを適切に反応コンポーネントの中で統合するコードに変えるために若干の修正をする必要がありました.
再利用可能なGoogleDownloadコンポーネントの完全なコードは、ここにあります.

import React, { useEffect } from 'react';
import { createGoogleSheet } from '../spreadsheet/sheets'
require('dotenv').config()

export function GoogleDownload(data) {

    useEffect(() => {
        handleClientLoad();
    }, []);


     // On load, called to load the auth2 library and API client library.

      function handleClientLoad() {
        window.gapi.load('client:auth2', initClient);
      }

     // Initializes the API client library and sets up sign-in state listeners.

      function initClient() {
        window.gapi.client.init({
          apiKey: process.env.REACT_APP_API_KEY,
          clientId: process.env.REACT_APP_CLIENT_ID,
          discoveryDocs: ["https://sheets.googleapis.com/$discovery/rest?version=v4"],
          scope: "https://www.googleapis.com/auth/spreadsheets"
        }).then(function () {

          // Listen for sign-in state changes.
  window.gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);

          // Handle the initial sign-in state.
          updateSigninStatus(window.gapi.auth2.getAuthInstance().isSignedIn.get());
        }, function(error) {
            console.log(error) // add something for error handling
        });
      }

      // Called when the signed in status changes, to update the UI appropriately. After a sign-in, the API is called.

      function updateSigninStatus(isSignedIn) {
        var authorizeButton = document.getElementById('authorize_button');
        var signoutButton = document.getElementById('signout_button');
        var downloadButton = document.getElementById('download_button');

        if (isSignedIn) {
          authorizeButton.style.display = "none";
          signoutButton.style.display = "block";
          downloadButton.style.display = "block";
        } else {
          authorizeButton.style.display = "block";
          signoutButton.style.display = "none";
          downloadButton.style.display = "none";
        }
      }

      // Sign in the user upon button click.

      function handleAuthClick(event) {
        window.gapi.auth2.getAuthInstance().signIn();
      }

      // Sign out the user upon button click.

      function handleSignoutClick(event) {
        window.gapi.auth2.getAuthInstance().signOut();
      }




    return (
        <div>

            <button id="authorize_button"  onClick={handleAuthClick} display={updateSigninStatus} className="block googleauth">Authorize Google Login</button>

            <button id="signout_button"  onClick={handleSignoutClick} display={updateSigninStatus} className="block googlesignout">Sign Out of Google</button>

            <button id="download_button" onClick={() => createGoogleSheet(data.data)} className="block google" display={updateSigninStatus}>Download Data to Google Sheets</button> 

        </div>
    )
}

次のステップでは、次の手順を実行します.

まず、インポートを設定します.

import React, { useEffect } from 'react';
import { createGoogleSheet } from '../spreadsheet/sheets'
require('dotenv').config()

次に、機能コンポーネントのスケルトンを設定します.

export function GoogleDownload(data) {

    useEffect(() => {
        ...
    }, []);

    ...

    return (
        <div>

          ...

        </div>
    )
}

Google認証ロジックを制御する関数を追加します.
注意:これらの関数はStep 2 of the Browser Quickstart Guide , しかし、私はアクセスできませんでしたgapi 反応成分の中から.代わりに、ウィンドウオブジェクトをwindow.gapi . 加えて、私は、彼らが反応の更新パターンに関して機能するように、signinstatusに基づくボタンを隠して、示しているロジックを修正しました.

     // On load, called to load the auth2 library and API client library.

      function handleClientLoad() {
        window.gapi.load('client:auth2', initClient);
      }

     // Initializes the API client library and sets up sign-in state listeners.

      function initClient() {
        window.gapi.client.init({
          apiKey: process.env.REACT_APP_API_KEY,
          clientId: process.env.REACT_APP_CLIENT_ID,
          discoveryDocs: ["https://sheets.googleapis.com/$discovery/rest?version=v4"],
          scope: "https://www.googleapis.com/auth/spreadsheets"
        }).then(function () {

          // Listen for sign-in state changes.
  window.gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);

          // Handle the initial sign-in state.
          updateSigninStatus(window.gapi.auth2.getAuthInstance().isSignedIn.get());
        }, function(error) {
            console.log(error) // add something for error handling
        });
      }

      // Called when the signed in status changes, to update the UI appropriately. After a sign-in, the API is called.

      function updateSigninStatus(isSignedIn) {
        var authorizeButton = document.getElementById('authorize_button');
        var signoutButton = document.getElementById('signout_button');
        var downloadButton = document.getElementById('download_button');

        if (isSignedIn) {
          authorizeButton.style.display = "none";
          signoutButton.style.display = "block";
          downloadButton.style.display = "block";
        } else {
          authorizeButton.style.display = "block";
          signoutButton.style.display = "none";
          downloadButton.style.display = "none";
        }
      }

      // Sign in the user upon button click.

      function handleAuthClick(event) {
        window.gapi.auth2.getAuthInstance().signIn();
      }

      // Sign out the user upon button click.

      function handleSignoutClick(event) {
        window.gapi.auth2.getAuthInstance().signOut();
      }

有効なフックの中でhandleclientLoad関数を呼びます:
これは、ユーザーが既に署名され、Googleシートにアクセスする権限があるかどうかを確認します.

    useEffect(() => {
        handleClientLoad();
    }, []);

Google Signのボタンを追加し、サインアウトし、スプレッドシートを作成します
再び、最初の2つのボタンからStep 2 of the Browser Quickstart Guide , しかし、わずかに修正されてupdateSignInStatus() 関数はdisplayプロパティの値を制御する.また、QuickStartの例のように、バニラJavaScriptを介してではなく、JSXを通して各ボタンにOnClickリスナーを追加しました.最後にdownload_button 電話をかけるために配線されているcreateGoogleSheet() 関数をクリックすると、sheets.js , スプレッドシートに必要なデータを引数として渡します.

            <button id="authorize_button"  onClick={handleAuthClick} display={updateSigninStatus} className="block googleauth">Authorize Google Login</button>

            <button id="signout_button"  onClick={handleSignoutClick} display={updateSigninStatus} className="block googlesignout">Sign Out of Google</button>

            <button id="download_button" onClick={() => createGoogleSheet(data.data)} className="block google" display={updateSigninStatus}>Download Data to Google Sheets</button>

この時点で、反応アプリケーションは完全にGoogleシートAPIとの統合には、ユーザーに署名し、Googleシートにアクセスするために承認を付与することができますし、それらを署名し、スプレッドシートを作成する関数にデータを渡しているには、完全に配線されています.この時点で、実際のGoogleシートファイルを構築することに関連するすべてがsheets.js バニラJavaScriptを使用してファイルをdocumentation for the Google Sheets API .
私のデモプロジェクトをチェックアウトしたいなら、ここでコードを見ることができます.

GoogleDownload component

スプレッドシートの作成と更新
このシリーズの最後の記事をチェックアウトする方法sheets.js ファイルをスプレッドシートを作成し、データを追加し、基本的なだけでなく、条件付き書式を追加します.ここでは、クイックプレビューSheets.js file .

Reference

この問題について(ワンクリックで反応アプリケーションからGoogleシートを作成する), 我々は、より多くの情報をここで見つけました https://dev.to/jessesbyers/create-a-google-sheet-from-a-react-application-with-one-click-3ka6

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

PackageManagerServiceスキャンインストールapkの詳細

Affel 15日目1/14(金)