单词卡片安卓开发

项目简介

本项目将从零开始，完整地记录一款 “安卓单词卡片 App” 的开发全过程。

• 单词卡片生成：用户输入一个中英文单词，应用即可智能生成一张包含单词、翻译、例句和配图的精美卡片
• 卡片管理：用户可以保存自己喜欢的单词卡片，并随时在本地进行浏览和管理

1. 卡片生成：在主界面输入单词（如“苹果”），即可生成包含精美图片、翻译和双语例句的单词卡片。

2. 卡片列表：“我的卡片”页面会以瀑布流的形式，展示所有已保存的单词卡片，方便用户随时回顾

3. 卡片详情：点击列表中的任意卡片，即可进入全屏预览模式，更清晰地查看卡片内容

4. 卡片删除：长按某张卡片，会弹出二次确认对话框，用户可以方便地管理和删除不再需要的卡片

搭建单词卡片工作流

选择 Coze 工作流来搭建单词卡片应用有以下原因：

1. 简单易用：Coze 提供可视化界面，拖拽即可创建流程
2. 强大功能：内置多种节点类型，支持文本处理和图像生成
3. API 调用：可以将工作流发布为 API，方便在应用中调用
4. 无需编程：不需要编写代码，就能创建复杂应用

创建新工作流

代开 Coze 资源库，点击 + 资源 按钮创建工作流。弹出 “创建工作流” 的对话框：

• 工作流名称：wordcard
• 描述信息：创建单词卡片

需要根据需求，在开始节点和结束节点之间添加其他节点。单词卡片工作流包含以下节点：

• 开始节点：工作流入口，接收用户输入的单词
• 大模型节点：根据单词生成翻译、例句和图片提示词
• 图像生成节点：根据图片提示词生成图片
• cutout 节点：抠图，保留图片前景主体
• 画板节点：将单词、翻译、例句和图片组合成单词卡片
• 结束节点：返回最终结果

开始节点

设置输入参数，注意输入参数必须包含字母、数字或下划线，并且以字母或下划线开头：

• word：用户输入的单词（必填）

大模型节点

添加一个大模型节点，用于生成单词的详细信息。

• 模型选择：选择一个合适的大模型，这里就用默认的豆包大模型
• 输入：输入需要处理的单词，这里引用的是开始节点的 word 参数
• 用户提示词：直接传入 {{word}} 即可
• 输出：设置希望大模型返回的变量，包括 word（单词）、translation（翻译）、image_prompt（图片生成提示词）和 examples（包含 en 和 zh 的对象）

注意：大模型节点的系统提示词（System Prompt）可以进一步优化，以获得更稳定和高质量的输出

根据输入内容（可能是英文单词、英文短语或中文词语），生成一个包含以下字段的结构化数据：

{
  "word": string,
  "translation": string,
  "examples": {
    "en": string,
    "zh": string
  },
  "image_prompt": string
}

规则说明：
1. 当输入是英文单词或短语时，提供对应中文释义及中英文示例；
   当输入是中文词语时，先推断对应英文，再生成示例与英文图像提示。
2. 示例句应自然、语法正确，突出该词最常用含义。
3. image_prompt 生成规则：
   - 若该词表示可直接可视化的具体事物（如水果、动物、食物、工具等），
     仅描述该物体本身，不包含容器、背景、人物、反光、水、装饰、附加元素。
     示例：
       输入 “apple” → "A single red apple, isolated, plain white background, soft shadow, minimal style, no container"
       输入 “banana” → "A single yellow banana, isolated, plain white background, soft shadow, minimal style"
   - 若该词为抽象概念或动词（如 love, run, happiness），
     则生成一句简短的场景提示，体现其含义，但仍保持简洁。
   - 禁止出现人物、人形、容器、液体、反射、复杂背景、艺术构图或混合物体。

4. 所有字段必须存在并可被 JSON.parse() 正常解析。
5. 若输入为空或无效，输出：
   {
     "word": "",
     "translation": "",
     "examples": { "en": "", "zh": "" },
     "image_prompt": "invalid input"
   }

图像生成节点

添加一个图像生成节点，用于生成图片

• 模型：通用-Pro

• 输入: 引用大模型节点输出的 image_prompt 变量
• 提示词: 将输入的 image_prompt 变量填入正向提示词中。这里还可以再对提示词做限定或优化

提取图像节点

添加 cutout 节点，用于抠图，使图片背景透明

