jonathanporta/git-swift-todo-tutorial

A tutorial on writing your first 'Todo' app in Swift

Swift TODO App Tutorial

Code version: xCode 6.0, Swift 1.0

README version: xCode 6.0, Swift 1.0

=======================

• Foreword
• Installing This App
• Feedback
• Getting Start: The Basics
  • Create your project
  • Add a textfield to your storyboard
• Gluing Our Views Together: The storyboard
  • Position text field using Auto Layout
  • Create a table view controller
  • Add a segue to navigate forward
  • Configure the Add button
  • Add a navigation controller to the view controller
• Finally Programming: Swift
  • Create a custom view controller that is a subclass of UIViewController
  • Create a custom table view controller that is a subclass of UITableViewController
  • Connecting cancel and done buttons to exit segue
  • Create a Data Class
  • Fill in your TodoItem class
  • Give your table view controller an array of TodoItems
  • Mark item as complete
  • Lastly - add new items

Foreword

1. This tutorial is based on Apple's xCode 5 Objective C TODO tutorial, which is an excellent place to look for auxilliary context (and screenshots!)
2. Check out the Todo folder for the completed code

Installing This App

1. cd /your/preferred/xcode/location
2. git clone https://github.com/jadekler/git-swift-todo-tutorial.git
3. Open xcode
4. File > Open > /your/preferred/xcode/location/git-swift-todo-tutorial/Todo/Todo.xcodeproj

Feedback

Please, provide feedback on anything you feel is lacking or could be better worded! Pull requests, github issues, or direct emails to [email protected] are all welcome!

Getting Start: The Basics

Create your project

1. Open xCode
2. Under iOS > Application, select 'Single View Application' and click Next
3. Enter as follows
4. Checkpoint: Hit the run button on the top left of xCode - you should see a blank white screen

Add a textfield to your storyboard

