1. Executive Summary

1.1. Project Summary

The domain of our project, Animal Troove, is animals. In our app, people can create an account to share pictures of their pets, rare animals they encounter, or an animal that they saw and want to learn what it is. In these posts users can add a location and what is more is that they can also add the name of the animal to the post, which will be used to store the post semantically using Wikidata API.

By using Wikidata API and utilizing semantic search, we can fetch interesting data about the animals, such as their diel cycle, speed, conservation status etc or find animals in a specific family. Moreover, when searching an animal, the posts containing animals that are in the same family also show up, enriching the learning experience.

1.2. Project Status

Currently, all of our diagrams showing how the user can interact with the app, or how the app itself works are ready. We have also created 4 teams, namely, backend, web frontend, mobile frontend, and database. However as certain tasks finish up and more help is needed in a group, the structures of the groups can change. We have also updated our requirements based on the feedbacks from the TA and our expectations from the app.

As of now, we are at implementation stage. The register and login functionalities are working as intended. However, currently, the search only has a basic functionality, which only shows data for an animal's name. But we are working on implementing various other queries that will be able to search for animals in different ways.

For the deployment, we have a cloud computer we rented from DigitalOcean and the necessary docker files. Our team responsible for deployment are working hard on finishing it up.

1.3. Code and Release Tag

For our initial release, version v.1.0.0, we have implemented significant features and provided essential documentation to facilitate development and usage:

This release marks the completion of key functionalities essential for user registration, authentication, and basic search capabilities.

We created v.1.0.0 as a Github release which can be seen here.

1.4. Instruction for Building and Deploying the App

Installing project

To install the project: go to the desired location in your machine and run ' git clone https://github.com/bounswe/bounswe2024group10.git'. Alternatively, one can download the code zip folder.

Project Structure

After going to the root level of the project, you can access the src folder there. src folder contains backend,frontend and mobile codes.

Running Frontend

Go to web/animaltrove folder. Run 'npm i' to install project dependencies. After installing dependencies, run 'npm start' in order to start development server. You can access the development server on your browser on localhost:3000

Running Mobile App

Go to mobile/animaltrove folder. Run 'npm i' to install project dependencies. After installing dependencies, run 'npm start' in order to start development server. Metro bundler will return a qr code for expo. Install expo on your mobile phone and scan the given qr code, then app will be started on your device.

Running Backend

Go to backend/animaltrove folder. run 'mvn spring-boot:run' Then you can access the backend api on localhost:8080

Environment Variables

You need to set up these necessary environment variables to run the application. Go to the root of your project and create .env file to keep environment variables. Fill the .env file with these variable.

Spring Boot Settings

spring.application.name=animaltrove
spring.jpa.hibernate.ddl-auto=update
spring.datasource.url=jdbc:mysql://localhost:3306/AnimalTrove?useSSL=false&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.jpa.show-sql=true

Frontend Environment Variables

baseUrl: http://localhost:8080

Mobile Environment Variables

baseUrl: http://10.0.2.2:8080

docker-compose usage

Docker compose file helps us to build and run the backend, frontend and the mysql database through volume and image composition. To run the application, multiple images for the apps should be composed into the docker-compose and run there.

Building the docker images:

docker-compose build --no-cache

Running docker containers

docker-compose up

By default, started web application will be running on localhost:3000 and the spring application will be running of localhost:8080 if no other port will specified in the application.properties file.

Running the application online

Use that url to access the application: 165.22.95.135:3000

1.5. Deliverables

Name	Status	Link
Use Case Diagram	Delivered	Link
Sequence Diagram	Delivered	Link
Class Diagram	Delivered	Link
RAM	Delivered	Link
Project Plan	Delivered	Link

1.6. Application Meetings

Name	Link
Database-1	Link
Frontend-1	Link
Backend-1	Link
Database-2	Link
Database-Backend	Link
Mobile-1	Link

1.7. Evaluation of Tools

1.7.1. Diagrams

For creating the sequence diagrams we used the Mermaid language. Learning it was quite easy since the tutorial for creating sequence diagrams with it is really clear. Also the language itself is optimal for creating the sequence diagrams because the creator writes the codes downwards in the same order as the messages and replies as the diagram thus making it easy to follow the flow.

