Skip to content

Final Milestone Report Draft

Emre SİN edited this page Dec 29, 2023 · 70 revisions

Group Milestone Report

Executive summary

The gaming platform has successfully implemented key features such as user registration, authentication, and profile management, allowing users to personalize their experience with profile pictures and about sections. For instance, users can seamlessly navigate through their own and others' profiles, fostering a sense of community within the platform.

Social interactions are robust, encompassing the creation, update, and deletion of posts, comments, game pages, and LFGs. This allows users to actively contribute to the platform's content. An example is the ability to tag posts, enhancing content organization and making it easily searchable for users interested in specific topics.

The search functionality empowers users to find relevant content, such as posts, LFGs, and game pages. For example, users can effortlessly search for posts or LFGs based on keywords, streamlining their access to specific information within the platform.

While the platform has prioritized security with HTTPS, SSL, and encryption for sensitive user data, there are opportunities for improvement. Clear communication of data policies and compliance with regulations, exemplified by GDPR and KVKK, will enhance user trust and privacy protection.

Administrative functions, including report viewing, user banning, and approval/rejection of game page requests, showcase a commitment to maintaining a healthy and secure gaming environment. However, continuous development is needed to address pending items such as daily database backups, response time optimization, and scalability for accommodating a larger user base.

In summary, the platform has laid a strong foundation for a thriving gaming community. Ongoing improvements, guided by examples such as enhanced regulatory compliance and refined search functionality, will further elevate the user experience and solidify the platform's position as a go-to destination for gamers.


Status of all Deliverables

Name Status Notes
Group Milestone Report Completed -
Progress based on teamwork Completed -
API Endpoints Completed -
User Interface / User Experience Completed -
Annotations Completed -
Scenarios Completed -
Use and Maintanence Completed -
Project Artifacts Completed -
Software Completed -
Individual Milestone Reports Completed -

API

Service Endpoints Mapping

Here's a list of the service endpoints and their corresponding IP addresses and ports, along with the services they represent:

Service Name Domain Endpoint IP Address and Port Description
Frontend game-lounge.com http://167.99.242.175:3000 Frontend service
PgAdmin game-lounge.com:5000 http://167.99.242.175:4000 PostgreSQL admin interface
Backend game-lounge.com:9090 http://167.99.242.175:8080 Backend service
Annotation game-lounge.com:9091 http://167.99.242.175:8081 Annotation service

API Documentation

Link to the swagger api documentation

Postman Collection

Link to the postman collection

Game create request endpoint

HTTP Request

POST http://167.99.242.175:8080/game

Headers

  • Content-Type: multipart/form-data

Body

Use form-data for sending the data. Enter the following key-value pairs:

  • Key: request - Type: Text
  • Key: image - Type: File

For the 'request' you can use below json text as value:

{
  "title": "Undertale",
  "description": "A unique RPG where players have the power to spare or defeat monsters in a story-rich underground world.",
  "genres": ["Adventure"],
  "platforms": ["Computer", "PS", "XBOX"],
  "playerNumber": "Single",
  "releaseYear": 2015,
  "universe": "Fantasy",
  "mechanics": "Empty",
  "playtime": "6",
  "totalRating": 0,
  "countRating": 0,
  "averageRating": 0.0
}

Sending the Request in Postman

  1. Open Postman.
  2. Set the method to POST.
  3. Enter the URL http://167.99.242.175:8080/game.
  4. Go to the Headers tab:
    • Ensure Content-Type is set to multipart/form-data.
  5. Go to the Body tab:
    • Select form-data.
    • Enter the key-value pairs as specified above.
    • For the image key, select the image file to upload.
  6. Click Send to make the request.

Creating Looking for Group (LFG) endpoint

HTTP Request

POST http://167.99.242.175:8080/lfg

Headers

  • Content-Type: application/json

Body

Select raw and JSON format, and input the following JSON object:

{
  "title": "Looking for pro players",
  "description": "We need a midlaner and toplaner for the LOL",
  "requiredPlatform": "PC",
  "requiredLanguage": "English",
  "micCamRequirement": true,
  "memberCapacity": 5,
  "gameId": null,
  "tags": ["LOL", "Moba"]
}

Creating a forum post endpoint

HTTP Request

POST http://167.99.242.175:8080/forum/posts

Headers

  • Content-Type: application/json

Body

Select raw and JSON format, and enter the following JSON object:

{
  "title": "Mastering Fortnite Building: A Beginner's Guide",
  "content": "New to Fortnite or struggling with building? This guide breaks down the basics of building structures, advanced techniques, and how to gain the high ground in intense battles.",
  "category": "GUIDE",
  "tags": ["fortnite", "guide"]
}

Final release notes

Management

There have been several changes we have made taking the feedbacks we got from the previous milestones into account. The first one was our image system not functioning properly. At first we were not using a separate file system and storing the images as byte arrays in our database. However, this could’ve caused scaling problems since they are large and it takes time to deliver them. However, while doing so we made some mistakes regarding the naming of the pictures in the S3 bucket. We fixed that issue later on. This allowed us to, conveniently store images. We structured our bucket in a way that even after an additional content type, we could easily integrate it to the system. What we did was basically determining a naming convention and creating a folder system in the bucket.

Second, we got some criticism regarding our navigation bar design in the frontend. Our frontend team has worked on it and with some color adjustments it became significantly more appealing. The change in the UI offered users an overall better experience.

