全栈移动开发实战

通过在 iOS、Android 和 Web 上构建 Flutter 电子商务应用程序，了解状态管理、应用程序架构、导航、测试等更多内容。

教程演示🔗

本教程官网原价149美元

课程大纲

Flutter 入门非常简单。

一旦您了解了最重要的小部件，您就可以开始构建应用程序并添加功能。

但除非您拥有强大的架构，否则您很快就会遇到问题并开始质疑您的决定：

– 这个小部件的功能太多了，但是所有这些逻辑应该去哪里呢？

– 我有错误！我该如何修复它们并防止新的出现？

– 我知道我应该为这段代码编写测试，但我不知道如何编写。帮助！

– 也许我应该删除所有内容并重新开始！但下次我怎样才能做到正确呢？

我知道你的感受。我自己也去过那里。

现在，想象一下…

– 对如何构建代码充满信心

– 知道如何为您能想到的几乎任何情况编写自动化测试

– 拥有可重复的流程来可靠地添加新功能

听起来不错，对吧？

为了帮助您实现这一目标，我将指导您完成在 Flutter 中构建真实电子商务应用程序的过程。我将一直解释我的推理和决策。

您可能会花费数小时或数天的时间试图通过一些随机教程来理解这一切。

或者，您可以使用我通过多年的经验学到的技术和最佳实践来学习，所有这些都被提炼成结构良好的课程，超越了您在 YouTube 或 Udemy 上可以找到的内容。

课程安排：

1. 简介及项目概况 (45分钟)

• 学习内容介绍 (3:14)
• 章节概述 (1:15)
• Flutter开发的VSCode快捷键、扩展和设置 (1:44)
• 加入Slack频道 (0:51)
• GitHub 上的课程项目 (2:01)
• 下载入门项目和 pubspec.yaml 概述 (5:26)
• 电子商务应用概述 (3:38)
• 项目结构和代码演练 (5:46)
• 使用 Widget Inspector (DevTools) 探索代码库 (3:38)
• UI 设计原则：组合和可重用的小部件类 (5:02)
• 用于响应式设计的有用小部件 (8:24)
• 应用程序本地化 (3:45)

2. 使用GoRouter导航 (1小时09分钟)

• 章节介绍 (2:51)
• Navigator 1.0 的局限性 (6:54)
• GoRouter 安装和 MaterialApp.router 的初始设置 (6:27)
• 路线、支线及导航 (7:43)
• GoRouterHelper扩展和pageBuilder (3:54)
• 添加一些额外的路线 (6:18)
• 按路径路由与按名称路由 (4:35)
• 带参数的路由 (6:30)
• GoRouter错误处理 (3:45)
• go 导航与 Push 导航 (6:23)
• 添加剩余路由 (6:13)
• 如何使用GoRouter弹出路由 (4:22)
• 嵌套导航 (1:40)
• 总结+练习

3. Flutter 应用架构 (38分钟)

• 章节介绍 (1:56)
• 流行的应用架构：MVC、MVP、MVVM、Clean Architecture、Bloc (4:15)
• 采用控制器-服务-存储库模式的 Riverpod 应用架构 (6:17)
• 项目结构：功能优先 vs 层优先 (6:23)
• 存储库模式和数据层 (4:23)
• 将“假”产品存储库作为单例实现 (5:34)
• 使用 Future 和基于 Stream 的 API (6:45)
• 总结 (2:27)

4. Riverpod 的状态管理 – 第 1 部分 (1小时)

• 章节介绍 (3:49)
• Riverpod简介 (4:50)
• Riverpod安装和设置 (3:35)
• 创建我们的第一个提供商 (4:25)
• 使用 ConsumerWidget 和 Consumer 读取提供者 (7:11)
• 使用 FutureProvider、StreamProvider 和 AsyncValue (6:34)
• 通过添加延迟来测试 AsyncValue (3:24)
• 家庭修正 (5:41)
• autoDispose 修饰符 + 带有 keepAlive() 和 Timer 的高级数据缓存选项 (9:33)
• 创建可重用的 AsyncValueWidget 帮助器 (8:17)
• 总结+练习 (2:43)

5. 使用 Riverpod 进行状态管理 – 第 2 部分 (1小时 43分钟)

