【APPInventor\腾讯云】使用APPInventor开发连接腾讯云的安卓物联网遥控APP：（一）构建登录和注册功能

一、准备工作

1. MIT APP Inventor：MIT APP Inventor；
2. 用于登录UI的一些图片。

二、图形界面设计

（一）图形界面需求分析

根据前一篇文章操作逻辑部分的描述，我们构建此功能需要设计两个界面，即登录界面和注册界面。

（二）登录界面

在登录界面，我们需要如下APP Inventor中的组件：

• 五个Label组件，第一个用于屏幕最上方一个大大的“登录”，第二个用于提示用户操作，第三个、第四个用于输入框左边的文本提示，第五个用于卡位置（为什么卡位置之后会说）；
• 两个PasswordTextBox组件，用于保存用户输入的账号、密码文本；
• 两个Botton组件，用于“登录”、“注册”按钮；
• 若干个布局组件，用于简单美化图形界面。

简单组合以下，得到如下图形界面：

图一 登录图形界面 注：登录和注册按钮中间就是用于放置卡位置的Label组件，实际测试中，如果按钮和按钮中间不隔点东西非常容易造成“按钮交融”的效果（就好比处于热恋期的小情侣一样双方的心紧紧贴合在一起，你中有我我中有你，三个也会但是这种事情哒咩！！！）。所以这就是为什么中间需要一个卡位置的Label。

（三）注册界面

在注册界面，我们需要如下APP Inventor中的组件：

• 五个Label组件，第一个用于屏幕最上方一个大大的“注册”，第二个用于提示用户操作，第三个、第四个、第五个用于输入框左边的文本提示；
• 三个PasswordTextBox组件，用于保存用户输入的账号、密码、二次确认密码文本；
• 一个Botton组件，用于“注册”按钮；
• 若干个布局组件，用于简单美化图形界面。

简单组合以下，得到如下图形界面：

图二 注册图形界面 注：本人没有任何美术功底，本人在美术领域的最大的成就就是小学被老师夸过画画好看，有一种纯真的美。所以界面不好看是非常正常的。

三、逻辑设计

（一）登录逻辑设计

图三 登录逻辑

注：请不要从安全性等相关方面考虑此过程的问题，因为课业需求和能力限制，暂不能做到云端进行账密匹配最后下发匹配结果这种逻辑的实现，故只能使用本地匹配的方式。

（二）注册逻辑设计

图四 注册逻辑

（三）用户数据库准备

网络上的一个好用的数据库网站：TinyWebDateBase
首先进入这个网站

图五 网页界面 首先注册一个账户，这点跟着网站的操作提示即可。 进入数据库页面

图六 数据库界面 这个界面里建议复制下服务器地址，后面登录逻辑设计会用到。

在最上方TinyWebDB里，点击数据导入

图七 数据导入 并在文本框里写入如图所示的数据，第一个UserNumber表示当前的用户数量，我们目前只有两个用户。 这两条作为管理员账户和初始测试用户账户，其中最前方的数字为用户序号。在每一行的中括号里才是我们设定的用户和密码。比较熟悉APPInventor的读者可能看得出来，这是APPInventor中列表的数据格式，我们以列表 ["账户","密码"] 为一个用户进行操作。