The CORS was also a huge pain. We haven’t been able to come up with a solution to this problem up until there was 3 weeks to the final milestone. Nonetheless, we were able to overcome this challenge as well.

We also got feedback in that the game creation should not be exclusive to the admins, which was obviously against the goal of the project. We allowed registered users to create game requests and implemented an admin approval mechanism, with a user friendly admin panel. This way we believe that our project will serve its initial purpose better. Also the burden of creating games is relieved from the admins.

Guest and registered user separation was subtle, which was also mentioned in the second milestone. We created additional endpoints for recommendations to this end, offering customized content for registered users. This was another feature that basically made our application more appealing.

Regarding the reflections on the final milestone: we are pretty much pleased with the end result we put forward. We think that our customers are also pleased with the result. We believe that we successfully demonstrated the potential use cases of our project on both platforms mobile and frontend. Showing both UIs side by side was a great choice which was also liked by the customers. One major criticism was that users were not able to annotate the same part of the content on the web app. Also another one was again related to the annotations, the image annotations especially. The UI for that functionality was not working quite right on the mobile and was not implemented in the frontend. We got criticism regarding our search and tag mechanisms not being semantic, so they could have been implemented that way.

In retrospect, we definitely see that there are some titles where we made poor choices:

  1. We wasted a lot of time determining how to do things. We should have acted more quickly in this regard. We resisted change too much, leading to uncertainty, and as a result, we lost time and started implementation late. We should have accepted the change and continued on our way.
  2. Classes in the backend should have been better defined. While implementing, we noticed that some things were still uncertain, and we had to come up with solutions on the fly, damaging synchronization with other teams. Some changes were not communicated properly, leading to the need for fixes in some cases, which resulted in time and effort loss.
  3. The backend should have progressed earlier, allowing for a buffer zone with other teams.
  4. Looking back, better planning could have been done in CmpE 352. Even though we believe we performed well as a team and it might not have been possible to foresee implementation issues at that time, more effort could have been made.

Progress Based on Teamwork

A Summary of work performed by each team member

Ahmet Kudu

  • Member: Ahmet Kudu - 2016400402 - Group 6 - Backend Team
  • Responsibilities: I worked on the password change at first. Then, I developed the CORS and database migration stuff to make the software consistent and robust. After that, I coded the game page with the fields, which helped to make the project domain-specific. Lastly, I made an effort on the admin panel to manage the software.
  • Main contributions:
    • I have reviewed a part of the requirements/designs and updated them.
    • I have implemented some endpoints with the beginning /user , /game, and /admin.
    • I have met the feedbacks given in the customer presentations.
    • I have helped resolve bugs and backend issues that have come up from the backend - front/mobile teams.
    • Code related significant issues: #266 #368 #369 #391 #393 #506 #508 #524 #550 #559 #596
    • Management related significant issues: #240 #245 #246 #259 #262 #297 #347 #349 #491 #492
  • Pull requests: #299 #536 #537 #538 #572 #593 #630 #663
  • Unit tests: #597

Erkam Kavak

  • Responsibilities:
  • Contributions:
    • Code related significant issues:
    • Management related significant issues:
  • Pull Requests:
  • Member: Umut Demir - 2019400219 - Group 6 - Mobile Team

  • Responsibilities:

    • Active participation in the development of the mobile side of the project.
    • Key role in strategizing and planning weekly tasks during collaborative lab sessions.
    • Provision of valuable insights as an experienced software developer for planning and implementing requirements, pages, services, etc.
    • Execution of assigned tasks and implementation of necessary components for the mobile application.
    • Conducting comprehensive task reviews to identify and address potential issues.
  • Main contributions:

    • Addressed code-related significant issues, including adding tag options, creating multiple-choice options, and updating pages and services for LFG and games.
    • Worked on software-related significant issues, such as adding a guest user option and refactoring the model class for groups.
    • Created and reviewed pull requests, implementing and updating various features in the mobile application.
    • Contributed to the project's progress by actively participating in planning, implementation, and code reviews, ensuring the robustness and quality of the mobile application.
    • Code related significant issues: #594 #592 #552 #549 #548 #525 #518
    • Management related significant issues: #587 #547
  • Pull requests: #678 #666 #658 #656 #647 #632 #576 #535 #533

Muhammet Mustafa Küçük

  • Member: Muhammet Mustafa Küçük - 2016400111 - Group 6 - Mobile Team/CICD
  • Responsibilities: I was responsible for managing the entire CI/CD pipeline, dockerization, and server configurations. Additionally, as a member of the mobile team, I contributed by implementing new features and addressing minor bugs.
  • Main contributions:
    • I have implemented github actions to automate the deployment of docker images to a remote server.
    • I have configured the ssl certification and nginx reverse proxy.
    • I have dockerized the annotation backend service and configured the database.
    • I have helped mobile team with sorting/filtering features of forms and posts.
    • Code related significant issues: #509 #540 #544 #550 #553 #644
    • Management related significant issues: #493 #502 #584 #262 #607 #347 #637 #491 #687
  • Pull requests: #467 #540 #544 #607 #637

