-
Notifications
You must be signed in to change notification settings - Fork 0
Milestone 2 Report
- Rukiye Aslan
- Osman Yasin Baştuğ
- Kamil Deniz Coşkuner
- Muhammed Erkam Gökcepınar
- Halil İbrahim Kasapoğlu
- Mahmut Buğra Mert
- Furkan Şenkal
- İrem Nur Yıldırım
-
1 Introduction
-
2 Project Status
-
3 Links
-
4 Evaluations and Lessons Learned
- 4.1 Evaluation of Tools
- 4.2 Evaluation of Processes
-
5 Challenges Encountered
-
6 Individual Contribution Report
As we progress in the development of SemanticFlix, our film-focused social media app, this second milestone report documents our team’s advancements in planning, design, and the initial stages of implementation. This phase has been instrumental in bringing our vision to life, transforming initial concepts into a functional prototype that caters to the needs of film enthusiasts. With both web and mobile platforms taking shape, SemanticFlix is poised to offer unique features such as movie exploration, ratings, discussions, and social interactions among users.
This milestone emphasizes the reflection on our teamwork and the methodologies that have guided our project. We evaluate the effectiveness of the tools and processes we’ve implemented and pinpoint areas for improvement to ensure continued progress. The report includes detailed contributions from each team member, focusing on the specific roles they played in the design and initial implementation stages. By detailing these contributions, we aim to showcase the practical application of our skills in a collaborative setting and the lessons we've learned that will influence our approach moving forward.
Moreover, this report serves as a comprehensive record of our development journey with SemanticFlix. We present our Minimum Viable Product (MVP), which demonstrates key functionalities such as user registration and login. It also outlines our next steps in enhancing the platform’s capabilities to enrich the user experience and expand our service offerings.
We have updated our previous deliverables "User Scenarios, Requirements, Glossary and Project Plan". We have completed our UML diagrams to have a abstract of the process of implementation and to satisfy this milestone's requirements. We have published our first release corresponding the requirements we have written previously. We have developed features for our web and mobile application. Then we deployed our webpage and we created APK for mobile. We released our first version which contains authentication functions like login/signup, verifying emails, front-end for password resetting and semantic searches implemented for recently released films and search bar on the main page. Profile page is also implemented in mobile app. In the main page the functions not implemented in the backend has been featured with mock data in both mobile and webpage.
| Deliverable/Work | Related Link |
|---|---|
| Github Code Repository | Repository |
| URL to the Deployed Application | Deployed Application |
| Instruction to build Deployed Application | Quickstart |
| Release Tag | Group2-Practice-App-Release-v0.1 |
| Class Diagram | Wiki |
| Sequence Diagram | Wiki |
| Use-Case Diagram | |
| Updated Project Plan (RAM is under deliverables) | Wiki |
| Meeting Notes on Practice App (9th) | Wiki |
| Meeting Notes on Practice App (10th) | Wiki |
| Meeting Notes on Practice App (11th) | Wiki |
| Meeting Notes on Practice App (12th) | Wiki |
| RAM | Wiki |
| Milestone 2 Report | Wiki |
VSCode has supported our development across both the front-end and back-end, providing a consistent and reliable environment for writing, testing, and debugging our code. Its cross-platform capability has also been crucial, as our team members use a mix of operating systems.=
Github Desktop was useful at first since it allowed us to handle branches and commits easily but since we were not that familiar using it we deleted main branch at some point and had to reload it from one of the latest branches. This was a frustrating moment hence we used terminal afterwards.
Since React is widely used for frontend applications it was easy for us to find examples we can learn and implement from. Also there was lots of tutorials of it. Also packages like NPM helped us utilize hot reloads on local which was again an advantage of using React and JS.
When creating the mobile application, we used React Native. Despite the complicated installation and clean-up process, the language's simplicity, and speed gave us an advantage when writing. One of the things that motivated us to use it was the fact that people who specialize in the mobile side are accustomed to it.
For the backend development of our film app, we used Django, a high-level Python web framework. Django's MVC architecture enhanced code readability and maintainability for our film app. Additionally, Django's built-in ORM facilitated seamless integration with our chosen database management system, MySQL. Finally, its clear documentation provided access to a wealth of tutorials, forums, and third-party packages that has helped us throughout our implementation.
We used Mermaid when writing the use case and class diagrams. The most functional feature for us was that we did not need to download or pay anything to use the site's free live editor, and the editor also allowed us to instantly see the effect of the code we wrote on the diagram.
In order to create use-case and sequence diagrams we used Plant UML. As programmers it was delightful to only code and not draw anything for our diagram. Also it was easy to deploy via docker image of plantuml, we just used our localhost to edit our puml file.
Docker has played a crucial role in our deployment strategy, providing a consistent environment for our application across different stages of development and production. Docker Compose tool helped us to build services at the same time and easily.
Digital Ocean has served as our hosting platform, offering scalable and reliable infrastructure to deploy and manage our application in a production environment. There was a 200$ free starter pack we benefited from. It enabled us to connect it with SSH so that we had full control (seeing logs etc.).
We continued to use Discord our weekly meetings and as we defined development teams like frontend, backend and mobile and we opened different channels to communicate and hold records separately. This feature helped us organize the development process.
As before, we used WhatsApp for urgent things and meeting reminders. This helped us prioritize the messages from the WhatsApp group.
We paid attention to have reviewers on each pull-request and have distinct branch names. We will be using a more issue related naming method now on because some branch names lacked descriptiveness.
For creating diagrams and development of the application we gave importance to always distribute the load evenly and have reviewer for all work. Hence we created teams ensuring these. We will continue distribution of work this way.
We had moderators, note takers and wiki editors for every meeting hence there was a reviewing mechanism inherently and also they were neatly recorded. We will continue this method.
They allowed us to record and review all work we need to do and did. We also created new templates for issues which made issue opening easier and have a more general look. We agree that continuing this procedure will ensure that no work will lack documentation.
Our domain films have a lot of entities like more than 100k on wikidata. For wikidata api it is hard to handle queries requiring a full scan on films. For example if we want to search a film that matches a given pattern, if there are no match we need to scan all the films. This is a huge bottleneck for us and validates our requirement of response time. Thus we have found a more powerful sparql engine called QLever and it worked pefectly for heavy sparql queries. We have decided to use it in our backend alongside with wiki data api which is used in more simple queries like getting film details where we have the film id.
It was hard for us to connect the frontend to the backend with proper CORS settings due to the stringent security measures implemented by modern web browsers. Cross-Origin Resource Sharing (CORS) policies dictate how web browsers allow or restrict web pages to access resources from different origins. To address this issue, we configured the backend server to permit requests originating from specific domains utilized by both the frontend web application and the mobile application.
Important Note: However, CORS error still arises if a user is connected to eduroam while using our app and we couldn't solve this specific error for now.
We use Google's SMTP server for email verification, however, Google has implemented security measures to protect its SMTP servers from unauthorized access. So, to be able to send verification emails to users, we needed to get an app password which grants permission for a specific non-Google app or device to access Google services.
We have first tested the app platform for deployment in Digital Ocean. But it was way too simple and lacked proper logs for us to test. Thus we have decided to create a droplet and run our containers there. Droplet worked perfectly but it was much harder to set up than app platform. Dependent Issues and Deadlines: Our workflow occasionally faced setbacks when certain tasks could not progress as planned due to dependencies on other unresolved issues. To mitigate this, we introduced more rigorous dependency tracking and proactive issue management like deadlines and reviewers. We used GitHub's issue tracking features to link dependent tasks and applied labels to identify and prioritize issues that were blocking others.
We planned the search bar to have a debouncing system which enables a time-aware searching (refreshing results with change in input with a delay). It didn't go accordingly and we couldn't implement it in time because we didn't have to comprehend that function. Hence we implemented it without time awareness (it works with another input as "enter").
We couldn't presented the mock reviews because we deleted in the last push accidentally.
Banners were planned to be fetched from IMDB API but both frontend and backend were too busy to implement it on time. Hence we put placeholders for the banners instead of real ones for the presentation.
React Native has a vast ecosystem of third-party libraries, but not all of them are well-maintained or compatible with the latest versions of React Native. Ensuring compatibility and stability when using these libraries was a challenge for us. For example, one of the icon libraries that we used sometimes disappear in some environments, but we found a way to fix it eventually.
Debugging React Native apps can be more challenging compared to traditional web development. Issues like layout inconsistencies, and bugs required extra effort.
Installing and using React Native CLI is the biggest challenge that we encountered while developing mobile app so far. We encountered so many user specific bugs and errors while trying to install. Finding solutions to them one by one is required patience and hard work. We even had to borrow a computer from one of our friends as a short-term solution.
-
Contributions:
- Conducted research on class diagrams to decide which tools to use #91.
- Updated user scenarios with details provided by teaching assistant #102.
- Reviewed the updated project plan #103.
- Created sequence diagrams of our project with Mahmut Buğra Mert and Osman Yasin Baştuğ #106.
- Implemented initial endpoints for films in backend #122.
- Updated our Swagger API with JWT authentication #114.
- Implemented the logout endpoint in backend #121.
- Implemented SMTP configuration and email verification during signup in backend #123.
- Worked on fixing CORS error in backend with Halil İbrahim Kasapoğlu #144.
- Updated user endpoints in backend with proper authentication and validations #144.
- Worked on writing semantic search queries for semantic search with Halil İbrahim Kasapoğlu in backend #148.
-
Challenges:
- Ensuring proper authentication and validation in backend endpoints and swagger API.
- Resolving CORS error in the backend.
- Implementing SMTP configuration.
-
Contributions:
- I created a general issue template which enable all team members to open a issue generically and easily #84.
- I have done the planning of Sequence Diagrams which helped us know which tools we will use (PlantUml), how we will distribute work and the general process.
- I updated two of User Scenarios according to the feedback of Milestone 1 #102.
- We created the Sequence Diagram with Rukiye Aslan and Mahmut Bugra Mert distributing the diagrams and actions of the actors as I did Admin #106.
- I reviewed the updates in Requirements #99 and RAM [#86] according to the feedback of Milestone 1
- I actively worked in the frontend team by opening issues #164, #163, #161, #159, organizing team meetings and developing features.
- I initialized the design items of the main page and upgraded the authentication design items with css files.
- I created the (Login Page)[http://207.154.242.6:3000/login] of the web app frontend and attached with the login endpoint. I also implemented a system where the profile becomes reachable when logged in, hence a state logged local storage system. #127, #146. I also created the Main Page with film list bars and a navigation bar #159.
- I implemented a search bar on navigation bar of the main page enabling users to see 5 search results with their input patterns that is fetched from the wikidata endpoint in backend #161.
- I reviewed the works of my frontend teammates Mahmut Bugra Mert and Kamil Deniz Coskuner. #129
- Besides attending all meetings, I took the minutes of the 11th meeting.
- I finally once again prepared this milestone report with Furkan Senkal.
-
Challenges:
- It was my first time developing frontend and working with React, hence I needed to learn and implement lots of things in a limited time. Although it was a challenge I believe I did well.
- Implementing search bar with debouncing system was a challenge for me since I couldn't comprehend the system in that little time left.
-
Contributions:
- I have attended the weekly meetings.
- I have created the wiki pages for meeting notes 7 and 9.
- I have initialized web development, implemented sign in page and css classes.
- I have organized the file structure of the front end code.
- I have implemented the sign up notification.
- I have reviewed some issues to check whether the requirements were met.
- I have reviewed the code written by my teammates.
- I have attended the demo presentation.
-
Challenges:
- I had some trouble starting our backend server locally for testing, but overcame this issue thanks to the help of my friends in the group.
-
Contributions:
- I have attended the weekly and some extra meetings.
- I am the creator of the 11th meeting notes wiki page.#167
- I am responsible for researching and planning class diagrams with my teammate Halil İbrahim. I first made a research about the class diagrams and determined what types of classes and functionalities should they have in our platform.#93 When the research is done, I have created the Class Diagram for our application in mermaid, I define the attributes and methods and arranged the relationships between classes.#107
- I have also reorganized the general requirements according to the feedback of the assistant with my teammates Mahmut Buğra and Furkan.#98#99
- I have updated glossary part with updated user types.#96
- I also a member of the mobile part with Furkan. I have initialized the mobile project and solved some errors while pushing it to our repository.#108
- I have created the login and signup pages of the mobile app and when the endpoints are written, I connect those pages to our backend.#134
- I also initialized the pages about password reset,#140 and created semantic search and connect the search to our Wikidata endpoint.#147
- I reviewed some issues about mobile. I have created the APK file for the first version release of our project.
- Additionally, I was one the presenters in our demo session. I have presented the mobile application part.
-
Challenges:
- When I tried to push a new mobile project to our repository, github accepted it as a submodule and I spent plenty of time to solve it. Then I deleted the .git file in the mobile part and solved the problem.
- For the release, I am not very experienced with APK creation, so I have encountered some problems with it. For the next releases I will learn those details and try to be more beneficial to the project.
-
Contributions:
- I have attended all of the meetings. Additionally, I have been the meeting 10 wiki page creator and note taker for meeting 9. I have contributed to Class Diagrams in the desing phase through its planning, tool selection process.
- I have created a few class diagrams like Actor, Director and helped Muhammed Erkam Gökcepınar #107
- I have reviewed the sequence diagrams #106
- I have worked actively in devops and backend part.
- I have created an account for DigitalOcean, set up a droplet.
- I have arranged the settings for ssh connection to that machine and provided key pairs to team members 115
- I have also created dockerfiles and the dockercompose yaml with Irem #116, #135
- I have deployed the application in to the remote server using a little script I have written which basically pulls the latest version of the branch and runs the docker-compose file #132
- For the backend part, I have mostly reviewed what irem and rukiye did.
- I have helped on resolving cors issue on deployed application #144
- And also i have created sparql examples with rukiye and written the services, endpoints for running all semantic queries in our application. Integrated wikidata api and qlever search engine #117, #124, #126, #130, #131, #148
- I have also reviewed a few issues of the frontend team like #146.
- I have attended the demo presentation and was one of the presenters. I have presented the backend/deployment part of the project.
-
Challenges:
- While trying to add sparql queries to Wikidata I have realized since Films have too many entities it is very slow to process those queries on Wikidata. Through some research I have figured out that there exist Qlever engine which handles sparql queries on wikidata data much faster that Wikidata Api which allowed us to stay inside the boundries defined by our non-functional requirements
- Cors settings were a bit challanging to set up. I have helped on resolving cors issue on deployed application yet it is not fully resolved.
- I have faced some problems with App Platform of Digital Ocean. It was way too simple and lacked proper logs for us to test. Thus we have decided to create a droplet and run our containers there. Droplet worked perfectly but it was much harder to set up than app platform.
I made a detailed research about Sequence Diagrams issue, research. I, Rukiye, and Yasin created the Sequence Diagrams issue, SequenceDiagrams. Spesifically, I created the User, Guest and, Admin diagrams. One of the challenge encountered during the creation of Diagrams was to decide which platform to use. We discussed this topic in meetings and decided to use mermaid but in some diagrams we decided to use PlantUML for practical reasons. Another difficulty was to decide how much detail we need to add to the diagrams. We covered all the use cases and we thought System and Database objects are enough for now.
For the development, I worked with Deniz, and Yasin. I created the Forgot Password page issue, PR, commit. I helped Yasin for some of the main page features: After logging in when we refresh the main page Log in button was still there. We wanted to change its name to Profile, direct user to their profile when clicked, and stay same unless user does not log out. The hardest part of the developement was to get used to the React environment. Deniz's first PR was very helpful for me to understand how to write a React project. I think another challange is the connect frontend with backend. I will read React documents, and make some research to get better understanding of this part.
I updated the Project Plan and its wiki page issue, wiki page. I added the Diagrams, new milestones, and deployments to the Project Plan. Also, detailed the Development section. Hard part was to get familiar with ProjectLibre. Once I get used to its features, I easily completed my tasks. I made changes on Non-functional Requirements accorrding to the milestone 1 feedback issue, Requirements. I removed unnecessary features such as IOS support. I took the notes of meeting #7 issue, notes, and #12 issue, notes. I attended all PS sessions except one and shared the topics and new informations with my teammates. Finally, I added some of the new page's links to the wiki page.
-
Contributions:
- I attended all the meetings and had some additional meetings with @m-erkam to create the mobile application.
- I did a research on use case diagrams to decide which tools to use #90.
- I reviewed the plan created by @iremnuy for use case diagrams #92.
- I was note taker of the meeting 8 #95.
- I updated our system requirements according to the feedback given by teaching assistant #100.
- I contributed the process of creating use case diagrams using mermaid #105.
- We initialized the mobile development with @m-erkam #108.
- I created the first version of main page for our mobile app using mock data #141.
- I created the first version of profile page for our mobile app using mock data #150.
- I also reviewed the works done by my partner @m-erkam on mobile development. #134,#140, #147.
- I also reviewed the meeting notes 11 #167.
- Eventually, I prepared the Milestone Report 2 with @yasinbastug #166.
-
Challenges:
- I had a hard time trying to get the React Native CLI up and running. It took me so long to fix the errors that I had to borrow my friend's computer to avoid interrupting the process of mobile development.
- I also had difficulty finding and using the correct git commands. To avoid doing something wrong, I researched for a long time or asked my friends to be sure.
-
Contributions:
- For designing process, I created the use-case diagram via docker plantuml server (tomcat), I uploaded both pdf and puml files of our use-case diagram.
- I discussed with some of the team members during our meetings on the choices I made in the diagram.
- I contributed to backend team in Django application initialization, mysql database connection.
- I wrote docker images for backend and mysql image, docker-compose and Dockerfiles, login and signup endpoints, swagger UI implementation.
- For second milestone there was missing requirements and some needed updates in User Scenarios,I checked end edited them whenever necessary.
-
I have attended all the meetings and reviewed many issues and commented on them whenever necessary, also actively contributed to decisions and planning processes in our meetings, also took meeting notes of 10th meeting
-
Challenges:
-
It took me some time to get familiar with container and image concepts in Docker. For a while I repeatedly rebuild the images to get the right configuration.
-
It was also challenging to figure out how different containers(backend, frontend and db) are connected to each other via their respective ports in docker.
- Lab Report #1,24.09.2024
- Lab Report #2,01.10.2024
- Lab Report #3,08.10.2024
- Lab Report #4,15.10.2024
- Lab Report #5,05.11.2024
- 1st Meeting, 03.10.2024
- 2nd Meeting, 10.10.2024
- 3rd Meeting, 17.10.2024
- 4th Meeting, 19.10.2024
- 5th Meeting, 24.10.2024
- Halil İbrahim Kasapoğlu
- Rukiye Aslan
- Kamil Deniz Coşkuner
- Mahmut Buğra Mert
- Furkan Şenkal
- Muhammed Erkam Gökcepınar
- Cem Güngör
- Oğuz Pançuk
Orkun Mahir Kılıç
SemanticFlix Archieve
- 1st Meeting,19.02.2024
- 2nd Meeting,21.02.2024
- 3rd Meeting,03.03.2024
- 4th Meeting,07.03.2024
- 5th Meeting,10.03.2024
- 6th Meeting,14.03.2024
- 7th Meeting,21.03.2024
- 8th Meeting,01.04.2024
- 9th Meeting,17.04.2024
- 10th Meeting,18.04.2024
- 11th Meeting,25.04.2024
- 12th Meeting,02.05.2024
- 13th Meeting,09.05.2024
- Halil İbrahim Kasapoğlu (Communicator)
- Rukiye Aslan
- Kamil Deniz Coşkuner
- Mahmut Buğra Mert
- İrem Nur Yıldırım
- Furkan Şenkal
- Muhammed Erkam Gökcepınar
- Osman Yasin Baştuğ
Okay DemirSait Hızlı