$$config title: ? Paracord 기술설명서 ? keywords: - 기술문서 - 기술설명서 - django - paracord - tailwind - jenkins - docker $$ $$config title: 파라코드 기술설명서 keywords: - IT - 기술문서 $$ # ✔️ 개요 ``` ? 여러사람들이 다같이 채팅할수있고 1:1 채팅할수있는 커뮤니티 채팅사이트 구현 ``` [Paracord 채팁웹 바로가기](https://paracord.public.ahncod.co.kr/) --- # ✔️ Github 리포지터리 ``` ? [https://github.com/taeate/chic-chat](https://github.com/taeate/chic-chat) ``` --- # ✔️ 사용된기술 --- ### ⚓️ 버전관리 ~~~ - Git , Github ~~~ ### ⚓️ 배포 ~~~ - ? Github ~~~ ~~~ - ☕️ Jenkins ~~~ ~~~ - ? Docker ~~~ --- ### ♻️ 개발환경 ``` - Anaconda - Sqlyog - Chrome - Firefox - Window 11 - PIP ``` --- ### ? 서비스환경 ``` - Nginx - Mariadb - Docker - CentOS7 ``` --- ### ? 기술 스택 ``` - Python 3 - Django 4 - Django MTV - Django DRF - MariaDB - HTML,CSS,JS - JQuery - Tailwind - Bootstrap - daisy ``` --- # ✔️ 요구사항 ### ? 회원 ``` - 회원가입 - 로그인 - 로그아웃 - 로그인 로그아웃 상태 표시 - 친구검색 - 친구찾기 - 친구추가 - 친구목록 - 유저전체목록 - 온라인유저목록 - 온라인친구목록 ``` --- ### ? 채팅 ~~~ - 채팅방만들기 - 채팅방나가기 - 채팅방 목록 - 채팅방검색 - 단체채팅 - 다이렉트메세지 - 알림메세지 ~~~ --- # ✔️ 기능 ### ? 회원 ~~~ - 회원가입시 로그인 할수있는 회원이 만들어진다. ~~~ ~~~ - 로그인시 회원으로 접속이 가능하다. ~~~ ~~~ - 로그아웃이 된다. ~~~ ~~~ - 온라인유저는 초록불, 오프라인유저는 빨간불 로 구별할수있다 ~~~ ~~~ - 친구 검색을 통해 친구를 검색할수있다 ~~~ ~~~ - 알림메세지를 통해 입 퇴장 메세지를 알려줄수있다 ~~~ ~~~ - 전체 회원을 보여줄수있다 ~~~ ~~~ - 친구 추가한 전체 친구목록을 보여줄수있다 ~~~ ~~~ - 전체 온라인 유저를 볼수있다 ~~~ ### ? 채팅 ~~~ - 채팅방만들기시 유저들과 채팅할수있는 채팅방을 만들수있다 ~~~ ~~~ - 채팅방나가기시 채팅방을 나갈수있다 ~~~ ~~~ - 채팅방검색을 통해 원하는 채팅방 을 찾을수있다 ~~~ ~~~ - 메인 아이콘을 을 통해 전체채팅방목록 을 볼수있다 ~~~ ~~~ - 단체채팅방을 만들어서 단체채팅을 할수있다 ~~~ ~~~ - 친구창에 다이렉트 메세지를 눌러 친구와 1:1 채팅 할수있다 ~~~ ~~~ - 시스템 메세지 구현을 통해 채팅방 입장 퇴장 알림메세지를 출력할수있다 ~~~ --- # ✔️ 요구사항 현황 | 기능 | 구현 | 배포 | 테스트 | | --- | --- | --- | --- | | 회원가입 | ✔️ | ✔️ | ✔️ | | 로그인 | ✔️ | ✔️ | ✔️ | | 로그아웃 | ✔️ | ✔️ | ✔️ | | 로그인 로그아웃 상태 표시 | ✔️ | ✔️ | ✔️ | | 친구검색 | ✔️ | ✔️ | ✔️ | | 친구찾기 | ✔️ | ✔️ | ✔️ | | 친구추가 | ✔️ | ✔️ | ✔️ | | 친구목록 | ✔️ | ✔️ | ✔️ | | 유저천제목록 | ✔️ | ✔️ | ✔️ | | 온라인친구목록 | ✔️ | ✔️ | ✔️ | | 채팅방 생성 | ✔️ | ✔️ | ✔️ | | 채팅방 나가기 | ✔️ | ✔️ | ✔️ | | 채팅방 삭제 | ✔️ | ✔️ | ✔️ | | 채팅방 검색 | ✔️ | ✔️ | ✔️ | | 다이렉트메세지 | ✔️ | ✔️ | ✔️ | | 시스템알림메세지 | ✔️ | ✔️ | ✔️ | | 채팅 로딩 | ❌ | ❌ | ✔️ | | 채팅 알림 | ❌ | ❌ | ❌ | # ✔️ ERD ![ERD](https://i.postimg.cc/zz4DBN0t/graphviz.png) --- # ✔️ 주요 폴더 및 파일 ```py - accounts : 회원앱 - base : 프로젝트 - chat : 채팅앱 - static : 정적으로 발생하는 정적파일들을 담는 폴더 - requirement : 의존성 파일 - .env : 설정파일 - package.json : node 의존성 - nodemodules : node 패키지 - docker-compose.yaml : 가상컨테이너 오케스트레이션 파일 - dockerfile : Docker Image를 만들기 위한 설정 파일 - tailwind.config.js : 테일윈드 설정 ``` ___ # ? 배포 구조 - 커밋, 푸시, 젠킨스 빌드 유발, 컨테이너 내의 소스코드 리빌드 --- # ✔️ 기술설명 1 ### ▶️ 1-1 로그인창 ![로그인창](https://i.postimg.cc/9VmhsR3Y/login.png) ```python

