🍀 EDOC 출석용 웹사이트 만들기! 🍀 미니 풀스택디발자의꿈..

오늘 시소실 시험을 보기 위해 대기하다가! 갑작스럽게 이독 출석 웹사이트를 만들고 싶어졌다!

구글 시트만 연결하면 너무 쉽겠는데?!?!?! 생각하며! 두근두근 시험을 보고 (?)

시험 끝난 기념으로 (나는 남았고..친구 두명이 끝난 기념) 와플아이스크림 먹고

ECC열람실에서 신나게 하는중인데

역시.. 구글링이 없으면 나는 아무것도 못함

---

🍀계획🍀

1. 웹사이트 접속

2. 이름 입력

 

3-1. 이독 회원 "이름" 님 환영합니다! 현재 결석 상태입니다 (출석하기 버튼)

3-2. 이독 회원 "이름" 님은 현재 출석 상태입니다!

3-3. 당신은 이독 회원이 아닌데 왜 들어왔죠?

 

4. 오늘의 출석 단어를 입력해주세요!

 

5. 3-2 페이지로 돌아감(출석입니다!)

---

🍀망🍀

자바스크립트로 Google Sheet API와 연결하기

nodejs는 설치되어 있음

npm 설치도 되어 있는데

왜 npm i google-spreadsheet install이 안되는거야 으악

좋아 이건 때려치우고

아 이메일생성이랑 프라이빗 키 다 받았는데 힝

https://www.npmjs.com/package/google-spreadsheet

google-spreadsheet

---

🍀백🍀

1.  출석 여부 체크

2.  출석 넣는 부분

 

1번 부분 쿼리 : 사용자학번

?runNum=1&userNum=학번

 

2번 부분 쿼리 : 사용자학번 / 출결워드 아 노노 얘는 프엔쪽에

?runNum=2&userNum=2271056

우왕 배포 완료!!

그저빛!

---

🍀프론트🍀

메인화면

이름 입력

출석여부체크화면

1. 이독 회원 "이름" 님 환영합니다! 현재 결석 상태입니다 (출석하기 버튼)

2. 이독 회원 "이름" 님은 현재 출석 상태입니다!

3. 당신은 이독 회원이 아닌데 왜 들어왔죠?

 

알림창으로 띄우기

오늘의 출석 단어를 입력해주세요!

이전화면 업데이트

---

씁..어려워라

HTTP GET 방식으로 서버에 요청하기 (작성중)

감사합니다ㅠㅠ!!

JavaScript에서 가장 잘 알려진 HTTP 요청 방법

runNum

1 ( 출석여부체크)

2 ( 출석넣기 )

userNum

학번

 

텍스트 받음

---

폼 제출 버튼 누를 시 

첫번쨰 http 실행

출석체크 안 된 이독부원이면 출첵버튼뜨고

눌러서 입력하면 

되면 완료/버튼숨김 텍스트

안되면 다시

모니터라서 조금 작음 주의

---

🍀디자인🍀

너무 우려서 아무 감흥도 들지 않는 동전교표

 

 

---

🍀완성🍀

https://edocattendanceprogram.goldchae.repl.co

EDOC 출석체크

쨘! 이렇게 바뀜

---

🍀단점🍀

해당 주차마다  주 번호+1해야함

해당 주차마다 다른 출석번호 업데이트 해야함ㅣㅣㅎㅎㅎㅎ

 

이제 이거는 날짜 뽑아서 프로그램 내에서 해도 되고..

관리자용 프로그램을 만들면 해결되지만

 

오히려 그렇게 하는 게 힘들어서 단점될듯 

포기!

 

어어어어엄청느림

여러명이동시에하면어케될지상상도안감

 

디자인상 모바일로만해야함ㅋㅋㅋㅎㅎㅎ

 

그리고 출석 끝내면 자꾸 http불러온 페이지가켜짐ㅜ

이건 고칠수잇을것같은데

새벽 4시라서. 너무 졸리다

무조건 하루 안에 완성하기로 나와 약속했기 때문에.. 여기서 끝이다

---

풀스택디발자의 꿈을.. 아주 소박하게 이루어 보았다

역시 구글링이 제일 중요한 개발자의 덕목인 것인가?

뿌듯

홧탱!

---

💗이독프로젝트방💗

안녕하세요! 모두 시험은 다 끝나셨나요?

