如何使用Firebase在Swiftui中构建电子商务应用程序-DEV365 开发者社区

在本教程中，我们将经历使用SwiftUI和Firebase创建一个简单的电子商务应用程序的过程。该应用将支持基本功能，例如产品上市，购物车和用户身份验证。

在开始之前，您应该安装以下内容：

Xcode
firebase SDK
Cocoapods（安装Firebase SDK）

步骤1：设置XCode项目

首先，让我们创建一个新的Xcode项目。在“ ios”下选择“应用”选项。

File -> New -> Project -> iOS -> App

将其命名为“ EcommerCeapp”。确保为界面选择SwiftUi，而Swift作为语言。

步骤2：设置Firebase

转到Firebase console。
单击“添加项目”，然后按照屏幕上的说明创建一个新项目。

准备好项目后，您需要向其添加一个iOS应用程序。

在项目概述页面中，单击iOS图标，将iOS应用添加到您的firebase项目中。
填写在您的Xcode项目设置中找到的iOS捆绑ID。然后，按照下载GoogleService-Info.plist文件的步骤。
将下载的GoogleService-Info.plist文件拖到您的Xcode Project root。

现在，使用Cocoapods安装Firebase SDK。开放终端，导航到您的项目根，然后输入：

pod init

这将创建一个Podfile。打开并添加：

pod 'Firebase/Auth'
pod 'Firebase/Firestore'

然后运行：

pod install

现在打开.xcworkspace文件。

在您的AppDelegate.swift中，导入firebase并在didFinishLaunchingWithOptions中添加FirebaseApp.configure()：

import UIKit
import Firebase

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

步骤3：创建用户身份验证

首先，我们需要创建一个简单的登录视图。在Firebase控制台中，在身份验证部分中启用电子邮件/密码登录方法。

在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()
    }
  }
}

步骤4：产品清单

让我们假设您在Firestore中有一个products Collection，每个文档都有name，price和description字段。

我们将创建一个Product struct和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()
  }
}

然后，创建一个ProductListView来获取和列出产品：

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)
      } ?? []
    }
  }
}

步骤5：购物车

首先，我们创建了一个Cart型号和一个CartView。在CartView中，我们列出了购物车中的所有产品并计算总价：

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

在ProductView中，我们添加了一个“添加到购物车”按钮：

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

在fetchCart()和addToCart(_:)中，您需要实现与Firestore互动的逻辑。该购物车可以是每个用户文档中的一个子收集，CART集合中的每个文档都代表CART产品，带有productId，quantity和addedAt字段。

结论

这是一个简化的示例，但它涵盖了电子商务应用程序的基本功能：用户身份验证，产品清单和购物车。 Swiftui与Firebase结合使用是构建iOS应用程序的强大而有效的方法。您还可以做更多的事情，例如处理订单，用户配置文件，产品搜索等。如果您想更快地启动电子商务应用程序，请查看iOS app templates！

祝你好运和愉快的编码！