$$config title: 기달 기술설명서 $$ # ? 개요 ``` ? 맛집&웨이팅 사이트 구현 ``` # ? [기달 사이트](https://wait.public.itseasy.site/) # ? [원격 리포지터리](https://github.com/audgks5551/waiting_2022_01_11) # ? 개발환경 ## 형상&배포 관리 ``` - GIT, GITHUB ``` ## 배포 ``` - GITHUB, 젠킨스, 도커 ``` ## 개발 환경 ``` - 아나콘다 - 파이참 - SQLYog - 크롬 - PIP - MariaDB - Windows 11 ``` ## 서비스 환경 ``` - NGINX - MariaDB - 도커 - CentOS7 ``` ## 기술 스택 ``` - 파이썬 3 - 장고 4 - 장고 MTV - MariaDB - HTML, CSS, JS - 제이쿼리 - 테일윈드 - 부트스트랩 ``` # ⚙️ 기능 현황 | 기능| 구현 | 배포| 테스트 | | --- | -- | --- | --- | | 제목 | ✔️ | ✔️ | ✔️ | | 사진 업로드 | ✔️ | ✔️ | ✔️ | | 글 작성 | ✔️ | ✔️ | ✔️ | | 글 수정, 삭제 | ✔️ | ✔️ | ✔️ | | 회원가입 | ✔️ | ✔️ | ✔️ | | 카카오 로그인 | ✔️ | ✔️ | ✔️ | | 검색 | ✔️ | ✔️ | ✔️ | ## Release ### 2022-02-23 v0.01 - 회원가입 - 회원가입환영메일 - 카카오톡로그인 - 로그인 - 로그아웃 - 게시글의 제목 및 내용으로 키워드 검색이 가능. - 웨이팅 시작, 중지, 취소, 전체취소 가능 --- # ? 요구사항 ## 요구사항 분석표 | RQ-ID | 화면명 | 요구사항명| 요구사항내용 | 날짜 | 작성자 | 진행사항 | 버전명 | | --- | -- | --- | --- | --- | -- | --- | --- | | RQ-0001 | 공통 | 상단 메뉴 구성 | 네비게이션 관련 메뉴를 구성한다. 게시판과 홈 화면으로 이동할 수 있다.| 2/23 | 이명한 | 반영 | 0.01 | | RQ-0002 | 공통 | 하단 영역 | 사이트의 이름이 푸터로 있다. | 2/23 | 이명한 | 반영 | 0.01 | | RQ-0003 | 메인 화면 | 가운데 영역 | 추천 맛집이 있다. | 2/23 | 이명한 | 반영 | 0.01 | | RQ-0004 | 게시판 | 가운데 영역 | 해당 게시판의 게시글의 리스트가 있다. | 2/23 | 이명한 | 반영 | 0.01 | | RQ-0005 | 게시판 | 가운데 영역 | 검색바가 있다. - 게시글 리스트 바로 위 | 2/23 | 이명한 | 반영 | 0.01 | | RQ-0007 | 게시글 | 가운데 영역 | 위에서부터 게시판 링크, 게시글 제목, 내용 | 2/23 | 이명한 | 반영 | 0.01 || | RQ-0012 | 로그인 화면 | 가운데 영역 | 로그인 폼이 있다. | 2/23 | 이명한 | 반영 | 0.01 | | RQ-0013 | 로그인 화면 | 가운데 영역 | 회원가입이 가능하다. | 2/23 | 이명한 | 반영 | 0.01 | | RQ-0014 | 로그인 화면 | 가운데 영역 | 카카오 로그인 버튼이 있다. | 2/23 | 이명한 | 반영 | 0.01 | ## 회원 - 회원가입이 가능하다. - 카카오톡, 깃허브 로그인이 가능하다. ## 가게 등록 - 로그인한 회원이 가게 등록이 가능하다 - 본인이 작성한 글은 수정과 삭제가 가능하다 ## 검색 - 게시물을 검색이 가능하다 ## 웨이팅 - 사용자가 원하는 시간에 웨이팅 시작, 중지가 가능하다. - 웨이팅 손님 취소, 전체취소가 가능하다. --- # ? 주요 폴더 및 파일 - users : 회원앱 - config : 프로젝트 - stores : 가게앱 - waiting : 웨이팅앱 - media : 동적으로 발생하는 정적파일들을 담는 폴더 - static : 정적으로 발생하는 정적파일들을 담는 폴더 - node_modules : node 패키지 - requirements : 의존성 - .env : 설정파일 - package.json : node 의존성 - git_pull_and_rerun.sh - Jenkins에 의해서 실행회되는 재배포 스크립트 - tailwind.config.js : 테일윈드 설정 # ? 주요기능 ``` ✔️ 회원관리(가입, 로그인 등) ``` ``` ✔️ 게시물 CRUD ``` ``` ✔️ 웨이팅 ``` ``` ✔️ 엘라스틱 검색엔진 ``` ``` ✔️ 반응형 ``` # ? 배포구조 - 커밋, 푸시, 젠킨스 빌드 유발, 컨테이너 내의 소스코드 리빌드 ## 서버 구조 $$uml !theme mars frame 작업자PC { frame Windows10 { frame Chrome { } } } frame 운영서버머신 { frame CentOS7(public．itseay．site,_172．17．0．1) { circle 172．17．0．1――8000 circle 172．17．0．1――443 circle 172．17．0．1――3306 frame Docker { frame Nginx――1 { circle Nginx――1――443 } frame Mariadb――1 { circle Mariadb――1――3306 } frame 밍크 { circle 기달――8000 } frame 기달――test { } } } } Chrome --> "172．17．0．1――443":1． https://wait．public．itseasy．site 로 접속 "172．17．0．1――443" --> "Nginx――1――443" : 2． 외부 443 => Nginx 내부 443 "Nginx――1――443" --> "172．17．0．1――8000" : 3． Nginx Proxy Manager 에 의해 => 외부 8000 "172．17．0．1――8000" --> "기달――8000" : 4． 외부 8000 => 기달 내부 8000 "기달――8000" -[#green]-* "172．17．0．1――3306" : 5． DB 쿼리, 내부 8000 => 외부 3306 "172．17．0．1――3306" -[#green]-* "Mariadb――1――3306" : 6． 외부 3306 => Mariadb__1 내부 3306 $$ ## 젠킨스 배포순서, 테스트 실패시 $$uml !theme toy autonumber box "작업PC" actor 개발자 entity 작업PC end box entity Github_Repository box "서버" entity Jenkins entity 테스트용_기달컨테이너 entity 실서버용_기달컨테이너 end box 개발자 -> 작업PC : Commit! 작업PC -> Github_Repository : Push! Github_Repository -> Jenkins : Webhook에 의해서 Commit Signal 전송 Jenkins -> 테스트용_기달컨테이너 : 재배포 스크립트 실행 테스트용_기달컨테이너 -> Jenkins : 테스트가 실패했습니다... Jenkins -> Jenkins : 이번 빌드는 실패로 처리하고, 작업을 종료합니다. 개발자 -> Jenkins : 해당 빌드의 콘솔기록을 확인하여 테스트가 왜 실패했는지 분석 $$ ## 젠킨스 배포순서, 테스트 성공시 $$uml !theme toy autonumber box "작업PC" actor 개발자 entity 작업PC end box entity Github_Repository box "서버" entity Jenkins entity 테스트용_밍크컨테이너 entity 실서버용_밍크컨테이너 end box 개발자 -> 작업PC : Commit! 작업PC -> Github_Repository : Push! Github_Repository -> Jenkins : Webhook에 의해서 Commit Signal 전송 Jenkins -> 테스트용_기달컨테이너 : 재배포 스크립트 실행 테스트용_밍크컨테이너 -> Jenkins : All Clear Jenkins -> 실서버용_기달컨테이너 : 리빌드 후 다시 실행하세요! 개발자 -> 실서버용_기달컨테이너 : Web Brouser로 Build 되었는지 확인 $$ # ? ERD ![원본이미지](https://raw.githubusercontent.com/audgks5551/image/737710b9bdb7c81dcb1983d5058fb9204eb28fd3/wait/graphviz_svg.svg) # ? 기술설명 ## ? 홈 ### ?️ 동작화면 ![원본이미지](https://github.com/audgks5551/image/blob/master/wait/home.PNG?raw=true) ![원본이미지](https://github.com/audgks5551/image/blob/master/wait/mobile_home.jpg?raw=true) ### ✍ 소스코드 >core/view.py ```java def home(request): current_user_id = request.user.id storeType_len = stores_models.StoreType.objects.count() amenity_len = stores_models.Amenity.objects.count() theme_len = stores_models.Theme.objects.count() taste_len = stores_models.Taste.objects.count() queryset = stores_models.Store.objects.all() paginator = Paginator(queryset, 50, orphans=5) page = request.GET.get("page", 1) store_list = paginator.get_page(page) search_form = stores_forms.SearchForm() context = { "store_list": store_list, "current_user_id": current_user_id, "storeType_len": storeType_len, "amenity_len": amenity_len, "theme_len": theme_len, "taste_len": taste_len, "search_form": search_form, } return render(request, "core/home_list.html", context) ``` >home_list.html ```java {% extends "base.html" %} {% block page_title %} list {% endblock page_title %} {% block content %}