Hüseyin Çivi

  • Member: Hüseyin Çivi - Frontend Team

  • Responsibilities: I was one of the frontend members responsible for the web part of our application. On the frontend side, I had large and small responsibilities in all aspects of the project.

  • Contributions:

    • I created the homepage template. Subsequent homepage developments proceeded through this page.
    • I created the profile page template. Subsequent profile page developments proceeded through this page.
    • I created post create and edit components.
    • I made all the improvements regarding the lfg page, which is one of the 3 main features of the project.
    • Code related significant issues: #284 #358 #389 #416 #503 #554 #598 #599 #640 #650
  • Pull Requests: #384 #397 #477 #484 #539 #564 #570 #578 #583 #634 #641 #646 #651 #669

Emre Türker

  • Member: Emre Türker – 2019400054 - Group 6 - Backend Team
  • Responsibilities: During this milestone I mainly worked on recommendation feature and bug fixing. The bugs were related to S3 bucket and Game entity design. Also I provided the endpoints that were not planned to be implemented but requested from the mobile and frontend teams. The listed contributions only include the last milestone.
  • Main contributions:
    • Implemented the recommendation algorithm.
    • Fixed major bugs related to entities and S3 bucket.
    • Provided some endpoints meeting the needs of mobile and frontend teams.
    • Refactored others codes as needed.
    • Code related significant issues: #266 #368 #369 #391 #393 #506 #508
    • Management related significant issues: #688
  • Pull requests: #639 #636 #631 #625 #623 #611 #566

Emre Sin

  • Member: Emre Sin - 2019400207 - Group 6 - Backend Team

  • Responsibilities: In this milestone I was responsible for the annotations. I was responsible of doing the research about the annotations and the W3C annotations data model standart. I was also responsible the building the annotation service and db from the scratch.

  • Main contributions:

    • Doing the research for the annotations and presenting them to my teammates to enable the team to build the annotations.
    • Analyzing the need of annotation for our application and deciding which subset of features to use from W3C annotation data model.
    • Implementing annotation service and its db from scratch and adding it to the project.
    • Documenting the annotation service in order to make it easier for other teams to implement the annotations.
    • Creating all the necessary unit tests for the annotation service.
    • Creating unit test reports of our project for the final report.
    • Code related significant issues: 652 624 541
    • Management related significant issues: 513
  • Pull requests: 649 676

  • Unit Tests: 676 478

Requirements Coverage

