소개
https://www.gpters.org/nocode/post/automatic-homeschooling-nursery-school-6SmQvypkvLiXZIK
에서 2단계를 완성했고 지금은 아래 Task중 1단계와 3단계를 진행중입니다. 오늘은 1단계. 알림장 연동 (로그인과 교안을 추출하는 과정을 해보았습니다.
Tasks
알림장 연동 및 필수정보 스크레이핑 (진행중)
[ ] 알림장 업데이트 모니터링 -> 금요일 교안 링크 추출이미지 교안으로 정보 파싱 및 저장
[완료]이미지 링크로 부터 교안 분석
[완료]확장 컨텐츠를 만들 수 있는 중요내용의 저장 (구글 spreadsheet)컨텐츠(자동)화 (진행중)
[ ] 교안의 중요 내용별로 연관 컨텐츠 검색/ 내용 보강
[...] 관련 컨텐츠 생성 -> 단어게임?학습과 피드백
[ ] 홈스쿨링 자료셋으로 학습 -
[ ] 학습 기록
[ ] 학습 보강 피드백루프 반복
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
크롬 개발자도구: 페이지검사, Console, Network 분석
Claude: 기본 workflow 와 node 구성 참고
n8n : 베이스 자동화도구 (셀프호스팅 내용은 여기 -> 1.n8n 셀프호스팅, 2.ngrok 무료고정 url )
2. 사용한 프롬프트 전문을 꼭 포함하고, 내용을 짧게 소개해 주세요.
다음의 역할을 해주는 n8n 워크플로우를 만들어줘.
* http request 로그인: https://www.*.com/api/web/login/ api에 Post방식으로 유저, 비번을 body에 넣어 로그인
* 세션이 유지된채로 다음의 api를 호출해서 응답가져오기 https://www.*.com/api/reports/?page_size=20&...
제대로 동작하기위해 고려해야하는 특정 웹사이트의 상황들도 알려주면 좋겠어.n8n 노드를 써서, 로그인이 필요한 사이트에 http get request로 이런 결과를 얻었는데 제대로 된건지 모르겠어.
---
<!doctype html><html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="robots" content="NOARCHIVE"/><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/><meta http-equiv="Pragma" content="no-cache"/><meta http-equiv="Expires" content="0"/><link ... <이후 생략>
상세 진행 내용
다행히 알림장서비스의 웹이 있어서 내용을 가져올 가능성이 있었음.
미리 정해진 credential로 인증할 수 없는 사이트, 찾아보니 HTTP Request 를 써야한다고 하는군요.
덕분에 웹과 HTTP 공부(?)를 좀 했습니다. 딱 필요한 만큼만 ^^;;;
웹페이지는 내부적으로 수많은 API들이 구동되면서 구성된다고 합니다.
로그인도 마찬가지고요
그래서 제가 정보를 얻기 원하기 위해서
제가 원하는 정보가 나오는 페이지에 도달하기까지
어떤 api들을 호출하는지
크롬 브라우저 > 개발자도구 > 네트워크 를 살펴보았습니다.
1. 로그인
네트워크 탭을 열면 보이는 필터중에 Fetch/XHR을 선택해두면 통신내용만 확인할 수 있습니다.
로그인을 하고 통신내용을 살펴봅니다.
콘솔에 필터 검색으로 login을 찾아봅니다.
XHR finished loading: POST "https://www.****.com/api/web/login/". 이 보이네요.네트워크창을 열어둔채로 그부분을 클릭하면 해당 통신 내용이 하이라이트됩니다.
챙겨야하는 중요한 정보들
General:
Request URL: 로그인 api url
Request Method POST
Response Headers:
Set-Cookie <- 여기에 로그인이후 다른 api를 호출할 때 필요한 sessionid 값이 있음
그외 다른 값들: 다음에 호출할 때 봇이 아닌 일반 브라우저환경에서 호출한 것처럼 보이려면 다음 request 노드에 같이 넣어줘야함.
[알림장 로그인 노드] 알림장 로그인 HTTP Request 노드에 상응하는 정보를 입력합니다.
Body Parameters 에 로그인 정보를 넣습니다.
로그인 상태를 유지하기 위한 정보를 받아와야하니 Include Response Headers and Status 도 On 합니다.
[쿠키추출 노드]
이전 노드에서 정보를 추출해 서비스내 api를 호출할때 필요한 정보를 넘기도록합니다.
이때 필요한 자바스크립트는 클로드에게 부탁을~
이제 서비스에서 게시판을 열때 어떤 내부api를 여는지 확인할 차례입니다. report api를 사용하네요.
앞에서처럼 챙겨야하는 정보들을 확인합니다.
웹페이지 로그인 상태에서 url에 해당 request url을 복사해 넣어보니 게시판 내용이 저 api만으로 모두 나옵니다. 빙고!
[report api 노드] 에서 내용을 가저오는 http request 노드 작성
로그인 노드와 달리 헤더에만 정보를 넣어주면 됩니다.
이제 결과에서 교안 이미지 url을 따서 교안에서 정보를 추출하도록 만들어둔 워크플로우와 연결하면 전반부 완성입니다.
결과와 배운 점
다른 자동화툴처럼 필요한 기능이 많이 만들어져있지않아서 HTTP Request 노드를 잘 쓰면 좋겠다. HTTP의 동작방식을 필요한 만큼은 알아야함.
이제 남은 Tasks
알림장 연동 및 필수정보 스크레이핑
[완료] 알림장 업데이트 모니터링 -> 금요일 교안 링크 추출이미지 교안으로 정보 파싱 및 저장
[완료]이미지 링크로 부터 교안 분석
[완료]확장 컨텐츠를 만들 수 있는 중요내용의 저장 (구글 spreadsheet)컨텐츠(자동)화 (진행중)
[ ] 교안의 중요 내용별로 연관 컨텐츠 검색/ 내용 보강
[...] 관련 컨텐츠 생성 -> 단어게임?학습과 피드백
[ ] 홈스쿨링 자료셋으로 학습 -
[ ] 학습 기록
[ ] 학습 보강 피드백루프 반복