Web 새로고침 + 색인식 매크로 짜보기(1)

코딩은 기초적인 Python / C / C++ 정도만 코드를 보고 이해하고, 어느 정도 구현할 줄 안다.

 

근데 삿포로 여행가려고 계획을 짜던 중, 니카 요이치 위스키 증류소 무료투어가 있다는 것을 알게 되었는데, Web site에서 선착순으로 신청을 받아 내가 이미 알아차렸을 땐, 늦었었다.

 

https://distillery.nikka.com/eng/yoichi/reservation

https://distillery.nikka.com/eng/yoichi/reservation

Web 사이트에서 새로고침을 하다보면 그래도 빈자리가 가끔씩 뜨는데, 내가 원하는 날짜가 아니라 계속 바보처럼 멍하니 새로고침하면서 날짜를 체크해야 했다.

 

그래도 명색이 코딩을 배운 사람인데, 이렇게 단순한 건 코딩으로 해결해야 하는 거 아니냐며.. 매크로를 만들어 보려 했지만 생전 본 적도 없는 Java 코딩이 필요한 것이었다 ㅎㅎ;;

 

어차피 요즘은 LLM 시대라, 無에서 有를 창조하는 코딩을 혼자서 하는 사람이 있긴 한가~~?

 

그리하여 Java 문외한도 GPT와 함께라면 원하는 Web코딩을 할 수 있다는 것을 체험해보려고 GPT를 갈궈보기 시작한다.

 

내가 원하는 Task는 간단하다.

 

위 Calender에서 하얀색 배경화면이 Available한 날짜인데, 그것을 클릭하고 나면 이것 저것 예약을 위해 입력해야할 정보가 많아서 나는 일단 새로고침 하면서 내가 원하는 날짜에 흰색 배경화면이 뜨는 지를 Tracking하려고 한다.

 

정리해보자면, 매우 간단하다.

1. 주기적으로 새로고침을 하다가 내가 원하는 날짜에 배경화면이 하얀색으로 변하는 순간을 인식한다. 2. 인식하면 나에게 Slack을 통해 DM으로 알림을 준다. 3. 이 모든 것을 Chrome 확장프로그램 Macro로 만든다.

 

manifest.json

0.00MB

content_script.js

0.00MB

 

뭔가 이렇게만 오더를 넣으니까 코드를 뚝딱 만들어 냈다.

가이드대로 Chrome Extension에 연결하니까, booking 화면 새로고침은 계속 되는듯하다.

 

여기서 슬쩍 보니 추가해야할 기능,

1. Extension을 실행 할 지 말 지 창이 하나 떠 있으면 좋겠다. 현재는 Extension On 해놓으면 그냥 저절로 코드를 실행한다. 2. Slack 알림과 동시에 Got ya! 했을 때 브라우저 팝업 알림도 추가했으면 한다.

---

 

추가기능 넣기 전, Slack 알림설정부터 해보자.

 

사실, 학생계정으로 Notion Plus 요금제를 쓸 수 있어서 Notion 알림을 생각했었는데 얘는 DB느낌이 강하다.

 

매매알림은 '메신저'역할을 하는 Slack이나 Telegram이 적합한 것으로 보인다.

 

Slack으로 아무렇게나 WorkSpace를 만든 뒤

https://slack.com/

AI 업무 관리 및 생산성 도구

 

API 연동 APP을 만들어 준다.

 

 

APP 생성!

 

APP을 만들고 나서, App Home에서 Scope를 설정해준다. App에게 일종의 Slack 접근에 대한 Permission을 부여하는 것

 

 

여기서 Chat-write : Bot이 Slack에 Chat을 날릴 수 있는 권한을 추가!

 

다 했으면 스크롤 올려서 해당 OAuth(Open-Authorization) 토큰을 내 Workspace에다가 install한다.

 

여기까지만 하면, Bot을 Workspace에 다운로드 시킨 것이다..!

이제 Workspace로 돌아가서 특정 Channel에 해당 Bot APP을 추가하기

 

요기까지 하면 기본 세팅은 완료된 것이다..!

 

그럼 이제 Slack에 실제로 알람이 오도록 Setting을 해보자!

아래 코드를 참고 했더니 실제 Slack Channel에 chat bot이 test message를 보낸다.. 오 신기 ㅋㅋ

# token -> OAuth token , channel ex)#yoichi , text -> test TEXT 
import requests
 
def post_message(token, channel, text):
    response = requests.post("https://slack.com/api/chat.postMessage",
        headers={"Authorization": "Bearer "+token},
        data={"channel": channel,"text": text}
    )
    print(response)
 
appToken = "앱 토큰 입력"
 
post_message(appToken,"#coinautotade","Hello World!")

 

이제 다시,, 위에서 언급했던 추가 기능까지 넣어서 코딩을 진행해보자..!

1. Extension을 실행 할 지 말 지 창이 하나 떠 있으면 좋겠다. 현재는 Extension On 해놓으면 그냥 저절로 코드를 실행한다. 2. Slack 알림과 동시에 Got ya! 했을 때 브라우저 팝업 알림도 추가했으면 한다.

 

최종 Directory 구조는 다음과 같다.

yoichi-tracker/
├── manifest.json
├── background.js -- Slack 알림 + 상태 제어
├── config.js -- Slack 설정
├── content_script.js -- 색깔 확인 + 상태에 따라서 실행
├── popup.html -- 사용자 UI
├── popup.js -- 사용자 Start / Stop 제어

 

위와 같이 GPT가 짜준 코드를 갖고 Test를 진행해본다.

과연 실제로 yoichi booking 시스템을 잘 Tracking 하는 지..?!

 

js, json, html 파일을 아~~예 다뤄본 적이 없는데도 그럴싸한 코드가 나온 것이 일단 신기하긴 하다. 이제 검증의 시간..

---

검증 후 문제점,

 

1. User에게 Target Date를 input으로 받는 것이 낫다. 이렇게 하지 않으니까 Usability가 너무 떨어진다.

2. 지금 UI에서 한글은 깨져보이고, Macro Start를 누르면 Stop할 때까지 계속 새로고침 하는 것이 아니라 단 1회만 새로고침을 한다.

 

GPT를 갈궈갈궈서 해결해보자..

 

일단 Slack에 알림까지는 오는데, 코드는 개판이다 to be continued..