Files
VibeCoding_ComposeRemote/AGENTS.md
tongtongstudio 2bb3255704 feat: 集成服务端驱动 UI 演示
新增 Remote Compose 播放端与服务端生成逻辑,支持按页面拉取并渲染二进制 UI 文档。
2026-08-14 10:43:44 +08:00

6.3 KiB
Raw Blame History

AGENTS.md

本仓库是多模块 Monorepo演示 服务端驱动 UIServer-Driven UI:后端用 AndroidX Remote Compose 把 UI 编译成二进制文档Android 端下载后由 RemoteComposePlayer 原生渲染。

仓库结构

VibeCoding_ComposeRemote/
├── ComposeRemoteAndroid/     # 【可改】Android 客户端Kotlin + Jetpack Compose
├── ComposeRemoteServer/      # 【可改】Spring Boot 4 后端(生成 Remote Compose 二进制文档)
├── remotecompose/            # 【只读】GitHub 开源Web 编辑器 + JVM 转换器 + .rc 二进制产物
└── remotecompose-android/    # 【只读】GitHub 开源:纯播放端示例 App

⚠️ remotecompose/remotecompose-android/ 是上游 GitHub 开源项目,禁止修改。 仅可在 ComposeRemoteAndroid/ComposeRemoteServer/ 中编写代码。

架构与数据流

  CREATION SIDE (JVM)                  PLAYBACK SIDE (Android)
 ┌──────────────────────┐  binary      ┌──────────────────────────┐
 │ ComposeRemoteServer  │  .rc bytes   │ ComposeRemoteAndroid     │
 │ RemoteComposeWriter  │ ── HTTP ───▶ │ OkHttp GET → RemoteDoc    │
 │ → byte[] (octet)     │  (GET /card) │ RemoteComposePlayer 渲染  │
 └──────────────────────┘              └──────────────────────────┘
  • 后端只负责「创建」文档;前端只负责「播放」文档,两端都不解析 JSON 布局、不共享创建端源码
  • 通信协议Android 向 GET /api/remote-ui/card 发请求,后端返回 application/octet-stream 的二进制 byte[],前端用 RemoteDocument(bytes) 解码。

1. ComposeRemoteAndroid可改

  • 类型Android ApplicationKotlin + Jetpack Compose声明式 UI
  • 构建GradleAGP 9.2.1Kotlin 2.4.0Compose BOM 2026.02.01)。
  • SDKminSdk 29 / targetSdk 36 / compileSdk 36.1Java 语言级别 11。
  • 关键依赖:
    • androidx.compose.remote:remote-player-core / -compose / -view:1.0.0-alpha17(播放端)
    • com.squareup.okhttp3:okhttp:4.12.0(下载二进制文档)
  • 网络:AndroidManifest.xml 已声明 INTERNET 权限,且 res/xml/network.xml 允许明文流量(cleartextTrafficPermitted=true)。
  • 关键文件:
    • app/src/main/java/com/ttstd/composeremote/MainActivity.kt — 入口,enableEdgeToEdge(),硬编码服务端地址(192.168.1.5:8000)。
    • app/src/main/java/com/ttstd/composeremote/ui/RemoteUIScreen.kt — 拉取二进制 → RemoteDocumentRemoteComposePlayer 渲染;含 loading / error 状态。
    • ui/theme/ — Material 3 主题(默认未启用 ComposeRemoteAndroidTheme)。
  • 构建/运行(在 ComposeRemoteAndroid/ 内):
    • ./gradlew :app:assembleDebug
    • ./gradlew :app:installDebug(需连接模拟器/设备)
  • 约定:
    • 服务端地址改为常量或 BuildConfig/local.properties 注入,勿在 MainActivity 中硬编码内网 IP。
    • 播放端代码不要引入 remote-creation-*(创建端)依赖。

2. ComposeRemoteServer可改

  • 类型Spring Boot 4.1.0 Web MVC 应用Java 17Maven 构建。
  • 关键依赖:
    • spring-boot-starter-webmvcjackson-databindlombokspring-boot-starter-test
    • androidx.compose.remote:remote-creation-jvm:1.0.0-alpha17(服务端生成二进制文档)
    • 仓库配置:maven.google.comRemote Compose artifacts 来自 Google Maven
  • 关键文件:
    • src/main/java/com/ttstd/composeremote/server/controller/RemoteUIController.java
      • GET /api/remote-ui/cardproduces = APPLICATION_OCTET_STREAM,返回二进制 byte[]
      • 内部用 RemoteComposeWriterProfile: DOCUMENT_API_LEVEL / PROFILE1080×1920density 1.0)写 headerstartRoot/column/textComponentencodeToByteArray()
  • 构建/运行(在 ComposeRemoteServer/ 内):
    • ./mvnw spring-boot:run(默认端口 8080 → 需与客户端地址一致,例如 8000
    • ./mvnw clean package
  • 约定:
    • 新增 UI 时复用 buildRemoteDocument() 的 writer/Profile 模式;保持 apiLevel/profiles 与 Android 播放端兼容。
    • 注意 Remote Compose 版本一致性:服务端 remote-creation-jvm1.0.0-alpha17Android remote-player 同为 alpha17;而只读的 remotecompose/server 用的是 alpha05,不要混用。

3. remotecompose只读禁止修改

  • 上游:armcha/remotecompose
  • 内容浏览器拖拽编辑器Vanilla JS、Kotlin/Wasm 预览、server/JVM 转换器,remote-creation alpha05)、若干 .json 布局配置 + 生成的 .rc 二进制文档、index.html 实时预览。
  • 用途:参考其 .rc 文档格式与 JSON→二进制转换逻辑切勿在此目录提交改动

4. remotecompose-android只读禁止修改

  • 上游:armcha/remotecompose-android
  • 内容:纯播放端示例 App从 GitHub 下载 .rc 文件用 RemoteComposePlayer 渲染4 个屏幕 + Compose Navigation
  • 用途:播放端架构/组件封装(如 RemoteDocumentViewRemoteConfigFetcher)的参考实现;切勿修改

版本与依赖关键约束

模块 Remote Compose artifact 版本
ComposeRemoteServer remote-creation-jvm 1.0.0-alpha17
ComposeRemoteAndroid remote-player-* 1.0.0-alpha17
remotecompose/server只读 remote-creation* 1.0.0-alpha05
  • 创建端与播放端必须使用同一 alpha 版本alpha17)以保证二进制兼容;升级时两端同步升级。
  • 所有 Remote Compose 依赖均来自 Google Mavenmaven.google.com)。

通用协作约定

  • 提交前在各自子项目目录内构建通过Android: :app:assembleDebugServer: ./mvnw compile)。
  • 不要触碰 remotecompose/remotecompose-android/
  • 新增「服务端驱动 UI」能力时后端在 RemoteUIController 生成文档,前端在 RemoteUIScreen 消费,保持二进制协议一致。