Crunch Time Featuring NSTimers and Model-View-Controller! Made with Xcode 8.0 beta 3 By Bliss Chapman © 2016 CocoaNuts
Welcome •
CocoaNuts is a community of love-of-the-game iOS developers who meet weekly to discuss Apple platform technologies and the app development process.
•
If you are a beginner, please do not feel overwhelmed! You are in the right place and we are here to help you ❤
•
As you make your way through the demo, don’t worry about understanding every little detail. Instead, try to familiarize yourself with the larger patterns in the development process and the Xcode environment. Most importantly, ask lots of questions and have fun!
Crunch Time •
As we kick-off a new semester, procrastination and Netflix bingewatching are inevitable.
•
Today, you will build a simple stop watch app to make your procrastination more efficient.
Demo Orange = Instructions
Blue = Information
Launch Xcode. Xcode is an integrated development environment (IDE) which contains all the tools you need to build an iOS, watchOS, macOS, or tvOS app.
NOTE: If you do not have Xcode installed, you can download it from the Mac App Store.
Create a new project.
Select the template for this project.
Select the options shown above and then create your project.
Welcome to Xcode!
Toolbar
Navigator
Editor
Utilities
1
Select the Main.storyboard file.
Storyboards are used to graphically lay out the user’s path through your iOS or macOS app.
Select the 3rd tab at the bottom of the Utilities area. Explore! This object library contains representations of many UIKit objects you might recognize from apps you use every day.
Drag a label onto the canvas.
2
1
Drag a button onto the canvas.
2
1
Look at all the shapes and sizes iOS devices can take! After adding in software features like layout direction to support left-to-right AND right-to-left languages, split screen mode, dynamic type, and localization, there are over 300+ combinations of environmental traits that your iOS app needs to handle. As thoughtful developers, we should design our user interface to adapt to this internal and external variability. We do this with a powerful system called Auto Layout. Auto Layout dynamically calculates the size and position of all the views in your view hierarchy, based on constraints placed on those views.
1
2
While holding down Shift, select both the label and the button you dragged onto the canvas. With both elements selected, click the Stack button to embed the elements in a vertical stack view with the label above the button.
Select the newly created stack view then click the align button to add two new constraints that inform the stack view to always be in the horizontal and vertical center of the view regardless of the device's size or orientation.
Stack views provide a streamlined way to lay out a collection of views in either a column or a row. Stack views let you leverage the power of Auto Layout, creating user interfaces that can dynamically adapt to the device’s orientation, screen size, and changes in the available space.
1
2
Lets customize the properties of our button and label. First, select the label and open the attributes inspector. Change the text to: “00:00:00” and adjust the text style to “Title 1.”
Then, select the button and open the attributes inspector. Change the text to: “Start” and adjust the text style to “Headline.”
Selecting a standard text style like “Headline” gives our app support for dynamic type right out of the box! Now, users who have set the system preferences to use larger fonts can transition to our user interface painlessly.
Code! •
Now we are finally ready to write some code! Our entire user interface has been set up however it doesn't DO anything yet. Try it out by clicking the run button in the upper left of the toolbar
•
Before we close our storyboard, we need some way to access the properties of the button and label we dragged out in our code and to detect when the button was tapped. We do this by creating outlets and actions.
While holding down option, select the ViewController.swift file in the project navigator to open Assistant Editor mode.
While holding down control, click and drag from the label in the storyboard to the space below the class declaration and above the viewDidLoad method. Name the outlet "timerDisplayLabel" and hit connect.
Outlets enable code to send messages to a user interface object. For example, programmatically telling a label to display a text string.
Repeat this process to make a button outlet named "startButton".
1
Finally, our code will need some way to detect when the button was tapped. Control drag again from the button to the bottom of the class declaration (under the view controller lifecycle methods). Create a new Action and name it "startTapped"
2
3
Actions enable a control to to send messages to your code. For example when a button is clicked, an action message is sent telling a block of code to execute.
In the model view controller (MVC) design paradigm, the ViewController class we are editing is the controller. The controller’s role is to interpret the model and display it’s state in the view which is what we created in the storyboard. If we implement the stopwatch functionality with good engineering style, we should create a model that acts as a stopwatch. This stopwatch object should support all the features our users expect (starting, stopping, and elapsed time) and our ViewController can remain lean and mean, simply leveraging the stopwatch object to implement the stopwatch behavior. This is good object-oriented programming because all the data and behavior associated with the stopwatch is encapsulated in one place making for readable and reusable code.
If this is confusing to you, don't worry! This is tricky to understand and will come with time and practice. For now, ask lots of questions, don’t worry, and DON’T forget to have fun!
1
First, create a new instance of our (to be defined) Stopwatch.
2
Next, we determine what should happen when the start button is tapped.
If the clock is NOT running: • schedule a timer to continuously update our label with the formatted elapsed time • change the title of the button to "Stop" • start the clock. If the clock is already running: • change the button title back to "Start" • stop the stopwatch.
Notice how we have now established all the functionality our Stopwatch object will need. We wrote our ViewController methods as if it already exists and now it's clear what behavior and data this object will need to contain.
1 Add a new file by clicking the + button in the bottom left of the navigator.
3
2
Now we can fill in our stopwatch struct. If you are unfamiliar with the idea of an object, you can think of it as simply a collection of data and behavior that models a real world object like a stopwatch! Every Stopwatch object will have a startTime, an elapsedTime, and an isRunning property.
Notice how some of these properties are computed properties. Computed properties don’t actually store a value but instead provide a way to retrieve/compute their value from other properties.
Our stopwatch also needs to know how to start and stop. Implementing this behavior couldn't be simpler!
ADVANCED: By default, the properties of a value type like a struct cannot be modified from within its own instance methods. You can opt in to mutating behavior for a particular method with the mutating keyword.
Yay, now build and run to see your new procrastination helper in action!
Congratulations! •
Great job making it through those walls of text ☺!
•
Thank you so much for coming. Remember, if you have any questions please, please ask!
•
There are lots of past demos on the CocoaNuts website for you to work through and many other fantastic resources we recommend to further you on your iOS development journey.
•
Best of luck and I hope to see you next week!