However, for creating the use case diagram and the class diagram we used draw.io since it was easier to handle the many connections/relations between elements by drawing it by hand, moreover creating more complex connection based diagrams is easier if the creator can see the big picture while creating the diagram because they can avoid mistakes better.

1.7.2. Communication

Our main communication channel was Whatsapp because everyone can immediately see a message, which helps in urgent scenerios. We also used independent subgroup Whatsapp channels to communicate subgroup related things. Moreover, by listening to the feedback, we started using issues more actively, using them for discussion spaces helped us focus on topics clearly and follow the progress of each task.

1.7.3. Project Plan

For the project plan we used ProjectLibre. ProjectLibre makes adding tasks and interdependencies and seeing the order of tasks really easy. Moreover, being able to add tasks while seeing the chart itself makes it easier to follow the flow while creating it.

1.7.4. Backend Framework

We used Java Spring for our backend framework, decision was almost unanimous, because most members were more experienced in Java's class structure rather than Python's. Also the team members who are knowledgable in Java Spring were able to teach the other backend subgroup members' the ropes effectively.

1.7.5. Database

For the database MySQL was chosen unanimously over PostgreSQL thanks to its ease of use. Moreover, most members were more familiar with MySQL making operating with it better for the group.

1.7.6. Frontend

We used React for developing our web application's frontend. Our main reason for using React is its user-friendly developing environment .Moreover, React is supported by a large community, providing developers with extensive documentation, guides, and helpful resources. Additionally, numerous third-party libraries and tools further facilitate the development of React projects. Finally, React's JSX syntax offers an HTML-like structure, enhancing code readability and comprehensibility. This boosted our productivity and ensured consistent coding practices throughout the project.

Also, we used react-native for our mobile application. React Native is a powerful framework for building cross-platform mobile applications, supported by a vast community and major industry players, resulting in a dynamic ecosystem and regularly updated libraries. Its component-based architecture allows for the modular development of mobile apps, ensuring reusability of components for cleaner and more maintainable code. This feauters of react-native have helped us a lot during the coding part of our mobile application.

1.7.8. Cloud Computer

We used DigitalOcean for our cloud computer. Thanks to DigitalOcean's 200$ gift card, we were able to rent a relatively good computer for running our application.

1.8. Team Management

We started having subgroup meetings rather than whole group meetings which has helped each subgroup to define and share the tasks and check the progress. Each subgroup opened a Whatsapp group chat to talk about their assignments and issues have been opened to let the others know which decisions have been made in that subgroup. However, general discussions were still held in the main Whatsapp group chat.

Some groups also met face to face when the implementation began, thus the more knowledgable members were able to jump start the process easier, since the less knowledgable members were able to watch the coding process first-hand.

1.9. Challenges

Unfortunately, after the first milestone the whole team was exhausted, causing the team to start doing the tasks later than we should have. Also we weren't able to organize effectively at the start of the implementation stage. However, we were able to begin the implementation quickly after some face to face sessions.

Another issue was learning how to code backend and frontend. Some members of the group were experienced beforehand, however the other members had to learn the basics after the teams have been assigned. However, these members were able to learn their parts effectively by watching other members or by other sources such as documents and/or videos.

2. Member Contributions

2.1. Nazlıcan Aka

2.1.1. Efforts

Task Name	Related Issue
I have created Milestone - 2 to link our issues, and make easy to keep track of issues milestone to milestone.here is the Milestone-2	related issue #55
I have added the first meeting note for the Frontend team. I have took notes during the meeting.	here is the wiki page for frontend meeting 1
I have created login and sign up pages for the web application. I have used React for the first time. Also, I have created new branch and push my code in there, then create a pull request. After merging main-web and login and sign-up pages, with Oğuzhan Tuncer and me took a look at my code and make changes and use the last version in the web application. Because we won' t use the login and sign up branch anymore, I have deleted the branch according to lead of Mesut Melih Akpınar	here is the issue #58
Gülşen Sabak and me updated the previous RAM, we make sections and add new rows to cover all issues and tasks. Also, we made changes according to feedbacks coming from our teammates	here is the issue and conversations #115, RAM
After creating RAM, Gülşen Sabak and me created project plan using Project Libre. We have updated the plan, make necessary connections and assign dates and durations. Also, we have assign people to tasks.	here is the issue #114, the pod file, it can be opened using Project Libre 352_2.pod, here is the screenshots of Project Plan