ID Name Backend Status Mobile Status Frontend Status
1.1.1.1 Guests shall provide their full name, a valid username, an unregistered, a valid password to sign up. completed completed completed
1.1.1.2 Guests shall verify their email addresses. completed completed completed
1.1.1.3 Users shall be able to login and logout to platform. completed completed completed
1.1.1.4 Users shall be able to reset, and change their passwords. completed not done not done
1.1.2.1 Users shall be able to show their own profile pages. completed completed completed
1.1.2.2 Users shall be able to view other profile pages which are visible. completed completed completed
1.1.2.3 Users shall be able to delete their own profile pages. completed not done not done
1.1.2.4 Users shall be able to edit their profile pictures on the profile page. completed completed completed
1.1.2.5 Users shall be able to edit their about sections on the profile page. completed completed completed
1.1.2.6 Users shall be able to show their own roles on the profile page. completed completed completed
1.1.2.7 Users shall be able to edit their profile status (visibility) to others on the profile page. completed completed not done
1.1.2.8 Users shall be able to have tags on the profile page. completed completed completed
1.1.2.9 Users shall be able to write titles that are members of company on the profile page. completed completed completed
1.1.2.10 Users shall be able to show their like history on their profile page. completed completed completed
1.1.2.11 Users shall be able to edit the tags on their profile. not done not done not done
1.1.2.12 Users shall be able to show the posts, game pages, and LFGs that they own on their profile. completed partially completed partially completed
1.1.3.1.1 Users shall be able to view profiles of other users. completed completed completed
1.1.3.1.2 Users shall be able to follow other users. completed completed completed
1.1.3.2.1 Users shall be able to create posts. completed completed completed
1.1.3.2.2 Users shall be able to update their posts. completed completed completed
1.1.3.2.3 Users shall be able to delete their posts. completed completed completed
1.1.3.2.4 Users shall be able to create comments. completed completed completed
1.1.3.2.5 Users shall be able to update their comments. completed completed not done
1.1.3.2.6 Users shall be able to delete their comments. completed completed completed
1.1.3.2.7 Users shall be able to report posts. completed completed completed
1.1.3.2.8 Users shall be able to report comments. completed completed not done
1.1.3.2.9 Users shall be able to upvote posts. completed completed completed
1.1.3.2.10 Users shall be able to downvote posts. completed completed completed
1.1.3.2.11 Users shall be able to upvote comments. completed completed completed
1.1.3.2.12 Users shall be able to downvote comments. completed completed completed
1.1.3.2.13 Users shall be able to add tags to their posts. completed completed completed
1.1.3.2.14 Users shall be able to reply to posts. completed completed completed
1.1.3.2.15 Users shall be able to reply to comments. completed completed completed
1.1.3.2.16 Users shall be able to select the type of their post categories. completed completed completed
1.1.3.2.17 Users shall be able to filter post categories in the forum according to their types. completed completed completed
1.1.3.2.18 Users shall be able to view the names of the post owners in the forum. completed completed completed
1.1.3.2.19 Users shall be able to add related game page to posts. completed completed not done
1.1.3.2.20 Users shall be able to add annotations to posts. completed completed completed
1.1.3.3.1 Users shall be able to request creating game pages. completed completed completed
1.1.3.3.2 Users shall be able to request updating game pages and adding/deleting details. completed not completed completed
1.1.3.3.3 Users shall be able to display game pages. completed completed completed
1.1.3.3.4 Users shall be able to upvote game pages. completed completed completed
1.1.3.3.5 Users shall be able to downvote game pages. completed completed completed
1.1.3.3.6 Users shall be able to navigate through recommended topics. completed completed completed
1.1.3.3.7 Users shall be able to report game pages. completed completed not done
1.1.3.3.8 Users shall be able to add annotation to game pages. completed partially completed not done
1.1.3.4.1 Users shall be able to create LFGs. completed completed completed
1.1.3.4.2 Users shall be able to update LFGs. completed completed completed
1.1.3.4.3 Users shall be able to delete LFGs. completed not done completed
1.1.3.4.4 Users shall be able to join LFGs. completed completed completed
1.1.3.4.5 Users shall be able to add details name of the game, title, required platform, required language, mic/cam required and member capacity information to LFG during the creation. completed completed completed
1.1.3.4.6 Users shall be able to comment on the LFGs. completed completed completed
1.1.3.4.7 Users shall be able to upvote comments on LFGs. completed completed completed
1.1.3.4.8 Users shall be able to downvote comments on LFGs. completed completed completed
1.1.3.4.9 Users shall be able to add annotations to LFGs. not done not done not done
1.1.3.5.1 Users shall be able to search for post titles according to the key provided. completed completed completed
1.1.3.5.2 Users shall be able to search for LFG titles according to the key provided. completed completed completed
1.1.3.5.3 Users shall be able to search for other users according to the key provided. not done completed not done
1.1.3.5.4 Users shall be able to see their search history. not done not done not done
1.1.4.1 Admins shall be able to see reports with the related forums. completed completed not done
1.1.4.2 Admins shall be able to see reports with the related LFGs. completed completed not done
1.1.4.3 Admins shall be able to see reports with the related game pages. completed completed not done
1.1.4.4 Admins shall be able to ban users. completed completed not done
1.1.4.5 Admins shall be able to see approve/reject game page requests from users. completed completed completed
1.1.4.6 Admins shall be able to apply any kind of necessary delete operation to the contents of the platform. completed completed not done
1.1.5.1.1 Guests shall be able to view the profiles of registered users. completed not done completed
1.1.5.2.1 Guests shall be able to view the posts in the forum. completed not done completed
1.1.5.2.2 Guests shall be able to filter post categories in the forum according to their types. completed completed completed
1.1.5.2.3 Guests shall be able to view the names of the post owners in the forum. completed completed completed
1.1.5.3.1 Guests shall be able to view game pages and their details(see 1.2.3). completed completed completed
1.1.5.4.1 Guests shall be able to view LFGs and their details(see 1.2.4). completed not done completed
1.1.5.5.1 Guests shall be able to search for post titles according to the key provided. completed completed completed
1.1.5.5.2 Guests shall be able to search for game page titles according to the key provided. completed completed completed
1.1.5.5.3 Guests shall be able to search for LFG titles according to the key provided. completed completed completed
1.1.5.5.4 Guests shall be able to search for other users according to the key provided. not done not done not done
1.2.1.1 The platform shall provide recommendations based on the recommendation logic. completed completed completed
1.2.1.2 The recommendations provided by the platform shall be able to be visible on relevant places. completed completed completed
1.2.2.1 Posts that are created by users shall be visible in the forum. completed completed completed
1.2.2.2 Creating dates of the posts shall be visible in the forum. completed completed completed
1.2.2.3 Related tags of the posts shall be visible in the forum. completed completed completed
1.2.2.4 Number of upvotes given to the posts shall be visible in the forum. completed completed completed
1.2.2.5 Number of downvotes given to the posts shall be visible in the forum. completed completed completed
1.2.2.6 Number of upvotes given to the comments shall be visible in the forum. completed completed completed
1.2.2.7 Number of downvotes given to the comments shall be visible in the forum. completed completed completed
1.2.2.8 The platform shall mark posts of the post owners as "Original Poster". completed completed not done
1.2.2.9 The platform shall mark comments of the post owners as "Original Poster". completed completed not done
1.2.2.10 The platform shall sort posts in the forum according to their creating dates. completed completed completed
1.2.3.1 Admin-approved game pages that are created/updated by users shall be public. completed completed completed
1.2.3.2 Creating dates of the game pages shall be visible in the interface. completed completed completed
1.2.3.3 Games pages shall be searchable by the users. completed completed completed
1.2.3.4 Game pages shall include the game genre chosen from the options - Role-Playing Games (RPG), Strategy, Shooter, Sports and Racing, Fighting, and MOBA (Multiplayer Online Battle Arena). completed completed completed
1.2.3.5 Game pages shall include the platform(s) on which the game is available, selected from Xbox, Computer, PS (PlayStation), and OnBoard. completed completed completed
1.2.3.6 Game pages shall include information about the in-game avatar, including the GameID, Name, and Description. completed completed completed
1.2.3.7 Game pages shall include the number of players indicating the supported number of players, which can be Single, Multiple, or MMO (Massively Multiplayer Online). completed completed completed
1.2.3.8 Game pages shall include the release year in which the game was released. completed completed completed
1.2.3.9 Game pages shall include universe information, which is the setting or theme of the game, similar to "Medieval" for example. completed completed completed
1.2.3.10 Game pages shall include mechanics information describing the gameplay mechanics used in the game, which can include Turn-Based, Chance-Based, etc. completed completed completed
1.2.3.11 Game pages shall include playtime specifying the estimated duration of a game session or how long a game typically lasts. completed completed completed
1.2.3.12 Game pages shall include the official title of the game. completed completed completed
1.2.3.13 Game pages shall include map information. not done not done not done
1.2.3.14 Game pages shall include a game poster. completed completed completed
1.2.4.1 LFG that are created by users shall be visible in the groups. completed completed completed
1.2.4.2 Title of the LFG shall be visible in the groups. completed completed completed
1.2.4.3 Creator of the LFG shall be visible in the groups. completed completed completed
1.2.4.4 Creation date of the LFG shall be visible in the groups. completed completed completed
1.2.4.5 Related tags of the LFG shall be visible in the groups. completed completed completed
1.2.4.6 LFGs shall contain the name of the game, title, required platform, required language, mic/cam required and member capacity informations. completed completed completed
1.2.4.7 LFGs shall contain a brief description. completed completed completed
1.2.4.8 LFGs shall be searchable by the users. completed completed completed
1.2.4.9 LFGs shall be able to contain tags. completed completed completed
1.2.4.10 Number of upvotes given to the comments on LFG, shall be visible. completed completed completed
1.2.4.11 Number of downvotes given to the comments on LFG, shall be visible. completed completed completed
1.2.5.1 Texts shall be annotated in the platform. completed completed completed
1.2.5.2 URL shall be annotated in the platform. not done not done not done
1.2.5.3 Images shall be annotated in the platform. completed completed not done
1.2.6.1 Search shall be semantic. not done not done not done
2.1.1 The platform shall use HTTPS protocol. completed completed completed
2.1.2 The platform shall meet the modern SSL requirements. completed completed completed
2.1.3 All sensitive user data, such as passwords, shall be encrypted using a salted hashing algorithm(such as SHA-256). completed completed completed
2.2.1 The platform shall strictly adhere to the regulations of GDPR and KVKK. not done not done not done
2.2.2 The data usage of the users shall be clearly stated in platform’s policies. not done not done not done
2.2.3 Users shall be notified when the data policies change. not done not done not done
2.2.4 The privacy policy and user agreement shall be made available for users to read, accept, or decline. not done not done not done
2.2.5 Users should have the ability to get their personal data as allowed by the regulations. not done not done not done
2.3.1 Language of the platform shall be English. completed completed completed
2.3.2 The web interface and the android application shall support the same functionality. completed completed completed
2.3.3 The platform should support UTF-8 character encoding. completed completed completed
2.3.4 Annotations should comply to the W3 Web Annotation Data Model completed completed completed
2.4.1 The platform shall respond to any request in at most 1 second. not done not done not done
2.4.2 The platform shall support at least 10000 user accounts. not done not done not done
2.4.3 The platform shall take a backup of the database every day. not done not done not done

