**실습 8: Google Forms API와 Apps Script를 활용한 웹 데이터 수집 자동화

Google Forms API와 Google Apps Script를 활용하여 웹페이지에서 직접 데이터를 수집하는 방법을 단계별로 안내해드리겠습니다.

1. Google Cloud 프로젝트 설정 및 Forms API 활성화

Google Cloud 프로젝트 생성:
- Google Cloud Console에 접속하여 새로운 프로젝트를 생성합니다.
Forms API 활성화:
- 생성한 프로젝트에서 **'API 및 서비스' > '라이브러리'**로 이동합니다.
- 검색창에 'Forms API'를 입력하고 나타나는 결과를 선택한 후 **'사용 설정'**을 클릭합니다.

2. Apps Script 프로젝트 생성 및 설정

새로운 Apps Script 프로젝트 생성:
- Google Apps Script에 접속하여 **'새 프로젝트'**를 클릭합니다.
Google Cloud 프로젝트 연결:
- Apps Script 편집기에서 **'프로젝트 설정'**을 클릭합니다.
- 'Google Cloud Platform(GCP) 프로젝트' 섹션에서 **'프로젝트 변경'**을 클릭하고, 앞서 생성한 GCP 프로젝트 번호를 입력하여 연결합니다.

OAuth 범위 설정:

편집기에서 'appsscript.json' 파일을 열어 다음과 같이 필요한 OAuth 범위를 추가합니다:

{
  "timeZone": "Asia/Seoul",
  "dependencies": {},
  "exceptionLogging": "STACKDRIVER",
  "oauthScopes": [
    "https://www.googleapis.com/auth/forms",
    "https://www.googleapis.com/auth/forms.responses.readonly",
    "https://www.googleapis.com/auth/script.external_request"
  ]
}

3. 웹 애플리케이션 구현

HTML 폼 생성:

Apps Script 편집기에서 **'파일' > '새 파일'**을 선택하고 **'index.html'**로 저장합니다.

다음과 같이 HTML 폼을 작성합니다:

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
</head>
<body>
  <form id="dataForm">
    <label for="name">이름:</label>
    <input type="text" id="name" name="name"><br><br>
    <label for="email">이메일:</label>
    <input type="email" id="email" name="email"><br><br>
    <input type="button" value="제출" onclick="submitData()">
  </form>

  <script>
    function submitData() {
      var formData = {
        name: document.getElementById('name').value,
        email: document.getElementById('email').value
      };

      google.script.run.processFormData(formData);
    }
  </script>
</body>
</html>

서버 사이드 스크립트 작성:

'Code.gs' 파일에 다음과 같이 작성합니다:

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

function processFormData(formData) {
  var formId = 'YOUR_FORM_ID'; // Google Form의 ID를 입력하세요.
  var url = 'https://forms.googleapis.com/v1/forms/' + formId + ':responses';

  var responses = {
    "responses": [
      {
        "values": {
          "name": formData.name,
          "email": formData.email
        }
      }
    ]
  };

  var options = {
    method: 'post',
    contentType: 'application/json',
    headers: {
      Authorization: 'Bearer ' + ScriptApp.getOAuthToken()
    },
    payload: JSON.stringify(responses)
  };

  var response = UrlFetchApp.fetch(url, options);
  Logger.log(response.getContentText());
}

위 코드에서 YOUR_FORM_ID를 실제 Google Form의 ID로 교체해야 합니다.

4. 웹 애플리케이션 배포

Apps Script 편집기에서 **'배포' > '새 배포'**를 선택합니다.
배포 유형으로 **'웹 앱'**을 선택하고, 액세스를 **'모든 사용자'**로 설정한 후 **'배포'**를 클릭합니다.

이제 생성된 웹 애플리케이션 URL을 통해 사용자가 데이터를 입력하면, 해당 데이터가 지정한 Google Form으로 전송되어 수집됩니다.

참고 자료:

Apps Script 프로젝트 설정
Apps Script 샘플 웹 앱

위의 단계를 따라 설정하면, Google Forms API와 Apps Script를 활용하여 웹페이지에서 직접 데이터를 수집하는 시스템을 구축할 수 있습니다.

추가 실습

수집된 데이터를 Google Sheets에 자동으로 저장하여 데이터 분석 및 시각화에 활용하기
특정 조건에 따라 수집된 데이터에 대한 알림 이메일 또는 Slack 메시지 자동 발송하기
사용자 입력에 대한 실시간 검증 및 오류 처리 기능 추가하기

아래는 각 기능을 구현하는 방법에 대한 단계별 가이드입니다.

1. 수집된 데이터를 Google Sheets에 자동으로 저장하여 데이터 분석 및 시각화에 활용하기

설명: 웹페이지에서 수집한 데이터를 Google Sheets에 자동으로 저장하면, 이후 데이터 분석 및 시각화에 활용할 수 있습니다.

구현 방법:

Google Sheets 준비:
- Google Drive에서 새로운 스프레드시트를 생성하고, 시트의 ID를 확인합니다.

