12.7. Adding a New Contact

Let's focus on building the functionalities to add a new contact for a signed-in user in the app.

Let's add a new group in the file navigator, 'Add Contact Screen.' Create a file named 'AddContactViewController.swift' inside it.

Create a sub-group of 'Add Contact Screen' named 'Views' and create 'AddContactView.swift' file inside it.

AddContactView.swift

Let's open 'AddContactView.swift' file and write the following code there:

//
//  AddContactView.swift
//  App12
//
//  Created by Sakib Miazi on 6/2/23.
//
import UIKit

class AddContactView: UIView {
    var textFieldName: UITextField!
    var textFieldEmail: UITextField!
    var textFieldPhone: UITextField!
    var buttonAdd: UIButton!
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.backgroundColor = .white
        
        setupTextFieldName()
        setupTextFieldEmail()
        setupTextFieldPhone()
        setupButtonAdd()
        
        initConstraints()
    }
    
    func setupTextFieldName(){
        textFieldName = UITextField()
        textFieldName.placeholder = "Name"
        textFieldName.borderStyle = .roundedRect
        textFieldName.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(textFieldName)
    }
    
    func setupTextFieldEmail(){
        textFieldEmail = UITextField()
        textFieldEmail.placeholder = "Email"
        textFieldEmail.borderStyle = .roundedRect
        textFieldEmail.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(textFieldEmail)
    }
    
    func setupTextFieldPhone(){
        textFieldPhone = UITextField()
        textFieldPhone.placeholder = "Phone"
        textFieldPhone.borderStyle = .roundedRect
        textFieldPhone.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(textFieldPhone)
    }
    
    func setupButtonAdd(){
        buttonAdd = UIButton(type: .system)
        buttonAdd.setTitle("Add", for: .normal)
        buttonAdd.setImage(.add, for: .normal)
        buttonAdd.titleLabel?.font = UIFont.boldSystemFont(ofSize: 20)
        buttonAdd.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(buttonAdd)
    }
    
    func initConstraints(){
        NSLayoutConstraint.activate([
            textFieldName.topAnchor.constraint(equalTo: self.safeAreaLayoutGuide.topAnchor, constant: 8),
            textFieldName.leadingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.leadingAnchor, constant: 16),
            textFieldName.trailingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.trailingAnchor, constant: -16),
            
            textFieldEmail.topAnchor.constraint(equalTo: textFieldName.bottomAnchor, constant: 8),
            textFieldEmail.leadingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.leadingAnchor, constant: 16),
            textFieldEmail.trailingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.trailingAnchor, constant: -16),
            
            textFieldPhone.topAnchor.constraint(equalTo: textFieldEmail.bottomAnchor, constant: 8),
            textFieldPhone.leadingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.leadingAnchor, constant: 16),
            textFieldPhone.trailingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.trailingAnchor, constant: -16),
            
            buttonAdd.topAnchor.constraint(equalTo: textFieldPhone.bottomAnchor, constant: 8),
            buttonAdd.leadingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.leadingAnchor, constant: 16),
            buttonAdd.trailingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.trailingAnchor, constant: -16),
        ])
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
}

The above code is straightforward as well. We have four UI elements, three text fields for the contact's name, email, and phone, and an add button to store the contact.

AddContactViewController.swift

Open the 'AddContactViewController.swift' file. Now let's put the following code there:

//
//  AddContactViewController.swift
//  App12
//
//  Created by Sakib Miazi on 6/2/23.
//

import UIKit
import FirebaseAuth
import FirebaseFirestore
import FirebaseFirestoreSwift

class AddContactViewController: UIViewController {
    var currentUser:FirebaseAuth.User?
    
    let addContactScreen = AddContactView()
    
