소개
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/". 이 보이네요.네트워크창을 열어둔채로 그부분을 클릭하면 해당 통신 내용이 하이라이트됩니다.
Sysadmin 화면의 스크린 샷
챙겨야하는 중요한 정보들
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만으로 모두 나옵니다. 빙고!
웹 브라우저에서 CSS 파일의 스크린 샷
[report api 노드] 에서 내용을 가저오는 http request 노드 작성
여러 옵션이있는 화면의 스크린 샷
로그인 노드와 달리 헤더에만 정보를 넣어주면 됩니다.
프로세스 단계를 보여주는 다이어그램
이제 결과에서 교안 이미지 url을 따서 교안에서 정보를 추출하도록 만들어둔 워크플로우와 연결하면 전반부 완성입니다.
신경망의 과정을 보여주는 다이어그램
결과와 배운 점
다른 자동화툴처럼 필요한 기능이 많이 만들어져있지않아서 HTTP Request 노드를 잘 쓰면 좋겠다. HTTP의 동작방식을 필요한 만큼은 알아야함.
이제 남은 Tasks
알림장 연동 및 필수정보 스크레이핑
[완료] 알림장 업데이트 모니터링 -> 금요일 교안 링크 추출이미지 교안으로 정보 파싱 및 저장
[완료]이미지 링크로 부터 교안 분석
[완료]확장 컨텐츠를 만들 수 있는 중요내용의 저장 (구글 spreadsheet)컨텐츠(자동)화 (진행중)
[ ] 교안의 중요 내용별로 연관 컨텐츠 검색/ 내용 보강
[...] 관련 컨텐츠 생성 -> 단어게임?학습과 피드백
[ ] 홈스쿨링 자료셋으로 학습 -
[ ] 학습 기록
[ ] 학습 보강 피드백루프 반복
