OctoHoon/EatAndTell-swpp-2023

swpp 2023 Fall 🚀 [EatAndTell 프로젝트](https://github.com/snuhcs-course/swpp-2023-project-team-15))

🍱 맛집 추천 SNS EAT(Eat And Tell)

프로젝트 소개

• 해당 프로젝트는 2023학년도 2학기 컴퓨터공학부 전공 소프트웨어 개발의 원리와 실습 수업으로 진행된 프로젝트로, 팀원들이 직접 고안한 서비스 컨셉과 기획을 바탕으로 안드로이드 어플을 개발한 것입니다.
• 사용자가 업로드한 맛집 리뷰를 바탕으로 사용자의 취향을 분석하고 그와 어울리는 태그를 추출해서 유저 맞춤형 맛집을 추천해주는 새로운 방법을 제공합니다.

System Design

System Architecture

We will develop a 3-tier application comprising the presentation, application, and data tiers.

In the presentation tier, an Android application will be crafted using Kotlin and Jetpack Compose.

The backend, representing the application tier, will be hosted on Amazon EC2. The typical User API will mainly utilize Django, and machine learning classification will be powered by the Huggingface library and Pytorch. We will also utilize Kakao API as an external API for searching restaurants and crawling data for tag classification of posts.

For the data tier, we will use RDS with MySQL. Since users will upload images, AWS S3 will also be integrated.

Class Diagrams and Data Models

Data Model

The following diagram illustrates an Entity Relationship Diagram (ERD) outlining the Django models for our service. Each box corresponds to an individual model and delineates its associated fields. The arrows signify the relationships between the models, capturing the intricate connections within our system.

This database schema represents a system for managing user-generated content related to restaurant experiences. Users can create posts about restaurants, with each post linked to a specific user and restaurant. Users can also establish relationships by following or being followed by other users. Additionally, users can get user tags identified through preference analysis AI, and posts can include multiple photos. The schema also includes a mechanism for users to like posts, creating a many-to-many relationship between users and posts.

Frontend Class Diagram

The frontend class diagram consists of mainly three kind of classes.

• Activities: There are two activities in our app, which are StartActivity and AppMainActivity. StartActivity is the first screen that users see when they open the app. It is responsible for showing the splash screen and redirecting to the login screen. AppMainActivity is the main screen of the app. It is responsible for showing the bottom navigation bar and switching between different screens.
• View Models: There are two view models in our app, which are AppMainViewModel and StartViewModel, each corresponding to the activity of the same name. These view models are responsible for handling the business logic of the corresponding activity.
• Repository: There is one single ApiRepository class in our app. This class is responsible for handling all the API calls to the backend server.
• Composables: There are various composables responsible for rendering different screens,and are marked with @Composable in our class diagram. These composables are used in the corresponding activity's layout.

Backend Class Diagram

The backend class diagram consists of mainly three parts, which are posts, tags, users. These parts represents three internal apps of Django, each consisting several relevant model classes.

• App posts contains Post, PostPhotos, Restaurant models.
• App tags contains Tag models.
• App users contains User, Follow models.

These models are connected with each other through foreign key relationships. For example, Post model has a foreign key to Restaurant model, and PostPhotos model has a foreign key to Post model. These relations are represented as arrows in the diagram.

Implementation Details

Frontend Views

Landing Page, Log-In Page, Sign Up Page

• Landing Page

  • This is the landing page. It redirects to the login screen automatically after 1 second.

• Log-In Page

  • On this page, you can log in by entering your username and password.
  • If the login information is incorrect, a toast message indicating login failure will appear.
  • If you don't have an account, you can navigate to the sign-up screen using the signup button.

• Sign Up Page

  • This is the sign-up page. You can sign up by providing your email, username, and password.
  • The password visibility toggle button on the right enhances user convenience.
  • If the entered information is incorrect or doesn't meet the requirements, relevant toast messages will appear.
  • Upon successful registration, you will be automatically logged in and redirected to the home screen.

�Splash Screen

• Splash Screen

  • This screen appears exclusively for first-time users (newly signed up), introducing them the app's features.
  • The app uses AI to analyze users' reviews and preferences, creating personalized tags for tailored recommendations.

After logging in to the app, you can navigate to the home page, search page, upload page, and your profile page using the bottom navigation bar.

Home Page

• Home Page

  • This is the home page. It provides two types of feed for the user.
  • The first type is a personalized recommendations of reviews from users with similar tastes(tags).
  • The second type consists of reviews from other users the current user follows.
  • Each review includes the uploader's profile, name, one-line introduction, photos, rating, restaurant name, review description, like count, and like status of loginned user.
  • Photos of each reviews can be scrolled horizontally, and all reviews can be scrolled vertically. You can see larger image pop-up by clicking on each photo
  • You can navigate to search page, upload page, and your profile page using the bottom navigation bar.

User Profile page, Edit Profile page

• User Profile Page

  • This is the user profile page. It provides 1) profile information and 2) two types of feed for the user. There are MY feed for posted reviews, and LIKED feed for saving reviews you pressed Like.
  • Aside the profile, there are follower and following information, and clicking on them shows list of followers and followings respectively. Also, there is "프로필 편집" button that triggers navigation to the edit profile page.
  • Personalized tags for each users are displayed below. If the user clicks the "태그 갱신" button under the tags, personalized tags based on the user's reviews will be updated.
  • If this is profile of another user, there is follow toggle button instead of "프로필 편집", showing following status. Also, only posted reviews can be seen, not liked. Lastly, there will be no "태그 갱신" button.
  • Finally, you can scroll vertically to see reviews.
  • You can navigate to search page, upload page, and home page using the bottom navigation bar.