1. In the Project Navigator on the far left of xCode, select Main.storyboard
2. Find the Object Library, and find or search for 'Text Field'
3. 
4. Drag one to the furthest left guider on your View, about 1/3 from the top of your view
5. Increase the width of the text field by dragging the right side of the text view to the rightmost guider
6. Next, let's change the placeholder text
7. In the Utilities Slider on the right side of Xcode, find the Attributes Inspector (4th icon on the top bar from the left)
8. Enter 'new todo' next to 'Placeholder'
9. Your storyboard should look like this:
10. Checkpoint: Hit the run button on the top left of xCode - you should see a blank white screen with a text field that says 'New Todo' (don't worry if the text field goes off of the screen)

Gluing Our Views Together: The storyboard

Position text field using Auto Layout

When you run your code, you can change orientation by going to 'Hardware' and clicking one of the rotate buttons. Note that when you do so, your text field doesn't adjust its size automatically. Let's address that.

1. In the Project Navigator on the far left of xCode, select Main.storyboard
2. Click on the Text Field in the View
3. Set top space on the top
4. Control+Click and Drag from the Text Field to the area right above, which should highlight blue and say 'View'
5. Release your drag
6. Select 'Top Space to Top Layout Guide' from the small black menu
7. Set leading space on the left
8. Control+Click and Drag from the Text Field to the area left of the view, which should highlight blue and say 'View'
9. Release your drag
10. Select 'Leading Space to Container Margin' from the small black menu
11. Set Trailing space on the right
12. Control+Click and Drag from the Text Field to the area right of the view, which should highlight blue and say 'View'
13. Release your drag
14. Select 'Trailing Space to Container Margin' from the small black menu
15. Checkpoint: Hit the run button on the top left of xCode
16. You should see the Text Field with equal spacing on each side and spacing from the top bar
17. On the top bar of your computer click 'Hardware' and click 'Rotate Left' to enter landscape view
18. The left, right, and top margin should match the portrait view

Create a table view controller

1. In the Project Navigator on the far left of xCode, select Main.storyboard
2. In the Object Library, search for table view controller
3. Drag a table view controller and drop it into the canvas. If you're lacking in space, right click on the canvas to zoom out <make sure you're zoomed in to 100%>

1. Click the arrow on the left of your view controller 1. Drag and drop it on your table view controller to set the table view controller as the initial scene 1. Your canvas should now look like this:  1. Checkpoint: Hit the run button on the top left of xCode - you should see an empty table view

Add a segue to navigate forward

1. Select your Table View Controller
2. With the view controller selected, choose Editor > Embed In > Navigation Controller
3. In the canvas, select the newly created title area on your table view (or in the outline view select Navigation Item under Table View Controller)
4. 
5. In the Attributes inspector, type 'My To-Do List' in the Title field
6. Add a '+' button
7. Drag a Bar Button Item object from the Object Library to the far right of the navigation bar in the table view controller
8. Select the newly created bar button item
9. In the Attributes Inspector, change the Identifier from Custom to Add
10. Checkpoint: Hit the run button on the top left of xCode - you should see your newly created + button, but it won't do anything just yet

Configure the Add button

1. Control+Click and Drag from the Add button to your original View Controller
2. Release the drag and select 'present modally'
3. Checkpoint: Hit the run button on the top left of xCode - Click the + button and the New Todo view should appear

Add a navigation controller to the view controller

1. Select your view controller

1. With the view controller selected, choose Editor > Embed In > Navigation Controller 1. In the canvas, select the newly created title area on your table view (or in the outline view select Navigation Item under Table View Controller) 1. In the Attributes inspector, type 'Add Todo' in the Title field 1. Add a 'Done' button right to the title 1. Drag a Bar Button Item object from the Object Library to the far right of the navigation bar in the table view controller 1. Select the newly created bar button item 1. In the Attributes inspector, find the Identifier option in the Bar Button Item section. Choose 'Done' from the Identifier pop-up menu 1. Add a 'Cancel' button to the left of the title 1. Drag a Bar Button Item object from the Object Library to the far right of the navigation bar in the table view controller 1. Select the newly created bar button item 1. In the Attributes inspector, find the Identifier option in the Bar Button Item section. Choose 'Cancel' from the Identifier pop-up menu 1.  1. Checkpoint: Hit the run button on the top left of xCode - you should see your newly created 'Done' and 'Cancel' buttons when you navigate to 'Add a todo', but they won't do anything just yet

Finally Programming: Swift

Create a custom view controller that is a subclass of UIViewController

1. Choose File > New > File (or press Command-N)
2. Fill in as follows
3. Click Next, and Create
4. The Targets section will default to having your app selected and the tests for your app unselected. That’s perfect, so leave that as is
5. Click Create

Now that you’ve created a custom view controller subclass, you need to tell your storyboard to use your custom class instead of the generic view controller.

1. In the project navigator, select Main.storyboard
2. Select your View Controller (in the Outline View, this is 'View Controller' under the 'Add a todo Scene')
3. In the Identity inspector, open the pop-up menu next to the Class option
4. Choose AddToDoItemViewController

Create a custom table view controller that is a subclass of UITableViewController

1. Choose File > New > File (or press Command-N)
2. On the left of the dialog that appears, select the Cocoa Touch Class under iOS
3. 
4. Click Next
5. Click Next, and Create
6. The Targets section will default to having your app selected and the tests for your app unselected. That’s perfect, so leave that as is
7. In the project navigator, select Main.storyboard
8. Select your Table View Controller (in the Outline View, this is 'Table View Controller' under the 'Todo list Scene')
9. In the Identity inspector, open the pop-up menu next to the Class option
10. Choose ToDoListTableViewController

Connecting cancel and done buttons to exit segue

1. Navigate to your TodoListTableTableViewController.swift
2. Add the following function (this registers the action and allows it to be used in storyboard):

@IBAction func unwindToList(segue: UIStoryboardSegue) {
    println("Unwinding")
}

1. Navigate to your storyboard
2. On the canvas, Control-drag from the 'Cancel' button to the Exit item right above (the right item of the three squares above )
3. Choose unwindToList: from the shortcut menu
4. Do the same for the 'Done' button
5. Checkpoint: Hit the run button on the top left of xCode - when you navigate over to Add a todo, your cancel and done buttons should pop you back over to Todo list (your table view)

Create a Data Class

1. Choose File > New > File
2. Select Cocoa Touch Class and click Next
3. Fill in as follows
4. Click Next, and Create Your class should look like this

import UIKit

class ToDoItem: NSObject {
   
}

Fill in your TodoItem class

1. Give it a name and completed variable and initialize them like so:

import UIKit

class TodoItem: NSObject {
  let itemName: String
  var completed: Bool
  
  init(itemName: String, completed: Bool = false) {
      self.itemName = itemName
      self.completed = completed
  }
}

Give your table view controller an array of TodoItems

1. Navigate to TodoTableListViewController.swift
2. Give it an array of TodoItems:

var todoItems: [TodoItem] = []

1. Give it a loadInitialData function that populates your array with some basic things:

func loadInitialData() {
    todoItems = [
        TodoItem(itemName: "Go to the dentist"),
        TodoItem(itemName: "Fetch groceries"),
        TodoItem(itemName: "Sleep")
    ]
}

1. Load your initial data from the viewDidLoad function:

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

1. Make the number of sections in your table one:

override func numberOfSectionsInTableView(tableView: UITableView!) -> Int {
    return 1
}

1. Next, let's create a function that returns the number of rows per section. Since we only have one section, we'll return a count of the todoItems. Add the following function:

override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return todoItems.count
}

