1. Choose launch screen template

   

2. If launch screen contains image, then

   1. In assets.xcassets, load desired icons

      

3. Use provided views to build up the screen

   

4. Go to app targets → App Icons and Launch Screen

   1. Select the storyboard file name

      

   Creating Launch screen programmatically

   1. New SwiftUI View template

   2. In the new file

   struct LaunchScreen: View {
       @State private var isActive = false
       var body: some View {
           ZStack {
               if isActive {
                   ContentView()
               } else {
                   VStack(alignment: .center) {
                       Text("Shopping App")
                           .font(.title)
                           .bold()
                       Image("Bag")
                   }
               }
           }
           .onAppear {
               DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
                   self.isActive = true
               }
           }
       }
   }

   3. In main file

import SwiftUI

@main
struct LaunchScreenDemo: App {
    var body: some Scene {
        WindowGroup {
            LaunchScreen()
        }
    }
}

3. Launch screen with animation

struct LaunchScreen: View {
       // Initial position above the screen
    @State private var firstImageOffset: CGFloat = -100 
       // Initial position below the screen
    @State private var secondImageOffset: CGFloat = UIScreen.main.bounds.height
    @State private var showThirdImage = false
    @State private var isActive = false
    
    var body: some View {
        ZStack {
            if isActive == true {
                ContentView()
            } else {
                GeometryReader { geometry in
                    ZStack {
                        Image("ImageFromAbove")
                            .resizable()
                            .frame(width: 210, height: 260)
                            .offset(x: geometry.size.width/2 - 100, y: firstImageOffset)
                            .onAppear {
                                withAnimation(Animation.easeInOut(duration: 2)) {
                                    firstImageOffset = geometry.size.height / 2 - 100 // Center of the screen
                                }
                            }
                        Image("ImageFromBelow")
                            .resizable()
                            .frame(width: 210, height: 260)
                            .offset(x: geometry.size.width/2 - 100, y: secondImageOffset)
                            .onAppear {
                                withAnimation(Animation.easeInOut(duration: 2)) {
                                    secondImageOffset = geometry.size.height / 2 - 100 // Center of the screen
                                    DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
                                        showThirdImage = true
                                    }
                                }
                            }
// Sometimes this is not necessarry, it all depends how the two images above are colliding
                        if showThirdImage {
                            Image("FinalImage")
                                .resizable()
                                .frame(width: 200, height: 200)
                                .offset(x: geometry.size.width/2 - 100, y: geometry.size.height / 2 - 100)
                        }
                    }
                }
            }
        }
        .onAppear {
            DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
                self.isActive = true
            }
        }
    }
}

1. Using VStack