추천 맛집

{% for store in store_list %} {% include "core/home_card.html" with store=store %} {% endfor %}

{% endblock content %} {% block nav-b %} {% include "partials/nav-b.html" with home=False person=True %} {% endblock nav-b %} ``` ## ? 회원가입 ### ?️ 동작화면 ![원본이미지](https://github.com/audgks5551/image/blob/master/wait/signup1.PNG?raw=true) ![원본이미지](https://github.com/audgks5551/image/blob/master/wait/mobile_signup1.jpg?raw=true) ### ✍ 소스코드 >users/view.py ```java class SignUpView(mixins.LoggedOutOnlyView, FormView): """ SignUp View """ template_name = "users/signup.html" form_class = forms.SignUpForm success_url = reverse_lazy("core:home") def form_valid(self, form): form.save() first_name = form.cleaned_data.get("first_name") email = form.cleaned_data.get("email") password = form.cleaned_data.get("password") user = authenticate(self.request, username=email, password=password) if user is not None: login(self.request, user) #user.verify_email() messages.info(self.request, f"{first_name}님 환영합니다") return redirect(self.get_success_url()) def complete_verification(request, key): try: user = models.User.objects.get(email_secret=key) user.email_verified = True user.email_secret = "" user.save() # to do: add succes message except models.User.DoesNotExist: # to do: add error message pass return redirect(reverse("core:home")) ``` >signup.html ```java {% extends "base.html" %} {% block page_title %} signup {% endblock page_title %} {% block search-bar %} {% endblock search-bar %} {% block content %}

