DEV Community

mrcflorian
mrcflorian

Posted on

How to Build an E-commerce App in SwiftUI using Firebase

#swift #swiftui #ios #mobile

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".

File -> New -> Project -> iOS -> App
Enter fullscreen mode Exit fullscreen mode

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.
  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:

pod init
Enter fullscreen mode Exit fullscreen mode

This will create a Podfile. Open it and add:

pod 'Firebase/Auth' pod 'Firebase/Firestore'
Enter fullscreen mode Exit fullscreen mode

Then run:

pod install
Enter fullscreen mode Exit fullscreen mode

Now open the .xcworkspace file.

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

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

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:

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() } } }
Enter fullscreen mode Exit fullscreen mode

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:

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() } }
Enter fullscreen mode Exit fullscreen mode

Then, create a ProductListView to fetch and list products:

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) } ?? [] } } }
Enter fullscreen mode Exit fullscreen mode

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:

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... } }
Enter fullscreen mode Exit fullscreen mode

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

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... } }
Enter fullscreen mode Exit fullscreen mode

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 if you want to launch an e-commerce app much faster!

Good luck and happy coding!

Top comments (1)

Collapse
 
vazzhh profile image
Vazzhh •

me gustaría hacer mi tienda con toda la info de mi woocommerce
que toda la información venga de ahí.
aun no entiendo nada pero creo que esta muy bueno este paso a paso