Apps Script 수정:

이전에 작성한 processFormData 함수에서, 데이터를 Google Forms에 전송하는 부분 외에 Google Sheets에 데이터를 추가하는 코드를 추가합니다.

function processFormData(formData) {
  // Google Forms에 데이터 전송 코드 (이전 튜토리얼 참고)

  // Google Sheets에 데이터 저장
  var sheetId = 'YOUR_SHEET_ID'; // 생성한 스프레드시트의 ID를 입력하세요.
  var sheet = SpreadsheetApp.openById(sheetId).getActiveSheet();
  sheet.appendRow([formData.name, formData.email, new Date()]);
}

위 코드에서 YOUR_SHEET_ID를 실제 스프레드시트의 ID로 교체해야 합니다.

참고 자료:

Google Apps Script로 Google 시트 자동화하는 법

2. 특정 조건에 따라 수집된 데이터에 대한 알림 이메일 또는 Slack 메시지 자동 발송하기

설명: 수집된 데이터가 특정 조건을 만족할 때, 담당자에게 이메일이나 Slack 메시지로 알림을 보내 신속한 대응을 가능하게 합니다.

구현 방법:

이메일 알림 설정:

processFormData 함수 내에서 조건문을 사용하여 특정 조건을 만족할 경우 이메일을 발송합니다.

function processFormData(formData) {
  // 데이터 저장 코드 (이전 섹션 참고)

  // 특정 조건 확인 (예: 이메일이 특정 도메인일 경우)
  if (formData.email.endsWith('@example.com')) {
    // 이메일 발송
    MailApp.sendEmail({
      to: 'admin@example.com',
      subject: '특정 도메인에서 새로운 제출이 있습니다',
      htmlBody: '새로운 제출: <br>이름: ' + formData.name + '<br>이메일: ' + formData.email
    });
  }
}

Slack 메시지 알림 설정:

Slack의 Incoming Webhook을 설정하고, 해당 URL을 통해 메시지를 전송합니다.

function processFormData(formData) {
  // 데이터 저장 코드 (이전 섹션 참고)

  // 특정 조건 확인 (예: 이름이 '홍길동'일 경우)
  if (formData.name === '홍길동') {
    // Slack 메시지 발송
    var slackWebhookUrl = 'YOUR_SLACK_WEBHOOK_URL';
    var payload = {
      text: '홍길동님이 새로운 제출을 했습니다.\n이메일: ' + formData.email
    };
    var options = {
      method: 'post',
      contentType: 'application/json',
      payload: JSON.stringify(payload)
    };
    UrlFetchApp.fetch(slackWebhookUrl, options);
  }
}

위 코드에서 YOUR_SLACK_WEBHOOK_URL을 실제 Slack Incoming Webhook URL로 교체해야 합니다.

참고 자료:

Google Apps Script에서 정기적으로 Slack에 알람 보내기

3. 사용자 입력에 대한 실시간 검증 및 오류 처리 기능 추가하기

설명: 사용자가 데이터를 입력할 때, 실시간으로 입력 값을 검증하여 오류를 사전에 방지하고, 사용자 경험을 향상시킵니다.

구현 방법:

HTML 폼 수정:

입력 필드에 required 속성을 추가하고, 이메일 필드에는 type="email"을 지정하여 기본적인 브라우저 검증을 활용합니다.

<form id="dataForm">
  <label for="name">이름:</label>
  <input type="text" id="name" name="name" required><br><br>
  <label for="email">이메일:</label>
  <input type="email" id="email" name="email" required><br><br>
  <input type="button" value="제출" onclick="submitData()">
</form>

JavaScript로 추가 검증:

submitData 함수에서 데이터를 전송하기 전에 추가적인 검증을 수행합니다.

function submitData() {
  var name = document.getElementById('name').value;
  var email = document.getElementById('email').value;

  // 추가 검증: 이름은 최소 2자 이상, 이메일은 특정 도메인만 허용
  if (name.length < 2) {
    alert('이름은 최소 2자 이상이어야 합니다.');
    return;
  }
  if (!email.endsWith('@example.com')) {
    alert('이메일은 @example.com 도메인만 허용됩니다.');
    return;
  }

  var formData = { name: name, email: email };
  google.script.run.processFormData(formData);
}

이러한 검증을 통해 사용자의 잘못된 입력을 사전에 방지할 수 있습니다.

위의 기능들을 기존 튜토리얼에 통합하여 구현하면, 웹페이지에서 수집한 데이터를 효율적으로 관리하고, 특정 조건에 따라 알림을 발송하며, 사용자 입력의 정확성을 높일 수 있습니다.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

8.formsApiToAppsScript.md

8.formsApiToAppsScript.md

**실습 8: Google Forms API와 Apps Script를 활용한 웹 데이터 수집 자동화

추가 실습

Files

8.formsApiToAppsScript.md

Latest commit

History

8.formsApiToAppsScript.md

File metadata and controls

**실습 8: Google Forms API와 Apps Script를 활용한 웹 데이터 수집 자동화

추가 실습