(翻译) 在iOS上使用架构来设计一个多子商店的电子商务平台

image.png

原创作者：Alan Steiman
原文链接：Designing a multi-store e-commerce using frameworks on iOS

几个月前，我加入了一家时尚零售公司，拥有多家不相关的实体店。 例如，他们的一家商店出售多品牌的高级服装，另一家商店出售珠宝和配饰，豪宅家具和装饰品等。

我加入了一个新成立的团队，是唯一的iOS工程师，主要工作是为所有商店中提供通用技术解决方案，以减少运营成本，缩短上市时间，缩短开发周期。 我被要求为其中一家商店设计和建立一个电子商务（使用Magento GraphQL作为后端），其他人可以轻松地对其进行改编和重用。

我想到了3种可能实现的方案：

1. 每个商店都有一个不同的项目，不去复用任何模块
2. 每个商店都有一个不同的项目，但复用通用的模块/功能（例如，愿望清单，购物车管理员，登录/注册）
3. 有一个通用电子商务项目，每个商店都有一个小框架，只包含相关的代码和配置

成为唯一的iOS工程师的好处是，我可以按照自己认为最好的方式设计架构。 不好的一面是，我没有任何移动工程师同事可以分享我的想法，讨论优缺点，验证我的假设。
我决定选择 选项3，理由是第3个方案是最具扩展性和可维护性的，它提供了一种实用的解决方案，而且只需较少的代码。

也因为分析商店之间的相似性远大于差异。 主要挑战是商店使用不同的后端，因此它们不共享公共网络层。

接下来就是为每个商店使用单独的目标和框架，需要确保以下三点：

1. 业务逻辑封装在框架中
2. 一家商店的变化不会影响其他商店
3. 减少编译时间和应用程序大小，因为只需要将特定商家的相关代码进行编译，捆绑和交付给用户。

最终选定的框架

高层架构图.jpg

这个图定义了3个主要层级（从上往下）：

• 第1层：包含任何电子商务的核心模块/功能的主应用程序。
• 第2层：每个商店特有的框架，定义配置（例如公钥，受支持的语言以及颜色，字体，图标，背景图像），最后封装与后端和支付网关的集成。
• 第3层：定义了主应用程序使用的协议，并由商店(第二层)遵循以提供单向数据流。还定义了要在整个应用中使用的模型，例如应用状态，用户模型等。

主题颜色模块演示教程

• 创建一个新项目 Create a new project > Single View App，命名为DemoFrameworks
• 创建一个新目标：File> New> Target> Framework
• 指定一个名称，在这里为 Shared，确保已嵌入应用程序中：
  
  image.png
  
  
  

重复相同的步骤新建分别名为StoreA 和StoreB 的framework。这三个文件看起来是这样的：

image.png

在Shared 里面添加一个定义 public protocol 的文件：

import UIKit

public protocol ColorPalette {
    func primaryColor() -> UIColor
}

为了在 StoreA 和 StoreB 框架内实现此协议，我们需要添加依赖项。

• 在项目导航器中选择项目
• 在目标列表中选择框架 StoreA
• 在 “General” 选项卡中，点击“Frames and Libraries”中的 + 按钮。
• 添加Shared
• 对StoreB重复步骤

image.png

现在我们可以在StoreA框架中导入Shared并遵守协议 ColorPalette,创建以下文件。

import UIKit
import Shared

public struct StoreAColorPalette: ColorPalette {
    public init() {}
    
    public func primaryColor() -> UIColor {
        return .red
    }
}

接下来在StoreB里面添加这个

import UIKit
import Shared

public struct StoreBColorPalette: ColorPalette {
    public init() {}
    
    public func primaryColor() -> UIColor {
        return .green
    }
}

我们需要的是一种根据不同商店需要使用 StoreA或StoreB，而不是同时使用两者编译应用程序的方法。我们可以通过使用不同的 target 和 scheme来实现。

• 在项目浏览器中选择项目
• 右键单击DemoFrameworks目标中的 duplicate
• 注意，已经创建了一个新的.plist，这将为每个目标提供灵活的不同配置
• 还要注意，已经为此新目标创建了新方案
  重命名目标和方案，如下所示：

image.png	image.png

然后，我们需要确保只有StoreA框架嵌入到 StoreA Target 中，对于StoreB Target 来说也需要确保只嵌入了StoreB。

• 选择 StoreA Target，> General
• 在 Framework, Libraries and Embedded Content，删除StoreB.framework
• 对 StoreB Target 重复上述步骤，从嵌入式列表中删除 StoreA.framework

接下来怎么进行测试呢？

我们可以使用类似于“策略”模式的结构，在运行时根据正在运行的 Scheme 来决定要使用 Shared 中协议的哪种实现。

首先，在主应用中创建此文件：

import UIKit
import Shared
import Combine

class ColorKit: ObservableObject {
    private var palette: ColorPalette
    
    init(palette: ColorPalette) {
        self.palette = palette
    }
    
    func primaryColor() -> UIColor {
        return palette.primaryColor()
    }
}

然后在 SceneDelegate.swift 中，我们将 ColorKit 的实例传递给视图，并基于 Swift Flag 注入正确的主题类型，如下所示：

import UIKit
import SwiftUI
#if STOREA
import StoreA
#endif
#if STOREB
import StoreB
#endif

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?


    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        
        var colorKit: ColorKit!
        #if STOREA
            colorKit = ColorKit(palette: StoreAColorPalette())
        #endif
        #if STOREB
            colorKit = ColorKit(palette: StoreBColorPalette())
        #endif

        let contentView = ContentView()
            .environmentObject(colorKit)

        if let windowScene = scene as? UIWindowScene {
            let window = UIWindow(windowScene: windowScene)
            window.rootViewController = UIHostingController(rootView: contentView)
            self.window = window
            window.makeKeyAndVisible()
        }
    }
}

在 ContentView 中设置文本的颜色：

struct ContentView: View {
    @EnvironmentObject var colorKit: ColorKit
    
    var body: some View {
        Text("Hello, World!")
            .foregroundColor(Color(colorKit.primaryColor()))
    }
}

最后，添加 Swift Flag：

• 在项目操作栏中选择项目
• 选择 StoreA Target，然后选择 Build Settings
• 查找 Other Swift Flags，并添加名称为 STOREA 和前缀-D的新标记：-DSTOREA
• 对StoreB重复相同的操作

StoreA 设置Swift Flags.png

StoreB 设置Swift Flags.png

构建并运行！

• 分别切换target 运行StoreA Scheme 和 StoreB 运行，您应该在相应的颜色下看到下面的结果：

image.png	image.png