GUIDES

GUIDES

GUIDES

설문 폼 웹훅 가이드라인

설문 폼 웹훅 가이드라인

설문 폼 웹훅 가이드라인

August 31, 2023

August 31, 2023

August 31, 2023

기존 app.walla.my 에서는 아직 기능을 제공하고 있지 않습니다. 
오픈베타인 app.wallaform.com 이용하셔야 하는 유의하여 주시기 바랍니다

  1. 구글 시트 생성

1-a. 새로 만드는 경우

Google Drive에 접속하여 새로운 구글 시트를 생성

1-b. 왈라에 이미 구글시트를 연동해서 사용하고 있으나, 내보내기 후 연동하는 경우

이미 사용 중인 구글 시트를 선택하여 사본 만들기

사본이 만들어졌다면, 사본에서부터 2 작업 수행

기존 구성되었던 구글 시트를 삭제하고 싶다면,

구글 시트 연동 우측에 있는 토글 클릭

구글 시트 삭제 매시지와 함께 토글이 OFF로 설정된 것 확인


  1. Google Apps Script 설정

  1. 구글 시트에서 상단 메뉴 "확장 프로그램" > "Apps Script"을 선택합니다.

  1. 나타나는 코드 편집기에서 기존 코드를 삭제하고, 아래의 코드를 붙여넣습니다.

function doPost(e) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheets()[0];
  ss.setSpreadsheetTimeZone('Asia/Seoul');
  // Parsing the POST data to get the required data
  var data = JSON.parse(e.postData.contents);
  
  var formAnswers = data.form_answers;
  var submittedAt = new Date(data.form_response.submitted_at);

  var responseId = data.form_response.response_id.slice(0,10);
  // First row: labels
  if (sheet.getLastRow() === 0) {
    var fieldLabels = formAnswers.map(function(answer) {
      if (answer.type === 'RADIO_GRID' || answer.type === 'CHECKBOX_GRID') {
        return answer.response.map(el => `${answer.label} - ${el.lineLabel}`);
      }
      return answer.label
    }).flat();
    var headers = ['Response ID', 'Time Submitted', ...fieldLabels]
    sheet.appendRow(headers);
  } 
   var rowData = formAnswers.map(field => {
      switch (field.type) {
        case 'CHECKBOX':
        case 'RADIO': {
          var isResponseArray = Array.isArray(field.response);
          if (isResponseArray) {
            return field.response.filter(el => Boolean(el)).join(', ');
          }
          return field.response || '';
        }
        case 'CHECKBOX_GRID':
        case 'RADIO_GRID': {
          var isLineResponseArray = Array.isArray(field.response.lineResponse)
          return field.response.map(el => {
            if (isLineResponseArray) {
              return el.lineResponse.filter(el => Boolean(el)).join(', ');
            }
            return el.lineResponse || '';
          })
        }
        case 'GEOLOCATION': {
          var response = field.response || {};
          var responseArray = Object.entries(response).map(el => `${el[0]}: ${el[1]}`);
          return responseArray.join(', ');
        }
        case 'HIDDEN': {
          return field.response === undefined || field.response === null
            ? ''
            : field.response;
        }
        default: {
          var response =
            field.response === undefined || field.response === null ? '' : field.response;
          if (Array.isArray(response)) {
            return response.join(', ');
          }
          return response;
        }
      }
    }).flat();
  sheet.appendRow([responseId, submittedAt, ...rowData]);
  return ContentService.createTextOutput(JSON.stringify({result: "success"})).setMimeType(ContentService.MimeType.JSON);
}
  1. 웹 앱으로 배포

1.코드 편집기 상단 메뉴에서 "배포" > "새배포"를 선택합니다.

2.설정 버튼을 누른 뒤, "웹 앱"을 선택합니다.

3.이름(예시: test1)을 자유롭게 지어주시고, 액세스 권한이 있는 사용자는 꼭 ‘모두’ 로 설정해주시기 바랍니다.

