Haiku App Part 1: Project Setup

Login to Access Code

preview of the final haiku app

In this tutorial series, we will be creating a Haiku application. The goal of the app is to help the user by counting syllables as they write so that the poem conforms to traditional 5-7-5 syllable haikus. It will then let them view, share, edit and delete haikus from the device. We aim to teach a few core iOS principles with this tutorial series:

  • Core Data and class models
  • UIKit animations for visual effects
  • Class abstraction and shared state
  • UserDefaults verses persisted data
  • Custom navigation components
  • Defining and reusing constants
  • App themes for easy UI changes
  • Programmatic, responsive design

Getting Started

You can either create a new project within Xcode or download our starter template. The starter template is great because it defines a common folder structure and naming convention we use between all of our tutorials, but the things we will teach you in this tutorial series will work regardless of organizational structure. More info on that in our better way to start iOS projects blog post.

If you choose not to clone our starter project, then you can simply create a new, single-page application in Xcode, and make sure to enable CoreData and Unit Tests.

Adding in our CocoaPods

CocoaPods are incredibly useful, and if you’re not already familiar with them, you should definitely get acquainted. What Gems and NPM are to ruby and javascript programmers, CocoaPods is to us iOS developers. They give us additional functionality in a nice, self-contained package that can just be dropped in to most projects.

For this project, we will use SugarRecord and Flourish UI. SugarRecord is a wrapper around CoreData and other services such as iCloud and Realm. It makes data management much easier and more concise plus allows greater flexibility in porting your data. Flourish UI is a collection of stylish visual components like toggle switches, popups and buttons.

You could alternatively use Swift Package Manager or Carthage, but we are going to use CocoaPods. We add the following content to our Podfile in the project root and then pod install in terminal. Don’t forget, if you use CocoaPods, you will need to open Haiku.xcworkspace instead. Close out xcode and open the workspace after you have installed the pods.

# Uncomment the next line to define a global platform for your project
# platform :ios, '10.0'

target 'Haiku' do
  # Comment the next line if you're not using Swift and don't want to use dynamic frameworks
  use_frameworks!

  # Pods for Haiku
  pod 'SugarRecord/CoreData+iCloud', git: 'https://github.com/carambalabs/SugarRecord.git', tag: '3.0.0'
  pod 'FlourishUI'
end

View Hierarchy

Let’s start by creating the two view controller classes that we will use in this app: WriteController and EntriesController as well as a custom navigation controller, which we will call NavController. You should also just delete the default ViewController that comes with Xcode’s new project. All of these should live within the Controllers folder:

// WriteController.swift
import UIKit

class WriteController: UIViewController
{

  override func viewDidLoad()
  {
    super.viewDidLoad()
  }

}
// EntriesController.swift
import UIKit

class EntriesController: UIViewController
{

  override func viewDidLoad()
  {
    super.viewDidLoad()
  }

}
// NavController.swift
import UIKit

class NavController: UINavigationController
{
  override func viewDidLoad()
  {
    super.viewDidLoad()
  }
}

We are going to stay out of interface builder as much as possible in this tutorial, but frankly, some things are just way easier to do and maintain in IB. One of which is setting up some of our view hierarchy such as which views belong to a navigation controller. Let’s go to IB and embed our default View Controller in a Navigation Controller:

Embed View Controller in Navigation Controller

Now we want to set our Navigation Controller and default View Controller to extend from our custom classes NavController and WriteController respectively. You can do this in your Main.storyboard by selecting the navigation controller, and in the right sidebar (aka Utilities Menu) selecting the Identity Inspector (third tab), entering your custom class:

Custom Navigation Controller Class

Custom View Controller Class

The reason we do this in interface builder is mostly out of convenience. By default Xcode sets up your project to initialize with the Main.storyboard and render your default view. We could go and re-architect that so that we don’t use the storyboard at all, but that is a bit of overhead that frankly does not really matter for us to get up and running quickly or for you to learn how to be an iOS developer.

Last step is what we like to call a “sanity check” in the dev world. Rather than assume that everything is working, we run the app and make sure it builds and runs as we expect without any errors. You should see a blank navigation controller with the default WriteController loading. If you are getting errors, read through this post again carefully and make sure you followed all steps carefully. Common noob mistakes include:

Missing CocoaPods

It’s easy to forgot to pod install after you have defined your Podfile or to have typos in your pod definitions. Make sure you follow the CocoaPods setup carefully! Another common mistake is opening the wrong project file after installing CocoaPods. After you do an install, you will want to open Haiku.xcworkspace not Haiku.xcodeproj from that point on.

Undefined classes

We all make typos from time to time. In this case, your main point of failure is when setting the class that the Navigation Controller and View Controller will us. Check the screenshots above carefully, and make sure that you are inheriting from WriteController and NavController within Interface Builder. It should auto-complete as you start typing, which is a sign that things are defined properly.

Wrapping up Part 1

If you are up and running with this default view, then you are ready to move on to the next step. If you are stuck or are having a hard time understanding any aspect to this part of the tutorial, make sure to join our swift slack community and we can help you out!

Continue on to Part 2: Creating a Custom Navigation Controller