“Oblique Strategies” and Tampa iOS Meetup’s February 2017 session

by Joey deVilla on March 2, 2017

This past Tuesday, I held another session of Tampa iOS Meetup, which I’ve changed to be considerably more hands-on and aimed squarely at beginning developers. This session covered building “Magic 8-Ball”- or “executive decision maker”-style apps — the kind where the user presses a button and the app presents a randomly-selected response.

For the benefit of the people who attended, for those who couldn’t make it, and for the curious, I’ll walk you through the process of coding an app called Oblique Strategies, a “press a button and get a random response” app based on Brian Eno (as in the avant-garde musician and producer) and Peter Schmidt’s (the visual artist) creativity tool.

What is Oblique Strategies?

Eno and Schmidt created Oblique Strategies in late 1974 as a tool to help artists, writers, musicians, and other creative types overcome creative blocks. The original version was a deck of cards, each with a constraint, question, or suggestion that encouraged what was then called “lateral thinking” and now called “thinking outside the box”. If you were feeling creatively blocked, you’d shuffle the deck and then draw one or more cards, each of which would say something such as:

  • Abandon one stricture.
  • Emphasize repetitions.
  • Is there something missing?
  • What would your closest friend do?
  • Use an old idea.

If you’d like to try out Oblique Strategies, there are a number of web versions: herehere, here, and here, for starters.

In this exercise, we’ll remake Oblique Strategies as an app. Here’s what the end result will look like:

The apps is pretty simple: the user taps the Get a strategy button, and a randomly-selected strategy appears below it.

Download the starter project

Rather than have you type in all the strategies and monkey around with the user interface layout, I’ve already done those things and incorporated them into a starter project that you can download and use for this coding exercise.

Click here to download the starter project.

Once you’ve downloaded the project, unzip it, which will give you a folder containing the entire project. Open that folder, then open Oblique Strategies.xcodeproj in Xcode.

Connect the view objects to the underlying view controller


The Oblique Strategies app has two user interface objects that we need to connect to the underlying code:

  1. A button, which the user presses to get a new random strategy. The button causes something to happen (that is, it executes code) in response to an event (which in this case, is the user pressing it). This requires an action connection.
  2. A label, which the app uses to display the strategy. In order to be able to change the text contents of the label, the underlying code needs to be able to refer to it using a variable. This requires an outlet connection.

Let’s start by creating the outlet connection for the label:

Do the following:

  • We need to see the main storyboard. Do this by selecting the Main.storyboard file in the project navigator.
  • The storyboard should appear. Make sure that the label that we’ll use to display the randomly-selected strategy (its default text is “Your strategy will appear here.”) is visible.
  • Turn on the assistant editor by clicking on the assistant editor button (see the screenshot above).
  • The center of your Xcode window should now be split in two, with one part still showing the main storyboard, but another part showing the underlying view controller code.
  • Control-drag from the label to the underlying code, inside the ViewController class, just below the line that reads class ViewController: UIViewController, then drop.

  • A pop-up will appear. In it:
    • Make sure that the selection in the Connection drop-down list is set to Outlet.
    • You”ll need to give the connection a name in the Name text field. Set it to strategyLabel.
    • To make the connection, click the Connect button.

  • Xcode will add a new instance variable to the class named strategyLabel. We’ll use this variable to refer to the label so that we can change its text.

Now it’s time to connect the button.

Do the following:

  • Control-drag from the button to the underlying code, inside the ViewController class, after all the other functions in the class, then drop.

A pop-up will appear. In it:

  • Make sure that the selection in the Connection drop-down list is set to Action.
  • You”ll need to give the connection a name in the Name text field. Set it to getStrategyButtonPressed.
  • You’ll need to specify the event that the connection should respond to. Select Touch Up Inside in the Event drop-down menu, which specifies that the event we want to respond to is one where the user presses down on and releases his/her finger while it’s still within the bounds of the button.
  • To make the connection, click the Connect button.

Xcode will add a new empty method to the class named getStrategyButtonPressed. We’ll use this method to carry out actions in response to the button being pressed.

We can test both the button and label connections with a single line of code. Change the contents of the getStrategyButtonPressed method so that it looks like this:

Run the app and press the Get a strategy button. The result should look like this:

Let’s code!

Near the top of the class, you should see a declaration that looks like this:

This declaration creates an array of strings named strategies. The array will act as the “deck”, from which a “card” will be randomly selected.

Let’s try displaying the last strategy in the array when the user presses the button. Change getStrategyButtonPressed() to the following:

If you try to run the app right now, you’ll see something like this:

We’ve just encountered what’s called an “off-by-one error”. If there are x items in an array, the index of the last item isn’t x, but x-1, since array indexes start at 0.

The error is easy to fix:

Now try running the app. It should compile this time, and if you press the Get a strategy button, the app responds with the last strategy in the array:

Of course, the app would be rather uninteresting if it displayed the same result all the time. We’ll use a random number generator’s output as a way to pick a strategy from the strategies array.

Swift comes with a number of built-in random number generator functions, but the preferred general-purpose random number generator is arc4random_uniform(). It takes a positive integer n as its sole argument, and returns a pseudo-random positive integer in the range starting at 0 and ending at n – 1.

arc4random_uniform() is a little unwieldy because the argument you’re supposed to pass it is a special kind of integer: UInt32. You’ll need to convert any value you pass to it to that type. The value that arc4random_uniform() returns is also of type UInt32, which you’ll typically have to convert back into plain old Int. If you look at Swift code that uses arc4random_uniform(), you’ll often see something like this:

Rather than deal with all that clunkiness, let’s write a function that wraps arc4random_uniform() and frees us from having to do all those type conversions from Int to UInt32 and back again:

Now update getStrategyButtonPressed() so that it makes use of our new randomNumber() function:

We can even pare it down to a single line of code and make it even more concise:

We now have a properly functioning Oblique Strategies app. Run it, press the Get a strategy button, and see what strategies come up!

Add a “fade in” animation

Let’s give our app a little polish by having the strategy “fade in”. Whenever the user presses the Get a strategy button, we will:

  • Set the strategy label’s alpha (opacity) value to 0, making it completely transparent.
  • Randomly select a strategy and use it to set the text of the label.
  • Animate the label so that its alpha value is brought up to 1 over a period of 3 seconds, making it completely opaque.

Do this by updating getStrategyButtonPressed() so that it looks like this:

Run the app. You should see the strategy fade in when you press the Get a strategy button.

All the code

If you’ve made it to this point, the code in ViewController.swift should look like this:

In addition to the starter project, I’ve also posted a finished project, which you can download:

Click here to download the starter project.

You can also find this project on my GitHub.

Suggested features and further reading

Come learn iOS development at Tampa iOS Meetup!

If you’re in the Tampa area and you’ve always wanted to learn iOS development but needed some help getting started, Tampa iOS Meetup is for you! It’s a regular gathering aimed at people new to iOS development or software development in general where we cover all sorts of programming topics as we build applications together in a casual, fun, hands-on setting. Find out more at the Tampa iOS Meetup page.

 

Previous post:

Next post: