Customer Milestone 2 Report

Introduction

This is the second milestone report for our group project, group bounswe2024group5. We are a group of enthusiastic students of CmpE352 Introduction to Software Engineering course, committed to building a semantic information browser on the domain of Music that features posting about music, discovering others' contents, and interacting with other music enthusiasts. Our team members that have contributed to the project:

• ABDULLAH UMUT HAMZAOĞULLARI
• ARINÇ DEMİR
• ASUDE EBRAR KIZILOĞLU
• GÜNEY YÜKSEL
• HALİL UTKU ÇELİK
• ÖZGÜR DENİZ DEMİR
• RAMAZAN ONUR ACAR
• SEMİH YILMAZ
• SÜLEYMAN EMİR TAŞAN

---

Table of Contents

• 1. Executive Summary
  • 1.1 Project Summary
  • 1.2 Project Status
  • 1.3 Our Code
  • 1.4 The Deployed Application
  • 1.5 Design Diagrams
    • 1.5.1 Class Diagram
    • 1.5.2 Use-Case Diagram
    • 1.5.3 Sequence Diagrams
  • 1.6 Updated Project Plan
  • 1.7 Implementation Specific Meeting Notes
  • 1.8 Lessons We Learned
  • 1.9 Our Team Management Process
  • 1.10 Challenges We Addressed
• 2. Individual Contributions
  • 2.1 RAMAZAN ONUR ACAR
  • 2.2 HALİL UTKU ÇELİK
  • 2.3 ARINÇ DEMİR
  • 2.4 ÖZGÜR DENİZ DEMİR
  • 2.5 ABDULLAH UMUT HAMZAOĞULLARI
  • 2.6 ASUDE EBRAR KIZILOĞLU
  • 2.7 SÜLEYMAN EMİR TAŞAN
  • 2.8 SEMİH YILMAZ
  • 2.9 GÜNEY YÜKSEL
• 3. Other Notes
  • 3.1 Our Research

1. Executive Summary

1.1 Project Summary

Our project is a music-specific semantic information browser. Our platform, Melodify, allows users to share their posts related to music and semantically search for others' content. We utilize the Wikidata API to support our semantic browsing.

The objective is to utilize semantic search to provide a more enhanced search experience to the users in the domain of music. Such an approach not only improves the well-known social media experience but also provides a music-specific platform for music enthusiasts to enjoy without getting exposed to any unrelated/unwanted content.

Users can register to Melodify, set up a profile, and post using one of the various post templates given. Users can choose to post about a concert they attended, a musical instrument they are playing, or their favorite song. Through the usage of predetermined tags, users can enrich their posts and also look for similar content under a tag they like. Such tags are provided for music-related topics, such as genres, albums, popular bands, and more.

To sum up, we build a music-specific semantic information browser, on both the web and mobile, for music enthusiasts to socialize and share their music taste. Currently, the registration and login functionalities of the app are implemented. You can read more on the status of the project in the next section.

1.2 Project Status

Since the submission of the previous milestone, we made progress on our project on several different points. We initially worked on the design diagrams. Upon learning and researching UML diagrams, we distributed the class and use-case diagrams among the team members. Corresponding assignees of the diagrams worked together to create them. We also asked for feedback from the TA and improved our design accordingly. Then, we distributed the sequence diagrams among us. Every team member worked on one or more such diagrams.

Next, we determined the name of our music-specific platform via voting. Then, we split the back-end, front-end, and mobile teams and pursued the implementation of MVP accordingly.

Currently, the login and registration functionalities of our platform are ready for use. We deployed this first version of our app, about which we further elaborated in the next section. Moreover, a basic search functionality for mobile is available. Users can search for a music-related query and we provide the most related results that we fetch from the Wikidata API.

In terms of organization, we fill a responsibility assignment matrix for individual contributions. Also, we utilize the Roadmap view of Github to visually keep track of our progress. Moreover, we continued to use several tools such as Discord, Whatsapp, and Github to ensure constant communication among us. We held weekly meetings, distributed the tasks among us, and took detailed meeting notes for good quality documentation. Especially after splitting into mobile, front, and back-end groups, we held several meetings to discuss the implementation details. Sometimes, we did pair programming during these meetings to maximize our productivity. Jump here for more on our team management process.

1.3 Our Code

Our implementation code resides in our Github repository.

We deployed our application for this milestone. The specific release tag can be found at release Group5-Practice-App-Release-v0.1.

1.4 The Deployed Application

1.5 Design Diagrams

1.5.1 Class Diagram

The class diagram is available on the wiki page. Deniz, Semih, and Güney worked on it. Süleyman reviewed it and contributed to the improvement. See the issue discussion.

1.5.2 Use-Case Diagram

The use-case diagram is available on the wiki page. Arınç, Ramazan, and Süleyman worked on it. Ebrar reviewed it and contributed to the improvement. See the issue discussion.

1.5.3 Sequence Diagrams

The sequence diagrams are available on the wiki page. Everyone worked on one or more sequence diagrams. See the issue discussion.

1.6 Updated Project Plan

We utilize Github's Roadmap feature for project planning and progress tracking. We revised our project plan, as well as the tentative plan for the future weeks. You can observe our project plan here. We also utilize a responsibility assignment matrix to split the workload among the team members and visually keep track of the work done. You can view our RAM on the wiki page.

1.7 Implementation Specific Meeting Notes