🤨 액세스 권한… 모두라구요…?
🙂 해당 코드에는 원본데이터를 읽거나 내보내는 코드가 포함되어있지 않습니다.
왈라와 Typeform의 웹훅 요청에 맞게, 데이터를 구글 시트에 쓰는 작업 만을 포함합니다.

따라서, 해당 웹앱의 주소가 노출되더라도, 데이터가 유출될 걱정은 없으며,
만약 노출된다면 새로운 배포를 통해 새로운 주소를 받으실 있습니다

4.마지막으로 배포를 클릭하면 "액세스 승인" 버튼 등장

5. 클릭하여 액세스 승인을 진행

6.구글 시트를 만든 본인의 계정을 클릭하여 진행

7.왼쪽 하단의 'advanced' 클릭하여 하단의 unsafe 버전으로 진행

  1. 웹 앱의 URL 복사

배포 후 나타나는 웹 앱 URL을 복사합니다.

  1. 왈라폼 (Webhook)에 연동

  1. 왈라폼 페이지에 접속하고, 연동하려는 프로젝트를 선택합니다.

  2. [연동하기] 페이지에서 새 웹훅 추가 버튼 클릭

  1. 이름은 자유롭게 작성 후, 아까 복사한 웹 앱의 URL을 붙여넣기

  1. 현재 웹훅은 테스트요청을 제공하지 않기에 웹훅 저장 후 연동으로 돌아갑니다.

테스트 및 확인

왈라폼에서 해당 프로젝트의 응답을 제출해보면, 웹훅을 통해 데이터가 구글 시트로 전송되는 것을 확인할 수 있습니다.

기존 app.walla.my 에서는 아직 기능을 제공하고 있지 않습니다. 
오픈베타인 app.wallaform.com 이용하셔야 하는 유의하여 주시기 바랍니다

  1. 구글 시트 생성

1-a. 새로 만드는 경우

Google Drive에 접속하여 새로운 구글 시트를 생성

1-b. 왈라에 이미 구글시트를 연동해서 사용하고 있으나, 내보내기 후 연동하는 경우

이미 사용 중인 구글 시트를 선택하여 사본 만들기

사본이 만들어졌다면, 사본에서부터 2 작업 수행

기존 구성되었던 구글 시트를 삭제하고 싶다면,

구글 시트 연동 우측에 있는 토글 클릭

구글 시트 삭제 매시지와 함께 토글이 OFF로 설정된 것 확인


  1. Google Apps Script 설정

  1. 구글 시트에서 상단 메뉴 "확장 프로그램" > "Apps Script"을 선택합니다.

  1. 나타나는 코드 편집기에서 기존 코드를 삭제하고, 아래의 코드를 붙여넣습니다.

function doPost(e) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheets()[0];
  ss.setSpreadsheetTimeZone('Asia/Seoul');
  // Parsing the POST data to get the required data
  var data = JSON.parse(e.postData.contents);
  
  var formAnswers = data.form_answers;
  var submittedAt = new Date(data.form_response.submitted_at);

  var responseId = data.form_response.response_id.slice(0,10);
  // First row: labels
  if (sheet.getLastRow() === 0) {
    var fieldLabels = formAnswers.map(function(answer) {
      if (answer.type === 'RADIO_GRID' || answer.type === 'CHECKBOX_GRID') {
        return answer.response.map(el => `${answer.label} - ${el.lineLabel}`);
      }
      return answer.label
    }).flat();
    var headers = ['Response ID', 'Time Submitted', ...fieldLabels]
    sheet.appendRow(headers);
  } 
   var rowData = formAnswers.map(field => {
      switch (field.type) {
        case 'CHECKBOX':
        case 'RADIO': {
          var isResponseArray = Array.isArray(field.response);
          if (isResponseArray) {
            return field.response.filter(el => Boolean(el)).join(', ');
          }
          return field.response || '';
        }
        case 'CHECKBOX_GRID':
        case 'RADIO_GRID': {
          var isLineResponseArray = Array.isArray(field.response.lineResponse)
          return field.response.map(el => {
            if (isLineResponseArray) {
              return el.lineResponse.filter(el => Boolean(el)).join(', ');
            }
            return el.lineResponse || '';
          })
        }
        case 'GEOLOCATION': {
          var response = field.response || {};
          var responseArray = Object.entries(response).map(el => `${el[0]}: ${el[1]}`);
          return responseArray.join(', ');
        }
        case 'HIDDEN': {
          return field.response === undefined || field.response === null
            ? ''
            : field.response;
        }
        default: {
          var response =
            field.response === undefined || field.response === null ? '' : field.response;
          if (Array.isArray(response)) {
            return response.join(', ');
          }
          return response;
        }
      }
    }).flat();
  sheet.appendRow([responseId, submittedAt, ...rowData]);
  return ContentService.createTextOutput(JSON.stringify({result: "success"})).setMimeType(ContentService.MimeType.JSON);
}
  1. 웹 앱으로 배포

