第 1 课
移动应用开发概述与 AI 增强开发环境
移动应用软件开发实训 · 2026 年秋季学期 · 第 3 周 第 5-8 节
本课口令： ••••••
扫码或访问 mapp-2026f.dev-learn-hub.me/m1 → 输入上方口令 → 在自己设备上同步看幻灯片
下课后教师将关闭本课幻灯片，请当堂记好笔记
← 左右滑动翻页 →
本节课你将完成什么
1看清移动开发的技术版图 — 原生、Web、混合、跨平台四条路线与适用场景
2AI 增强开发环境就位 — Flutter SDK＋平台工具链＋TraeWork，flutter doctor 全绿
3案例复现：HelloWorld — 创建并在 Web 端与 Android 模拟器运行你的第一个 Flutter 应用
4个人仓库与首次提交 — Gitee/GitHub 建仓、规范提交、进度报告一
你手里的资源
实践讲义一《移动应用开发概述与 AI 增强开发环境》
本课随堂操作主线：每一步怎么做、为什么这么做、出错怎么办，全在里面。本页幻灯片只讲做什么，怎么做看讲义。本课幻灯片
扫码进入（口令在投影第一页），下课后关闭，复习请看实践讲义教材与官方文档
《Flutter实战》第二版网页开放版 · Flutter/Dart 官方文档与中文镜像 — 查不认识的 API，先中文镜像后官方文档课程材料包
实践讲义 docx、课堂作业要求 docx、进度报告模板 — 随堂经雨课堂发布（见最后一页说明）本课知识体系
①四条技术路线 — 原生、Web、混合、跨平台的原理与适用场景
▼
②Flutter 跨平台原理 — 自绘 UI、Skia/Impeller、Dart 编译、Widget 树印象
▼
③Flutter 工具链四层 — SDK＋平台工具链＋开发工具＋环境变量 PATH
▼
④AI 使用规范 — TraeWork 辅助安装、AI 三条件、何时必须人工介入
▼
⑤HelloWorld＋Git 规范 — 多端运行、三次提交、远程仓库与 README
主线先搞懂"我用什么技术、为什么"（知识版图＋工具链原理），再动手安装与复现——环境再花哨，看不懂原理就只会点按钮。
① 四条移动开发技术路线
| 路线 | 实现方式 | 代表 | 优点 | 代价 |
|---|---|---|---|---|
| 原生开发 Native | 平台官方语言与工具 | Android：Kotlin/Java＋Android Studio iOS：Swift＋Xcode |
性能最佳、设备能力最全 | 一套代码只能跑一个平台，人力翻倍 |
| Web 应用 Web App | HTML/CSS/JS，通过浏览器访问 | H5、PWA | 零安装、天然跨平台 | 离线能力弱、设备能力受限、体验次于原生 |
| 混合开发 Hybrid | 原生外壳嵌入 WebView 加载网页 | Cordova、Capacitor、小程序 WebView | 一套代码多端发布，开发快 | 性能介于两者之间，WebView 是体验天花板 |
| 跨平台框架 Cross-Platform | 统一语言＋编译各平台原生产物 | Flutter（Dart，本课主线）、React Native（JS/TS） | 一套业务逻辑代码，界面一致性强、性能接近原生 | 底层平台特有能力仍需写插件 |
翻车警告"一套代码多端运行"的完整表述是"一套业务逻辑代码＋少量平台适配"。涉及平台特有 SDK 或底层能力时，插件编写的工作量可能与原生相当——跨平台不是银弹。
① 三个问题，选对路线
当你要做一款移动应用时，先回答这三个问题：
Q1目标平台数量 — 只发 Android → 原生足够；Android＋iOS＋Web＋Windows → 跨平台收益大
Q2性能与设备能力要求 — 重图形、重传感器、低延迟 → 倾向原生；常规界面、列表、表单 → 跨平台够用
Q3团队技术栈 — 前端背景 → Flutter/React Native 上手快；Android/iOS 原生工程师团队 → 继续原生最顺
本课结论本课面向12 周实训、两平行班零基础学生，要求 Web 端＋Android 真机/Windows 桌面端双形态必达 → Flutter 跨平台框架是投入产出比最优解。
② Flutter 如何做到跨平台
自绘 UI，不靠系统控件
应用界面不由 Android/iOS/Windows 的原生控件拼装，而是由 Flutter 内置的 Skia / Impeller 渲染引擎直接绘制像素。
→ Android、iOS、Web、Windows 上看到的是同一套渲染结果，界面一致性极强。
Dart 编译为原生
开发语言是 Dart：
- Android/iOS/Windows → AOT 编译为各平台原生机器码
- Web → 编译为 JavaScript
→ 性能接近原生。
一句话印象：一切界面元素都是 Widget
Widget 树是 Flutter 描述界面的方式。按钮是 Widget、文本是 Widget、布局容器也是 Widget——甚至整个应用本身就是一个 Widget。
这是第 5 课（Flutter 工程结构与 Widget 体系）的主线，本课只要建立印象：写 Flutter = 写 Widget 树。
② 本课程的双技术线说明
Flutter 线（胡矿老师班）
语言：Dart
本课 12 次课全部基于 Dart＋Flutter
所有讲义、题库、作业、统一数据集、案例代码均走本线
——你的班级即本线，后续材料全部按此使用
React Native 线（王丽清老师班）
语言：JavaScript / TypeScript
平行班同学按对应讲义执行
两条线共用：统一的课程目标、考核环节与评定规则
—— 作业次数与核算口径完全一致，确保两条线公平对齐
材料地图课件导览与十二次课详细教案里有两条技术线对应内容清单；本幻灯片站只承载 Flutter 线内容。
③ Flutter 工具链四层结构
一套完整的 Flutter 开发环境，分层理解就不会乱：
① Flutter SDK
框架源码＋命令行工具
＋内置 Dart SDK（核心本体）
＋内置 Dart SDK（核心本体）
↓ 依赖
② 平台工具链
Android Studio（含 Android SDK/AVD）
Visual Studio（C++桌面开发）
Chrome/Edge（Web 端）
Visual Studio（C++桌面开发）
Chrome/Edge（Web 端）
↓ 依赖
③ 开发工具
TraeCode / VS Code / Android Studio
任选其一
任选其一
↓ 生效
④ 环境变量
Flutter SDK 的 bin 目录
加入系统 PATH
加入系统 PATH
④ → ③ → ② → ① 层层生效；缺少任何一层，flutter doctor 都会有红色警告
记忆法SDK 是本体、平台工具链是靶场、开发工具是操作台、PATH 是高速公路入口。理解四层，安装报错一看就知道哪层缺了。
③ flutter doctor：你的环境体检单
执行 flutter doctor 后会得到这样一张逐项检查报告：
text
[✓] Flutter (Channel stable, version …)
[✓] Android toolchain - develop for Android devices
[✓] Chrome - develop for the web
[✓] Visual Studio - develop for Windows
[!] Android Studio (not installed) ← 有警告
[✗] Connected device ← 有问题（没有设备在线）三种状态符号
[✓]全绿 — 该项就绪[!]有警告 — 能用但有建议项[✗]有问题 — 该项不可用
医生只开报告，不开药
每项后面附带的提示就是修复线索：
- Android toolchain 后提示 → 执行
flutter doctor --android-licenses全部同意 - Visual Studio 后提示 → 启动安装器勾选"使用 C++ 的桌面开发"工作负载
全绿（或除不用的平台外全绿）= 环境就绪
翻车警告PATH 改完必须重开终端才生效，"flutter 命令找不到"九成是这个原因。解压路径含中文或空格会在后续构建产生诡异报错，宁可重装也不要带病运行。
④ AI 使用规范：三个条件 + 红线
本课从第一天就鼓励使用 AI 编程工具，但必须规范使用：
1标注 — 进度报告中必须写明：哪部分由 AI 辅助、用了什么提示词、输出是什么
2验证 — AI 生成的每一行代码，你必须能解释它的作用。检查点环节教师将随机抽查口头解释
3负责 — AI 写错了，责任在你的提交结果里，不能用"是 AI 写的"作为辩解
红线（学术诚信）
未标注的 AI 生成内容视同未完成。
伪造运行证据（截图造假、借他人设备截图冒充）一经发现： 结果拒收 + 按学校规定处理。
红线内的事情，哪怕 AI 告诉你可以"快一点"，也绝对不要碰。
何时必须由你本人人工介入
- 涉及系统级配置修改（环境变量、安装器、注册表）
- 文件删除、账号密码、密钥输入
- flutter doctor 的判断结果需要你核对并截图留证
- Git 提交必须在你自己的账号下完成，署名与邮箱是你本人
→ 这些场景下，AI 只能给方案与步骤，执行和确认由你本人完成。
⑤ HelloWorld 案例复现总览
本课案例 = 创建第一个 Flutter 应用，三步对应三次提交：
步骤一创建项目 — `flutter create hello_world` · 找到入口 `runApp(const MyApp())` · 首次提交
步骤二多端运行 — Web 端（Chrome）＋ Android 模拟器两端截图 · 第二次提交（截图入 `docs/`）
步骤三远程仓库与 README — Gitee/GitHub 建仓＋推送 · README 写项目名＋运行方法＋截图 · 第三次提交
可全程使用 TraeWork环境安装、命令提示、报错解读都可以交给 TraeWork 辅助。关键：每一步的终端输出（尤其是报错）原样贴回，它才能给你准确的修复建议。
⑤ 步骤一：创建项目
在 TraeWork 终端（或命令行）执行：
bash
flutter create hello_world
cd hello_worldcreate 命令为你生成了什么
| 路径 | 作用 |
|---|---|
lib/main.dart |
应用入口（本课要精读的文件） |
pubspec.yaml |
依赖与资源声明 |
android/ ios/ |
各平台原生工程 |
web/ windows/ |
Web 与 Windows 平台工程 |
test/ |
测试代码 |
找到 lib/main.dart 中的这一行：
dart
runApp(const MyApp()); // 应用起点：把根组件 MyApp 挂载到屏幕上提交一
`git init → git add -A → git commit -m "feat: flutter create hello_world"`
操作前先 git config --global user.name/user.email 配好署名（讲义附录有完整命令）
翻车警告
项目名只能用小写字母与下划线。
直接叫 Hello World 会报错——这背后是各平台包名的命名规范约束。
⑤ 步骤二：多端运行
Web 端（必达）
bash
flutter run -d chrome浏览器自动打开，看到计数器示例即成功。
Android 模拟器（必达之一）
- Android Studio → Device Manager → 创建一台模拟器并启动
flutter devices查看设备 IDflutter run -d <模拟器ID>
命令行交互模式
运行后进入热模式终端：
- r 键：热重载（保留状态，刷新界面）
- R 键：热重启（清空状态，从头跑）
- q 键：退出
验收留证
两端分别截图：Web 一张 + 模拟器一张。
放入仓库 docs/ 目录，这是"多端运行"验收项的留证依据。
故意实验
临时把 `home:` 后的组件改成一个不存在的名字 → 按 r → 观察热重载报什么错。
感受"改代码立即看反馈"的节奏与报错真实形态 → 改回再继续。
遇到报错别慌，问 TraeWork 它的含义是什么。
提交二： git commit -am "feat: run on web and emulator with screenshots"
⑤ 步骤三：远程仓库与 README
建仓与推送（Gitee 国内更快，GitHub 任选其一）
- Gitee/GitHub 网页：创建空仓库
hello_world（不勾 README） - 回到本地终端：
bash
git remote add origin https://gitee.com/<你的用户名>/hello_world.git
git push -u origin masterREADME.md 至少包含三件事
- 项目名（一句话介绍这是什么）
- 运行方法（flutter create + flutter run -d chrome）
- 两端运行截图（Web 截图＋模拟器截图）
提交三： git commit -am "docs: README with screenshots" → git push
检查点（教师逐项验收）
- [ ] flutter doctor 全绿截图
- [ ] Web 端运行截图
- [ ] Android 模拟器运行截图
- [ ] 仓库地址可访问且含 3 次以上提交
- [ ] 口头解释
runApp与Widget两个概念
课堂作业总览
案例复现HelloWorld 三步三次提交 · 多端运行 · 教师验收检查点全过
自主实践基本要求安装过程记录 · flutter doctor 问题修复 · 手工安装原理说明 · main.dart 逐行注释 · AI 使用边界说明
独立研究任务三项研究：flutter config与国内镜像 / TraeCode vs TraeWork 差异实测 / 模拟器vs真机性能对比
另配套雨课堂题库一（50 题：基础概念＋语法与 API＋代码阅读＋错误定位＋选型与规范），具体发布安排课上说明。
自主实践基本要求（5 项，独立完成）
| 序 | 任务 | 要点提示 |
|---|---|---|
| 1 | TraeWork 辅助安装过程记录 | 指令、结果、验证三要素缺一不可，截图附证据 |
| 2 | flutter doctor 问题定位与修复 | 至少记录 1 个真实问题：现象→排查过程→解决方案→最终全绿截图 |
| 3 | 手工安装原理说明 | SDK 四层是什么、平台工具链怎么装、PATH 为什么重要、改完为什么要重开终端 |
| 4 | HelloWorld 代码 lib/main.dart 逐行中文注释 |
类、方法、Widget 构造参数全部注释，解释每一段代码在做什么 |
| 5 | AI 使用边界说明 | 结合你自己的使用，举例说明"什么场景 AI 可以帮我、什么场景必须我本人动手" |
独立完成
AI 辅助是被鼓励的，但必须：标注、验证、负责。
未标注的 AI 生成内容视同未完成。
进度报告
以上 5 项结果全部写入《进度报告一》（模板随堂发布），这是"自主实践"的提交物。
独立研究任务（给想冲高阶的同学）
以手工编程与官方文档检索为主，报告中写明探索过程与结论，不使用 AI 直接生成结论。
研究一flutter config 与国内镜像机制实验 — PUB_HOSTED_URL、FLUTTER_STORAGE_BASE_URL 对 pub get 的实际效果；研究切换镜像后的网络表现与命令结果
研究二TraeCode vs TraeWork 能力差异实测 — 同为 TRAE 品牌的 AI 工作台与 IDE，分别做同一件任务（如安装报错修复），记录两者交互方式、输出质量、适用场景的差异
研究三模拟器 vs 真机性能对比 — 如有 Android 真机，在两端同时运行相同 demo（如动画列表），对比帧率、启动耗时、内存占用；记录对比方法和结果
课堂不讲授这三项研究不占用讲课时段，想挑战的同学课下完成。结果写入进度报告，课上可能抽你汇报思路。
今天的节奏（4 节连堂）
第 1 节讲解与演示 — 教师带过四条技术路线、Flutter 原理、工具链结构、AI 规范；现场演示 flutter create 与多端运行
第 2 节动手：环境安装至全绿 — TraeWork 辅助安装，flutter doctor 逐项修复到全绿；慢的同学跨节继续，教师巡场答疑
第 3 节动手：HelloWorld 案例复现 — 三步三次提交＋多端截图；快的同学开始自主实践基本要求 + 独立研究
第 4 节收尾 — 进度报告一启动填写 + 仓库地址与截图检查 + 提交物说明（方式课上说明）
求助阶梯卡住时：对应讲义章节 → TraeWork 把报错贴给它 → Flutter/Trae 官方文档 → 举手（按此顺序，前三步能解决 90% 的问题）
资源与获取方式
实践讲义一 · docx
随堂操作主线 + flutter doctor 常见报错表 + TraeWork 辅助安装标准流程随堂经雨课堂发布（教师课件区），下课后可回看下载
课堂作业一 · 作业要求 docx
作业组成说明 + 自主实践 5 项要点 + 独立研究任务 3 项随堂经雨课堂发布
进度报告一 · 模板 docx
十节式进度报告模板（本课提交物骨架）随堂经雨课堂发布
课程案例代码仓库
11 个课堂案例完整代码（按课次组织 git 历史）github.com/thiswind/flutter-practice-cases
git clone 或下载 ZIP；本课只需浏览，不要求下载
本课幻灯片
mapp-2026f.dev-learn-hub.me/m1 · 口令随堂公布下课后幻灯片关闭，复习请看实践讲义（内容更全、含操作细节）
现在，打开你的电脑
① 先让环境全绿 — TraeWork 辅助安装，flutter doctor 一步步修到全绿
② 案例复现 — HelloWorld · 三步三次提交 · 两端截图
③ 自主实践 — 5 项基本要求 · 快的同学冲 3 项独立研究
三节课是你的对应讲义章节 → TraeWork → 官方文档 → 举手。下课前启动《进度报告一》，提交物说明课上口头安排