If you haven't read my previous tutorial I would suggest starting with my last post as we will be building off of that.

Step 1

Add the three additional buttons

we will add the start, pause and clear buttons inside a new HStack below the HStack that holds our current buttons.

Step 2

Add additional State variable and import

First we need to import Combine. Combine declares publishers to allow values to change over time. For further information about Combine you can check out the Documentation.

We will add a State variable for our timer.

@State private var timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()

For the timer we are setting it to Timer.publish, we will set every to 1, this will update the time interval on which to publish events every 1 second. We will set on to .main, which will tell the timer to run on the main thread. We will set in to .common, which will tell the timer it should run on the common run loop.

You must explicitly connect to the Timer publisher to begin publishing events you can use .connect() but we will use .autoconnect() to automatically connect when a subscriber attaches.

Step 3

Connect timer to count

The first thing to think about is, what do we want to happen on our timer. Every second it runs we will decrement our count. To do this we will add onReceive and pass it our timer. Since the return type will be unused we can say _ in. we will write an if statement so that when count == 0 we are going to stop the counter. This will achieve two things, when we start the application the timer wont start counting down but it will also stop when it hits 0 so we wont be going into negative numbers. You will notice we used a ternary operator which achieves the same as an if else. We are saying set count to = count - 1 or 0 depending on if count is > 0.

  .onReceive(timer){ _ in
                    if count == 0 {
                        timer.upstream.connect().cancel()
                    }
                   count = count > 0 ? count - 1 : 0
                }

Step 4

Add timer to the play button

When the application is started, because of the logic we just added, the timer will be stopped. We will add the following line of code to our play button to start the timer.

timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()

Step 5

Add pause functionality

To add the pause functionality we just need to stop the timer. We have done this before when we wrote conditional logic for when the timer reaches 0. We just need to add the following line to our pause button. Additionally when we increment or decrement we also want to pause or stop the timer so we will add it to those buttons as well.

 timer.upstream.connect().cancel()

Step 6

Add clear functionality

In this last step we will add the functionality for our Clear button.

we will add the following two lines of code. First we will stop the timer and then set count back to 0.

timer.upstream.connect().cancel()
count = 0

You did it

Once again you completed the tutorial. I hope you enjoyed this brief look at swiftUI. Start up your application and make it your own.

Thank you for reading.

Step 1

Install Xcode and create a new project

For this example we will be creating a stand alone Watch App opposed to a iOS App with Watch App

To finish setting up your project you will need add a Product Name, Team and Organization Identifier. The product name would be the name of your app. If this is your first time using Xcode you will have to sign in with an Apple ID to populate the Team. Organization Identifier usually starts with com.(your organization name).

It might take a few minutes for Xcode to set up your project. Once complete you will be left with a basic Hello World App.

Step 2

Erase the Hello World code and set up our main VStack with an HStack inside it.

Inside the body view, we will add a VStack (vertical stack) which will hold our text of the count and a HStack (horizontal stack) which holds our buttons. In my example I added some alignment and spacing but feel free to play around and make this your own.

Step 3

Add the text for number

I added Text with value of "0" to the VStack. I also added some font styling to achieve the size, font weight and alignment I was looking for.

Step 4

Add our buttons

We want to add buttons that will increment and decrement our counter. Here I added a print statements to each button which will print to the console based on which button is pressed. If you build the app by pressing the play button in the top left you will notice the print statements however the number isn't changing. Why? We haven't told the button to control that variable. On to the next step.

Step 5

In our final step we will be adding functionality to our buttons using a state variable

The reason we must use a state variable is because SwiftUI will reload any component that depends on that state variable as it changes. After adding the State variable there are a couple lines that we will add and one we will change as depicted below. We change our Text to use count, now our view will update as count changes. we increment count by setting count = count +1 when the positive button is clicked and decrement by setting count = count -1 on the minus button.

You did it!

