Git Product home page Git Product logo

pj-today_lunch's Introduction

image

👉 오늘의 점심

  • 하루 삼시세끼, “오늘 점심 뭐 먹지?” 고민해 본 사람들이 고민하는 사람들을 위해 만들어 보는 웹 서비스

👉 Introduction

  • 주제 : 점심 추천 웹 서비스 (for 직딩, 일반인)
  • 기간 : 2022.06.03 (금) ~ 2022.06.13 (월)
  • Team : 김선민 (Github), 김민기 (Github), 박재현 (Github), 황신혜 (Github)

👉 Project-Rules

Schedule Management : Git Project Link, 간트차트 Link

API Design : Notion-link

Branch Info

  • main : LocalHost 실행 branch
  • publish : EC2 Hosting 실행 Branch

Figma Mock-up

image

DB Modeling

image


👉 Development-Stack

📚 Frameworks, Libraries (ML)

Django jQuery scikit-learn

💾 Databases, Hosting/Storage

SQLite AWS

📋 Languages

Python HTML5 JavaScript

💻 IDEs/Editors

PyCharm Visual Studio Code


👉 Getting-Started

$ pip install -r requirements.txt
$ python recommandtion/crawling.py  # Crawing Data
$ python auto_publish.py            # Data Migrations & Run Server
$ python auto_db_insert.py          # Insert Restaurant DB 

# publish branch version 
$ sh auto_delete_db.sh
$ sh auto_publish.sh

Crawling

  • 요기요 홈페이지 카테고리별 음식점 데이터 크롤링 (python crawling.py)
  • 생성된 restaurant_OO.csv 파일 (OO 부분은 카테고리, 50개의 음식점 정보 저장)들 합쳐서 최종 restaurant.csv 생성

DB Migration & DB

  • (main Branch) python auto_publish.py 하여 migrations, migrate 진행
  • (main Branch) python auto_db_insert.py 하여 크롤링 데이터(restaurant.csv)들 DB에 저장
  • (publish branch) sh auto_delete_db.sh 하여 migrations, sqlite3 db 초기화
  • (publish branch) sh auto_publish.sh 하여 DB Migrations 및 크롤링 데이터(restaurant.csv) DB 저장

👉 Structure

┌─today_lunch
├── today_lunch         // project
│   ├── urls.py       
│   ├── settings.py     // setting
│   └── ...
├── users               // app
│   ├── models.py       // DB Model - User
│   ├── views.py
│   └── ...
├── restaurant          // app
│   ├── models.py       // DB Model - Restaurant, Category
│   ├── views.py
│   └── ...
├── star                // app
│   ├── models.py       // DB Model - Star 
│   ├── views.py
│   └── ...
├── mypage              // app
│   ├── models.py       // DB Model - Diary
│   ├── views.py
│   └── ...
├── recommandation
│   ├── crawling.py     // Crawling
│   ├── db_uploader.py  // Restaurant data insert
│   ├── recommand.py    // User Based Recommandation
│   └── restaurant.csv  // restaurant data
├── static 
│   ├── css/            // css
│   └── img/            // images    
├── templates
│   ├── init/           // Init Page  
│   ├── users/          // Join, Login Page  
│   ├── main/           // Main Page  
│   ├── mypage/         // Profile Page  
│   └── ...
│
├── db.sqlite3          // DB  
├── manage.py           // 메인
├── auto_db_insert.py   
└── auto_publish.py

👉 Development

User Page

  • 시작 페이지 회원가입, 로그인 페이지 이동
  • 회원가입/로그인 기능
  • 회원가입 vaildation
  • 카카오지도 API를 이용한 주소 검색 기능

Nav Bar

  • 페이지 이동(홈, 평점페이지, 마이페이지, 로그아웃)

Scoring Page

  • 로그인 후 스코어링 페이지 이동
  • 로그인 User 평점 이력 없는 음식점 5개 출력
  • 음식점 마다 별 1개 ~ 5개 선택해서 평점 부여 및 저장
    • '별점 저장하기' 클릭 시 평점 부여한 음식점들만 평점 등록됨
    • '평가 그만하기' 클릭 시 메인 페이지로 이동