User Interface / User Experience

Frontend

Homepage

Source Code

Ekran Resmi 2023-12-29 00 33 14

Game Forum Page

Source Code

Ekran Resmi 2023-12-29 00 46 54 Ekran Resmi 2023-12-29 01 16 40

Post Forum Page

Source Code

Ekran Resmi 2023-12-29 00 47 10

LFG Forum Page

Source Code

Ekran Resmi 2023-12-29 00 47 38

Profile Page

Source Code

Ekran Resmi 2023-12-29 00 54 13

Game Details Page

Source Code

Ekran Resmi 2023-12-29 15 44 02

Game Creation Popup

Source Code

Ekran Resmi 2023-12-29 00 56 57

Post Comments Page with Annotation

Source Code

Ekran Resmi 2023-12-29 00 49 56

Post Creation Popup

Source Code

Ekran Resmi 2023-12-29 00 57 11

Signup

Source Code

Ekran Resmi 2023-12-29 00 36 30

Login

Source Code

Ekran Resmi 2023-12-29 00 40 36

Forgot Password

Source Code

Ekran Resmi 2023-12-29 00 40 55

Admin Panel

Source Code

Ekran Resmi 2023-12-29 01 09 07

Search Results Page

Source Code

Ekran Resmi 2023-12-29 16 29 17

User interface / User experience - Mobil

Buradaki her bir sayfa için ekran görüntüsü ve bağlı olduğu kod sayfası eklenecek.

Register Page

Login Page

Drawer Page

Profile Page

Home Page

Forum Page

Post Creation Page

Post Page

Post Update Page

Post Report Page

Text Annotations

Image Annotations

Game related pages

Lfg related pages

Annotations

Status:

  • Image annotation is implemented on the mobile only.
  • Text annotation is implemented on both mobile and web.

Compliance with W3C WADM:

  • The parts that we have implemented are fully complies with the W3C standarts.
  • Our implementation has subset of the futures that are described in W3C Annotation Data Model. This subset of futures are tailored specifically for our applications needs.
  • To make it more discrete by giving examples, we opted for having two selectors only, since the rest of the selectors defined in W3C Annotation Data Model had no meaningful use case in our implementation.
  • We made annotation consisting of multiple bodies possible but limited the number of target exactly to one. Though else is possible and implemented in the backend we created one annotation at a time for a pair of body and target (for our application that was the only meaningful use case).
  • Examples below demostrates the all possible fields in an annotation. In order to determine which fields to make required and which fields to make optional we followed the W3C annotation data model and made all fields indicated as 'must' which the meaning and scope of it described in rfc2129.

