구글 앱 스크립트로 구글 스프레드시트 사용하기-3

구글 앱 스크립트로 구글 스프레드시트 사용하기-2

구글 앱 스크립트로 구글 스프레드시트 사용하기-1

안녕하세요. 타임셀러입니다. 2편에서 작성한 코드를 조금더 업그레이드해보았는데요.

이번에 추가한 기능은 웹사이트에서 데이터를 입력받아서 구글 스프레드시트에 저장하고, 그것을 자동으로 웹사이트 표에 추가해주는 내용입니다.

• 구글 스프레드시트에 데이터 추가하기
• 스프레드시트 데이터를 불러오기
• 데이터를 웹사이트에 자동 반영

앱 스크립트를 이용하여 구글 스프레드시트에 데이터 추가

모를때는 역시 chat GPT에게 물어보면서 코드를 짜면 편하더라구요.

최종적인 코드는 아직 멀었지만 현재 유저네임에 입력을 하면 구글 스프레드시트로 데이터가 전송되고, 전송된 데이터가 웹사이트에 실시간으로 반영됩니다.

addComment라는 함수를 생성하고 commentText라는 변수를 빈 변수로 지정합니다.

중간에 getData() 와 contents 를 리셋해줌으로써 데이터를 입력하고나면 폼이 빈칸으로 돌아가게 합니다.

그리고 버튼의 id값을 submit 으로 변경하였고 addEventListener를 통해 클릭하였을 때 addComment에 데이터를 추가하도록 하였습니다.

앱 스크립트에 스프레드시트 데이터를 불러오기

데이터가 구글 스프레드시트에 저장이 되더라고 방문자 입장에서는 계속 새로고침을 할 수 없기 때문에 실시간으로 반영해주는 코드가 필요했습니다.

스크립트 파일에 addComment 기능을 추가하고 insert_time 이라는 변수를 지정하였습니다. 데이터가 추가되는 시간을 알아보기 위해 추가하였고, ws.appendRow에 insertTime 변수를 추가해주면 됩니다.

그럼 이렇게 A열에 시간대가 자동으로 입력되기 때문에 문의내용이나 다른 CS들이 언제 접수되었는지 확인할 수 있을 것 같네요.

앱 스크립트에 스프레드시트 데이터 반영하기

웹사이트를 자동으로 새로고침? 재시작? 해주는 기능을 살펴보니 코드가 실행되면서 데이터가 입력되면 웹사이트의 데이터를 한번 지우고 다시 불러오는 개념으로 동작하는 것 같았습니다.

showmessage() 내부 코드

messageListBox.innerHTML = '';

addComment() 내부 코드

getData();
    document.getElementById("contents").value = '';

show message코드 안에는 ListBox를 초기화 시켜주는 코드가 추가되었고, addComment 내부에는 getData를 초기화하고, contents도 초기화되는 코드가 추가되었어요.

이건 챗 GPT에게 물어봐서 받은 코드인데 데이터가 업데이트된 후 메시지를 다시 불러오도록 getData 함수를 초기화한다고 합니다.

function getDataForDisplay(){

  const ss = SpreadsheetApp.openByUrl(url);
  const ws = ss.getSheetByName("예시");
  return ws.getRange(1,2,ws.getLastRow()-1,1).getValues();
  //Logger.log(data);
}

지난번에 작성한 코드에서 수정해야될 내용이 있었는데 getLastRow()-1 부분에서 계속 데이터를 추가하며 업데이트할 경우 ‘-1’부분을 지워야한다고 합니다.

데이터가 마지막 행에 추가되는데 그 부분을 방해하는 요소인것 같네요.

구글 앱스 스크립트 공식 홈페이지에도 다양한자료들이 있는데 아직 공부할게 많이 남아있네요.

구글 앱 스크립트로 구글 스프레드시트 사용하기-3

copyright@timeseller