체리피커 내역 전달

문제

내 카드를 쓰고 있는 가족(A라고 하자)에게도 카드 사용 내역을 알려주고 싶다. SMS 이용 내역을 받을 전화번호는 바꿀 수 없는 상황(NH카드는 카드별로 바꿀 수 있는 것 같은데, 하나카드는 안 되는 듯).

해결에 도움이 될 것 같은 전제:

1. 나는 어차피 체리피커를 쓰고 있다.
2. 체리피커는 기능에 따라 내 구글 드라이브 특정 폴더에 매일 DB를 백업한다(.db 파일, SQLite 포맷).

아이디어 1:

1. 내 구글 드라이브에 새 .db 파일이 올라오면 나는 자동으로 생성된 어떤 링크를 A에게 메일로 보낸다. 이 과정 전체가 IFTTT 같은 걸로 가능하지 않나?
2. A는 매일 메일을 열고 링크를 클릭하면 SPA를 통해 자신의 당일 사용 내역을 볼 수 있음.
3. 그 SPA는 쿼리스트링으로 .db 파일 링크(구글 드라이브 링크)와 SQL 쿼리를 받아서 sql.js로 읽어서 HTML로 보여주는 역할을 한다. 프로그래밍적으로 쿼리스트링 생성하는 것도 IFTTT로 되지 않나...? 안 되나??

음... 이건 좀 IFTTT에 기대는 게 많다. 사실 구글 시트(웹 보기 기능)로 보여주면 더 편할 텐데 GAS에서 sql.js 로딩이 안 되는 걸 확인해서 어차피 SPA를 만들긴 해야 하는 상황이다. 그렇다면 IFTTT 같은 걸 쓸 필요도 아예 없지 않을까.

그래서 아이디어 2:

1. SPA를 이렇게 만들어보자. 구글 로그인 후 버튼을 누르면 내 구글 드라이브 특정 폴더에서 가장 최신 .db 파일 찾는다(GAPI). 물론 내가 사전에 그 폴더를 공유한 사람(즉 A)만 접근할 수 있겠지.
2. 그걸 sql.js 써서 읽어 메모리에 DB를 생성하고 나만의 SQL 쿼리를 적용한 결과만 HTML로 보여줌.

일단 뭐 될 거는 같은데, 구현이 매우 귀찮다...

큰 틀을 짜보자

• html
  • 구글 로그인/로그아웃 버튼(및 스크립트)
  • 출력 결과 보여줄 div
    • 로그
    • 파일의 날짜
    • 파일의 내용
• js
  1. 로그인한 유저의 드라이브에서
  2. 특정 폴더에서 가장 최신 파일 찾음
  3. (그 파일이 html div에 있는 날짜와 동일하다면 끝. 그냥 버튼을 비활성화하면 되겠다)
  4. 파일 로딩(sql)
  5. 로딩한 결과에 쿼리를 적용하고
  6. 테이블 형식의 데이터로 (만들어)
  7. html의 div에 보여주고
  8. 로그 찍고
  9. 버튼 비활성화하고 끝

하루 날 잡고...

만들었다.
https://github.com/anemochore/cherrypicker-relay/

위에 쓴 아이디어랑 안 맞는 게 많다. 생각보다 난관이 많았다...

1. 구글 원탭 로그인이란 게 생겨서 적용해보려고 했는데 기존 gapi 흐름이랑 많이 달라서 그냥 포기했다.
2. gapi로 읽은 파일을 sql.js로 불러오는 게 그냥 되지가 않는다. 원시적으로 Uint8Array로 바꿔줘야 함.
3. 테이블 예쁘게 만들고 싶은데 배보다 배꼽이 커지는 것 같아서 대충 어딘가에서 css만 가져왔다.