노션 쓰는 사람들이 알면 좋고 몰라도 괜찮을 api로 자동화하기 2탄
지난번 설명이 미흡해서 조금 더 상세하지만 여전히 대충인 설명을 가져왔습니다
필요준비물
노션 크롬(꼭 크롬일 필요는 없지만 크롬에서 개발해서 다른 브라우저와 호환되게끔 고치면 된다) 약간의끈기 챗지피티나 제미나이, 그리고 클로드(무료판 쓰고있어서 조금 딥한 코딩 필요할때만 맡기고 있다)
노션의 꽃은 데이터베이스임
분류를 해서 이런거 쉽게 바로바로 찾을 수 있도록 하는게 노션의 핵심 기능
(비록 느리지만. 누군가의 서비스에 기대고있기때문에 서비스 종료하는 경우 영구적일순 없지만)
저런 데이터베이스를 구축하려면 하나하나 수동입력을 해야함
그 귀차니즘을 줄이기위해 있는것이 노션 api
이렇게 데이터를 긁어서 노션으로 보내주는 역할을 하는게 노션 api고, 저 데이터를 긁는건 나의 스타일에 맞춰서 개발한 크롬 확장프로그램입니다....
1. 노션 api 만들고, 노션 데이터베이스와 연결하기
챗지피티한테 노션 api 만드는법과 연결하는법 물으면 됨 진짜임 나도 이렇게함
노션 api 토큰은 절대 ai한테 유출하지 말자
토큰은 ntn_으로 시작한다 절대 secret_이 아니다
2. 계획짜기
내 목적 : 웹소설페이지 정보를 자동으로 긁어다가 노션에 붙여넣었으면 좋겠다
어떤 정보를 긁었으면 좋겠는가?
출간일(날짜속성), 출판사(다중선택속성), 저자(텍스트속성), 장르(다중선택속성), 키워드(다중선택속성), 회차/권(숫자속성), 가격(숫자속성), url(주소속성), 표지(첨부파일속성)
별점은 노션에서 내가 직접매길거임 즉 붙여넣는 속성 X
플랫폼은 일단 생각해놓은건 카카오페이지, 리디북스. 플랫폼은 중복이 없으므로 선택속성.
일단 이러면 노션 데이터베이스 설계는 끝남
어떻게 정보를 긁을것인가?
내 현재 열린 탭의 웹페이지주소를 가져와서, 이게 카카오페이진지 리디북스인지에 따라 정보를 가공하여 노션에 집어넣었으면 좋겠다 >웹페이지 주소를 긁으려면 웹 프로그램을 쓰는게 제일 효율적이다 > 확장프로그램을 만들어서 노션과 연결하자
다시 불러온 움짤
확장프로그램은 작은 웹페이지다
html(문서) css(꾸밈) json(데이터교환형식) js(기능) 이렇게 최소 네개 파일로 이루어져있으며 이때 기능과 디자인은 계획을 해야한다
html - on/off로 바뀌는 버튼, 노션으로 보내는 save버튼, 그리고 현재 상태를 보여주는 텍스트 메세지칸
css - 를 예쁘게 꾸며줘
json - 사이드패널로(확장프로그램은 탭이 바뀔때마다 창이 닫히는데 후킹(이후 설명)할땐 사이드패널로 해서 창을 안닫히게 해야한다), 리디북스,카카오페이지,노션 웹페이지를 읽을 권한을 준다
js - 토글 on/off로 바꾸는 기능, on일때 메세지 띄우는 기능, 노션에 보내는 save 기능
이런식으로 짜면 html css json 세파일과, 주요기능을 하는 main.js, 그리고 사이드패널로 하는 background.js를 코딩해준다
파일 네개를 만들고 확장프로그램 로드를 하면 된다 이 과정도 헷갈린다면 ai한테 묻자
main.js와 config.js에 대한 프롬프트다
config.js는 수정안할거지롱 그래서 따로 빼둠
세부 계획을 짬
main.js - 위에 썼듯이 토글 on off, 제대로 작동하는지 피드백메세지 나한테 보여주기, 노션에 보내는 save 기능
config.js - 수정안할거지롱. 데이터베이스주소랑 내 토큰 입력되서 노션 데이터베이스랑 연결해주는 존재
background.js - 사이드패널로 열어주고 후킹을 하거나 페이지소스코드 긁어오거나 하는 존재
datafilter.js - 그 긁어온 데이터 처리하고 가공하고 하는 존재
notionsave.js - 위에 내가 쓴 다중선택속성 선택속성 날짜... 이런거 하나하나 나열한게 이것 떄문임 노션의 데이터베이스랑 속성이 일치해서 그대로 노션에 보냄
프로그램 설계가 대략적으로 끝나버림
3. 웹페이지 정보 가져오기
확장프로그램의 기획 : 현재 열린 웹페이지의 정보를 가져온다
어디서 가져올건지 어떻게 가져올건지 어떤 정보를 가져올건지 생각을 해보자
어디서 가져올건데? 일단 이 노션 주제는 웹소설이니 생각한건 카카오페이지랑 리디북스
json 파일을 확인해주자(이때싶인데 쓰는 소스편집툴이 없다면 notepad++ 추천)
확장프로그램-세부정보 눌러서 사이트 액세스 권한도 제발 확인
제대로 안되어있으면 확장프로그램 삭제하고 다시 "압축해제된 확장 프로그램 로드"해야함
일단 리디북스를 들어가본다
리디북스에서 오른쪽마우스를 눌러서 소스코드를 뜯어본다
ctr+f로 키워드를 찾아보면 상수리나무 아래의 키워드를 볼수있다 물론 이거 직접 해석할 필욘 없고 이부분 대충 크게 다 긁어서 ai 한테 출간일 저자 출판사 키워드 정보 요약해봐 하면서 맞춰나가면 됨
카카오페이지는 그게 안된다
api라는걸로 정보를 받아야한다
리디북스 : 우린 다 올려놨으니 필요한 정보는 여기에 있음 이거 찾아가렴
카카오페이지 : 요청하면 제가 메뉴판 가져다드릴게요 그때그때 요청하세요(라잌 더쿠 댓글 100개씩 올라와서 이전페이지 로드 요청해야 이전 댓글들이 나오는것과 같다)
이런 페이지 스타일때문에 크롬확장프로그램을 사이드패널로 만들고(종료 안되고 계속 작동하도록) api를 뜯는 타임을 가져보는것이다
F12를 누르고 네트워크-Fetch/XHR-응답을 눌러 문서를 하나하나 뜯어본다
initialize~, simple~, overview~, about~, recommend~ 등등
about 제목으로 시작하는 파일을 보니 키워드 리스트가 보인다. 복붙해서 ai한테 분석해달라고한다
카카오페이지는 대충 list api와 about api 두가지가 필요하다
about api : 작품 정보
list api : 이게 총 몇화인지 몇권인지 첫 출간일이 언젠지, 회차당 백원인지 등등
어디서 (카카페 리디)
어떤정보를 (api html문서)
어떻게 가져올건지 (?)
리디북스는 참 쉽다
a부터 z까지 나열했는데, 여기서 저는 a d e f I o 정보가 필요해요 근데 a d e f l o를 이렇게 가공해주세요 하면 되기때문
카카오페이지는
a주문하면 a를 보여주고 g를 주문하면 g를 보여준다 나는 a와 g 동시에 필요한데... 그래서 a를 보여줄때 a를 가로채고, g를 보여줄때 g를 가로채서 a와 g를 같이 가공해서 담는다 그게 바로 후킹
또라이짓1
왜 훅킹이라고 했을까 후킹이다
또라이짓2
왜 overview api를 따달라고 했을까 about api다
(api 경로는 list나 about 위에 마우스 올리고 복사-url 복사 하면 된다)
다들 더위조심
backgroud.js와 datafilter.js가 얼추 완성되었다
4. 에러 떴을때
F12-콘솔
확장프로그램-서비스워커-콘솔
사이드패널-검사-콘솔
세군데 돌아가면서 에러문구 있는지 확인해보고 물어보기
5. 나머지 세부 정리하기
예 ) datafilter.js
리디북스는 e북, 웹소설 분류되어있는데 이게 장르명으로 들어가서 중복제거하고 이런 키워드 제거해달라 하기
notionsave.js
속성 넣기, 썸네일을 커버로 넣기, 페이지 본문에 줄거리 넣기 등등
예시로 카카페 리디북스했지만 이게 웹툰이라면 다른 분기점도 넣어서 플랫폼 더 확장할수 있고
사실 카카페는 장르 '판타지' 리디는 '판타지물' 이런식으로 뽑히기때문에 datafilter.js에서 가다듬어서 용어 통일해야하는것도 있는데 내가 당장 찐으로 쓸 프로그램도 아니고 예시용으로 만든거라 귀찮아서 여기까지하겠음
나는 데이터베이스를 여러 플랫폼에서 쓸 수 있게 섞어쓰느라 이렇게 각자 정보 뜯는방식도 다르고 가공도 내 스타일에 맞춰서 새로 가공해야해서 확장프로그램 코딩이라는 뻘짓을 하지만 알라딘같은 단일사이트는 api를 이미 만든 사람들 있어서 그거 그대로 쓰면 됨
여기서 만든 확장프로그램 파일들 다운로드하기는 여기서
https://nifty-nigella-433.notion.site/3a5837079ac380f6911df330e9636519?v=3a5837079ac380978b19000cfcb0f59f&source=copy_link