Paracord

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi

``` ```python def login(request: HttpRequest): if request.method == 'POST': username = request.POST['username'] password = request.POST['password'] user = User.objects.filter(username=username).first() if user and user.check_password(password): auth_login(request, user) user.is_active = 1 user.save() messages.success(request, f"돌아오셨군요ㅠㅠ {user.nickname}님..") return redirect('chat:list') else: messages.warning(request, "잘못된 아이디/비밀번호 입니다.") return redirect('accounts:login') return render(request, 'main.html') ``` ~~~ ? Tailwind 와 Daisy 를 사용한 html 코드 ~~~ --- ### ▶️ 1-2 친구목록 ![친구목록](https://i.postimg.cc/KZbgJ93N/image.png) ```python {% for friend in user.friends.all %} {% endfor %} ``` ~~~ ? for문 을 사용하여 전체유저에 친구만 출력하도록하였다 ~~~ --- ### ▶️ 1-3 전체 유저목록 ![잔체유저목록](https://i.postimg.cc/Yp8fgcDg/image.png) ```python {% for use in users %}

{% endfor %} ``` ~~~ ? for문 을 사용하여 전체유저를 출력하도록하였다. 그리고 is_active 를 사용하여 online/offline 표시를 구현했다. ~~~ ---- ### ▶️ 1-4 친구검색 ![친구검색](https://i.postimg.cc/FND92D6p/image.png) ```python {% for i in find_friend %}

{% endfor %} ``` ![친구검색2](https://i.postimg.cc/c1Kf3rPt/2.png) ~~~ ? for문 을 이용하여 친구검색을 구현했다. ~~~ ---- # ✔️ 기술설명 2 ### ▶️ 2-1 채팅방만들기 ![방만들기](https://i.postimg.cc/ryCMQ9BB/image.png) ```python ``` ~~~ ? Modal 을 이용하여 다른페이지로가는 불편함을 없애고 바로 방을 만들수있다. ~~~ ---- ### ▶️ 2-2 채팅방나가기 ![채팅방나가기](https://i.postimg.cc/sxZSCN54/2022-02-24-10-10-31.png) ~~~ ? Modal 을 이용하여 다른페이지로가는 불편함을 없애고 바로 방을나갈수있다 ~~~ ---- ### ▶️ 2-3 채팅방목록 ![채팅방목록](https://i.postimg.cc/1X6Hrt7S/2022-02-24-10-15-00.png) ```python {% if rooms %} {% for room in rooms %}

{% if room.part_server %}

{% else %} {% endif %}

{% endfor %} {% else %}

채팅방 is lonely...

