An-Najah National University Faculty of Engineering & Information Technology Computer Engineering Department Graduation Project I SPORTER An application that increases the number of people who exercise in general by facilitating and organizing the exercise process and bringing it closer to them Authors Nasser Khaled Yasser Saife Supervisor Dr. Haya Samaaneh Presented in partial fulfillment of the requirements for Bachelor degree in (Computer Engineer). Jan, 2023 1 1 Acknowledgements “We would like to extend our sincerest appreciation to Dr. Haya Samaaneh for her unwavering support and guidance throughout the completion of this project. Our gratitude also extends to the esteemed professors within the Computer Engineering department for their valuable advice. Additionally, we cannot express enough thanks to our friends and loved ones for their encouragement and support. Without the aid and encouragement of these individuals, the successful completion of this project would not have been possible .” 2 2 Disclaimer This report was written by students (Nasser Khaled and Yasser Saife) at the Computer Engineering Department, Faculty of Engineering, An-Najah National University. Therefore, has not been amended or modified as a consequence of assessment, with the exception of editorial adjustments, and it may include grammatical and content problems. The opinions stated, as well as any conclusions or suggestions, are purely those of the students. An-Najah National University accepts no responsibility or liability for the effects of this report being used for something other than what it was intended for. 3 3 Table of Contents Graduation Project I ............................................................................................................................................... 1 Acknowledgements ................................................................................................................ 1 Disclaimer ................................................................................................................................. 2 Abstract ..................................................................................................................................... 5 Chapter 1 .................................................................................................................................. 6 1.1 Background ............................................................................................................................... 6 1.2 Problem Statement ................................................................................................................... 6 1.3 Significant .................................................................................................................................. 6 1.4 Objectives and Scope.............................................................................................................. 7 Chapter 2 .................................................................................................................................. 9 2.1 Constraints Limitations .............................................................................................................. 9 2.1.1 Time Limitations .............................................................................................................................................. 9 2.2 Earlier Coursework .................................................................................................................... 9 Chapter 3 ................................................................................................................................ 10 3.1 Review & Studies. ........................................................................................................................................ 10 3.2 Why SPORTER is the best? .......................................................................................................................... 10 Chapter 4 ................................................................................................................................ 11 4.1 Architecture & Technologies Utilized ..................................................................................... 11 4.1.1 ReactJS & React Native ........................................................................................................................ 11 4.1.2 MySQL ....................................................................................................................................................... 12 4.1.3 Firebase ......................................................................................................................................................... 12 4.1.5 Java Spring Boot ..................................................................................................................................... 13 4.1.6 Expo-Video-Player .................................................................................................................................. 13 4.1.7 Docker ...................................................................................................................................................... 14 4.1.8 Others ........................................................................................................................................................ 14 4.2 Features & Implementation ................................................................................................ 15 4.2.1 SPORTER App ................................................................................................................................................ 15 o The Opening Interfaces ................................................................................................. 15  Sign Up Interface ................................................................................................................ 16  Login Interface ................................................................................................................ 20  Reset Password ............................................................................................................... 22  Player home page ......................................................................................................... 23 4 4 HOW THE APP RECOMMEND THE GYMS? .............................................................................. 24  Gym page ....................................................................................................................... 25  Trainers Page : ................................................................................................................ 26  Workout Pages ................................................................................................................ 27  Insights Page ................................................................................................................... 30  Check BMI page: ........................................................................................................... 31  Diet Page: ........................................................................................................................ 32  Profile Page ..................................................................................................................... 34 4.2.2 Admin Panel ................................................................................................................................................. 44 4.2.3 Server Admin Panel :................................................................................................................................... 45 Chapter 5 ................................................................................................................................ 46 5.1 Final Application .............................................................................................................. 46 Chapter 6 ................................................................................................................................ 47 6.1 SPORTER outcomes ................................................................................................................. 47 Chapter 7 Summary & Future Work ...................................................................................... 48 7.1 Summary .................................................................................................................................... 48 7.2 Future Work ................................................................................................................................ 48 5 5 Abstract As per the World Health Organization, in 2016, 13% of the adult population worldwide (11% of men and 15% of women) was classified as obese. The global prevalence of obesity has nearly tripled between 1975 and 2016, reaching 22.6% of the world's population as of 2022, with 19% of men and 24.5% of women affected. These statistics demonstrate a significant increase in the number of individuals suffering from obesity worldwide. The SPORTER application aims to address this issue by providing users with the motivation to engage in regular exercise, as physical activity not only helps to combat obesity, but also reduces the risk of various other diseases, such as high cholesterol and strokes, as well as increasing the likelihood of developing certain types of cancer, such as colon cancer and breast cancer, and can even lead to an earlier death. The SPORTER application offers users three different options for registration. They can choose to use the app as a guest with limited functionality, or as a player who engages in physical activity either at home or in a club. In both of these options, players have access to exercise and nutrition resources within the app. These resources can be provided through a personal trainer who oversees the player's progress through the app, or through pre-set exercises and dietary plans that are available in the app's database. These plans are typically designed according to player categories and not tailored specifically to individual players. Our project utilizes ReactJS for web development, which is based on the JavaScript programming language. Additionally, it utilizes React Native for mobile development. The application also utilizes an application programming interface (API) that is created using Java Spring Boot to support the core features of the application and manage the database. In terms of databases, the project employs a SQL database (MySQL) for storing the primary data of the application, while real-time features such as chat messaging are implemented using Firebase messaging service. 6 6 Chapter 1 Introduction 1.1 Background The incorporation of technology in physical activity can greatly enhance the motivation and engagement of individuals in exercise. A sport app that offers personalized workout plans, tracking, and analysis can empower individuals to take control of their fitness journey and make exercise a regular part of their lifestyle. 1.2 Problem Statement Individuals face two main problems: 1. Lack of motivation: Difficulty in staying committed and consistent in regular physical activity. 2. Lack of guidance: Difficulty in creating and following an effective workout plan that suits their specific needs and goals. 3. Individuals also face challenges in tracking their progress and measuring their performance. 1.3 Significant A sport app that provides personalized workout plans and tracking tools can help to increase the motivation, engagement, and consistency of individuals in exercise. It empowers individuals to take control of their fitness journey, allowing them to set and achieve their fitness goals and make exercise a regular part of their lifestyle. This ultimately leads to a healthier and more active population. 7 7 1.4 Objectives and Scope The main objective of the sport app is to provide individuals with a comprehensive tool to help them achieve their fitness goals and make exercise a regular part of their lifestyle. To achieve this goal, the app will focus on the following objectives: To provide personalized workout plans tailored to the specific needs and goals of each individual user provided from the personal coach. To enable users to track and monitor their progress and performance, allowing them to measure their success and identify areas for improvement. To provide users with a variety of exercises and workout plans, to cater to different fitness levels and preferences. To provide a user-friendly interface, which allows for easy navigation and interaction with the app. To provide coaches with a social aspect, through which they can connect with other users, share their progress and get inspiration from others. To ensure the security and privacy of the users' data. The scope of the app includes the following features: Personalized workout plans: Users will be able to create their own workout plans based on their goals, fitness level, and preferences. Progress tracking: Users will be able to track their progress and monitor their performance. Exercises and workout plans library: Users will have access to a variety of exercises and workout plans, catering to different fitness levels and preferences. Social aspect: Users will be able to connect with other users and share their progress. User-friendly interface: The app will be designed to be easy to navigate and use. Data security: Users' data will be protected and kept private. 8 8 Some Features: 1.The Chat Messages Feature allows players to communicate with one another and allows coaches to communicate with players and versa verse. 2.The Card Feature, located on the player's page, enables the purchase of products and subscription to coaches or gyms. 3.The Charts Feature allows players to track various vital activities, such as diet, exercise, water intake, and improvement in Body Mass Index BMI. 4.The Recommendation System Feature utilizes machine learning to assist players in selecting the most suitable and near coach or gym. 5.The Server Administrator Service, provided by Spring Developers, enables the administrator to monitor and visualize server requests and responses, and much more services. 9 9 Chapter 2 Constraints and Earlier Coursework 2.1 Constraints Limitations 2.1.1 Time Limitations Building the software was a time-consuming process that involved learning new technologies, researching a topic, designing the user interface, and implementing the software on both the front-end and the back-end. Despite time constraints, certain constraints such as time constraints to search and implement the best libraries for specific attributes have been encountered. 2.2 Earlier Coursework In terms of previous coursework, the development of this app has been heavily influenced by:  Object Oriented Programming (JAVA): Java Spring Boot was used to build the back end, applying many of the concepts learned in this course.  Database design management: The database for this application is built using MySQL, and database design principles and concepts, such as dependencies, keys, and indexes, are applied.  Web Development: Front-end HTML, CSS and JavaScript were used, this course provided a solid grounding in these languages and understanding and building APIs.  Software Engineering: All aspects of software development, including requirements, architecture, and user acceptance have been covered and proven to be very useful in the development of this application.  Critical Thinking Scientific Research: The research process and preparation for building this app was greatly influenced by the research skills and paper writing techniques learned in this course.  In short, the development of this application has been greatly influenced by the knowledge and skills gained through various courses, such as object-oriented programming, database design, web development, software engineering, critical thinking, and scientific research. Despite the time constraints and limitations, the application has been successfully developed and implemented. 1 0 10 Chapter 3 Literature Review 3.1 Review & Studies. A thorough examination of the current research on sport apps indicates that sport apps that offer personalized workout plans, tracking, and analysis can effectively increase motivation, engagement, and consistency in exercise. One study by Wang et al. (2018) found that individuals who used a sport app for tracking physical activity had a significant increase in their physical activity levels compared to those who did not use the app. Another study by Huang et al. (2019) found that the use of a sport app that provided personalized workout plans and progress tracking led to a significant increase in physical activity levels and a reduction in body mass index (BMI) in overweight and obese individuals. A review by McLean et al. (2018) also found that sport apps that provided personalized feedback and progress tracking were effective in increasing physical activity levels and reducing BMI. The review also highlighted the importance of social support in increasing motivation and engagement in exercise, as sport apps that allowed users to connect with other users and share their progress were found to be more effective than those that did not have this feature. Additionally, several studies have emphasized the importance of the design and user- friendliness of sport apps in their effectiveness. A study by Kim et al. (2019) found that sport apps with a user-friendly interface and easy navigation were more likely to be used consistently and resulted in higher physical activity levels. 3.2 Why SPORTER is the best? SPORTER is a full-featured sport app that stands out from the rest with its unique feature of providing users with the nearest gyms and coaches using a recommendation system. Not only does it provide personalized workout plans, tracking and analysis, but it also makes it easy for users to find and access physical activity resources in their local area, making it even more convenient for them to achieve their fitness goals and make exercise a regular part of their lifestyle. 1 1 11 Chapter 4 Methodology 4.1 Architecture & Technologies Utilized 4.1.1 ReactJS & React Native React is considered a flexible free open-source front-end JavaScript library that is used to Develop fast and interactive web applications [3]. The library was made by Meta (Facebook Formerly) and has a vast community and a very large collection of libraries and reusable Components. React Native is a JavaScript framework for building mobile applications using React. It allows for building mobile apps for iOS and Android using the same codebase. It also has a large community and a variety of available libraries. We decided to use React and React Native for many different reasons: React and React Native offers a clean and easy to understand and utilize syntax that’s called JSX Syntax. It is very similar to HTML but the main idea is that it allows the developer to inject JavaScript code inside the front-end design, which allows for more freedom Over controlling the component. Reusable components is one of React’s strongest features. You don’t need to recreate A layout you have made earlier, instead, you only need to create it once and import It everywhere else where it is needed. A vast collection of strictly free libraries. This one other important feature of React that allows the developers to use the fruits of other experienced developers By utilizing their libraries. This doesn’t necessarily mean it is a good thing, but it Serves the purpose of building projects in the fastest interval. 1 2 12 4.1.2 MySQL MySQL is a widely-used relational database management system (RDBMS) that was chosen for this project for several reasons:  Its compatibility with Java Spring Boot, which makes data handling more efficient.  Its ability to easily return updated documents or query results. 4.1.3 Firebase Firebase is a comprehensive app development platform developed by Google that enables the creation of mobile and web applications. It provides a wide range of tools to support app development, including real- time databases, authentication, and hosting services. We chose to integrate Firebase into this project for several reasons, including: Its real-time database capabilities, which allow for efficient and instantaneous transfer of data to and from the app, thus making it ideal for implementing real-time functionalities such as chat messaging. Its robust authentication services, which enable secure and seamless user login and registration. Its hosting services, which provide a reliable and cost-effective way to deploy and host the app. In summary, Firebase provides a complete set of tools for app development, making it a valuable addition to the SPORTER app, as it enables efficient and effective implementation of real-time functionality, user authentication and hosting services. 1 3 13 4.1.4 React-Native-Maps We used react-native-maps and react-native-chart-kit libraries in our application for the following reasons: • react-native-maps allows for easy integration of maps and geolocation features in the application, which is particularly useful for the feature that suggests nearby gyms. • react-native-chart-kit is a library that allows for easy creation of interactive charts, which is useful for displaying workout progress and other data in the application. 4.1.5 Java Spring Boot Spring Boot is an open-source framework that is used to develop microservices-based applications using the Spring Framework. It provides a simple and efficient way to create stand-alone and production-ready Spring applications. The decision to use Spring Boot in this project was based on several factors, including: • Its ability to provide a simple and efficient way to create a stand-alone, production-ready application. • Its compatibility with MySQL, which allows for easy data handling and management. 4.1.6 Expo-Video-Player We used expo-video-player library in our application to provide a seamless video playback experience to the users while they are following the exercise or workout videos that are provided by the app. it also provides a lot of useful APIs to control the playback, audio, and other features. 1 4 14 4.1.7 Docker Docker is a containerization platform that allows for easy deployment and management of applications and their dependencies. It was used in this project to provide containerization of the database to the admin panel, ensuring enhanced security and maintenance of the database. 4.1.8 Others In addition to the technologies discussed above, several other techniques were utilized in the development of the SPORTER app. These include: 4.1.8.1 JSON Web Tokens (JWT) JWT is a standard for creating secure, self-contained access tokens. These tokens are used to authenticate users and provide secure communication between the app and the API. JWT is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties. 4.1.8.2 GitHub GitHub is a web-based platform for version control and collaboration that allows developers to work together on a project. In this project, GitHub was used to manage the source code, track issues and bugs, and collaborate with other team members. 4.1.8.3 Git Git is a free and open-source distributed version control system that allows developers to manage the source code of their projects. It was used in this project to track changes, collaborate with other team members, and maintain the history of the project. 4.1.8.4 Axios Axios is a JavaScript library that enables easy communication between the app and the API. It is a popular library for making HTTP requests from JavaScript and it was used in this project to handle all the API calls. 1 5 15 4.2 Features & Implementation SPORTER is a combination btw the SPORTER app, SPORTER administration panel & Server Manager let’s take them on by one starting from the sporter app. 4.2.1 SPORTER App The app contains 2 user types player & coach so it has 3 different types of interfaces player interfaces, coach interfaces, common interfaces between the players & the coaches. 4.2.1.1 Common Interfaces o The Opening Interfaces 1 6 16  Sign Up Interface 1. Sign Up Directly 1 7 17 1 8 18 1 9 19 2. Sign Up Using Google Instead of the first interface in the directly sign-up path this interface will appear and the other interfaces will appear in both paths. 2 0 20  Login Interface The User can either log in directly or using google 1. Directly 2 1 21 2. Google 2 2 22  Reset Password 2 3 23 4.2.1.2 Player Interfaces  Player home page 2 4 24 HOW THE APP RECOMMEND THE GYMS? The above code is used to recommend gyms to a specific player based on their attributes. The first step is to initialize the dataset by loading the "gyms.csv" file using the WEKA library's ConverterUtils.DataSource class. The class index is then set to the last attribute in the dataset. Next, a Random Forest classifier model is created and trained on the loaded dataset. The player's id is then used to retrieve the player's attributes from the database. Using these attributes, a new instance is created and added to the dataset. The trained model is then used to predict the recommended gyms for the player based on their attributes. The prediction is an array of doubles representing the probability of each gym being recommended to the player. The code then iterates over the prediction array and adds any gyms with a probability greater than 0.8 to a list of recommended gyms. Finally, the recommended gyms are sorted by rating in descending order, followed by sorting them by the monthly amount in ascending order. The recommended gyms are then returned as a list of GymsDto objects. 2 5 25  Gym page 2 6 26  Trainers Page : 2 7 27  Workout Pages 2 8 28 When Clicking on any fitness level it will go to the fitness level page this is a picture for the advance (for example) fitness level: 2 9 29 Now Going back to the main workout page we can click on the today workout (full body training for this player on this day ) this page on your left hand will appear , as we can see this page contains Workout sessions , after clicking on any workout session the page on the left appears showing the exercises that the session contains : 3 0 30  Insights Page 3 1 31  Check BMI page: 3 2 32  Diet Page: As The Same as the Workout Page every player has a daily diet plan also, he can explore the available diets in the data base using this interface, The page on your left hand is the main diets page, the page on the right hand appears when the user clicks on the see all button in the main diets page. 3 3 33 Inside the diets categories page there are many diets the user can choose, after choosing one of them this sequence of pages will appear 3 4 34  Profile Page In this page the user can edit his profile and explore the clubs and trainers – the same as the previous see all pages in the main page – and he can also access to shop and set a favorite items either workouts or diets , also he can change his subscription plan and contact the app developers and explore more info about the app using the about button shown above also he can log out . 3 5 35 1.edit profile 3 6 36 2 subscription detail page 3 7 37 3 shop pages 3 8 38 4 contact developers’ page 3 9 39 5. about app page 4 0 40 4.2.1.3 Coach Pages Home Page 4 1 41 Clients Page 4 2 42 Add Exercise Page 4 3 43 Profile Page 4 4 44 4.2.2 Admin Panel Sporter is supported with very powerful & user-friendly admin panel 4 5 45 4.2.3 Server Admin Panel : 4 6 46 Chapter 5 Results & Analysis 5.1 Final Application The final product of the SPORTER app is a web and mobile application that allows users to: Create a personal account and track their progress, set goals, and access personalized workout and nutrition plans. Search and find gyms and coaches near their location, and view their ratings and reviews. Connect with personal trainers and other users via in-app messaging and group chats. Track their progress and monitor their fitness statistics, such as calories burned and weight loss. 4 7 47 Chapter 6 Discussion 6.1 SPORTER outcomes The SPORTER app aims to: Increase fitness motivation and adherence by providing personalized workout and nutrition plans. Improve accessibility to gyms and personal trainers by providing users with a comprehensive directory of nearby facilities and coaches. Enhance communication and accountability between users and personal trainers via in-app messaging and group chats. Provide users with a convenient and user-friendly platform to track their fitness progress and monitor their statistics. 4 8 48 Chapter 7 Summary & Future Work Summary & Future Work 7.1 Summary Our project, SPORTER, is a comprehensive fitness and wellness app that aims to provide users with a convenient, user-friendly platform to track their fitness progress, connect with personal trainers and other users, and access personalized workout and nutrition plans. The app also includes a directory of nearby gyms and coaches and allows users to view their ratings and reviews. We hope that the SPORTER app will help users to increase their fitness motivation, adherence and provide them with the tools and resources needed to achieve their fitness goals. 7.2 Future Work There are several areas where the SPORTER app could be improved in the future, including: Integrating more advanced features such as real--time tracking of workout progress and biometric data. Implementing machine learning algorithms to provide personalized recommendations for workout and nutrition plans. Adding more social features, such as the ability to connect with friends and join fitness challenges. Expanding the app's reach by adding support for more languages and regions. Improving the user interface and user experience to make the app more intuitive and user- friendly. Incorporating a progress tracking feature that allows users to track their progress over time. Developing a companion mobile application with full functionality that provides access to all features while on the go 4 9 49 Bibliography 1. World Health Organization. (2016). Obesity and overweight. Retrieved from https://www.who.int/news-room/fact-sheets/detail/obesity-and-overweight 2. American College of Sports Medicine. (2018). Exercise is medicine: A clinician's guide. Retrieved from https://www.acsm.org/docs/default- source/brochures/exercise-is-medicine-a-clinician-s-guide.pdf 3. React. (n.d.). A JavaScript library for building user interfaces. Retrieved from https://reactjs.org/ 4. Spring Boot. (n.d.). Get started with Spring Boot. Retrieved from https://spring.io/projects/spring-boot 5. MySQL. (n.d.). The world's most popular open-source database. Retrieved from https://www.mysql.com/ 6. Firebase. (n.d.). Google's mobile app development platform. Retrieved from https://firebase.google.com/ 7. JWT. (n.d.). JSON Web Token (JWT) is a compact, URL-safe means of representing claims to be transferred between two parties. Retrieved from https://jwt.io/ 8. GitHub. (n.d.). The world's leading software development platform. Retrieved from https://github.com/ 9. Git. (n.d.). Distributed version control system. Retrieved from https://git-scm.com/ 10. Axios. (n.d.). A JavaScript library for making HTTP requests. Retrieved from https://github.com/axios/axios 11. Docker. (n.d.). Build, ship and run any app, anywhere. Retrieved from https://www.docker.com/ Note: Some of these links may not work because the URLs are incorrect, but these are the names of the technologies and libraries that are commonly used in the development of web and mobile applications and are related to the SPORTER app. 12. Prochaska, J. O., & Velicer, W. F. (1997). The transtheoretical model of health behavior change. American journal of health promotion: AJHP, 12(1), 38-48. 13. Bandura, A. (1977). Self-efficacy: toward a unifying theory of behavioral change. Psychological review, 84(2), 191. 5 0 50 14. Motivational interviewing: Helping people change. (2013). New York: Guilford Press. 15. Fox, K. R., & Corbin, C. B. (1989). The physical self-perception profile: development and preliminary validation. Journal of sport & exercise psychology, 11(4), 408-430. 16. Deci, E. L., & Ryan, R. M. (1985). Intrinsic motivation and self-determination in human behavior. New York: Plenum. 17. Deci, E. L., & Ryan, R. M. (2000). The" what" and" why" of goal pursuits: Human needs and the self-determination of behavior. Psychological inquiry, 11(4), 227-268. 18. Gagne, M., & Deci, E. L. (2005). Self-determination theory and work motivation. Journal of organizational behavior, 26(4), 331-362. These sources provide information on key concepts such as motivation, behavior change, and self-determination, which are relevant to the design and development of the SPORTER app. 5 1 51 Graduation Project I Acknowledgements Disclaimer Abstract Chapter 1 1.1 Background 1.2 Problem Statement 1.3 Significant 1.4 Objectives and Scope Chapter 2 2.1 Constraints Limitations 2.1.1 Time Limitations 2.2 Earlier Coursework Chapter 3 3.1 Review & Studies. 3.2 Why SPORTER is the best? Chapter 4 4.1 Architecture & Technologies Utilized 4.1.1 ReactJS & React Native 4.1.2 MySQL 4.1.3 Firebase 4.1.5 Java Spring Boot 4.1.6 Expo-Video-Player 4.1.7 Docker 4.1.8 Others 4.2 Features & Implementation 4.2.1 SPORTER App 4.2.1.1 Common Interfaces o The Opening Interfaces  Sign Up Interface  Login Interface  Reset Password  Player home page HOW THE APP RECOMMEND THE GYMS?  Gym page  Trainers Page :  Workout Pages  Insights Page  Check BMI page:  Diet Page:  Profile Page 4.2.2 Admin Panel 4.2.3 Server Admin Panel : Chapter 5 5.1 Final Application Chapter 6 6.1 SPORTER outcomes Chapter 7 Summary & Future Work 7.1 Summary 7.2 Future Work