1.코드 편집기 상단 메뉴에서 "배포" > "새배포"를 선택합니다.

2.설정 버튼을 누른 뒤, "웹 앱"을 선택합니다.

3.이름(예시: test1)을 자유롭게 지어주시고, 액세스 권한이 있는 사용자는 꼭 ‘모두’ 로 설정해주시기 바랍니다.

🤨 액세스 권한… 모두라구요…?
🙂 해당 코드에는 원본데이터를 읽거나 내보내는 코드가 포함되어있지 않습니다.
왈라와 Typeform의 웹훅 요청에 맞게, 데이터를 구글 시트에 쓰는 작업 만을 포함합니다.

따라서, 해당 웹앱의 주소가 노출되더라도, 데이터가 유출될 걱정은 없으며,
만약 노출된다면 새로운 배포를 통해 새로운 주소를 받으실 있습니다

4.마지막으로 배포를 클릭하면 "액세스 승인" 버튼 등장

5. 클릭하여 액세스 승인을 진행

6.구글 시트를 만든 본인의 계정을 클릭하여 진행

7.왼쪽 하단의 'advanced' 클릭하여 하단의 unsafe 버전으로 진행

  1. 웹 앱의 URL 복사

배포 후 나타나는 웹 앱 URL을 복사합니다.

  1. 왈라폼 (Webhook)에 연동

  1. 왈라폼 페이지에 접속하고, 연동하려는 프로젝트를 선택합니다.

  2. [연동하기] 페이지에서 새 웹훅 추가 버튼 클릭

  1. 이름은 자유롭게 작성 후, 아까 복사한 웹 앱의 URL을 붙여넣기

  1. 현재 웹훅은 테스트요청을 제공하지 않기에 웹훅 저장 후 연동으로 돌아갑니다.

테스트 및 확인

왈라폼에서 해당 프로젝트의 응답을 제출해보면, 웹훅을 통해 데이터가 구글 시트로 전송되는 것을 확인할 수 있습니다.

기존 app.walla.my 에서는 아직 기능을 제공하고 있지 않습니다. 
오픈베타인 app.wallaform.com 이용하셔야 하는 유의하여 주시기 바랍니다

  1. 구글 시트 생성

1-a. 새로 만드는 경우

Google Drive에 접속하여 새로운 구글 시트를 생성

1-b. 왈라에 이미 구글시트를 연동해서 사용하고 있으나, 내보내기 후 연동하는 경우

이미 사용 중인 구글 시트를 선택하여 사본 만들기

사본이 만들어졌다면, 사본에서부터 2 작업 수행

기존 구성되었던 구글 시트를 삭제하고 싶다면,

구글 시트 연동 우측에 있는 토글 클릭

구글 시트 삭제 매시지와 함께 토글이 OFF로 설정된 것 확인


  1. Google Apps Script 설정

  1. 구글 시트에서 상단 메뉴 "확장 프로그램" > "Apps Script"을 선택합니다.

  1. 나타나는 코드 편집기에서 기존 코드를 삭제하고, 아래의 코드를 붙여넣습니다.