회원가입

{% if form.non_field_errors %} {% for error in form.non_field_errors %} {{error}} {% endfor %} {% endif %}

{% include "partials/social_login.html" with name="회원가입" %}

{% endblock %} ``` ## ? 로그인/로그아웃 ### ?️ 동작화면 ![원본이미지](https://github.com/audgks5551/image/blob/master/wait/login.png?raw=true) ![원본이미지](https://github.com/audgks5551/image/blob/master/wait/login-mobile-v2.jpg?raw=true) ### ✍ 소스코드 >users/view.py ```java class LoginView(mixins.LoggedOutOnlyView, FormView): """ Login View""" template_name = "users/login.html" form_class = forms.LoginForm success_url = reverse_lazy("core:home") def form_valid(self, form): first_name = form.cleaned_data.get("first_name") email = form.cleaned_data.get("email") password = form.cleaned_data.get("password") user = authenticate(self.request, username=email, password=password) if user is not None: login(self.request, user) messages.info(self.request, f"{first_name}님 환영합니다") return redirect(self.get_success_url()) def log_out(request: HttpRequest): """ Logout View """ logout(request) messages.info(request, "다음에 또 만나요") return redirect(reverse("core:home")) ``` >login.html ```java {% extends "base.html" %} {% block page_title %} login {% endblock page_title %} {% block search-bar %} {% endblock search-bar %} {% block content %}

로그인

{% if form.non_field_errors %} {% for error in form.non_field_errors %} {{error}} {% endfor %} {% endif %}

회원가입

아이디/비밀번호 찾기

{% include "partials/social_login.html" with name="로그인" %}