Aside (Main Page, MyPage)

  • 사용자 정보(이름, 주소) 출력
  • 추천 컨텐츠 1) 오늘의 추천
    • 어제 평점이 가장 높았던 음식점 1개 추천

Main Page

  • 추천 컨텐츠 2) '사용자님과 가장 유사한 OOO님의 추천 음식점입니다!'
    • User-Baed Filtering을 이용한 나와 가장 비슷한 유저의 top 5 음식점 출력
    • OOO님 클릭 시 유사도 팝오버 출력
  • 추천 컨텐츠 3) '점심 뭐 먹지? TOP 5'
    • 카테고리별 평균 평점이 가장 높은 음식점 TOP 5 (전체, 한식, 중식, 일식, 양식)
  • 각 음식점들의 '상세보기'
    • 네이버 지도에 해당 음식점 검색 결과 출력

Mypage

  • 점심일지 캘린더 형태 출력
  • 점심일지 등록
    • 빈 날짜 호버 시 '등록'버튼 출력, 클릭시 모달 출력
  • 점심일지 등록 모달
    • 음식점 선택 (+ 검색 가능)
    • 별점 선택 (1 ~ 5)
    • 등록 내용 바탕으로 DB Update 및 추천 알고리즘 Upgrade
  • 점심일지 수정/삭제
    • 등록된 점심일지 부분 클릭시 모달 창 출력
    • 수정/삭제 내용 바탕으로 DB Update 및 추천 알고리즘 Upgrade
    • 삭제 클릭시 해당 점심일지 삭제됨

Publish and Storage Mount

  • AWS EC2 이용한 외부 Publish 배포
  • S3에 정적 이미지 파일들 관리 및 EC2에 Mount하여 구현

👉 시연 화면

첫화면, 회원가입, 로그인 화면

image

평가 페이지, 메인 페이지

image

마이페이지 (점심일지 등록, 수정, 삭제)

image

🛡 Trouble Shooting

⚡ 문제 발생

추천시스템이 작동하는 main 페이지 최초 접속 시 접속이 매우 느린상황 발생 (이후 이동은 캐시가 저장되어 빠르나, 새로운 회원, 캐시 없어진 경우 접속느림)

⚡ 문제 원인

DB의 Star테아블의 데이터를 DataFrame으로 만들어서 이를 통한 추천을 해주는 과정에서 DB의 데이터가 쌓이면 쌓일수록 DataFrame을 생성하는 속도가 느려지는 것으로 확인

⚡ 문제 해결

  1. Recommend 클래스를 정의하여 DataFrame을 init하는 함수와 실제 유사도를 계산하는 부분들을 나눠서 각각 함수화하여 main접속 시 유사도만 계산될 수 있도록하여 속도 개선
  2. 싱글톤 패턴을 이용하여 유사도 계산 시 하나의 인스턴스만 사용하여 리소스를 절약하도록하고 서버가 실행될 때 미리 해당 인스턴스를 생성하도록 init.py에서 클래스선언
  3. 해당 인스턴스를 현재 DB에 맞게 실시간으로 갱신 시켜주기 위해 Thread를 이용하여 10초마다 init()함수 실행되도록 설정

⚡ 해결 결과

해결 전

image

해결 후

image

최초 서버가 실행될 때 이전보다 많은 시간이 소요되긴 하지만 클라이언트 입장으로써 접속지연같은 불편함을 개선할 수 있었다. 10초마다 갱신도 자연스럽게 되면서 서비스를 이용함에 있어서 접속 지연을 개선할 수 있었다.

블로그 정리 : https://psb6604.tistory.com/48?category=1059497

pj-today_lunch's People

Contributors

aeius avatar seonminkim1 avatar kmingky avatar

Stargazers

 avatar  avatar

Watchers

James Cloos avatar  avatar

pj-today_lunch's Issues

[마이페이지] 점심일지 CRUD, 회원정보 수정,탈퇴

1. 기간

2022.06.07 (화) ~ 2022.06.08 (수)