• 章节介绍 (2:25)
• 实现一个伪造的身份验证存储库 (4:36)
• 使用抽象类创建存储库（可选） (3:58)
• 简介：RxDart 的反应式内存存储 (3:13)
• 使用 RxDart 实现 InMemoryStore (5:02)
• 使用FakeAuthRepository中的InMemoryStore (4:53)
• 在 AccountScreen 中使用 ref.read() 访问 FakeAuthRepository (3:54)
• 使用 StateNotifier 创建我们的第一个控制器 (7:46)
• 在 AccountScreen 小部件中使用 StateNotifier (3:48)
• 使用 ref.listen() 监听提供者状态变化 (6:48)
• 修复 Navigator.pop 的错误 (2:37)
• AsyncValue.guard方法 (2:09)
• 添加AsyncValue扩展方法 (3:28)
• 在 HomeAppBar 中使用 authStateChangesProvider (5:29)
• 电子邮件和密码登录屏幕介绍 (4:52)
• 如何在Dart中生成不可变状态类（EmailPasswordSignInState） (3:05)
• 在 EmailPasswordSignInState 中使用 AsyncValue (2:20)
• 实现 EmailPasswordSignInController (6:31)
• 在小部件类中使用 EmailPasswordSignInController (7:26)
• 错误修复+使用 select() 过滤状态更新 (5:48)
• GoRouter重定向
• Certainly, here’s the continuation of the course outline

6. 自动化测试 – 第 1 部分 (1小时39分钟)

• 章节介绍 (1:59)
• 自动化测试和测试金字塔简介 (4:43)
• 自动化测试入门 (2:28)
• 编写第一个单元测试 + 添加 toString() 和相等实现 (4:09)
• 测试匹配器并使用抛出异常的方法 (6:18)
• 修复 getProduct() 方法并更新单元测试 (3:39)
• 与小组合作并测试 Future 和 Streams (4:57)
• 向 FakeProductsRepository 添加可选延迟 (4:14)
• 如何在 VSCode 中生成 Flutter 测试覆盖率报告 (3:41)
• 测试 FakeAuthRepository（第 1 部分） (6:26)
• 测试 FakeAuthRepository（第 2 部分）+ 高级流匹配器 (7:00)
• Mocks vs Fakes + 安装 mocktail 包 (2:45)
• 测试 AccountScreenController（第 1 部分）+ AsyncValue 子类 (4:41)
• 测试 AccountScreenController（第 2 部分）+ 使用模拟 (7:35)
• 测试 AccountScreenController（第 3 部分）+ 类型匹配器 (3:12)
• 使用流匹配器和谓词进行测试 (5:58)
• 测试生命周期方法（setUp、tearDown、setUpAll、tearDownAll） (4:48)
• 使用接受标准测试 EmailPasswordSignInController (7:07)
• 测试 EmailPasswordSignInController（第 2 部分） (6:23)
• 提示：为每个文件设置自定义测试超时 (2:07)
• 添加测试工作流程以使用 GitHub Actions 进行自动化测试 (3:26)
• 总结 (1:18)

7. 自动化测试 – 第 2 部分 (1小时27分钟)

• 章节介绍 (2:42)
• 小部件测试+入门项目简介 (2:27)
• 使用 PumpWidget() 编写我们的第一个小部件测试 (4:09)
• 使用 WidgetTester 和 finder (4:38)
• 机器人测试 (4:54)
• 如何通过按键查找小部件 (3:43)
• 使用模拟和提供者重写编写小部件测试 (7:54)
• 使用 Future.delayed() 和 runAsync() 编写小部件测试 (4:51)
• 添加电子邮件和密码小部件测试 (6:08)
• 添加电子邮件和密码小部件测试（第 2 部分） (4:55)
• 验证流程的测试设置 + 使用 PumpAndSettle() (7:03)
• 修复 RenderFlex 溢出错误 (2:10)
• 完成认证流程测试 (8:42)
• 集成测试 (5:30)
• 黄金形象测试 (7:14)
• 运行不同尺寸的黄金图像测试 (5:43)
• 如何处理 CI 上的 Golden Image 测试失败 (1:42)
• 总结 (2:49)

8. 特色：购物车 (2小时27分钟)