{% endblock %} {% block nav-b %} {% include "partials/nav-b.html" with home=True person=False %} {% endblock nav-b %} ``` ## ?️ 가게 CRUD ### ?️ 동작화면 ![원본이미지](https://github.com/audgks5551/image/blob/master/wait/storeCreate1.png?raw=true) ![원본이미지](https://github.com/audgks5551/image/blob/master/wait/storeCreate.png?raw=true) ![원본이미지](https://github.com/audgks5551/image/blob/master/wait/storeCreateMobile1-modify2.jpg?raw=true) ![원본이미지](https://github.com/audgks5551/image/blob/master/wait/storeCreateMobile2-modify2.jpg?raw=true) ![원본이미지](https://github.com/audgks5551/image/blob/master/wait/storeCreateMobile3-modify2.jpg?raw=true) ### ✍ 소스코드 >stores/view.py - CREATE ```java @login_required def createStore(request): current_user_id = request.user.id if request.method == 'POST': store_form = forms.CreateStoreForm(request.POST) startWaiting_form = waiting_forms.StartWaitingForm(request.POST) if store_form.is_valid() and startWaiting_form.is_valid(): store = store_form.save(commit=False) store.user = request.user store.save() createQRcode(store) images = request.FILES.getlist('file') if images: for image in images: models.Image.objects.create(file=image, store=store) startWaiting = startWaiting_form.save(commit=False) startWaiting.store_id = store.id startWaiting.master_id = current_user_id startWaiting.save() messages.success(request, "가게가 생성되었습니다") return redirect(reverse("stores:detail", kwargs={"store_id": store.id})) else: store_form = forms.CreateStoreForm() startWaiting_form = waiting_forms.StartWaitingForm() add_photo_form = forms.AddPhotoForm() search_form = forms.SearchForm() storeType_len = models.StoreType.objects.count() amenity_len = models.Amenity.objects.count() theme_len = models.Theme.objects.count() taste_len = models.Taste.objects.count() context = { "store_form": store_form, "current_user_id": current_user_id, "add_photo_form": add_photo_form, "startWaiting_form": startWaiting_form, "search_form": search_form, "storeType_len": storeType_len, "amenity_len": amenity_len, "theme_len": theme_len, "taste_len": taste_len, } return render(request, "stores/stores_create.html", context) ``` >stores_create.html ```html {% extends "base.html" %} {% block page_title %} create {% endblock page_title %} {% block content %}

가게 등록하기

{% if form.non_field_errors %} {% for error in form.non_field_errors %} {{error}} {% endfor %} {% endif %}

{% endblock content %} {% block nav-b %} {% include "partials/nav-b.html" with home="home" person="person" %} {% endblock nav-b %} ``` --- - READ >stores/view.py ```python def detailStore(request, store_id): """ Detail Store """ current_user_id = request.user.id store = models.Store.objects.get(id=store_id) waiting_mode = waiting_models.StartWaiting.objects.get( store_id=store_id).mode search_form = forms.SearchForm() context = { "store": store, "current_user_id": current_user_id, "store_id": store_id, "waiting_mode": waiting_mode, "search_form": search_form } return render(request, "stores/stores_detail.html", context) ``` >stores_detail.html ```html {% extends "base.html" %} {% block page_title %} detail {% endblock page_title %} {% block content %}

{% if store.get_images %}

{% for image in store.get_images %} {% endfor %}

{% for image in store.get_images %}

{% endfor %}

{% else %}

{% endif %}

주소 {{ store.address }}

전화번호 {{ store.phone_number }}

가게유형 {{ store.store_type }}

가게유형 상세 {{ store.food_type }}

대표음식 {{ store.menu }}

편의성 {% for amenity in store.amenities.all %} {{ amenity.name }}, {% endfor %}

맛 {% for taste in store.tastes.all %} {{ taste.name }}, {% endfor %}

특징 {% for theme in store.themes.all %} {{ theme.name }}, {% endfor %}

태그 {{ store.tags }}

{% if waiting_mode %} 기달리기 {% else %} 기달리기 시작 전 {% endif %}

