Homework 3: Component & Interface Design

Transcription

1 1 Leah Staniorski 11/1/14 Homework 3: Component & Interface Design Introduction: Flexible Fitness will be a mobile application that allows users to create a personal profile. Through this personal profile, the users will be able to plan an exercise routine for each day of the week that they hope to exercise. The application will give the user a maximum efficiency workout plan for each day of the week based on their personal information, fitness goals, daily environmental limitations, and time limitations. Flexible Fitness will be an ios mobile application which I will put together using PhoneGap and PhoneGap Build. PhoneGap is a mobile development framework that enables software programmers to build applications for mobile devices using JavaScript, HTML5, and CSS3, instead of relying on platform-specific APIs. PhoneGap Build is a cloud-based service built on top of the PhoneGap framework. It allows you to easily build those same mobile apps in the cloud. Components: The various components of my mobile application include (1) a user interface requiring personal data input, (2) an exercise finder, (3) a local database, and (4) a day optimizer algorithm. (1) The user interface will be described more on page 5. This user interface will be coded using HTML5, CSS, and Javascript. I will use the following javascript libraries: jquerymobile.js, backbone.js, and underscore.js. jquery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices. The API Documentation can be found here: Backbone.js is a JavaScript library with a RESTful JSON interface and is based on the model view presenter (MVP) application design paradigm. The API can be found here: Backbone is known for being lightweight, as its only dependency is on one JavaScript library, Underscore.js. The API can be found here: When the user first uses Flexible Fitness, they will be required to register and create an account. The mobile application will save the users account and information in the local database. All information the user is able to access will be through their account. There are no actions available other than to log in or register for a user that is not signed in. When the user is registered and signed in, they will be able to plan their weekly exercise routines. See page 5 for more detail. (2) The exercise finder will use the environmental limitations that the user provides through the user interface for a given day to query the local database and create a

2 2 condensed list of possible exercises with these limitations. This will be stored as an array of exercises, where I will need to create an exercise class which holds the details of each exercise to be used in the algorithm described in component (4). This will be specified in the java script files in my repository. An example of code will be as follows: (3) The local database will be a web SQL database. Web SQL is a web page API for storing data in databases that can be queried using a variant of SQL. The API is supported by Safari which is the web browser supported on ios. The API for the Web SQL Database can be found at the following link: The database will have two separate purposes. The first purpose will be to save user information. It will save all the personal information for a user s profile and save the user s input. The second purpose will be to hold the information about each exercise. This will include exercise name, calories burned for a specific weight over a certain period of time, muscle group targeted, primary muscle targeted, and environmental requirements. For example, there will be a group of abdominal exercises, some which may target the rectus abdominis and some may target the obliques. See pseudo-code below.

3 (4) The day optimizer algorithm will use the data selected from the query mentioned in component (2). The first step will be to create an even smaller list of exercises using a knapsack based algorithm that compares each exercise and a comparative attribute. This comparative attribute will be different based on the user goals. If the user goal is to lose weight, the attribute will be calories burned per minute. If the user goal is weight gain it will be also be calories burned per minute but instead aim for the lowest (so pseudo-code below will be slightly different) total. If the user goal is to maintain weight, the code will instead choose an equal number of exercises for each muscle group within 2*T (slightly different than code below). See pseudo-code below. 3

4 Once this refined list has been created, the program goes through the following algorithm. It was created based on the knapsack algorithm. This algorithm will use the relatively small amount of exercise options available at this point to find the best combination of exercises based on the amount of time they require. See pseudo-code below. 4

5 5 User Interface: Below you can see images of the major screens visible during first load. The arrows represent the action taken by the user and point to the next visible screen.

6 6 If the user checks off gym membership, the next screen will be as follows: As the user enters their personal profile information with the above screens, the mobile application will save this data in the database to keep track of the information. The user will then be able to choose between View Current Week Exercise Plan or Plan Next Week Exercise Plan. If they choose the former, they will be shown the current calendar week where they can click on each day and see the plan created for that day. If they have not planned for that week or that day, the system will alert the user they have not planned that week or day. If they choose the ladder, they will be shown the next calendar week, where they can click on each day they plan to exercise. The following three pictures show an example of a current week, an example of a future week that has not been planned at all, and an example of a future week that has begun to be planned (in corresponding order).

7 When they are planning for a week, for each day they click, they will then be able to choose their environmental limitations and the amount of time they have to exercise. From here, the system will have all the input required for the user for that day. The system will now use component (2), (3), and (4) to create the following type of exercise plan. For example, if the user hopes to lose weight and also incorporate strength training, the user will try to burn the maximum amount of calories each day and also strengthen a portion of the body each day. It will aim to strengthen each part of the body within the week. For example, if a user says that they have 30 minutes in a home office and do not have any exercise equipment, the system might give them a plan like the following: 7