2. 기능 개요

  • 마이페이지에서 사용자는 회원정보를 '수정'하거나 '탈퇴' 할수 있다. (USER CRUD)
  • 마이페이지에서 사용자는 캘린더 형식의 '내 점심일지'를 볼 수 있다. (Diary CRUD)
  • (점심일지 조회) '점심일지'는 지난달, 다음달 등 월별로 볼 수 있어야 한다.
  • (점심일지 생성) 캘린더 빈칸 클릭하면, '점심일지 생성' 모달이 뜬다.
    • 모달에는 날짜, 상호명, 평점을 입력받는다.
    • 상호명은 검색 시스템 등으로 체크가 필요하다.
    • '등록'을 누르면, 점심일지 Table에 추가 되고 Score 평균이 Star Table에 업데이트 된다.
  • (점심일지 수정) 캘린더 빈칸 클릭하면, '점심일지 생성' 모달이 뜬다.
    • 점심일지 생성과 동일하며 Default 값(기존 수정 전 값)이 설정되어 나온다.
    • '수정'을 누르면, 점심일지 Table에 추가 되고 Score 평균이 Star Table에 업데이트 된다.
  • (점심일지 삭제) '점심일지'의 우측 상단 버튼을 누르면 삭제 가능하다.

3. 세부 구현 순서

  • 초안 HTML 페이지 작성
  • Diary Table 생성
  • 캘린더 기능 작성 (월별 이동)
  • 점심일지 조회 API 구현
  • 점심일지 생성 모달 구현
  • 점심일지 수정 모달 구현
  • 점심일지 생성 API - DB(Diary) 연동 구현
  • 점심일지 모달 - 검색 Drop-Down 구현 / 평점 (☆☆☆☆☆) 구현
  • 점심일지 수정 API - DB 연동 구현
  • 점심일지 삭제 API - DB 연동 구현
  • 점심일지 생성에서 Star Table 필드값 (avg_score, count), Restaurant (avg_score, count) 수정
  • 점심일지 수정에서 Star Table 필드값 (avg_score), Restaurant (avg_score) 수정
  • CSS 다듬기
  • 점심일지 수정/삭제 모달에서 Default 기존값 출력
  • NAV Link 구현
  • USER 정보 조회/수정 구현
  • USER 정보 삭제 구현

와이어 프레임
image

image

[회원가입페이지1] Django 회원가입 기능 구현

1. 일정

2022.06.03 ~ 2022.06.03

2. 기능 개요

  • 사용자는 아이디, 이름, 성별, 생년월일, 주소, 비밀번호, 비밀번호 확인을 입력한다.
  • 가입 완료 버튼을 누르면 Validation이 진행되고, 이상없을 시 로그인 페이지로 이동한다.
  • Validation가 적용되는 항목은 다음과 같고 틀렸을 시 안내 메시지가 나간다.
    • 아이디 : 아이디 중복 확인
    • 비밀번호 : 비밀번호, 비밀번호 확인이 같은지
    • 주소 : 카카오 주소 API 사용 Validation
    • 성별 : Dropdown, Checkbox, / 남성, 여성 (M,W)
    • 순서 고려
  • '로그인 페이지로' 버튼을 누르면 로그인 페이지로 이동한다.

3. 세부 구현 순서

  • 화면 초안 구현 (+Bootstrap)
  • DB CREATE 확인 (DB 필드 : email, username(email과 동일), full_name, password, gender, address, birthdate)
  • Validation
    • 아이디 중복 확인
    • 비밀번호 중복 확인
    • 카카오 주소 API Validation
    • 생년월일 6자리 맞는지
  • 각 Validation에 대한 ALERT 메시지 - dajngo message 기능
  • CSS 마무리

4. UI

image

[로그인페이지] Django 로그인 기능 구현

1. 일정

2022.06.03 ~ 2022.06.04