2.1.2. Challenges Faced

I wanted to learn about frontend, but I have no experience about any language or technology used in frontend. Therefore, I have leant about some basics needs for creating frontend, here is the issue #70. In addition to frontend, I did not have much knowledge about git and gitHub. So, I have gotten help from my teammates, Melih Akpınar halp me, here is the issue #97.

2.2. Melih Akpınar

2.2.1. Efforts

Task Name	Related Issue
Create communication channels for backend team.
Create Spring Boot project and initialize backend.	#68
Make Spring Boot configurations.	#68
Implement a mock Animal entity class as an example for issue #81 to show my teammates how it's done.	#81
Split tasks and open issues for backend team	#81, #82
Design backend structure.
Implement register and log in services.	#81, #82
Implement register and log in controllers.	#81, #82
Implement SearchController.	#123
Implement SearchService.	#123
Fix login endpoint bug detected by @OguzTNCR.	#102
Fix CORS policy bug.
Set up Digital Ocean droplet and add people's public SSH keys

2.2.2. Challenges Faced

One challenge I encountered during the development process was related to the CORS policy of Spring, particularly when interfacing with the frontend. We Postman was getting responses successfully butbfrontend consistently encountered errors upon sending requests. This made harder to address the problem. Eventually, we identified that the CORS policy was restricting requests from the frontend, causing the errors. Adjusting the CORS configuration in Spring solved this problem.

2.3. Yasin Atlı

2.3.1. Efforts

Task Name	Link	Related Issue
Chechked uniqueness of attributes and corrected them.		#60
Added some missing requirements		#56
Did a git research and documented it	Git Reasearch	#57
Reviewed some pull requests	PR #109, PR #96	N/A
Solved the branch incompatibility problem	N/A	#92
Created additional sequence diagrams	Sequence Diagrams	#76
Opened some pull requests	PR #80, PR #90, PR #112	N/A
Created Login and Signup pages for the mobile application	Corresponding pull request	#85
Created the Main page for the mobile application	Corresponding pull request	#85
Fixed UserGestureHandler error on mobile app.		#107
Fixed Unique key error on mobile app.		#107
Created the Post Details page for the web application	Corresponding pull request	#62

2.3.2. Challenges Faced

Programming for mobile and frontend, which I had never done before, brought along a plethora of challenges for me. To overcome these challenges, I had to delve deep into research. Despite the difficulties, this experience has been valuable for me.

I resolved the inconsistency issue in the branches by learning and utilizing GitHub's revert feature, bringing our branch back to its intended state. Additionally, I fixed the userGestureHandler error in our mobile application by importing the react-native gesture handler library and making necessary adjustments in the application file. This error had been a significant source of distraction for us, and finding the solution relieved not only myself but also my fellow team members. When connecting our mobile application to the backend, we encountered a CORS error, which we resolved by connecting it to the API URL specific to mobile, thus addressing the CORS issue.

2.4. Yusuf Kağan Çiçekdağ

2.4.1. Efforts

Task Name	Link	Related Issue
Fixed the Mobile App Initialization Issue	#67 (Spring Boot)	#54
Initialized Spring Boot and React Native (Expo) on my computer, helped other teammates for the initialization steps	N/A	#67 (Spring Boot), #53 (React Native)
Created MyProfile and Post pages for mobile application	Corresponding pull request	#86
Reviewed some pull requests	PR #105, PR #106, PR #121	N/A
Solved the "Android network error" with Gülşen Sabak	N/A	#125
Implemented "Search" function for mobile application with Gülşen Sabak and Hüseyin Karataş, connected it with our backend search endpoint	Corresponding contribution	#123
Created the initial version of the ER diagram	March 29 Meeting	N/A
Opened some pull requests	PR #96, PR #124	N/A
Initialized main-mobile branch	Branch initialization-Part 1, Branch initialization-Part 2, Branch initialization-Part 3	N/A
Opened mobile-main branch	mobile-main branch	N/A
Fixed a typo at database-main branch	Branch Activity	N/A
Helped Gülşen Sabak and Hüseyin Karataş for writing the README file	README file	#127
Wrote my contributions to the Milestone 2 Report	Milestone 2 Report	#128