    override func loadView() {
        view = addContactScreen
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        navigationController?.navigationBar.prefersLargeTitles = false
        title = "Add a New Contact"
        
        addContactScreen.buttonAdd.addTarget(self, action: #selector(onAddButtonTapped), for: .touchUpInside)
    }
    
    //MARK: on add button tapped....
    @objc func onAddButtonTapped(){
        let name = addContactScreen.textFieldName.text
        let email = addContactScreen.textFieldEmail.text
        let phoneText = addContactScreen.textFieldPhone.text
        
        if name == "" || email == "" || phoneText == ""{
            //alert..
        }else{
            if let phone = Int(phoneText!) {
                let contact = Contact(name: name!, email: email!, phone: phone)
                
                saveContactToFireStore(contact: contact)
            }
        }
        
    }
    
    //MARK: logic to add a contact to Firestore...
    func saveContactToFireStore(contact: Contact){
        
    }
        
}

In the above code:

• We import the necessary libraries:

  • FirebaseAuth - to access the details of the current user

  • FirebaseFirestore - to store data

  • FirebaseFirestoreSwift - to upload/read data using Swift Codable structs.

• On line 23, we say we prefer a small-sized title, not a large one.

• On line 26, we add an action to the add button, and the action is defined in @objc func onAddButtonTapped() method.

• On lines 30 through 45, we define @objc func onAddButtonTapped() method.

  • First, we validate the name, email, and phone number the user put in. Then we call func saveContactToFireStore(contact: Contact) method to upload the contact to Firestore.

• We now have to update the Contact struct a little bit to conform to the Firestore structure.

• Then we will define func saveContactToFireStore(contact: Contact) method.

Updating Contact.swift

Open DataModels -> Contact.swift and update it like the following:

//
//  Contact.swift
//  App12
//
//  Created by Sakib Miazi on 6/2/23.
//

import Foundation
import FirebaseFirestoreSwift

struct Contact: Codable{
    @DocumentID var id: String?
    var name: String
    var email: String
    var phone: Int
    
    init(name: String, email: String, phone: Int) {
        self.name = name
        self.email = email
        self.phone = phone
    }
}

In the above code:

• We import FirebaseFirestoreSwift to encode and decode Swift objects to and from Firestore document objects. Each Swift Contact object will represent a contact document in Firestore.

• We adopt the Codable protocol to enable encoding and decoding.

• On line 12, you see that we added @DocumentID var id: String?. Do you remember that Firebase has two options for setting a document ID? You can either give an ID manually or auto-generate an ID. We need to put that declaration line to enable both to conform properly to the Firestore document structure. We are saying that the document ID of the Firestore document will be an optional string. For more clarification visit: https://firebase.google.com/docs/firestore/solutions/swift-codable-data-mapping.

Uploading the Contact to Firestore

Now, let's put the following code to AddContactViewController.swift file:

//
//  AddContactViewController.swift
//  App12
//
//  Created by Sakib Miazi on 6/2/23.
//

import UIKit
import FirebaseAuth
import FirebaseFirestore
import FirebaseFirestoreSwift

class AddContactViewController: UIViewController {
    //code omitted...
    let database = Firestore.firestore()
    //code omitted...
    
    //MARK: logic to add a contact to Firestore...
    func saveContactToFireStore(contact: Contact){
        if let userEmail = currentUser!.email{
            let collectionContacts = database
                .collection("users")
                .document(userEmail)
                .collection("contacts")  
            do{
                try collectionContacts.addDocument(from: contact, completion: {(error) in
                    if error == nil{
                        self.navigationController?.popViewController(animated: true)
                    }
                })
            }catch{
                print("Error adding document!")
            }
        }
    }       
}

In the above code:

• On line 15, we instantiate constant database with the Firestore database. database now points to the root document in Firestore.

• We are creating a reference to the collection for the contacts of the current user on lines 21 through 24. We are trying to access

  • On lines 21-22, database.collection("users") to access the users collection where we have all the users.

    • On line 23, .document(userEmail) tries to access the document regarding the current user. We name (DocumentID) the document with their email address since the email will be unique to each user.

