티스토리 뷰

안녕하세요


저번 포스팅에서 급식 별점 기능을 공개한 바 있습니다.


[Application] - 학교앱을 새로운 디자인으로 업데이트 했습니다. (feat. 재밌는 기능 추가)

[Application] - 학교앱에 급식 평점 기능을 넣고나서


이번 글에서는 별점기능을 구현하기 앞서 구글 스프레드 시트를 온라인 데이터 베이스로 사용하는 방법을 알아보겠습니다.

이 글은 전에 포스팅한 티스토리 오류제보 기능 만들기와 유사합니다.


[Tistory] - 티스토리 오류 제보하기 버튼 만들기 - 구글 스프레드 시트 사용




1. 구글 스프레드 시트에서 Html Post 요청을 받을 수 있도록 스크립트 편집하기

먼저 구글 스프레드 시트에 접속해주세요

https://docs.google.com/spreadsheets


시트 파일이 하나 필요합니다.

없다면 만들어주세요



그뒤 스프레드 시트를 열어주세요



위 스샷과 같은 화면이 나타날겁니다.

파일의 이름인 "제목 없는 스프레드 시트" 부분은 알아서 바꿔주시면 됩니다.

중요한건 녹색 박스로 표시해둔 "시트1" 부분인데요


오류 제보 기능 만들 때와 달리 지금은 변경해주셔도 됩니다.

시트1 옆의 + 버튼을 눌러 시트를 몇개 추가하셔도 됩니다.



이제 스크립트를 편집해야 합니다.

도구 - 스크립트 편집기에 들어가주세요



스크립트 만들기 - 빈 프로젝트를 선택해줍시다



그럼 아래와 같은 스샷이 나타납니다.



내용을 모두 지워주고 아래 박스의 스크립트를 붙혀넣기 해주세요


var SCRIPT_PROP = PropertiesService.getScriptProperties(); // new property service


// If you don't want to expose either GET or POST methods you can comment out the appropriate function

function doGet(e){

  return handleResponse(e);

}


function doPost(e){

  return handleResponse(e);

}


function handleResponse(e) {

  // shortly after my original solution Google announced the LockService[1]

  // this prevents concurrent access overwritting data

  // [1] http://googleappsdeveloper.blogspot.co.uk/2011/10/concurrency-and-google-apps-script.html

  // we want a public lock, one that locks for all invocations

  var lock = LockService.getPublicLock();

  lock.waitLock(30000);  // wait 30 seconds before conceding defeat.


  try {

    var SHEET_NAME = e.parameter["sheet_name"];


    // next set where we write the data - you could write to multiple/alternate destinations

    var doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));

    var sheet = doc.getSheetByName(SHEET_NAME);


    // we'll assume header is in row 1 but you can override with header_row in GET/POST data

    var headRow = e.parameter.header_row || 1;

    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];

    var nextRow = sheet.getLastRow()+1; // get next row

    var row = [];

    // loop through the header columns

    for (i in headers){

      if (headers[i] == "Timestamp"){ // special case if you include a 'Timestamp' column

        row.push(new Date());

      } else { // else use header name to get data

        row.push(e.parameter[headers[i]]);

      }

    }


    // more efficient to set values as [][] array than individually

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

    // return json success results

    return ContentService

 .createTextOutput(JSON.stringify({"result":"success", "row": nextRow}))

 .setMimeType(ContentService.MimeType.JSON);

  } catch(e){

    // if error return this

    return ContentService

 .createTextOutput(JSON.stringify({"result":"error", "error": e}))

 .setMimeType(ContentService.MimeType.JSON);

  } finally { //release lock

    lock.releaseLock();

  }

}

 

function setup() {

  var doc = SpreadsheetApp.getActiveSpreadsheet();

  SCRIPT_PROP.setProperty("key", doc.getId());

}


기본적인 내용은 오류 제보와 차이가 없지만

위 박스의 코드는 시트 이름을 정의하지 않습니다.