function doPost(e) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheets()[0];
  ss.setSpreadsheetTimeZone('Asia/Seoul');
  // Parsing the POST data to get the required data
  var data = JSON.parse(e.postData.contents);
  
  var formAnswers = data.form_answers;
  var submittedAt = new Date(data.form_response.submitted_at);

  var responseId = data.form_response.response_id.slice(0,10);
  // First row: labels
  if (sheet.getLastRow() === 0) {
    var fieldLabels = formAnswers.map(function(answer) {
      if (answer.type === 'RADIO_GRID' || answer.type === 'CHECKBOX_GRID') {
        return answer.response.map(el => `${answer.label} - ${el.lineLabel}`);
      }
      return answer.label
    }).flat();
    var headers = ['Response ID', 'Time Submitted', ...fieldLabels]
    sheet.appendRow(headers);
  } 
   var rowData = formAnswers.map(field => {
      switch (field.type) {
        case 'CHECKBOX':
        case 'RADIO': {
          var isResponseArray = Array.isArray(field.response);
          if (isResponseArray) {
            return field.response.filter(el => Boolean(el)).join(', ');
          }
          return field.response || '';
        }
        case 'CHECKBOX_GRID':
        case 'RADIO_GRID': {
          var isLineResponseArray = Array.isArray(field.response.lineResponse)
          return field.response.map(el => {
            if (isLineResponseArray) {
              return el.lineResponse.filter(el => Boolean(el)).join(', ');
            }
            return el.lineResponse || '';
          })
        }
        case 'GEOLOCATION': {
          var response = field.response || {};
          var responseArray = Object.entries(response).map(el => `${el[0]}: ${el[1]}`);
          return responseArray.join(', ');
        }
        case 'HIDDEN': {
          return field.response === undefined || field.response === null
            ? ''
            : field.response;
        }
        default: {
          var response =
            field.response === undefined || field.response === null ? '' : field.response;
          if (Array.isArray(response)) {
            return response.join(', ');
          }
          return response;
        }
      }
    }).flat();
  sheet.appendRow([responseId, submittedAt, ...rowData]);
  return ContentService.createTextOutput(JSON.stringify({result: "success"})).setMimeType(ContentService.MimeType.JSON);
}
  1. 웹 앱으로 배포

1.코드 편집기 상단 메뉴에서 "배포" > "새배포"를 선택합니다.

2.설정 버튼을 누른 뒤, "웹 앱"을 선택합니다.

3.이름(예시: test1)을 자유롭게 지어주시고, 액세스 권한이 있는 사용자는 꼭 ‘모두’ 로 설정해주시기 바랍니다.

🤨 액세스 권한… 모두라구요…?
🙂 해당 코드에는 원본데이터를 읽거나 내보내는 코드가 포함되어있지 않습니다.
왈라와 Typeform의 웹훅 요청에 맞게, 데이터를 구글 시트에 쓰는 작업 만을 포함합니다.

따라서, 해당 웹앱의 주소가 노출되더라도, 데이터가 유출될 걱정은 없으며,
만약 노출된다면 새로운 배포를 통해 새로운 주소를 받으실 있습니다

4.마지막으로 배포를 클릭하면 "액세스 승인" 버튼 등장

5. 클릭하여 액세스 승인을 진행

6.구글 시트를 만든 본인의 계정을 클릭하여 진행

7.왼쪽 하단의 'advanced' 클릭하여 하단의 unsafe 버전으로 진행

  1. 웹 앱의 URL 복사

배포 후 나타나는 웹 앱 URL을 복사합니다.

  1. 왈라폼 (Webhook)에 연동

  1. 왈라폼 페이지에 접속하고, 연동하려는 프로젝트를 선택합니다.

  2. [연동하기] 페이지에서 새 웹훅 추가 버튼 클릭

  1. 이름은 자유롭게 작성 후, 아까 복사한 웹 앱의 URL을 붙여넣기

  1. 현재 웹훅은 테스트요청을 제공하지 않기에 웹훅 저장 후 연동으로 돌아갑니다.

테스트 및 확인

왈라폼에서 해당 프로젝트의 응답을 제출해보면, 웹훅을 통해 데이터가 구글 시트로 전송되는 것을 확인할 수 있습니다.

Continue Reading

Continue Reading

Continue Reading