Designing the model for this app requires us to first detail the functional aspects of the 7 Minute Workout app, and then derive a model that satisfies those requirements. Based on the problem statement defined earlier, some of the obvious requirements are as follows:
- Being able to start the workout.
- Providing a visual clue about the current exercise and its progress. This includes the following:
- Providing a visual depiction of the current exercise
- Providing step-by-step instructions on how to do a specific exercise
- The time left for the current exercise
- Notifying the user when the workout ends.
Some other valuable features that we will add to this app are as follows:
- The ability to pause the current workout.
- Providing information about the next exercise to follow.
- Providing audio clues so that the user can perform the workout without constantly looking at the screen. This includes:
- A timer click sound
- Details about the next exercise
- Signaling that the exercise is about to start
- Showing related videos for the exercise in progress and the ability to play them.
As we can see, the central themes for this app are workout and exercise. Here, a workout is a set of exercises performed in a specific order for a particular duration. So, let's go ahead and define the model for our workout and exercise.
Based on the requirements just mentioned, we will need the following details about an exercise:
- The name. This should be unique.
- The title. This is shown to the user.
- The description of the exercise.
- Instructions on how to perform the exercise.
- Images for the exercise.
- The name of the audio clip for the exercise.
- Related videos.
With TypeScript, we can define the classes for our model.
The Exercise class looks as follows:
export class Exercise {
constructor(
public name: string,
public title: string,
public description: string,
public image: string,
public nameSound?: string,
public procedure?: string,
public videos?: Array<string>) { }
} Note
TypeScript tips
Declaring constructor parameters with public or private is a shorthand for creating and initializing class members at one go. The ? suffix after nameSound, procedure, and videos implies that these are optional parameters.
For the workout, we need to track the following properties:
- The name. This should be unique.
- The title. This is shown to the user.
- The exercises that are part of the workout.
- The duration for each exercise.
- The rest duration between two exercises.
The model class to track workout progress (WorkoutPlan) looks as follows:
export class WorkoutPlan {
constructor(
public name: string,
public title: string,
public restBetweenExercise: number,
public exercises: ExercisePlan[],
public description?: string) { }
totalWorkoutDuration(): number { ... }
} The totalWorkoutDuration function returns the total duration of the workout in seconds.
WorkoutPlan has a reference to another class in the preceding definition, ExercisePlan. It tracks the exercise and the duration of the exercise in a workout, which is quite apparent once we look at the definition of ExercisePlan:
export class ExercisePlan {
constructor(
public exercise: Exercise,
public duration: number) { }
} Let me save you some typing and tell you where to get the model classes, but before that, we need to decide where to add them. We are ready for our first feature.