Implementation description

  • We have implemented our annotation server as a separate service which has its own docker image and database. Even though it runs on the same machine they are different application which listens to different ports.
  • For annotation service we utilized a postgresql db do model our annotation data model that complies with W3C standarts.
  • For both mobile and frontend no libraries are used directly to implement the annotations. Our team developed the necessary infrastructure to annotate contents for themselves.

API calls examples to annotation server:

Image annotation creation:

POST /annotation/create HTTP/1.1
Host: game-lounge.com:9091
Content-Type: application/json
Content-Length: 768

{
    "context": "http://www.w3.org/ns/anno.jsonld",
    "id": "YourAnnotationId",
    "type": "Annotation",
    "motivation": [
        "commenting",
        "annotating"
    ],
    "creator": "backendUser",
    "created": "2023-03-01T12:00:00",
    "body": [
        {
            "id": "YourBodyId",
            "type": "TextualBody",
            "value": "This is a post!",
            "format": "text/plain",
            "language": "en",
            "purpose": "commenting"
        }
    ],
    "target": {
        "id": "https://game-lounge-storage.s3.eu-north-1.amazonaws.com/game-pictures/7",
        "format": "text/html",
        "language": "tr",
        "selector": {
            "type": "Text",
            "value": "xywh=10,20,150,200"
        }
    }
}

Textual annotation creation:

POST /annotation/create HTTP/1.1
Host: game-lounge.com:9091
Content-Type: application/json
Content-Length: 742

{
    "context": "http://www.w3.org/ns/anno.jsonld",
    "id": "YourAnnotationId",
    "type": "Annotation",
    "motivation": [
        "commenting",
        "annotating"
    ],
    "creator": "backendUser",
    "created": "2023-03-01T12:00:00",
    "body": [
        {
            "id": "YourBodyId",
            "type": "TextualBody",
            "value": "This is a post!",
            "format": "text/plain",
            "language": "en",
            "purpose": "commenting"
        }
    ],
    "target": {
        "id": "http://167.99.242.175:8080/post/1",
        "format": "text/html",
        "language": "tr",
        "selector": {
            "type": "FragmentSelector",
            "value": "xywh=10,20,150,200"
        }
    }
}

Annotation retrieval by annotation id:

GET /annotation/your-annotation-id HTTP/1.1
Host: game-lounge.com:9091

Annotation retrieval by target id:

POST /annotation/get-annotations-by-target HTTP/1.1
Host: game-lounge.com:9091
Content-Type: application/json
Content-Length: 55

{
    "targetId": "http://167.99.242.175:8080/post/1"
}

Scenario

Mauro Oblak

Mauro

User Info

User Type: Gamer

User Tags: MMORPG, Affliction Warlock, Witcher, Red Dead Redemption, Baldur's Gate

About me: Hey there! I'm Mauro, a university student with an insatiable passion for games. Whether I'm navigating virtual realms or unraveling the intricate plots of my favorite titles, the world of gaming is my playground. Beyond the screen, I'm on a quest to make new friends who share my enthusiasm for gaming. Curiosity is my guide, and forums are my digital campfire, where I love diving into discussions, seeking insights, and sharing tales of epic victories. Join me in this adventure, where pixels come to life, friendships are forged, and every game is a new chapter waiting to be written! 🎮✨

Story

Mauro, a spirited university student immersed in the world of games, set out on a quest to find a gaming platform that transcended the ordinary. In his virtual exploration, he stumbled upon a unique haven—an inviting realm that promised more than just gameplay. As he entered, he found a vibrant community where pixels transformed into shared stories, victories became communal celebrations, and a colorful tapestry of experiences awaited. This enchanting platform wasn't just a space for games; it was a digital sanctuary where friendships blossomed, knowledge flowed, and the thrill of victory was only rivaled by the shared passion of a diverse gaming family. In this realm, Mauro discovered that his gaming journey had evolved into an odyssey of connections, shared experiences, and the unwritten tales of countless adventures yet to unfold.

Goals

Mauro's aspirations within this captivating gaming realm are both diverse and dynamic. His foremost ambition is to forge new friendships, connecting with kindred spirits who share his fervor for gaming. Eager to deepen his understanding of various games, Mauro's second goal is to immerse himself in a wealth of gaming knowledge, discovering the intricacies of different virtual worlds. Additionally, he aims to transform his questions and curiosities about games into vibrant discussions by actively participating in forums—a space where he can seek answers, share insights, and engage in lively conversations with fellow gamers. Through these goals, Mauro envisions not just a gaming platform but a thriving community where friendships flourish, knowledge flows, and the collective passion for gaming forms the foundation of an unforgettable digital odyssey.

Preconditions

  • Mauro Oblak is a registered user

Actions

  • He is on the login page.
  • He enters his credentials and signs in.
  • He goes to the game page.
  • He enters the Elder's Ring gamepage.
  • He gives rate to the game.
  • He search casual event group.
  • He joins casual event group.
  • He add a comment.
  • He goes to ahmetalperoğlu profile and follow him.
  • He goes to the forum page.
  • He enters Witcher's post.
  • He adds a comment and dislikes the post.
  • He adds an annotation.
  • He goes to the groups page.
  • He create a new lfg.
  • He logs out of his account.