2.4.2. Challenges Faced

Due to my curiosity about mobile and backend, I took part in both teams, however as we have started the implementation stage later than expected and the mobile application issues took more time than I have expected, I was not able to actively participate in the backend team and took an active role in the mobile team instead. Also, learning the main logic of React Native was arduous for me, as I took a false approach at first. Later, I got used to React Native. Thanks to Yasin Atlı, Gülşen Sabak and Hüseyin Karataş, I was able to adapt to mobile team and the main logic of doing frontend easier.

Another big issue of mine was connecting the mobile frontend to the backend server, which the team has spend lots of time onto. In the web application, sending request directly to the localhost (127.0.0.1) was working well, but it surprisingly did not work when it came to the mobile application. Later I have learned that we should have used 10.0.2.2 rather than 127.0.0.1 and also after fixing an https request with an http one, it eventually worked.

2.5. Ömer Faruk Erzurumluoğlu

2.5.1. Efforts

Task Name	Link	Related Issue
Write the ER Diagram	ER Diagram	#69, #76
Write the code for initializing the database	Branch	#73
Write the classes	#106	#81
Write classes for query portability	#106	#81
Docker and Deploy	None	#98
Find and Changed Some Requirements	None	None

2.5.2. Challenges Faced

While writing the classes for database implementation, I realized we did our whole ER diagram and SQL wrong. Since the ER diagram is required for progress of the database and backend, I sit through and fixed the ER diagram, rewrite the SQL code and wrote all of the classes in nearly 24 hours. It was a though process but since I was able to done it in time, we were able to progress in backend. I nearly had no idea about how to write the dockerfile and docker-compose.yml. Someone in our group wrote the Spring part of the dockerfile but we needed to connect it to a database. I was sure that the answers were given by the ChatGPT was right but after a lot of hours and some hysterics, I realized it gave me wrong answers. I looked at some examples and were able correct it. After that I tried to deploy but I could not. Since I did not speak with the forend, I did not know about npm run and threw away many hours. Some of colleagues were able to fix the issues though.

2.6. Onur Kafkas

2.6.1 Efforts

Task Name	Related Issue
Participated in meetings with the backend team regarding task distribution.
Decided which like/unlike method should be implemented.
Configured Spring Boot.	#68
Initialized Animal and User classes.	#81
Dockerized the backend of the project	#98
Wrote the Dockerfile	#98
Wrote the docker-compose file.	#98
Added required dependencies to the pom.xml file	#98
Created necessary files for a spring project.	#68
Installed spring boot.	#67

2.6.2. Challenges Faced

My biggest challenge was figuring out how Docker works. I learnt how to create a dockerfile and which information goes where. I also found out I had to write a docker-compose file as well. As I faced errors, I had to change lots of stuff within these files. Communicating with friends was also an issue. We met up in the campus eventually, and helped each other out.

2.7. Hüseyin Karataş

2.7.1. Efforts

Task Name	Related Issue / PR
Reviewed some issues and renamed them properly.	#28
Contributed to the login and signup logic in the mobile app.	#76
Opened some pull requests	#131
Created some issues	#132, #53, #55
Initialized the react web application.	#52
Created the profile page and profile settings page for the web application	#61
Connected Login and Signup Screens in web app to the backend endpoints	#103
Added instructions for running the applications into the readme.md file	#127
Contributed to the searching logic in the mobile app.	#123

2.7.2. Challenges Faced

Version Control and Collaboration: Managing code changes and collaborating with my team was challenging since I have not worked on such team in which every team member edits the same repository. Some Conflicts and unexpected git errors have occured during development process.

2.8. Ali Bartu Konca

2.8.1. Efforts

Task Name	Link	Related Issue
Created the sequence diagrams with the contributions of Yasin Atlı	Diagram	Related Issue
Helped Oğuzhan Tuncer create the use case diagram	Diagram	Related Issue
Created the class diagram	Diagram	Related Issue
Wrote the executive summary part of the report	Report	Related Issue
Coded some of the relations, these relations are mentioned in the comments of the issue, in the database	Database	Related Issue
Created the fields in the database with Gülşen Sabak and Ömer Faruk Erzurumluoğlu	Database	Related Issue
Written the SPARQL queries for the search function and helped Melih Akpınar implement them	Search Service	Related Issue
Reviewed and modified Melih Akpınar's pull request for the search endpoint	Pull Request	N/A
Opened a branch for some changes for the search functionality	Branch	N/A
Opened a pull request for updating the query with Hüseyin Karataş	Pull Request	Related Issue

