나는 점점 더 이런 상황을 겪고 있다. 나는 사이트에서 사용자 데이터를 수집해야 한다. 예를 들어 메일 목록, 가입 표를 선택하거나 조사를 해야 하지만 나는 데이터를 저장할 마케팅 플랫폼이 없다.그것들은 모두 다른 가격과 기능을 가지고 있기 때문에 나는 어떤 것을 사용할지 고려할 시간이 없다.나는 단지 내가 앞에 제출한 내용을 구글 폼에 추가하고 (필드를 열 제목에 비추고) 마케팅 플랫폼을 걱정하고 싶을 뿐이다.하지만 나는 이 일을 할 좋은 서비스를 찾지 못했다.
그래서 나는 스스로 그것을 짓기로 결정했다.그렇게 어렵지 않겠지?
나는 이렇게 했다.

기술 창고

내가 전에 쓴 바와 같이 나는 창업 회사의 가장 이상적인 기술 조합은 네가 무엇으로 가장 빨리 일을 완성할 수 있느냐고 생각한다.나에게 있어서 이것은 MERN 창고의 변체로 Serverless을 숙주 프레임워크로 한다.
만약 당신이 이전에 서버 없는 응용 프로그램을 개발한 적이 없고, 당신의 입문을 도울 수 있는 것을 찾고 있다면, take a look at this boilerplate project I threw together.은 매우 기본적인 응용 프로그램이지만, 나는 많은 프로젝트에서 그것을 사용해서 시작합니다.
내가 이 프로젝트를 연구할 때의 주요 고려 요소는 다음과 같다.

은 폼 입력을 검증하고 사용자가 볼 수 있는 오류를 던지기 위해 HTTP 요청을 사용해야 합니다.

모든 것이 좋아 보인다면 구글과 폼 업데이트를 논의해야 할 때다.이것은 제3자이기 때문에 우리는 책임감 있게 상호작용하여 우리의 이율을 제한해야 한다.

나는 다른 글에서 이 점을 언급한 적이 있지만, 구글과의 어떤 상호작용도worker 함수가 있는 대기열에서 진행해야 한다.서버와 FIFO 없이 사용할 수 있는 완벽한 어플리케이션입니다.
마지막으로 내가 그린 기본 구조는 다음과 같다.

이 틀이 있으면 나는 모든 논리의 세부 사항을 깊이 이해해야 한다.

Google Sheets API 사용

내 HTTP 노드에는 다음과 같은 POST 로드가 있습니다.

{
    "DOB": "6/20/1997"
    "Name": "Jane Doe",
    "Email": "[email protected]",
}

다음과 같이 종이로 변환해야 합니다.

유일하게 주의해야 할 것은 값을 표의 열과 일치하게 정렬하고 표의 끝에 추가해야 한다는 것이다.간단해.
참고: 이 모든 예제에는 Google Sheets API, v4.이 사용됩니다.

https://developers.google.com/sheets/api/reference/rest/v4/spreadsheets.values/append

const { google } = require('googleapis');

class ExecuteSheetUpdateCommand {
  /**
   * @param {string} spreadsheetId ID of the Google Spreadsheet.
   * @param {Object} data Object that contains the data to add to the sheet as key-value pairs.
   * @param {google.auth.OAuth2} auth An Google OAuth client with a valid access token: https://github.com/googleapis/google-api-nodejs-client.
  */
  static async exec(spreadsheetId, data, auth) {
    const sheets = google.sheets({ version: 'v4', auth });

    const rows = [data.Name, data.Email, data.DOB];
    // Add our new data to the bottom of the sheet.
    await sheets.spreadsheets.values.append({
      spreadsheetId,
      range: 'A1',
      valueInputOption: 'RAW',
      insertDataOption: 'INSERT_ROWS',
      resource: {
        values: [rows],
      },
    });
  }
}

비올라!간단한 기능을 통해 우리는 자동으로 폼 데이터를 구글 폼에 비출 수 있다.
분명히 이 함수는 좋지 않다.그것은 폼 헤더와 폼 구조를 결합시킨다. const rows = [data.Name, data.Email, data.DOB]; 너는 정말 이렇게 해서는 안 된다.예를 들어, 스프레드시트에서 열을 이동한 경우 이 함수는 이전 위치에 데이터를 계속 삽입하고 내 워크시트에 잘못된 데이터가 있을 수 있습니다.그러나 폼 필드를 도면 제목에 자동으로 비추는 것은 좀 복잡하다. 이 예시를 위해서 나는 이 부분을 생략할 것이다.

SQS Worker를 사용하여 REST 끝점 추가