Now you can build your app and test it out. This is your app so feel free to play around with colours, fonts and features. This is the first of a two part tutorial so keep an eye for my next post.

Cheers.

What is the difference?

First, I think it is important to discuss what web and native development are. Web development like the name refers to anything that is viewed on a browser...kind of. web development from a high level can be a web page or progressive web app (PWA). native development for the most part is something developed for one specific platform such as an app in the Apple App Store or Google Play Store.

In addition to web and native development there is another layer of hybrid development which is the idea of building once to deploy multiple places. Popular solutions include React Native and Flutter.

Web Development

Web development for the most part consists of HTML, CSS and JavaScript. There are tons of libraries to choose from for design alone there are many including Tailwind CSS, BootStrap and Materialize. When we talk about functionality there are plenty libraries such as React, Vue and Angular.

Pros

Documentation

Documentation and resources are endless. With the libraries and frameworks mentioned above the development process can be shorted and when roadblocks come, they can be dealt with quickly.

Reachability

One of the biggest pros to web development is the audience you can reach with a web app. Anyone with a device and internet connection can interact with your content. With this being said there is a lot of content out there so standing out might be difficult.

Quick to Market

Another enticing reason a developer or team might pick a web App is ease and speed of delivery. When you take into consideration the multiple hosting options and how quickly you can register a domain the actual launching process of the application is smooth and quick. You can have it running in minutes and make updates just as fast.

Cost

Web apps on average cost less to develop and deploy. You also do not have to worry about creating and paying for a developer account with Apple or Google. With web apps you will have to acquire a domain and pay hosting.

Cons

Limited Access to Hardware

There are limitations to accessing features of your device such as file system, camera and GPS.

User Time

On average users spend less time on websites than apps. Having an app on the user's phone might encourage them to visit more (seeing the logo on their phone everyday) vs relying on the user to search your website. If a web app is what you choose but the user will visit often consider a PWA (progressive web app) so that the user is able to download it for easier access.

Security

Security is up to the development team with both web and native apps however native applications offer additional security.

Native Development

Native development is when you develop an app for a specific operating system. For iOS typically Swift and for android its typically Kotlin although there are other languages to write native applications in.

Pros

Performance

Depending on the functionality of your app you will see an increased performance

Access to Hardware

Implementing features that utilize file system, GPS camera etc. that come with native development offer more full device access than solutions web development offers.

Offline use

There are options to implement offline capabilities. Maybe the apps content doesn't rely heavily on changing data, or the user can download information for later.

Cons

Reachability

To allow users on different platforms to use your app every part of the process is doubled. You have to consider learning multiple programming languages, developing two apps, UX guidelines for each App Store and the developer accounts and costs along with that.

Submission Process

Submitting your application to the App Store or Google Play Store can be costly and timely. Depending on their guidelines you might have to make multiple revisions to your code and resubmit

Updates

Not only do updates take longer to implement because you are going through the respective app stores, but you also rely heavily on the user updating your application. There are many reasons a user might not update an app; they might not know there is an update, they might not have auto updates on, they might not have room on their device to update or their device could not be eligible for the update. This can be an issue when an update is addressing bug fixes or glitches.

Conclusion

In conclusion, there are use cases for both web applications and native applications. Every website does not need to be converted to a native app and every App does not need a web version. When choosing how you want to deliver your project it is important to take into consideration what you will be delivering and the limitations you will face with each option. This will help you make the best decision for your project.

Thank you for reading

Writing code and explaining how it works as a form of teaching others forces you to think about the bigger picture regarding your code and how it might work with other use cases. This might also help you find a better solution to solve the problem or a refactoring that offers better code reuse and readability.

Blogging in general will increase your written communication skills and talking about topics you are interested in might lead to additional research regarding new topics and industry trends.

Additionally writing about how you work through roadblocks shows readers how you think about code and the process you use to solve problems. This gives readers a better understanding of who you are as a developer.