<this function looks retarded because: https://developer.apple.com/library/prerelease/ios/documentation/Swift/Conceptual/Swift_Programming_Language/Functions.html#//apple_ref/doc/uid/TP40014097-CH10-XID_202 (go to External Parameter Names>

1. The last function we need will generate UITableViewCells for each row at a specific index

  override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let tempCell = tableView.dequeueReusableCellWithIdentifier("ListPrototypeCell") as UITableViewCell
    let todoItem = todoItems[indexPath.row]
    
    // Downcast from UILabel? to UILabel
    let cell = tempCell.textLabel as UILabel!
    cell.text = todoItem.itemName
    
    return tempCell
}

1. In the project navigator select Main.storyboard
2. In the Todo list TableView select the Prototype Table View Cell
3. In the Utilities slider on the right, go to the Attributes Inspector (4th icon from the left)
4. For the Identifier change to ListPrototypeCell
5. See:
6. Checkpoint - Run the app, the Table View should populate with the initial data "Go to the dentist", "Fetch groceries", "Sleep"

Mark item as complete

1. In the project navigator select TodoListTableViewController.swift
2. Add a tableView on select function to mark todoItems as complete

override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
  tableView.deselectRowAtIndexPath(indexPath, animated: false)
  
  let tappedItem = todoItems[indexPath.row] as TodoItem
  tappedItem.completed = !tappedItem.completed
  
  tableView.reloadRowsAtIndexPaths([indexPath], withRowAnimation: UITableViewRowAnimation.None)
}

1. Modify the tableView cell display function to have a checkmark if the item is finished

if (todoItem.completed) {
    tempCell.accessoryType = UITableViewCellAccessoryType.Checkmark;
} else {
    tempCell.accessoryType = UITableViewCellAccessoryType.None;
}

1. The final version:

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
  let tempCell = tableView.dequeueReusableCellWithIdentifier("ListPrototypeCell") as UITableViewCell
  let todoItem = todoItems[indexPath.row]
  
  // Downcast from UILabel? to UILabel
  let cell = tempCell.textLabel as UILabel!
  cell.text = todoItem.itemName
  
  if (todoItem.completed) {
      tempCell.accessoryType = UITableViewCellAccessoryType.Checkmark;
  } else {
      tempCell.accessoryType = UITableViewCellAccessoryType.None;
  }
  
  return tempCell
}

1. Checkpoint - run the app, click an item and a check mark should appear next to it, click it again to make the checkmark disappear

Lastly - add new items

1. In the project navigator select Main.storyboard
2. In the outline view, select the AddTodoItemViewController object
3. Click the Assistant button in the upper right of the window’s toolbar to open the assistant editor (the suit-looking icon)
4. The editor on the right should appear with AddTodoItemViewController.swift displayed. If it isn’t displayed, click the filename in the editor on the right and choose AddTodoItemViewController.swift
5. Select the text field in your storyboard
6. 
7. Control-drag from the text field on your canvas to the code display in the editor on the right, somewhere inside the class, and type textField for name
8. Click Connect. This should add the following to your code: @IBOutlet weak var textField: UITextField!
9. Do the same for the Done button, calling it 'doneButton'. In your code it should look like @IBOutlet weak var doneButton: UIBarButtonItem!
10. Next, let's give our controller a todoItem that it will store our 'add' data into: var todoItem: TodoItem = TodoItem(itemName: "")
11. Of course we also need to be able to take data from the user input and assign it to this variable:

override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject!) {
  if (countElements(self.textField.text) > 0) {
      self.todoItem = TodoItem(itemName: self.textField.text)
  }
}  

1. Now, we need to head back over to TodoListTableTableViewController.swift and add an unwind that takes the data that AddTodoItemViewController.swift is holding and pops into the array of todoItems:

@IBAction func unwindAndAddToList(segue: UIStoryboardSegue) {
  let source = segue.sourceViewController as AddTodoItemViewController
  let todoItem:TodoItem = source.todoItem
      
  if todoItem.itemName != "" {
      self.todoItems.append(todoItem)
      self.tableView.reloadData()
  }
}

1. Lastly, select Main.storyboard in the project navigator
2. On the canvas, Control-drag from the 'Done' button to the Exit item and select unwindAndAddToList
3. Checkpoint: Run your app - you should be able to add items!

That's it!

As mentioned before, we love feedback - please open issues about anything you feel is missing, or email the authors directly about questions or feedback at [email protected].