云数据库与简易聊天室[上]
在2019版App Inventor中，云数据库组件被正式纳入到数据存储分组中，此前它一直被放在试验组件分组中。与本地数据库（tinyDB）及网络数据库（tinyWebDB）相比，云数据库组件具有更为优越的性能，因而更适用于那些实时的网络应用。这里以一个简易聊天室为例，说明该组件的使用方法。
一、术语解释
聊天室应用中涉及到一些关键的概念，有必要先阐明它们的含义。
应用：简易聊天室是一个独立的应用，与该应用相关的数据会独立地保存在云数据库服务器上，其他应用无法访问。
聊天室：本文创建的简易聊天室应用，理论上可以开设任意多个独立的“房间”，这个房间被称为聊天室，每个聊天室都具有一个独一无二的名称。
用户：任何一部安装了简易聊天室应用的手机都可以作为一个用户来使用聊天室。
创建聊天室：用户可以创建一个新的聊天室，新聊天室的名称是该其他用户不曾使用过的。
加入聊天室：用户只要知道一个聊天室的名称，就可以加入这个聊天室聊天室。
进入聊天室：已经加入聊天室的用户，只要输入自己的用户名并设置头像，就可以进入聊天室，并开始聊天。
退出聊天室：用户可以从已经进入的聊天室中退出，并告知大家自己已经退出。
聊天室成员：已经进入某个聊天室的全体成员，每个成员都可以看到该聊天室内所有成员的名称以及他们的聊天内容。
发言：每个用户都可以在聊天室内发言，发言内容的前面标有发言者的头像及用户名。
聊天内容：所有用户的发言组成了聊天内容，聊天内容按时间顺序自下而上显示。
二、功能描述
应用首页：用户打开应用，进入应用首页。用户在首页需要输入聊天室的名称，此时即可以创建一个新的聊天室，也加入一个已经存在的聊天室。如图1左一图。系统会保存用户上一次加入的聊天室名称。
登录页：用户成功创建或加入聊天室后，即可进入登录页。在登录页中，用户需要输入用户名，选择头像，并点击开始聊天按钮后，即可进入聊天室。如图1左二图。系统会保存用户上一次使用的用户名及头像。
聊天页：用户在登录页点击开始聊天按钮后，即可进入聊页。在聊天页中，用户可以输入聊天内容，并点击“发送”按钮提交发言。如图1右二所示。
查看成员列表：用户可以点击聊天页下方的“成员列表”查看全体成员，如图1右图所示。
清空记录：用户可以点击聊天页下方的“清空记录”按钮删除本聊天室的全部聊天内容。
返回首页：用户可以点击聊天页下方的“返回首页”按钮退出聊天室，并返回到首页。
退出应用：用户如果点击手机的返回按键，也视同退出聊天室，同时退出应用。
图1 聊天室的功能简介
三、用户界面设计
本应用虽然有多个用户界面，但屏幕只有一个。在Screen1中，使用多个垂直布局组件，通过设置它们的允许显示属性，来实现不同功能的切换。用户界面如图2所示，组件的命名及属性设置见表1。
图2 简易聊天室的用户界面设计
表1 组件的命名及属性设置
这里需要强调一点，在图2中可以看到云数据库的各个属性设置，其中“项目编码”一项，本文采用了默认设置，即项目名“聊天室”，但是这样做是非常危险的，因为如果其他开发者知道了这个编码，就可以创建一个同样编码的应用，从而获取到本应用中的全部数据。因此各位读者如果想开发一个自己的聊天室应用，务必慎重设置项目编码一项，这相当于是应用的密钥！
另外，云数据库的服务地址属性，默认值为DEFAULT，该设置指向的是MIT提供的服务器，该服务器在国内无法访问，因此这里将其设置为clouddb.17coding.net，该服务器由张路先生开发，是一个供开发者练习使用的非商用服务器。
四、编写程序
首先声明项目中的全局变量，然后再按照功能实现的时间顺序编写相应的程序。
1、全局变量
如图3所示，在所有全局变量中，只有“聊天室列表”是真正的变量，其余大多是充当存储标记的常量。之所以用变量来存放这些标记，是为了避免手工输入可能产生的差错。
图3 项目中的全局变量
值得一提的是，用于存放头像的表情字符，来自于一个网站https://unicode-table.com/，这里有很多有趣的符号，可以增加应用的趣味性。
2、实现创建/加入聊天室功能
（1）创建过程——提取本地信息
提取本地信息过程用于在屏幕初始化时读取本地数据库中已经保存的聊天室名称、用户名及头像信息，并将读出的信息设置为对应组件的属性值，代码如图4所示。
图4 提取本地信息过程
（2）屏幕初始化事件
在屏幕初始化时，需要完成四项操作，代码如图5所示。
设置头像选框的可选项；
提取本地信息，即，从本地数据库读取信息，并设置相应的组件属性；
连接云数据库服务器，并通知用户连接成功；
在连接成功的前提下，向云数据库服务器请求聊天室列表信息。
图5 屏幕初始化事件处理程序
代码说明：云数据库是一个实时数据库，信息的传输效率非常高。当项目启动时，只要项目中添加了云数据库组件，该组件会自动与服务器建立连接，因此图5中条件语句中的“让云数据库1连接云服务器”可以省略，不过考虑到逻辑的完整性，这里没有省略。
（3）收到数据事件
云数据库的请求数据操作将触发该组件的“收到数据”事件，该事件中携带了两项信息：
请求数据时使用的标记
针对请求返回的数据
图6是收到数据事件的处理程序。在项目的设计视图中，我们取消勾选了创建聊天室按钮和加入聊天室按钮的启用属性（见表1），当云数据库将聊天室列表的数据返回时，为全局变量“聊天室列表”赋值，并启用这两个按钮。
图6 云数据库的收到数据事件处理程序
（4）创建过程——设置私有存储标记
在“简易聊天室”项目之下，可能有很多聊天室，不同的聊天室需要用不同的标记存储本聊天室的成员列表及聊天记录，为此需要为存储标记附加上聊天室名称，即，设置私有的存储标记，代码如图7所示。
图7 设置私有存储标记过程
（5）创建过程——隐藏创建聊天室布局
当用户输入了可用的聊天室名称，并点击创建聊天室按钮或加入聊天室按钮后，需要隐藏当前布局，并显示登录布局，代码如图8所示。
图8 隐藏创建聊天室布局过程
（6）创建聊天室按钮点击事件
在创建聊天室按钮的点击事件中，首先检查聊天室名称是否为空，如果不为空，再检查该名称是否已经存在，如果不存在，则创建聊天室成功。如果创建聊天室成功，那么首先要为聊天室设置私有存储标记，然后向聊天室列表中添加该聊天室名称，并将更新后的聊天室列表保存到云数据库，同时将聊天室名称保存到本地数据库，以便下次打开应用时，自动填写该项信息。最后用Screen1 的标题属性来显示聊天室名称，并进入登录页面，具体代码如图9所示。
图9 创建聊天室按钮的点击事件处理程序
（7）加入聊天室按钮点击事件
加入聊天室按钮的点击事件处理程序如图10所示。注意比较创建聊天室与加入聊天室两段程序的异同，比较结果见表2。
图10 加入聊天室按钮的点击事件处理程序
表2 创建聊天室与加入聊天室程序的异同
注意表格中的倒数第三行（绿色背景），在屏幕初始化后，聊天室成员列表为空列表，在执行创建聊天室操作时，无需向云数据库请求信息，但是在执行加入聊天室操作时，需要向云数据库请求成员列表信息，以便在登录页面更新该项信息。
（8）完善云数据库的收到数据事件处理程序
当云数据库的收到数据事件被触发时，检查触发该事件的标记，并对不同的标记作出不同的相应。当触发事件的标记为“成员列表存储标记”时，将返回的数据设置为下拉框的列表属性，并隐藏创建聊天室布局，代码如图11所示。
图11 完善收到数据事件的处理程序
至此创建/加入聊天室的功能已经全部实现，测试结果将如图1中的左一及左二所示。下面来实现进入聊天室的功能。