{% endif %} ``` ```python def room_list(request): kw = request.GET.get('kw') if kw: rooms = Room.objects.filter(name__icontains=kw) | Room.objects.filter(name__startswith=kw) else: rooms = Room.objects.prefetch_related( Prefetch('part_user', queryset=User.objects.filter(id=request.user.id), to_attr='part_server')) users = User.objects.all() context = {'rooms': rooms, 'users': users} return render(request, 'chat/room_list.html', context) ``` ~~~ ? 모든 Room object 를 받아와 HTML 로 넘겨주는 python 코드 (kw는 채팅방 검색에서 이용된다.) ~~~ ---- ### ▶️ 2-4 채팅방검색 ![채팅방검색](https://i.postimg.cc/6pQZ9qVQ/2022-02-24-10-20-01.png) ![채팅방검색2](https://i.postimg.cc/tJ51bGYP/2022-02-24-10-21-56.png) ```python ``` ```python def room_list(request): kw = request.GET.get('kw') if kw: rooms = Room.objects.filter(name__icontains=kw) | Room.objects.filter(name__startswith=kw) else: rooms = Room.objects.prefetch_related( Prefetch('part_user', queryset=User.objects.filter(id=request.user.id), to_attr='part_server')) users = User.objects.all() context = {'rooms': rooms, 'users': users} return render(request, 'chat/room_list.html', context) ``` ~~~ ? 'Get' 방식으로 요청하여 키워드를 찾고 채팅방을 검색할수있다. ~~~ ---- ### ▶️ 2-5 단체채팅방 ![단체채팅방](https://i.postimg.cc/Kz9Sh9mj/2022-02-24-10-27-31.png) ```python ``` ~~~ ? Ajax 를 이용하여 다시 로딩하지 않고도 브라우저가 비동기 방식으로 통신할수있다. ~~~ ---- ### ▶️ 2-6 다이렉트메세지 ![다이렉트메세지](https://i.postimg.cc/N0MZ766w/2022-02-24-10-32-25.png) ![다이렉트메세지2](https://i.postimg.cc/c4Sj5yRh/2022-02-24-10-34-21.png) ```python def dm_create(request,user_nickname): otheruser=User.objects.get(nickname=user_nickname) code1 = otheruser.nickname code2 = request.user.nickname code = sorted([code1,code2]) code = code[0]+code[1] room = Room.objects.filter(name=code) if room: return redirect('chat:dm_detail', room_id=room.first().id) room = Room(host=request.user,name=(code1+code2)) room.room_type = 'direct' room.save() room.part_user.add(request.user) room.part_user.add(otheruser) return redirect('chat:dm_detail',room_id=room.id) def dm_detail(request, room_id): room = Room.objects.get(id=room_id) room_detail = "집에 보내줘" context = {'room': room, 'room_detail': room_detail} return render(request, 'chat/room_detail.html', context) ``` ~~~ ? 다이렉트 메세지를 통해 다른유저들에게 채팅방이 보여지지않고 1:1 채팅이 가능하다. ~~~ ---- ### ▶️ 2-7 시스템메세지 ![시스템메세지](https://i.postimg.cc/fTzC9w7G/2022-02-24-10-39-07.png) ~~~ ? 단체채팅방에서 시스템메세지를 통해 누가 입장했는지 누가 퇴장했는지 보여줄수있다 ~~~ ---- # 배포 ## 서버구조 ![uml](https://i.postimg.cc/dvF0RVcp/image.png) --- ## 젠킨스구조 ![젠킨스배포](https://i.postimg.cc/rFP1tmWK/jenki.png) --- # ⚙ 기능 테스트 ## ? 회원 - ✅회원가입 : 2022-02-23 - ✅로그인 : 2022-02-23 - ✅로그아웃 : 2022-02-23 - ✅로그인 로그아웃 상태 표시 : 2022-02-23 - ✅유저 검색 : 2022-02-23 - ✅안내 메시지 : 2022-02-23 - ✅모든 회원 리스팅 : 2022-02-23 - ✅모든 친구 리스팅 : 2022-02-23 - ✅모든 온라인 유저 리스팅 : 2022-02-23 ## ? 채팅 - ✅채팅방 만들기 : 2022-02-23 - ✅채팅방 나가기 : 2022-02-23 - ✅채팅방 삭제 : 2022-02-23 - ✅채팅방 찾기 : 2022-02-23 - ✅단체 채팅 : 2022-02-23 - ✅다이렉트 메세지 채팅 : 2022-02-23 - ✅친구찾기 : 2022-02-23 - ✅친구추가 : 2022-02-23 - ✅시스템 메시지 추가 : 2022-02-23 - ✅모든 채팅방 리스팅 : 2022-02-23 - ✅내가 참가중인 채팅방 리스팅 : 2022-02-23 - ✅내가 만든 채팅방 리스팅 : 2022-02-23