返回首页
回到顶部
思维导图
项目说明
ai党史app既可以单独运行，也可以在连接上MQTT后与硬件（灯座和沙盘）进行互动。思维导图见上方。
app包括5个屏幕，超过1000个代码块，所以在本贴不会做太具体的说明，只把关键功能和代码进行展示。后面如果有空在论坛上开个系列来详细说明（每个屏幕都会是一个超长帖）。
需要说明的是这个app做的也是历尽艰辛，项目需求来回改了好几次，设计的平台也很不稳定。开始是用gz平台，做了人脸识别注册登录、账号密码注册登录（写了好多代码），但是gz平台近两年几乎没有更新，访问也经常出问题，学生就转到了某w平台。这两个平台不兼容，学生生生把代码重新写了一遍。就这么过了几个月，到了大概4月份的时候，某天学校的IP突然就被封了，访问不了w平台，学生当时都傻了，好在用流量开热点还能访问。那段时间就天天给学生开流量，学生用两台电脑对照着把自己的程序重新写到MIT中（w平台的程序也无法导入到MIT中）。虽然一周后w平台又可以访问，但学生没敢再在上面写，只是对照着继续把程序转到MIT中。
再后来知道MIT在国内有了稳定能访问的官方服务器，地址是http://code.appinventor.mit.edu/，算是彻底解决了开发平台的问题。
APP运行截图
- 在开始运行时，可以选择是否与硬件互动，如果选择是，则会连接MQTT，在后续的操作中与硬件互动
. 当在APP上点击某种精神时，对应精神的灯座、沙盘上对应精神的灯都会点亮。
. 同样，当用红外遥控器遥控沙盘上某个灯或者用激光笔照射某个灯座时，都会触发APP跳转到对应中国精神的页面。
- 登录有三种方式：游客登录、人脸注册登录和账号密码登录
. 游客登录：无需账号密码即可使用APP
. 人脸注册登录：使用旷视Face++API，通过摄像头获取人脸注册和登录，登录后有使用者人脸缩略图和昵称（见视频）
. 账号密码登录：输入账号和密码，为了简单起见，删除原有的限制（账号密码长度、密码多样性等）
- 每种精神页面都包括：精神名称、精神内涵、精神解读、精神追寻，可以对中国精神进行系统学习。
- 测试题包括选择题和判断题，各5道。
步骤1 Screen1界面和逻辑设计
功能：实现人脸识别注册及登录功能。
Screen1 UI设计
包括两个界面：人脸识别注册及登录界面，输入昵称后的登入界面。
部分组件说明：
- SimpleBase64：将图片转换为Base64字符串
- TaifunImage，对图片进行裁剪
- Web客户端-人脸添加：将人脸图片添加到Face++
- Web客户端-人脸识别：将人脸图片上传到Face++进行识别
- TextToSpeech：将文本朗读出来
- TinyWebDB：将账号密码等保存到网络数据库中
Screen1逻辑设计
共计289个代码块，下图为Screen1折叠代码后的屏幕截图。
人脸识别注册及登录在并屏幕中识别，账号和密码注册及登录会跳转到屏幕login_and_signup。
关键代码说明：人脸识别
- 如果检测状态是None，说明还没有进行登录判断
+ 判断用户上传的图片Json返回值长度是否大于0，大于0说明检测到人脸：
. 如果用户点击的是“注册”，调用“人脸添加”，将人脸添加到Face++中。
. 如果用户点击的是“登录”，调用“人脸识别”，看人脸图片是否与已添加的人脸匹配。
+ 如果用户上传的图片Json返回值长度等于0，显示“未检测到人脸”
- 如果检测状态不是None，将检测状态重置为None，并进行判断：
+ 判断用户上传的图片Json返回值长度是否大于0，大于0说明检测到人脸：
. 在已添加的用户人脸图片中搜索，如果用户用于登录的人脸与库中的图片比较置信度大于100，则登录成功
. 否则登录失败
+ 如果用户上传的图片Json返回值长度等于0，显示“未检测到人脸”
步骤2 屏幕login_and_signup界面及逻辑设计
功能：实现通过账号密码注册及登录功能
UI设计
包括两部分：用户注册界面和用户登录界面。
部分组件说明
- 微数据库：保存上一次登录过的用户名，当用户登录时显示。
- 网络微数据库：将用户名、密码、分数保存到网络微数据库中。
逻辑设计
- 屏幕login_and_signup：210个代码块。下图为屏幕折叠代码后的屏幕截图。
关键代码说明：当提交注册信息按钮被点击。
- 判断用户名是否有效（是否是空，是否已存在）
- 判断密码是否有效（是否是空密码，前后两次输入密码是否一致）
- 将有效的用户名和密码分别保存到两个标签不同的网络数据库中
步骤3 屏幕spirit界面及逻辑设计
功能：用户选择某种精神后会跳转到本页面，显示对应精神的内涵、解读及精神追寻等，并可从本页面跳转到测试题目页面。
UI设计
包括精神名称、精神内涵、精神解读、精神追寻、小试牛刀等部分。
逻辑设计
- 屏幕spirit：108个代码块。功能：中国精神主体页面。包括28种中国精神内涵、中国精神解读、《精神的追寻》等党史微视频等。
下图为屏幕折叠代码后的屏幕截图。
spirit屏幕原本有146个代码块，学生将所有列表在App Inventor中手动输入，包括屏幕topic也是如此，有多达653个代码块（心疼~）。这种方式特别低效，尤其是当数据有变化时，修改工作量大还容易出错。后面也确实出现了这个问题。学生最开始时做的“共gong产chan党dang员网”中国精神首页中的28种精神和后来有了变化，虽然内容变化不算大，但是因为有增减，所以顺序几乎全变了。这时所有的名称、内涵、解读等全部要逐一修改，学生一听说要改就炸了。我说，小事一桩，你的程序逻辑是没有问题的，只需要把数据用更高效的方式来表达就可以非常快的完成程序的改写。那就是用文件，如下图。在电脑上整理资料比在App Inventor添加代码块要快捷容易的多，将资料按类别放到不同列中，每一行是同一种精神。将资料有序保存到excel表格中，并另存为UTF-8的CSV文件。
程序优化前代码示例截图：
虽然折叠后只有7个代码块，但是展开之后列表都是由积木块一个个堆叠起来的，既费时，又容易出错，而且不好修改。这样写程序对后续维护来说就是一场灾难，所以需要用高效的数据存储方式对程序进行优化。
关键代码说明：当文件管理器获得文本
这部分代码是对前面程序的优化。虽然从146到108并没有减少多少，但是所花费的时间大大减少，而且当数据有变化时程序不用修改，只需要修改CSV表格重新上传就可以了，工作量大大减少。
- 读取的文件是CSV文件，将CSV表转换为列表，并保存到temp中
- 对temp中的每一行row剔除列表元素第一项前的"("和最后一项的"("
- 按行读取列表元素的每一项，并以空格分隔保存到列表line中
+ 表格第1列为精神名称列表
+ 表格第2列为精神内涵
+ 表格第3列为精神解说
+ 表格第4列是《精神追寻》网址
- 精神索引值是用户在屏幕A_centenary_spirit选择精神列表后传递过来的值，根据这个索引在屏幕上显示索引所对应精神的名称、内涵、解说及拓展史料等。
步骤4 屏幕A_centenary_spirit界面及逻辑设计
功能：用户选择界面。用户选择某种精神后，会传递变量，跳转到屏幕spirit，同时通过MQTT发送消息，将命令发送给硬件端进行互动。
UI设计
包括精神列表和返回界面。
部分组件说明：
- MqttTCP1：用于MQTT连接及发送信息
- 计时器：用于触发及停止MQTT连接
- 文件管理器：用于导入精神列表
- 列表选择框：用于选择28种中国精神
逻辑设计
- 屏幕A_centenary_spirit：120个代码块。
下图为屏幕折叠代码后的屏幕截图。
关键代码说明：当文件管理器获得文本
这部分程序与步骤三的关键代码类似，只是只需要分离第一列数据（即精神名称）就可以了。
- 读取的文件是CSV文件，将CSV表转换为列表，并保存到temp中
- 对temp中的每一行row剔除列表元素第一项前的"("和最后一项的"("
- 按行读取列表元素的每一项，并以空格分隔保存到列表line中
+ 将列表line的索引值为1的项保存（既下方Excel截图的第A列）并追加到全局列表“精神列表”中，保存28种中国精神名称。
步骤5 屏幕topic界面及逻辑设计
功能：自测题，巩固所学知识。
UI设计
包括试题信息布局、题目布局、图片布局、选项布局等。
逻辑设计
- 屏幕topic：修改前有653个代码块，里面包含了3套选择题（在程序中录入）。修改后514个代码块，自测题包含了选择题和判断题两种题型，题目从文件中导入，无需在程序中拖拉代码块。
功能：中国精神自测题。题目和答案同样采用CSV文件导入。采用大量过程完成代码复用。
下图为屏幕折叠代码后的屏幕截图。
这部分的程序在优化前非常庞大，而且数据结构也比较复杂：
- 每种精神都对应一套习题（程序中已经完成了7套习题）
- 每套习题包括5道小题
- 每道小题都有ABCD四个选项
- 每道题都有正确答案
此时如果要把数据保存到CSV文件中，就面临如何设计表格结构的问题：既选项文本是按题号来保存为列还是按选项保存为列。即是将每道题ABCD四个选项保存为一列，5小题共5列；还是将所有5道小题的A选项保存为一列，B选项再保存为一列…一共4个选项保存为4列。学生看到需求有点畏难，觉得太麻烦，还不如花时间一点点拖代码块简单粗暴。
其实并不难，把自己的代码仔细分析就能找到规律，程序设计就是利用抽象、模块化及算法设计这些计算思维的方法来实现这些规律。
通过分析原有程序代码，可以找到程序数据结构，进而确定CSV表格的结构如下：
只有选择题时CSV文件的结构：
加入判断题后CSV文件的结构：
增加一列为5道题的题干，以空格分隔；增加一列为答案，以空格分隔。
临近期末考试，出题的历史老师没有时间，剩下的题目在暑假完成。
加入判断题:
- 每道判断题都有对错两个选项
则CSV结构如下：
因为题目还在更新中，为了避免空题目跳转出错，需要在屏幕spirit补充一段代码。
- 屏幕初始化时禁用“小试牛刀”按钮，读取题目CSV文件
- 当文件管理器获得文本后，判断当前精神索引值的第2列是否有内容，如果有内容，则启用“小试牛刀”按钮。
旧代码：学生写的题目的图片文件列表代码。
程序逻辑：
- 测试首页上方显示题目总数，每种题型的题目数，当前分数
- 选择题和判断题作为两个独立的部分执行，逻辑完全一样
+ 显示当前题号及题干
+ 如果题目包含图片则显示
+ 显示选项（选择题显示ABCD四个选项及其文本，判断题显示对错选项）
+ 显示“下一题”按钮，如果是最后一题，禁用该按钮
+ 下方显示“返回”和“交卷”按钮
+ 做题顺序是先5道选择题，再5道判断题
. 选择答案后，按钮会变绿，点击“下一题”
= 如果答案正确，则跳到下一题
= 如果答案不正确，显示正确答案，并可到下一题
. 如果没有选择答案点击了“下一题”，会弹出警告
+ 如果完成了最后一道题，则禁用“下一题”按钮
- 点击“交卷”显示当前分数并返回到屏幕“A_centenary_spirit”
- 点击“返回”回到当前精神页面
关键代码说明：
这部分代码做了较大改动，目的就是为了当题目有变化时无需修改程序，这样特别容易维护。事实证明这种方法特别高效，后面测试的时候题目有不少小问题，但是只需要在CSV文件里修改再重新导入就可以了，程序不需要做任何修改。
自测题将选择题和判断题分开处理，两个独立的屏幕界面，但是程序逻辑完全一样。本来可以用带参数的过程完成，但是涉及的参数太多，一起处理反而容易出错，所以程序编辑时也将这两个部分分别写。以下是选择题的代码示例：
如果选择题没有完成，则继续下一道，如果已完成，开始做判断题。
设置当前题目各选项按钮的颜色并启用，调用过程“调用选择题”。
过程：调用选择题。
- 显示当前索引下的题目
- 如果图片文件列表当前索引下的元素长度
他的勋章
评论