(翻译) 在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


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

image.png


Shared 里面添加一个定义 public protocol 的文件:
import UIKit

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


为了在 StoreAStoreB 框架内实现此协议,我们需要添加依赖项。
  • 在项目导航器中选择项目
  • 在目标列表中选择框架 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
    }
}
我们需要的是一种根据不同商店需要使用 StoreAStoreB,而不是同时使用两者编译应用程序的方法。我们可以通过使用不同的 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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,451评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,172评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,782评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,709评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,733评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,578评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,320评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,241评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,686评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,878评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,992评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,715评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,336评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,912评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,040评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,173评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,947评论 2 355