iPhone App Development - Cloud Storage of Data

Reading Data from Cloud Storage

Firebase is a web-based application that allows you to create an online database that can be accessed by your app. It is owned by Google, so if you have a Google account (like Gmail), you can use it to login to Firebase. If not, set up a free Google account.

Go to firebase.google.com and login.

Once you are logged in, you should see your account in the top right with Go To Console next to it. Choose Go To Console. Or you can go directly to the console at console.firebase.google.com/.

We will create a simple database to hold news headlines. This example is based on the series of exercises starting with Firebase Tutorials for iOS. We will add this to the "headline" app you created in the TableView Exercise.

Start by creating a New Project. Name it headline and accept the terms. When the project is ready, click Continue.

Now we need to get the XCode files to connect to our app. Click on Project Overview in the top left of Firebase. Click on the iOS logo to add Firebase to your iOS App. Give it a bundle id, which should correspond to what you named or will name your app (for example com.cindyroyal.headline) and give the app a nickname. Register App;. Choose Download Config File, which will save it to your Downloads. Make sure you are only signed in to one Google account in the browser. This plist file contains all the settings to connect your app to the database.

X out of iOS Setup. If you have already created the database, choose the database’s Setting (gear) icon to get back to these settings.

Creating the XCode Project

Use the XCode Project we created previously called "headline". The name will be added to your organization id (ie com.cindyroyal.headline).

Drag the .plist that you downloaded above and put in in the folder stack for the project. Choose Copy Items If Needed and Finish. It saves a copy of the plist file in your folder. This is the one you will work with now.

Add Firebase SDK Using CocoaPods

We are going to use the dependency manager CocoaPods to add the Firebase SDK to our application. We’ll use the Terminal to install CocoaPods.

$ sudo gem install cocoapods

You will need to do this on computers where you have administrator password access. This is already installed on our computers, but if you are working on your own computer, you will need to do this. You can check to see if the computer you have has CocoaPods installed with the following command:

$ pod --version

Now that you have confirmed that you have CocoaPods, you will need to change to the folder that has your project. In Terminal, use cd to get into the project folder.

$ cd Desktop
$ cd headline

(This works if your project is on the Desktop in a folder called headline. Use your location and name). Use the ls command in the project folder to see a list of files.

In the headline folder, run the init command. This initializes the project with a Podfile.

$ pod init

In the Finder on your computer, open the Podfile (ctrl-click) in a text editor (Brackets or Atom).

Under #pods for headline, add the following and Save.

pod 'Firebase/Core'
pod 'Firebase/Firestore'

Back in Terminal, run the install command

$ pod install

This reads the podfile and installs the dependencies you need. You will see these items installing in the Terminal and you will see the Pods installed when you look in the Finder.

Now, in XCode, you will continue working on the app in the .xcworkspace file (not the xcproject). So close the project and reopen it in XCode as the .xcworkspace file. Run the project, just to make sure it builds without any errors.

In XCode, open AppDelegate.swift. Add import Firebase below import UIKit.

import Firebase

In the func application in the didFinishLaunchingWithOptions, add this code before the return statement.

FirebaseApp.configure()

Now our app is connected to our Firebase database project!

Read from Database

We are going to replace the array that we created previously with the data from Firebase. Go back to Firebase and find your project. Click on Database and create a Cloud Firestore database. Make sure to start it in test mode. This adds the true values below to designate that the app is being used for testing. A real application will need authentication before going live.

Removes authorization for testing in Firebase. See this under Rules.
read: true
write: true

We will creat a simple database that will only store Posts. The Firestore organizes data into Collections. Each record in a Collection is called a Document. Documents contain fields that hold the data.

Click on Database in the sidebar if you are not already in that area. Click on Start Collection and name it Posts. You will be asked to include your first Document. Leave the Document ID field blank, because we will use Firestores Auto-ID feature to give each document a unique ID. Your first document will have the field "post". Give it the value of any news headline you would like to use. Since this is text, leave the type as "string" but you can see other types that are available. Save the Document. Then choose Add Document to add a second post in the same manner

post: New Jersey Orders Residents To Stay Home

post: California Orders Shelter-In-Place

We will add additional fields per Documents in future tutorials, but we will be working with a simple database for now that just has posts at one level. Your Firestore database should look something like this. Click on each unique Document ID to see the post field you created.

Back in XCode, in the View Controller, include the code to the right in the appropriate areas. Read the comments to understand where in your View Controller to include the items. Be careful to only copy the bracketed sections you need to add to the code.

This will read the items from the database and display them in the TextView!

Comment out the previous reference for the array. Now each message will be added to the array each time there is a new message added.

Test your app. It may take a few second to appear in the Simulator. You should be able to read data from your database and see it presented. The final app should look like this:

We have not yet created Segues to go to the other scenes yet, so for now, the Segues you created in the previous exercise do not work. We will do that in the next exercise.