上传图片: 引用图像生成节点输出的 data 变量

画板节点

添加一个画板节点，用于将所有元素组合成最终的单词卡片图片

• 元素设置: 添加文本和图片元素，并将它们与前面节点的输出变量进行关联。
  • 图片元素关联 cutout 节点的 data
  • 单词文本关联大模型节点的 word
  • 翻译文本关联大模型节点的 translation
  • 英文例句关联大模型节点的 examples.en
  • 中文例句关联大模型节点的 examples.zh
• 画板编辑: 在画板中调整各个元素的大小、位置和样式

结束节点

结束节点是工作流的出口，返回画板节点生成的图片 card_image_url 和大模型节点返回的单词 word

工作流发布

按照逻辑将各节点连接起来，形成完整的工作流，如下所示：

1. 开始节点 → 大模型节点
2. 大模型节点 → 图像生成节点
3. 大模型节点 → 画板节点 (提供文本信息)
4. 图像生成节点 → cutout 节点
5. cutout 节点 → 画板节点 (提供图片信息)
6. 画板节点 → 结束节点

点击底部的 “试运行” 按钮，输入单词： “香蕉”。点击右侧弹窗中的 “运行” 按钮。

发布工作流：

1. 点击右上角的 “发布” 按钮
2. 设置版本号和描述信息
3. 点击发布即可

准备 API 调用信息

准备 API 调用信息：

• 工作流 ID：7601394747802746907
• API 密钥
• API 接口地址：https://api.coze.cn/v1/workflow/run

点击 API管理 进入到页面后，点击 “授权” 按钮，切换到 “个人访问令牌” 标签页，点击 “添加新令牌” 按钮，即可创建 API 密钥。输入：

• 令牌名称
• 令牌过期时间
• 令牌权限：选择 “工作流” 权限

点击 “API 管理” 按钮，在随后打开的页面中选择 “工作流” -> “执行工作流”，输入工作流 ID 、API 密钥、调用参数，点击右侧的 “运行” 按钮，即可测试工作流 API 接口

Android 开发环境搭建

搭建安卓开发环境对于新手来说可能有些复杂。如果不熟悉安卓开发环境的搭建，可以向 Trae 寻求帮助

我要做一个安卓项目，但我是安卓小白，开始之前我需要安装哪些环境，我的电脑是 Mac

安装 JDK

Android 应用程序主要是用 Java 或 Kotlin 语言编写的。这两种语言都运行在 Java 虚拟机 (JVM) 之上。

打开 JDK 下载官网：Azul Zulu OpenJDK。根据操作系统、版本和架构筛选要下载的 JDK。下载完成后，双击安装包进行安装。这个过程非常简单，只需按照提示一步步操作即可

java -version

安装 Android Studio

Android Studio 是 Google 官方推出的、专门用于 Android 应用开发的集成开发环境 (IDE)。它提供一整套开发、调试、测试和打包应用的工具。这包括强大的代码编辑器、图形化的界面设计工具、性能分析器、灵活的构建系统以及一个可以模拟各种 Android 设备的模拟器。使用 Android Studio 可以极大地简化开发流程，提高开发效率

打开 Android Studio 官网，下载并安装 Android Studio：

安装过程同样很简单。安装完成后启动 Android Studio，会看到欢迎界面

点击 Next 继续。接下来需要选择安装类型。选择默认的 Standard 即可

• Standard (标准): 会安装最常用和推荐的设置与组件。它会自动下载最新的 Android SDK、构建工具和一个基础的模拟器系统镜像，是大多数用户的最佳选择
• Custom (自定义): 此选项允许你对安装过程进行更多控制。你可以选择要安装或忽略的特定组件，指定 Android SDK 的安装位置等。这对于有特定需求的资深开发者非常有用

点击 Next 会看到一个设置确认页面，列出将要下载和安装的所有组件。等待所有组件下载和安装完成。完成后再次打开 Android Studio，就可以创建新项目或打开现有项目

创建新项目

在 Android Studio 的欢迎界面点击 New Project，创建第一个 Android 项目。

创建项目信息：

Android Studio 会根据配置初始化项目。这个过程可能需要一些时间，因为它需要下载 Gradle 依赖并构建项目结构。完成后将看到项目的完整目录结构

创建安卓模拟器

要在电脑上运行并测试 Android 应用，需要一个安卓设备。可以使用 Android Studio 内置的模拟器（Virtual Device）。

