Making the App for the Real World

Topics Covered in This iOS Development Tutorial:

MVC Design Patterns, Setting up a Model

Exercise Overview

Up to this point, we've been building our app with static, hard-coded data. This approach allowed us to focus on iOS fundamentals without getting bogged down in data management complexities. While this pedagogical approach has served us well, it's time to address a critical reality: production iOS applications never rely on static data embedded in their code.

Consider the maintenance nightmare of hard-coded data: every time you want to add a new band or update existing information, you'd need to manually modify arrays, recompile the entire application, and resubmit to Apple's App Store—a process that can take days for review. This approach is not only inefficient but completely untenable for any serious application.

In the real world, applications leverage cloud-based data architectures. Band information would be stored in remote databases and delivered to your app via REST APIs—web service endpoints that return structured data (typically JSON) when called with specific URLs. This is the foundation of virtually every app you use daily, from social media platforms to banking applications. Modern iOS development embraces this distributed architecture, enabling real-time updates, scalability, and maintainable codebases.

Getting Started

Before we dive into implementing proper data architecture, let's ensure your development environment is properly configured.

1. If you completed the previous exercise you can skip the following sidebar. We recommend you finish the previous exercises (1B–3C) before starting this one.

   If you completed the previous exercise, Jive Factory.xcodeproj should still be open. If you closed it, re-open it (from yourname-iOS Dev Level 2 Class > Jive Factory).

   Prerequisites Checklist

   0/3

   Complete exercises 1B through 3C

   Foundation knowledge required for MVC implementation

   Ensure Jive Factory.xcodeproj is accessible

   Project file should be in yourname-iOS Dev Level 2 Class folder

   Verify previous static data implementation works

   Confirm table view displays band information correctly

MVC: Model, View, Controller

Now we'll implement one of the most fundamental architectural patterns in software development: Model-View-Controller (MVC). This isn't just an academic concept—MVC is the cornerstone of iOS development, baked into UIKit and the entire iOS SDK. Apple designed their frameworks around this pattern because it solves critical problems that plague poorly architected applications.

You've already been working with two-thirds of this pattern without realizing it. Every time you've created a View Controller and designed interface elements, you've been implementing the View and Controller components. What's been missing is the Model layer—a dedicated space for data management that's completely separate from your user interface logic.

The MVC pattern enforces clean separation of concerns: Models handle data and business logic, Views manage presentation and user interaction, and Controllers coordinate between the two. This separation isn't just about organization—it enables code reusability, easier testing, collaborative development, and maintainable applications that can evolve over time. When your data structure needs to change, you modify the Model without touching the interface. When you redesign the UI, the data layer remains untouched. This modularity becomes invaluable as applications grow in complexity and when working with development teams.

Setting up a Model

Let's refactor our application to implement proper MVC architecture by creating a dedicated Model class and extracting our data logic from the View Controller.

