• 20 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 3/6/20

Take advantage of the Playground

Log in or subscribe for free to enjoy all this course has to offer!

Now that we have a problem to solve at hand, let's open our new favorite tool - Xcode! This time we will use Playground.

Creating a new Playground project

To create a new Playground, open the Xcode app. You'll be presented with the familiar Xcode welcome screen:

Xcode welcome screen

As you may guess, we have to chose the 1st option - "Get started with a playground".

At this time, like when creating a new application project, Xcode offers a selection of templates:

Xcode Playground template selection

Here's a quick overview of options (the naming is pretty explicit though):

  • Blank - suitable for general coding experiments 

  • Game - offers some convenience options for experiments specific to game development 

  • Map - offers some convenience options for experiments specific to working with maps

  • Single view - suitable for general experiments with visual components.

In a scope of this course we will be working with a plain code, so select "Blank". For the next step you'll need to name your playground "SmartBean" and choose a location to save it on your Mac:

Xcode new playground - name & location

And now we've got a new playground screen:

New Playground editor window

Looking good. What is that exactly?

In simple terms, Playground is a simplified code editor with a benefit of real time processing.

We can observe this functionality right from the first sight. On the left panel we see this line of code:

var str = "Hello, playground"

And on the right panel we see its interpretation:

Playground code output

The Playground has read the variable str and output its contents - very handy indeed! 

Did you say variable? :euh:

Don't panic! We'll clarify this term in the next chapter. :ninja:

Playground overview

Let's quickly review the playground window. It has 3 main panels:

  • Editor - a code editor area

  • Output - real type interpretation of each line of the code

  • Console - explicit output by the code (in addition to Play ground interpreted output (Output panel)

Playground main panels
playground main panels 

In addition to playground-specific panels, the main window also provides access to application panels: Navigator and Utilities. Enable these by clicking on the right panel and left panel toggle icons located at the right top corner of the main window:

 

Here's what it looks like:

Playground panels with Navigator & Utilities
Playground panels with Navigator & Utilities

SmartBean challenge #1

Our favorite coffeeshop is becoming very popular, now Jenny is thinking about expanding and buying another coffee making station. Her preferred option costs $1,499. She's currently making an extra $10 in profit a day which she can allocate for the new purchase.

First things first! In the current situation, let's calculate how long Jenny needs to continue saving before she can afford a new coffee station.

To perform these kind of calculations, we need to be able to use basic mathematical operators.

Basic operators

Let's start with the 4 main mathematical operators (you know them from math in school, right? :) )

+

Addition

-

Subtraction

*

Multiplication

/

Division

To use them, we simply type them in playground like we would on a piece of paper (as seen on the righthand side below):

2 + 2                                  // 4
12 / 4                                 // 3
99 * 56                                // 5544
1 + 2 + 3 + 4 - 5                      // 5

You can see the interpretation of your code line by line on the Output panel of playground.

Like in math, the operators respect the priority of operations, so multiplication and division have priority over addition and subtraction. For example:

3 + 4 * 2                              // 3 + 8 = 11
8 / 2 + 2                              // 4 + 2 = 6

And if we want to alter the order of calculations, we use parentheses () :

(3 + 4) * 2                            // 7 * 2 = 14
8 / (2 + 2)                            // 8 / 4 = 2

Practice using the basic operators by implementing the calculations to solve the following problems:

  • If you take 45 minutes per meal, how many years will you spend eating meals in a lifetime (decide how many meals per day you would have and your life expectancy)?

  • Imagine one year you earn $50K/year and the next year you earn $60K/year. Your expenses are $30K and $35K for each year respectively. On average, how much money would be left over, after expenses, each year? 

  • It takes you 1 hour to get to the office on foot and 25 minutes by bicycle. You usually go to the office on foot. How much time would you save if you chose to commute by bike every day for a week instead (assuming you are going to the office 5 days a week)? 

Here is an example (below). However, try to perform your own calculations before looking at it:

// Take your time, don't scroll until you complete your attempt!



























// Meals
45 * 3 * 365 * 100 / (60.0 * 24 * 365)  // 9,4 years consuming food in a lifetime

// Savings
(50 - 30 + 60 - 35) / 2.0 // $22.5/year

// Commute time
(60 * 2 * 5 - 25 * 2 * 5) / 60.0 // 5.8 hours/week

Obviously the results depend on the numbers you decided to use. The goal was simply for you to play around a little with the operators.

Let's calculate Jenny's savings

Jenny needs to save $1,499. She can currently put aside $10 per day. How long will it take her to accumulate the needed amount?

 1499 / 10 // 149

It will take Jenny 149 days to save for the new coffee making station! Congratulations, you've completed the first line of your program!

Let's Recap

  • The Playground is a coding tool that interprets your code in real time line by line.

  • To perform 4 basic mathematical operations we use following operators:  + - * /.  Like in math, parentheses  () are used to manipulate the order of calculations in a sequence.

Example of certificate of achievement
Example of certificate of achievement