2. 기능 개요

  • 사용자는 아이디, 비밀번호를 입력한다.
  • '로그인' 버튼을 누르면 Validation이 진행 된다.
  • Validation이 적용되는 항목은 다음과 같고 틀렸을 시 안내 메시지가 나간다.
    • 아이디 : 아이디 조회 체크
    • 패스워드 : 패스워드 체크
  • '로그인' 버튼을 누르면 메인 페이지로 이동한다.
  • 가입 완료 버튼을 누르면 Validation이 진행되고, 이상없을 시 로그인 페이지로 이동한다.
  • Validation가 적용되는 항목은 다음과 같고 틀렸을 시 안내 메시지가 나간다.
    • 아이디 : 아이디 DB 확인
    • 비밀번호 : 비밀번호 DB 확인
  • '회원가입 페이지로' 버튼을 누르면 회원가입 페이지로 이동한다.
  • '로그인' 버튼을 누르면 메인 페이지로 이동한다.

3. 세부 구현 순서

  • 화면 초안 구현 (+Bootstrap)
  • Validation
    • 아이디, 비밀번호 확인 - django auth 기능
  • 각 Validation에 대한 ALERT 메시지 - dajngo message 기능
  • CSS 마무리

4. 이미지

image

[메인페이지] 사용자 정보, 추천리스트 출력

1. 기간

2022.06.08 ~ 2022.06.09

2. 기능 개요

  1. 사용자 정보 메인화면 사이드 부분에 출력
  2. 사용자 기반으로 처리된 추천리스트 메인화면에 출력
  3. 추천된 음식점 클릭 시 해당 음식점 정보 출력

3. 세부 구현 순서

  • 화면 초안 구현 (+Bootstrap)
  • 사용자 정보 출력 (닉네임 , 주소)
  • 사용자기반으로 필터링된 추천리스트 출력 #6
    • 사용자 기반 필터링 된 것을 확인하기 위해 OOO님 클릭 시 유사도 랭킹 출력(팝오버)
  • 음식점 클릭 시 음식점 정보 출력 (네이버 지도 검색결과)
  • 각 카테고리 별로 이번달 랭킹 TOP 5 출력(전체, 한식, 중식, 일식, 양식)
    • 레스토랑 테이블 컬럼추가 restaurant_count , restaurant_avg_score
      • restaurant Model 수정 - 해당 컬럼들 int, float으로 생성
      • db_upload.py 실행 시 해당 컬럼 추가하여 각각 0, 1.0 으로 초기화
    • 평점 등록 시 count 증가, 평균 점수 계산하여 avg_score 저장
      • restaurant 정보 불러와서 count 값, avg_score update
      • count 값 0 일 경우 count 값 1 저장, avg_score 는 고른 점수로 update
    • 레스토랑 테이블의 restaurant_avg_score 순으로 정렬한 레스토랑 정보 return
      • 기본 값은 모든 레스토랑의 restaurant_avg_score 랭킹 TOP5 출력
      • 한식, 중식, 일식, 양식 각각의 버튼 클릭 시 랭킹 TOP5 출력
      • 비동기식 방식 ajax로 통신하여 json 데이터 형태로 response 받아 카테고리 별 TOP 5 출력
  • 어제 가장 높은 별점을 받은 음식점 '오늘의 추천'으로 출력
  • CSS 최종 정리

[테스트] UX 기반 UI 및 기능 점검 (1차, 2차)

기간

  • 2022.06.10 (금) ~ 2022.06.12 (일)

페이지 별 점검 사항

init page

  • 회원가입 (명시적인 버튼 표시)

회원가입페이지

  • 이름 / 주소 공란시 Validation 추가
  • 로그인 (명시적인 버튼 표시)

로그인 페이지

  • 회원가입 (명시적인 버튼 표시)

스코어링 페이지

  • 데이터 정제 (주소가 중복 되어 있음.)
  • 로그인 성공 메시지
  • 로그아웃 성공 메시지
  • Nav에 평가 페이지 가기
  • Nav 삽입
  • 문구 변경 및 삭제
    • 점심 뭐 먹지? 문구 삭제
    • 점심 후기 별점을 남겨주세요' 텍스트 변경
    • '조금 더하기' 텍스트 변경

