본문 바로가기

JavaScript

구글 스프레드시트 API 활용하기 : INSERT

지난 포스트에 이어 구글 스프레드시트에 동적으로 데이터를 삽입해 보겠습니다. 

먼저 스프레드시트 하나를 준비해 주세요. 저는 지난 포스팅에 썼던 시트를 쓰겠습니다.

스크립트 작성, 배포

시트가 준비되셨다면, 메뉴에서 도구-스크립트 편집기로 이동합니다. 

 

그리고 스크립트에 아래 코드를 붙여넣으세요!

//var SHEET_NAME = "시트1";
var SCRIPT_PROP = PropertiesService.getScriptProperties(); 

function doGet(e){
  return handleResponse(e);
}

function doPost(e){
  return handleResponse(e);
}
 
function handleResponse(e) {
  var lock = LockService.getPublicLock();
  lock.waitLock(30000);  

  try {
    var doc = SpreadsheetApp.getActiveSpreadsheet();
    
    //시트이름으로 선택하고자 할 때
    //var sheet = doc.getSheetByName(SHEET_NAME);
    var sheet = doc.getSheets()[0];
     
    var headRow = e.parameter.header_row || 1;
    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
    var nextRow = sheet.getLastRow()+1; 
    var row = [];

    for (i in headers){
      if (headers[i] == "Timestamp"){ 
        row.push(new Date());
      } else { 
        row.push(e.parameter[headers[i]]);
      }
    }

    sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);

    return ContentService
          .createTextOutput(JSON.stringify({"result":"success", "row": nextRow}))
          .setMimeType(ContentService.MimeType.JSON);
  } catch(e){
    return ContentService
          .createTextOutput(JSON.stringify({"result":"error", "error": e}))
          .setMimeType(ContentService.MimeType.JSON);
  } finally { 
    lock.releaseLock();
  }

}

function setup() {
    var doc = SpreadsheetApp.getActiveSpreadsheet();
    SCRIPT_PROP.setProperty("key", doc.getId());
}

시트를 여러개 갖고 계시다면, 데이터를 넣을 시트가 몇 번째인지 기억하시고 doc.getSheets()[0] 부분의 숫자를 변경하세요. 인덱스는 0부터 시작합니다. 

 

혹은 시트의 이름으로 선택하려면 주석처리된 부분을 제거하시고 

var sheet = doc.getSheets()[0]; 부분을 주석처리하세요.

 

코드를 붙여넣으셨으면, Ctrl+S 를 눌러 저장합니다. 

 

저장이 되었으면 메뉴의 게시-웹 앱으로 배포... 로 들어갑니다. 

 

아래와 같은 창이 하나 뜨는데요, 앱을 실행할 사용자는 '나' 로,

웹에 액세스할 수 있는 사용자는 '누구나(익명 사용자 포함)'으로 지정하시고 배포합니다.

*주의 : 해당 시트의 소유자만 배포할 수 있으므로 소유권한이 없다면 이양받아야 합니다. 

 

첫 배포라면 아래와 같이 권한검토를 요청합니다. 우리의 스크립트가 인증되어 있지 않기 때문입니다. 

 

고급을 눌러 저장명(으)로 이동(안전하지 않음)을 선택하면 됩니다. 

 

그럼 배포가 완료되는데, 아래 URL을 복사해 두세요. 

JavaScript

이제 자바스크립트 코드를 작성하면 되는데 정말로 간단합니다. 

이미 스프레드시트 스크립트에 핵심코드를 작성했기 때문입니다. 

$.ajax({
  type: "GET",
  url: "복사해둔 URL",
  data: {
    "컬럼명1": "넣을 데이터",
    "컬럼명2": "넣을 데이터",
    "컬럼명3": "넣을 데이터"
  },
  success: function(response){
   	alert('입력 완료.');
  }
});

스프레드시트 스크립트에 GET 방식과 POST 방식 모두 동일하게 작동하도록 작성했으나 GET 방식을 쓴 이유는

간혹 POST요청시 에러가 나기 때문입니다ㅜ.ㅜ 권한문제는 아닌데, 일부 브라우저의 문제인지 아무튼 stackoverflow에서 속편하게 GET을 사용하라는 글을 보고 GET만 쓰고 있습니다. 

확인

코드를 작성하고 테스트하면, 입력 즉시 스프레드시트에 데이터가 반영되는 것을 확인하실 수 있습니다. 

 

아래 JSFiddle에 코드를 작성해 놓았습니다. 직접 입력해 보시고 예제 시트에 잘 들어갔는지 확인해 보세요.