{% endblock %} {% block nav-b %} {% include "partials/nav-b.html" with home="home" person="person" %} {% endblock nav-b %} ``` --- - UPDATE >stores/view.py ```python @login_required def modifyStore(request, store_id): store = models.Store.objects.get(id=store_id) startWaiting = waiting_models.StartWaiting.objects.get(store_id=store_id) photo_list = models.Image.objects.filter(store_id=store_id) if request.method == 'POST': store_form = forms.CreateStoreForm(request.POST) startWaiting_form = waiting_forms.StartWaitingForm(request.POST) if store_form.is_valid() and startWaiting_form.is_valid(): store.name = store_form.cleaned_data['name'] store.address = store_form.cleaned_data['address'] store.store_type = store_form.cleaned_data['store_type'] store.phone_number = store_form.cleaned_data['phone_number'] store.food_type = store_form.cleaned_data['food_type'] store.amenities.set(store_form.cleaned_data['amenities']) store.tags = store_form.cleaned_data['tags'] store.save() images = request.FILES.getlist('file') if images: for image in images: models.Image.objects.create(file=image, store=store) startWaiting.wait_time = startWaiting_form.cleaned_data['wait_time'] startWaiting.table_number = startWaiting_form.cleaned_data['table_number'] startWaiting.save() messages.success(request, "가게가 수정되었습니다") return redirect(reverse("users:my_list")) else: store_form = forms.CreateStoreForm() startWaiting_form = waiting_forms.StartWaitingForm() add_photo_form = forms.AddPhotoForm() search_form = forms.SearchForm() store_form = forms.CreateStoreForm(instance=store) startWaiting_form = waiting_forms.StartWaitingForm(instance=startWaiting) add_photo_form = forms.AddPhotoForm() context = { "store_form": store_form, "startWaiting_form": startWaiting_form, "add_photo_form": add_photo_form, "search_form": search_form, "photo_list": photo_list, "store": store, } return render(request, "stores/stores_modify.html", context) ``` >stores_modify.html ```html {% extends "base.html" %} {% block page_title %} modify {% endblock page_title %} {% block content %}

가게 수정하기

{% if form.non_field_errors %} {% for error in form.non_field_errors %} {{error}} {% endfor %} {% endif %}

{% csrf_token %}

이미지를 클릭하면 자세히 볼 수 있습니다

{% if photo_list %} {% for photo in photo_list %}

가게 이미지 {{ forloop.counter }} 삭제

{% endfor %} {% endif %}

이미지 추가 업로드:

취소