메인 페이지

  • 메인 페이지 최초 회원가입 후 로그인시 속도 오래 걸리는 이슈
    • 서버 재시작 후 로그인 시 약 1초정도 소요됨
    • print()문 제거 - 960밀리초로 감소
  • 최초 회원 가입 시 하나도 평점을 하지않고 넘어갈 경우 오류 발생
    • try except 문으로 작성해서 평점을 안하였을 경우 추천리스트 대신
      '음식 평점을 입력해보세요! 그에 따른 추천을 해드립니다' 문구 출력 (KeyError except)
    • '평점 주러 가기' 버튼 만들어서 'scoring_view' 화면으로 이동되도록
  • 추천 시스템 섹션2 - 버튼 눌러져 있는데 다시 눌렀을 때, 색 안변하게 수정
  • 좌측 주소 bold 처리
  • nav 30% 인거 확인 후 로그아웃 사이즈 수정
  • 상세 보기 : 새창 뜨기로
  • 오늘의 추천 밑에 Description 추가

마이페이지

  • 등록 / 수정 기능 구현 체크
  • 캘린더 사이즈 고정 및 등록, 수정 버튼 추가
  • aside 바에 User 로 수정
  • aside 바에 오늘의 추천 구현
  • Nav에 홈 버튼 가기 구현

전체

  • HTML 상단부 분리 및 정리 (base.html 도입)

[데이터수집, 머신러닝 개발] 요기요 크롤링, 협업 필터링 개발

1. 기간

2022.06.03 ~ 2022.06.05

2. 기능 개요

추천시스템을 만들기 위한 데이터셋 만들기 위해서 요기요 크롤링하여 음식점 데이터셋 만들어서 DB에 저장
음식점 데이터들과 회원 데이터를 통해서 협업 필터링 개발

3. 세부 구현 사항

  • 요기요 크롤링을 통해 음식점 데이터 DB CSV파일로 저장
  • 크롤링한 csv 데이터 DB에 저장하는 함수 작성
  • db_upload.py 실행 시 DB에 restaurant 데이터들 저장됨
  • 사용자 기반 협업 필터링 개발
    • DB데이터 restaurant, star 데이터 불러오기
    • 불러온 데이터 DataFrame에 저장하여 merge
    • 합쳐진 데이터를 토대로 사용자 기반 협업 필터링 개발
      • 유저와 유저간의 코사인 유사도 계산
      • 상위 유저 중 첫번째 유저와 그 유저가 높은 평점을 매긴 음식점들 리턴
      • views.py 에서 메인페이지에 출력하는 함수에서 recommand(login_user_id) 형태로 호출할 수 있도록 함수화
  • 메인페이지를 출력하기 위해서 받아온 추천리스트에서 내가 가본 음식점들을 제외
  • 그곳 중 TOP5만 메인페이지에 출력할 수 있도록 저장해서 리턴

[회원가입페이지2] 먹어봤던 음식점 고르기

1. 기간

2022.06.05 (일) ~2022.06.06 (월)

2. 기능 개요

  • 로그인 한 User에게 평가 받을 음식점이 랜덤으로 출력된다. (한 페이지당 5개씩)
  • User는 가고 싶은 or 가 본 음식점을 고르고 평점을 입력 한다. (입력 안한 건 0점)
  • 평점 입력이 완료 된 항목은 초록색 테두리가 나타난다. (or 어떤 완료 표시가 있어야 함)
  • 사용자는 한 페이지 완료 후 '조금 더하기' 버튼을 누르면 새로운 데이터가 받아와진다. ( + DB 저장 됨)
  • '나중에 할게요'를 누르면 메인 페이지로 넘어가게 된다.

3. 세부 구현 순서

  • 화면 초안 구현 (+Bootstrap)
  • 음식점 이미지 정보 및 평점 출력
  • 평점 입력하는 이벤트 구현
  • '조금 더하기' 버튼 누르면 현재 기록 한 것 Star DB에 저장 구현
  • '조금 더하기' 버튼 누르면 유저가 평가한 적 없는 새로운 음식점 정보 조회
  • '나중에 할게요' 누르면 메인 페이지로 구현
  • CSS 마무리

와이어 프레임

image

구현 화면

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.