(翻译) 在iOS上使用架构来设计一个多子商店的电子商务平台
2020-05-30 本文已影响0人
Grabin
image.png
原创作者：Alan Steiman
原文链接：Designing a multi-store e-commerce using frameworks on iOS
几个月前，我加入了一家时尚零售公司，拥有多家不相关的实体店。 例如，他们的一家商店出售多品牌的高级服装，另一家商店出售珠宝和配饰，豪宅家具和装饰品等。
我加入了一个新成立的团队，是唯一的iOS工程师，主要工作是为所有商店中提供通用技术解决方案，以减少运营成本，缩短上市时间，缩短开发周期。 我被要求为其中一家商店设计和建立一个电子商务（使用Magento GraphQL作为后端），其他人可以轻松地对其进行改编和重用。
我想到了3种可能实现的方案：
- 每个商店都有一个不同的项目，不去复用任何模块
- 每个商店都有一个不同的项目，但复用通用的模块/功能（例如，愿望清单，购物车管理员，登录/注册）
- 有一个通用电子商务项目，每个商店都有一个小框架，只包含相关的代码和配置
成为唯一的iOS工程师的好处是，我可以按照自己认为最好的方式设计架构。 不好的一面是，我没有任何移动工程师同事可以分享我的想法，讨论优缺点，验证我的假设。
我决定选择 选项3，理由是第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
|
|---|
