​
CloudDB 实时聊天应用

​
项目概述

难度

中级

核心组件

CloudDB、ListView

学习收获

CloudDB云端数据存储、实时数据同步、多设备消息传递

​
组件设计

1

创建项目

访问 ai2.appinventor.mit.edu，创建新项目 CloudDBChat
2

添加组件

在 Designer 中添加以下组件：
组件类型组件名称属性
LabelLabel1Text: “Enter your name to join the chat”
TextBoxTextBox1
ButtonSubmitButtonText: “Submit”
ListViewListView1BackgroundColor: White
CloudDBCloudDB1
3

Screen设置

  • AlignHorizontal: Center
  • Title: CloudDB Chat

​
变量初始化

全局变量 userName = ""    // 用户名
全局变量 joined = 假      // 是否已加入
全局变量 chatList = []    // 消息列表

​
核心逻辑

提交按钮点击事件

当用户点击 Submit 按钮时，根据是否已加入聊天来处理：
当 SubmitButton.点击 时
  如果 不(joined) 则
    // 登录流程
    如果 TextBox1.文本 ≠ "" 则
      设置 userName = TextBox1.文本
      设置 joined = 真
      设置 Label1.文本 = "欢迎 " + userName + " 加入聊天！"
    否则
      调用 Notifier1.显示消息框("请输入用户名")
    如果结束
  否则
    // 发送消息流程
    设置 全局变量 新消息 = userName + ": " + TextBox1.文本
    调用 CloudDB1.获取值(标签: "chat", 值如果不存在: [])
    设置 TextBox1.文本 = ""
  如果结束
Screen 初始化时获取已有聊天记录：
当 Screen1.初始化 时
  调用 CloudDB1.获取值(标签: "chat", 值如果不存在: [])
DataChanged 事件 - 任何用户发送消息时触发：
当 CloudDB1.数据已改变(标签, 值) 时
  如果 标签 = "chat" 则
    设置 chatList = 值
    设置 ListView1.Elements = chatList
    设置 ListView1.SelectionIndex = 获取列表长度(chatList)
  如果结束

​
测试与部署

最佳测试方式：使用多台真机设备构建 APK。MIT AI2 Companion 不允许多用户同时连接。
1

构建 APK

从 Build 菜单选择 “Android App (.apk)”
2

安装应用

扫描生成的二维码，在多台设备上安装
3

测试

从不同设备发送消息，验证所有设备都能收到

​
功能扩展

让最新消息显示在顶部：
设置 ListView1.Elements = 反转列表(chatList)

​
常见问题

原因：网络延迟或 CloudDB 免费服务器负载高解决：使用自己的 Redis CloudDB 服务器
原因：同时写入可能导致数据覆盖解决：使用 CloudDB 的 Merge 模式，添加消息ID实现增量更新

​
原文来源

本教程基于 MIT App Inventor 官方教程整理：CloudDB Chat App，采用 CC BY-SA 4.0 授权。