스프레드시트 스크립트편집기를 이용하여 데이터 받아오기 - follow(3)

본 게시물에서 다음 사항들은 건너뛰도록 하겠다.

- firebase를 이용한 호스팅, 서버 열기

- html, css 코드에 대한 설명

 

위 내용들은 검색해 보면 정말 많이 나온다! 그래서 패스한다.

 

follow-dee50.web.app

Follow

전 포스팅에 올렸던 해당 프로젝트 링크이다.

 

들어가보면 알 수 있겠지만 다음과 같은 로그인 창을 구현해 놓았다.

 

 

해당 로그인 기능은 실제로 쓰이는 로그인과는 거리가 멀다.

그저 사용자를 구별하기 위한 용도로 만들어진 기능이다. 따라서 보안적인 문제점이 매우 많고, 실제 로그인을 구현하는 것과는 거리가 멀다. 하지만 본 기능은 다음과 같은 점에서 살펴볼 가치가 있다.

 

- 스프레드시트에 접근하여 데이터값을 받아옴.

- 받아온 값을 스크립트를 활용하여 처리함.

 

해당 기능은 가장 기본적인 '스크립트를 이용한 데이터 받아오기' 기능을 포함하고 있다.

 

코드를 통해 일련의 과정을 따라가보자.

 

먼저 사이트 내부의 로그인 과정을 담당하는 함수 코드이다.

 

 

      function login(){
 
        $("#loading").show();
        name = $('#name').val();
        password = $('#pwd').val();
        //get을 이용하여 구글 스프레드 시트의 명단에서 이름을 가져와 비교하여 명단에 입력한 이름이 존재하면 로그인
        $.get("https://script.google.com/macros/s/자신의 웹으로 배포한 사이트 _/exec?action=getItems", {
            action : "getItems"
          }).done(function(data){
            var check = 0;
            for (var i=0; i<data.items.length;i++){
              if(name==data.items[i].name&&password==data.items[i].birth){
                console.log("name : "+data.items[i].name);
                break;
                }
                check++;
              }
              if(check==data.items.length){
                alert("로그인 실패");
              }
              else{
                if(data.items[i].job!=job)
                {
                  //리더가 아니라 코디로 로그인을 했을 경우
                  bool=2;
                  codyname="b";
                  $("#logout").show();
                  $("#choiceview_notleader").show();
                  $("#loginview").hide();
                }
                else
                {
                  //리더로 로그인 한 경우
                  $("#logout").show();
                  //selfcheck(name);
                  $("#choiceview").show();
                  $("#loginview").hide();
                }
              }
              $("#loading").hide();
          }).fail(function(data){
            console.log("Fail to load\nError code: "+ data);
          });
      }

 

해당 코드를 위에서부터 줄글로 설명하겠다.

먼저 사용자로부터 이름과 비밀번호를 입력받는다.

그 후 스프레드시트로 접근하여 데이터를 받아온다.

받아온 데이터 중 이름과 비밀번호가 일치하면 다음 화면으로 이동시켜준다.

 

중요한것은 스프레드시트에 접근하는 방법이다.

 

 

        $.get("스크립트 웹배포 url", {
            action : "getItems"
          }).done(function(data){
            //성공시 들어갈 코드
          }).fail(function(data){
            //실패시 들어갈 코드
          });

이것이 핵심이다.

해당 함수를 통해 스크립트에 접근 할 수 있다.

 

그렇다면 스크립트 웹 배포 url은 어디서 얻어와야 할까?

 

먼저 사용할 스프레드시트 파일을 연다.

 

 

개인정보 보호를 위해 이름이 공개되지 않도록 캡처하였다.

자신이 사용하고 싶은 파일에 들어갔다면 상단의 도구 -> 스크립트편집기를 클릭한다.

 

 

이제 스프레드시트에 대한 스크립트를 편집할 수 있는 창이 떴다.

 

 

이제 이 창에서 코드를 입력하면 해당 코드를 통해 스프레드시트에 접근할 수 있게 된다.

 

그렇다면 프로젝트 follow에서 사용자 정보를 불러오기 위해 사용한 스크립트 코드를 살펴보자.

 

 

var ss = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/사용할스프레드시트주소/edit");
 
var sheet = ss.getSheetByName('info'); // be very careful ... it is the sheet name .. so it should match 
 
 
function doGet(e){
 
var action = e.parameter.action;
 
  if(action == 'getItems'){
    return getItems(e);
  }
}
 
 
 
 
 