虽然 Android Studio 通常会自带一个默认的模拟器，但这里介绍下创建自定义的模拟器。通过顶部菜单栏的 Tools > Device Manager 或者工具栏上的设备图标来打开设备管理器

点击 Create Virtual Device。这里需要选择一个硬件配置文件。左侧的 Form Factor 可以筛选设备类型，例如手机、平板或电视。右侧列表中展示各种预设的设备型号，选择一个合适的手机型号，然后点击 Next。

接下来是选择系统镜像。这里列出了不同 Android 版本（API Level）的系统镜像。需要为虚拟设备选择一个系统版本。如果某个版本旁边有下载图标，表示你需要先下载该镜像才能使用。

最后可以为这个模拟器命名并进行一些高级设置，然后点击 Finish 完成创建。创建成功后就可以在设备管理器列表中看到新模拟器

运行项目

项目和模拟器都准备好之后，就可以运行应用。

在 Android Studio 的顶部工具栏中，可以看到设备选择下拉框和运行按钮。首先从下拉框中选择刚刚创建的模拟器，例如 Medium Phone API 36.1。然后确保旁边的应用模块是 app。最后点击绿色的三角形运行按钮

Android Studio 会编译代码，并将应用安装到模拟器上运行。稍等片刻，模拟器就会启动并显示应用。因为使用的是 Empty Activity 模板，会看到显示 "Hello Android!" 的简单界面。如果需要停止应用，可以点击工具栏上的红色方块停止按钮

设置热更新

为了提升开发效率，可以开启 Android Studio 的热更新（Live Edit）功能。在你修改代码后，应用可以立即在模拟器上刷新，无需重新构建和部署整个应用

使用 Trae 进行开发

虽然 Android Studio 功能强大，也可以将它主要作为运行和调试的环境，而将代码编写工作放在 Trae 中进行

把应用的启动文案改为‘你好，Trae Android 开发

修改完成后，得益于刚才开启的热更新功能，右侧的模拟器会立即展示出最新的效果。在实际开发中发现热更新很慢，很多情况都是点击的刷新按钮

需求文档和页面布局

借助 AI 完成项目需求、页面布局文档和实现步骤规划

需求明确

一开始只有一个很简单的想法，于是向 AI 做了如下描述，这作为我的原始提示词：

做一个单词卡片安卓 App，输入一个单词后，点击提交按钮，会调用 Coze 的 API 接口生成一个卡片图片。

Coze API 会返回图片地址、英文单词

其中用户输入的单词可以是英文也可以是中文，例如可以输入 “苹果” “Apple” 都可以，App 需要展示 Coze API 生成的单词卡片图片。

用户可以保存卡片到本地，也可以点击重新生成

用户可以查看已保存的卡片列表

App 需要有一个设置按钮，因为 Coze有个 Token ，不要硬编码写死在项目中，App 提供一个设置页面，可以配置 token 信息

为了让 AI 更好地理解需求，使用 Trae 的 “提示词优化” 功能：

开发一个功能完整的单词卡片安卓应用程序，具体要求如下：

**核心功能需求：**
1. 实现单词输入界面，支持用户输入英文或中文单词（如"苹果"或"Apple"）
2. 提供提交按钮，点击后调用Coze API接口生成单词卡片图片
3. 接收并展示Coze API返回的卡片图片和对应的英文单词
4. 实现卡片重新生成功能，允许用户重新调用API生成新的卡片
5. 提供卡片保存功能，支持将生成的卡片图片保存到本地存储
6. 开发已保存卡片列表页面，用户可以查看和管理所有保存的卡片

**设置功能要求：**
1. 在应用中添加设置按钮入口
2. 创建配置页面，支持用户输入和修改Coze API的Token信息
3. 确保Token信息不能硬编码在项目中，必须通过用户配置获取
4. 实现Token的本地安全存储机制，支持读取和更新

**技术实现要求：**
1. 设计并实现用户友好的UI界面，包括主页面、卡片展示页面、设置页面和已保存卡片列表页面
2. 实现网络请求模块，处理与Coze API的通信，包括请求发送和响应解析
3. 添加错误处理机制，处理网络异常、API调用失败等情况
4. 实现图片加载和缓存机制，优化用户体验
5. 开发本地数据存储功能，使用SQLite或其他本地数据库保存卡片信息
6. 确保应用在不同屏幕尺寸的设备上都能正常显示