      • On line 24, .collection("contacts") tries to access the 'contacts' collection for that user document.

• So basically "users" collection holds all the documents regarding the users. Each document refers to a user authenticated through FirebaseAuth. Inside each user document, we have another collection named "contacts" to hold all the contacts for that user. collectionContacts refers to this "contacts" collection.

• From lines 25 through 33, we handle storing the contact to Firebase. Here the do-try-catch block is necessary since this is a network call, and it might create errors when adding something to Firebase if we write data with a wrong structure.

• On line 26, we call collectionContacts.addDocument(from: contact, completion:...) to add a contact document to collectionContacts reference. If you notice, we are directly uploading the data from a Swift Contact object.

• If there is no error, the add is successful, and we can now close this screen and go back to Main Screen.

Adding Progress Activity Indicator

We can easily add the progress indicator view when storing the contact in Firestore. Let's add the following code to AddContactViewController.swift:

//
//  AddContactViewController.swift
//  App12
//
//  Created by Sakib Miazi on 6/2/23.
//

//codes omitted...

class AddContactViewController: UIViewController {
    //codes omitted...
    
    let childProgressView = ProgressSpinnerViewController()
    //codes omitted...
    
    //MARK: logic to add a contact to Firestore...
    func saveContactToFireStore(contact: Contact){
        if let userEmail = currentUser!.email{
            let collectionContacts = database
                .collection("users")
                .document(userEmail)
                .collection("contacts")
            
            //MARK: show progress indicator...
            showActivityIndicator()
            
            do{
                try collectionContacts.addDocument(from: contact, completion: {(error) in
                    if error == nil{
                        //MARK: hide progress indicator...
                        self.hideActivityIndicator()
                        
                        self.navigationController?.popViewController(animated: true)
                    }
                })
            }catch{
                print("Error adding document!")
            }
        }
    
    }
        
}

//MARK: adopting progress indicator protocol...
extension AddContactViewController:ProgressSpinnerDelegate{
    func showActivityIndicator(){
        addChild(childProgressView)
        view.addSubview(childProgressView.view)
        childProgressView.didMove(toParent: self)
    }
    
    func hideActivityIndicator(){
        childProgressView.willMove(toParent: nil)
        childProgressView.view.removeFromSuperview()
        childProgressView.removeFromParent()
    }
}

In the above code:

• On lines 46 through 58, we are adopting the ProgressSpinnerDelegate protocol to display the progress indicator.

• On line 25, we show the indicator before we start storing the contact in Firestore.

• On line 31, we hide the indicator after we complete storing the contact.

Patching with the Main Screen

Once the floating add contact button is tapped, we need to display the add contact screen. So, let's add the following lines of code to ViewController.swift file:

//
//  ViewController.swift
//  App12
//
//  Created by Sakib Miazi on 6/1/23.
//

import UIKit
import FirebaseAuth

class ViewController: UIViewController {

    //codes omitted...
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //codes omitted...
        
        //MARK: tapping the floating add contact button...
        mainScreen.floatingButtonAddContact.addTarget(self, action: #selector(addContactButtonTapped), for: .touchUpInside)
    }
    
    //codes omitted...
    
    @objc func addContactButtonTapped(){
        let addContactController = AddContactViewController()
        addContactController.currentUser = self.currentUser
        navigationController?.pushViewController(addContactController, animated: true)
    }
}

In the above code:

• In viewDidLoad() method, we add an action to floatingButtonAddContact button. The action is defined in addContactButtonTapped() method.

• On lines 26 through 30, we populate the Add Contact screen.

Now, if we run the app, we will see:

If we look at the Firestore console, we will see the following:

You can see that:

• The "users" collection contains a document called "[email protected]". Because the current user's email is "[email protected]."

• The "[email protected]" document contains a collection named "contacts."

• Inside the "contacts" collection, we have contact documents (with auto-generated IDs).

• Inside each contact document, we have details of that contact as fields.