Watch Project – Fitness Companion Design

In the previous six chapters, we have created various applications for our Apple devices. These chapters taught us how to set up projects for the iPhone, iPad, and Mac. They also demonstrated the design differences between small and large displays. In this chapter, we will be designing a fitness companion application for the Apple Watch. Due to the small screen size of the watch, we will need to simplify the design. We will assess the requirements and discuss the design specifications before starting the coding process.

Firstly, we will assess the requirements needed for designing a fitness companion application for the Apple Watch. We will then move on to discussing the design specifications, which will give us a better understanding of what is required and how it will all fit together. This will be followed by the coding process, where we will build the fitness app over the course of these two chapters. This project will cover the...

Technical requirements

This chapter requires you to download Xcode version 14 or above from Apple’s App Store.

To install it, just search for Xcode in the App Store, then select and download the latest version. Open Xcode and follow any additional installation instructions. Once Xcode has opened and launched, you’re ready to go.

Version 14 of Xcode has the following features/requirements:

• Includes SDKs for iOS 16, iPadOS 16, macOS 12.3, tvOS 16, and watchOS 9.
• Supports on-device debugging in iOS 11 or later, tvOS 11 or later, and watchOS 4 or later.
• Requires a Mac running macOS Monterey 12.5 or later.

You can download the sample code from the following GitHub link: https://github.com/PacktPublishing/Elevate-SwiftUI-Skills-by-Building-Projects

In the next section, we will provide clarity on the specifications of our application’s design and look at mockups of what the app will look like.

Understanding the Design Specifications

This section outlines the design specifications for our fitness companion application. Our goal is to implement features that will enhance the user experience. To achieve this, we have put ourselves in the user’s shoes to determine how they will use the app. We have then broken down the process into individual steps to identify the necessary features. By doing this, we can ensure that our fitness app will be user-friendly and efficient.

In this section, we will look at the design specifications of our fitness companion application and describe the features we are going to implement. The best method for figuring out the features required is to put yourself in the user’s shoes to determine how they will use the app and break it down into individual steps.

Our fitness application has been designed with several features to assist users in achieving their fitness goals. We are confident that our app will provide users with a seamless...

Acceptance criteria for our app

In this section, we will outline the mandatory requirements for our application. These requirements are crucial for the end product and must be measurable. We need to ensure that these requirements are met to deliver a successful application. Let’s get started:

• Current time – this will show the actual time as per your time zone.
• Active/workout time – this will be a live timer that shows the current workout time.
• BPM (beats per minute) – this label will be linked to a variable to show the user’s heartbeats per minute.
• Total calories burned – this will display the calories burned and will be linked to the calories variable.
• Activity – this will be used to display the current activity; for example, running, swimming, yoga, and so on.
• Views that can be swiped – this will allow us to have two separate screens on a single page and expand it as our needs increase.
• Starting...

Wireframe for our app

Wireframing is an essential tool for designing layouts. It provides an overview of how the layout will look. The wireframe for the current activity in the fitness application is depicted in the following figure:

Figure 8.1 – Wireframe for our watch app

The following figure shows the wireframe for the view that allows you to start, stop, and pause activities:

Figure 8.2 – Activity button wireframe

We have now seen the wireframes for our fitness application. These wireframes will serve as the initial foundation for building the UI of our application.

In the next section, we will construct the interface for our application and verify that it matches the design we created in the wireframe. While we will follow the same process, there may be minor discrepancies. Our primary focus will be on the initial view in this chapter, with the second view being addressed in the subsequent chapter.

...

Building the Fitness App

We will now build the UI for the sidebar. First, let’s create our project. Follow these steps:

1. Open Xcode and select Create a new Xcode Project:

Figure 8.3 – Create a new Xcode project

2. Now we will choose the template for our application. As we are creating an Apple Watch application, we will select WatchOS from the top, then select App, and click Next:

Figure 8.4 – Xcode project template selection

3. We will now choose the options for our project. Here, there is only one crucial thing to select/set. Make sure Watch-only App is selected:

Figure 8.5 – Xcode project options

4. Once you press Next, you can choose where to create your project, as seen in the following figure:

Figure 8.6 – Xcode project save directory

5. Once you have found the location where you would like to...

Implementing the Current Activity UI

In this section, we will use the newly set up project to start the coding of our fitness watch application. We will implement the current activity UI, which will display the information for the current activity.

As we have created a fresh project, the coding standards aren’t in line with my personal preference. So, firstly, I will change the standards. Feel free to take a few moments to do the same.

If you run the newly created application as it is, you will notice that we already have the current time in the top right, as shown in the following screenshot:

Figure 8.13 – Default time

It’s great for us, as the time is already in place by default. There may be scenarios where you want to remove the time, but as we do not, we can proceed. Now, we will move on to implementing the text items for the current activity. Implementing the remaining text items is actually very simple. Remove all the...

Summary

In this chapter, we covered the design of our fitness companion application. We looked at wireframes and broke each element down into SwiftUI components. We then implemented the SwiftUI components to match the design from the wireframes for the current activity screen. We also looked at the requirements and design specifications for building this application, then simplified it to the core features our app will provide.

Next, we designed our fitness companion app by creating wireframes and breaking down each element into SwiftUI components. We implemented these components to match the wireframe design for the current activity screen. We also reviewed the requirements and design specifications for building the app and simplified it to focus on the core features it will provide. There are always features that are nice to have but are inevitably cut from the first release, or what many call the MVP (minimum viable product). This is effectively what we did. It is crucial to...