**测试和交付要求：**
1. 进行功能测试，验证单词输入、API调用、卡片生成、保存和展示等核心功能
2. 测试中英文单词输入的兼容性
3. 验证Token配置功能的正确性和安全性
4. 确保应用的稳定性和性能表现
5. 提供完整的应用源代码和项目文档

经过几次优化和微调，基本上满足这个项目的需求，并将其保存到 项目需求.md 文件中，作为后续开发的依据

页面设计

你是一位资深的UI/UX设计专家，拥有超过10年的移动应用设计经验。深谙用户心理学、视觉设计原理和移动端交互设计最佳实践。根据    生成高质量的 HTML 页面原型

Coze API 示例

在 docs 目录下创建一个文件 coze-api-example.md 将以下示例保存，后续开发时会把这个示例文档给 AI 做参考，这个例子也是我之前在 Coze 平台运行后直接复制的，可以直接拿来用。

# Coze API 示例

## Shell 请求示例

```shell
curl -X POST 'https://api.coze.cn/v1/workflow/run' \
-H "Authorization: Bearer pat_H29NIs6tl1PpMSd5rygDmMnTP0tllXaa76zlEcODhlxWnNFWtW68bYszMYxe9Yuh" \
-H "Content-Type: application/json" \
-d '{
  "workflow_id": "7601394747802746907",
  "parameters": {
    "word": "apple"
  }
}'
```text

## 响应示例

```json
{
  "code": 0,
  "msg": "",
  "data": "{\"card_image_url\":\"https://p9-bot-workflow-sign.byteimg.com/tos-cn-i-mdko3gqilj/d31691c2b6f947ad8a528134b4d6fb73.png~tplv-mdko3gqilj-image.png?rk3s=c8fe7ad5&x-expires=1801003283&x-signature=Zqix9i7gqEqjnnhravmBdb4SfGQ%3D\",\"word\":\"apple\"}",
  "debug_url": "https://www.coze.cn/work_flow?execute_id=7601659370921492543&space_id=7472662112151109666&workflow_id=7601394747802746907&execute_mode=2",
  "usage": { "token_count": 807, "output_count": 222, "input_count": 585 },
  "execute_id": "7601659370921492543",
  "detail": { "logid": "20260201064058CED4AD19246A9B50FD54" }
}
```text

代码实现

根据 项目实现步骤.md 实现项目

在模拟器中运行项目，会一直报有网络问题。

首先确认设备网络是否正常，以及当前的 NTP 配置。

确认问题后，通过修改系统全局设置来解决

如果需要在其他设备上执行同样的操作，可以直接在终端运行以下整合后的命令（确保已连接 ADB）：

# 1. 设置 NTP 为阿里云
adb shell settings put global ntp_server ntp.aliyun.com

# 2. 重启自动对时以立即生效
adb shell settings put global auto_time 0
adb shell settings put global auto_time 1

Android 应用打包与测试

在开发 Android 应用最后阶段，需要将项目打包成可供用户安装的文件。Android Studio 提供两种主要的打包格式：APK 和 Android App Bundle (AAB)

配置应用图标 (Logo)

默认情况下，Android Studio 创建的项目会使用标准的 Android 机器人图标。Android Studio 提供内置的 Asset Studio 工具，可以方便地生成适配所有设备和 Android 版本的应用图标。

操作步骤如下：

1. 在 Android Studio 的左侧项目视图中，请确保你正处于 Android 视图下（通常是默认选项）

2. 展开 app 目录，找到 res 资源文件夹

3. 右键点击 res 文件夹，选择 New -> Image Asset

4. 在弹出的 Asset Studio 窗口中，可以配置应用图标

• Icon Type: 通常选择 Launcher Icons (Adaptive and Legacy)，以确保图标在所有 Android 版本上都能正确显示
• Name: 图标名称，默认 ic_launcher 即可，无需修改
• Foreground Layer (前景层):
  • Source Asset: 在这里选择你的原始图标文件
  • Asset Type: 选择 Image
  • Path: 点击文件夹图标，选择已经准备好的 Logo 图片文件路径
• Scaling (缩放):
  • 可以在这里调整图标的大小，Resize 滑块可以缩放图标，确保它在安全区域内完整显示。右侧的预览窗口会实时展示不同形状下的最终效果

小贴士: 如果还没有自己的 Logo，可以尝试使用 AI 工具（例如 Midjourney 或 ChatGPT、豆包等）来生成一个。只需提供简单的描述，AI 就能为你创作出多种风格的图标