struct CollapsibleListView: View {
    let fastCars = ["Lamborghini Aventador","Bugatti Veyron","Porsche    
                   911 GT3","Ferrari 488 Pista" ,"McLaren 720S"]
    let electricCars = ["Tesla Model S","Nissan Leaf","BMW 
                       i3","Chevrolet Bolt EV","Audi e-tron"]
    var body: some View {
        NavigationView {
            VStack {
                List {
                    Section(header: Text("Fast cars")) {
                        ForEach(fastCars, id: \\.self) { car in
                            Text(car)
                        }
                    }
                    
                    Section(header: Text("Electric cars")) {
                        ForEach(electricCars, id: \\.self) { electric in
                            Text(electric)
                        }
                    }
                }
            }
         }
    }
}

2. Using listStyle

struct CollapsibleListView: View {
    let fastCars = ["Lamborghini Aventador","Bugatti Veyron","Porsche    
                   911 GT3","Ferrari 488 Pista" ,"McLaren 720S"]
    let electricCars = ["Tesla Model S","Nissan Leaf","BMW 
                       i3","Chevrolet Bolt EV","Audi e-tron"]
    var body: some View {
        NavigationView {
                List {
                    Section(header: Text("Fast cars")) {
                        ForEach(fastCars, id: \\.self) { car in
                            Text(car)
                        }
                    }
                    
                    Section(header: Text("Electric cars")) {
                        ForEach(electricCars, id: \\.self) { electric in
                            Text(electric)
                        }
                    }
                }
                .listStyle(.sidebar)
         }
    }
}

3. Custom - not practical for many sections

   struct SectionHeaderView: View {
       var headerText: String
       @Binding var showList: Bool
       var body: some View {
           HStack {
               Text(headerText)
                   .font(.caption)
                   .foregroundColor(.gray)
               Spacer()
               Image(systemName: showList ? "chevron.down" :  
                      "chevron.right")
                   .foregroundColor(.blue)
                   .onTapGesture {
                       showList.toggle()
                   }
           }
       }
   }
   
   struct CollapsibleListView: View {
       @State private var showFirstList: Bool = false
       @State private var showSecondList: Bool = false
       let fastCars = ["Lamborghini Aventador","Bugatti Veyron","Porsche    
                      911 GT3","Ferrari 488 Pista" ,"McLaren 720S"]
       let electricCars = ["Tesla Model S","Nissan Leaf","BMW 
                          i3","Chevrolet Bolt EV","Audi e-tron"]
       var body: some View {
           List {
               Section(header: 
                         SectionHeaderView(headerText: "Fast  
                             cars",showList: $showFirstList)
               ){
                   if showFirstList {
                       ForEach(fastCars, id: \.self) { car in
                           Text(car)
                       }
                   }
               }
   
               Section(header: 
                        SectionHeaderView(headerText: "Electric 
                            cars",showList:$showSecondList)
               ){
                   if showSecondList {
                       ForEach(electricCars, id: \.self) { electric in
                           Text(electric)
                       }
                   }
               }
           }
       }
   }

Alamofire is an open-source networking library written in Swift that simplifies the process of sending HTTP requests and handling responses. It supports various HTTP methods and includes additional features like parameter encoding and response validation.

How to use Alamofire in an app?

To use Alamofire in an app, follow these general steps:

1. Add Alamofire as a dependency to your project using CocoaPods or Swift Package Manager.

2. Import the Alamofire module into your project.

3. Use the provided API to make requests to an API and handle the responses.

Here is an example code snippet that shows how to use Alamofire to make a GET request:

In this example, AF.request creates a request to the specified URL, and the response method sets a closure to handle the response. The function then print the response to the console.

The request can be customised by setting parameters, headers, and encoding types, among other things. The response object can also be used to handle any errors or parse the returned data.

Adding Alamofire as a dependency

1. Using CocoaPods

Installing Alamofire using terminal.

• Navigate to project folder

cd ProjectName

• Create pod file

Pod init

• Open the podfile created and add the line [version number is optional]

pod "Alamofire", "[version number]"

• Save file and run the following command which will create Pods folders in the project

pod install

• Now open the project’s workspace**[projectname.xcworkspace**] instead of project folder [projectname.xcodeproj]

  2. Using SPM

• Go to projectName → Package Dependencies → click on +

• Copy and paste the following url

<https://github.com/Alamofire/Alamofire.git>

• Set Version to Up to Next Major (or what works for you!) and click Next

Note: Package may take some minutes to verify and load.

Or

Create a .swift file named Package in the project root folder and add the dependencies as below:

then run the command below in the root folder directory

swift build

A simple fetch example:

In this example, we create a URL string and define some parameters and headers. We then use the AF.request() method to make a GET request to the URL, passing in the HTTP method, parameters, encoding type, and headers. We also validate the response status code to ensure that it falls within the range of 200 to 299.

Finally, we use a switch statement to handle the response, printing out the value of the response in case of success and the error message in case of failure.

Note: To be able to send requests to server

Go to AppName → Targets → Signing + Capabilities

Tick Outgoing Connections (Client)

Step 1: get the date from Date()

Step 2: Format the date using .formatted()

Date can be styled as : .complete, .abbreviated, .long, .numeric and .omitted (for no display).

Time can be styled as: .complete, .standard, .omitted, .shortened.

@state var dateCreated: Date()

dateCreated.formatted() // Jan 21, 2022, 4:03 PM
dateCreated.formatted(date: .complete, time: .omitted) // Sunday, 
January 22, 2023
dateCreated.formatted(date: .omitted, time: .complete) // 4:03:12 PM CST
dateCreated.formatted(date: .long, time: .shortened) // January 22, 2019, 4:03 PM
dateCreated.formatted(date: .abbreviated, time: .standard) // January 22, 2019, 4:03:12 PM
dateCreated.formatted(date: .numeric, time: .complete) // 1/22/2023, 4:03:12 PM CST

Getting specific time period of a date

Text("Week of the year: " + Date().formatted(.dateTime.week()))
Text("Week of the month: " +  Date().formatted(.dateTime.week(.weekOfMonth)))
Text("Weekday: " + Date().formatted(.dateTime.weekday()))
Text("Current year" + Date().formatted(.dateTime.year()))

Using DatePicker component

DatePicker provide a view of a calendar and optionally a time. This view is bound to a date instance (Date()).

The DatePicker takes two parameters:

1. A text, usually the title for the calendar

2. The @State value bound to the date instance

DatePicker("Title", selection: $variable)

Example:

@State private var dateTime = Date()
DatePicker("Enter your birthday", selection: $dateTime

DatePicker can also be written as:

DatePicker(selection: $dateTime, in: ...Date(), displayedComponents: .date) { 
   Text("Select a date") 
}

This takes as parameter:

1. selection: a state value bound to Date()

2. in:

   1. …Date() : choose a date up to now

      

   2. Date()… : choose a date from now onwards

   

3. displayedComponents: takes either date or hours and mins

   1. .date

      

   2. .hourAndMinute

Styling date picker

1. GraphicalDatePickerStyle(): displays an interactive calendar or clock.

   

2. CompactDatePickerStyle(): displays the components in a compact, textual format

   

3. FieldDatePickerStyle(): displays the components in an editable field.

4. StepperDatePickerStyle(): displays the components in an editable field, with adjoining stepper that can increment/decrement the selected component.

5. WheelDatePickerStyle(): displays each component as columns in a scrollable wheel.

Getting specific date

To get current date in the format "yyyy-MM-dd HH:mm:ss"

let date = Date()
let format = DateFormatter()
format.dateFormat = "yyyy-MM-dd HH:mm:ss"
let formattedDate = format.string(from: date)
print(formattedDate)

To get current day, month, year: use Calendar class

let calendar = Calendar.current
calendar.component(.year, from: date)
calendar.component(.month, from: date)
calendar.component(.day, from: date)
calendar.component(.weekday, from: date)

All returns integer values, i.e, if the month is September .month would return 9, or It will return 1 when it is in Sunday as in Gregorian Calendar.

Note: .current  may give unexpected results if the device is set the a different calendar (like .hebrew). Use Calendar(identifier: .gregorian)

let year = Calendar(identifier: .gregorian).dateComponents([.year], from: Date()).year

// iOS 15+
let year = Calendar(identifier: .gregorian).dateComponents([.year], from: .now).year

Returning a new date from a specific date

Calendar.current.date(byAdding: .day, value: 1, to: oldTime ?? Date())

This method takes three parameters:

• the unit to add (in this case .day)

• the value to add (in this case 1, which means we are adding 1 day to the oldTime)

• the starting date (in this case oldTime ?? Date(), which means if oldTime is nil use the current date and time)

The method returns a new date representing the result of adding the specified value of the given unit to the given date.

Get all months of the current year

func getMonths() -> [String] {
   var months: [String] = []
   let currentYear = calendar.component(.year, from: Date())
		
   for month in 1...12 {
	let dateComponents = DateComponents(year: currentYear, month: month)
	if let date = calendar.date(from: dateComponents) {
		let monthFormatter = DateFormatter()
		monthFormatter.dateFormat = "MMMM"
		let monthName = monthFormatter.string(from: date)
		months.append(monthName)
	}//if
   }//for
	return months
}//getMonths

var details = [
"Tom": "https://m.media-amazon.com/images/W/IMAGERENDERING_521856-T1/images/I/81sGVvD67eL._SY450_.jpg",
"Beast":"https://ntvb.tmsimg.com/assets/p21948923_v_h10_aa.jpg?w=960&h=540",
"Owl":"https://ih1.redbubble.net/image.2385686111.4230/poster,504x498,f8f8f8-pad,600x600,f8f8f8.jpg",
"Ducky":"https://eikhu9b6e94.exactdn.com/wp-content/uploads/2020/03/DuckTales-Poster.jpg?strip=all&lossy=0&quality=80&webp=80&avif=80&ssl=1",
"Panda": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGeOPlpwbIU82MVrzQL0vyS8u3Xvr17aPuiw&usqp=CAU",	"Dragon":"https://imgix.ranker.com/user_node_img/585/11694849/original/11694849-photo-u23?auto=format&q=60&fit=crop&fm=pjpg&dpr=2&w=375"
]

This dictionary includes a key representing the title and a corresponding value representing the URL of an image.

Step 1: Create the card view

struct CardView: View {
	var body: some View {
	  Rectangle()
	     .fill(Color.pink)	
   	     .frame(height:400)
	     .cornerRadius(20)
	     .padding()
	     .shadow(color: .pink.opacity(0.5), radius: 2)
	}
}

Step 2: Create the front view of the card

struct CardFrontView: View {
	@State var image: String
	@Binding var degree : Double
    var body: some View {
	VStack {
	   AsyncImage(url: URL(string: image)) { phase in
	    if let image = phase.image {
	      image
		.resizable()
		.aspectRatio(contentMode: .fill)
		.frame(width: 350, height: 400)
	    } else {				
              Image(systemName: "photo")
		.resizable()
		.aspectRatio(contentMode: .fill)
		.frame(width: 300, height: 300, alignment: .center)
            } 
	 }
	   .cornerRadius(20)
	}
	.padding(20)
	.rotation3DEffect(Angle(degrees: degree), axis:(x:0,y:1,z:0))
   }//body
}//CardFrontView

Step 3: Create the reverse view of the card

struct CardBackView: View {
	@State var title: String
	@Binding var degree : Double
    var body: some View {
	VStack {
	  Text(title)
	    .font(.title)
	  Text("A deeper view into \(title). \n What is it about? \n Genre: \n Duration: \n ratings: ")
	    .font(.body)
	    .multilineTextAlignment(.center)
	}
	.rotation3DEffect(Angle(degrees: degree), axis:(x:0,y:1,z:0))
	.frame(width: 300, height: 300, alignment: .center)
   }//body
}//CardBackView

The .rotation3DEffect modifier is used to rotate a view in 3D space along a specified axis. The degree parameter specifies the angle of rotation in degrees, while the axis parameter specifies the axis around which the view is to be rotated. In our case, we are rotating along the y axis.

Step 4: Create the flip animation

@State var backDegree = 0.0
@State var frontDegree = -90.0
@State var isFlipped = false
let durationAndDelay : CGFloat = 0.3
func flipCard(){
    isFlipped = !isFlipped
    if isFlipped {
	withAnimation(.linear(duration: durationAndDelay)) {
	   backDegree = 90
        }     
        withAnimation(.linear(duration:durationAndDelay)
             .delay(durationAndDelay)) {
		frontDegree = 0
	}
    } else {			
        withAnimation(.linear(duration: durationAndDelay)) {
		frontDegree = -90
        }
        withAnimation(.linear(duration: durationAndDelay)
             .delay(durationAndDelay)){
		backDegree = 0
	}
    }
}//flipCard

Step 5: Stack both the front and back views together.

The front and back view of the card are displayed in a ZStack

struct FullCardView: View {
    @State var title: String
    @State var image: String
    var body: some View {
	ZStack {
	   CardFrontView(image: image, degree: $backDegree)
	   CardBackView(title: title, degree: $frontDegree)
	}
	.shadow(color: .black, radius: 16)
	.onTapGesture {
	    flipCard()
	}
    }//body
}//FullCardView

Step 6: Create the carousel view

struct ContentView: View {
    @State private var index = 0
     var body: some View {
       VStack {
	TabView(selection: $index) {
	   ForEach(details.sorted(by: <), id: \.key) { key, value in
		CardView()
		   .overlay(FullCardView(title: key, image: value))
	   }
	    .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
       }
     }//body

Here we create a TabView that displays a collection of cards. The index variable is a state variable that keeps track of the currently selected tab.

The TabView displays a set of CardView objects, each of which is overlaid with a FullCardView that shows the full details of the card.

The details dictionary contains the key-value pairs of the titles and image URLs for each card.

The ForEach loop iterates over the sorted key-value pairs of details and creates a CardView object for each card.

The tabViewStyle modifier sets the style of the TabView to PageTabViewStyle, which displays the cards in a paged manner and hides the tab bar. The indexDisplayMode is set to .never to hide the index display of the TabView.

How does the flipCard function work?

The function has three variables named “backDegree”, “frontDegree”, and “isFlipped”.

When the function is called, it toggles the “isFlipped” variable and applies animation to change the “backDegree” and “frontDegree” values accordingly.

The back card’s angle starts at 0 and changes to 90, and the front of the card begins at -90 degrees and changes to 0.

To reverse the animation, the values are changed back to their start values.

The front and back views of the card are rotated around the y-axis to create a flip animation. By using .linear, the flip animation will be smooth and consistent without any abrupt changes (acceleration/deceleration) in speed. The delay modifier is used to delay the animation of the “frontDegree” variable by the same duration as the “backDegree”, so that the flip animation appears more realistic.

Synchronous call

With a synchronous API call, the app freezes while the call is being made. The app remain unresponsive until a response is available.

Here is an example using the URLSession:

let url = URL(string: "https://www.boredapi.com/api/activity")!
let request = URLRequest(url: url)

do {
    let data = try URLSession.shared.data(request: request)
    let activity = try JSONDecoder().decode(Activity.self, from: data)
    self.activities = activity
} catch {
    print("Error decoding data")
}

Asynchronous call

With an asynchronous API call, the app remain responsive while the API call is being made.

Here is an example using the URLSession:

let url = URL(string: "https://www.boredapi.com/api/activity")!
let request = URLRequest(url: url)

URLSession.shared.dataTask(with: request) { data, response, error in
    if let error = error {
	print("Error fetching data: \(error)")        
	return
    }

    guard let data = data else {
        print("No data")
        return
    }

    do {
      let activity = try JSONDecoder().decode(Activity.self, from: data)
      DispatchQueue.main.async {
	self.activities = activity
      }
    } catch {
        print("Error decoding data: \(error)")
    }
}.resume()

As can be noted, the asynchronous API call uses a closure that gets called when the response comes back. This closure allows you to handle the response data without blocking the main thread of your app.

The process of testing if the codes written are meeting expectations in one’s applications.

This is done to help test classes and functions faster with all possible scenarios.

Process is:

Provide some sample inputs to a function and their expected output.

How to write test cases?

• Go to file → new → Target

• Search test

• Choose UI Testing Bundle

import XCTest
@testable import UnitTest

class UnitTestTests: XCTestCase {

   func testAdditions() {
	
      let operations = MathOperations()
		
      let result = operations.addNumbers(x: 1, y: 2)
		
	XCTAssertEqual(result, 3)
		
      }// testAdditions

   func testMultiplications() {
		
     let operations = MathOperations()
		
     let result = operations.multiplyNumbers(x: 2, y: 2)
		
     XCTAssertEqual(result, 4)
		
   }// testMultiplications

   func testDivisions() {
		
     let operations = MathOperations()
		
     let result = operations.divideNumbers(x: 10, y: 2)
		
     XCTAssertEqual(result, 5)
		
   }// testMultiplications
		
}

The @testable line is basically importing our main folder where our app resides, so that we are able to test anything even those declared as private. This means, we can import any of our custom folders and files.

"XCTAssertEqual" makes sure the two arguments "result" and "3" are equal

The arguments passed are called expressions. So basically, we want the two expressions to be equal.

"XCTAssertEqual" can only be used when the class conform to the "XCTestCase" protocol imported from "XCTest"

Similarly we can test the following among others:

If an expression is true ->  XCTAssertTrue(expression: Bool)

If an expression is false -> XCTAssertFalse(expression: Bool)

If an expression is nil -> XCTAssertNil(expression: Any)

If the first expression is less than the second expression -> XCTAssertLessThan(expression1: Comparable,expression2: Comparable)

Testing in an app

Consider the following partial code of a simple app

struct LoginView: View {
	@State var email: String = ""
	@State var password: String = ""
	let isLoginSuccessful = FormValidation()

    var body: some View {
       VStack {
	TextField("Email address: ", text: $email) 			 
            .keyboardType(.emailAddress)
	SecureField("Password: ", text: $password)
	Button("Login") {
	   print(isLoginSuccessful.isLoginSuccessful(email: email, password: password))
	}
      }//VStack
    }//body
}//struct

class FormValidation {
   func isEmailValid(email: String) -> Bool {		
	let emailFormat = "[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,64}"
	let emailPredicate = NSPredicate(format:"SELF MATCHES %@", emailFormat)
	return emailPredicate.evaluate(with: email)
   }
	
    func isFormValid(email: String, password: String) -> Bool {
	if !email.isEmpty && !password.isEmpty {
		return true
	}
	return false
    }
	
	
   func isLoginSuccessful(email: String, password: String) -> String {		
     if isEmailValid(email: email) && isFormValid(email: email, password: password) {
	return "Login Successful"
     }
		
     return "Login unsuccessful"
   }
}

Step 1: In the AppNameUnitTesting file

import XCTest

class TestFormValidation: XCTestCase {

   let login = FormValidation()

	// Successful test case
   func test_should_make_sure_email_is_valid() {
		
	let testEmail = "Jon@example.com"
		
	let actualResult = login.isEmailValid(email: testEmail)
		
	XCTAssertTrue(actualResult)
    }
	
	// A failed case since email is empty
   func test_should_make_sure_form_is_valid2() {
		
	let testEmail = ""
	let testPassword = "23,nb%fd"
		
	let actualResult = login.isFormValid(email: testEmail, password: testPassword)
		
	XCTAssertTrue(actualResult)
   }
	
	// Successful case
   func test_should_make_sure_login_is_successful() {
		
	let testEmail = "jon@email.com"
	let testPassword = "23,nb%fd"
		
	let actualResult = login.isLoginSuccessful(email: testEmail, password: testPassword)
		
	let expectedResult = "Login successful"
		
	XCTAssertEqual(actualResult, expectedResult)
    }
}

To understand the tests functions, consider the View below

import SwiftUI

struct MealView: View {	
	@State var meals: [String] = []
	@State var mealName: String = ""
	@State var presentSheet: Bool = false
    var body: some View {
      NavigationView {
	VStack {
	  List(meals, id: \.self) { meal in
	     Text(meal)
	  }//List
	   .accessibility(identifier: "mealList")
	}//VStack
	 .sheet(isPresented: $presentSheet, onDismiss: {
	     meals.append(mealName)
	  }, content: {
      	    AddMealScreen(mealTitle: $mealName)
	  })
	   .navigationTitle("Meal")
	   .navigationBarItems(trailing: Button(action: {
		presentSheet = true
	     }, label: {
		Image(systemName: "plus")
	     })//Button
	     .accessibility(identifier: "showAddMealButton")
	 )//navigationBarItems
     }//NavigationView
   }//body
}//MealView

struct AddMealScreen: View {
   @Binding var mealTitle: String
   @Environment(\.presentationMode) var presentationMode
   var body: some View {
	   NavigationView {
	     Form {
		Section {
		  TextField("Enter meal title", text: $mealTitle)				   
                      .textFieldStyle(RoundedBorderTextFieldStyle())			 
                      .accessibility(identifier: "addMealTextField")
		}
		Section {
	          Button("Add") {
                         presentationMode.wrappedValue.dismiss()
		  } //Button
			.frame(maxWidth: .infinity)
			.accessibility(identifier: "addMealButton")
	        }
	    }//Form
		.navigationTitle("Add Meal")
	}//NavigationView
  }//body
}

Note: accessibility(identifier: ) is used in unit testing to access any view.

Visual representation of the code above:

Now let’s begin with the test cases:

• Go to file → new → Target

• Search test

• Choose UI Testing Bundle

In the AppNameUITests file

Step 1: Import XCTest

XCTest, in simple term, is a framework provided by Xcode to facilitate test writing and execution

Step 2: Create a class that inherits from XCTestCase.

Step 3: Write the test functions

1. We first need to launch the app

   1. To access the app we need to create an instance of the class XCUIApplication()

	let app = XCUIApplication()
	app.launch()

b. To add a new meal, we need to tap on the “+” button with identifier “showAddMealButton”

let addMealButton = app.buttons["showAddMealButton"]
		addMealButton.tap()

c. To write tests, we need to evaluate each component’s expectation. Likewise, the addMealButton’s expectation is to show a modal.

To know if the modal screen is present, we added an identifier in our NavigationBarTitle in our ui. This way, if the title is present it means the modal screen is in view.

let addMealNavBarTitle = app.staticTexts["Add Meal"]

d. The modal sliding up/down is an animation which may take some seconds. therefore we need to assess for this duration too else our test will timeout

So we await for the title’s existence for 1.0. Failing to exist will also result in failure of this test case.

XCTAssert(addMealNavBarTitle.waitForExistence(timeout: 1.0))

Full Code:

import XCTest

class test_full_app_function: XCTestCase {
	
	func test_should_make_sure_meal_is_added_to_list() {
		
	  let app = XCUIApplication()
	  app.launch()
		
	  let addNewMealButton = app.buttons["showAddMealButton"]
	  addNewMealButton.tap()
		
	  let addMealNavBarTitle = app.staticTexts["Add Meal"]	
	  XCTAssert(addMealNavBarTitle.waitForExistence(timeout: 1.0))
		
	  let mealTextField = app.textFields["addMealTextField"]
	  mealTextField.tap()
	  mealTextField.typeText("Happy meal")
		
	  let addMealButton = app.buttons["addMealButton"]
	  addMealButton.tap()
		
	  let mealList = app.tables["mealList"]
	  let _ = mealList.waitForExistence(timeout: 1.0)
		
	 let totalMealItems = mealList.descendants(matching:  
           .staticText).count
		
	XCTAssertEqual(1, totalMealItems)
     }
}

Group does nothing to our ui except that it group multiple views having the same properties, such as styling.

HStack {
   Button("Delete") {
     print("Delete")
   }
    .buttonStyle(.bordered) 
    .tint(.red)
				
   Group {
	Button("Ok") {
          print("Ok")
        }
	Button("Done") {
	  print("Done")
	}
  }//Group
   .buttonStyle(.borderedProminent)
   .tint(.green)
}

Note: Each Group can have up to 10 view components only, be it Text, buttons, etc. To display more views, another group is to be created.

Form {
   Group {
     Text("1")
     Text("2")
     Text("3")
     Text("4")
     Text("5")
     Text("6")
     Text("7")
     Text("8")
     Text("9")
     Text("10")
  }
  Group {
    Text("11")
  }
}

Section

Section actually creates sections in our data modifying our ui.

Form {
   Section {
	Text("1")
	Text("2")
	Text("3")
	Text("4")
	Text("5")
	Text("6")
	Text("7")
	Text("8")
	Text("9")
	Text("10")
   }
   Section {
	Text("11")
   }
}

Section with a header

Section {
	Text("Section 1")
	Image(systemName: "sparkles")
		.resizable()
		.frame(width: 50, height: 50, alignment: .center)
} header: {					
	Text("Section header")
} //header

Section with a footer

Section {
	Text("Section 1")
	Image(systemName: "sparkles")
		.resizable()
		.frame(width: 50, height: 50, alignment: .center)
} header: {					
	Text("Section header")
} footer: {
	Text("Section footer")
}

Center a button in a section

Section {
   Button(action: {
     print("Button tapped")
   }, label: {
     Text("Tap")
	.frame(width: 100)
  })
   .tint(.yellow)
   .buttonStyle(.borderedProminent)
   .padding()
   .frame(maxWidth: .infinity)
  } header: {
	Text("Section Two")
  } footer: {
	Text("Button")
  }
}

Remove background from section

Section {
    Button(action: {
	print("Button tapped")
    }, label: {
      Text("Tap")
        .frame(width: 100)
    })	
     .listRowBackground(Color.clear)
     .tint(.yellow)
     .buttonStyle(.borderedProminent)
     .padding()
     .frame(maxWidth: .infinity)
   } header: {
	Text("Section Two")
   }
}

Note: Very often Section and Group are used within the Form component to allow a scrollable view.

Form in itself is a container used to wrap lists of views.

NavigationView {
  VStack {				
      Form {
	Section {
	    Group {							    
                TextField("Name", text: $name)					 
                TextField("Email", text: $email)				   
            }//group				 
              .textFieldStyle(RoundedBorderTextFieldStyle())
					
	} header: {
	   Text("Welcome Subscribers")
	}//section
	
        Button("Save") {
	   print("\(name) saved!")
	}
	.tint(.green)
	.buttonStyle(.borderless)
	.frame(maxWidth: .infinity)
						
    }// form
  }
   .navigationBarTitle("Forms")
}

Using a toolbar

A toolbar can be attached to any kind of view builder in swift, e.g to a list

.toolbar has as content ToolbarItem, ToolbarItemGroup

Both ToolbarItem and ToolbarItemGroup takes two parameters: placement and content

a. placement → where to place the items: either in toolbar or navigation bar

1. .navigationBarTrailing

2. .navigationBarLeading

3. .bottomBar

4. .tabBar

5. .automatic

6. .windowToolbar

b. content → the items of the toolbar

1. For one item → ToolbarItem

   .toolbar {			
       ToolbarItem(placement: .navigationBarTrailing) {
   	Button {
   	  print("New button pressed")
   	} label: {
   	  Image(systemName: "plus")
   	}
       } // ToolbarItem
   }//toolbar

   

2. For more than one item → ToolbarItemGroup

   .toolbar {
   	ToolbarItemGroup(placement: .bottomBar) {
   	      // Button one
   	   Button {				
                 print("Home button pressed")
   	   } label: {
   	      Image(systemName: "house")
   	   }
   				
   	   Spacer()
   				
   	     // Button two
   	    Button {
   		print("Camera button pressed")
   		} label: {
   		  Image(systemName: "camera")
   		}
   				
   		Spacer()
   				
   		// Button three
   	     Button {
   		print("Settings button pressed")
   	     } label: {
   		Image(systemName: "gear")
   	     }
   } // ToolbarItemGroup

Changing colors of the toolbar item

1. Using .accentColor [will be deprecated in future version of iOS, Use the asset catalog’s accent Color or ViewTint(_:) instead]

.toolbar {
   ToolbarItem(placement: .navigationBarTrailing) {   				   
     Button {
	print("New button pressed")
     } label: {
	Image(systemName: "plus")
     }//label
   } // ToolbarItem
			
   ToolbarItemGroup(placement: .bottomBar) {
	// Button one
     Button {
	print("Home button pressed")
     } label: {
	Image(systemName: "house")
     }			
     Spacer() 
				
	// Button two
     Button {
	print("Camera button pressed")
     } label: {
	Image(systemName: "camera")
     }
     Spacer()
				
	// Button three
      Button {
	print("Settings button pressed")
      } label: {
	Image(systemName: "gear")
				}
      } // ToolbarItemGroup
}//toolbar
  .accentColor(.red

Visibility of toolbar

[iOS 16]

Button {
   showToolbar.toggle()
} label: {
   Image(systemName: "pencil.tip.crop.circle")
}
 .toolbar(showToolbar ? .visible : .hidden, for: .bottomBar)

When to use a toolbar?

Toolbar v/s tab view

Both a toolbar(placement: .bottomBar) and a tab bar are placed at the bottom of the app screen. Each containing buttons for performing specific actions and are visually similar.

So when to use either?

A toolbar contains buttons for performing actions relevant to the current view or current content within that page.

A tab bar provides the ability to navigate between different sections/pages of an app.

toolbar → perform action

tab bar → navigation

Similarly, firestore can store many collections.

References

A reference can be created for collection as well as document. Creating a reference does not perform any network operation, it only point to a location in the database.

For e.g reference to a collection

let mealCollectionRef = db.collection("Meal")

For e.g reference to a document

let mealOneDocumentRef = db.collection("Meal").document("Meal 1")

Note: A document can have a collection too. For instance, a review needs data from the reviewer and the review itself.

• Meals

  • Meal one

    • title : "Burgers"

    • reviews

      • review one

      from : "alex"

      review : "Good"

      • review two

      from : "tom"

      review : "bad"

  • Meal Two

In the above, we have reviews as a sub-collection of document “Meal one” since reviews contain large number of data.

Referencing a sub-collection

let reviewRef = db.collection("Meals").document("Meal one").collection("reviews").document("review one")

Note: sub-collections need to be deleted manually, even if the parent document and collection are deleted

Create references

Document reference with generated id

var docRef: DocumentReference? = nil

Collection Reference with generated id

var colRef: CollectionReference? = nil

Read Documents

Multiple documents

To fetch multiple documents in a collection, we use getDocuments().

getDocuments() returns documents in querySnapshot as a list.

querySnapshots contain several documents, from which we can extract several or one document.

db.collection("meals").getDocuments() { (querySnapshot, error)  in
	if let error = error {
		print("Error getting documents: \\(error)")
	} else {
		let documents = querySnapshot!.documents
		print("\\(documents)")
	}
}

// OUTPUT
//[<FIRQueryDocumentSnapshot: 0x2822e8140>, 
// <FIRQueryDocumentSnapshot: 0x2822e81e0>, 
// <FIRQueryDocumentSnapshot: 0x2822e8280>, 
// <FIRQueryDocumentSnapshot: 0x2822e8320>, 
// <FIRQueryDocumentSnapshot: 0x2822e83c0>, 
// <FIRQueryDocumentSnapshot: 0x2822e8460>, 
// <FIRQueryDocumentSnapshot: 0x2822e8500>, 
// <FIRQueryDocumentSnapshot: 0x2822e85a0>, 
// <FIRQueryDocumentSnapshot: 0x2822e8640>, 
//<FIRQueryDocumentSnapshot: 0x2822e86e0>]

Single document

To fetch a single document, we loop through the documents obtained from querySnapshots .documents.

db.collection("meals").getDocuments() { (querySnapshot, error) in
	if let error = error { 
		print(" Cannot fetch documents")
	} else {
		for document in querySnapshots!.documents {
		   print("\\(document.data())")
	        }//for
	}//else
}//getDocument

Get data

Fetching data from a single document using .data from document

db.collection("meals").getDocuments() { (querySnapshot, error)  in
   if let error = error {
      print("Error getting documents: \\(error)")
   } else {
        let documents = querySnapshot!.documents
	print("Documents list: \\(documents)")
	for document in documents {
	    print("Data from document: \\(document.data())")
	}
	    print("\\(documents)")
    }//else
}//getDocuments()

	// OUTPUT
//Data from document: ["title": Mac and cheese, "price": 125, "quantity": 4]
//Data from document: ["title": burger, "price": 125.5, "quantity": 2]
//Data from document: ["title": Mac and cheese, "price": 125, "quantity": 4]
//Data from document: ["title": Mac and cheese, "price": 125, "quantity": 4]
//Data from document: ["title": Pasta, "price": 467, "quantity": 6]
//Data from document: ["title": Mac and cheese, "price": 125, "quantity": 4]
//Data from document: ["title": Mac and cheese, "price": 125, "quantity": 4]
//Data from document: ["title": Pizza, "price": 400, "quantity": 2]
//Data from document: ["title": Mac and cheese, "price": 125, "quantity": 4]
//Data from document: ["title": Mac and cheese, "price": 125, "quantity": 4]

Extracting single attributes

db.collection("meals").getDocuments() { (querySnapshot, error)  in
	if let error = error {
	   print("Error getting documents: \\(error)")
	} else {
	  let documents = querySnapshot!.documents
	   //print("Documents list: \\(documents)")
	  for document in documents {
	   //print("Data from document: \\(document.data())")
		let data = document.data()
		let title = data["title"]
		let price = data["price"]
		let quantity = data["quantity"]
		print("title: \\(title ?? "No title")")
		print("price: \\(price ?? "No price")")
	        print("quantity: \\(quantity ?? "No quantity")")	
           }//for			
	 }//else
}//getDocuments

   // OUTPUT
//title: Mac and cheese
//price: 125
//quantity: 4
//title: burger
//price: 125.5
//quantity: 2
//title: Pizza
//price: 400
//quantity: 2

Add data

Adding data with specific document id

let data: [String: Any] = [
		"title": "Grilled lobster",
		"price": 30,
		"quantity": 2,
		"type": "Dinner"
]

func pushData() {
	db.collection("meals").document("five").setData(data) { err in
		if let err = err {
			print("Error writing to document: \\(err)")
		} else {
			print("Data successfully written to doc")
		}//else	
	}//setData
}//Push data

Adding data with auto-generated document id

docRef = db.collection("meals").addDocument(data: data) { err in
	if let err = err {
		print("Error adding document: \\(err)")
	} else {
        	print("Document \\(self.docRef!.documentID) added"). 		      
        }	
}

Adding data from classes/struct

public struct Place: Codable {
	let name: String
	let isCapital: Bool?
	let population: Int?
	
	enum CodingKeys: String, CodingKey {
		case name
		case isCapital = "capital"
		case population
	}//enum
}//struct

// In ObservableObject class
let places = Place(name: "China", isCapital: false, population: 1449323776)
do {
   try db.collection("Places").document("Asia").setData(from: places)		} catch let error {
   print("Error writing ro firestore \\(error)")
}

Note: You may get an error “Extraneous argument label 'from:' in call”. This is because firestore makes use of an extension (FirebaseFirestoreSwift) to be able to save custom objects such as struct.

Fix: import FirebaseFirestoreSwift.

In case this is missing from your imports, just go to Targets → Frameworks, Libraries, and Embedded Content. Click on +, search for the dependency: “FirestoreFirebaseSwift” and click on add

If using pods:

pod 'FirebaseFirestoreSwift'

Updating data

db.collection("Places").document("Asia").updateData(["name": "Australia", "capital":false]) { error in
	if let error = error {
	   print("Error updating document: \\(error)")
	} else {
	   print("Document successfully updated")
	}
}

Update data using a timeStamp

db.collection("Places").document("Asia").updateData(["lastUpdated":FieldValue.serverTimestamp()]) { error in
	if let error = error {
		print("Error updating document: \\(error)")
	} else {
		print("Document successfully updated")
	}
}

Update element in an array

db.collection("Places").document("Asia").updateData(["Ocean": FieldValue.arrayUnion(["Pacific"]) { error in
	if let error = error {
		print("Error updating document: \\(error)")
	} else {
		print("Document successfully updated")
	}
}

Incrementing number value

Passing no argument will increase the value by 1

db.collection("Places").document("Asia").updateData(["population": FieldValue.increment(Int64(10))]) { error in
	if let error = error {
	   print("Error updating document: \\(error)")
	} else {
	   print("Document successfully updated")
	}
}

Note: FieldValue.increment works only on Int64 or Double

Deleting a field

To mark a field for deletion we use updateData

db.collection("Places").document("Asia").updateData(["population": FieldValue.delete()]) { error in
			if let error = error {
				print("Error updating document: \\(error)")
			} else {
				print("Document successfully updated")
			}
		}

Delete a document

db.collection("Places").document("Asia").delete() { err in
    if let err = err {
        print("Error removing document: \\(err)")
    } else {
        print("Document successfully removed!")
    }
}

Example

Step 1: Initialize firestore

import FirebaseCore
import FirebaseFirestore

FirebaseApp.configure()

let db = Firestore.firestore()

Step 2: Create a model

import Foundation

struct Meal: Identifiable {
	var id = UUID()
	var title: String
	var price: Double
	var quantity: Int
	
}

Step 3: Create a view

struct MealView: View {
    @StateObject var viewModel = MealsViewModel()
    var body: some View {
	List(viewModel.meals) { meal in
	   VStack(alignment: .leading) {			     
               Text(meal.title)
		  .font(.headline)
		Text("\\(meal.price)")
		  .font(.subheadline)
		Text("\\(meal.quantity)")
		   .font(.footnote)
	    }//VStack
	 }//List
	.navigationTitle("Meals")
	.onAppear() {
	   self.viewModel.fetchData()
	}
    }//body
}//MealView

Step 4: Create a viewModel

import Foundation
import FirebaseFirestore

class MealsViewModel: ObservableObject {	
  @Published var meals = [Meal]()
  private var db = FirebaseManager.shared.firestore
  private var docRef : DocumentReference? = nil	
	
   func fetchData() {
    db.collection("meals").addSnapshotListener { (querySnapshot, error) in
        guard let documents = querySnapshot?.documents else {
	    print("No documents")
	    return
	}
	self.meals = documents.map {
	   queryDocumentSnapshot -> Meal in
	   let data = queryDocumentSnapshot.data()
	   let title = data["title"] as? String ?? ""
	   let price = data["price"] as? Double ?? 0.0
	   let quantity = data["quantity"] as? Int ?? 0
				
	return Meal(id: .init(), title: title, price: price, quantity: quantity)
	}		
     }
   }// Fetch data
	
   func pushData() {
	docRef = db.collection("meals").addDocument(data: ["title": "Mac and cheese", "price": 125, "quantity": 4]) { err in
	if let err = err {
	   print("Error adding document: \\(err)")
	} else {
	    print("Document \\(self.docRef!.documentID) added")
	}	
     }
   }//Push data
}

The meals variable is wrapped with the @Published property. We use @Published property wrapper for all variable we want our view(UI) to listen to.

To be able to use the @Published property wrapper, the class must conform to the ObservableObject protocol.

Step 1: Create data model

1. Create a data model file that will store our entities and attributes

2. Add entities and attributes. Given e.g below is a boolean value which is not optional and has “No” as the default value.

Step 2: Load model and actual data

1. Create a data controller file of type swift file.

   

2. Create a class DataController of type ObservableObject

3. Initialise a container variable to NSPersistentContainer

NSPersistentContainer is responsible for loading a data model and give us access to entities and attributes.

The NSPersistentContainer take as parameter the data model file created in step 1 rather than the entity file.

import CoreData
import Foundation

class DataController: ObservableObject {
	let container = NSPersistentContainer(name: "MealModel")
}

4. Load the actual data

To have access to the actual data store in the user’s device, we call loadPersistentStore on our container

The loadPersistentStore takes as handler: description and error. This is used to display any kind of error encountered when loading the data.

init() {
  container.loadPersistentStores { description, error in
     if let error = error {
	print("Failed to load data: \(error.localizedDescription)")
     }							   
}

Step 3: Preparation to use in SwiftUI

Apps work with only one core data store at a time. Rather than each view creating their own store, our app creates it once when the app starts, stores it in swiftUI environment and make it accessible everywhere in our app.

We first create an instance of DataController and introduce it into our SwiftUI environment.

In the main file

struct MealCoreData: App  {
// Creating instance
	@StateObject private var dataController = DataController()
    var body: some Scene {
        WindowGroup {
		// Introduction in environment
            ContentView().environment(\.managedObjectContext, dataController.container.viewContext)
				
        }
    }
}

Tip: if using previews, managed object context should be injected into the preview struct for that particular view.

Special Note: Managed Object Context deals with live data. I.e it only exist in Ram as long as the app is running, once the app closes it loses its data. Therefore to store it permanently, it needs to be saved into the persistent store.

Advantage: Using live data is less time consuming and save resources as it foregoes the need of reading from and writing to disk constantly. Instead, it only does it once the data is actually saved.

Step 4: CRUD

Reading from and writing to core data is done through FetchRequest.

FetchRequest takes at least one parameter that describe how we want the data to be sorted.

@FetchRequest(sortDescriptors: []) var meals: FetchedResults<Meal>

That creates a fetch request with no sorting, and places it into a property called meals that has the type FetchedResults<Meal>.

Now meals can be manipulated as a simple swift array.

Let’s create a simple UI for meal, so we can perform CRUD.

struct ContentView: View {
    let title = ["Burger", "Spicy Burger", "Pizza", "Spaghetti", "Chicken BBQ", "Lamb chop", "Chop suey", "Soya beans", "Baked beans", "Plain rice"]

   @FetchRequest(sortDescriptors: []) var meals: FetchedResults<Meal>

    var body: some View {
        VStack {
	   List(meals) { meal in
		Text(meal.title ?? "Unknown")
	   }
	   Button {
	       let chosenMeal = title.randomElement()!		
	   } label: {
		Text("Add Meal")
	   }
	}// VStack
    }
}

As mentioned earlier, Managed Object Context(MOC) is used to save/delete data from store. So, to use MOC we need to declare it:

@Environment(\\.managedObjectContext) var moc

Now let’s try using moc to save the data we declared and selected.

Button {
   let chosenMeal = set.randomElement()
   let meal = Meal(context: moc)
   meal.title = "\\(chosenMeal ?? "Unknown")"
   try? moc.save()
} label: {
   Text("Add Meal")
}

Special Note: Each view using moc need to be added to the environment.

Filtering core data

We have a model entity called Beverage, which have as attributes title and categories both of type String.

Step 1: Create the MOC environment in the view

@Environment(\\.managedObjectContext) var moc

Step 2: Read data from model using fetch request

@FetchRequest(sortDescriptors: [], predicate: nil) var Beverages: FetchedResults<Beverage>

Step 3: Create view to write data and save to MOC

var body: some View {
    VStack {
	List(Beverages, id:\\.self) { beverage in
	  HStack {
		Text(beverage.title ?? "Unknown name")
		  .font(.title3)
		Spacer()
		Text(beverage.categories ?? "Unknown")
		  .font(.body)
		  .foregroundColor(.gray)
					
	  }//HStack
	} //List
	Button("Add Examples") {
	 let beverage1 = Beverage(context: moc)
	     beverage1.title = "Coffee"
	     beverage1.categories = "Hot"
				
	 let beverage2 = Beverage(context: moc)
	     beverage2.title = "Peach QQ"
	     beverage2.categories = "Cold"
				
	 let beverage3 = Beverage(context: moc)
	     beverage3.title = "Sprite"
	     beverage3.categories = "Fizzy"
				
	 let beverage4 = Beverage(context: moc)
	     beverage4.title = "Water"
	     beverage4.categories = "Room temp"
			
            // Save to database	
	 try? moc.save()

	}//Button
  }//Vstack
}//body

Step 4: Learn how to filter data using NSPredicate property wrapper

1. Filter data where categories = cold

@FetchRequest(sortDescriptors: [], predicate: NSPredicate(format: "categories == 'Cold'")) var Beverages: FetchedResults<Beverage>

2. Filtering data where title = pimm’s cup

@FetchRequest(sortDescriptors: [], predicate: NSPredicate(format: "title == 'pimm's'")) var Beverages: FetchedResults<Beverage>

This results in

WHY THIS ERROR?

Because there is an ‘ in the beverage’s name

To be able to parse string data that contain ‘ we do it as follows:

@FetchRequest(sortDescriptors: [], predicate: NSPredicate(format: "title == %@", "Pimm's Cup")) var Beverages: FetchedResults<Beverage>

the ‘%@’ represents → whatever the string inserted here and the string inserted here is written as the second argument of NSPredicate

Price added to attribute so we can provide an example of using comparison operators for sorting

// ... more code here
	beverage1.price = 110			
        beverage2.price = 175
	beverage3.price = 30
	beverage4.price = 20
	beverage5.price = 100
	beverage6.price = 275
	beverage7.price = 275
				
// try? moc.save()				

3. Sorting beverages whose prices are less and equal to 100

@FetchRequest(sortDescriptors: [], predicate: NSPredicate(format: "price <= %@", "100")) var Beverages: FetchedResults<Beverage>

4. Sorting beverages that can be in different categories

 @FetchRequest(sortDescriptors: [], predicate: NSPredicate(format: "categories IN %@", ["Alcohol based", "Cocktail"])) var Beverages: FetchedResults<Beverage>

5. Sorting beverages with title starting with a particular character

• Case sensitive

@FetchRequest(sortDescriptors: [], predicate: NSPredicate(format: "title BEGINSWITH %@", "P")) var Beverages: FetchedResults<Beverage>

• Case insensitive

@FetchRequest(sortDescriptors: [], predicate: NSPredicate(format: "title BEGINSWITH[c] %@", "c")) var Beverages: FetchedResults<Beverage>

6. Sorting by title containing case insensitive character c

@FetchRequest(sortDescriptors: [], predicate: NSPredicate(format: "title CONTAINS[c] %@", "c")) var Beverages: FetchedResults<Beverage>

Filtering a search bar using FetchRequest

struct ViewSix: View {
   @State private var searchText = ""
   @Environment(\\.managedObjectContext) var moc
   @FetchRequest(sortDescriptors: []) var beverages: FetchedResults<Beverage>
	
   var body: some View {
     VStack{
	  List {
	    ForEach(beverages) { beverage in
		Text(beverage.title ?? "" )
	    }
	     .listRowSeparator(.hidden)
	 }
           .listStyle(.plain)
     }//Vstack
	.navigationTitle("Beverages")
	.searchable(text: $searchText)
	.onChange(of: searchText, perform: { searchText in
			
	    if searchText.isEmpty { 
               print("Empty")
	    } else {
	        beverages.nsPredicate = NSPredicate(format: "title     CONTAINS[c] %@", searchText)
	    }//else
	})//OnChange
  }//body
}//ViewSix

Installation of Firebase

• Go to https://firebase.google.com/docs/ios/installation-methods

  • If migrating from a CocoaPods-based project, run pod de-integrate to remove CocoaPods from your Xcode project. The CocoaPods-generated .xcworkspace file can safely be deleted afterward.

    If you're adding Firebase to a project for the first time, this step can be ignored.

• Copy https://github.com/firebase/firebase-ios-sdk.git

• Click on project name in Xcode

• Click on Package Dependencies

• Paste git url and select the appropriate repository

• Select project. And note down the version of firebase

Note: The SPM may take a while to verify the repository

• Check the needed/appropriate boxes

  For this app (chat clone app), the following boxes were selected -> FireBaseAuth, FireBaseStorage and FireBaseFirestore.

• Select add package, the following must be loading and adding to your project

Using Firebase in project

• First create your project in firebase console at console.firebase.google.com

  Firechat is the name of this app demo.

  

• Select iOS on the dashboard

  

• Copy the bundle ID of your project (in Xcode)

  

• Paste the bundle ID in here

  

• Download the config file

  

• Drag the file into the project as shown below

  

• Step 3 can be ignored as we have already added Firebase through SPM

  

• To initialise the firebase SDK inside the project -> create an init() function

  

  Using Firebase Authentication

• Select authentication from build and click on Get Started

• Select the type of how you want the user to be authenticated. In the case of this app demo we will be using email/passwords.

• Click enable for Email/Password

  

• Initialise authentication in your app

  import Firebase
  
  class FirebaseManager: NSObject {
      let auth: Auth
      static let shared = FirebaseManager()
      override init() {
          FirebaseApp.configure()
          self.auth = Auth.auth()    
          super.init()
      }
  }

Writing the above singleton object, allows us to configure and initialise the firebase sdk once. Initialising the firebase more than one time can result in the app crashing, especially when using previews in Xcode.

Also, now we can use authentication throughout our app through this firebase manager class.

For example, to create user we can simply write the following code:

   FirebaseManager.shared.auth.createUser(withEmail: emailAddress, password: password)

The manager class can contain other configurations of firebase such as firestore.

Note: we can also install Firestore in a better way.

Installing firestorm through the SPM makes the project take longer to compile compared to installing the package itself from GitHub which is a precompiled version: https://github.com/invertase/firestore-ios-sdk-frameworks