{% endblock content %} {% block nav-b %} {% include "partials/nav-b.html" with home="home" person="person" %} {% endblock nav-b %} ``` --- - DELETE >stores/view.py ```python @login_required def deleteStore(request, store_id): store = models.Store.objects.get(id=store_id) store.delete() return redirect(reverse("users:my_list")) ``` ## (5) 검색 ### A. 동작화면 ▶ Desktop ![]() ▶ Mobile ![]() ![]() ### B. 소스코드 >stores/views.py ```python class SearchView(View): """ 검색 """ def get(self, request): current_user_id = request.user.id storeType_len = models.StoreType.objects.count() amenity_len = models.Amenity.objects.count() theme_len = models.Theme.objects.count() taste_len = models.Taste.objects.count() keyword = request.GET.get("keyword") if keyword: form = forms.SearchForm(request.GET) if form.is_valid(): #store_types = form.cleaned_data.get("store_type") amenities = form.cleaned_data.get("amenities", "") themes = form.cleaned_data.get("themes", "") tastes = form.cleaned_data.get("tastes", "") #store_type_list = [] # for store_type in store_types: # store_type_list.append(store_type.name) amenity_list = [] for amenity in amenities: amenity_list.append(amenity.name) theme_list = [] for theme in themes: theme_list.append(theme.name) taste_list = [] for taste in tastes: taste_list.append(taste.name) queryset, em_list = search.elasticsearch_search( keyword, amenity_list, theme_list, taste_list) paginator = Paginator(queryset, 30, orphans=5) page = request.GET.get("page", 1) store_list = paginator.get_page(page) return render( request, "stores/stores_list.html", { "search_form": form, "store_list": store_list, "current_user_id": current_user_id, "storeType_len": storeType_len, "amenity_len": amenity_len, "theme_len": theme_len, "taste_len": taste_len } ) else: search_form = forms.SearchForm() return render(request, "stores/stores_list.html", { "search_form": search_form, "current_user_id": current_user_id, "storeType_len": storeType_len, "amenity_len": amenity_len, "theme_len": theme_len, "taste_len": taste_len }) ``` >stores/search.py ```python # 검색 def elasticsearch_search(keyword, amenity_list, theme_list, taste_list): query = search.search_query(keyword, amenity_list, theme_list, taste_list) elasticsearch = Elasticsearch( "http://101.101.216.187:9200", http_auth=('elastic', 'elasticpassword'),) response = elasticsearch.search( index="waiting_2022_01_11__stores_store__v1", query=query, _source=["id", "name", "highlight"], size=100 ) result_list_1 = [] for hit in response['hits']['hits']: try: result_list_1.append(hit["highlight"]["nameNgram"]) except: result_list_1.append(hit["_source"]["name"]) result_list_2 = [] for hit in response['hits']['hits']: result_list_2.append(hit["_source"]["id"]) order = Case(*[When(id=id, then=pos) for pos, id in enumerate(result_list_2)]) queryset = models.Store.objects.filter( id__in=result_list_2).order_by(order) return queryset, result_list_1 # 자동완성 def elasticsearch_completion(keyword): query = search.completion_query(keyword) elasticsearch = Elasticsearch( "http://101.101.216.187:9200", http_auth=('elastic', 'elasticpassword'),) response = elasticsearch.search( index="waiting_2022_01_11__stores_store__v1", query=query, size=10, highlight={ "fields": { "nameNgram": {} } }, _source=["id", "name", "highlight"] ) result_list = [] for hit in response['hits']['hits']: try: result_list.append(hit["highlight"]["nameNgram"]) except: result_list.append(hit["_source"]["name"]) print(result_list) return result_list # 검색 쿼리 def search_query(keyword, amenity_list, theme_list, taste_list): if amenity_list == []: amenity = {"terms": {"amenity": ["기본"]}} else: amenity = {"terms": {"amenity": amenity_list}} if theme_list == []: theme = {"terms": {"theme": ["기본"]}} else: theme = {'terms': {'theme': theme_list}} if taste_list == []: taste = {"terms": {"taste": ["기본"]}} else: taste = {"terms": {"taste": taste_list}} query = { "bool": { "filter": [amenity, theme, taste], "should": [ {"match": {"nameNori": keyword}}, {"term": {"nameChosung": keyword}}, {"term": {"nameJamo": keyword}}, {"match": {"menuNori": keyword}}, {"term": {"menuChosung": keyword}}, {"term": {"menuJamo": keyword}}, {"match": {"storetypeNori": keyword}}, {"term": {"storetypeChosung": keyword}}, {"term": {"storetypeJamo": keyword}}, {"match": {"foodtypeNori": keyword}}, {"term": {"foodtypeChosung": keyword}}, {"term": {"foodtypeJamo": keyword}}, {"match": {"amenityNori": keyword}}, {"term": {"amenityChosung": keyword}}, {"term": {"amenityJamo": keyword}}, {"match": {"tasteNori": keyword}}, {"term": {"tasteChosung": keyword}}, {"term": {"tasteJamo": keyword}}, {"match": {"themeNori": keyword}}, {"term": {"themeChosung": keyword}}, {"term": {"themeJamo": keyword}}, {"match": {"addressNori": keyword}} ], "minimum_should_match": 1 } } return query # 자동완성 쿼리 def completion_query(keyword): jamo = getJamo(keyword) chusong = getChosung(keyword) query = { "bool": { "should": [ {"prefix": {"name": keyword}}, {"term": {"name": keyword}}, {"term": {"nameNgram": keyword}}, {"term": {"nameNgramEdge": keyword}}, {"term": {"nameNgramEdgeBack": keyword}}, {"term": {"nameChosung": keyword}}, {"term": {"nameJamo": keyword}} ], "minimum_should_match": 1 } } return query ``` --- ## 이상 포트폴리오 기술 설명을 마치겠습니다. 긴 글 읽어 주셔서 감사합니다.

? 기달 기술설명서