function getItems(e){
  
  var records={};
 
  var rows = sheet.getRange(2, 1, sheet.getLastRow() - 1,sheet.getLastColumn()).getValues();
      data = [];
 
  for (var r = 0, l = rows.length; r < l; r++) {
    var row     = rows[r],
        record  = {};
    record['name'] = row[0];
    record['birth']=row[1];
    record['job']=row[2];
 
    
    data.push(record);
    
   }
  records.items = data;
  var result=JSON.stringify(records);
  return ContentService.createTextOutput(result).setMimeType(ContentService.MimeType.JSON);
}

코드가 주어지면 자신이 원하는 대로 사용하는 것은 사용자의 몫이다!

기본적인 설명을 해보도록 하겠다.

 

우선 가장 상단에

var ss = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/사용할스프레드시트주소/edit");

이 줄은 무조건적으로 필요한 줄이다. 해당 url에 자신이 사용하고자 하는 스프레드시트의 주소를 넣으면 된다.

 

그 밑 줄에서

 

var sheet = ss.getSheetByName('info'); // be very careful ... it is the sheet name .. so it should match 

info는 필자가 사용한 스프레드시트의 시트 이름이다. 스크롤을 올려 위쪽 사진을 보면 시트 이름이 info인것을 확인할 수 있다. 자신이 사용하는 시트 이름과 동일하게 작성하면 될 것이다.

 

function doGet(e){

 

var action = e.parameter.action;

 

  if(action == 'getItems'){

    return getItems(e);

  }

}

 

해당 함수는 $.get() 함수를 통해 링크에 접근했을 때 실행된다.

위에서 살펴본 웹페이지 코드를 다시보면 

 

        $.get("스크립트 웹배포 url", {

            action : "getItems"

          }).done(function(data){

            //성공시 들어갈 코드

          }).fail(function(data){

            //실패시 들어갈 코드

          });

 

action : "getItems"로 되어있다. 이 액션이 e.parameter으로 넘어와 스크립트 파일에서 사용된다. 현재 코드에는 따로 넘기는 사항이 더 없기 때문에 자세한 활용법은 나중에 작성하도록 하겠다.

 

 

다음 코드를 보자

 

function getItems(e){

  

  var records={};

 

  var rows = sheet.getRange(2, 1, sheet.getLastRow() - 1,sheet.getLastColumn()).getValues();

      data = [];

 

  for (var r = 0, l = rows.length; r < l; r++) {

    var row     = rows[r],

        record  = {};

    record['name'] = row[0];

    record['birth']=row[1];

    record['job']=row[2];

 

    

    data.push(record);

    

   }

  records.items = data;

  var result=JSON.stringify(records);

  return ContentService.createTextOutput(result).setMimeType(ContentService.MimeType.JSON);

}

 

해당 코드를 통해 우리는 데이터를 꺼내온다.

sheet.getRange()등의 메소드에 대한 자세한 사항은 https://developers.google.com/apps-script/ 다음 사이트를 참고하자.

 

중요한 것은 name과 birth(비밀번호를 생일로 하려 했다. 즉 생일이 password에 매칭된다.), 그리고 job이라는 이름으로 row를 넘기는 과정이다.

해당 코드를 통해 데이터는 result라는 변수에 담겨져 JSON형식으로 return된다.

 

스크립트 코드를 모두 작성하였으면 해당 스크립트 코드를 실행시킬 수 있는 url을 얻어야 한다.

 

게시 -> 웹앱으로 배포 를 클릭하자.

 

저장도 하고 할 것 다 하면 배포할 수 있는 창이 뜬다.

상단의 URL을 복사 한 뒤 업데이트 버튼을 눌러 웹앱으로 배포를 하자!

 

이제 저 URL을 우리의 웹사이트 코드 내부에 넣어주면 된다.

 

 $.get("스크립트 웹배포 url", {

            action : "getItems"

          }).done(function(data){

            //성공시 들어갈 코드

          }).fail(function(data){

            //실패시 들어갈 코드

          });

 

저 스크립트 웹배포 url의 정체가 바로 그것이다.

 

프로그램의 동작 순서는 다음과 같다.

$.get() -> 스크립트파일 내부 함수 실행 -> return 값이 .done(function(data){}) 로 들어감.

 

 

리턴값을 받아 사용하는 방법은 아래의 예시 코드를 주목하면 된다.

for (var i=0; i<data.items.length;i++){

              if(name==data.items[i].name&&password==data.items[i].birth){

                console.log("name : "+data.items[i].name);

                break;

                }

 

결국 값은 data.items[0].name 과 같이 참조할 수 있다.

 

값을 얻어온 뒤 사용하는 것은 각자 원하는 대로 하면 될 것이다.