Acceptance Criteria

  • 1.1.1.3 Users shall be able to login and logout to platform.
  • 1.1.2.2 Users shall be able to view other profile pages which are visible.
  • 1.1.3.1.1 Users shall be able to view profiles of other users.
  • 1.1.3.1.2 Users shall be able to follow other users.
  • 1.1.3.2.4 Users shall be able to create comments.
  • 1.1.3.2.9 Users shall be able to upvote posts.
  • 1.1.3.2.10 Users shall be able to downvote posts.
  • 1.1.3.2.11 Users shall be able to upvote comments.
  • 1.1.3.2.13 Users shall be able to add tags to their posts.
  • 1.1.3.2.14 Users shall be able to reply to posts.
  • 1.1.3.2.18 Users shall be able to view the names of the post owners in the forum.
  • 1.1.3.2.20 Users shall be able to add annotations to posts.
  • 1.1.3.3.3 Users shall be able to display game pages.
  • 1.1.3.3.4 Users shall be able to upvote game pages.
  • 1.1.3.4.1 Users shall be able to create LFGs.
  • 1.1.3.4.4 Users shall be able to join LFGs.
  • 1.1.3.4.5 Users shall be able to add details name of the game, title, required platform, required language, mic/cam required and member capacity information to LFG during the creation.
  • 1.1.3.4.6 Users shall be able to comment on the LFGs.
  • 1.1.3.5.2 Users shall be able to search for LFG titles according to the key provided.
  • 1.1.5.2.1 Guests shall be able to view the posts in the forum.
  • 1.1.5.3.1 Guests shall be able to view game pages and their details(see 1.2.3).
  • 1.1.5.4.1 Guests shall be able to view LFGs and their details(see 1.2.4).
  • 1.1.3.4.4 Users shall be able to join LFGs
  • 1.1.3.4.6 Users shall be able to comment on LFG
  • 1.2.4.1 LFG that are created by users shall be visible in the groups.
  • 1.2.4.2 Title of the LFG shall be visible in the groups.
  • 1.2.4.3 Creator of the LFG shall be visible in the groups.
  • 1.2.4.4 Creation date of the LFG shall be visible in the groups.
  • 1.2.4.5 Related tags of the LFG shall be visible in the groups.
  • 1.2.4.6 LFGs shall contain the name of the game, title, required platform, required language, mic/cam required and member capacity informations.
  • 1.2.4.7 LFGs shall contain a brief description.
  • 1.2.4.9 LFGs shall be able to contain tags.

Mockups

1- He enters his credentials and signs in. image

2- He see homepage. image

3- He goes to the game page. image

4- He enters the Elder's Ring gamepage and gives rating. image

5- He search casual event group, joins the lfg, and adds a comment. image image image image

6- He goes to ahmetalperoglu profile and follows him. image

7- He goes to forum page. image

8- He enters Witcher's post and adds a comment and dislikes the post. image

9- He adds an annotation to the post. image

10- He goes to the group page. image

11- He creates a new lfg. image image

12- He logs out of his account. image

13- He is redirected to homepage. image

Work that has been completed related to the features necessary to realize this scenario

  1. User Authentication and Registration:

    • Implemented a secure user authentication and registration system.
    • Created a user profile structure to store information such as user type, tags, and an "About Me" section.
  2. User Profile Customization:

    • Enabled users to customize their profiles by specifying user type, adding tags related to their gaming preferences and providing a personalized "About Me" section.
  3. Gaming Platform Interface:

    • Developed an intuitive gaming platform interface.
    • Incorporated a dynamic and visually appealing layout to enhance user engagement.
  4. Preconditions and Actions:

    • Established preconditions such as user registration, login credentials, and user status tracking.
    • Developed actions to simulate Mauro's journey, including navigating through login, game pages, rating games, searching and joining groups, following other users, interacting with forum posts, and creating new content like Looking for Group (LFG).
  5. Forum and Group Functionality:

    • Integrated a forum system with the ability to browse, comment, and interact with posts related to specific games (e.g., Witcher).
    • Implemented group functionalities, allowing users to search, join, and create casual event groups.
  6. Annotations and Rating System:

    • Added features for users to add annotations to posts, enhancing interaction and user-generated content.
    • Integrated a rating system for games and forum posts, allowing users like Mauro to express their preferences.
  7. Logout Functionality:

    • Implemented a secure logout functionality, ensuring that users like Mauro can easily exit their accounts.

Use and Maintanence

Our expansive project has been successfully deployed on the internet, offering universal accessibility to a diverse array of devices equipped with an internet connection and a standard web browser. Our web project, easily accessible through any web browser, provides a seamless experience to users across different devices, ensuring broad reach and convenience.

On the mobile side, our project leverages the versatile Flutter framework, known for its cross-platform capabilities. Flutter empowers us to create a singular mobile application that transcends platform boundaries, allowing it to be seamlessly built for both Android and iOS environments. This ensures that our mobile application can be executed effortlessly on a wide spectrum of mobile devices, providing users with a consistent and optimal experience regardless of their chosen platform. The utilization of Flutter not only enhances the efficiency of development but also broadens the scope of our project, making it accessible to a diverse audience with varying mobile devices and preferences.

Project Artifacts

User Manual

Mobile

Her bir akış için dokümantasyon ve ekran görüntüleri konulacak.

Register
Log-in
See Own/Others Profile Page
Update Profile Page
Create Post
Create Comment
Edit Post/Comment
Delete Post/Comment
Report Post/Comment
Upvote/downvote Post/Comment
Add Text Annotations
See Text Annotations
Add Image Annotations
See Image Annotations
Search
Game Page akışları
Lfg Page akışları