웹사이트 만들기는 허들이 낮고 재미있어서 여러분 모두가 하기 좋을 거라고 생각합니다!

저희 주제는 "이독이나 앞으로 자신의 코딩 생활에 도움이 될 만한 웹사이트" 입니다.

멋진 프로그램을 만들어서 이독에 도입해 봅시다!

 

예를 들어서 저는 어제  "이독 출석 프로그램"을 만들었어요!

이제 세미나가 진행되다 보니 출석 체크를 일일히 부르기가 힘들 것 같아서 고민하다가 나온 아이디어입니다! 

전체방에 어떻게 사용하는지 공지할게요.

구글 스프레드 시트로 저희가 출석 체크를 하는데 이걸 연동하면 될 것 같아서 구글 스프레드 시트 API를 사용했답니다! 백엔드+프론트엔드가 합쳐져 있어서 너무 어려울 것 같다고 생각하실 수 있지만 저도 아무것도 모르는 채로 "구글링!"을 이용해서 충분히 했답니다. 여러분도 충분히 하실 수 있는 수준이예요!

 

이런 프로그램 (예시 : 이독의 스트릭 잇기 프로그램 / 이독의 솔브닥 랭킹 순위 시스템 등) 을 팀을 지어서 만들어 봅시다! 기간은 11월 한 달로 할게요! 그 이후에 발표/프로젝트 소개 시간을 가지도록 하겠습니다! 아주 간단해도 상관없어요!

 

팀은 제가 랜덤으로 2-3 분씩 만들어 드리겠습니당. 만약 같이 하고 싶은 친구가 있으면 저에게 따로 이야기해주세요! 여러분 모두 화이팅!

---

💗이독 사용 소개 💗

안녕하세요 여러분! 

모두 시험은 잘 보셨나요?

 

https://edocattendanceprogram.goldchae.repl.co

저희가 앞으로 세미나를 진행해서 출석 체크가 어려울 것 같아 이독 출석 체크 프로그램을 만들었습니다.

 

⭐️사용방법

<모바일>로 해주세요!

학번을 입력한다.

"출석체크 해주세요!" 가 뜨면 출석 버튼을 눌러 해당 주차의 출석워드를 입력한다. (이독이 아니라고 뜨면 다시 학번을 입력한다)

출석 완료 페이지가 뜬 후 다른 하얀 페이지(출석완료라고 적혀있는)가 로딩될 떄까지 기다린다.

끗!

스트레드시트에 들어가 O 표시를 확인하거나 / 다시 접속해 학번 입력 후 "이미 출석 완료"라고 뜨는지 확인해서 출석이 제대로 되었는지 체크 가능하다.

(자세한 방법 영상 참고!)

 

 

⭐️테스트

현재 테스팅을 위해서 출석 주차를 실제 출석 주가 아닌 기간으로 설정해놓았어요 ( 스프레드시트에 중간고사라고 써진 부분 ) 

시간 되시는 분은 한번 해보시고 오류제보/피드백 부탁드려요!

이번 주차의 출석워드는 "이독화이팅"입니다.

해보시고 스프레드시트에서도 바뀌는지 확인해보세요!

https://docs.google.com/spreadsheets/d/1Qf0Sm0x4LzIEpVQoYDDqatrq8Xodg5g-Z5RszXtRC-A/edit?usp=sharing

 

⭐️오류제보/피드백 환영

어제 하루 만든 거라서 오류가 많을 것으로 예상됩니다 ㅎㅎ

그리고 로딩 시간이 엄청 길어서 여러 명이 할 시에 어떻게 될지 예상이 안 되네요 ㅠㅜㅋㅋ

제가 반응형으로 잘 못 만들어서 다른 핸드폰에서 화면이 이상하게 뜰 수도 있습니다. 모양이 너무 이상한데 싶으면 꼭 캡처 화면 보내주세요!ㅜ 다 끝나고 새 페이지로 가는 부분도 바꾸려고 했는데 시간이 없어서..ㅋㅋ좀 머리로 날아가는 비둘기 코딩 이해 부탁드립니다. 차차 고쳐 볼게요!

 

앞으로 이독 프로젝트 팀이 만들 웹사이트도 기대해주세요!

이독 웹사이트팟에 참여하고 싶은 분은 오늘까지 말해주세요~

---

 

💗신촌웹사이트팟 자랑 💗