좋습니다. JSON 객체를 Google 워크시트로 보낼 수 있는 함수가 있습니다. 하지만 HTML 폼은 어떻게 사용합니까?정답은 HTTP+SQS입니다.
Node 및 Express에 익숙하면 HTTP 섹션이 상당히 간단합니다.(다른 노드의 우호적인 환경에 쉽게 배치할 수 있지만, 서버와 AWS를 사용하지 않는 방법을 보여 드리겠습니다.)aws-serverless-express 패키지를 사용하여 express 응용 프로그램을 서버 없는 Lambda 기능으로 발송합니다.serverless-api-cloudfront 패키지와 결합하여 확장 가능한 API를 구축하는 것은 매우 쉽다.
다음은 Google 워크시트 업데이트를 시작하는 빠른 HTTP 끝점입니다.

const express = require('express');
const bodyParser = require('body-parser');

// An AWS SQS client
const sqsClient = require('./clients/SQSClient');

const app = express();

app.use(bodyParser.urlencoded({ extended: true }));

app.post('/form/:spreadsheetId', async (req, res, next) => {
  const { spreadsheetId } = req.params; // The Google Sheet ID
  const { body } = req; // The post body

  /* Note: You should run your own custom validation on the 
     * form before forwarding it on. In this example we just continue.
   *
     * At a minimum, make sure you have permission to update the 
   * sheet, otherwise this will break downstream.
     */
  const passedValidation = true;

  if(passedValidation) {
    // Send the data to our SQS queue for further processing
    await sqsClient.createEntry.sendMessage({
      spreadsheetId,
            body,
    });
  } else {
    throw new Error('Invalid form data');
  }

  res.status(200).send('Submitted your form');
});

그리고 Lambda 함수는 제한된 SQS FIFO 대기열에서 데이터를 추출하여 구글을 위해 처리합니다.

const { google } = require('googleapis');
const ExecuteSheetUpdateCommand = require('../commands/ExecuteSheetUpdateCommand');

exports.handle = async (event, context, callback) => {
  const messages = event.record.body;

  // This little logic helps us throttle our API interactions
  messages.reduce(async (previousPromise, nextMessage) => {
    await previousPromise;
    const { spreadsheetId, body } = nextMessage;
    const accessToken = /* Load a valid access token for your Google user */;
    // Construct an oAuth client with your client information that you've securely stored in the environment
        const oAuth2Client = new google.auth.OAuth2(
      process.env.GOOGLE_CLIENT_ID, process.env.GOOGLE_CLIENT_SECRET, null,
    );
    oAuth2Client.setCredentials({
      access_token: accessToken,
    });
    await ExecuteSheetUpdateCommand.exec(spreadsheetId, body, oAuth2Client);
    return new Promise((resolve) => {
      setTimeout(resolve, 1000); // Throttle for the Google API
    });
  }, Promise.resolve());

  callback();
};

HTTP 노드에서뿐만 아니라 SQS with FIFO을 사용하는 이유는 양식을 제출한 사용자에게 신속하게 응답하고 API 제한을 준수하는 동시에 양식을 빨리 업데이트할 수 있기 때문이다.
API 제한을 고려하지 않으면 사용자가 양식을 제출하면 오류 화면이 표시됩니다.안 좋아요.Google Sheets API의 제한은 "사용자당 100초당 100개의 요청"또는 1초당 1개의 요청 속도는 우리가 안전하게 상호작용할 수 있는 속도입니다.
SQS FIFO queues은 작업표 업데이트를 한 줄에 놓고 사용자 id에 따라 그룹을 나눌 수 있도록 합니다. 그리고 위의 messages.reduce 세션을 사용하여 이 실행을 제한할 수 있습니다. 이것은 요청/초/사용자의 제한을 초과하지 않도록 합니다.우리는 또한 AWS가 흐름을 줄이는 힘든 일을 할 수 있도록 하는 추가적인 장점을 얻었다.관건은 FIFO 대기열을 채울 때 MessageGroupId을 OAuth 요청을 보내는 Google 사용자 id로 설정하는 것입니다.

그것을 싸라

이러한 기술과 기능을 결합하여 다음과 같은 HTML 양식을 작성할 수 있습니다.

<form action="https://<my-express-endpoint>/form/<my-sheet-id>" method="post">
<input type="email" name="Email" placeholder="Enter your email" required />
<input type="name" name="Name" placeholder="Enter your name" required />
<input type="submit" value="Submit" />
</form>

제출할 때마다 데이터가 당신의 구글 폼에 신기하게 나타난다.

원숭이

좋아, 이것은 내가 상상한 것보다 훨씬 많아.이것이 바로 내가 마침내 그것을 little indie product으로 만든 이유다.만약 HTML 폼을 구글 폼에 보내고 번거롭게 자신의 해결 방안을 구축하고 싶지 않다면 Sheet Monkey에서 구축한 내용을 보십시오.