Customer Milestone 3 Report - bounswe/bounswe2024group4 GitHub Wiki

Our project is an NBA Forum that users can create post related to the NBA and interact with others using properties like following, commenting on posts and liking post. Users can also store some posts that they might to want to check out later using the bookmark feature. Also, users can find information about NBA teams and players using the dedicated pages of teams and players. These informations are retrieved using Wikidata.

From the first milestone deadline until now, we updated requirements for project according to feedback, added diagrams to describe the structure of implementation and connections of the applications with users and implemented project to most of the requirements.

You can find our initial requirements here, below list is made using this page. And here is the link for our final requirements which is completely matching the information below.

1. Functional Requirements

1.1 User Requirements

1.1.1 Member Requirements

1.1.1.1 Authentication

• 1.1.1.1.1 - Mostly done (not checking whether the email address exists or not)
• 1.1.1.1.2 - Done
• 1.1.1.1.3 - Done
• 1.1.1.1.4 - Not done
• 1.1.1.1.5 - Mostly done (can't change username)
• 1.1.1.1.6 - Done

1.1.1.2 Account

• 1.1.1.2.1 - Done with changes (not able to edit username on web and mobile, not able to edit profile picture on mobile, able to see number of followers and followed people on web and mobile, able to see list of these in web)
• 1.1.1.2.2 - Not done
• 1.1.1.2.3 - Not done
• 1.1.1.2.4 - Not done
• 1.1.1.2.5 - Not done

1.1.1.3 User activities

• 1.1.1.3.1 - Done
• 1.1.1.3.2 - Done
• 1.1.1.3.3 - Done

1.1.1.4 Member activities

• 1.1.1.4.1 - Done
• 1.1.1.4.2 - Mostly done (can't post videos)
• 1.1.1.4.3 - Done
• 1.1.1.4.4 - Not done
• 1.1.1.4.5 - Done
• 1.1.1.4.6 - Done
• 1.1.1.4.7 - Done
• 1.1.1.4.8 - Done

1.1.2 Guest Requirements

1.1.2.1 Guest activities

• 1.1.2.1.1 - Mostly done (can't view user posts)

1.2 System Requirements

1.2.1 Main page

• 1.2.1.1 - Done
• 1.2.1.2 - Not done
• 1.2.1.3 - Done
• 1.2.1.4 - Partially done (only following feed)
• 1.2.1.5 - Not done
• 1.2.1.6 - Not done

1.2.2 Team pages

• 1.2.2.1 - Done with extra (also show division)
• 1.2.2.2 - Done

1.2.3 Player pages

• 1.2.3.1 - Done with changes (age replaced by date of birth, jersey number replaced by awards received)
• 1.2.3.2 - Done

1.2.4 Search constraints

• 1.2.4.1 - Done
• 1.2.4.2 - Not done (returns nothing when there is no match)
• 1.2.4.3 - Done
• 1.2.4.4 - Done with extra (returns user posts on web and mobile and users on web)
• 1.2.4.5 - Partially done (returns result if the query is contained in result)
• 1.2.4.6 - Not done
• 1.2.4.7 - Not done

1.2.5 Posts

• 1.2.5.1 - Mostly done (can't upload videos on web and mobile, can't upload images on mobile)
• 1.2.5.2 - Partially done (only web has the feature)
• 1.2.5.3 - Partially done (user has to specify the word to contain the link, only available in web)

1.2.6 Profile Page

• 1.2.6.1 - Done
• 1.2.6.2 - Done

2. Non-Functional Requirements

2.1 Accessibility & Availability

• 2.1.1 - Done
• 2.1.2 - Done
• 2.1.3 - Mostly done (mobile has some additional features missing)

2.2 Performance & Reliability

• 2.2.1 - Not tested
• 2.2.2 - Mostly done (Wikidata API retrievals may fail)
• 2.2.3 - Not done

2.3 Privacy

• 2.3.1 - Not done
• 2.3.2 - Not done
• 2.3.3 - Not done

2.4 Security

• 2.4.1 - Not tested
• 2.4.2 - Not tested
• 2.4.3 - Done

2.5 Scalability

• 2.5.1 - Not done
• 2.5.2 - Done
• 2.5.3 - Not tested

2.6 Maintainability

• 2.6.1 - Not tested
• 2.6.2 - Done
• 2.6.3 - Done

2.7 Compatibility

• 2.7.1 - Done
• 2.7.2 - Done
• 2.7.3 - Not tested

The basic functionality of the application -mobile part- is explained with the screenshots here.

The basic functionality of the application -web part- is explained with the screenshots here.

Deliverable	Status	Due Date	Related Link
Repo	Delivered on time	17 May 2024 at 22:00	Repo
Release Tag	Delivered on time	17 May 2024 at 22:00	Release Tag 2
Application Deployed using Docker	Delivered on time	17 May 2024 at 22:00	http://64.226.89.39:3000
APK file for Mobile Application	Delivered on time	17 May 2024 at 22:00	Assets part of Release Tag 2
Documented API	Delivered on time	19 May 2024 at 12:00	http://64.226.89.39:8000/swagger/
Final SRS	Delivered on time	19 May 2024 at 12:00	Final SRS
Final Design Diagrams	Delivered on time	19 May 2024 at 12:00	Final Use Case Diagrams Final Sequence Diagrams Final Class Diagrams
Project Plan	Delivered on time	19 May 2024 at 12:00	Github Roadmap
RAM	Delivered on time	19 May 2024 at 12:00	RAM
Meeting Notes	Delivered on time	19 May 2024 at 12:00	Meeting Notes 11 Meeting Notes 12

• Information regarding this can be found in the README

• The mobile application does not function when the device is connected to eduroam.
• If you want to test the application with already existing users you can use the following username, passwords:
• Username: berat_y
  Password: Abcde*123
• Username: kaan4
  Password: Abcde1234*
• Username: Buse
  Password: Buse1234*

We believed expo would help us a lot at the beginning of the semester because none of us had experience with React Native and it was suggested on their website. It was working fine for us until we needed to generate the APK. At that point we saw that it was actually more difficult and causing some problems. Also, we couldn't do it with one Expo account as it was making us wait for 1.5 hours before building the app because we were using a free account. So we needed to open another account to make build much faster. All in all it was not as good as we hoped it would be.

We learnt that Swagger should be part of the project from the beginning because it makes connecting the backend and frontend easier and also it makes keeping things in order easier. Also, it is very important to make the API understandable and maintainable.

Utilizing DigitalOcean as our cloud provider has been a good experience since our deployment in the previous milestone, and the final deployment was almost effortless as well. Spinning up a VM with DigitalOcean is very easy and provides a pleasant deployment experience.

Tailwind is the CSS library we used for styling our web app. It gives the ability to style the website directly from the HTML with preconfigured classes that can be combined to achieve styling. It was our first time using it but setting aside some weird behaviors such as wrapping a profile picture around link tags to achieve redirection resulting in making the profile picture ellipse shaped, it was joyful to use Tailwind as it provided a much needed peace of mind with styling.

Whatsapp was good in the way that everyone in our team uses Whatsapp all the time and gets notified instantly. But the problem is missing the important texts within a group was very easy especially at the night before our demo session. We may use another group or another platform (maybe Discord) for more important messages/announcements.

• Configuring Swagger: Establishing Swagger is crucial for linking the frontend and backend components. We encountered some challenges in this linkage, which we resolved through effective communication among team members and configuring Swagger subsequently.
• Synchronization: There were lots of changes during the implementation phase. We actually planned the phase in a good way, but there were unplanned details. So whenever something needed to change that was effecting the other teams as well (and it happened a lot) we needed to update each other all the time. We struggled a bit about that.

• I implemented the feed page including posts of the followed users. issue#202
• I implemented liking and commenting on posts. issue#216
• I implemented displaying the posts of the users on their profile pages. issue#250

• I implemented the post page component in mobile. PR#257
• I implemented the feed page in mobile. PR#220
• I implemented comment component. PR#290

• log_out I implemented the log_out endpoint that receives a get request, logs out the current user and returns a 200 HTTP Success response.
  • Sample Call Request URL: http://64.226.89.39:8000/log_out/
    Request Method: GET
    Response Status Code: 200 OK
    Response Message: Logged out successfully
    

• Mobile Test Case 001
• Mobile Test Case 002
• Mobile Test Case 006
• Mobile Test Case 008
• Mobile Test Case 009

• I prepared the set up for mobile using react native and expo.
• I generated the APK.
• I implemented the feed page, posts, comments and the functionalities liking a post/comment, commenting on a post, following/unfollowing a user on mobile. I also helped implementing profile pages and search results page.

In this milestone I encountered lots of package and compatibility issues. I solved the package problems with using other packages 😄. There were also lots of bugs that I needed to take care of. But the biggest challenge for me was to create the APK. I nearly spent 5 hours for that before I figured out with my friends in CMPE lounge it wasn't working just because eduroam was blocking our application.

---

• Create Create a post page and hyperlinks
• Create Feed Page

• Feed implementation and bugfix for hyperlinks
• Create a Post page implementation with hyperlink and edit post component to show hyperlinks correctly

• TC102 - Log In
• TC103 ‐ Create Post
• TC108 ‐ Bookmark Unbookmark a Post
• TC111 ‐ Edit Profile

My biggest challenge was implementing the hyperlinks.I put so much effort to make them properly.Also 1 day before the demo our search endpoint changed so there was a bug in hyperlinks.I managed to solve it but it was challenging.

• Ahmet Batuhan Canlı

---

• Profile Pages Backend
• Like and Bookmark Backend
• Follow Unfollow

• Like and Bookmark
• Profile Page Endpoints
• Unit Tests

• sign_up Purpose: Handles user sign-up requests. Method: Accepts POST requests containing username, email, and password. Checks if the provided email and username are available. Creates a new user if they are unique.

• like_or_unlike_post Purpose: Handles liking or unliking a post. Method: Accepts POST requests to like or unlike a post identified by post_id. Creates or deletes a LikePost object associated with the user and post.

• like_or_unlike_comment Purpose: Handles liking or unliking a comment. Method: Accepts POST requests to like or unlike a comment identified by comment_id. Creates or deletes a LikeComment object associated with the user and comment.

• bookmark_or_unbookmark_post Purpose: Handles bookmarking or unbookmarking a post. Method: Accepts POST requests to bookmark or unbookmark a post identified by post_id. Creates or deletes a Bookmark object associated with the user and post.

• user_followings Purpose: Retrieves the list of users that the current user is following. Method: Retrieves followings associated with the current user and constructs a JSON response containing user IDs and usernames.

• user_followers Purpose: Retrieves the list of users following the current user. Method: Retrieves followers associated with the current user and constructs a JSON response containing user IDs and usernames.

• get_users_like_post Purpose: Retrieves users who liked a specific post. Method: Queries LikePost objects related to the given post and constructs a JSON response containing user IDs and usernames.

• get_bookmarked_post_ids Purpose: Retrieves IDs of posts bookmarked by the current user. Method: Queries Bookmark objects related to the current user and constructs a JSON response containing post IDs.

• profile_view_edit_auth Purpose: Handles profile view and edit requests for the authenticated user. Method: For POST requests, updates user profile information based on provided data. For GET requests, retrieves and returns the authenticated user's profile information.

• profile_view_edit_others Purpose: Handles profile view requests for other users. Method: Retrieves and returns profile information of the specified user including basic details, follower and following counts, and posts.

• reset_password Purpose: Handles password reset requests. Method: Accepts POST requests with email or username and a new password. Resets the password for the specified user.

• follow_user Purpose: Handles requests to follow a user. Method: Accepts POST requests to follow the user specified by username. Creates a new follow instance if not already following.

• unfollow_user Purpose: Handles requests to unfollow a user. Method: Accepts POST requests to unfollow the user specified by username. Deletes the follow instance if already following.

• feed Purpose: Retrieves posts for the current user's feed. Method: Retrieves posts from users that the current user is following and their own posts, then constructs a JSON response containing post IDs.

• All Unit Tests

• SignUpViewTestCase

• UserLoginTestCase

• PostsTestCase

• CreateCommentTestCase

• LikeOrUnlikePostTestCase

• LikeOrUnlikeCommentTestCase

• BookmarkOrUnbookmarkPostTestCase

• PostDetailTestCase

• UserFollowingsTestCase

• UserFollowersTestCase

• GetBookmarkedPostIdsTestCase

• ProfileViewEditAuthTestCase

• ProfileViewEditOthersTestCase

• ResetPasswordTestCase

• FollowUserTestCase

• UnfollowUserTestCase

• FeedTestCase

• SearchTestCase

• PlayerViewTestCase

• SessionViewTestCase

• I also worked on fixing the bugs that arose during development and testing.

• One challenge I face is attempting to write API endpoints without prior knowledge of the fields that should be returned.

---

• Implement API endpoint for player pages [#141] and Implement API endpoint for team pages [#140] (given as one because the work was very similar)
• Implement retrieving information from Wikidata for search part [#122] and Implement API endpoint for team pages [#140]
• Implement adding picture to posts [#196]

• team/player pages api [#143]
• Searching team and player [#135]
• Adding image to profile and post [#201]

• Wikidata API: Used for some of the important features of the project. These features are extracting player and team information for search result and extracting extended information about teams and players to display in the dedicated pages. There are two ways of querying Wikidata API which are sending SPARQL queries directly or sending id/name of the page that we want to retrieve information from. We are using both these approaches according to the needs of the pages.

Main Contributor:

• player: Receives Wikidata ID of a current or previous NBA player and sends a request to Wikidata API using this ID. From there, the API receives and returns the information which will be displayed on the player page (name, image, height, date of birth, instagram account, teams played for and dates, positions, awards received and dates)
• post: Receives user post as input and inserts the necessary data (user id, username, content, image, creation time) to the database.
• search: Receives user query text as input and searches for NBA teams, players, users of app and user posts that contain the query and returns lists of each. Also, returns small information about players (height, date of birth). Search for players and teams is made using the Wikidata API.
• team: Receives Wikidata ID of a current or previous NBA team and sends a request to Wikidata API using this ID. From there, the API receives and returns the information which will be displayed on the player page (name, logo, conference, coach, division, venue name, venue latitude, venue longitude).

Helper:

• post_detail
• profile_view_edit_auth

I made a deploy test with Berat to make sure that when the project is deployed we would be able to receive and display images in the program. I also helped Berat for the final deployment. In addition, I helped Buse generating the APK.

Biggest challenge I encountered was making sure that search results and team/player pages were working fast. Since we were retrieving so much information we had to send too many requests and that was making the work slow. So, I tried creating big queries to lower the number of Wikidata call but that made the program way slower than before. Therefore, I returned back to the previous approach. Also, keeping synced with other teams was difficult because people were not available all the time so, sometimes we feel out of sync and some difficulties appeared. And sometimes when I have implemented an endpoint but frontend was not done yet (since they had to wait for me) I was not able to see whether my code was working or not.

---

Three important issues

• Implement Swagger API for the project #227
• Edit Post and post_detail parts #225
• Implement comment part #226

Three most important pull requests:

• Swagger API #280
• Post_detail and Post structure #229

Wiki Personal Page

API Functions I implemented

• log_in
  Developed a secure log-in function that authenticates users, ensuring only authorized access to the platform.

• create_comment
  Designed and implemented the function to handle the creation of comments on posts. This function processes user input, validates data, and integrates seamlessly with the post functionality to update comments dynamically.

• post_detail
  Detailed post retrieval function that returns crucial data required by the frontend. This includes comments (with their id, content, liked_by_user status, likes_count, username, and user profile picture), post details, username, creation date, like count, and user profile picture. This comprehensive approach ensures that the frontend has all necessary information for displaying post details effectively.

Also worked on post behind Bilge Kaan. This involved backend integration and ensuring that the post feature is scalable and efficient.

I have created the RAM part of the milestone3

One of the primary challenges I faced was creating Swagger schemas for every view function. Each function had unique variables and methods, requiring a varied approach for accurate documentation. This process was complex but crucial for ensuring that our API is well-documented and accessible.

---

• I implemented the post-creation page UI. issue#192
• I implemented the functionality of bookmarking a post and a page for bookmarked posts. issue#217
• I implemented the post-creation page with functionalities. issue#248

• I implemented the post-creation page component for mobile. PR#274
• I implemented the bookmarking-post functionality for mobile. PR#286

• I made designs for mobile application UI in Figma.
• I implemented create a new post page.
• I implemented bookmarking functionality and bookmarked posts page.
• I tried to generate APK.
• I created user tests for follow/unfollow and bookmark a post.

The most challenging part of this project was solving bugs in the code that I did not write. It was tough to understand my friend's codes and then change them. Another challenging part was creating the APK. There were lots of package errors and many other errors. Writing code from zero was not that part of this project. Because now we are used to React Native and also to our project.

---

• Implement a player page in frontend. #165
• Implement a search result page in frontend. #237
• Implement bookmarks page in frontend. #242

• Team and player pages for frontend #164
• Search result page added in frontend #249
• Bookmarks page added to menu in frontend #269

• TC101 - Sign Up
• TC104 ‐ See Other's Profile
• TC105 ‐ Follow-Unfollow
• TC109 ‐ Like Comment
• TC110 - Search

• Enhanced search results page to display more than one teams, players and users.

• Fixed bugs occured after change of some endpoints to improve response time of team and player pages and search functionality.

Main challenges that I faced were fixing data fetching issues from the backend that caused incorrect information to display and designing a user interface that was both functional and attractive. I resolved the data issues by correcting the retrieval process and improved the UI through iterative design and feedback. Also, sometimes I encountered package and compatibility errors that causes backend be corrupted on my local and slows me down. I dealt these issues but I was unable to sleep on some days.

---

• Implement Others Profile Page. #273
• Implement Edit Profile Page. #272
• Implement search results page. #223

• Mobile profile page. #277
• Mobile search results. #276
• Mobile add new password #296

• User tests have been created for search and edit profile functionalities. Mobile Test Case 003 Mobile Test Case 005

• I worked on creating the profile, edit profile, others' profiles, and search results pages, along with their respective functionalities, striving to fulfill their intended purposes.

At times, I devoted considerable time to implementing specific functionalities, facing challenges throughout the process. Of particular significance were challenges related to API calls. Sometimes, I managed to resolve them independently, while other times, I sought assistance from my team members. I frequently encountered errors attributed to the emulator, initially attributing them to the code I had written. However, I later realized that other factors were contributing to these errors.

---

• Implement posts in frontend. #234
• Implement profile editing in frontend. #240
• Implement post specific page in frontend. #241

• Add profile pages #235
• Add edit profile button to frontend #265
• Add comments and post specific pages #289

• TC106 - Like Post
• TC107 - Comment

• Deployed the app multiple times to DigitalOcean, one for testing the image uploads and one for the final deployment, with the help of Bilge Kaan Güneyli.

• Implemented the post component which is utilized in feed, profile, bookmarks and the search results page. Implemented the profile page, and the post specific page where users can comment on posts.

Most significant challenge was designing and styling the UI as in this milestone's work I was already accustomed to workings of React, and as the designs of the pages in this milestone were more complicated with more UI items this part was harder. In the previous milestone I already set up the foundations for page routing and got experience with making API calls to the backend, so creating the connections with the backend for the pages I implemented was not that hard as it was in the previous milestone, but in this milestone the backend had much more endpoints that changed more frequently as they were more complicated and required an iterative development process, so I had to adapt to the changes in endpoints in the frontend code, which was another challenge of itself.

Related to the submission of all the project deliverables for the project of the CMPE 352 course, during the 2024 Spring semester, reported in this report, I, Murat Can Kocakulak, declare that:

• I am a student in the Computer Engineering program at Boğaziçi University and am registered for the CMPE 352 course during the 2024 Spring semester.

• All the material that I am submitting related to my project (including but not limited to the project repository, the final project report, and supplementary documents) have been exclusively prepared by myself.

• I have prepared this material individually without the assistance of anyone else with the exception of permitted peer assistance which I have explicitly disclosed in this report.

Related to the submission of all the project deliverables for the project of the CMPE 352 course, during the 2024 Spring semester, reported in this report, I, Zeynep Buse Aydın, declare that:

• I am a student in the Computer Engineering program at Boğaziçi University and am registered for the CMPE 352 course during the 2024 Spring semester.

• All the material that I am submitting related to my project (including but not limited to the project repository, the final project report, and supplementary documents) have been exclusively prepared by myself.

• I have prepared this material individually without the assistance of anyone else with the exception of permitted peer assistance which I have explicitly disclosed in this report.

---

Related to the submission of all the project deliverables for the project of the CMPE 352 course, during the 2024 Spring semester, reported in this report, I, Fatih Demir, declare that:

• I am a student in the Computer Engineering program at Boğaziçi University and am registered for the CMPE 352 course during the 2024 Spring semester.

• All the material that I am submitting related to my project (including but not limited to the project repository, the final project report, and supplementary documents) have been exclusively prepared by myself.

• I have prepared this material individually without the assistance of anyone else with the exception of permitted peer assistance which I have explicitly disclosed in this report.

---

Related to the submission of all the project deliverables for the project of the CMPE 352 course, during the 2024 Spring semester, reported in this report, I, Bilge Kaan Güneyli, declare that:

• I am a student in the Computer Engineering program at Boğaziçi University and am registered for the CMPE 352 course during the 2024 Spring semester.

• All the material that I am submitting related to my project (including but not limited to the project repository, the final project report, and supplementary documents) have been exclusively prepared by myself.

• I have prepared this material individually without the assistance of anyone else with the exception of permitted peer assistance which I have explicitly disclosed in this report.

---

Related to the submission of all the project deliverables for the project of the CMPE 352 course, during the 2024 Spring semester, reported in this report, I, Ceyhun Sonyürek, declare that:

• I am a student in the Computer Engineering program at Boğaziçi University and am registered for the CMPE 352 course during the 2024 Spring semester.

• All the material that I am submitting related to my project (including but not limited to the project repository, the final project report, and supplementary documents) have been exclusively prepared by myself.

• I have prepared this material individually without the assistance of anyone else with the exception of permitted peer assistance which I have explicitly disclosed in this report.

---

Related to the submission of all the project deliverables for the project of the CMPE 352 course, during the 2024 Spring semester, reported in this report, I, Nurullah Uçan, declare that:

• I am a student in the Computer Engineering program at Boğaziçi University and am registered for the CMPE 352 course during the 2024 Spring semester.

• All the material that I am submitting related to my project (including but not limited to the project repository, the final project report, and supplementary documents) have been exclusively prepared by myself.

• I have prepared this material individually without the assistance of anyone else with the exception of permitted peer assistance which I have explicitly disclosed in this report.

---

Related to the submission of all the project deliverables for the project of the CMPE 352 course, during the 2024 Spring semester, reported in this report, I, Berat Yılmaz, declare that:

• I am a student in the Computer Engineering program at Boğaziçi University and am registered for the CMPE 352 course during the 2024 Spring semester.

• All the material that I am submitting related to my project (including but not limited to the project repository, the final project report, and supplementary documents) have been exclusively prepared by myself.

• I have prepared this material individually without the assistance of anyone else with the exception of permitted peer assistance which I have explicitly disclosed in this report.

---

Related to the submission of all the project deliverables for the project of the CMPE 352 course, during the 2024 Spring semester, reported in this report, I, Ahmet Batuhan Canlı, declare that:

• I am a student in the Computer Engineering program at Boğaziçi University and am registered for the CMPE 352 course during the 2024 Spring semester.

• All the material that I am submitting related to my project (including but not limited to the project repository, the final project report, and supplementary documents) have been exclusively prepared by myself.

• I have prepared this material individually without the assistance of anyone else with the exception of permitted peer assistance which I have explicitly disclosed in this report.

---

Related to the submission of all the project deliverables for the project of the CMPE 352 course, during the 2024 Spring semester, reported in this report, I, Talha Ordukaya, declare that:

• I am a student in the Computer Engineering program at Boğaziçi University and am registered for the CMPE 352 course during the 2024 Spring semester.

• All the material that I am submitting related to my project (including but not limited to the project repository, the final project report, and supplementary documents) have been exclusively prepared by myself.

• I have prepared this material individually without the assistance of anyone else with the exception of permitted peer assistance which I have explicitly disclosed in this report.