TinyWebDB的存储格式为一个标签对应一个数据。举个不恰当的例子，我们把数据库比作孤儿院，标签比作孩子的名字，数据比作孩子，那么你开的孤儿院（数据库）里有很多孩子（数据），每个孩子（数据）都有名字（标签），你想喊哪个小孩（数据）过来吃饭（进行数据处理），那你就喊他名字（标签）。我们输入的所有数据中（我们输入的所有小孩？好怪这句话哦），UserNumber、1、2就是小孩（数据）的名字（标签），数据 2、[“admin”,“admin”]、[“User#1”,“User#1”]就是小孩（数据）。

（四）登录逻辑编写

在此之前，我先说明各个按钮名称以及其功能的对应关系：

• PasswordTextBox1：账户输入框；
• PasswordTextBox2：密码输入框；
• Botton1：注册按钮；
• Botton2：登录按钮；
• Botton3：密码可见性按钮；
• Label2：用于提示用户操作的文本框，在界面中是背景颜色为黑色且就在“登录”两个字下面的条子。

首先我们需要对界面进行初始化

图八 初始化函数 我们先使能了账户文本框，并将其文本可见性设置为真使得用户可以看见账户文本框内的文本。同样，我们使能了密码文本框，并将其文本可见性设置为假使得用户看不见密码文本框内的文本。最后，我们将三个按键统统使能。

图九 全局变量设置 我们再设置一个全局变量PasswordVisible，字面意思，用于决定密码是否可见。 PasswordVisible的值也是和Java还是哪个语言里的布尔类型变量一样，只有0和1。 由于我们初始化密码可见性为假，即默认看不见密码，所以我们对PasswordVisible赋0。

既然我们先设置了PasswordVisible变量，那我们先做密码可见性按钮（Botton3）的逻辑

图十 密码可见性逻辑 我们先对PasswordVisible的值进行判断，如果其为0，那么代表用户希望其从0变1，即密码由不可见变为可见。 我们就把Botton3的图片换成表示密码可见的图片（很多软件里是一个眼睛表示，这里就是从眼睛闭着的图片换成了眼睛张开的图片），然后设置PasswordVisible为1表示密码可见，然后再设置密码输入框（PasswordTextBox2）里的文本可见。

这里用了一个if-else分支构成逻辑，else里的操作和上述操作说明相反。

然后我们挑简单的注册按钮（Botton1）来做，直接点击一个页面跳转完事。

图十一 注册按钮逻辑

最后我们做登录页面的核心功能登录按钮（Botton2）的逻辑。
我们先在界面设计那里拖入一个非可视模块，即存储（storage）中的TinyWebDB模块。

图十二 TinyWebDB模块

图十三 TinyWebDB参数设置 再设置模块的参数——服务器地址（ServiceURL）。 这个参数在哪里看？上翻到图六那里，那个网站的界面里面会给出。 随后我们再设计登录按钮的逻辑。

图十四 登录按钮逻辑 我们首先设置几个全局变量，

• UserNumber：用于存储服务器下发的当前用户数量；
• TempUserList：每次下发的用户账户密码文本；
• LoginState：用于登录成功后停止比较账密文本；
• Temp：用于存储每次用户输入的账密

当登录按钮按下后，我们首先使用“GetAccount”把用户输入的账密存储在Temp里，由于在界面初始化时，我们就以及向服务器请求过当前用户数量并存储在UserNumber里，所以我们直接进入比较循环，从1到UserNumber向服务器请求账密文本。
请求到了之后首先比较是否服务器返回空字符串，如果是那就重新请求，如果没有那就正常。首先比较Tag，Tag是UserNumber的时候说明是初始化请求当前用户数量，这里不做讨论。else中才是我们现在需要的情况，首先把服务器下发的账密文本存储在TempUserList里。然后进入if判断，第一层if判断是否登录，我们还没有登录所以进入if，第二次if判断账密文本是否相同，如果相同那么登录成功，将TempUserList设置为ture表示已经登录，如果不同那就向用户说明账密不对。

（五）注册逻辑设计

同样，我先说明各个按钮名称以及其功能的对应关系：

• PasswordTextBox2：账户输入框；
• PasswordTextBox3：密码输入框；
• PasswordTextBox1：二次确认密码输入框；
• Botton1：注册按钮；
• Botton4：密码可见性按钮；
• Botton3：二次确认密码可见性按钮；
• Label2：用于提示用户操作的文本框，在界面中是背景颜色为黑色且就在“登录”两个字下面的条子。

同样，我们先对页面进行初始化

图十五 初始化函数

图十六 密码可见性和二次确认密码可见性按钮逻辑

以上逻辑都和之前讲过的相似。
重点是下面的注册按钮（Botton1）逻辑

图十七 注册按钮逻辑

当注册按钮按下时，首先向服务器请求当前用户数量并存储在UserNumber这个全局变量里。当我们取得变量并存储之后，我们需要对用户设定的账密进行检测，如果账户是“admin”这样的非法用户名，就提示账户名非法，如果二次确认密码和密码不一样，就提示二次密码不一样。
如果都一样，那么使用一个局部变量UserList存储账密构成的列表，然后，让UserNumber加一并覆盖服务器的用户数量，然后新增第UserNumber个用户，并存储。
（注：我认为这个服务器十分看使用者的或者服务器设置方的网速，总之有时候可能会出现一些“我明明存上去了但是为啥参数列表里没有显示”的玄学情况。由于本人的知识网络小小的很可爱，没有盖住服务器这方面的知识，所以仅凭本人主观判断，这个逻辑是可以正常实现我们所需功能的。）

四、使用效果

图十八 编译

编译工程，在左上角的build下拉框，选择Android App(.apk)，点一下，等待编译完成下载。

图十八 下载

下载~~，笔者用的是MIT的版本，服务器在美国所以下载速度非常的慢。

演示视频在下面这个链接里了
百度云分享-演示视频

五、结语

本文在记录本人制作此类APP的同时也希望能够帮助有相似需求的同学，同时由于本人水平确实极其有限（我情商真高！），所以不免会出现各种奇怪的小错误，甚至贻笑大方。同时本人也期望读者能够在下方评论里一针见血、直捣黄龙、拳拳到肉地指出文中的错误，本人十分感谢！