• 章节介绍 (2:29)
• 购物车功能概述+技术要求 (6:29)
• 购物车功能的应用架构 (2:54)
• 起始项目+数据层和领域层概述 (8:47)
• Sembast 本地数据持久化：初始设置 (7:21)
• 如何使用 SembastCartRepository 持久保存购物车数据 (5:26)
• 实现 CartService 类 (7:24)
• 更新 CartService 类以使用 Ref 读取依赖项 (3:32)
• 使用 ProviderContainer 编写单元测试 (4:31)
• 编写 CartService 类的单元测试 (7:41)
• 实现 AddToCartController (9:07)
• 更新 AddToCartWidget (7:42)
• 错误修复：将 autoDispose 添加到 AddToCartController (2:31)
• 在 ShoppingCartScreen 中显示购物车商品 + AutoDispose 与组合提供商时的 AlwaysAlive 错误 (5:59)
• 实现 ShoppingCartItemController (5:18)
• 更新 EditOrRemoveItemWidget 和 ShoppingCartScreen 小部件 (4:38)
• 计算并显示购物车商品数量 (4:06)
• 计算并显示购物车总价 (5:18)
• 限制添加商品到购物车时的可用数量 (6:15)
• 使用监听器实现 CartSyncService (5:36)
• 应用启动时向 ProviderContainer 注册 CartSyncService (3:06)
• 实现 CartSyncService 内部逻辑 (4:35)
• 实现 CartSyncService 内部的逻辑（第 2 部分 – 可选） (5:22)
• CartSyncService 的单元测试 (11:12)
• 使用 ProviderContainer 对具有依赖项的提供程序进行单元测试 (4:04)
• 更新了小部件和集成测试 (3:41)
• 总结+练习（实现愿望清单功能） (1:42)

9. 特点：结账流程 (24分钟)

• 章节介绍 (2:04)
• 结帐流程的启动项目 (3:23)
• 使用PageController初始化逻辑更新CheckoutScreen (6:30)
• CheckoutScreen 是否需要 StateNotifier？ (2:16)

10. 错误处理 (52分钟)

• 章节介绍 (3:09)
• 错误与异常 (1:51)
• 入门项目概述+使用枚举和子类定义自定义异常 (5:14)
• 使用密封类定义异常类型 (2:59)
• 在FakeAuthRepository中使用AppException密封类 (4:12)
• 使用 ProviderObserver 添加 AsyncErrorLogger (7:30)
• 创建一个可重用的 ErrorLogger 来捕获所有异常 (6:22)
• 完善错误处理系统 (8:49)
• 使用结果类型（成功和错误） (8:15)
• Result 类型的缺点（以及何时不使用它） (2:16)
• 总结 (1:20)

11. 专题：产品评论 (54分钟)

• 章节介绍 (2:17)
• 启动项目概述 (7:25)
• LeaveReview 屏幕概述 (3:01)
• 实现 LeaveReviewController 并提交表单数据 (5:21)
• 测试 LeaveReviewForm 并防止出现 AssertionError (5:13)
• 使用回调以编程方式在成功时关闭 LeaveReviewScreen (3:06)
• 如何使用存储库/后端的数据预填写表单 (6:17)
• 优化：数据发生变化才提交表单 (3:08)
• 在 ProductReviewsList 中显示现有评论 (4:38)
• 通过从 userPurchaseProvider 读取读取数据来更新 LeaveReviewAction (5:17)
• 计算平均产品评分 (4:24)
• 更新测试和总结 (3:32)

12. 功能：产品搜索 (23分钟)

• 章节介绍 (2:15)
• 客户端搜索与服务器端搜索 (2:23)
• 向 FakeProductsRepository 添加搜索方法 (3:26)
• 使用 StateProvider 和 FutureProvider 实现客户端搜索 (7:18)
• 使用 autoDispose 和 cacheTime 进行 Riverpod 缓存 (4:19)
• 去抖动和取消网络请求 (3:40)

13. 新的 Riverpod 2.x API 和 Riverpod 生成器 (48分钟)

• Riverpod 2.x 简介 (2:11)
• 启动项目和更新的代码演练 (2:12)
• 安装 Riverpod 生成器包 (2:40)
• 使用 @riverpod 语法生成提供程序 (5:08)
• 将更多提供程序迁移到 Riverpod Generator + keepAlive 语法 (7:44)
• 将 AccountScreenController 从 StateNotifier 迁移到 AsyncNotifier (7:53)
• 将 AccountScreenController 转换为使用 Riverpod Generator (4:17)
• 如何检查 AsyncNotifier 是否已安装 (5:57)
• 如何为 AsyncNotifier 子类编写单元测试 (6:50)
• 总结 (1:05)
• 结论和后续步骤 (1:30)