项目4 基于Node-RED 的物联网前后端设计

2相关知识34任务小结与练习1任务实施任务引入与目标Node-RED安装与认识一、任务引入与目标任务目标任务1将安装Node-RED开发环境,并编写一个简单的流程来认识Node-RED,为接下来完整物联网系统的前后端设计做准备。任务引入一个系统中,物联网功能只是一部分,而物联网部分和其他部分有较大的区别,它和硬件结合比较紧密。针对系统前、后端的设计,有没有适合构建物联网应用程序的强大工具,可以满足快速连接硬件和设备到Web服务呢?二、相关知识什么是Node-REDNode-RED最初是IBM公司在2013年年末开发的一个开源项目,以满足其快速连接硬件和设备到Web服务和其他软件的需求。作为物联网的一种黏合剂,Node-RED很快发展成为一种通用的物联网编程工具。虽然Node-RED最初是用来处理物联网的应用,也就是说,它与现实世界交互和控制设备,但随着它的发展,它已经成为一个较为开放的物联网开发工具。Node-RED编程方法Node-RED是构建物联网应用程序的一个强大工具,其重点是简化代码块的“连接”以执行任务。它使用可视化编程方法,允许开发人员将预定义的代码块(称为“节点”,Node)连接起来执行任务。连接的节点,通常是输入节点、处理节点和输出节点的组合,当它们连接在一起时,构成一个“流”(Flows)。课堂讨论你使用过哪些可视化编程软件?三、任务实施实施设备安装了Windows操作系统的计算机。实施过程1.Node.js安装在官网(/en/)下载,如图4-1所示。图4-1下载Node.js双击安装,然后选择合适的安装目录,如图4-2所示。图4-2选择合适的安装目录三、任务实施如图4-3所示,在ToolsforNativeModules(本机模块的工具)界面不选中方框,否则会下载全部工具到本机,速度比较慢。等待安装完成。2.Node-RED安装如图4-4所示,进入cmd,输入命令:npminstall-g--unsafe-permnode-red。等待安装完成。图4-3不选择本机模块的工具图4-4安装Node-RED三、任务实施3.启动Node-RED如图4-5所示,在cmd输入node-red,即可启动。如图4-6所示,打开浏览器访问Node-RED::1880。需要说明的是,是本机IP,或用localhost表示。如果处在局域网和广域网中,可以在其他设备输入对应的IP地址访问。图4-5启动Node-RED图4-6访问Node-RED三、任务实施4.Node-RED节点如图4-7所示,将左侧的节点拖入中间编辑区,以构建“流”。节点的功能可以在右侧“帮助”栏查看。双击节点,即可对其进行编辑。比如inject节点,手动或定期将消息注入流中。消息的有效荷载可以有多种类型,包括字符串、JavaScript对象或当前时间。消息共有2个属性:topic和payload。在最右侧的设置菜单,点击“节点管理”,可以安装和查看节点,如处理json、邮件、mysql数据库、存储等几类节点。图4-7Node-RED的节点三、任务实施5.第一个Node-RED流程如图4-8所示,使用2个节点,第一个是“inject”(注入)节点,第二个是“debug”(调试)节点。如图4-9所示,第一个节点设置输出消息的payload(载荷)为字符串“hello,world!”,每隔5秒执行一次。图4-8第一个Node-RED流程图4-9编辑inject节点三、任务实施如图4-10所示,第二个节点设置输出消息的payload,消息的payload是由上一个节点输入的。流编辑完成后,点击“部署”按钮,打开右边的调试窗口(虫子图标),即可观察debug节点打印的消息payload,如图411所示。如果不想在调试窗口显示打印内容,那么点击debug节点右侧的框即可。后面消息的payload尽量都是用JSON格式。图4-10编辑debug节点图4-11流程运行结果四、任务小结与练习任务小结任务1通过编写一个简单的流程,让我们认识了Node-RED,为接下来实现完整的物联网系统的前后端设计做准备。修改第一个Node-RED流程中inject节点的消息载荷为JSON对象格式,观察debug节点打印的调试信息。实践练习谢谢聆听2相关知识34任务小结与练习1任务实施任务引入与目标Web展示网关上报的温湿度一、任务引入与目标任务目标任务2通过Node-RED流程设计,接收网关上报的MQTT消息,将消息中温湿度字段的值解析后,通过Web页面展示出来。解析展示的过程,与APP中的设计很像,都需要掌握JSON解析的知识。注意,在任务2中,Node-RED创建了MQTT客户端,与网关、APP中创建的MQTT客户端的地位是相等的。网关用项目3中的程序,将周期上报间隔改为1分钟,其他内容不变,包括消息的主题和消息的载荷。任务引入项目3将网关上报的MQTT消息经过解析,在APP上展示了温湿度的值。有了Node-RED工具之后,我们也可以将硬件检测的温湿度值在Web上展示出来,这样数据可视化的形式就更加丰富了。二、相关知识dashboard节点Node-RED中常用的图形化节点叫做dashboard,它主要用于快速创建实时数据仪表板。在安装节点的输入框内输入“dashboard”,找到名为“node-red-dashborad”的控件并点击安装即可。Web页面布局总体来看,通过dashboard设计的Web页面布局分为三级,分别是:tab、group、spacer。仪表板的布局依赖于tab和group属性,tab可以理解为页面,group是分组,spacer即控件。一个页面里可以有多个分组,建议使用多个分组,而不是一个大组,因为dashboard可以根据页面的大小动态调整分组的位置。三、任务实施实施设备部署了Node-RED和Arduino开发环境的计算机。网关和温湿度传感器各一个。实施过程1.Node-RED接收MQTT消息为了完成本任务中温湿度显示的功能,需要在Node-RED中创建MQTT客户端,接收MQTT消息,设计流程如图4-12所示。图4-12打印温湿度值流程三、任务实施流程中的2个节点,分别是mqttin(用于mqtt请求)和debug(用于打印调试信息)。对于mqttin节点,设置主题为网关上报的消息,如图4-13所示。接下来在mqttin节点中设置要连接的MQTT服务器,如图4-14所示。图4-13编辑mqttin节点图4-14编辑MQTT节点的服务器三、任务实施然后设置debug节点,输出调试信息,如图4-15所示。网关连接温湿度传感器,运行,使用的程序以及硬件连接与项目3保持一致,这里不再介绍。部署Node-RED流程,打开debug窗口,查看结果,如图4-16所示。图4-15编辑debug节点图4-16打印调试结果三、任务实施2.Web页面通过gauge展示温度我们既可以用文本显示消息载荷,也可以用图表显示网关上报的温度值。将前面的节点设为无效,MQTT节点复制后还要再用。增加一个“switch”和“gauge”节点。“switch”判断温度解析值非空,即判断MQTT消息中是否有“temperature”字段,如图417所示。“gauge”放在“健康监测中心”页面(对应Web的一个菜单)的一个“温度”组中。显示的内容是{{msg.payload.temperature}},即提取消息载荷的temperature字段的值,如图4-18所示。图4-17编辑switch节点图4-18编辑gauge节点三、任务实施结果如图4-19所示。网址是:1880/ui,用的是本机IP;如果Node-RED应用服务器部署在公网,可通过公网IP访问;如果部署在局域网,同一局域网里的计算机可以通过局域网IP访问。可以发现采用了二次解析过程,第一次判断非空,第二次再解析展示,与之前APP和网关对MQTT消息解析过程相同。二次解析过程可以避免以下情况:如果上报的是湿度消息,解析为空,展示错误图4-19gauge展示环境温度三、任务实施3.Web页面通过折线图展示温度“健康监测中心”页面新增group,名称为“温度曲线”。流程中需要增加一个change和chart节点,如图4-20所示。设置change节点的载荷(即输出到chart节点的载荷),为输入此节点的载荷的temperature的值,如图4-21所示。图4-20流程中增加温度曲线图4-21编辑change节点三、任务实施在chart节点中,设置显示10分钟的值。折线图中的标签为“十分钟温度变化”。范围、颜色等根据喜好确定即可,如图4-22所示。部署Node-RED流程,然后查看结果,如图4-23所示。图4-22编辑chart节点图4-23gauge和chart显示温度三、任务实施关于UI布局,可以在tab的layout里进行设计,如图4-24所示。可以设置宽度、高度及部件的相对位置,如图4-25所示。图4-24流程的UI布局图4-26温度监控界面完成后重新部署,结果如图4-26所示。图4-25设置UI属性三、任务实施4.Web页面通过gauge、折线图展示温度、湿度参照温度显示,分别以仪表盘和折线图的形式显示网关上报的湿度值。流程如图4-27所示,不再详细分析。调整布局,运行一段时间之后的结果如图4-28所示。图4-27流程中增加湿度监控图4-28温湿度监测情况四、任务小结与练习任务小结任务2在Node-RED中设计流程,分别实现了Node-RED接收MQTT消息、Web页面通过gauge展示温度、Web页面通过折线图展示温度和湿度等功能。任务2重点学习了节点对JSON格式消息的解析方法。将展示温湿度流程中折线图节点的横轴改为20分钟,观察20分钟的变化,将结果提交到课程学习平台。实践练习谢谢聆听2相关知识34任务小结与练习1任务实施任务引入与目标在Node-RED中搭建Web服务器一、任务引入与目标任务目标任务3在Node-RED中搭建Web服务器,APP收到用户反馈意见时,APP中创建的HTTP客户端连接服务器;服务器对HTTP请求进行处理,完成邮件转发,并将响应发回;APP接收HTTP响应,处理其中的数据部分。实现效果:(1)手机点击“反馈建议”按钮后,调出对话框。(2)在对话框输入内容后,以post方式向Node-RED中创建的HTTP服务端提交HTTP请求,网址为后台url加上后缀APP_feedback。(3)Node-RED中创建的HTTP服务端收到请求后,发回响应内容“成功收到,感谢您的反馈与建议”,APP将接收的响应内容在屏幕上Toast出来。(4)后台将收到的内容转发至作者邮箱。任务引入如果用户对APP有一些建议,那么该怎样联系作者呢?可以在Node-RED中创建Web服务器,当用户有建议时,可以通过HTTP客户端向Web服务器提交请求,由Node-RED处理。二、相关知识Node-RED中的邮箱控件Node-RED的输出邮箱控件,把msg.payload作为邮件内容,把msg.topic作为邮件主题。消息接收者可以在节点中配置,如果它是空白的,那么应该使用msg.to来设置它。消息的属性如果留下空白,也可以指定msg.cc(转发的收件箱地址)属性。注意,使用SMTP的SSL端口465。邮箱的IMAP和SMTP服务IMAP是一种电子邮件接收的协议,用于管理和检索来自接收服务器的电子邮件消息。SMTP是一种电子邮件发送的协议,可以使用SMTP从邮件客户端(如QQ邮箱)向接收电子邮件服务器发送、中继或转发邮件。SMTP中继服务可以帮助用户发送电子邮件,而不需要建立自己的SMTP服务器。二、相关知识以QQ邮箱为例,设置IMAP(接收)/SMTP(发送)服务。需要保证IMAP/SMTP服务这一项是开启的,如图4-29所示。如图4-30所示,成功开启后,会给一个授权码,需要记住。如果忘记也没关系,可以再次生成。上述配置的IMAP和SMTP中继服务,会在Node-RED中的接收和发送邮件节点用到,用来实现接收邮件和发送邮件功能。图4-29QQ邮箱的IMAP/SMTP服务图4-30IMAP/SMTP服务的授权码三、任务实施实施设备部署了AndroidStudio和Node-RED开发环境的计算机。实施过程1.APP设计APP设计里,需要用到OkHttp框架和对话框的知识。在ThirdActivity.java中,针对btn32进行设计。(1)对话框。已经添加viewBinding框架,需要在第三个页面编写btn32按钮的事件监听方法。binding3.btn32.setOnClickListener(newView.OnClickListener(){@OverridepublicvoidonClick(Viewview){finalEditTextet=newEditText(ThirdActivity.this);et.setText("很好");AlertDialogalertDialog=newAlertDialog.Builder(ThirdActivity.this).setTitle("请提交意见建议").setView(et).setPositiveButton("确定",newDialogInterface.OnClickListener(){@OverridepublicvoidonClick(DialogInterfacedialogInterface,inti){textSuggest=et.getText().toString();Post_as();}}).setNegativeButton("取消",null).show();}})三、任务实施前面需要定义变量:privateStringtextSuggest;点击“确定”按钮后,调用Post_as()函数,将文本框的内容textSuggest以post的方式、HTTP请求提交给后台:11:1880/APP_feedback。(2)异步请求Post_as()函数。所谓异步请求,就是把请求加入enqueue(队列)中,等待执行。接下来,我们在异步请求函数Post_as()中使用POST方法,提交异步请求,代码如下://异步请求函数privatevoidPost_as(){//创建表单FormBodyformBody=newFormBody.Builder().add("username",).add("feedback",textSuggest).build();//将表单数据放入request中,通过post方法提交Requestrequest=newRequest.Builder().url("11:1880/APP_feedback").post(formBody).build();//将客户端加入队列中,会自动在子线程中运行,返回有2种情况:失败或者有响应okHttpClient.newCall(request).enqueue(newCallback(){@OverridepublicvoidonFailure(@NonNullCallcall,@NonNullIOExceptione){e.printStackTrace();}三、任务实施如果没有收到response,那么不做处理;如果收到response,那么Toast出后台响应的数据部分。@OverridepublicvoidonResponse(@NonNullCallcall,@NonNullResponseresponse)throwsIOException{//获取响应的数据部分Stringresult=response.body().string();//在主线程中Toast出来runOnUiThread(newRunnable(){@Overridepublicvoidrun(){Toast.makeText(ThirdActivity.this,"后台回复:"+result,Toast.LENGTH_SHORT).show();}});}});}三、任务实施其中,11为Node-RED所部署的电脑在局域网中的IP地址。如图4-31所示,查看IP地址的方法:cmd命令行。输入:ipconfig。至此,APP设计就完成了,结构如图4-32所示。图4-31查看IP地址图4-32APP结构三、任务实施2.Node-RED流程设计(1)测试打印APP提交的表单信息。在cmd命令行,输入:node-red。启动Node-RED。注意不要关闭cmd。在NR中,添加一个httpin节点和一个debug节点,连接起来。httpin是一个提供Web服务的HTTP端点(HTTP服务器),供APP访问。如图4-33所示,配置httpin节点,请求方式为POST;URL的后缀为/APP_feedback,完整的URL为11:1880/APP_feedback。debug节点直接打印消息内容,即httpin节点(HTTP服务器)收到的消息内容。图4-33编辑httpin节点三、任务实施部署流程2,运行APP。当APP提交反馈意见“很好!!!”时,Node-RED的debug打印内容如图4-34所示。图4-34表明:Node-RED成功收到APP的HTTP客户端POST的数据,这正是APP代码的2个表单项:图4-34Node-RED接收到HTTP请求//创建表单FormBodyformBody=newFormBody.Builder().add("username",).add("feedback",textSuggest).build();三、任务实施(2)Web展示APP提交的表单信息。在Web页面显示APP提交的表单内容是较为容易的,回顾之前的JSON解析知识即可完成。设计dashboard,添加页面(菜单)“实时反馈与建议”,如图4-35所示,添加一个组“反馈与建议”,组里面添加2个“text”节点作为组件。2个text节点的配置如图4-36所示。图4-35流程中添加反馈与建议部分图4-36编辑text节点三、任务实施查看Web页面,如图4-37所示。(3)Web服务器给APP发回response。如图4-38所示,在流程中增加一个“change”节点和一个“httpresponse”节点。httpresponse节点将响应(response)送回提交请求(request)的HTTP客户端。图4-37查看Web页面图4-38流程中设定响应内容图4-39编辑change节点change节点配置如图4-39所示。三、任务实施httpresponse节点按默认设置即可,如图4-40所示。结果如图4-41所示:APP提交之后,会Toast从后台response的内容。图4-40编辑httpresponse节点图4-41APP接收到response三、任务实施在流程中添加发送邮件节点,如图4-42所示。如果没有这个节点,那么需要安装,如图4-43所示。图4-42添加发送邮件节点图4-43安装email节点三、任务实施发送邮件节点配置,包括收件箱地址、邮件服务器和端口号、发件箱地址和授权码,如图4-44所示。部署流程,查看收件箱是否收到邮件,结果如图4-45所示。图4-44编辑email节点图4-45收件箱收到邮件当然我们还可以在邮件节点的前面加上函数节点,配置邮件转发等功能,可自行查阅资料研究。我们还可以让Node-RED接收邮件。四、任务小结与练习任务小结任务3在Node-RED中设计流程,并结合APP中POST方式的HTTP请求,实现了邮件转发功能。修改HTTP请求时表单中的字段名及值,在自己的邮箱中接收用户提交的反馈意见。实践练习谢谢聆听2相关知识34任务小结与练习1任务实施任务引入与目标部署MySQL数据库服务器一、任务引入与目标任务引入APP中的很多功能都需要用到数据库,比如用户登录和注册。如果将用户名和密码存放在Android工程中,是很难实现注册功能的。我们可以部署MySQL数据库服务器,来完成需要数据存储的功能。任务目标任务4将在计算机上部署MySQL数据库服务器,并安装可视化数据库管理软件,方便数据库的操作。如果拥有一台云服务器,那么将MySQL数据库部署在上面,使用会更为方便。二、相关知识使用数据库的优势数据库是现代应用程序的重要组成部分,使用数据库可以带来以下几个优势:(1)数据持久化。通过将数据存储在数据库中,可以确保数据即使在应用程序关闭或重启之后也能够保存下来,并且不会因为系统崩溃或断电等问题而丢失。(2)数据共享。多个应用程序可以使用同一个数据库,从而实现数据共享和协作,这样可以提高团队协作效率,避免重复开发。(3)数据安全性。通过使用数据库管理系统,可以对数据进行加密、备份和恢复等操作,从而保证数据的安全性和可靠性。(4)数据一致性。在数据库中,可以通过事务控制机制来保证数据的一致性,防止数据冲突和错误。(5)高效查询。数据库具有快速查询和检索数据的能力,便于进行数据分析和处理,提高数据的处理效率和准确性。总之,使用数据库不仅可以提高应用程序的可靠性、安全性和灵活性,还可以提高数据处理效率和数据质量,是现代应用程序的不可或缺的一部分。二、相关知识常用的数据库在开发中,常用的数据库有如下几种:(1)SQLite是一个轻量级的嵌入式关系型数据库管理系统,适用于移动设备和嵌入式设备等资源受限环境。它支持大部分SQL语法,并具有高可靠性、低复杂度和易于集成的特点。(2)MySQL是一种流行的关系型数据库管理系统,适用于多用户、高并发的应用场景。它具有高性能、高可靠性和可扩展性等优点,同时支持多种操作系统和编程语言。(3)Oracle是一个企业级关系型数据库管理系统,适用于高要求的数据处理和管理场景。它具有高可靠性、安全性、灵活性和可扩展性等优点,并支持多种操作系统和编程语言。(4)MongoDB是一个面向文档的NoSQL数据库管理系统,适用于大规模数据存储和处理场景。它具有高速度、高伸缩性和易于扩展等优点,并支持多种操作系统和编程语言。(5)Redis是一个高速的内存键值存储数据库,适用于高速数据读写和查询场景。它具有高速度、高吞吐量和低延迟等优点,并支持多种数据结构和编程语言。这些数据库各有优劣,选择哪种数据库取决于具体应用场景和需求。例如,如果需要在移动设备上存储和管理数据,则SQLite可能是更好的选择;如果需要处理高并发的事务和请求,则MySQL或Oracle可能更适合;如果需要存储大量文档类型的数据,则MongoDB可能更合适;如果需要高速读写和查询数据,则Redis可能更适合。三、任务实施实施设备安装了Windows操作系统的计算机。实施过程1.下载MySQL安装包在浏览器中输入官网网址(/downloads/windows/installer/8.0.html),进入下载页面,下载安装包,如图4-46所示。图4-46下载MySQL安装包三、任务实施2.安装MySQL双击安装,选择安装类型:仅服务器,如图4-47所示。其他步骤按默认操作,直到显示安装完成,如图4-48所示。图4-47选择安装类型界面图4-48MySQL安装完成界面三、任务实施3.配置MySQL出现以下界面,默认选第一项,主要是端口号的设置,如图4-49所示。密码验证方式有两种:caching_sha2_password,mysql_native_password。建议选择第二种,如图4-50所示。图4-49端口号设置界面图4-50密码验证方式界面三、任务实施设置密码,如图4-51所示。系统服务名称、启动方式等按默认即可,如图4-52所示。图4-51设置密码界面图4-52系统服务界面三、任务实施如图4-53所示,勾选Yes。配置完成,然后逐步执行即可。4.测试MySQL如图4-54所示,从开始菜单中打开刚刚安装的mysql命令行客户端,输入密码按回车键进入,然后输入“showdatabases;”。图4-54的命令行界面显示了MySQL服务器中默认存在的数据库,工作正常。图4-53用户权限界面图4-54测试显示数据库名三、任务实施下载网址:/download.php,如图4-55所示。下载后,双击安装。安装完成后,登录界面如图4-56所示。输入正确的IP地址、用户名、密码、端口,即可登录,如图4-57所示。图4-55下载HeidiSQL图4-56HeidiSQL会话图4-57进入MySQL四、任务小结与练习任务小结任务4在计算机上部署了MySQL数据库服务器,并安装了可视化数据库管理软件HeidiSQL。为MySQL增加一个普通用户,然后通过HeidiSQL找到mysql数据库里的user表,看看新增加的用户是否存在。实践练习谢谢聆听2相关知识34任务小结与练习1任务实施任务引入与目标Node-RED对MySQL数据库的增删改查一、任务引入与目标任务引入数据库最基本和常用的操作就是对数据表记录的增删改查。在Node-RED中该如何访问MySQL中的数据库,进而对数据表中的记录进行增删改查呢?任务目标任务5将在MySQL里创建数据库和数据表,通过Node-RED访问数据库,实现对数据表记录的增删改查,其中的关键是SQL语句语法。二、相关知识增加一条记录的SQL语句语法:INSERTINTOtable_name(column1,column2,column3,...)VALUES(value1,value2,value3,...);功能是:插入一条记录到表table_name中,值是value1,value2,value3,...。对应字段为column1,column2,column3,...。删除记录的SQL语句语法:DELETEFROMtable_nameWHEREsome_column=some_value;功能是:当满足条件some_column=some_value时,从表table_name中删除某条记录。二、相关知识修改记录的SQL语句语法:UPDATEtable_nameSETcolumn1=value1,column2=value2,...WHEREsome_column=some_value;功能是:当满足条件some_column=some_value时,修改table_name表中记录column1字段的值为value1,column2字段的值为value2,以此类推。查询表语法:SELECTcolumn1,column2FROMtable_name;功能是:查询表中记录的column1和column2列的值;可以使用WHERE语句来包含任何条件,可以使用LIMIT属性来设定返回的记录数。课堂讨论SQL语句中的关键字区分大小写吗?三、任务实施实施设备部署了MySQL和Node-RED开发环境的计算机。实施过程1.新建数据库和数据表新建数据库和数据表在命令行和可视化管理软件中均可完成。任务5以HeidiSQL为例讲解。(1)创建数据库node_red_test。创建新的数据库node_red_test,如图4-58所示。图4-58创建数据库三、任务实施(2)创建数据表student。如图4-59所示,创建数据表,共四个字段:id、name、age、class。其中,id为自动增长。id设为主键,如图4-60所示。图4-59创建数据表图4-60创建主键索引然后保存即可。现在表中数据记录显示为0条记录,如图4-61所示。图4-61student表的记录三、任务实施2.配置Node-RED中的mysql节点启动Node-RED。先在命令行输入node-red,然后在浏览器输入网址登录::1880/。将mysql节点拖入流程中,如图4-62所示,配置mysql节点。如图4-63所示,如果信息正确,部署之后,就会发现数据库node_red_test连接成功。图4-62编辑mysql节点图4-63成功连接到数据库node_red_test三、任务实施3.通过mysql节点增加一条记录如图4-64所示,拖入一个inject节点和一个function节点,连接起来。其中,inject用于单次触发,function用于编写数据库操作的SQL语句。节点的配置如图4-65所示。图4-64增加一条记录流程图4-65编辑inject节点三、任务实施function节点实际上就是一个JavaScript代码编辑器,在function节点的函数选项卡编辑msg的topic和payload,传入下一节点(即node_red_test数据库节点),如图4-66所示。完整的SQL语句为:insertinto"student"("id","name","age","class")values(,"zhangsan",19,"IOT2101")。其中,id的值为空,因为id是自动增加的,可以不用赋值。完成后部署。点击inject节点触发一次,如图4-67所示。图4-66编辑function节点图4-68数据表增加了一条记录查看数据库node_red_test中student表的数据,增加了一条记录,如图4-68所示。图4-67触发inject节点三、任务实施按同样的方法,增加3个inject和3个function节点,在数据表中增加3条记录,如图4-69所示。图4-69增加4条记录的流程图4-70数据表中的4条记录重新部署,新增加的3个inject节点各触发一次。结果如图4-70所示。三、任务实施4.通过mysql节点修改记录假设刚才输入的lisi的年龄错了,不是20岁而是21岁。修改记录的流程如图4-71所示。图4-71修改记录的流程图4-72编辑function节点如图4-72所示,用SQL语句编辑function节点,语句为:update"student"set"age"=21where"name"="lisi"。三、任务实施部署之后,单击inject节点左侧的方框触发,如图4-73所示。图4-73触发inject节点图4-74修改数据表中的记录结果如图4-74所示,可见,lisi的age被修改成了21岁。三、任务实施5.通过mysql节点查询数据表(1)查询操作。在查询操作之前,把上面2个mysql节点设置为无效,以节省资源。节点无效的方法:打开节点,在左下角点击即可在“有效”和“无效”之间切换。节点无效之后,则变成半透明的。下面编辑流程,共4个节点,如图4-75所示。如图4-76所示编辑function节点,传往下一个节点的消息为SQL语句:select*from"student"where"name"="lisi"。图4-75查询数据表的流程图4-76编辑function节点三、任务实施部署之后,触发。打印结果如图4-77所示。因为只查询到一条记录,所以返回的列表(数组)中只有一个元素。这个唯一的索引为0的元素是JsonObject(JSON对象)格式的,由4个成员构成。所以可能有人会问:“如何取出其班级值呢?”有了数组和JSON对象的知识,我们很容易可以写出:msg.payload[0].class。可以在debug节点前增加一个function节点或change节点,获取数据库查询的返回内容并提取之后,在debug打印出来。(2)change节点解析。增加change节点,如图4-78所示。图4-77打印查询结果图4-78增加change节点三、任务实施change节点配置如图4-79所示。部署并触发,观察结果,如图4-80所示。图4-79编辑change节点图4-80打印解析结果三、任务实施(3)function节点解析。增加function节点,如图4-81所示。function节点配置,如图4-82所示。图4-81增加function节点图4-82编辑function节点三、任务实施部署并触发,观察结果,如图4-83所示。6.通过mysql节点删除记录删除name为wangwu的记录,流程如图4-84所示。图4-83打印解析结果图4-84删除记录流程三、任务实施如图4-85所示,配置function节点,SQL语句为:delete