配置完成后，点击 Next，然后 Finish，Android Studio 会自动在 res 目录下的不同 mipmap 文件夹中生成相应分辨率的图标文件

快速生成调试包

这种方式通常用于快速生成一个用于调试或内部测试的安装包。它生成的包默认使用 debug 密钥进行签名，安装到设备上后可以进行调试

操作步骤如下：

1. 在 Android Studio 的菜单栏中，选择 Build -> Generate App Bundles or APKs
2. 在弹出的子菜单中，可以选择 Generate APKs 或 Generate Bundles

• Generate APKs: 这会生成一个或多个 APK 文件。对于较新的 Android Studio 版本，如果项目使用 App Bundle 的特性（如动态功能模块），它可能会生成多个针对不同设备配置的 APK（称为 Split APKs）
• Generate Bundles: 这会生成一个 Android App Bundle (.aab) 文件。AAB 是 Google Play 推荐的发布格式，它将应用的编译代码和资源打包，但将 APK 的生成和签名推迟到 Google Play。这样，Google Play 可以根据每个用户的设备配置，生成并提供经过优化的 APK，从而减小应用的下载体积

选择后，Android Studio 会立即开始构建过程。完成后，你会在通知栏看到构建成功的消息，并可以点击链接直接定位到生成的文件夹

构建成功后，就可以安装并测试生成的 debug 包：

1. 找到 APK 文件：首先，需要将 Android Studio 左上角的项目视图从 Android 切换到 Project。这样可以看到完整的项目文件结构。生成的调试包位于 app/build/outputs/apk/debug/app-debug.apk

2. 安装 APK：将 app-debug.apk 文件直接拖拽到已经启动的 Android 模拟器窗口中，系统会自动开始安装。安装成功后，就可以在模拟器的应用列表中看到刚才配置的新图标

3. 卸载应用：如果需要卸载应用，在模拟器中长按应用图标，在弹出的菜单中选择 Remove 即可

生成签名的发布包

当准备将应用发布到 Google Play 或其他应用商店时，需要生成一个使用正式密钥签名的发布包。签名是确认应用开发者身份、保证应用完整性的重要步骤。以下是生成签名 APK 的详细步骤：

在 Android Studio 的菜单栏中，选择 Build -> Generate Signed App Bundle or APK...。

向导启动后，首先需要选择打包格式：

• Android App Bundle: 推荐用于发布到 Google Play 的格式。它能提供更小的下载体积和按需功能等优势
• APK: 传统的打包格式，生成的 APK 文件可以直接安装到任何 Android 设备上。一般选择这个

创建或选择签名密钥 (Keystore)

需要为应用提供一个签名密钥。如果是第一次发布该应用，需要创建一个新的密钥库 (Keystore)

点击 Create new... 按钮，会弹出 "New Key Store" 对话框。需要填写以下信息：

• Key store path: 选择一个位置来保存你的密钥库文件 (.jks 或 .keystore 文件)。请务必妥善保管此文件，一旦丢失，将无法再更新你的应用
• Password: 为你的密钥库设置一个密码
• Key
  • Alias: 为你的密钥设置一个别名，用于在密钥库中唯一标识它。
  • Password: 为该密钥本身设置一个密码
  • Validity (years): 密钥的有效期，Google Play 要求有效期至少到 2033 年 10 月 22 日之后
• Certificate: 填写证书信息，用于标识应用的所有者。其中 "First and Last Name" 是必填项。

点击 OK 保存密钥库。向导会自动填入相关信息

需要输入之前设置的密钥库密码和密钥密码。勾选 Remember passwords 可以让 Android Studio 记住密码，方便下次打包。确认无误后，点击 Next

选择构建变体和目标文件夹

选择打包的目标位置和构建变体

• Destination Folder: 选择生成的 APK 文件要保存到的文件夹
• Build Variants: 选择要构建的变体。通常发布应用时，会选择 release。debug 变体则用于开发和调试

点击 Create，Android Studio 就会开始构建签名的 APK 文件。构建完成后，会在通知栏收到通知，并可以找到你签好名的 APK 文件

安装与测试发布包

签名的发布包通常位于 app/release/app-release.apk 目录中，或在创建签名包时自己指定的输出目录。可以用同样的方式将其拖拽到模拟器中进行安装和最终测试。

也可以将这个 APK 文件安装到手机上使用