Connecting to an External Datasource

Topics Covered in This iOS Development Tutorial:

Creating a Database in Firebase, Connecting the Model with Firebase, Connecting the View Controller with the Model, Importing More Data

Exercise Preview

Exercise Overview

In this comprehensive exercise, you'll learn how to create a dynamic band database using Firebase and seamlessly integrate it with your iOS application. This hands-on tutorial will transform your app from using static data to leveraging a real-time, cloud-based database solution—a critical skill for modern iOS development. By the end of this exercise, you'll have a fully functional app that can scale with real-world data requirements.

Getting Started

1. If you completed the previous exercise you can skip the following sidebar. We strongly recommend completing the previous exercises (1B–4B) before starting this one, as they provide essential foundation knowledge for Firebase integration.

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

   Prerequisites Check

   0/3

   Complete exercises 1B through 4B

   Ensures proper project foundation and Firebase setup

   Have Jive Factory.xcworkspace open

   Required for continuing from previous exercise work

   Verify Firebase project access

   Confirm you can log into firebase.com with your account

Creating a Database in Firebase

Now that Firebase is configured in your project, it's time to build a real database that will power your application. Firebase's Realtime Database provides a NoSQL, cloud-hosted solution that syncs data across all clients in real-time. Unlike traditional SQL databases, Firebase stores data as one large JSON tree, making it incredibly fast and flexible for mobile applications. We'll create this database through Firebase's intuitive web console interface.

1. If your user dashboard isn't still open in your web browser, navigate to firebase.com/login/ and authenticate with your credentials.
2. Click on the Jive Factory project if you're not already inside the project's console.
3. On the left navigation panel, click Realtime Database.
4. To add data to your database, hover over your app's unique identifier (something like jive-factory-d1ce2) and click the green + (plus) symbol next to it.

5. Configure the following in the text fields that appear:

   Name:	results
   Value:	Leave it blank

   Understanding Firebase's data structure is crucial for effective development. Firebase organizes data as a large JSON tree where each node can contain child nodes. By creating a "results" node without a value, we're establishing a parent container that will hold all our band data. This structure mirrors how arrays work in traditional programming, but with the flexibility of NoSQL document storage.

6. Let's create a child array within the parent object. Click the plus next to Value to generate another set of input fields.

7. Set the Name to 0 (representing the first index of our data array). Leave Value blank and click the plus next to it.

   NOTE: This hierarchical structure ensures that each band receives its own indexed entry in the database. We'll start with one band's complete data set to establish the pattern.

8. Now we'll add the detailed information for Nicole Atkins' band. In the next set of text fields, configure the following and hold off on clicking the plus:

   Name:	bandName
   Value:	Nicole Atkins

   This creates a key-value pair, which Firebase stores as part of a dictionary object. In iOS development, dictionaries are fundamental data structures that map keys to values. The key "bandName" corresponds directly to a property in our BandsModel class, ensuring seamless data integration between your database and application code.

9. To create a new column at the same array index, click the plus next to 0:

   

10. In the new text fields, set Name to bandType and Value to Rock.
11. Once again, click the plus next to the 0 a couple of rows above.
12. Data consistency between your database and application model is critical for successful integration. The property names and values must match exactly between Firebase and your Swift code. To ensure accuracy with the longer text strings, we'll copy them directly from your existing model. Switch to Xcode now.
13. In the Project navigator open BandsModel.swift.
14. Copy bandDescription from the fourth line of the Nicole Atkins Band Detail, then switch back to the Firebase dashboard and paste it into the open Name field.

15. Copy and paste all of the following key-value pairs between the BandsModel.swift file and Firebase. Remember to click the + next to the Name field to create new rows for each entry:

    Name	Value
    bandDescription	Nicole will knock your socks off.
    fullImageName	full-nicole-atkins.png
    thumbImageName	thumb-nicole-atkins.png
    nextShowDate	Tue 5/1
    nextShowTime	8pm
    venue	Bowery Ballroom
    showDetails	All ages—$35
    videoURL	http://www.youtube.com/embed/Go9k14yrxeQ?rel=0

16. Click Add. Your database structure should now display two columns and 10 rows, similar to this:

    

Connecting the Model with Firebase

With your database populated and structured, the next critical step is updating your application's model layer to communicate with Firebase. This involves replacing your static data fetching methods with dynamic database queries that can retrieve, parse, and update information in real-time. This transformation represents a fundamental shift from prototype to production-ready application architecture.

