THE UNIVERSITY OF DA NANG DANANG UNIVERSITY OF SCIENCE AND TECHNOLOGY FACULTY OF INFORMATION TECHNOLOGY GRADUATION THESIS INFORMATION TECHNOLOGY FACULTY PROJECT NAME : BUILDING AN APPLICATION FOR TRACKING EFFECTIVE RUNNING WITH GPS INTEGRATION Supervisor : MSc HO PHAN HIEU Student : THAI DONG KHUONG Student ID : 102150108 Class : 15T2 Da Nang , December 201 9 Thai Dong Khuong PROJECT’S NAME: BUILDING AN APPLICATION FOR TRACKING EFFECTIVE RUNNING WITH GPS INTEGRATION THE UNIVERSITY OF DA NANG DANANG UNIVERSITY OF SCIENCE AND TECHNOLOGY FACULTY OF INFORMATION TECHNOLOGY GRADUATION THESIS INFORMATION TECHNOLOGY FACULTY PROJECT NAME : BUILDING AN APPLICATION FOR TRACKING EFFECTIVE RUNNING WITH GPS INTEGRATION Supervisor : MSc HO PHAN HIEU Student : THAI DONG KHUONG Student ID : 102150108 Class : 15T2 Da Nang , December 201 9 INSTRUCTOR’S COMMENTS REVIEWER’S COMMENTS SUMMARY Topic title : Building an application for tracking effective running with GP S integration Student name : Thai Dong Khuong Student ID : 102150108 Class : 15T2 The purpose of this project was to create a system which offers services that focuses on gathering and managing sports data (specially for running) in order to motivate people to do sports and to link like - minded people All relevant sports data ( duration , distance, calorie s consumption, average pace, average speed ) can be tracked via my app Tracking Running (name of my app) makes your running more exciting - because after all, sports are supposed to be fun I use Laravel framework for building API and Admin Web Page , React Native for buiding Mobile Application , MySQL for designing database In addition, I use Cloudinary for storing image and Amazon Web Services for deployment THE UNIVERSITY OF DANANG UNIVERSITY OF SCIENCE AND TECHNOLOGY INFORMATION TECHNOLOGY FACU L TY SOCIALIST REPUBLIC OF VIET NAM Independence – Freedom – Happiness GRADUATION PROJECT REQUIREMENTS Student Name: Thai Dong Khuong Student No : 102150108 Class: 15T2 Department: Information Technology Major: Software E ngineer 1 Name of project: Building an application for tracking effective running with GPS integration 2 This project’s results: ☐ Are protected by an intellectual property agreement 3 Initial data: Data collected from internet and typed by hand 4 Project contents: I need to compl ete all of the content below to build the my system: - A nalysis and design database structure - Implementing all features in the system and publi c as RESTful API web service - Design and build up an Android application for client (include: UI, security and business logic) 5 Charts and drawings (please specify the drawing type and size): - Use case diagram - Activity diagram - Class diagram - Package diagram 6 Supervisor : M S Ho Phan hieu 7 Date of assignment: 06/09/2019 8 Date of completion: 20/12/2019 Da Nang, day 20 month 12 year 2019 Head of Division Supervisor i ACKNOWLEDGEMENTS I would first like to thank my instructor, M S Ho Phan Hieu for his continuos support, supervision, motivation, and guidance throughout the tenure of my project in spite of his hectic schedule He remained a driving spirit in my project and his experience gave me the understanding in handling research projects as well as helping me to clarify the complicated concepts, requiring knowledge and perception, handling critical situations and in understanding the objective of my work I also want to thank my family and friends, who gave me the strength and confidence duri ng the time of learning and implementation phase of this project They have given a lot of love and encouragement for me which helped pass over the difficulties and struggles Without their generous help, my senior year would not have been successful Sincerely, Thai Dong Khuong ii GUARANTEE We guarantee: 1 The contents of this senior project are performed by myself following the guidance of supervisors M S Ho Phan Hieu 2 All references used in this senior project thesis, are quoted with the author’s name, project name, time and location to publish clearly and faithfully 3 All invalid copies, educated statute violation or cheating will be borne the full responsibility by my self Students, Thai Dong Khuong iii TABLE OF CONTENT Instructor’s comments Response’s comments Abstract Graduation project requirements Acknowledgements i Guarantee ii Table of content iii List of tables and figures v INTRODUCTION 1 1 Project Overview 1 1 1 Context 1 1 2 Purpose 1 2 Theories 1 2 1 Technologies 1 2 2 Tools and e nvironment development 2 3 Structure of the thesis 2 Chapter 1: THEORIES AND TECHNOLOGY 3 1 1 PHP Programming Language 3 1 2 Laravel Framework 4 1 3 React Native 7 1 4 MySQL 8 1 5 Cloudinary 9 1 6 Amazon Web Services (AWS) 11 1 7 RESTful APIs 14 Chapter 2: ANALYSIS AND DESIGN 19 2 1 Requirement analysis 19 2 1 1 G eneral requirements 19 2 1 2 Main features 19 2 2 System analysis 20 2 2 1 System architecture 20 2 2 2 Use case diagram 21 2 2 3 Description for the main use case 22 2 2 4 Activity diagram 35 iii 2 3 System design 41 2 3 1 Class diagram 41 2 3 2 Package diagram 42 2 3 3 Database design 43 2 4 Conclusion 49 Chapter 3: IMPLEMENTATION AND DEMO 50 3 1 Development environment 50 3 2 Demo main feature 50 3 2 1 Login – Logout 50 3 2 2 Regis ter 52 3 2 3 Start running 53 3 2 4 Join Challenge and group 57 3 2 5 Social network 59 3 2 6 Updat e profile 60 3 2 7 Admin Web 61 3 3 Evaluation 63 3 3 1 Advantages 63 3 3 2 Disadvant ages 63 CONCLUSION 64 1 Achievement 64 2 Future work 64 REFERENCES 65 iii LIST OF TABLES AND FIGURES 1 List of figures Figure 1 1: PHP language 3 Figure 1 2: Architecture of Laravel MVC 5 Figure 1 3: React Native framework 7 Figure 1 4: MySQL database 8 Figure 1 5: Cloudinary – Image Storage Service 10 Figure 1 6: Clo ud computing 12 Figure 1 7: Amazon Web Services (AWS) 12 Figure 1 8: Elastic Beanstalk – a service of AWS 14 Figure 1 9: REST architecture 15 Figure 2 1: System architecture 20 Figure 2 2: Use case diagram for Administrator 21 Figure 2 3: Use case diagram for User 22 Figure 2 4: Use case diagram for User 36 Figure 2 5: Activity diagram for register function 36 Figure 2 6: Activity diagram for main function 37 Figure 2 7: Activity diagr am for join function 38 Figure 2 8: Activity diagram for updating profile function 39 Figure 2 9: Activity diagram for deleting account function 40 Figure 2 10: Class diagram of system 41 Figure 2 11: Package diagram of system 42 Figure 2 12: Database design 49 Figure 3 1: Login screen 52 Figure 3 2 : Log out screen 53 Figure 3 3 : Register screen 54 Figure 3 4 : Activity screen 55 Figure 3 5 : Add post screen 56 Figure 3 6 : Newsfeed screen 57 Figure 3 7 : Progress screen 58 Figure 3 8 : Group Detail screen 59 Figure 3 9 : Challenge screen 60 Figure 3 10 : Comment screen 61 Figure 3 11 : Update profile screen 62 Figure 3 12: Login page 63 Figure 3 13: Dashboard page (Accounts) 63 iii Figur e 3 14: Manage Group page 64 2 List of tables Table 2 1: Use case description – Login 23 Table 2 2: Use case description – Logout 23 Table 2 3: Use case description – User – Register 24 Table 2 4: Use case description – Administrator – Manage accounts 24 Table 2 5: Use case description – Administrator – Magage roles 25 Table 2 6: Use case description – Administrator – Manage permissions 26 Table 2 7: Use case description – Administrator – Manage groups 27 Table 2 8: Use case description – Administrator – Manage chal lenges 28 Table 2 9: Use case description – Administrator – Manage posts 30 Table 2 10: Use case description – Administrator – Manage activities 30 Table 2 11: Use case description – User – Track running road 31 Table 2 12: Use case description – User – History 31 Table 2 13: Use case description – User – Add post 32 Table 2 14: Use case description – User – Social network 33 Table 2 15: Use case description – User – Add friend 33 Table 2 16: Use case description – User – Join group Table 34 Table 2 17: Use case description – User – Update profile 35 Table 2 18: Description of table: users 43 Table 2 19: Description of table: auth_assignments 43 Table 2 20: Description of table: auth_items 44 Table 2 21: Description of table: auth_item_childs 44 Table 2 22: Description of table: friends 44 Table 2 23: Description of table: groups 44 Table 2 24: Description of table: group_user 45 Table 2 25: Description of table: challenges 45 Table 2 26: Description of table: challenge_user 46 Table 2 27: Description of table: posts 46 Table 2 28: Description of table: comments 46 Table 2 29: Description of t able: likes 46 Table 2 30: Description of table: policies 47 Table 2 31: Description of table: device_infos 47 Table 2 32: Description of table: results 47 Table 2 33: Description of table: activities 48 Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 1 INTRODUCTION 1 Project Overview 1 1 Context These days, people are leading a more sedentary lifestyle than ever before due to the advent of many convenient facilities and equipment Lack of exercises and outdoor activities is the causes of many unwanted diseases such as obesity, cardiovascular diseases, high chol esterol and high blood pressure Regular exercises will support your heart health as well as your flexibility and running is one of the easiest and most suitable exercise for everyone at all ages However, many people sometimes find it hard to keep track of their daily running time or lose their motivation in maintaining this activity Therefore, I decided to make an application named “Tracking Running” in order to help people with their daily running exercise 1 2 Purpose This system helps people record their statistics, keep track of their running roads and create a community to connect p eople who share the same interest - Admin is responsible for website management, including controlling users’ accounts, maintaining and solving any problems arising in the system - Users can get access to the system by signing in an account and logging in After logging, users can use the features that have been built in the system such as: sharing their running results on a Social Network, keeping track of the running route on Google Map, participating in Groups and taking challenges in Groups as well 2 The ories 2 1 Technologies - Laravel Framework for building API - React Native for building Mobile Application and Admin Web Page - MySQL for storing database - Cloudinary for storing static assets such as image and video - Amazon Web S ervices (AWS) for deployment - Github for storing code Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 2 2 2 Tools and environment development - Microsoft Visual Studio Code for Coding - Postman for testing API - Xampp environment - Genymotion emulator 3 Structure of the thesis INTRODUCTION – This chapter gives information about the context and purpose of the project as well as giving the scope of the problems which will be focused on the thesis Chapter 1: THEORIES AND TECHNOLOGIES – This chapter introduces about all knowledge theories and technologies used in this project Chapter 2: ANALYS IS AND DESIGN – This chapter covers the main features, software requirement specifications and database design of the project Chapter 3: IMPLEMENTATION AND RESULT EVALUATION – This chapter shows an implementation of this project, including pictures and a brief explanation for each main function CONCLUSION – The concluding section of the project simultaneously emphasizes the problem solved, as well as presenting issues still unresolved and provides recommendations and suggestions REFERENCES – Presentation about detail of referenced information used in this thesis Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 3 Chapter 1: THEORIES AND TECHNOLOGY This system applies the current popular techlonogies and platforms that combine to create a system responds to the services that users desire To learn more about technologiesm I would like to present the concept of some key technologies that I used in this project 1 1 PHP Program ming Language PHP, or Hypertext Preprocessor, is a programming language that allows for the user to have more control over the HTML that makes up a web page PHP allows for many more functions than HTML does, such as DIV tables, login functions, and graphical displays PHP was originally known as Personal Home Page, which describes the purpose of the language PHP works alongside HTML within the same document which allows for users to organize and display information within a web browser much easier than other programming languages PHP is easy to learn and allows for users to make a web page look and behave exactl y as they want it to Figure 1 1: PHP language Benefits: Easy to read: PHP is preferred among users because it is easy to read and understand Many programming languages are complex and intimidating to new users while PHP i s organized, clean, and fluent Easy to edit: PHP is also easy to edit as a user is able to quickly scan a PHP document for the code that they are looking for and change it to suit their needs Many other programming languages require that you change multiple functions within sev eral documents in order t o do the same thing that PHP can Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 4 More control: PHP offers more control over web browsers than other programming languages do Many other programming languages require large scripts to do simple tasks while PHP can do the same thing with a few lines of code PHP allows users to design web pages to their exact specifications and it can even be used alongside other programming languages to perform a wider variety of tasks Better performance: PHP has better performance ratings than other programming languages do PHP is fast, efficient, and works great in almost any web browser as well as integrating into almost any server PHP is free: Another reason that PHP is preferred among users is that it is entirely free While many other programming languages require that the user obtains expensive programs and pa ys for support files, PHP is open to anyone, anywhere, and any time PHP is widely available: As PHP has become such a success on the open market, it is very difficult to come across a web server that does not support PHP development Users can also take s atisfaction in that both individual PHP tags as well as entire PHP documents can be found on the Internet at no cost Thousands of these predefined PHP commands are available around every virtual corner and even those predefined documents can easily be edi ted to suit the user''''s unique needs 1 2 Laravel Framework Laravel is a free , open - source PHP web framework , created by Taylor Otwell and intended for the development of web applications following the model – view – controller (MVC) architectural pattern and based on Symfony Some of the features of Laravel are a modular packaging system with a dedicated dependency manager, different ways for a ccessing relational databases , utilities that aid in application dep loyment and maintenance, and its orientation toward syntactic sugar Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 5 Figure 1 2: Architecture of Laravel MVC Benefits: High security: Every year there are numerous cyber attacks taking place In such situations, you need frameworks that safeguard yourweb apps One of the most important benefits of selecting Laravel for your web app development is its capabilities to provide high - class security Laravel itself is a secured framework which does not allow any malware activities or security threats to enter within the web app That means your web app development code is safe and secure Enhanced Performance : Another stronger reason to choose Laravel is its capabilities to provi de an excellent performance of the web apps Powerful Authentication : The Laravel PHP framework was developed by Taylor Otwell with a purpose to help the website developers He wanted to allow developers to create certain web app functionalities much faster and even in a better way And, one of the extremely challenging functionality for web developers is - developing authentication for web apps Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 6 Open Source & Powerful Community : One another benefit for you to choose Laravel is that it is open - source But, that is enough for you to choose it over other PHP frameworks But, Laravel has a powerful community of developers and development companies that constantly and continuously provide support to make it more flexible and scalable Blade Templating : One of the key features of Laravel is its Blade Templating engine This engine allows the web developers to simply use the pre - defined templates to write certain codes Database Migration : There is one more benefit of using the Laravel framework is Migrations of databases These migrations allow the developers to easi ly undo the changes made to the database Using migrations, the developers can share the databases to other developers within the team easily and smoothly This was not possible earlier, but vario us Laravel developers came up with such facilities MVC Architecture : While discussing what is Laravel, the definition from Wikipedia explicitly says that it follows a Model - view - controller architecture And, due to this MVC architecture, Laravel is said t o be the best framework to use for your web application development MVC architecture provides built - in functionalitie s which the developers can make the best use of while developing your web app The MVC architecture also provides better documentation com pared to other PHP frameworks And, using MVC architecture improves the performance of your web apps And, that’s the reason why you should choose Laravel Object Oriented Libraries: Laravel comes up with Object Oriented libraries These libraries are pre - installed ones and one of them is Authentication library These libraries are full of excellent features that are easy - to - use and easy - to - implement for the developer Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 7 Easy Unit Testing: Another reason why you should consider choosing the Laravel framework for your web development is that it provides easy unit testing Future - ready Apps : The Laravel framework is evolving every day In the beginning, we saw the increasing trend of the Laravel PHP framework That trend is allowing the developers, com panies and even the entire Laravel community to bring extraordinary functionalities that stays on the top of the technology needs Developer - friendly Code: The Laravel framework comes up with libraries, tools, and even templates that make the lives of deve lopers easy for web application development And, when the developers enjoy developing your web apps, they try to make it fully - functional and a powerful one 1 3 React Native React Native is an open - source mobile application framework created by Faceb ook It is used to develop applications for Android, iOS, Web and UWP by enabling developers to use React along with native platform capabilities React Native build mobile apps using only Javascript It uses the same design as React, letting you compose a rich mobile UI from declarative components Figure 1 3: React Native framework Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 8 Benefits: Mobile app can be built with the help of Web technology which enables any web developer to easily enhance his/her skills and create React apps React Native helps in building cross platform mobile apps Saves time and cost to build mobile apps on multiple platforms Building blocks which are used in iOS and Android apps are also used while creating React Native based apps which means that React Native is a mobile framework that compiles app components for native mobile applications in JavaScript A React Native app ensures speed and agility for the mo bile apps with responsiveness and a great native app based user experience 1 4 MySQL MySQL is an open - source relational databas e management system (RDBMS) Its name is a combination of "My", the name of co - founder Michael Widenius''''s daughter, and "SQL ", the abbreviation for Structured Query Language MySQL is free and open - source software under the terms of the GNU General Public License, and is also available under a variety of proprietary licenses MySQL was owned and sponsored by the Swedish company MySQL AB, which was bought by Sun Microsyst ems (now Oracle Corporation) In 2010, when Oracle acquired Sun, Widenius forked the open - source M ySQL project to create MariaDB Figure 1 4: MySQL database Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 9 Benefits: Data Security: MySQL is globally renowned for being the most secure and reliable database management system used in popular web applications like WordPress, Drupa l, Joomla, Facebook and Twitter On - Demand Scalability: MySQL offers unmatched scalability to facilitate the management of deeply embedd ed apps using a smaller footprint even in massive warehouses that stack terabytes of data On - demand flexibili ty is the star feature of MySQL High Performance: MySQL features a distinct storage - engine framework that facilitates system administrators to co nfigure the MySQL database server for a flawless performance Whether it is an eCommerce website that receives a million queries every single day or a high - speed transactional processing system, MySQL is designed to meet even the most demanding application s while ensuring optimum speed, full - text indexes and unique memory caches for enhanced performance Comprehensive Transactional Support: MySQL tops the list of robust transactional database engines available on the market With features like complete atom ic, consistent, isolated, durable transaction support, multi - version transaction support, and unrestricted row - level locking, it is the go - to solution for full data integrity The Flexibility of Open Source: All the fears and worries that arise in an open source solution can be brought to an end with My SQL’s round - the - clock support and enterprise indemnification The secure processing and trusted software of MySQL combine to provide effective transactions for large volume projects It makes maintenance, d ebugging and upgrades fast and easy while enhancing the end - user experience 1 5 Cloudinary Cloudinary is a service that manages an application’s image and video - related needs all in the cloud It offers a wide range of media management tools used by numerous web and mobile app developers worldwide Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 10 Cloudinary allows you to upload and store an unlimited amount of images securely and privately The storage includes historical revisions and automatic backup You can manipulate the images utilizing a rang e of choices such as watermarks, face detection, cropping, resizing, applying effects, and more Figure 1 5: Cloudinary – Image Storage Service Benefits: Cutting Edge Cloud Technology: Cloudinary streamlines a client’s media management pipeline This is with the help of the service’s wide array of easy - to - use editing tools Static and dynamic images are automatically sent to the cloud via its dependable CDN and storage engines Save Money and Resources: Cloudinary also lets application owners concentrate on how to grow their core business more rapidly This is due to how the service significantly cuts down on time and resources needed to handle issues commonly encountered by developers related to management, storage and distribution of media content Effo rtless Image Transformations: Cloudinary’s key features include support for private images, image transformation on upload, direct uploading from browser, remote upload from public URLs, version man agement, and secure upload API Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 11 Attractive Image Effects: Make use of image effects and filters such as fill light, vibrance, color channels, sharpen, tilt shift, improve, blur, gradient fade, pixelate and vignette, oil paint, hue, saturation, contrast, brightness, sepia, black & white, grayscale, and more Cloud inary supports a range of image formats including JPG, WebP, SVG, PSD, EPS, PDF, ICO, TIFF, BMP, GIF, and PNG Dynamic Digital Asset Management: Cloudinary is built to accelerate time to market for teams that care about images and video – marketers, creative directors, media managers, and, web and app developers With Cloudinary’s cloud service, you can maximize the value of your digital assets, automate image and video workflow, and, deliver engaging visual experiences that are optimized for performa nce across multiple deliver y channels and user preferences Publish Content Faster: Images and video need seemingly endless variants of size, crops, formats, and effects to meet creative design requirements, responsive needs, and optimized delivery to ever y screen Optimize Customer Experience: Cloudinary’s cloud platform enables custom content for personalized delivery, and the ability to dynamically deliver content that’s optimized for fast loading, increasing conversion rates and revenue 1 6 Amazon Web Services (AWS) What is cloud computing? In cloud computing , the capital investment in building and maintaining data centers is replaced by consuming IT resources as an elastic, utility - like service from a cloud “provider” (including storage, computing , networking, data processing and analytics, application development, machine learning, and even fully managed services) Whereas in the past cloud computing was considered the province of startups and aggressively visionary enterprise users, today, it is part of the enterprise computing mainstream across every industry, for organizations of any type and size Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 12 Figure 1 6: Cloud computing What is Amazon Web Service s (AWS) ? Amazon Web Services (AWS) is a cloud service provider by Amazon Inc It offers cloud services in compute, storage, database, content delivery, networking, etc Most of the offerings from AWS are Infrastructure as a Service (IaaS), but it also offers services in PaaS, such as Beanstalk and Lambda that are hugely popular among their us ers Figure 1 7: Amazon Web Services (AWS) Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 13 Benefits: Easy to use: AWS is designed to allow application providers, ISVs, and vendors to quickly and securely host your applications – whether an existing application or a new SaaS - based application You can use the AWS Management Console or well - documented web services APIs to access AWS’s application hosting platform Flexible: AWS enables you to select the operating system, programming language, web application platform, database, and other services you need With AWS, you receive a virtual environment that lets you load the software and services your application requires This eases the migration process for existing applications while preserving options for building new solutions Cost - Effective: You pa y only for the compute power, storage, and other resources you use, with no long - term contracts or up - front commitments For more information on comparing the costs of other hosting alternatives with AWS, see the AWS Economics Center Reliable: With AWS, y ou take advantage of a scalable, reliable, and secure global computing infrastructure, the virtual backbone of Amazon com’s multi - billion dollar online business that has been honed for over a decade Scalable and high - performance: Using AWS tools, Auto Sca ling, and Elastic Load Balancing, your application can scale up or down based on demand Backed by Amazon’s massive infrastructure, you have access to compute and storage resources when you need them Secure: AWS utilizes an end - to - end approach to secure a nd harden our infrastructure, including physical, operational, and software measures For more information, see the AWS Security Center About Elastic Beanstalk : With Elastic Beanstalk, you can quickly deploy and manage applications in the AWS Cloud withou t having to learn about the infrastructure that runs those applications Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 14 Figure 1 8: Elastic Beanstalk – a service of AWS Elastic Beanstalk reduces management complexity without restricting choice or control You simply upload your application, and Elastic Beanstalk automatically handles the details of capacity provisioning, load balancing, scaling, and application health monitoring 1 7 RESTful APIs What is REST? REST is an architecture style definition applied to networked applications It exist s as a series of constraints applied to the implementation of network components, enabling uniform interface semantics, rather than appli cation - specific implementations and syntax REST stands for Representational State Transfer Acronym purists often write it as ReST, because the E in REST does not actually stand for anything It is merely the second letter of the word representational This prevents controversy on how to pronounce it, like the one that h as plagued GIF in recent years Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 15 Figure 1 9: RE ST architecture REST general constraints As an architecture, REST defines how various components are linked via connectors, and how data is exchanged over interfaces REST is a series of constraints or requirements that, when followed, create an implementation of the REST architectural style REST architecture does not encourage the creation of additional, situation - specific methods For example, a REST architecture would use the GET method to retrieve data in every circumstance The only change f or different types of data would be different parameters Contrast this to creating a new method to get information about a user (getUser), and yet another method to get information about pricing (getPricing) and so on - Client server: The user interface on the client is separate and independent of the data storage on the server This allows for the client to be implemented and modified regardless of what is, or is not, happening on the server - Stateless: No session data should be stored on the server betw een requests from the client In other words, every transaction must carry with it the ability to understand the request completely without the need to access any additional context or data stored on the server All session data should reside exclusively o n the client Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 16 - Cacheable data: In every exchange, data must be marked either as cacheable or non - cacheable data Data that is cacheable may be stored and reused by the client No data is cached on the server because this would vi olate the stateless constrai nt - Uniform interface: In order to achieve full interoperability, the interface is decoupled from the type of data provided that all interactions operate in the same manner Four sub - constraints ensure uniform interfaces: identification of resources, manip ulation of resources via representations, self - descriptive messages, and Hypermedia as The Engine Of the Application State (HATEOAS) - Identification of resources Any information that can be named is a resource A resource may be any form of data A resource identifier is a way to refer to a specific resource at a particular point in time RESTful implementation When taken together, the REST architecture creates a highly - scalable, completely transparent and reusable framework where the clients are decoupled from the implantations of services on the servers It is platform - independent, for both the client and the server On the modern web, REST is implemented using a common standard vocabulary between client and server known as Hypertext Transfer Pr otocol, or HTTP REST and HTTP Although HTTP and REST are not the same thing, HTTP in its original form is one implementation of REST - Identification of resources in HTTP: Each resource is identified by a uniform resource identifier (URI) Typically, this is implemented as a URL within a web browser A URI identifies a resource No prior knowledge of the system where the resource resides on the server is required Also, the URI (or URL) is able to specify the representation of a resource, without knowledge of that resource’s file structure - HTTP methods: Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 17 A pure REST implementation of HTTP requires using four core methods GET, POST, PUT, and DELETE Each method should be used explicitly and mapped to one of each of the core actions RETRIEVE DATA, CREATE RESOURCE, UPDATE RESOURCE, and DELETE RESOURCE - GET, POST, PUT, DELETE Used to retrieve a resource or information about the resource Although most implementations of HTTP will process parameters with a GET request to modify or create resources, such action would not be compliant with a RESTful implementation GET requests should be idempotent A POST request creates new data on a server By definition, a POST request is NOT idempotent With each execution, a POST request would create more data Simila r to a POST request, a PUT request modifies existing data For example, changing the last name of an existing user PUT requests are non - intuitively idempotent While a PUT request does change data, it does so in the same way every time Thus, running a PU T request that changes a user’s last name would always produce the same result so long as all parameters are consistent A DELETE request removes or deletes data, as the name suggests Delete requests are also idempotent in that running one repeatedly will always result in the same final state with the data in question no longer existing on the server RESTful APIs: A RESTful API is thus one that uses ONLY REST architecture without the need for additional documentation or methods beyond those that fit the model Fielding provided the following points as clarification of what makes an API REST compliant - Independence of protocol A truly RESTful API should not depend upon any one protocol and should be able to support any protocol that uses URI for identifica tion Otherwise, identification is not separate from interaction - Support of protocols as standardized A REST API should not require changes to standardized protocols, particularly the addition of extra features Whenever possible, any required workarounds should be separately defined with the goal of removing them altogether once the workarounds are no longer necessary Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 18 - Does not define fixed resources A server namespace should be independent of the API definition and requirements In other words, the API should work with any REST capable server, not just servers that conform to a particular API specification 1 8 Conclusion By studying and learning about the above technologies, we successfully applied the concepts and their mechanism operating in this project to create genealogical tree system in mobile application Some of these technologies are not new, but they are widely using and a trend for software development industry Therefore, understanding the concept is very important, help to apply properl y technology for each project, in order to improve the efficiency and usability Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 19 Chapter 2: ANALYSIS AND DESIGN This chapter will go into detail the requirements, describing nonfunctional requirements, design constraints and other factors necessary to provide a complete and comprehensive description of the requirements for the application This consists of a package containing Use - case diagram, Sequence diagram, Class diagram, and Database Shows an overview of what functions the application can satisfy In addition, it defines the architecture, modules, and data for a system to satisfy specified requirements Syste m Design process is to provide sufficiently detailed data and information about the system and it is a system element to enable the implementation consistent with architectural entities as defined in models and views of the system architecture It shows th e components of the application, the structure of data tables, the relationship the elements that make up the system 2 1 Requirement analysis 2 1 1 General requirements For users, I want my system has enough features to support them for using easily They can view history of their running results, share that result on social network, join challenges in group and many different features Administrator is person who is responsible for handling all user accounts on the system They also are the people that ensure the s ystem works in the most stable way 2 1 2 Main features This system has two main actors: Administrator (Admin) and User 1) Administrator Administrators have multiple responsibilities that revolve around the maintenance of websites The main duties of an administra tor are wide - ranging, and vary widely from one organization to another Administrators are usually charged with installing, supporting, and maintaining servers or other computer systems, and planning for and responding to service outages and other problems In my system, the responsibility of administrator is to make sure that website is up to date, secure and function smoothly for the user There are the main features of administrator: m anage activities, manage roles, manage permissions, manage accounts, manage groups, manage c hallenges and manage posts Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 20 2) User These are five main tabs included in my application The user can choose different features from these tabs for their experience Those features include: Newsfeed: This is where the user can find all of the activities (running) from their friends or themselves The user can add new friends who have the same passion for running with them The user can comment or like on someone else’s post Progress: The user can find a lot of detailed information on how far the user have come, recent activities and history about their running Activity: This is main feature of app When the user click “Start” button, the system will count times, track their location on the google maps and update their running in real time such as duration, distance, calorie s, aver age pace, average speed and start day Gr oup This is an interesting feature included in the app There are many challenges in the group that the user can join This will motivate them in the running Profile: This is where the user can manage their profile and adjust personal settings 2 2 System ana lysis 2 2 1 System architecture Figure 2 1: System architecture Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 21 This system includes: - About back - end: I use Laravel Framework (framework of PHP language) for creating API services and rendering web pages (this website assists administrators to manage the whole system) - About front - end: I apply React Native (a framework for writing real, natively rendering mobile applications for IOS and Android) - About database: I use MySQL for storing data - Besides, I use Cloudinary for storing image (Cloudinary is an end - to - end image management solution for the website and mobile apps) I deploy my code on Elastic B eanstalk (a service of AWS for managing applications) 2 2 2 Use case diagram 1) Use case diagram for Administrator Figure 2 2: Use case diagram for A dministrator Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 22 2) Use case diagram for User Figure 2 3 : Use case diagram for U ser 2 2 3 Description for the main use case 1) Login Table 2 1 : Use case description – Login Use Case ID UC - 01 Actor Administrator, User Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 23 Brief description This use case for logging in Pre - conditions User who has account to access to system Post - conditions User logged in successfully Flow of events Actor Input System Response 1 Open the system 2 Show login form 3 Fill the email and password Click “Login” button 4 System validates account that user filled and submit Show home screen if user’s account is correct 2) Logout Table 2 2: Use case description – Logout Use Case ID UC - 02 Actor Administrator, User Brief description This use case for logging out Pre - conditions User already logged into the system Post - conditions User logged out successfully Flow of events Actor Input System Response 1 - Admin: Click top - right button on the screen corner - User: Select profile tab and click logout button in menu options 2 Direct to the login page Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 24 3) Register Table 2 3: Use case description – User - Register Use Case ID UC - 03 Actor User Brief description This use case for registering user account Pre - conditions A person who don’t have an account to access on the system Post - conditions Server received the request from the user and add info of user into database Flow of events Actor Input System Response 1 Choose “create a new account” from login screen 2 Show fields to fill 3 Fill all information including firstname, lastname, email, phone, password, confirm password After that, click “Sign up” button 4 System validates the information that the user filled and submit If the information is valid, it will return success message 4) Manage accounts Table 2 4: Use case description – Administrator – Manage accounts Use Case ID UC - 04 Actor Administrator Brief description This use case for managing user account Pre - conditions Administrator already logged into the system Post - conditions Show all of users on the system Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 25 Flow of events Actor Input System Response 1 Select “Accounts ” in right sidebar 2 Show user list 3 Click “Update” button (pencil icon) on any user account 4 Show user information 5 Change any fields in there 6 Press “Save” button 7 The system update user information successfully 8 Press “Delete” button (trash icon) on any user account to delete user account 9 The system delete user account successfully 5) Manage roles Table 2 5: Use case description – Administrator – Manage roles Use Case ID UC - 05 Actor Administrator Brief description This use case for managing user role Pre - conditions Administrator already logged into the system Post - conditions Show a list of roles Flow of events Actor Input System Response 1 Select “Roles” in right sidebar 2 Display a list of roles Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 26 3 Click “Update” button (pencil icon) on any role 4 Show a list of permissions including on the system 5 Select permission for role and press “Save” 6 The system update role successfully 7 Press “Delete” button (trash icon) on any role to delete role 8 The system delete role successfully 9 Click “Create Role” button on top - right corner and fill in the necessary blank field After that, click “Save” button to create role 10 The system create role successfully 6) Manage permisstions Table 2 6: Use case description – Administrator – Manage permissions Use Case ID UC - 06 Actor Administrator Brief description This use case for managing permission of user’s role Pre - conditions Administrator already logged into the system Post - conditions Show a list of permissions Flow of events Actor Input System Response 1 Select “ Permissions” in right sidebar 2 Display a list of permissions Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 27 3 Click “Update” button (pencil icon) on any permission 4 Show a list of routes including on the system 5 Select route for permission and press “Save” 6 The system update permission successfully 7 Press “Delete” button (trash icon) on any permission to delete permission 8 The system delete permission successfully 9 Click “Create Permisson” button on top - right corner and fill in the necessary blank field After that, click “Save” button to create permission 10 The system create permisson successfully 7) Manage groups Table 2 7: Use case description – Administrator – Manage groups Use Case ID UC - 07 Actor Administrator Brief description This use case for managing group Pre - conditions Administrator already logged into the system Post - conditions Show a list of groups Flow of events Actor Input System Response 1 Select “Groups” in right sidebar 2 Display a list of groups Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 28 3 Click “Update” button (pencil icon) on any group 4 Show group information 5 Change any fields in there Press “Save” button 6 The system update group successfully 7 Press “Delete” button (trash icon) on any group to delete group 8 The system delete group successfully 9 Click “ Create Group ” button on top - right corner and fill in the necessary blank field After that, click “Save” button to create group 10 The system create group successfully 8) Manage c hallenges Table 2 8: Use case description – Administrator – Manage challenges Use Case ID UC - 08 Actor Administrator Brief description This use case for managing challenges Pre - conditions Administrator already logged into the system Post - conditions Show a list of challenges Flow of events Actor Input System Response 1 Select “Challenges” in right sidebar 2 Display a list of challenges Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 29 3 Click “Update” button (pencil icon) on any challenge 4 Show challenge information 5 Change any fields in there Press “Save” button 6 The system update challenge successfully 7 Press “Delete” button (trash icon) on any challenge to delete challenge 8 The system delete challenge successfully 9 Click “Create Challenge” button on top - right corner and fill in the necessary blank field After that, click “Save” button to create challenge 10 The system create challenge successfully 11 Click “Policy” button (info icon) on any challenge to view policy of challenge 12 Show policy 13 Change any fields in there Press “Save” button 14 The system update policy successfully 15 Click “Result” button (trophy icon) on any challenge to view a list of results including challenge 16 Show a list of results Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 30 9) Manage posts Table 2 9: Use case description – Administrator – Manage posts Use Case ID UC - 09 Actor Administrator Brief description This use case for managing post Pre - conditions Administrator already logged into the system Post - conditions Show a list of posts Flow of events Actor Input System Response 1 Select “Posts” in right sidebar 2 Display a list of posts 3 Click “Comment” button (comment icon) on any post 4 Show comments of that post 5 Press “Delete” button (trash icon) on any post to delete post 6 The system delete post successfully 10) Manage activities Table 2 10: Use case description – Administrator – Manage activities Use Case ID UC - 10 Actor Administrator Brief description This use case for managing activities Pre - conditions Administrator already logged into the system Post - conditions Show a list of activities Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 31 Flow of events Actor Input System Response 1 Select “Activities” in right sidebar 2 Display a list of activities 3 Press “Delete” button (trash icon) on any activity to delete activity 4 The system delete activity successfully 11) Track running road Table 2 11: Use case description – User – Track running road Use Case ID UC - 11 Actor User Brief description This use case for tracking running road of user Pre - conditions The user already logged into the system (app on mobile) Post - conditions Display the route of user on google map Flow of events Actor Input System Response 1 Select “Activity” tab on bottom navigation bar 2 The system redirect to activity screen 3 Click “Start” button and take action like move ment on another position 4 The system draw lines on google map and show a list of params about user’ move 12) Receive running result Table 2 12: Use case description – User – History Use Case ID UC - 12 Actor User Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 32 Brief description This use case for viewing the running result Pre - conditions The user already logged into the system (app on mobile) Post - conditions Display a list of results that user achieve Flow of events Actor Input System Response 1 Select “Progress ” tab on bottom navigation bar 2 Display a list of results 3 Touch each result to show detail result 4 The system redirect to detail result screen 13) Add post Table 2 13: Use case description – User – Add post Use Case ID UC - 13 Actor User Brief description This use case for adding post Pre - conditions The user already logged into the system (app on mobile) Post - conditions Display a list of posts that user shared on social network Flow of events Actor Input System Response 1 Select “Group” tab on bottom navigation bar 2 The system redirect to “ Group ” tab 3 Click “Add Post” and fill in the content After that, click save icon 4 The system display that post Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 33 14) Share running result on social network Table 2 14: Use case description – User – Social network Use Case ID UC - 14 Actor User Brief description This use case for sharing running result Pre - conditions The user already logged into the system (app on mobile) Post - conditions Add post successfully Flow of events Actor Input System Response 1 Select “Finish” button when ending running After that, click “Yes” on confirm alert to share result 2 The system redirect to “Newsfeed” tab 3 Scroll in current screen (Newsfeed screen) to view the post 4 The system display all of activities (running result) 15) Add friend Table 2 15: Use case description – User – Add friend Use Case ID UC - 15 Actor User Brief description This use case for adding friend Pre - conditions The user already logged into the system (app on mobile) Post - conditions Add friend that user choose Actor Input System Response Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 34 Flow of events 1 Select “ Newsfeed ” tab on bottom navigation bar 2 The system redirect to “ Newsfeed ” tab 3 Click “ add - personal icon ” on top - right corner of screen After that, click “add icon” at any friend 4 The system add friend successfully 16) Join group Table 2 16: Use case description – User – Join group Use Case ID UC - 16 Actor User Brief description This use case for participating in group Pre - conditions The user already logged into the system (app on mobile) Post - conditions User join group successfully Flow of events Actor Input System Response 1 Select “Group” tab on bottom navigation bar 2 The system redirect to “Group” tab 3 Click “Join” button 4 The system add user into group successfully 5 Click “Challenge” button After that, click any challenge to join 6 The system add user into that challenge successfully Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 35 17) Update profile Table 2 17: Use case description – User – Update profile Use Case ID UC - 17 Actor User Brief description This use case for updating profile Pre - conditions The user already logged into the system (app on mobile) Post - conditions The system display updated profile Flow of events Actor Input System Response 1 Select “Profile ” tab on bottom navigation bar 2 The system redirect to “ Profile ” tab 3 Click “setting icon” on top - right corner of screen After that, click “Edit Profile” and edit any field 4 The system update profile successfully 2 2 4 Activity diagram Activity diagram is basically a flowchart to represent the flow from one activity to another activity The activity can be described as an operation of the system Activity diagram is used as a flowchart that consists of activities performed by the system I must clearly understand about the elements used in activity diagram The main of an activity diagram is the activity itself After identifying the activities, I need to understand how they associated with constraints and conditions Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 36 1) Login Figure 2 4: Activity diagram for login function 2) Register Figure 2 5: Activity diagram for register function Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 37 This figure describes the activity of registration Before creating a new one, data must be validated and checked carefully 3) Track running road and share received result Figure 2 6: Activity diagram for main function Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 38 This figure describes the activity of tracking running Firstly, the user has to allow GPS on mobile device and click “Start” button The system will check the movement of user and begin calculating, drawing r oute of user After finishing movement, the data will be saved in database and a share request alert will appear The user can share their result into the social network including the system 4) Join group and challenge Figure 2 7: Activity diagram for join function Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 39 This figure describes the activity of joining group and challenge Firstly, the user need to select “group” tab then the system will display all of groups on the system The user can choose any group that they like The user can choose any ch allenge in group if they want 5) Manage accounts - Update personal information Figure 2 8: Activity diagram for updating profile function This figure describes the activity of updating profile When administrator need to change some user’information, they can move to Accounts page then edit their necessary information Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 40 - Delete account Figure 2 9: Activity diagram for deleting account function This figure describes the activity of deleting a account That will show the dialog to confirm that action Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 41 2 3 System design 2 3 1 Class diagram Figure 2 10: Class diagram of system Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 42 The class diagram describes the responsibilities of a system, basis for components and deployment diagrams, analysis and design of the static view of an application It describes the relationship among all entities of this system, the attributes and methods are clearly identified 2 3 2 Package diagram Figure 2 11: Package diagram of system This package diagram describes my system architecture My system uses API service to execute the actions of users, including saving data ( store the running result ), creating groups and adding challenges in each group, updating personal information , and cre ating social network which have many feature such as: write post, comment, and like a post Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 43 2 3 3 Database design 1) Description of tables Table 2 18: Name of table: user s No Name Type Allow Null Key 1 id char(36) FALSE PK 2 firstname varchar(255) TRUE 3 lastname varchar(255) TRUE 4 email varchar(255) FALSE 5 gender tinyint(4) TRUE 6 birthday date TRUE 7 phone v archar (255) TRUE 8 password varchar(255) FALSE 9 social_id v archar (255) TRUE 10 social_name v archar (255) TRUE 11 device_token v archar (255) TRUE 12 status t inyint (4) FALSE 13 remember_token v archar (100) TRUE 14 email_verified_at timestamp TRUE 15 avatar v archar (255) TRUE 16 height int(11) TRUE 17 weight int(11) TRUE 18 created_at t imestamp TRUE 19 updated_at t imestamp TRUE Table 2 19: Name of table: auth_assignments No Name Type Allow Null Key 1 id bigint(20) FALSE PK 2 item_name varchar(255) FALSE 3 user_id char(36) FALSE FK Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 44 Table 2 20: Name of table: auth_items No Name Type Allow Null Key 1 name varchar(255) FALSE PK 2 type tinyint(3) FALSE Table 2 21: Name of table: auth_item_childs No Name Type Allow Null Key 1 parent varchar(255) FALSE PK 2 child varchar(255) FALSE PK 3 child_type tinyint(3) FALSE Table 2 22: Name of table: friends No Name Type Allow Null Key 1 id bigint(20) FALSE PK 2 user_one char(36) FALSE FK 3 user_two char(36) FALSE FK 4 status tinyint(4) FALSE 5 action_user char(36) FALSE FK 6 created_at timestamp TRUE 7 updated_at timestamp TRUE Table 2 23: Name of table: groups No Name Type Allow Null Key 1 id char(36) FALSE PK 2 name varchar(255) FALSE 3 description text TRUE 4 address text TRUE 5 image text TRUE 6 created_at timestamp TRUE 7 updated_at timestamp TRUE Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 45 Table 2 24: Name of table: group_user No Name Type Allow Null Key 1 id bigint(20) FALSE PK 2 group_id char(36) FALSE FK 3 user_id char(36) FALSE FK 4 created_at timestamp TRUE 5 updated_at timestamp TRUE Table 2 25: Name of table: challenges No Name Type Allow Null Key 1 id char(36) FALSE PK 2 name varchar(255) FALSE 3 description text TRUE 4 start_date date FALSE 5 end_date date FALSE 6 start_time time FALSE 7 goal double(8,2) FALSE 8 group_id char(36) FALSE 9 image text TRUE 10 created_at timestamp TRUE 11 updated_at timestamp TRUE Table 2 26: Name of table: challenge_user No Name Type Allow Null Key 1 id bigint(20) FALSE PK 2 user_id char(36) FALSE FK 3 challenge_id char(36) FALSE FK 4 created_at timestamp TRUE 5 updated_at timestamp TRUE Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 46 Table 2 27: Name of table: post s No Name Type Allow Null Key 1 id char(36) FALSE PK 2 content text TRUE 3 image varchar(255) TRUE 4 activity_id char(36) TRUE FK 5 group_id char(36) TRUE FK 6 user_id char(36) FALSE FK 7 created_at timestamp TRUE 8 updated_at timestamp TRUE Table 2 28: Name of table: comments No Name Type Allow Null Key 1 id char(36) FALSE PK 2 content text TRUE 3 post_id char(36) FALSE FK 4 user_id char(36) FALSE FK 5 created_at timestamp TRUE 6 updated_at timestamp TRUE Table 2 29: Name of table: likes No Name Type Allow Null Key 1 id char(36) FALSE PK 2 user_id char(36) FALSE FK 3 post_id char(36) FALSE FK 4 created_at timestamp TRUE 5 updated_at timestamp TRUE Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 47 Table 2 30: Name of table: policies No Name Type Allow Null Key 1 id bigint(20) FALSE PK 2 overview text FALSE 3 rewards text FALSE 4 add_infos text FALSE 5 rules text FALSE 6 challenge_id char(36) FALSE FK 7 created_at timestamp TRUE 8 updated_at timestamp TRUE Table 2 31: Name of table: device_infos No Name Type Allow Null Key 1 id char(36) FALSE PK 2 user_id char(36) FALSE FK 3 device_token varchar(255) FALSE 4 name varchar(255) TRUE 5 os varchar(255) FALSE 6 brand varchar(255) TRUE 7 ip varchar(255) FALSE 8 created_at timestamp TRUE 9 updated_at timestamp TRUE Table 2 32: Name of table: results No Name Type Allow Null Key 1 id bigint(20) FALSE PK 2 user_id char(36) FALSE FK 3 challenge_id char(36) FALSE FK 4 result double(8,2) FALSE 5 created_at timestamp TRUE 6 updated_at timestamp TRUE Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 48 Table 2 33: Name of table: activities No Name Type Allow Null Key 1 id char(36) FALSE PK 2 distance double(8,2) FALSE 3 duration time FALSE 4 calories int(11) FALSE 5 average_pace time FALSE 6 average_speed double(8,2) FALSE 7 max_speed double(8,2) TRUE 8 start_time time TRUE 9 date date TRUE 10 user_id char(36) FALSE FK 11 created_at timestamp TRUE 12 updated_at timestamp TRUE Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 49 2) Relationship between tables Figure 2 12: Database design 2 4 Conclusion This chapter presented the requirements specification that the system could meet the user’s demands Follow the requirements, the use case diagrams are used to gather the requirements of a system including internal and external influences These requirements are mostly design requirements The activity diagrams, draw the activity flow of a system, show the steps and action sequences as well as the interactions between user and user, user and system Thereby, the overview and the activity streams of the system are fully presented Besides, this chapter also describes the system structure, as well as the action sequen ces for each function Furthermore, it shows the database to help the reader have clearer views of the system By that, I can consider and evaluate the complexity of this system Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 50 Chapter 3: IMPLEMENT ATION AND DEMO 3 1 Development environment - W eb service The web service is a RESTful API It is built by Laravel Framework (A framework of PHP programing language) , basing on representational stat e transfer (REST) technology I use d MySQL to store data - Mobile Application I use d React Native to develop my application on Android platform - Software Development Tools I use d below tools: Visual Studio Code , MySQL in XAMPP , Postman and Git - Managing Image and Deployment Environment I used Cloudinary for storing image and Amazon Web Services (AWS) for deployment - Storing Code I use Github to safely store my code 3 2 Demo main feature 3 2 1 Login – Logout To access system, the user has to login with their account Building an application for tracking effective running with GPS integration Student: Thai Dong Khuong Instructor: Ho Phan Hieu 51 Figure 3 1: Login screen Building an application for tra
Project Overview
Context
These days, people are leading a more sedentary lifestyle than ever before due to the advent of many convenient facilities and equipment Lack of exercises and outdoor activities is the causes of many unwanted diseases such as obesity, cardiovascular diseases, high cholesterol and high blood pressure
Regular exercises will support your heart health as well as your flexibility and running is one of the easiest and most suitable exercise for everyone at all ages However, many people sometimes find it hard to keep track of their daily running time or lose their motivation in maintaining this activity Therefore, I decided to make an application named “Tracking Running” in order to help people with their daily running exercise.
Purpose
This system helps people record their statistics, keep track of their running roads and create a community to connect people who share the same interest
- Admin is responsible for website management, including controlling users’ accounts, maintaining and solving any problems arising in the system
- Users can get access to the system by signing in an account and logging in After logging, users can use the features that have been built in the system such as: sharing their running results on a Social Network, keeping track of the running route on Google Map, participating in Groups and taking challenges in Groups as well.
Theories
Technologies
- Laravel Framework for building API.
- React Native for building Mobile Application and Admin Web Page.
- Cloudinary for storing static assets such as image and video.
- Amazon Web Services (AWS) for deployment.
Tools and environment development
- Microsoft Visual Studio Code for Coding
Structure of the thesis
INTRODUCTION – This chapter gives information about the context and purpose of the project as well as giving the scope of the problems which will be focused on the thesis
Chapter 1: THEORIES AND TECHNOLOGIES – This chapter introduces about all knowledge theories and technologies used in this project
Chapter 2: ANALYSIS AND DESIGN – This chapter covers the main features, software requirement specifications and database design of the project
Chapter 3: IMPLEMENTATION AND RESULT EVALUATION – This chapter shows an implementation of this project, including pictures and a brief explanation for each main function
CONCLUSION – The concluding section of the project simultaneously emphasizes the problem solved, as well as presenting issues still unresolved and provides recommendations and suggestions
REFERENCES – Presentation about detail of referenced information used in this thesis.
THEORIES AND TECHNOLOGY
PHP Programming Language
PHP, or Hypertext Preprocessor, is a programming language that allows for the user to have more control over the HTML that makes up a web page PHP allows for many more functions than HTML does, such as DIV tables, login functions, and graphical displays PHP was originally known as Personal Home Page, which describes the purpose of the language PHP works alongside HTML within the same document which allows for users to organize and display information within a web browser much easier than other programming languages PHP is easy to learn and allows for users to make a web page look and behave exactly as they want it to
PHP is preferred among users because it is easy to read and understand Many programming languages are complex and intimidating to new users while PHP is organized, clean, and fluent
PHP is also easy to edit as a user is able to quickly scan a PHP document for the code that they are looking for and change it to suit their needs Many other programming languages require that you change multiple functions within several documents in order to do the same thing that PHP can
PHP offers more control over web browsers than other programming languages do Many other programming languages require large scripts to do simple tasks while PHP can do the same thing with a few lines of code PHP allows users to design web pages to their exact specifications and it can even be used alongside other programming languages to perform a wider variety of tasks
PHP has better performance ratings than other programming languages do PHP is fast, efficient, and works great in almost any web browser as well as integrating into almost any server
Another reason that PHP is preferred among users is that it is entirely free While many other programming languages require that the user obtains expensive programs and pays for support files, PHP is open to anyone, anywhere, and any time
As PHP has become such a success on the open market, it is very difficult to come across a web server that does not support PHP development Users can also take satisfaction in that both individual PHP tags as well as entire PHP documents can be found on the Internet at no cost Thousands of these predefined PHP commands are available around every virtual corner and even those predefined documents can easily be edited to suit the user's unique needs.
Laravel Framework
Laravel is a free, open-source PHP web framework, created by Taylor Otwell and intended for the development of web applications following the model–view– controller (MVC) architectural pattern and based on Symfony Some of the features of Laravel are a modular packaging system with a dedicated dependency manager, different ways for accessing relational databases, utilities that aid in application deployment and maintenance, and its orientation toward syntactic sugar
Figure 1.2: Architecture of Laravel MVC
Every year there are numerous cyber attacks taking place In such situations, you need frameworks that safeguard yourweb apps
One of the most important benefits of selecting Laravel for your web app development is its capabilities to provide high-class security
Laravel itself is a secured framework which does not allow any malware activities or security threats to enter within the web app That means your web app development code is safe and secure
Another stronger reason to choose Laravel is its capabilities to provide an excellent performance of the web apps
The Laravel PHP framework was developed by Taylor Otwell with a purpose to help the website developers He wanted to allow developers to create certain web app functionalities much faster and even in a better way
And, one of the extremely challenging functionality for web developers is- developing authentication for web apps
One another benefit for you to choose Laravel is that it is open-source But, that is enough for you to choose it over other PHP frameworks
But, Laravel has a powerful community of developers and development companies that constantly and continuously provide support to make it more flexible and scalable
One of the key features of Laravel is its Blade Templating engine This engine allows the web developers to simply use the pre-defined templates to write certain codes
There is one more benefit of using the Laravel framework is Migrations of databases These migrations allow the developers to easily undo the changes made to the database
Using migrations, the developers can share the databases to other developers within the team easily and smoothly This was not possible earlier, but various Laravel developers came up with such facilities
While discussing what is Laravel, the definition from Wikipedia explicitly says that it follows a Model-view-controller architecture
And, due to this MVC architecture, Laravel is said to be the best framework to use for your web application development
MVC architecture provides built-in functionalities which the developers can make the best use of while developing your web app The MVC architecture also provides better documentation compared to other PHP frameworks
And, using MVC architecture improves the performance of your web apps And, that’s the reason why you should choose Laravel
Laravel comes up with Object Oriented libraries These libraries are pre-installed ones and one of them is Authentication library These libraries are full of excellent features that are easy-to-use and easy-to-implement for the developer
Another reason why you should consider choosing the Laravel framework for your web development is that it provides easy unit testing
The Laravel framework is evolving every day In the beginning, we saw the increasing trend of the Laravel PHP framework That trend is allowing the developers, companies and even the entire Laravel community to bring extraordinary functionalities that stays on the top of the technology needs
The Laravel framework comes up with libraries, tools, and even templates that make the lives of developers easy for web application development And, when the developers enjoy developing your web apps, they try to make it fully-functional and a powerful one.
React Native
React Native is an open-source mobile application framework created by Facebook It is used to develop applications for Android, iOS, Web and UWP by enabling developers to use React along with native platform capabilities
React Native build mobile apps using only Javascript It uses the same design as React, letting you compose a rich mobile UI from declarative components
Mobile app can be built with the help of Web technology which enables any web developer to easily enhance his/her skills and create React apps
React Native helps in building cross platform mobile apps
Saves time and cost to build mobile apps on multiple platforms
Building blocks which are used in iOS and Android apps are also used while creating React Native based apps which means that React Native is a mobile framework that compiles app components for native mobile applications in JavaScript
A React Native app ensures speed and agility for the mobile apps with responsiveness and a great native app based user experience.
MySQL
MySQL is an open-source relational database management system (RDBMS) Its name is a combination of "My", the name of co-founder Michael Widenius's daughter, and "SQL", the abbreviation for Structured Query Language
MySQL is free and open-source software under the terms of the GNU General Public License, and is also available under a variety of proprietary licenses MySQL was owned and sponsored by the Swedish company MySQL AB, which was bought by Sun Microsystems (now Oracle Corporation) In 2010, when Oracle acquired Sun, Widenius forked the open-source MySQL project to create MariaDB
MySQL is globally renowned for being the most secure and reliable database management system used in popular web applications like WordPress, Drupal, Joomla, Facebook and Twitter
MySQL offers unmatched scalability to facilitate the management of deeply embedded apps using a smaller footprint even in massive warehouses that stack terabytes of data On-demand flexibility is the star feature of MySQL
MySQL features a distinct storage-engine framework that facilitates system administrators to configure the MySQL database server for a flawless performance Whether it is an eCommerce website that receives a million queries every single day or a high-speed transactional processing system, MySQL is designed to meet even the most demanding applications while ensuring optimum speed, full-text indexes and unique memory caches for enhanced performance
MySQL tops the list of robust transactional database engines available on the market With features like complete atomic, consistent, isolated, durable transaction support, multi-version transaction support, and unrestricted row-level locking, it is the go-to solution for full data integrity
The Flexibility of Open Source:
All the fears and worries that arise in an open source solution can be brought to an end with My SQL’s round-the-clock support and enterprise indemnification The secure processing and trusted software of MySQL combine to provide effective transactions for large volume projects It makes maintenance, debugging and upgrades fast and easy while enhancing the end-user experience.
Cloudinary
Cloudinary is a service that manages an application’s image and video-related needs all in the cloud It offers a wide range of media management tools used by numerous web and mobile app developers worldwide
Cloudinary allows you to upload and store an unlimited amount of images securely and privately The storage includes historical revisions and automatic backup You can manipulate the images utilizing a range of choices such as watermarks, face detection, cropping, resizing, applying effects, and more
Figure 1.5: Cloudinary – Image Storage Service
Cloudinary streamlines a client’s media management pipeline This is with the help of the service’s wide array of easy-to-use editing tools Static and dynamic images are automatically sent to the cloud via its dependable CDN and storage engines
Cloudinary also lets application owners concentrate on how to grow their core business more rapidly This is due to how the service significantly cuts down on time and resources needed to handle issues commonly encountered by developers related to management, storage and distribution of media content
Cloudinary’s key features include support for private images, image transformation on upload, direct uploading from browser, remote upload from public URLs, version management, and secure upload API
Make use of image effects and filters such as fill light, vibrance, color channels, sharpen, tilt shift, improve, blur, gradient fade, pixelate and vignette, oil paint, hue, saturation, contrast, brightness, sepia, black & white, grayscale, and more Cloudinary supports a range of image formats including JPG, WebP, SVG, PSD, EPS, PDF, ICO, TIFF, BMP, GIF, and PNG
Cloudinary is built to accelerate time to market for teams that care about images and video – marketers, creative directors, media managers, and, web and app developers With Cloudinary’s cloud service, you can maximize the value of your digital assets, automate image and video workflow, and, deliver engaging visual experiences that are optimized for performance across multiple delivery channels and user preferences
Images and video need seemingly endless variants of size, crops, formats, and effects to meet creative design requirements, responsive needs, and optimized delivery to every screen
Cloudinary’s cloud platform enables custom content for personalized delivery, and the ability to dynamically deliver content that’s optimized for fast loading, increasing conversion rates and revenue.
Amazon Web Services (AWS)
In cloud computing, the capital investment in building and maintaining data centers is replaced by consuming IT resources as an elastic, utility-like service from a cloud “provider” (including storage, computing, networking, data processing and analytics, application development, machine learning, and even fully managed services)
Whereas in the past cloud computing was considered the province of startups and aggressively visionary enterprise users, today, it is part of the enterprise computing mainstream across every industry, for organizations of any type and size
What is Amazon Web Services (AWS) ?
Amazon Web Services (AWS) is a cloud service provider by Amazon Inc It offers cloud services in compute, storage, database, content delivery, networking, etc
Most of the offerings from AWS are Infrastructure as a Service (IaaS), but it also offers services in PaaS, such as Beanstalk and Lambda that are hugely popular among their users
Figure 1.7: Amazon Web Services (AWS)
AWS is designed to allow application providers, ISVs, and vendors to quickly and securely host your applications – whether an existing application or a new SaaS-based application You can use the AWS Management Console or well-documented web services APIs to access AWS’s application hosting platform
AWS enables you to select the operating system, programming language, web application platform, database, and other services you need With AWS, you receive a virtual environment that lets you load the software and services your application requires This eases the migration process for existing applications while preserving options for building new solutions
You pay only for the compute power, storage, and other resources you use, with no long-term contracts or up-front commitments For more information on comparing the costs of other hosting alternatives with AWS, see the AWS Economics Center.
With AWS, you take advantage of a scalable, reliable, and secure global computing infrastructure, the virtual backbone of Amazon.com’s multi-billion dollar online business that has been honed for over a decade
Using AWS tools, Auto Scaling, and Elastic Load Balancing, your application can scale up or down based on demand Backed by Amazon’s massive infrastructure, you have access to compute and storage resources when you need them
AWS utilizes an end-to-end approach to secure and harden our infrastructure, including physical, operational, and software measures For more information, see the AWS Security Center
With Elastic Beanstalk, you can quickly deploy and manage applications in the AWS Cloud without having to learn about the infrastructure that runs those applications
Figure 1.8: Elastic Beanstalk – a service of AWS
Elastic Beanstalk reduces management complexity without restricting choice or control You simply upload your application, and Elastic Beanstalk automatically handles the details of capacity provisioning, load balancing, scaling, and application health monitoring.
RESTful APIs
REST is an architecture style definition applied to networked applications It exists as a series of constraints applied to the implementation of network components, enabling uniform interface semantics, rather than application-specific implementations and syntax REST stands for Representational State Transfer Acronym purists often write it as ReST, because the E in REST does not actually stand for anything It is merely the second letter of the word representational This prevents controversy on how to pronounce it, like the one that has plagued GIF in recent years
As an architecture, REST defines how various components are linked via connectors, and how data is exchanged over interfaces REST is a series of constraints or requirements that, when followed, create an implementation of the REST architectural style
REST architecture does not encourage the creation of additional, situation-specific methods For example, a REST architecture would use the GET method to retrieve data in every circumstance The only change for different types of data would be different parameters Contrast this to creating a new method to get information about a user (getUser), and yet another method to get information about pricing (getPricing) and so on
The user interface on the client is separate and independent of the data storage on the server This allows for the client to be implemented and modified regardless of what is, or is not, happening on the server
No session data should be stored on the server between requests from the client In other words, every transaction must carry with it the ability to understand the request completely without the need to access any additional context or data stored on the server All session data should reside exclusively on the client
In every exchange, data must be marked either as cacheable or non-cacheable data Data that is cacheable may be stored and reused by the client No data is cached on the server because this would violate the stateless constraint
In order to achieve full interoperability, the interface is decoupled from the type of data provided that all interactions operate in the same manner Four sub-constraints ensure uniform interfaces: identification of resources, manipulation of resources via representations, self-descriptive messages, and Hypermedia as The Engine Of the Application State (HATEOAS)
Any information that can be named is a resource A resource may be any form of data A resource identifier is a way to refer to a specific resource at a particular point in time
When taken together, the REST architecture creates a highly-scalable, completely transparent and reusable framework where the clients are decoupled from the implantations of services on the servers It is platform-independent, for both the client and the server
On the modern web, REST is implemented using a common standard vocabulary between client and server known as Hypertext Transfer Protocol, or HTTP
Although HTTP and REST are not the same thing, HTTP in its original form is one implementation of REST
- Identification of resources in HTTP:
Each resource is identified by a uniform resource identifier (URI) Typically, this is implemented as a URL within a web browser A URI identifies a resource No prior knowledge of the system where the resource resides on the server is required Also, the URI (or URL) is able to specify the representation of a resource, without knowledge of that resource’s file structure
A pure REST implementation of HTTP requires using four core methods GET, POST, PUT, and DELETE Each method should be used explicitly and mapped to one of each of the core actions RETRIEVE DATA, CREATE RESOURCE, UPDATE RESOURCE, and DELETE RESOURCE
Used to retrieve a resource or information about the resource Although most implementations of HTTP will process parameters with a GET request to modify or create resources, such action would not be compliant with a RESTful implementation GET requests should be idempotent
A POST request creates new data on a server By definition, a POST request is NOT idempotent With each execution, a POST request would create more data
Similar to a POST request, a PUT request modifies existing data For example, changing the last name of an existing user PUT requests are non-intuitively idempotent While a PUT request does change data, it does so in the same way every time Thus, running a PUT request that changes a user’s last name would always produce the same result so long as all parameters are consistent
A DELETE request removes or deletes data, as the name suggests Delete requests are also idempotent in that running one repeatedly will always result in the same final state with the data in question no longer existing on the server
A RESTful API is thus one that uses ONLY REST architecture without the need for additional documentation or methods beyond those that fit the model Fielding provided the following points as clarification of what makes an API REST compliant
A truly RESTful API should not depend upon any one protocol and should be able to support any protocol that uses URI for identification Otherwise, identification is not separate from interaction
- Support of protocols as standardized
ANALYSIS AND DESIGN
Requirement analysis
For users, I want my system has enough features to support them for using easily They can view history of their running results, share that result on social network, join challenges in group and many different features
Administrator is person who is responsible for handling all user accounts on the system They also are the people that ensure the system works in the most stable way
This system has two main actors: Administrator (Admin) and User
Administrators have multiple responsibilities that revolve around the maintenance of websites The main duties of an administrator are wide-ranging, and vary widely from one organization to another Administrators are usually charged with installing, supporting, and maintaining servers or other computer systems, and planning for and responding to service outages and other problems
In my system, the responsibility of administrator is to make sure that website is up to date, secure and function smoothly for the user
There are the main features of administrator: manage activities, manage roles, manage permissions, manage accounts, manage groups, manage challenges and manage posts
These are five main tabs included in my application The user can choose different features from these tabs for their experience Those features include:
This is where the user can find all of the activities (running) from their friends or themselves The user can add new friends who have the same passion for running with them The user can comment or like on someone else’s post
The user can find a lot of detailed information on how far the user have come, recent activities and history about their running
This is main feature of app When the user click “Start” button, the system will count times, track their location on the google maps and update their running in real time such as duration, distance, calories, average pace, average speed and start day
This is an interesting feature included in the app There are many challenges in the group that the user can join This will motivate them in the running
This is where the user can manage their profile and adjust personal settings.
System analysis
- About back-end: I use Laravel Framework (framework of PHP language) for creating API services and rendering web pages (this website assists administrators to manage the whole system)
- About front-end: I apply React Native (a framework for writing real, natively rendering mobile applications for IOS and Android)
- About database: I use MySQL for storing data
- Besides, I use Cloudinary for storing image (Cloudinary is an end-to-end image management solution for the website and mobile apps) I deploy my code on Elastic Beanstalk (a service of AWS for managing applications)
1) Use case diagram for Administrator
Figure 2.2: Use case diagram for Administrator
2) Use case diagram for User
Figure 2.3: Use case diagram for User
2.2.3 Description for the main use case
Table 2.1: Use case description – Login
Brief description This use case for logging in
Pre-conditions User who has account to access to system
Post-conditions User logged in successfully
Fill the email and password Click “Login” button
System validates account that user filled and submit Show home screen if user’s account is correct
Table 2.2: Use case description – Logout
Brief description This use case for logging out
Pre-conditions User already logged into the system
Post-conditions User logged out successfully
1 - Admin: Click top- right button on the screen corner
- User: Select profile tab and click logout button in menu options
2 Direct to the login page
Table 2.3: Use case description – User - Register
Brief description This use case for registering user account
Pre-conditions A person who don’t have an account to access on the system
Post-conditions Server received the request from the user and add info of user into database
1 Choose “create a new account” from login screen
3 Fill all information including firstname, lastname, email, phone, password, confirm password After that, click
4 System validates the information that the user filled and submit If the information is valid, it will return success message
Table 2.4: Use case description – Administrator – Manage accounts
Brief description This use case for managing user account
Pre-conditions Administrator already logged into the system
Post-conditions Show all of users on the system
1 Select “Accounts” in right sidebar
3 Click “Update” button (pencil icon) on any user account
5 Change any fields in there
7 The system update user information successfully
8 Press “Delete” button (trash icon) on any user account to delete user account
9 The system delete user account successfully
Table 2.5: Use case description – Administrator – Manage roles
Brief description This use case for managing user role
Pre-conditions Administrator already logged into the system
Post-conditions Show a list of roles
1 Select “Roles” in right sidebar
3 Click “Update” button (pencil icon) on any role
4 Show a list of permissions including on the system
5 Select permission for role and press “Save”
6 The system update role successfully
7 Press “Delete” button (trash icon) on any role to delete role
8 The system delete role successfully
9 Click “Create Role” button on top-right corner and fill in the necessary blank field After that, click “Save” button to create role
10 The system create role successfully
Table 2.6: Use case description – Administrator – Manage permissions
Brief description This use case for managing permission of user’s role
Pre-conditions Administrator already logged into the system
Post-conditions Show a list of permissions
1 Select “Permissions” in right sidebar
3 Click “Update” button (pencil icon) on any permission
4 Show a list of routes including on the system
5 Select route for permission and press “Save”
6 The system update permission successfully
7 Press “Delete” button (trash icon) on any permission to delete permission
8 The system delete permission successfully
9 Click “Create Permisson” button on top-right corner and fill in the necessary blank field After that, click “Save” button to create permission
10 The system create permisson successfully
Table 2.7: Use case description – Administrator – Manage groups
Brief description This use case for managing group
Pre-conditions Administrator already logged into the system
Post-conditions Show a list of groups
1 Select “Groups” in right sidebar
3 Click “Update” button (pencil icon) on any group
5 Change any fields in there Press “Save” button
6 The system update group successfully
7 Press “Delete” button (trash icon) on any group to delete group
8 The system delete group successfully
9 Click “Create Group” button on top-right corner and fill in the necessary blank field After that, click “Save” button to create group
10 The system create group successfully
Table 2.8: Use case description – Administrator – Manage challenges
Brief description This use case for managing challenges
Pre-conditions Administrator already logged into the system
Post-conditions Show a list of challenges
1 Select “Challenges” in right sidebar
3 Click “Update” button (pencil icon) on any challenge
5 Change any fields in there
6 The system update challenge successfully
7 Press “Delete” button (trash icon) on any challenge to delete challenge
8 The system delete challenge successfully
9 Click “Create Challenge” button on top-right corner and fill in the necessary blank field After that, click “Save” button to create challenge
10 The system create challenge successfully
11 Click “Policy” button (info icon) on any challenge to view policy of challenge
13 Change any fields in there
14 The system update policy successfully
15 Click “Result” button (trophy icon) on any challenge to view a list of results including challenge
Table 2.9: Use case description – Administrator – Manage posts
Brief description This use case for managing post
Pre-conditions Administrator already logged into the system
Post-conditions Show a list of posts
1 Select “Posts” in right sidebar
3 Click “Comment” button (comment icon) on any post
4 Show comments of that post
5 Press “Delete” button (trash icon) on any post to delete post
6 The system delete post successfully
Table 2.10: Use case description – Administrator – Manage activities
Brief description This use case for managing activities
Pre-conditions Administrator already logged into the system
Post-conditions Show a list of activities
1 Select “Activities” in right sidebar
3 Press “Delete” button (trash icon) on any activity to delete activity
4 The system delete activity successfully
Table 2.11: Use case description – User – Track running road
Brief description This use case for tracking running road of user
Pre-conditions The user already logged into the system (app on mobile)
Post-conditions Display the route of user on google map
1 Select “Activity” tab on bottom navigation bar
2 The system redirect to activity screen
3 Click “Start” button and take action like movement on another position
4 The system draw lines on google map and show a list of params about user’ move
Table 2.12: Use case description – User – History
Brief description This use case for viewing the running result
Pre-conditions The user already logged into the system (app on mobile)
Post-conditions Display a list of results that user achieve
1 Select “Progress” tab on bottom navigation bar
3 Touch each result to show detail result
4 The system redirect to detail result screen
Table 2.13: Use case description – User – Add post
Brief description This use case for adding post
Pre-conditions The user already logged into the system (app on mobile)
Post-conditions Display a list of posts that user shared on social network
1 Select “Group” tab on bottom navigation bar
3 Click “Add Post” and fill in the content After that, click save icon
4 The system display that post
14) Share running result on social network
Table 2.14: Use case description – User – Social network
Brief description This use case for sharing running result
Pre-conditions The user already logged into the system (app on mobile)
Post-conditions Add post successfully
1 Select “Finish” button when ending running
After that, click “Yes” on confirm alert to share result
3 Scroll in current screen (Newsfeed screen) to view the post
4 The system display all of activities (running result)
Table 2.15: Use case description – User – Add friend
Brief description This use case for adding friend
Pre-conditions The user already logged into the system (app on mobile)
Post-conditions Add friend that user choose
1 Select “Newsfeed” tab on bottom navigation bar
3 Click “add-personal icon” on top-right corner of screen After that, click
“add icon” at any friend
4 The system add friend successfully
Table 2.16: Use case description – User – Join group
Brief description This use case for participating in group
Pre-conditions The user already logged into the system (app on mobile)
Post-conditions User join group successfully
1 Select “Group” tab on bottom navigation bar
4 The system add user into group successfully
After that, click any challenge to join
6 The system add user into that challenge successfully
Table 2.17: Use case description – User – Update profile
Brief description This use case for updating profile
Pre-conditions The user already logged into the system (app on mobile)
Post-conditions The system display updated profile
1 Select “Profile” tab on bottom navigation bar
3 Click “setting icon” on top-right corner of screen
After that, click “Edit Profile” and edit any field
4 The system update profile successfully
Activity diagram is basically a flowchart to represent the flow from one activity to another activity The activity can be described as an operation of the system Activity diagram is used as a flowchart that consists of activities performed by the system I must clearly understand about the elements used in activity diagram The main of an activity diagram is the activity itself After identifying the activities, I need to understand how they associated with constraints and conditions
Figure 2.4: Activity diagram for login function
Figure 2.5: Activity diagram for register function
This figure describes the activity of registration Before creating a new one, data must be validated and checked carefully
3) Track running road and share received result
Figure 2.6: Activity diagram for main function
This figure describes the activity of tracking running Firstly, the user has to allow GPS on mobile device and click “Start” button The system will check the movement of user and begin calculating, drawing route of user After finishing movement, the data will be saved in database and a share request alert will appear The user can share their result into the social network including the system
This figure describes the activity of joining group and challenge Firstly, the user need to select “group” tab then the system will display all of groups on the system The user can choose any group that they like The user can choose any challenge in group if they want
Figure 2.8: Activity diagram for updating profile function
This figure describes the activity of updating profile When administrator need to change some user’information, they can move to Accounts page then edit their necessary information
Figure 2.9: Activity diagram for deleting account function
This figure describes the activity of deleting a account That will show the dialog to confirm that action.
System design
Figure 2.10: Class diagram of system
The class diagram describes the responsibilities of a system, basis for components and deployment diagrams, analysis and design of the static view of an application
It describes the relationship among all entities of this system, the attributes and methods are clearly identified
Figure 2.11: Package diagram of system
This package diagram describes my system architecture My system uses API service to execute the actions of users, including saving data (store the running result), creating groups and adding challenges in each group, updating personal information, and creating social network which have many feature such as: write post, comment, and like a post
Table 2.18: Name of table: users
No Name Type Allow Null Key
14 email_verified_at timestamp TRUE
Table 2.19: Name of table: auth_assignments
No Name Type Allow Null Key
3 user_id char(36) FALSE FK
Table 2.20: Name of table: auth_items
No Name Type Allow Null Key
Table 2.21: Name of table: auth_item_childs
No Name Type Allow Null Key
Table 2.22: Name of table: friends
No Name Type Allow Null Key
2 user_one char(36) FALSE FK
3 user_two char(36) FALSE FK
5 action_user char(36) FALSE FK
Table 2.23: Name of table: groups
No Name Type Allow Null Key
Table 2.24: Name of table: group_user
No Name Type Allow Null Key
2 group_id char(36) FALSE FK
3 user_id char(36) FALSE FK
Table 2.25: Name of table: challenges
No Name Type Allow Null Key
Table 2.26: Name of table: challenge_user
No Name Type Allow Null Key
2 user_id char(36) FALSE FK
3 challenge_id char(36) FALSE FK
Table 2.27: Name of table: posts
No Name Type Allow Null Key
4 activity_id char(36) TRUE FK
5 group_id char(36) TRUE FK
6 user_id char(36) FALSE FK
Table 2.28: Name of table: comments
No Name Type Allow Null Key
3 post_id char(36) FALSE FK
4 user_id char(36) FALSE FK
Table 2.29: Name of table: likes
No Name Type Allow Null Key
2 user_id char(36) FALSE FK
3 post_id char(36) FALSE FK
Table 2.30: Name of table: policies
No Name Type Allow Null Key
6 challenge_id char(36) FALSE FK
Table 2.31: Name of table: device_infos
No Name Type Allow Null Key
2 user_id char(36) FALSE FK
Table 2.32: Name of table: results
No Name Type Allow Null Key
2 user_id char(36) FALSE FK
3 challenge_id char(36) FALSE FK
Table 2.33: Name of table: activities
No Name Type Allow Null Key
10 user_id char(36) FALSE FK
Conclusion
This chapter presented the requirements specification that the system could meet the user’s demands Follow the requirements, the use case diagrams are used to gather the requirements of a system including internal and external influences These requirements are mostly design requirements The activity diagrams, draw the activity flow of a system, show the steps and action sequences as well as the interactions between user and user, user and system Thereby, the overview and the activity streams of the system are fully presented
Besides, this chapter also describes the system structure, as well as the action sequences for each function Furthermore, it shows the database to help the reader have clearer views of the system By that, I can consider and evaluate the complexity of this system.
IMPLEMENTATION AND DEMO
Development environment
The web service is a RESTful API It is built by Laravel Framework (A framework of PHP programing language), basing on representational state transfer (REST) technology I used MySQL to store data
I used React Native to develop my applicationon Android platform
I used below tools: Visual Studio Code, MySQL in XAMPP, Postman and Git
- Managing Image and Deployment Environment
I used Cloudinary for storing image and Amazon Web Services (AWS) for deployment
I use Github to safely store my code.
Demo main feature
To access system, the user has to login with their account
After you login, bottom navigation bar will display all features in the application
If you don’t have any account You need to register an account with some information such as firstname, lastname, email, phone and password
When you click “Start” button in the screen, the system will count times, track your location on google map, calculate the distance and some of params
You can click “Pause” button to stop or “Resume” button to continue After ending of your running, you have to click “Finish” button After that, a confirm dialog appears
If you want to share your running result, you need to click “Yes” The system redirects to “Add Post” screen and then you input the content of the post After submitting this post, the system redirects to Newsfeed screen and you can see a list of posts of you or your friend
When you click “No” option, the system redirects to “Progress” screen and you
When you click “Group” option in the bottom navigation bar, the screen will display all groups including the system You can select any group that you want
You can select any challenge in group that you want This feature is really interesting and help you have more motivation in running
- You can write, comment, like a post in group or outside (newsfeed screen)
- You can find and add friend by clicking “add-icon” on the top-right screen corner
To take this action, you have to click “setting-icon” on the top-right screen corner in “Profile” tab After that, you select “Edit Profile” option and change any field that you want to change and save
Figure 3.11: Update profile screen 3.2.7 Admin Web
To access system, the administrator has to login with their account
This is the interface of the website You can choose any option in sidebar menu to manage corresponding function
- And the different function, you can experience it through my website: http://trackingrunning-env-1.yyffrbv2j2.us-east-2.elasticbeanstalk.com/
(email: pathoftruth1097@gmail.com, password: 123456)
Evaluation
Basically, this application has helped users keep track their running and record the history of their running result This will help them review the process their running to improve the exercise
Create a community where people have the opportunity to meet together and have more motivation in running
Besides the advantages mentioned above, my system still has some disadvantages:
- The performance of my app is sometimes slow
- I have not yet finish completely all function
- In addition, the system doesn’t support for iOS, it is only developed on Android platform
Achievement
After building this system, I could understand how to make an application android platform with some frameworks and libraries and the way to interact between application, helper service and server I also learn how to build a RESTful API with Laravel framework Besides, I gain more knowledge to help me in my future career
I also improved our skills a lot, including research skills, technical skills, presentation skills, English and many other soft skills
About the project, I have already followed the plan which was created in the first week of graduation project duration and implemented almost functions in that plan Besides, I also try to make the applications the most flexible which purpose is to enhance user experience.
Future work
With some disadvantage, I have already mentioned in evaluation part, the future work of this project is as follow:
- Develop the new feature such as recommend the best route which people frequently run
- Apply machine learning for statistical running result and give a list of advice for user’s diet
- Develop the system on a variety of platforms such as iOS, Web to enhance the user experience.