After splitting into back-end, front-end, and mobile teams, we held several meetings to discuss the details of our implementation. We gathered the meeting notes in the wiki.

• Back-end Team meeting notes can be viewed here.
• Front-end Team meeting notes can be viewed here.
• Mobile Team meeting notes can be viewed here.

1.8 Lessons We Learned

• We learned how to contribute to a project using git and Github. We had to use branches and commits effectively in order not to mess up the code.
• We learned how to create UML diagrams before getting our hands dirty with coding. This helps us organize our code effectively and communicate the way we want our program to function.
• We learned how to create mobile apps using the React Native framework.
• We learned how to use AndroidStudio and xCode to simulate mobile environments.
• We learned how to connect our front-end code with the back-ends and APIs.

1.9 Our Team Management Process

We kept constant communication among the team via WhatsApp and Discord. We held regular weekly team meetings according to the communication plan we established. After forming the sub-teams for implementation, we also held smaller team meetings for mobile, back-end and front-end separately. Whenever we needed to have a discussion between the teams, if it is not something we can handle with immediate communication through messaging, we organized additional meetings.

Also, we made use of a Responsibility Assignment Matrix that can be viewed from the wiki page. Thanks to RAM, we kept track of individual progress as well.

1.10 Challenges We Addressed

Frontend Team: One of the challenges we faced at the beginning of our frontend implementation was that we had to come up with a lot of names to serve as CSS classes so that we could effectively style our components. To solve this issue we decided to go with an inline styling option and we particularly opted for TailwindCSS. It provided a much easier and enjoyable developer experience in terms of styling our page. Another challenge we faced upon completing the layout of our page occurred when we tried to connect to our backend services to make HTTP requests. First, we got errors because we were sending the requests to the wrong URL. After troubleshooting that we got CORS errors. After discussing this issue with the backend team and adjusting the backend code to give the necessary permissions, we successfully connected our endpoints. Last but not least we realized there was an issue with the backend container because it was abruptly stopping. Later on, we realized that this was due to a race condition between containers. When our backend team revised compose file, th,s issue was also resolved.

Mobile Team: The biggest challenge was that each three of us were inexperienced with mobile development. We didn't even know where to start in order to learn the skill. However, after each person did some research into the area on their own, we were able to come to the point were we can build a simple mobile app. After that, we researched on features that we need spesifically, and implemented them. In addition to that, we had a hard time running mobile simulators in our computer in the beginning. We addressed the issue by Arınç being able to make it work in his computer, and then helping others reproduce the steps necessary.

---

2. Individual Contributions

2.1 RAMAZAN ONUR ACAR

2.2 HALİL UTKU ÇELİK

2.3 ARINÇ DEMİR

I worked on creating the use-case diagram with Ramazan and Süleyman #104. Then, I created the sequence diagram for "Seeing Search History" #120. In addition to those tasks, I worked on the mobile app with Ramazan and Ebrar. First I did research on JavaScript, React and React native. I learned how to use those tools in order to help my teammates. I attended 2/3 meetings that we held with the mobile team. I contributed to the project in implementing the create post page #153. In addition, I implemented the semantic search functionality of the mobile app #154. Before the demo session, I was the only one who was able to run a simulator in their computer, so I did a lot of testing with my teammates. I also did some minor bug fixing before us submitting the release #158. Other than that, I wrote 1.8 and 1.10 of the Milestone Report.

2.4 ÖZGÜR DENİZ DEMİR

For this milestone, I first worked on drawing class diagrams with my fellow teammates Güney and Semih. After that, I created the sequence diagram for creating a post.(#131). But most of my efforts for this milestone were put into the implementation of the front-end part of our MVP. I initialized our front-end project and redesigned our login and registration pages. After that, I implemented those pages in React with my front-end teammates Umut and Güney. (#144). We held a meeting as front-end team. I also dockerized(#145) our front-end project so that it could work seamlessly with the rest of our project and could be deployed easily.

2.5 ABDULLAH UMUT HAMZAOĞULLARI

2.6 ASUDE EBRAR KIZILOĞLU

2.7 SÜLEYMAN EMİR TAŞAN

In our journey, I collaborated closely with Arınç and Ramazan in crafting detailed use-case diagrams, laying the groundwork for our project. As a meticulous reviewer of our Class diagrams, I provided insightful feedback, enhancing their clarity and utility. Similarly, I meticulously did two sequence diagrams, also I was the reviewer of the remaining sequence diagrams. Transitioning to the challenging terrain of backend development, I immersed myself in API design, providing crucial feedback to elevate our backend architecture. Grappling with the intricacies of backend fundamentals, I swiftly acquired essential skills, bolstering our team's capabilities. Throughout our journey, I provided some feedbacks to Utku as I took on the role of a reviewer across multiple stages of back-end development. Engaging directly in endpoint testing, I ensured the robustness and reliability of our codebase. In a collaborative effort with Semih, I spearheaded the integration of the Wikidata API, enhancing our project's data capabilities. Additionally, I helped with Utku to streamline the Mobile team's processes through effective dockerization. Lastly, I took charge of preparing and delivering our team's demo presentation, representing the backend team with confidence and clarity, showcasing our collective achievements. I also took back-end meeting notes and wrote them into wiki. During implementation process, I did huge changes in RAM.

2.8 SEMİH YILMAZ

2.9 GÜNEY YÜKSEL

---

3. Other Notes

3.1 Our Research

---

Main Authors

Ebrar,