협성대학교 소프트웨어학과 팀 프로젝트
개발기간 : 2024-07 ~ 2024-09
프론트 엔드 : https://github.com/Chat-east/android
백 엔드 : https://github.com/Chat-east/backend
| 이진수 | 정필선 |
|---|---|
| @kiwijuse | @pill27211 |
| 협성대학교 소프트웨어학과 4학년 | 협성대학교 소프트웨어학과 4학년 |
학교 졸업작품으로 AlgoWiki를 개발하면서, 남은 과제 중 하나로 채점 진행률 실시간 업데이트가 있었습니다. 이를 위해서 적절한 통신 기술이 필요했지만 당시 저희는 이쪽 지식이 전무한 상태였고, 이참에 통신 공부를 제대로 해보자 다짐하였습니다.
이에 저희는 Express 기반의 서버와 Socket.IO를 필두로 채팅 앱을 바닥부터 구현하기로 했으며, Retrofit2를 이용한 REST API 통신, Firebase Cloud Messaging, WebRTC와 같이 외부 API를 우리의 DB 구조, 목적에 맞게 활용하는 방법 또한 터득하였습니다.
Developing AlgoWiki as a school graduation work, there was a real-time update of the scoring progress as one of the remaining tasks. We needed proper communication skills for this, but we didn't have any knowledge at the time, and we decided to take this opportunity to study communication properly.
In response, we decided to implement chat apps from the bottom, starting with Express-based servers and Socket.IO, and we also learned how to use external APIs for our DB structure and purpose, such as REST API communication using Retrofit2, Firebase Cloud Messaging, and WebRTC.
For building and running the application you need:
$ git clone https://github.com/pill27211/Chat-east.git
$ sudo apt update
$ sudo apt install mysql-server
$ sudo mysql_secure_installation
$ sudo service mysql start
$ sudo mysql -e "CREATE DATABASE chat_east;"
$ sudo mysql -e "CREATE USER 'root'@'localhost' IDENTIFIED BY '0000';"
$ sudo mysql -e "GRANT ALL PRIVILEGES ON chat_east.* TO 'root'@'localhost';"
$ sudo mysql -e "FLUSH PRIVILEGES;"
# Run Background
$ npm install -g pm2
$ pm2 start index.js --name backend-server
# Run Foreground
$ nodemon index.js
$ git clone https://github.com/pill27211/Chat-east.git
# Backend
1. Firebase에서 프로젝트를 생성합니다.
2. 서비스 계정 - Firebase Admin SDK에서 새 비공개 키를 생성합니다.
3. 생성된 json 파일의 이름을 'service_account_key'로 변경한 뒤 'backend/utils/' 에 붙여넣습니다.
4. 로컬 호스트가 아닌 곳에 배포를 하고자 한다면, 적절한 포트 포워딩이 필요할 수 있습니다. 'backend/utils/.env'를 참고하세요.
# Frontend
1. 생성한 Firebase 프로젝트에 Chat-east 앱을 등록합니다.
2. 프로젝트 설정 - 일반 - 내 앱에서 접속할 곳의 SHA1(SHA 256) 키를 등록합니다.
3. 생성된 google-services.json 파일을 'android/Chat_east/app/'에 붙여넣습니다.
친구 화면
| 친구 리스트 뷰 | 프로필 설정 뷰 | 친구 태그로 친구 추가 뷰 |
|---|---|---|
채팅 화면
| 채팅 리스트 뷰 | 채팅 방 뷰 | 채팅방 알림 기능 뷰 |
|---|---|---|
| 채팅 사이드바 뷰 | 전화 뷰 | 사진 앨범 뷰 |
| 친구 초대 뷰 | 채팅방 만들기 뷰 | 채팅방 부가기능 뷰 |
설정 화면
| 설정 리스트 뷰 | 알림 설정 뷰 |
|---|---|
전체 영상
- 친구의 태그를 검색해서 친구 추가 / 차단 / 1:1 대화 가능
- 원하는 친구와 채팅방 개설 / 채팅방에서 친구 초대 가능
- 프로필 이미지 / 배경 이미지 / 한줄 소개를 자유롭게 변경 가능
- 사진 / 음성 / 파일 전송 & 다운로드 가능
- 채팅방에 전송된 사진을 원본 화질로 다운로드 / 열람 가능
- 채팅방에 전송되었던 사진들을 한눈에 채팅방 앨범에서 열람 가능
- 통화 기능을 통해 원하는 사람과 1:1 통화 가능
- 알림 기능을 통해 실시간 채팅현황 확인가능 / 해당 채팅이 온 채팅방으로 바로 이동 가능
backend : 백엔드 (서버)
├── node_modules
├── socket_events : 클라이언트와 주고받는 소켓 이벤트들이 정의된 폴더
│ ├── chatroom.js
│ ├── disconnect.js
│ ├── friend.js
│ ├── login_success.js
│ ├── message.js
│ ├── profile.js
│ └── setting.js
├── upload_files : 클라이언트에서 업로드한 파일이 실제 저장되는 폴더
├── utils : 그 외 기타 보조 폴더
│ ├── .env : 서버 환경 변수
│ ├── db_schema.png
│ ├── db_schema.sql : DDL(MYSQL)
│ ├── file_upload.js
│ ├── firebase.js : 클라이언트 푸시 알림을 위한 Firebase Admin SDK 초기화
│ ├── functions.js
│ └── service_account_key.json
├── README.md
├── error_log.txt : DB 쿼리 에러 발생 시 자동으로 기록되는 로그 파일
├── index.js : 서버 메인 구동 파일
├── package-lock.json
└── package.json
android : 프론트엔드 (앱)
├── README.md
├── image : Chat-east 소개용 이미지 폴더
├── Chat_East
│ ├── .gitignore
│ ├── build.gradle.kts
│ ├── gradle.properties
│ └── gradle
│ ├── wrapper
│ └── libs.versions.toml
└── app
├── .gitignore
├── build.gradle.kts
├── google-services.json
└── src/main
├── AndroidManifest.xml
├── AndroidManifest.xml
├── res : 디자인 관련 폴더
└── java/com/example/chat_east : 화면에 표시되는 뷰와 관련된 레이아웃 및 컴포넌트를 관리하는 폴더
├── add_friend.java
├── call.java
├── chat_db_helper.java
├── chat_db_manager.java
├── chatroom_img.java
├── chatroom_img_adapter.java
├── chatroom_invite.java
├── chatroom_list_adapter.java
├── chatting_room.java
├── create_chatroom.java
├── firebase_message_service.java
├── friend_db_helper.java
├── friend_db_manager.java
├── friend_list_adapter.java
├── image_util.java
├── image_util_download.java
├── image_util_profile.java
├── invite_friend_list_adapter.java
├── invite_friend_search_adapter.java
├── login_activity.java
├── login_check.java
├── main_chatting.java
├── main_friend.java
├── main_setting.java
├── message_adapter.java
├── message_receive.java
├── notification_check.java
├── photo_view.java
├── profile_adapter.java
├── profile_view.java
├── save_image_task.java
├── save_image_task_download.java
├── save_image_task_profile.java
├── side_bar_friend_list_adapter.java
├── api : 서버와 REST API 통신을 하기 위한 인터페이스들이 정의된 폴더
│ ├── retrofit2_api_chatroom.java
│ ├── retrofit2_api_profile.java
│ └── retrofit2_api_service.java
└── setting : 설정 뷰와 관련된 레이아웃 및 컴포넌트를 관리하는 폴더
├── friends_activity.java
├── logout_activity.java
├── notifications_activity.java
└── profile_activity.java