Web

System Manual

Mobile

To run a Flutter project and test it using an emulator, follow these steps:

Prerequisites:
  1. Install Flutter:

  2. Install Android Studio (for Android Emulator) or Xcode (for iOS Emulator):

    • For Android development, you can use Android Studio, which includes the Android Emulator.
    • For iOS development, you need a Mac with Xcode installed.
  3. Set up Emulator:

    • Open Android Studio and set up an Android Virtual Device (AVD) for the Android Emulator.
    • For iOS, open Xcode and set up an iOS Simulator.
Steps:
  1. Clone or Create a Flutter Project:

    • Clone an existing Flutter project or create a new one using flutter create project_name.
  2. Open Project in VS Code or Android Studio:

    • Open your Flutter project in your preferred code editor (e.g., Visual Studio Code, Android Studio).
  3. Check Flutter Devices:

    • Open a terminal and run flutter devices to ensure that your emulator is detected. If not, start your emulator.
  4. Run the App:

    • In the terminal, navigate to your project directory and run flutter run.
  5. Choose Target Device:

    • When prompted, select your emulator from the list.
  6. Observe the App:

    • The app should build and launch on the emulator.
For Android Emulator:
  • Run Directly from Android Studio:
    • Open your Flutter project in Android Studio.
    • Click on the green play button ("Run") to build and run the app on the Android Emulator.
For iOS Emulator:
  • Run Directly from Xcode:
    • Open the iOS project in Xcode (located in the ios directory of your Flutter project).
    • Click on the play button in Xcode to build and run the app on the iOS Simulator.

Web

Software Requirements Specification (SRS)

Software design documents (using UML)

User scenarios and mockups

Research

Project plan

Unit tests reports

Software

The project currently deployed on https://game-lounge.com.

The server hosting is provided by Digital Ocean. The domain name "game-lounge.com" is set up through Namecheap. SSL encryption is established using Let's Encrypt and Certbot.

3.1 Docker Building

We utilize GitHub Actions for building/pushing Docker images to DockerHub and deploying to remote server via ssh connection. To view the specific Docker build commands, you can explore the .github/workflows directory.

Backend: In the app/backend folder, backend can be built by the following command:

  • sudo docker build -t erkamkavak/gamelounge-backend .

Frontend: In the app/frontend folder, frontend can be built by the following command:

  • sudo docker build -t erkamkavak/gamelounge-frontend .

Annotation Backend: In the app/annotation-service folder, annotation backend can be built by the following command:

  • sudo docker build -t erkamkavak/gamelounge-annotation .

Builded docker images can be accessed by following DockerHub repository:

3.2 Docker Deployment

Database(Postgresql):

  • sudo docker run --detach -p 5432:5432 -e POSTGRES_USER="postgres" -e POSTGRES_PASSWORD=<postgres_password> -e POSTGRES_DB="postgres" postgres

Annotation Database(Postgresql):

  • sudo docker run --detach --name postgres_annotation -p 5433:5432 -e POSTGRES_USER="annotation" -e POSTGRES_PASSWORD=<annotation_postgres_password> -e POSTGRES_DB="annotation" postgres

Backend:

  • sudo docker run --detach -p 8080:8080 -e SPRING_DATASOURCE_URL="jdbc:postgresql://167.99.242.175:5432/postgres" -e SPRING_DATASOURCE_USERNAME="postgres" -e SPRING_DATASOURCE_PASSWORD=<postgres_password> -e MAIL_URL="http://167.99.242.175:8080/" -e CLOUD_AWS_S3_BUCKET="game-lounge-storage" -e CLOUD_AWS_CREDENTIALS_ACCESSKEY=<aws_access_key> -e CLOUD_AWS_CREDENTIALS_SECRETKEY=<aws_secret_key> erkamkavak/gamelounge-backend:52

Annotation Backend:

  • sudo docker run --detach --name gamelounge-annotation -p 8081:8080 -e SPRING_DATASOURCE_URL="jdbc:postgresql://167.99.242.175:5433/annotation" -e SPRING_DATASOURCE_USERNAME="annotation" -e SPRING_DATASOURCE_PASSWORD=<annotation_postgres_password> erkamkavak/gamelounge-annotation:18

Frontend:

Pgadmin:

  • sudo docker run --name game_pgadmin -p 4000:4000 -e PGADMIN_DEFAULT_EMAIL=<pgadmin_default_email> -e PGADMIN_DEFAULT_PASSWORD=<pgadmin_default_password> -e PGADMIN_LISTEN_ADDRESS="0.0.0.0" -e PGADMIN_LISTEN_PORT="4000" -d dpage/pgadmin4

Note: The server at the address 167.99.242.175(game-lounge.com) hosts the app database, the annotation database, app backend, annotation backend and frontend deployments. To operate this on your local machine, you need to change the address from 167.99.242.175 to 'localhost'.

Additional Note: The deployment of the databases, backends, and frontend should follow a sequential order. The frontend requires the backend for its initial setup, just as the backend depends on the database for its initial configuration.

3.3 Mobile Application

In the app/mobile folder, application can be run via:

  • flutter run

In order to create apk:

  • flutter build apk

It creates a release apk in following folder:

build\app\outputs\flutter-apk\app-release.apk

Individual Contributions Reports

Clone this wiki locally