制作点名器及程序调试

这个app做起来不太难，但是它的设计方法很好的体现了计算思维和信息素养。
这个app很实用，我在上课的时候都会用，随机点名，还会出现学生的照片，效果很轰动。
照片是他们开学前学校统一拍的，因为要给他们办理校园卡。既然是学校统一拍，效果肯定不令学生满意，所以被点到名的学生会很尴尬，而其他学生都会哄堂大笑，没有例外~~

为了保护学生隐私，我把所有学生的头像遮盖住重要部分并隐去学生姓名。


强烈建议这个应用使用wxbit平台开发，因为一个班的学生有几十个人，每个班的点名器app要上传几十张图片，单就这个工作就会让人崩溃。我最开始做这个app的时候是2015年，之后每个新学年都会做。少的话4个班，多的话8个班，几百张照片要一张张上传，想想这个工作量！一直都吐槽为什么MIT没有同时上传多个文件的功能，这是刚需啊！然而到目前为止仍然没有这个功能。好在wxbit目前已经有了可以批量上传文件的功能，工作量指数级减少！


一、准备工作
这个app如果用下图所示的列表组件来保存照片文件名和学生姓名，把学生照片文件名和学生姓名一个个敲进去会不会要崩溃？这种重复性的工作一定要找出规律，也就是我们在计算思维里的模式识别和抽象。重复性的工作是计算机最擅长的，我们找出规律和解决方法，就可以把它交给计算机完成。


1. 处理学生照片

• 将学生照片重命名
  

学生照片是统一拍摄并用学生名字命名的


可以先按姓名排序，因为App Inventor导入素材不允许包含中文，所以使用Total Command之类的软件将文件批量重命名为字符格式，本例第一个学生从51开始，注意一定不要自己一个个重命名啊：

• 在excel中生成照片文件名列表：
  

新建一个excel文件，第一列的单元格输入第一张照片文件名的序号，然后使用填充柄填充到所需的个数，第二列单元格存放.jpg，然后使用&将两个单元格的内容前后连接起来，将得到的值保存为.csv文件，编码方式是UTF-8。（本例中从第一个学生从第51号开始）


2. 处理学生姓名
对于姓名，可以使用dos命令将原始照片文件名提取出来存放到.txt文件中再进一步处理：dir *.jpg>name.txt。将学生姓名按前面处理照片的顺序添加到excel文件中，并另存为.csv文件，编码方式是UTF-8

   


3.将所有学生的将学生姓名文件、学生照片名文件导入到App Inventor中


二、程序设计
1. 组件设计

• HorizontalPhoto：摆放学生相片
• ImagePhoto：显示学生相片
• HorizontalName：摆放学生姓名
• LblName：显示学生姓名
• BtnStart：Start/Stop按钮
• FileName：学生姓名文件
• FilePhoto：学生照片文件
• Clock1：时钟组件，每0.1秒随机显示一个学生
  

• 屏幕1组件属性
  

2. 逻辑设计

• 屏幕初始化
  

屏幕初始化时，将时钟组件禁用
设置学生姓名文本框显示为空
从手机中读取学生姓名文件和学生照片名文件

• 初始化变量
  

photoList是存放学生照片名的列表，初始化为空表
nameList是存放学生姓名的列表，初始化为空表

• 点击START/STOP按钮
  

BtnStart是一个开关按钮。在START和STOP之间切换
当计时器是启用状态时，说明现在正在进行随机点名，按钮显示的是STOP，点击BtnStart按钮将按钮文字显示为START，将时钟禁用
当计时器是禁用状态时，说明现在未进行点名，按钮显示的是START，点击BtnStart按钮将按钮文字显示为STOP，将时钟启用

• 文件管理器读取到文件后
  

文件管理器读取到文件后，将CSV表格文本转换成表格并保存到变量nameList和photoList中

• 当时钟触发时（点名开始）
  

产生一个随机数，范围为1~列表长度（学生人数）
设置标签LblName的文本为列表nameList中索引值为随机数的记录
设置ImagePhoto.Picture为列表photoList中索引值为随机数的文件名