그대신 한가지 차이점이 있다면 html post의 sheet_name을 가져옵니다.

그래서 시트를 많이 만든뒤 각각의 시트에 html post를 따로 넣고 싶다면

sheet_name만 바꿔서 post를 날려주면 됩니다.



프로젝트 이름도 마음대로 수정해주시면 됩니다.


이제 실행 - setup을 눌러주세요



그럼 인증이 필요하다는 메시지가 나타납니다.



계속을 눌러 진행해봅시다.



위 스샷에서도 그냥 허용 눌러주시면 됩니다.


허용하신 다음에 다시한번 실행 - setup을 눌러주세요



이제 이 프로젝트를 게시해야 합니다.


게시 - 웹 앱으로 배포..를 눌러주세요




웹에 엑세스할 수 있는 사용자를 누구나(익명 사용자 포함)으로 바꿔주시고 배포합니다.



프로젝트가 웹 앱으로 배포되면 하나의 url을 얻을 수 있습니다.

이 url을 사용하여 앱에서 html post를 보낼 수 있습니다.




시트의 행 추가하기

HTML POST를 받을 때 시트의 맨 처음 행이 필요합니다.

SQLite로 따지자면 Column의 정보라 할까요?



위 스샷은 공지사항 시트의 일부입니다.

Timestamp는 구글 스프레드 시트상에서 get이나 post 요청을 받을때 서버 시간을 기록하기 위한 열이고

title과 message는 post를 보낼때 데이터 구분값이라 생각하시면 됩니다



좀 말이 애매한데


Intent.putExtra("title", myTitle);

Intent.putExtra("message", myMessage);


이런 식이다 라고 생각하시면 됩니다.



post 요청을 보내기 전, 무엇 무엇이 필요한지 생각해보고 맨 처음 행을 작성하세요




참고

http://itmir.tistory.com/550




+ 2015-12-20

제 학교앱 소스를 가지고 연구하시다 실수로라도 공지사항에 글을 게시할 수 없도록 소스를 보완했습니다.