2.8.2. Challenges Faced

Beginning the implementation stage was difficult for me since I don't have any experience in these fields, so I decided to enter the database subgroup because it seemed the easiest to learn and implement. However, I also didn't take the course on databases as well, which caused me to lag behind a bit. Moreover, following my team was also difficult when making certain implementation decisions because I had no idea about the pros and cons of each decision. But thankfully my team was understanding and they shared resources for learning these topics, and coding together face to face also helped me follow the process and ask questions and understand greatly.

2.9. Gülşen Sabak

2.9.1. Efforts

Task Name	Related Issue
Create communication channels for database team
Create communication channels for mobile team
Added missing web and mobile mockups to scenarios	#63
Update ER diagram	#50
Coded some of the relations, these relations are mentioned in the comments of the issue, in the database	#73
Created the fields in the database with Ali Bartu Konca and Ömer Faruk Erzurumluoğlu.	#50
Basic research to understand how to connect wikidata	#66
Learning the basics of React Native	#88
Creating Setting screen in mobile	#87
Creating Search screen in mobile	#87
Creating Home screen in mobile	#87
Creating Guest User home screen in mobile	#94
Creating Guest User Search screen in mobile	#94
Creating Triple screen in mobile	#87
Implemented "Search" function for mobile application with Yusuf Kağan Çiçekdağ and Hüseyin Karataş, connected it with our backend search endpoint	#123
Solving errors in mobile pages with Yasin Atlı	#107
Solved the "Android network error" with Yusuf Kağan Çiçekdağ	#125
Adding responsibilities to RAM with Nazlıcan Aka	#115
Updating the project plan with Nazlıcan Aka	#114
Opened pull request	#109
Review pull request	#90
Adding build and install instructions to README file with Yusuf Kağan Çiçekdağ and Hüseyin Karataş	#127
Wrote my contributions to the Milestone 2 Report	#128
Adding database meeting note	#71
Reviewing database meeting note	#74

2.9.2. Challenges Faced

• Since I love doing something in MySQL, I was the lead of database part. However, in our mobile part, team needs help so I also worked for mobile part. My biggest challenge in that milestone was learning and installing react native. Since I dont have any experience about mobile, I had to learn react native. Also, I have limited time since we have a lot of homeworks and exams in that week. However, after learning, ctreating the pages was not that hard for me. However, we get a lot of errors in our mobile pages after we linked them. With the help of my team mates, we have solved it. (Good team work I think :) ) In addition, due to the limited storage size in my computer, the installation part was like a nightmare. I have handled it with the help of my team mates.

2.10. Oğuzhan Tuncer

2.10.1. Efforts

Task Name	Link	Related Issue
Attended and moderated the web meeting. Initialized and planned the project. Created some subtasks and assigned them to web development team with the help of Hüseyin Karataş.		#58, #59, #61, #62
Implemented the PostCard component. Even though it was not required for this milestone it is a key component in our project and will be used frequently.	#75	#59
Revised the LoginSignUp page with Nazlıcan Aka since we need more fields in the signup part. Also added styling to improve the user interface.		#103
Tested the api/users/login and api/users/register and reported the bugs to the back-end team. This way we were able to debug our code in a fast manner.		#102
Researched the annotation for the CORS policy. This way we solve the CORS issue in our server.	#118
Wrote the dockerfile for the web and work on the deployment. Also worked on the deployment of the the backend to the digitalocean.		#132

2.10.2. Challenges Faced

I faced with the CORS policy issue in our server. So I had to do a research for the annotation to be used in the back-end server. Also testing and debugging the endpoints were challenging and took my time. Additionally the dockerfile and the deployment process was very hard since I have no prior experience on them. I believe that deployment was very hard and took a lot of time to learn and solve the problems we faced with .

Prepared by: Ali Bartu Konca 2021400177