本系列教程将带你从零开始，基于 AgenUI 开源库完成前后端项目的搭建。第一天我们重点完成三套开发环境的准备工作：Spring Boot 后端服务、HarmonyOS 原生应用，以及 Flutter 跨平台客户端。

---

前置准备

在开始之前，请确保本地已安装以下工具：

项目	推荐工具	用途
后端开发	IntelliJ IDEA	Spring Boot 服务
鸿蒙原生	DevEco Studio	HarmonyOS 应用
跨平台端	Android Studio + Flutter SDK	Flutter 客户端

---

一、后端服务：创建 Spring Boot 项目

1.1 新建项目

打开 IntelliJ IDEA，按以下步骤操作：

1. File → New → Project → 选择 Spring Initializr
2. Type：选择 Gradle - Groovy（Maven 亦可，本教程以 Gradle 为例）
3. Language：Java
4. Spring Boot 版本：选择稳定版（如 3.2.x）

1.2 添加依赖

在依赖选择页面，第一阶段仅需勾选：

• ✅ Spring Web

其余依赖（如 Spring AI Alibaba）将在后续接入 AI 能力时逐步添加，避免项目初期过于臃肿。

1.3 项目结构说明

创建完成后，核心目录结构如下：

agen-ui-server/
├── build.gradle          # Gradle 构建配置
├── settings.gradle
└── src/
    └── main/
        ├── java/         # 业务代码
        └── resources/
            └── application.yml  # 服务端配置文件

---

二、鸿蒙原生端：创建 HarmonyOS 项目

2.1 安装 DevEco Studio

鸿蒙应用开发需使用华为官方 IDE：

• 下载地址：https://developer.huawei.com/consumer/cn/download/
• 安装完成后，需配置 HarmonyOS SDK（首次启动时向导会提示）

2.2 创建项目步骤

1. 打开 DevEco Studio，选择 Create Project
2. 模板选择 Empty Ability（空模板，便于后续自定义）
3. Project Type：Application
4. Language：ArkTS
5. API Level：根据目标设备选择（建议 API 17 及以上）

2.3 关键配置检查

创建完成后，确认以下文件：

• entry/src/main/module.json5 —— 模块配置
• entry/src/main/ets/pages/Index.ets —— 首页入口
• build-profile.json5 —— 编译配置（含签名信息）

---

三、跨平台端：创建 Flutter 项目

3.1 环境安装

Flutter 开发需依次安装：

组件	下载地址	说明
Android Studio	https://android-docs.cn/studio	提供 Android SDK 与模拟器
Flutter SDK	https://docs.flutter.dev/install/quick	跨平台框架本体

3.2 配置 Flutter 插件

在 Android Studio 中：

1. 打开 Settings → Plugins → Marketplace
2. 搜索并安装 Flutter 插件
3. 重启 IDE 后，插件会自动关联已下载的 Flutter SDK

3.3 验证环境

在终端执行：

flutter doctor

确保以下项已打勾：

• Flutter SDK
• Android toolchain
• Android Studio

3.4 创建项目

1. Android Studio 欢迎页 → New Flutter Project
2. 选择 Flutter → 配置 SDK 路径
3. 填写项目名称（如 agen_ui_flutter）、组织域名
4. 平台支持勾选：Android、iOS（后续可按需添加 Web/Desktop）

---

四、今日小结

端	项目名建议	核心完成项
后端	agen-ui-server	Spring Boot 骨架 + Spring Web
鸿蒙原生	agen-ui-harmony	Empty Ability (ArkTS)
Flutter	agen-ui-flutter	跨平台工程初始化

下一步预告（Day 2）：

• 后端：集成 Spring AI Alibaba，配置通义千问 API
• 前端：引入 AgenUI 组件库依赖，搭建基础页面路由
• 建立前后端基础通信层（HTTP / WebSocket）

---

AGenUI代码仓库：https://github.com/AGenUI/AGenUI