저작자 표시 비영리 변경 금지
신고
크리에이티브 커먼즈 라이선스
Creative Commons License
댓글
  • Favicon of http://palladin.kro.kr palladin 오!
    감사합니다
    밤새서 시트보는 중이였는데 ㅎㅎ
    작업중인데 갑자기 공지 시트내용이 변하더라구요..
    놀래서 블로그왔더니 ㅎㅎㅎㅎ
    사랑합니다
    2015.12.20 00:07 신고
  • Favicon of http://prolite.tistory.com IT최강자 이렇게 스크립트 를 이용해 데이터베이스 로 사용할 수 있군요.
    좋은 정보 감사합니다.^^
    2015.12.20 00:17 신고
  • @Override 이렇게 만든 데이터베이스를 읽어와서 로그인에 이용할수도 있을까요? 2016.01.16 02:35 신고
  • Favicon of http://itmir.tistory.com Mir(whdghks913) 로그인 기능으로 사용하기엔 보안면에서 매우 비적합합니다 2016.01.16 09:11 신고
  • @Override 회원가입시 비밀번호를 받아와서 SHA-256을 이용해 암호화 해서 올린 뒤
    로그인시 비밀번호의 해시값과 DB의 해시값을 비교해서 매치하면 통과 아니면 재시도로
    하려고 합니다
    2016.01.16 18:12 신고
  • Favicon of http://itmir.tistory.com Mir(whdghks913) 다른 유저의 비밀번호를 파싱하거나 웹에 게시하지 않고 스프레드시트 스크립트 안에서 일치 검사하고 결과를 반환한다면 시도할 순 있겠지만 그래도 보안이 취약할것 같습니다. 2016.01.16 18:20 신고
  • Name 앱에서 스프레드시트에 정보를 추가하거나 가져오는건 어떻게하는지 알 수 있을까요? 2016.01.18 08:44 신고
  • Favicon of http://itmir.tistory.com Mir(whdghks913) 다음 강좌를 올려야하는데 맨날 까먹네요;... 2016.02.07 19:45 신고
  • 안태오 안녕하세요^^
    한가지 궁금한게 있어서 문의 드립니다.
    순차적으로 입력이 되는데요.
    최근 글을 제일 첫번째로 입력되게는 안되나요? ^^;
    글이 많아지면 스크롤로 내리는것도 일일거 같아요
    2016.02.07 17:32 신고
  • Favicon of http://itmir.tistory.com Mir(whdghks913) 스프레드 시트에 올릴때 맨 위에 추가하는 소스가 있는지 모르겠습니다.
    만약 없다면 앱에서 저 리스트를 파싱한다음 역순으로 다시 정렬해주면 될것 같습니다.
    2016.02.07 19:45 신고
  • BlueBada 이 기능 구현하셨을 때, 참고하신 사이트가 있나요? 스프레드시트 데이터베이스화하는 걸 자세히 알고 싶은데요... 2016.02.22 19:58 신고
  • Favicon of http://alfen.tistory.com 라크알펜 안녕하세요 미르님! 항상 강좌글 잘보고있습니다:)
    다름이 아니라 질문이 있는데요, 오픈소스로 별점기능을 동일하게 구현하기위해 미르님이랑 스프레드시트를 동일한 구조로 만들어서 해보았는데 맞게한건지, 아니면 무언가가 빠진부분이 있는건지를 모르겠네요...(p.s 스크립트는 이 글에서 말씀하신대로 했습니다. 별점주기까지는 되지만 별점 확인에서 팅기더라고요...)
    2016.03.04 10:37 신고
  • 스프레드시트 이것으로 앱 제작하는부분을 자세히 알고 싶습니다.
    깃허브만보고는 도저히 구현이 힘들어서..
    2016.03.09 22:17 신고
  • Favicon of http://itmir.tistory.com Mir(whdghks913) 구글 시트를 이용한 강좌를 빠르면 돌아오는 일요일, 늦어도 3월안에 작성하겠습니다.
    제가 고3이라 시간이 부족합니다..
    2016.03.09 22:19 신고
  • 스크립트 공지사항 보내고 쌓이는 부분도 자세히 알려주시면 안될까요..
    2016.03.09 22:33 신고
  • Favicon of http://itmir.tistory.com Mir(whdghks913) 공지사항(=급식 별점)을 보내는건 앱 소스에서 몇 줄 없습니다. 간단합니다.
    쌓이는건 전송된 메세지를 받으면 시트에 자동으로 쌓이게 됩니다.
    어려운게 데이터를 가져오는건데 저는 따로 html을 파싱해서 가져온뒤, db로 저장합니다. 이 db를 다시 불러와야 정보 로딩이 완료됩니다.
    2016.03.09 22:36 신고
  • jounggu 질문이 있습니다.
    소스를 구경하던중 스프레드 시트 링크마다 주소가 다르더군요
    혹시 시간되시면 하나의 스프레드시트에서 시트마다 링크를 따로 볼수있는 방법좀알려주실수 있나요?
    2016.03.10 20:40 신고
  • 구글 혹시 데이터 가져오는부분을 자세히 설명하실 의향이 있으신가요..
    구현하고싶습니다..
    2016.03.10 22:39 신고
  • 알파고 혹시 참고하신 사이트 있나요...
    만들고 싶은디.. 강좌가 늦네용..
    2016.03.13 20:35 신고
  • Junho 올리셨던 학교 앱처럼 구글 스프레드 시트에서 데이터를 파싱해서 리스트 뷰에 뿌리는걸 하고싶은데
    강좌를올려주실수있나요? 현재는 감이 안잡혀서
    웹뷰로 대체했는데 디자인적으로 예쁘게 구현 하고 싶어서 ..ㅎ 안되면 힌트라도..
    2016.03.26 19:16 신고
댓글쓰기 폼