1. Switch to Xcode and in the Project navigator , click on BandsModel.swift if it isn't already open.

2. At the top of the file, import the Firebase Database framework by adding the bold code:

   import UIKit
   import FirebaseDatabase
   
   class BandsModel: NSObject {

3. Select and delete the entire existing fetch() method as shown:

   func fetch() {

   Code Omitted To Save Space

   }

4. Now we'll implement a modern, asynchronous fetch method that leverages Swift's completion handler pattern:

   var bandDetails = [BandDetail]()
   
   func fetch(complete:@escaping() -> ()) {
   
   }

   NOTE: This method signature uses Swift's escaping closure syntax, which is essential for asynchronous operations. The completion handler allows the calling code to be notified when the database operation finishes, enabling proper UI updates and data synchronization.

5. Initialize your Firebase database reference by connecting to your project's specific database instance:

   func fetch(complete:@escaping() -> ()) {
   
      let myRootRef = Database.database().reference()
   
   }

   NOTE: The GoogleService.plist file you added earlier contains your project's unique database URL and configuration details. Firebase's SDK automatically reads this configuration, eliminating the need to hardcode database URLs in your application code—a significant security and maintainability improvement over earlier Firebase versions.

6. Implement Firebase's real-time data observation system using the observe method. This creates a persistent listener that automatically updates your app whenever database content changes:

   let myRootRef = Database.database().reference()
   
   myRootRef.observe(DataEventType.value, with: {[weak self] snapshot in 
   })

7. Understanding this code pattern is crucial for modern iOS development:

   • The snapshot parameter represents the current state of your database at the moment the observer fires. This snapshot contains all the data at the referenced database location.
   • We're listening for .value events, which trigger whenever any data changes at this database location. Firebase also supports more granular event types like child additions, removals, and modifications.
   • The [weak self] capture list prevents strong reference cycles, a common memory management issue in iOS development. This pattern ensures that your BandsModel instance can be properly deallocated when no longer needed, preventing memory leaks in production applications.
   Import Requirements

   Remember to import both UIKit and FirebaseDatabase at the top of your BandsModel.swift file before implementing the new fetch method.

   Firebase Integration Process

   1

   Initialize Database Reference

   Create connection to your Firebase project using Database.database().reference()

   2

   Set Up Event Listener

   Use observeDataEventType with .value events to monitor database changes in real-time

   3

   Parse Snapshot Data

   Extract child objects from snapshots and convert them to usable iOS data types

   4

   Populate Model Objects

   Map Firebase key-value pairs to BandDetail properties using conditional binding

Connecting the View Controller with the Model

With your model layer successfully integrated with Firebase, the final step is updating your view controller to work seamlessly with the new asynchronous data flow. This involves modifying how your UI responds to data loading and implementing proper threading practices to ensure smooth user experience during database operations.

1. In the Project navigator , navigate to BandsTableViewController.swift.
2. In the viewDidLoad() method, select the bandsModel.fetch() method call and delete it.

3. Implement the new asynchronous data loading pattern:

   override func viewDidLoad() {
      super.viewDidLoad()
   
      FirebaseApp.configure()
      bandsModel.fetch {[weak self] () -> () in
         if let strongSelf = self {
            strongSelf.tableView.reloadData()
         }
      }
   
   }

   This implementation demonstrates professional iOS development practices. FirebaseApp.configure() initializes the Firebase SDK with your project credentials. The fetch method's completion handler uses the same weak self/strong self pattern to safely update the table view when data loading completes. The reloadData() call refreshes the UI with the new Firebase data, creating a seamless transition from loading to display.

4. For development and debugging purposes, our model includes console logging that will display Firebase data in Xcode's Debug area. If the Debug area isn't visible, click Hide or show the Debug area in the toolbar.

5. Test your complete Firebase integration by running the application. Click Run to launch the iOS Simulator.

   Nicole's entry should appear in your table view exactly as it did with static data, but now it's being dynamically loaded from your Firebase database. This demonstrates successful end-to-end integration between your iOS app and cloud database infrastructure.

6. Return to Xcode and examine the console output in the Debug area's right panel.

   The log should display the complete Firebase results array, confirming that your snapshot retrieval is working correctly. This raw data view helps verify that all your database keys and values are properly structured and accessible to your application.

7. Now that we have confirmed the code is working correctly with Firebase,