• Edit Profile Page

  • In the edit profile page, you can either edit your profile image and one-line description, or log-out.

Search Page

• Search Page

  • This is the search page. You can choose a category you want to search (out of "유저", "태그", "식당") by pressing a button under the search bar. Every search can be done on value change of search text, pressing Enter, or clicking the search icon.
  • "유저" mode searches users by user id. All users containing the search text are shown.
  • "태그" mode searches users by user tags. Unlike user id, tag must be exact match.
  • "식당" mode searches posts by restaurant names. All posts about restaurants containing the search text are shown.
  • You can navigate to home page, upload page, and your profile page using the bottom navigation bar.

Review Upload Page

• Review Upload Page

  • This is the review upload page. You can upload a review by adding photos from your gallery.
  • By clicking the "식당 검색" button, you can search for the restaurant you want to review and select it.
  • After adding ratings and review description, you can upload the review by clicking the "리뷰 작성" button at the bottom. Photos are optional.

Testing Plan

Unit Testing & Integration Testing

Android App [ Frontend ]

For android app, we are using JUnit 4 for unit testing and integration testing. Additionally, we are using mockk for mocking objects and coroutines for asynchronous testing. We are focusing on testing the business logic of the app, which is mainly implemented in the ViewModel. Integration tests are also performed to check interactions between ViewModels and the Repository, ensuring correct API communication with the backend and proper data flow throughout the app.

Django App [ Backend ]

For Django app, we are using unit test library and django testing library for API testing. We have 80% of code coverage over important code, excluding migration files. We are excluding migration files because they are automatically generated by Django and are not part of our codebase. Especially for all views.py, models.py files, we accomplished more coverage than 75%.

Test Coverage Report

| As shown below in Figure 1 we tested 13 methods for StartViewModel in start package & 50 methods for AppMainViewModel in appmain package.

Figure1. Overall Coverage Report

| As shown below in Figure 2 & 3 , we covered 92.9% for StartViewModel & 89.6% for AppMainViewModel.

Figure2. StartViewModel Coverage Report

Figure3. AppMainViewModel Coverage Report

We used Jetpack’s Composable functions across all ScreenKt Classes. Composables are a modern toolkit for building native UIs in Android. They don't need a unit test for the following reasons.

• Composables are declarative which is they describe what the UI should look like for a given state, rather than detailing the steps to construct the UI.
• Composables are side-effect-free and only responsible for UI rendering based on the inputs they receive.

Therefore, they don't contain logic that needs to be verified through unit tests.

So, we replaced them through an integration test that verifies the interaction between different parts of our app using Compose Testing Library. It is shown below in Figure4.

Figure4. Integration Test Coverage Report

Figure5. Backend Test Coverage Report

Acceptance Testing

We plan to test 5 user stories for User Acceptance Testing. This stories are also listed in Requirements & Specifications.

1. As a user, I want to search for other users by their usernames or user tags, so I can connect with people who share similar food tastes with me.
2. As a user, I want to write and post reviews for restaurants, including details like the restaurant's name, photos, ratings, and comments, so I can share my dining experiences with others.
3. As a user, I want to receive personalized tags at my profile based on my previous reviews, so my profile appropriately represents my food tastes.
4. As a user, I want to record my dining history by reviews and view those of others' that I liked, so that I can revisit and go down my memory lane.
5. As a user, I want to follow other users that has similar tastes with me, so I can keep up with their reviews at home feed.

ML Accuracy Testing

• Dataset: Reviews from Naver, Kakao, generated by ChatGPT, and personal reviews (Total: 40)
• Objective: Heuristically select appropriate atmosphere tags for each review (choose two in ambiguous cases).
• Success Criteria: Test passes if the selected tag appears in the review.

First Testing Phase

• Total Reviews Tested: 27
• Failures: 6
  • Issue: The tag 'friendly service' was too generic and applied to many reviews.
  • Solution: Modified the tag to 'excellent staff service' and lowered the score threshold from 0.3 to 0.23.

Second Testing Phase

• Total Reviews Retested: 27
• Failures: 1
  • Improvement: Significant decrease in failures post-adjustments.

Additional Testing

• New Total Reviews Tested: 40
• Failures: 2
  • Result: Majority (38/40) passed, indicating successful tag application and improved algorithm performance.

Conclusion: The adjustments to the tag and score threshold resulted in more accurate and relevant tag application in the reviews.