from"student"where"name"="wangwu"。部署并触发,如图4-86所示。图4-85编辑function节点图4-87删除一条记录的结果查看结果,如图4-87所示,wangwu的记录已经不在了。图4-86流程运行结果四、任务小结与练习任务小结任务5通过Node-RED中的mysql节点,实现了对数据表记录的增删改查,为接下来物联网系统中的数据库操作做好了准备。需要注意采用SQL语句实现的增删改查,查询时会返回一个数组,数组的每个元素就是数据库查询结果集里面的每条记录,数组元素是满足JSON对象格式的。可以按照专业和班级同学的情况,创建数据库和数据表,通过Node-RED的mysql节点完成增删改查操作。实践练习谢谢聆听2相关知识34任务小结与练习1任务实施任务引入与目标APP的用户注册功能一、任务引入与目标任务引入有了任务5中Node-RED对数据库操作的基础之后,我们就可以设计APP的用户注册功能了。注册功能的关键是APP中HTTP客户端和Node-RED中Web服务器之间的HTTP通信,以及Node-RED对数据表的查询和增加操作。任务目标任务6将实现:(1)在APP中点击btn12按钮,弹出自定义对话框;(2)在对话框中输入要注册的用户名和密码,通过HTTP客户端向Web服务器发送POST方式的请求;(3)Web服务器接收到请求后,查询用户表中是否已存在用户名并发回response,如不存在则往用户表增加一条记录(即注册功能);(4)APP的HTTP客户端收到HTTPresponse后,Toast注册成功与否的提示信息。二、相关知识常用的MySQL索引索引是数据库中的一种数据结构,它可以提高查询和排序的速度,并且加速对表的访问。MySQL支持多种类型的索引,以下是一些常用的MySQL索引:(1)主键索引是唯一的索引,用于确保表中每行数据的唯一性,可以提供快速的数据查询和排序;(2)唯一索引也用于确保表中每行数据的唯一性,但允许空值,与主键索引不同,唯一索引可以有多个;(3)普通索引是最基本的索引类型,它没有任何约束条件,可以用于快速查询和排序;(4)全文索引是一种特殊的索引类型,它可以用于全文搜索和匹配文本内容,而不是只能用于精确匹配;(5)组合索引是将多个列作为一个索引来创建的,可以提高多列联合查询和排序的速度。需要注意的是,尽管索引可以提高查询和排序的速度,但过多的索引会使写入操作变慢并占用更多的磁盘空间。因此,在设计和使用索引时,我们应该权衡查询和写入操作的比例,并根据具体场景选择适当的索引类型和数量。二、相关知识如何实现APP的用户注册功能实现APP的用户注册功能需要在客户端和服务器端分别编写代码。客户端:首先在APP中添加用户注册界面,并采集用户输入的基本信息,如用户名、密码、电子邮件地址等;然后对用户输入的信息进行验证和校验,确保数据的正确性和完整性;最后将用户输入的信息封装成一个请求对象,并通过HTTP协议发送到服务器端。服务器端:首先接收来自客户端的用户注册请求,并解析请求参数;然后对用户输入的信息进行服务器端验证和校验,包括用户名是否已经存在、密码复杂度是否够高等;如果数据验证通过,则将用户注册信息保存到数据库中,并返回注册成功响应给客户端。客户端:根据服务器的响应结果,在注册页面上显示注册成功或失败。需要注意的是,为了保证用户数据的安全和隐私,用户注册信息应该使用加密技术进行传输和存储,还可以采用验证码、第三方登录、手机号码绑定等方式增强用户注册的安全性。课堂讨论如果不考虑安全性,是否可以不使用服务器端,仅仅在客户端实现APP的注册功能?三、任务实施实施设备部署了AndroidStudio、MySQL、Node-RED开发环境的计算机。实施过程1.APP设计(1)btn12按钮的单击事件监听。btn12按钮在第一个页面的布局如图4-88所示。在第一个页面的活动文件MainActivity.java编写btn12按钮的事件监听方法,如图4-89所示。图4-88btn12的布局图4-89btn12按钮的事件监听三、任务实施(2)实现对话框功能。定义两个变量:privateStringuserNameReg;privateStringpassWordReg;对话框代码:以上代码会调出2个输入框。点击“确定”按钮,将输入框的内容取出,分别赋值给变量userName和passWord。接下来以post的方式、HTTP请求提交给后台。publicvoidonClick(Viewview){//容器layout:线性布局,包括2个输入框LinearLayoutlayout=newLinearLayout(MainActivity.this);layout.setOrientation(LinearLayout.VERTICAL);finalEditTextet1=newEditText(MainActivity.this);et1.setText("用户名:");layout.addView(et1);finalEditTextet2=newEditText(MainActivity.this);et2.setText("密码:");layout.addView(et2);//对话框:由Title、2个输入框、确定按钮、取消按钮组成AlertDialogalertDialog=newAlertDialog.Builder(MainActivity.this).setTitle("请输入用户名和密码")//标题.setView(layout)//输入框et1和et2.setPositiveButton("确定",newDialogInterface.OnClickListener(){@OverridepublicvoidonClick(DialogInterfacedialogInterface,inti){userNameReg=et1.getText().toString();passWordReg=et2.getText().toString();}}).setNegativeButton("取消",null).show();}三、任务实施(3)提交HTPP请求与接收响应。添加OkHttp框架、网络权限配置等,在之前的项目中已经完成。创建HTTP客户端对象,如图4-90所示。编写一个异步请求函数,在对话框确定按钮中调用执行。所谓的异步请求,就是把请求加入enqueue(队列)中,等待执行。将在异步请求函数中用POST方法。图4-90创建HTTP客户端对象//异步请求函数privatevoidRegPost_es(){//创建表单FormBodyformBody=newFormBody.Builder().add("username",userNameReg).add("password",passWordReg).build();三、任务实施//表单数据放在request中,通过post方法提交Requestrequest=newRequest.Builder().url("11:1880/APP_register").post(formBody).build();//将客户端加入队列中,会自动在子线程中运行,返回有2种情况:失败或者有响应okHttpClient.newCall(request).enqueue(newCallback(){@OverridepublicvoidonFailure(@NonNullCallcall,@NonNullIOExceptione){e.printStackTrace();}@OverridepublicvoidonResponse(@NonNullCallcall,@NonNullResponseresponse)throwsIOException{//获取响应的数据部分Stringresult=response.body().string();//根据response,在主线程中Toast出来runOnUiThread(newRunnable(){@Overridepublicvoidrun(){if(result.equals("SuccessRegistration")){Toast.makeText(MainActivity.this,"恭喜,注册成功!",Toast.LENGTH_SHORT).show();}elseif(result.equals("UsernameExists")){Toast.makeText(MainActivity.this,"用户名已存在,请重新注册!",Toast.LENGTH_SHORT).show();}else{Toast.makeText(MainActivity.this,"未知错误!",Toast.LENGTH_SHORT).show();}}});}});}三、任务实施另外,调用函数RegPost_es,如图4-91所示。其中,11为Node-RED所部署的电脑在局域网中的IP地址。查询IP地址的方法为cmd命令行,输入:ipconfig。如果没有收到response,打印异常信息;如果收到response,根据情况,Toast出注册成功或失败的信息。至此,APP设计就完成了,接下来设计数据库以及Node-RED的流程。图4-91调用函数RegPost_es三、任务实施2.数据库设计登录MySQL,如图4-92所示,在数据库node_red_test中创建数据表user,共3个字段:id、username、password。如图4-93所示,将id设为主键,保存。记录为0条,如图4-94所示。图4-92创建数据表user图4-94查询数据记录图4-93创建主键索引三、任务实施3.Node-RED设计(1)流程_查询用户。如图4-95所示设计流程,由4个节点组成,分别是httpin(Web服务器)、function1(获取表单数据)、function2(编写SQL查询语句)、mysql(数据库)。为了调试,另外添加3个debug节点。图4-95查询用户流程图4-96编辑httpin节点配置httpin节点,如图4-96所示。三、任务实施获取表单数据节点配置,如图4-97所示。如图4-98所示,编辑SQL语句节点,语句:select*from

"user"where"username"="admin"。mysql节点的配置如图4-99所示。图4-98编辑SQL语句节点图4-99编辑mysql节点图4-97编辑function节点三、任务实施部署流程3,手机运行APP,如图4-100所示。点击APP的注册按钮,在对话框中输入用户名和密码,点击确定。Node-RED打印调试信息,效果如图4-101所示。可见,我们能够成功根据提交的用户名查询数据库,但数据库返回结果为空。这是因为数据表user的数据就是空的。图4-100APP提交用户名和密码图4-101Node-RED打印调试信息三、任务实施如果前面查询不到记录,则可在数据库中增加一条记录(insert),即注册功能。流程如图4-102所示。在上个流程的基础上,根据数据库查询结果判断是否已存在用户名:若已存在,则向APP的HTTP客户端回复“UsernameExists”;若不存在,则编写增加SQL语句,连接数据库执行insert操作,并向APP的HTTP客户端回复“SuccessRegistration”。如图4-103所示,在“获取用户名和密码”函数节点,增加2个在flow内使用的全局变量,后边的“insertuser”的节点要用到。图4-102注册用户流程图4-103编辑function节点三、任务实施switch节点判断查询结果里id字段的值是否为空,即数据表中是否有同名字段,如图4-104所示。如图4-105所示,在change节点编辑response内容,送给httpresponse节点(response内容将发还请求客户端),告知用户名已存在。图4-104编辑switch节点图4-105编辑change节点三、任务实施如图4-106所示,“insertuser”函数节点会获取全局变量“username”和“password”的值,用在SQL语句的编写过程中。如图4-107所示,告知APP的HTTP客户端注册成功。图4-106编辑insertuser节点图4-107编辑成功回复的change节点三、任务实施4.结果测试部署流程。根据APP提交的用户名和数据表中存在的用户名匹配情况,可能用户注册成功,也可能注册失败。(1)注册成功的情况。如图4-108所示,在APP的注册按钮调出的对话框中输入用户名和密码,Toast“恭喜,注册成功”。如果原来数据库不存在,就会添加进去。图4-108APP注册成功三、任务实施如图4-109所示,数据库增加了一条记录。(2)注册失败的情况。如果已存在同一个用户名,则会提示注册不成功,如图4-110所示。图4-110注册失败的情况图4-109数据库增加了一条记录四、任务小结与练习任务小结任务6实现了APP中用户注册功能,包括APP、数据库和Node-RED的设计。用户能否注册成功的关键是提交的用户名和数据表中的用户名是否匹配。可以注册若干个用户名,如果APP显示注册成功的话,在数据库中查看数据表的记录,结果提交到课程学习平台。实践练习谢谢聆听2相关知识34任务小结与练习1任务实施任务引入与目标APP的用户登录功能一、任务引入与目标任务引入任务6实现了APP的用户注册功能,接下来是APP的用户登录功能。用户能否注册成功的关键是提交的用户名和数据表中的用户名是否匹配。那么用户能否登录成功的关键又是匹配什么呢?很显然,既要用户名匹配,也要密码匹配,具体在Node-RED中通过流程实现判断。任务目标任务7将实现以下目标:在APP中点击btn11按钮时,弹出自定义对话框;在对话框中输入要登录的用户名和密码,通过HTTP客户端向Web服务器发送POST方式的请求;Web服务器接收到请求后,查询用户表中是否已存在用户名以及密码是否相符,并发回response;如果用户名和密码均匹配,则发回登录成功的response;APP的HTTP客户端收到HTTPresponse后,根据response的内容,决定是否跳转到APP第二页,或者Toast提示信息。二、相关知识Android工程中变量的作用域在Android工程中,变量的作用域是指变量在程序中可以被访问的范围。变量的作用域由它在代码中声明的位置和使用的修饰符等决定。以下是一些常见的变量作用域:(1)局部变量是在方法内部或代码块中定义的变量,只能在该方法或代码块中使用。局部变量可以根据需要进行初始化,包括基本数据类型和对象引用类型。(2)成员变量是在类中定义的变量,可以被类中的所有方法和代码块访问。成员变量分为实例变量和静态变量两种类型。实例变量只有在创建类的实例后才能访问,而静态变量可以在类被加载时就被访问。(3)参数变量是作为方法的参数传递进来的变量,可以在方法内部使用。参数变量的作用域与局部变量相同,只能在方法内部访问。需要注意的是,变量的作用域和生命周期不同,变量作用域结束并不意味着它的生命周期也结束。例如,一个对象引用类型的变量,在方法结束后其作用域结束,但是其引用的对象可能仍然存在于内存中,直到垃圾回收器将其清除。二、相关知识Android中的Toast在Android开发中,Toast是一个简单的提示框架,用于在屏幕上显示短暂的消息。Toast可以用于提示用户某个操作已成功完成、某个错误已发生或其他一些需要向用户展示信息的场景。以下是使用Toast的一般步骤:调用静态方法makeText()来创建Toast对象,并传入Context、提示文本和Toast显示时间等参数;调用show()方法将Toast显示在屏幕上;当Toast显示时间结束后,Toast会自动消失。例如,下面的代码演示了如何在Android应用程序中使用Toast://定义一个Context变量Contextcontext=getApplicationContext();//创建和显示ToastCharSequencetext="HelloToast!";intduration=Toast.LENGTH_SHORT;Toasttoast=Toast.makeText(context,text,duration);toast.show();在这个例子中,我们首先获取了一个ApplicationContext对象;然后创建了一个Toast对象,并设置Toast提示文本为“HelloToast!”,Toast显示时间为SHORT(即2秒钟);最后,调用show()方法,在屏幕上显示Toast。三、任务实施实施设备部署了AndroidStudio、MySQL、Node-RED开发环境的计算机。实施过程1.APP设计(1)btn11按钮的单击事件监听。btn11按钮在第一个页面的布局如图4-111所示。图4-111btn11的布局三、任务实施在第一个页面的活动文件MainActivity.java中编写btn11按钮的事件监听方法,如图4-112所示。项目2的任务6实现过btn11的单击功能,单击btn11后APP直接跳转到page2。本任务需要完善btn11的单击功能,实现点击btn11后访问数据库,用户名和密码验证无误后APP跳转到page2。另外,登录功能的很多代码与注册功能类似,可以拷贝后修改。图4-112btn11按钮的事件监听三、任务实施对话框代码:程序的功能:点击btn11后,会跳出2个输入框和1个“确定”按钮;取出输入框的内容赋值给变量userNameLog和passWordLog;点击“确定”按钮后,将userNameLog和passWordLog作为参数,以post的方式提交HTTP请求到Node-RED中的HTTP服务端。binding1.btn11.setOnClickListener(newView.OnClickListener(){@OverridepublicvoidonClick(Viewview){//容器layout:线性布局,包括2个输入框LinearLayoutlayout=newLinearLayout(MainActivity.this);layout.setOrientation(LinearLayout.VERTICAL);finalEditTextet3=newEditText(MainActivity.this);et3.setText("用户名:");layout.addView(et3);finalEditTextet4=newEditText(MainActivity.this);et4.setText("密码:");layout.addView(et4);//对话框:由Title、2个输入框、确定按钮、取消按钮组成AlertDialogalertDialog=newAlertDialog.Builder(MainActivity.this).setTitle("请输入用户名和密码")//标题.setView(layout)//输入框et3和et4.setPositiveButton("确定",newDialogInterface.OnClickListener