How to Build an E-commerce App in SwiftUI using Firebase
Tags: swift, swiftui, ios, mobile
Published: 2023-07-21 04:27:57

---
title: How to Build an E-commerce App in SwiftUI using Firebase
published: true
description: 
tags: swift, swiftui, ios, mobile
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-07-21 04:27 +0000
---

In this tutorial, we will go through the process of creating a simple e-commerce app using SwiftUI and Firebase. The app will support essential functionalities such as product listing, shopping cart, and user authentication.

Before we start, you should have the following installed:

- Xcode
- Firebase SDK
- CocoaPods (to install Firebase SDK)

## Step 1: Setting up the Xcode Project

First, let's create a new Xcode project. Select the "App" option under "iOS".

```bash
File -> New -> Project -> iOS -> App
```

Name it "EcommerceApp". Make sure to choose SwiftUI for the interface and Swift for the language.

## Step 2: Setting up Firebase

1. Go to the [Firebase console](https://console.firebase.google.com/).
2. Click "Add project", then follow the on-screen instructions to create a new project.

After your project is ready, you will need to add an iOS app to it.

1. In the Project Overview page, click the iOS icon to add an iOS app to your Firebase project.
2. Fill in the iOS bundle ID which is found in your Xcode project settings. Then, follow the steps to download the `GoogleService-Info.plist` file.
3. Drag the downloaded `GoogleService-Info.plist` file into your Xcode project root.

Now, install Firebase SDK using CocoaPods. Open Terminal, navigate to your project root, and type:

```bash
pod init
```

This will create a `Podfile`. Open it and add:

```bash
pod 'Firebase/Auth'
pod 'Firebase/Firestore'
```

Then run:

```bash
pod install
```

Now open the `.xcworkspace` file.

In your `AppDelegate.swift`, import Firebase and add `FirebaseApp.configure()` in `didFinishLaunchingWithOptions`:

```swift
import UIKit
import Firebase

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    FirebaseApp.configure()
    return true
  }
  // ...
}
```

## Step 3: Creating User Authentication

First, we need to create a simple login view. In Firebase Console, enable Email/Password sign-in method in the Authentication section.

In `ContentView.swift`:

```swift
import SwiftUI
import FirebaseAuth

struct ContentView: View {
  @State private var email = ""
  @State private var password = ""
  
  var body: some View {
    VStack {
      TextField("Email", text: $email)
        .padding()
        .autocapitalization(.none)
      SecureField("Password", text: $password)
        .padding()
      Button(action: {
        Auth.auth().signIn(withEmail: email, password: password) { authResult, error in
          if let error = error {
            print(error.localizedDescription)
          }
        }
      }) {
        Text("Login")
      }
      .padding()
    }
  }
}
```

## Step 4: Product Listing

Let's assume you have a `products` collection in Firestore, each document has `name`, `price` and `description` fields.

We will create a `Product` struct and a `ProductView`:

```swift
struct Product: Identifiable {
  var id: String
  var name: String
  var price: Double
  var description: String
}

struct ProductView: View {
  var product: Product
  
  var body: some View {
    VStack(alignment: .leading) {
      Text(product.name)
        .font(.headline)
      Text(product.description)
        .font(.subheadline)
      Text("$\(product.price)")
        .font(.title)
    }
    .padding()
  }
}
```

Then, create a `ProductListView` to fetch and list products:

```swift
import FirebaseFirestore

struct ProductListView: View {
  @State private var products = [Product]()
  
  var body: some View {
    List(products) { product in
      ProductView(product: product)
    }
    .onAppear() {
      fetchProducts()
    }
  }
  
  func fetchProducts() {
    Firestore.firestore().collection("products").getDocuments() { querySnapshot, error in
      if let error = error {
        print(error.localizedDescription)
        return
      }
      
      self.products = querySnapshot?.documents.compactMap { document -> Product? in
        let data = document.data()
        
        guard let name = data["name"] as? String,
              let price = data["price"] as? Double,
              let description = data["description"] as? String
        else {
          return nil
        }
        
        return Product(id: document.documentID, name: name, price: price, description: description)
      } ?? []
    }
  }
}
```

## Step 5: Shopping Cart

First, we create a `Cart` model and a `CartView`. In `CartView`, we list all products in the cart and calculate the total price:

```swift
struct CartProduct: Identifiable {
  var id: String
  var product: Product
  var quantity: Int
}

struct CartView: View {
  @State private var cartProducts = [CartProduct]()
  
  var body: some View {
    VStack {
      List(cartProducts) { cartProduct in
        HStack {
          Text(cartProduct.product.name)
          Spacer()
          Text("x\(cartProduct.quantity)")
          Text("$\(cartProduct.product.price * Double(cartProduct.quantity))")
        }
        .padding()
      }
      
      Text("Total: $\(cartProducts.reduce(0) { $0 + $1.product.price * Double($1.quantity) })")
        .font(.headline)
        .padding()
    }
  }
  
  func fetchCart() {
    // fetch cart products from Firestore...
  }
}
```

In the `ProductView`, we add an "Add to Cart" button:

```swift
struct ProductView: View {
  var product: Product
  
  var body: some View {
    VStack(alignment: .leading) {
      Text(product.name)
        .font(.headline)
      Text(product.description)
        .font(.subheadline)
      Text("$\(product.price)")
        .font(.title)
      Button(action: {
        addToCart(product)
      }) {
        Text("Add to Cart")
      }
    }
    .padding()
  }
  
  func addToCart(_ product: Product) {
    // add product to cart in Firestore...
  }
}
```

In both `fetchCart()` and `addToCart(_:)`, you need to implement the logic to interact with Firestore. The cart could be a subcollection in each user document, each document in the cart collection represents a cart product, with `productId`, `quantity`, and `addedAt` fields.

## Conclusion

This is a simplified example, but it covers the essential features of an e-commerce app: user authentication, product listing, and a shopping cart. SwiftUI combined with Firebase is a powerful and efficient way to build an iOS app. There's still a lot more you can do, like handling orders, user profiles, product search, and so on. Check out [iOS app templates](https://iosapptemplates.com/) if you want to launch an e-commerce app much faster!

Good luck and happy coding!