三、测试
1. 问题排查（1）：无法显示学生相片
我们完成了所有的编程任务，调试时发现能显示学生的姓名，但是学生的照片无法正常显示，这是什么原因呢？

• 调试程序：我们使用标签显示照片文件名和学生文件名
  

通过视频我们可以发现，转换后的名字和图片文件名都包含了括号。图片文件名包含了括号，就无法正常从手机中读取相应的照片，因此就无法显示了。

• 问题分析：
  

我们可以使用下边的代码块将括号去掉，但是我们要了解出现括号的原因，找到问题的终极解决方法


我们用标签来显示从CSV文件转换出来的文本内容。可以看到 转换后的文本是List of List，也就是嵌套的表格。外层的表是所有相片文件的名字，(stu51.jpg), (stu52.jpg), ... , (stu88.jpg)，而每一项都是一个独立的小表，每个小表只有一项如(stu51.jpg)，内容为图片文件名。

• 问题解决：
  

我们使用下面的指令：取随机数位置的子表，再取这个子表的第一项，也就是学生的姓名，这样就自动去掉了姓名前后的括号
重新测试，学生照片可以正常显示了！


2. 问题排查（2）：无法显示首位学生相片
我们长时间地运行这个应用，会发现有同一个学生的相片显示不出来，经过查找姓名文件内容，我们发现是第1位学生

• 问题分析：
  

照片不能显示的原因可能有：
照片没有下载到手机中？通过察看手机中相片文件夹的位置：AppInventor/assets，文件正常下载到了手机
照片有问题？查看手机上的照片文件，可以正常显示
照片文件名不正确？排查见下文

• 查找问题：照片文件名
  

使用下面的代码进行调试，发现无论是否去掉括号，首位同学的照片文件名都是完整显示的





为了确定问题所在，我们把能够正常显示的图片和第1张相片文件名进行显示上的比较，结果也是完全一样的



继续调试（高能）：
下面的程序块分别显示第一个相片文件名和第五个相片文件名以及它们的长度
我们单击click按钮，可以看到第一个文件名长度是10，第二个文件名长度是9，但是从外观上看这两个文件名的长度是完全一样的！！



我们再加入两个标签来逐个显示文件名中的每一个字符：



我们用括号把每一个字符单独框出来，可以看stu51.jpg文件名中最前面确实有一个不可视的字符！！
原因终于找到了！在每个App Inventor的表头都有一个不可视字符，这应该是App Inventor的Bug，极度隐蔽！！

• 解决问题：
  

如果随机数是1，就要对这个文件名进行特别的操作，将其第一个不可视字符去掉，使之成为一个正常的图片文件名


四、小结
文件的读取及转换：学生的姓名及照片文件名信息比较大，如果直接在App Inventor中编程会非常繁琐，容易出错且不易扩展。我们使用CVS格式的文件StudentName和StudentPhoto来保存学生的姓名信息和照片文件名信息。只需要将文件读入后并转换成列表就可以方便地随机产生对应的学生了
这个应用总体难度不大，但是因为出现的问题非常隐蔽，难以查找。在碰到问题时要耐心、细心。由于App Inventor的调试能力相对比较弱，因此要善于使用各种组件如标签、对话框来进行调试，以得到各种中间结果，方便查找错误。

整个设计都是对计算思维的分解、模式识别、抽象、算法的很好培养和体现。


五、后记
在2017年9月28日重新运行程序发现上述代码出错，可以判断MIT修复了这个bug。但是后来我仍然在多次培训和上课中使用这个例子来讲解如何调试程序：
发现问题，判断可能引起问题的地方，逐个排查，抽丝剥茧，耐心调试，解决问题。
bug，找不出原因让人沮丧，问题解决又成就感十足。真是让人又爱又恨！

六、完整程序（MIT的bug修复后）



程序还增加了晃动手机的操作，晃动一下开始点名，再晃动一下停止。操作与按钮一样，因此使用过程将代码利用。（重复的事情让计算机做，不要复制粘贴！）

这是学生的黑色记忆

木子姐姐 发表于 2019-9-11 10:15
这是学生的黑色记忆

哈哈哈