1. In the Project navigator, select AppDelegate.swift. (We want the file to be added after this file, that's why we had you select it.)
2. Go to File > New > File or hit Cmd–N.
3. Under iOS and Source, double–click on the Cocoa Touch Class template.
4. For Class type: BandsModel
5. From the Subclass of menu, choose NSObject (or start typing it and let Xcode autocomplete it for you).
6. Make sure Language is set to Swift.
7. Click Next.
8. Make sure you are in the Jive Factory folder, and click Create.
9. In the Project navigator, notice BandsModel.swift has been added. This new class will serve as our dedicated data layer.
10. The first step in our refactoring is moving the bandDetails array into our Model class. Open the BandsModel.swift class, if it isn't already.

11. Add the following bold code into the BandsModel class to create our data property:

    class BandsModel: NSObject {
       var bandDetails = [BandDetail]()
    }

12. Next, we'll create a method responsible for populating our model with data. In a production app, this method would make network calls to REST APIs, but for now we'll simulate this with our static data. Add the fetch method below the bandDetails property:

    class BandsModel: NSObject {
       var bandDetails = [BandDetail]()
       func fetch() {
    
       }
    }

13. Now we'll migrate the data initialization logic from our View Controller to this Model class. Go to BandsTableViewController.swift.
14. Select all the data setup code in the viewDidLoad method.
15. Cut (Cmd–X) the code.
16. Go back to BandsModel.swift.

17. Paste (Cmd–V) the code into the fetch method. Your data layer should now look like this:

    func fetch() {
    
       let nicoleAtkinsBandDetail = BandDetail()
       nicoleAtkinsBandDetail.bandName = "Nicole Atkins"
       nicoleAtkinsBandDetail.bandType = "Rock"
       nicoleAtkinsBandDetail.bandDescription = "Nicole will knock your socks off."
       nicoleAtkinsBandDetail.fullImageName = "full-nicole-atkins"

    Code Omitted To Save Space

    bandDetails.append(nicoleAtkinsBandDetail)
       bandDetails.append(ambulanceLtdDetails)
       bandDetails.append(sleepiesDetails)
       bandDetails.append(blackAngelsDetails)
    }

18. Save your changes with Cmd–S.

19. Now let's update our View Controller to work with our new Model architecture. This demonstrates the Controller's role in MVC—coordinating between the Model and View layers. Go to BandsTableViewController.swift.

20. Find the four legacy property declarations at the top of the file and delete them entirely—they're no longer needed with our Model approach:

    let bandTitles = ["Nicole Atkins", "Ambulance LTD", "Sleepies", "Black Angels"]
    let bandSubTitles = ["Tue 5/1", "Fri 5/4", "Sat 5/5", "Sun 5/6", ]
    let bandImageNames = ["thumb-nicole-atkins", "thumb-ambulance-ltd", "thumb-sleepies", "thumb-black-angels"]
    var bandDetails = [BandDetail]()

21. Replace those properties with a single model instance. This creates the connection between our Controller and Model layers:

    class BandsTableViewController: UITableViewController {
    
       let bandsModel = BandsModel()
    
       override func viewDidLoad() {

22. In the viewDidLoad method, we'll trigger the model to load its data. This follows the MVC pattern where the Controller orchestrates data loading when the View is about to be presented to the user:

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

    This approach is much cleaner than our previous implementation. Instead of mixing data initialization with view setup, we now have clear separation of concerns. The Controller simply requests data from the Model when needed.

23. Update the table view's data source methods to use our Model. In the numberOfRowsInSection method, replace the existing return statement to query our model's data count:

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

24. In the cellForRowAt method, we'll configure each table cell using data from our Model. Start by getting a reference to the specific band data for the current row:

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
       let cell = tableView.dequeueReusableCell(withIdentifier: "bandCell", for: indexPath)
    
       // Configure the cell…
       let bandDetail = bandsModel.bandDetails[indexPath.row]
       cell.textLabel?.text = bandTitles[indexPath.row]
       cell.detailTextLabel?.text = bandSubTitles[indexPath.row]
       cell.imageView?.image = UIImage(named: bandImageNames[indexPath.row])
       return cell
    }

    Notice how we're now getting our data object directly from the Model rather than relying on separate arrays. This creates a single source of truth for our data.

25. Now update the cell configuration to use properties from our bandDetail object instead of the old array-based approach:

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
       let cell = tableView.dequeueReusableCell(withIdentifier: "bandCell", for: indexPath)
    
       // Configure the cell…
       let bandDetail = bandsModel.bandDetails[indexPath.row]
       cell.textLabel?.text = bandDetail.bandName
       cell.detailTextLabel?.text = bandDetail.nextShowDate
       cell.imageView?.image = UIImage(named: bandDetail.thumbImageName!)
       return cell
    }

26. Finally, we need to update the segue preparation method to pass Model data to the detail view. This demonstrates how the Controller facilitates communication between different parts of the application. Scroll to the bottom of the file and update the prepare method:

    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    
       if (segue.identifier == "showDetail") {
          if let indexPath = self.tableView.indexPathForSelectedRow {
             let bandsDetailViewController:BandsDetailViewController = segue.destinationViewController as! BandsDetailViewController
             let bandDetail = bandsModel.bandDetails[indexPath.row]
             bandsDetailViewController.currentBandDetail = bandDetails[indexPath.row]

27. Complete the refactoring by ensuring we're passing the correct model data:

    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    
       if (segue.identifier == "showDetail") {
          if let indexPath = self.tableView.indexPathForSelectedRow {
             let bandsDetailViewController:BandsDetailViewController = segue.destinationViewController as! BandsDetailViewController
             let bandDetail = bandsModel.bandDetails[indexPath.row]
             bandsDetailViewController.currentBandDetail = bandDetail

28. Click the Run button to test your refactored application.
29. Thoroughly test the app's functionality—navigate through the table view, tap on different bands, and verify that the detail views display correctly. The user experience should be identical to before, but the underlying architecture is now properly structured.
30. Return to Xcode when you've confirmed everything works correctly.

31. Leave the project open for the next exercise, where we'll build upon this MVC foundation to add more advanced features.