项目2 Android 基础与物联网APP 布局

2相关知识34任务小结与练习1任务实施任务引入与目标Android开发环境搭建一、任务引入与目标任务目标任务1将在Windows操作系统计算机中搭建Android开发环境，主要包括AndroidStudio和AndroidSDK。我们将编写运行第一个APP，并介绍运行时的相关配置。任务引入经过项目1的学习，我们可以使用ESP32网关、较少的外部设备和Arduino开发环境创建一个于本地工作的硬件系统。但如果要构建一个方便实用的物联网系统，我们还需要进行移动应用的开发，即APP的设计。二、相关知识AndroidStudio有许多可用的AndroidIDE可以用于Android应用的开发。IDE是集成开发环境(IntegratedDevelopmentEnvironment)的英文缩写,也被称为代码编辑器。AndroidStudio是最受欢迎的AndroidIDE之一。在2013年5月16日的GoogleI/O大会上宣布后，AndroidStudio开始流行。开发者可以在编写程序的同时，看到应用在不同尺寸屏幕中的样子，使用方便。Arduino程序结构SDK全称SoftwareDevelopmentKit,即软件开发工具包。AndroidSDK是用于为特定的软件包、软件框架、硬件平台、操作系统等建立应用软件的开发工具的集合。AndroidSDK可以手动下载，但更经常是通过AndroidStudio下载，还可以下载安装一些SDK工具，如手机模拟器、USB驱动等。二、相关知识你还知道有哪些AndroidIDE?课堂讨论相关链接AndroidStudio官网:/studio/。三、任务实施实施设备安装了Windows操作系统的计算机（最好是云服务器）。实施过程软件安装（1）下载AndroidStudioAndroidStudio安装包下载路径:/studio，如图2-1所示。图2-1

AndroidStudio下载路径三、任务实施（2）安装AndroidStudio下载完成后，双击安装包，选择合适的安装路径，如图2-2所示。其他步骤按照默认选项即可安装。图2-2AndroidStudio安装路径（3）AndroidSDK安装在图2-3所示界面，询问是否导入设置，选择不导入。图2-3询问是否导入设置三、任务实施图2-4提示找不到AndroidSDK在图2-4所示界面，系统会提示找不到AndroidSDK，选择“Cancel”。图2-5选择标准安装选择标准安装,如图2-5所示。三、任务实施根据喜好选择UI主题,暗黑或者明亮模式均可，如图2-6所示。图2-6UI主题询问软件许可证,选择接受,如图2-7所示。其他步骤按照默认即可，然后等待安装完成。图2-7软件许可证三、任务实施2.第一个APP(1)新建AndroidStudio工程。进入欢迎页面后，可以点击“NewProject”新建一个工程,，也可以打开已有的工程。现在新建一个工程。选择“EmptyActivity”界面模板,如图2-8所示。图2-8选择“EmptyActivity”界面模板三、任务实施命名工程,选择语言，设置支持的最低安卓版本，如图2-9所示。图2-9新建工程的选项三、任务实施(2)运行APP。进入工程,如图2-10所示，可将版本介绍关闭。图2-10关闭版本介绍点击图2-10中的运行按钮，即可在虚拟机上运行APP,如图2-11所示。图2-11在虚拟机上运行APP三、任务实施3.AndroidStudio进阶(1)下载不同平台版本的SDK。从File→Settings可以打开界面。勾选当前AndroidStudio可以支持调试的Android平台版本SDK，点击Apply进行下载,如图2-12所示。图2-12下载SDK三、任务实施(2)下载SDK工具。安装GoogleUSBDriver，如图2-13所示。用USB线将计算机和安卓手机连接，可在真机调试APP,或将APP下载到手机运行。图2-13下载SDK工具(3)手机真机设置。在手机设置中找到手机的版本号，然后快速点击几次版本号，就可以进入开发者模式。找到开发者选项,根据需要勾选“USB调试(连接USB后启用调试模式)”“USB安装(允许通过USB安装应用)”。通过USB线连接计算机和安卓手机,即可在AndroidStudio里看到真机。点击Run即在真机下载运行。在电脑的设备管理器———通用串行总线设备处也可以看到真机的型号。如果询问是否允许USB调试，则选择同意。三、任务实施(4)AndroidStudio初始界面。如果不想启动AndroidStudio后打开上一个工程,可以不勾选“Reopenprojectsonstartup”，如图2-14所示。这样每次打开AndroidStudio，都会进入新的开始界面。图2-14设置AndroidStudio开始界面四、任务小结与练习任务小结任务1在计算机中搭建Android开发环境,并进行了相关配置。编写一个APP,分别在虚拟机和真机上运行,将运行照片上传到课程学习平台。实践练习谢谢聆听2相关知识34任务小结与练习1任务实施任务引入与目标自定义对话框的设计一、任务引入与目标任务目标在任务2中,将新建一个AndroidStudio工程,添加一个按钮控件,当点击按钮时,弹出自定义对话框。重点内容是自定义对话框的创建过程。任务引入在使用物联网APP的过程中,往往会遇到一些场合,需要提醒用户或引导用户如何进行下一步操作,用户确认后再进入后续流程,以避免一些不可逆的风险。实现这样的功能,我们就需要学习对话框控件。二、相关知识AlertDialog介绍AlertDialog在界面上弹出一个对话框,这个对话框是置顶于其他所有界面元素之上的,因此能够屏蔽掉其他控件的交互能力。考虑AlertDialog的使用场景,它是在满足某个时机才会被触发,比如用户点击了某个按钮,或者出现异常状况。而TextView、ImageView、Button等控件,一般都是固定在界面上来使用的。AlertDialog一般由图标、标题、内容、按钮等元素组成,如图2-15所示。用户可以根据需求,设计AlertDialog弹出不同的内容。例如,提示对话框的内容是文本框,显示提示内容;单选对话框的内容是一个单项选择列表;而自定义对话框可以自行设计内容,如登录注册时的一个或若干个输入框。图2-15AlertDialog结构二、相关知识自定义对话框的创建过程AlertDialog并不是在布局文件中创建的,而是在活动文件中通过构造器(AlertDialog.Builder)来构造图标、标题、内容和按钮等元素的。自定义对话框的创建过程如下:(1)创建构造器AlertDialog.Builder的对象;(2)AlertDialog.Builder调用setIcon、setTitle、setView方法,构造对话框的图标、标题、内容等元素,其中图标和标题可以不存在;(3)AlertDialog.Builder调用setPositiveButton、setNeutralButton、setNegative-Button方法,设置正面按钮、中立按钮和负面按钮,其中正面按钮和负面按钮比较常用;(4)AlertDialog.Builder调用show方法,让对话框在界面上显示。在本任务中,自定义对话框的内容区是一个输入框EditView。创建EditView对象后,通过AlertDialog.Builder的setView方法,将EditView对象构造为对话框的内容。二、相关知识你还知道哪些类型的对话框?它们分别用于什么场合?课堂讨论viewBinding框架视图访问有findViewById、ButterKnife等多种方式,而通过viewBinding框架可以更轻松地编写与视图交互的代码。viewBinding的意思就是将view与代码绑定在一起,可以优雅地在活动文件代码中引用layout文件中的view控件。启用视图绑定功能后,系统会为每一个xml布局文件各生成一个绑定类。每一个绑定类均包含对根视图以及具备id的全部视图的引用。系统会经过如下方式生成绑定类的名称:将xml布局文件的名称转换为驼峰式大小写,并在末尾添加“Binding”一词。三、任务实施实施设备安装了AndroidStudio开发环境的计算机。实施过程1.创建工程及配置如图2-16所示,新建Android工程“AlertDialog”,在app→build.gradle中添加viewBinding框架:图2-16添加viewBinding框架android.buildFeatures.viewBinding=true点击同步。因为添加了viewBinding框架,所以会为每一个布局文件自动生成绑定类,比如会为activity_main.xml生成ActivityMainBinding类。三、任务实施在MainActivity.java文件中,创建了ActivityMainBinding类对象binding,在on-Create方法中实例化binding,并通过binding对象的getRoot方法得到activity_main.xml布局文件中的view,如图2-17所示。图2-17实例化binding类三、任务实施2.第一个布局准备一个png文件,文件名要求小写,添加到src→main→res→drawable目录中,将作为自定义对话框的图标,如图2-18所示。图2-18准备一个图标三、任务实施在布局文件activity_main.xml中添加一个按钮控件,id为btn1,文本内容为“对话框”。布局文件activity_main.xml代码如下:。<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools=/toolsandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".MainActivity"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="HelloWorld!"/><Buttonandroid:id="@+id/btn1"android:text="对话框"android:layout_width="match_parent"android:layout_height="wrap_content"></Button></LinearLayout>三、任务实施3.为按钮添加事件监听在MainActivity活动文件中,获取布局文件中添加的按钮,并且为这个按钮添加单击事件监听器,如图2-19所示。图2-19为按钮添加事件监听三、任务实施4.实现对话框功能MainActivity.java活动文件中MainActivity类定义代码如下:publicclassMainActivityextendsAppCompatActivity{ActivityMainBindingbinding;//创建activity_main布局类的对象@OverrideprotectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);binding=ActivityMainBinding.inflate(getLayoutInflater());//获取bindingsetContentView(binding.getRoot());//通过getRoot拿到view/*************显示对话框按钮******************/binding.btn1.setOnClickListener(newView.OnClickListener(){@OverridepublicvoidonClick(Viewview){finalEditTextet=newEditText(MainActivity.this);et.setText("很好");//创建AlertDialog对象:用Builder构造方法对其实例化,需传入上下文对象三、任务实施//创建AlertDialog对象:用Builder构造方法对其实例化,需传入上下文对象AlertDialogalertDialog=newAlertDialog.Builder(MainActivity.this).setIcon(R.drawable.open)//设置图标.setTitle("请提交建议")//设置标题.setView(et)//设置输入框.setPositiveButton("确定",newDialogInterface.OnClickListener(){@OverridepublicvoidonClick(DialogInterfacedialogInterface,inti){StringeditText=et.getText().toString();//获取输入内容Toast.makeText(MainActivity.this,"editText:"+editText,Toast.LENGTH_SHORT).show();}}).setNegativeButton("取消",null).show();}});}}三、任务实施在程序中:(1)binding对象通过id获取到btn1按钮后,设置btn1的单击事件监听。(2)在重写btn1的onClick方法中,创建了输入框et,并创建了构造器对象Alert-Dialog.Builder。(3)AlertDialog.Builder调用setIcon、setTitle、setView方法,构造对话框的图标、标题、内容等元素,其中内容为输入框et。(4)AlertDialog.Builder调用setPositiveButton、setNegativeButton方法,设置确定按钮和取消按钮。其中,确定按钮重写了onClick方法,功能是获取输入框et的内容,然后在界面Toast出来;取消按钮未做进一步处理。(5)AlertDialog.Builder调用show方法,让对话框在界面上显示。三、任务实施4.效果展示效果如图2-20所示,点击btn1按钮后,弹出自定义对话框;在自定义对话框的输入框中输入内容后,会在界面Toast输入内容。后续在输入框里输入的内容会通过网络发送到Web服务器处理。图2-20自定义对话框工作效果四、任务小结与练习任务小结任务2设计了自定义对话框,后续可以根据需要设计更复杂的自定义对话框,用于用户的注册、登录等功能。修改自定义对话框的图标、标题、内容区的输入框名称等;修改正面按钮的名称为“提交”,运行成功后,上传结果到课程学习平台。实践练习谢谢聆听2相关知识34任务小结与练习1任务实施任务引入与目标页面跳转一、任务引入与目标任务目标在任务3中，我们将新建一个AndroidStudio工程，创建2个页面。使用Intent类，实现两个活动之间的跳转。任务引入一般来说，一个物联网APP有若干个页面，用户使用时需要在页面之间实现跳转。所谓页面跳转，实际上就是一个活动跳转到另一个活动。二、相关知识Intent类Android的Intent,即意图,是一个要执行的操作的抽象描述,解决Android应用的各项组件之间的通信。一个Intent对象是一个被动的数据结构,保存着要执行的操作。Intent包括显式和隐式两类。显式Intent直接用组件的名称定义目标组件,直接实现明确Activity类名的启动,更多地用于应用程序内部的传递消息;隐式Intent通过设置Action、Data、Category,筛选出合适的Activity启动。显式Intent类的常用方法(1)newIntent():用于创建一个意图。(2)Intent对象.setClass(Content对象,Activity对象.class):setClass方法的第一个参数是Context(上下文)对象,setClass函数的第二个参数是一个Class对象。(3)startActivity(Intent对象):启动意图。二、相关知识Intent除了实现活动之间的跳转,还可以实现什么功能?课堂讨论三、任务实施实施设备安装了AndroidStudio开发环境的计算机。实施过程1.创建工程及配置如图2-21所示,新建Android工程“AlertDialog”,在app→build.gradle中添加viewBinding框架:图2-21添加viewBinding框架android.buildFeatures.viewBinding=true点击同步。因为添加了viewBinding框架,所以会为每一个布局文件自动生成绑定类,比如会为activity_main.xml生成ActivityMainBinding类。三、任务实施如图2-22所示，在MainActivity.java文件中,创建了ActivityMainBinding类对象binding1,在onCreate方法中实例化binding1,并通过binding1对象的getRoot方法得到activity_main.xml布局文件中的view。图2-22实例化binding类三、任务实施2.第一个页面设计(1)activity_main.xml布局文件。代码如下:<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".MainActivity"><TextView android:layout_width="wrap_content" android:layout_height="60dp" android:text="FirstActivity!"/><Button android:id="@+id/btn1" android:text="clickme,willjumptopage2" android:textSize="20sp" android:layout_width="match_parent" android:layout_height="60dp"></Button></LinearLayout>在activity_main.xml布局文件中,添加了1个按钮控件,id为btn1,文本内容为“clickme,willjumptopage2”。三、任务实施(2)MainActivity.java活动文件。MainActivity.java活动文件中MainActivity类定义代码如下:publicclassMainActivityextendsAppCompatActivity{ActivityMainBindingbinding1;//activity_main布局类对象-声明@OverrideprotectedvoidonCreate(BundlesavedInstanceState){ super.onCreate(savedInstanceState); binding1=ActivityMainBinding.inflate(getLayoutInflater());//获取binding setContentView(binding1.getRoot());//通过getRoot拿到view binding1.btn1.setOnClickListener(newView.OnClickListener(){ @Override publicvoidonClick(Viewview){ Intentintent1=newIntent(); //由MainActivity转向SecondActivity intent1.setClass(MainActivity.this,SecondActivity.class); startActivity(intent1);//按照意图1,启动Activity } });}}三、任务实施在程序中:①binding1对象通过id获取到btn1按钮后,设置btn1的单击事件监听。②在重写btn1的onClick方法中,创建意图intent。③setClass方法的第一个参数是Context(上下文)对象,Context是一个类,Activity是Context类的子类,也就是说,所有的Activity对象,都可以向上转型为Context对象;setClass方法的第二个参数是Class对象,在当前场景下,传入了需要被启动的Activity类的class对象SecondActivity.class。④通过startActivity方法启动意图,实现跳转。简而言之,btn1实现由MainActivity转向SecondActivity。需要注意的是,此时的SecondActivity活动还没有,程序会报错。接下来设计第二个页面。三、任务实施3.第二个页面设计(1)复制新的布局和活动文件。复制新的布局和活动文件,文件位置和第一个页面是一样的:在src→main→res→layout目录中增加activity_second.xml文件,在src→main→java→entactivity中增加SecondActivity.java文件。(2)activity_second.xml布局文件。代码如下:<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".SecondActivity"><TextView android:layout_width="wrap_content" android:layout_height="60dp" android:text=“SecondActivity!"/><Button android:id="@+id/btn2" android:text="clickme,willjumptopage1" android:textSize="20sp" android:layout_width="match_parent" android:layout_height="60dp"></Button></LinearLayout>在activity_second.xml布局文件中,添加了1个按钮控件,id为btn2,文本内容为“clickme,willjumptopage1”。三、任务实施(3)SecondActivity.java活动文件。SecondActivity.java活动文件中SecondActivity类定义代码如下:publicclassMainActivityextendsAppCompatActivity{ActivityMainBindingbinding2;//activity_main布局类对象-声明@OverrideprotectedvoidonCreate(BundlesavedInstanceState){ super.onCreate(savedInstanceState); binding2=ActivityMainBinding.inflate(getLayoutInflater());//获取binding setContentView(binding2.getRoot());//通过getRoot拿到view binding2.btn2.setOnClickListener(newView.OnClickListener(){ @Override publicvoidonClick(Viewview){ Intentintent2=newIntent(); //由MainActivity转向SecondActivity intent2.setClass(MainActivity.this,SecondActivity.class); startActivity(intent2);//按照意图2,启动Activity } });}}在btn2按钮的单击事件监听器中,设置意图:由SecondActivity转向MainActivity。三、任务实施4.运行测试(1)活动注册。测试前,注意需要将第二个Activity即SecondActivity在AndroidManifest.xml中注册,如图2-23所示。MainActivity默认是注册好的。(2)结果展示。连接手机,运行效果如图2-24所示:点击btn1和btn2按钮,可以实现2个页面之间的跳转。真机和虚拟机运行的效果是一样的。图2-23注册SecondActivity图2-24页面跳转效果(a)点击btn1按钮后(b)点击btn2按钮后四、任务小结与练习任务小结任务3使用Intent类,实现了2个页面之间的跳转,即两个活动之间的跳转。使用同样的方法,我们也可以实现更多页面之间的跳转。再新建一个页面,即APP有三个页面,实现页面之间的跳转。实践练习谢谢聆听2相关知识34任务小结与练习1任务实施任务引入与目标HTTP请求与响应一、任务引入与目标任务目标在任务4中,我们将学习OkHttp框架,在APP中创建HTTP客户端,通过GET、POST以及同步、异步方式向服务器发送HTTP请求,接收到HTTP响应后将相应的数据部分取出处理。有些Web服务器提供了API接口,HTTP客户端只要按照约定向Web服务器发送HTTP请求,就会获取期望的返回数据。任务引入HTTP全称为HyperTextTransferProtocol,即超文本传输协议,是互联网上应用最广泛的一种网络协议。与浏览器Web应用一样,开发物联网APP时,一部分数据也需要通过HTTP请求向服务器获取。那么在AndroidStudio中有没有简便的方法进行HTTP的请求与响应呢?二、相关知识HTTP协议HTTP是一种可扩展的协议,是一种应用层协议,是运行在TCP之上的。因为具有良好的扩展性,所以HTTP协议不仅被用来传输超文本文档,还被用来传输图片或视频以及提交HTML表单等信息。用户通过浏览器输入url提交请求,就是使用的HTTP协议。HTTP的使用比较简单,HTTP报文允许简单测试,容易读懂,开发门槛较低。OkHttp框架OkHttp是Android开发的最常用的网络请求框架,由Square公司开源。OkHttp可以理解为是一个HTTP层面的框架,它的工作原理简单来说就是:(1)首先利用socket建立与服务器的TCP连接;(2)然后将符合HTTP协议的请求报文拼接好并传递到服务器;(3)最后读取服务器的响应。除了基本的HTTP使用,OkHttp还提供了线程池,以此来执行异步请求。二、相关知识相关链接OkHttp框架使用流程如图2-25所示:(1)通过newOkHttpClient()创建HTTP客户端对象;(2)通过Request.Builder创建Request请求对象(用于请求包);(3)通过调用HTTP客户端对象的newCall方法,传入Request对象,生成Call对象(用于发送请求);(4)由Call对象调用execute或enqueue方法提交请求,得到响应Response。注意,如图2-25所示,同步请求和异步请求的前三步一样,包括创建HTTP客户端对象、创建Request请求包、创建发送请求Call对象。但第四步不同:如果同步请求Call对象调用execute()方法,则直接请求;如果异步请求Call对象调用enqueue()方法,则将请求加入队列中。图2-25OkHttp框架使用流程OkHttp使用流程OKHttp官网:https://square.github.io/okhttp/。二、相关知识GET请求方法OkHttp官网提供了GET请求方法的示例,代码如下:OkHttpClientclient=newOkHttpClient();Stringrun(Stringurl)throwsIOException{Requestrequest=newRequest.Builder().url(url).build();try(Responseresponse=client.newCall(request).execute()){returnresponse.body().string();}}在示例的GET方法中:(1)通过newOkHttpClient()创建了HTTP客户端对象client;(2)创建了请求包对象request,调用url()方法设置要直接访问的url(参数包含在url中,即GET方法);(3)调用newCall()方法生成call对象,调用execute()方法(即同步请求)得到响应response,并通过body()方法获取响应的数据部分。二、相关知识POST请求方法OkHttp官网提供了POST请求方法的示例,代码如下:publicstaticfinalMediaTypeJSON=MediaType.get("application/json;charset=utf-8");OkHttpClientclient=newOkHttpClient();Stringrun(Stringurl,Stringjson)throwsIOException{Requestrequest=newRequest.Builder().url(url).post(body).build();try(Responseresponse=client.newCall(request).execute()){returnresponse.body().string();}}在示例的POST方法中:(1)通过newOkHttpClient()创建了HTTP客户端对象client;(2)将参数放在RequestBody类对象中,后面通过POST方法提交;(3)创建了请求包对象request,调用url()方法设置url,并调用POST方法设置要提交的一些参数(即POST方法);(4)调用newCall()方法生成call对象,调用execute()方法(即同步请求)得到响应response,并通过body()方法获取响应的数据部分。二、相关知识在HTTP请求方法中,有哪些组合形式?课堂讨论三、任务实施实施设备安装了AndroidStudio开发环境的计算机。实施过程1.创建工程及配置(1)添加框架。如图2-26所示,新建Android工程“OKHttpClient”,在app→build.gradle中添加viewBinding框架:图2-26添加viewBinding和OkHttp框架android.buildFeatures.viewBinding=true添加OkHttp框架:mplementationc'om.squareup.okhttp3:okhttp:5.0.0-alpha.10'点击同步。三、任务实施(2)编写HTTP请求的配置文件。如图2-27所示,在res的xml文件夹,新建network_security_config.xml文件,代码如下:<?xmlversion="1.0"encoding="utf-8"?><network-security-config><base-configcleartextTrafficPermitted="true"/></network-security-config>图2-27编写HTTP请求的配置文件Android系统限制了HTTP协议明文流量的网络请求,对HTTPS是没有影响的。本任务中会使用到HTTP,所以需要编写网络安全配置文件,将cleartextTrafficPermitted设置为“true”。三、任务实施(3)添加网络权限。如图2-28所示,允许程序打开网络套接字:<uses-permissionandroid:name="android.permission.INTERNET"/>图2-28添加网络权限然后通过networkSecurityConfig配置,开启非加密的HTTP网络请求(也可以不要):android:networkSecurityConfig="@xml/文件名"三、任务实施2.页面布局设计activity_main.xml布局文件的代码如下:<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".MainActivity"><Button android:id="@+id/btn1" android:layout_width="match_parent" android:layout_height="warp_content" android:text=“测试同步请求“/><TextView android:id="@+id/textView1" android:layout_width="match_parent" android:layout_height="wrap_content"/>三、任务实施在布局文件中,设计了2个按钮(用于测试同步和异步请求)和2个文本框(用于显示响应值)。两个按钮控件的id分别是btn1和btn2,两个文本框控件的id分别textView1和textView2。<Button android:id="@+id/btn2" android:layout_width="match_parent" android:layout_height="warp_content" android:text=“测试异步请求“/><TextView android:id="@+id/textView2" android:layout_width="match_parent" android:layout_height="wrap_content"/></LinearLayout>三、任务实施3.活动文件设计(1)创建对象。如图2-29所示,在MainActivity.java活动文件中,创建了一个ActivityMain-Binding对象binding和一个HTTP客户端对象okHttpClient。okHttpClient对象通过OkHttpClient.Builder()构造,并调用build方法实例化。图2-29MainActivity活动中创建对象三、任务实施(2)两个按钮的单击事件监听。代码如下:binding.btn1.setOnClickListener(newView.OnClickListener(){ @Override publicvoidonClick(Viewview){ testGet_s(); }});binding.btn2.setOnClickListener(newView.OnClickListener(){ @Override publicvoidonClick(Viewview){ testPost_as(); }});在btn1的单击事件监听里面,调用了同步请求函数testGet_s。在btn2的单击事件监听里面,调用了异步请求函数testPost_as。所谓同步请求,就是直接请求;所谓异步请求,就是把请求加入enqueue(队列)中,等待执行。下面分别编写这两个同步请求函数和异步请求函数:在同步请求函数中用GET方法,在异步请求函数中用POST方法。当然这个也根据自己的需要选择。三、任务实施(3)btn1的同步请求函数testGet_s。代码如下://同步请求函数

privatevoidtestGet_s(){

//创建请求对象

Requestrequest=newRequest.Builder()

.url("/v7/weather/now?location=101010100&key=d7ac748d2e2447cdb8d42e13451a646d")

.build();

//开启子线程，因操作耗时不能在主线程中执行

newThread(newRunnable(){

@Override

publicvoidrun(){

try{

//创建响应对象，客户端的newCall就是发起请求的方法，execute是直接执行即同步请求，返回即是响应

Responseresponse=okHttpClient.newCall(request).execute();

//获取响应的数据部分

Stringresult=response.body().string();

//在主线程更新UI，即在textView1文本框中显示三、任务实施

//在主线程更新UI，即在textView1文本框中显示

runOnUiThread(newRunnable(){

@Override

publicvoidrun(){

binding.textView1.setText(result);

}

});

}catch(IOExceptione){

e.printStackTrace();

}

}

}).start();

}在testGet_s函数中:①创建了请求包对象request,调用url()方法设置要直接访问的url(参数包含在url中,即GET方法);②HTTP客户端调用newCall()方法生成call对象,调用execute()方法(即同步请求)得到响应response,并通过body()方法获取响应的数据部分。三、任务实施注意:因为HTTP网络请求耗时,所以需要开启子线程,在子线程中发起请求;当获取到响应的数据部分后,需要开启UI线程,在UI线程中更新UI;因为可能出现的异常情况,程序中进行了异常的捕获和处理。还要注意在btn1的单击事件监听中,需要调用testGet_s同步请求函数。单击测试同步请求按钮,在APP中测试,可以成功获取到返回的天气情况,并展示出来,如图2-30所示,图中还展示了通过浏览器查询的结果。图2-30在APP中测试同步请求三、任务实施登录/,使用和风天气API,注册后可获得自己的key,然后给出要查询城市的Location_ID即可如:/v7/weather/now?location=101010100&key=d7ac748d2e2447cdb8d42e13451a646d其中的101010100是北京的Location_ID。相关链接Devapi参考文档:/docs/api/weather/weather-now/。三、任务实施(4)btn2的异步请求函数testPost_as。//异步请求函数,/get.php,apipost工具

privatevoidtestPost_as(){

//创建表单

FormBodyformBody=newFormBody.Builder()

.add("username","1")

.build();

//将表单数据放入request中，通过post方法提交

Requestrequest=newRequest.Builder()

.url("/get.php")

.post(formBody)

.build();

//将客户端请求加入到队列中，会自动在子线程中运行。返回有2种情况，失败或者有响应

okHttpClient.newCall(request).enqueue(newCallback(){

@Override

publicvoidonFailure(@NonNullCallcall,@NonNullIOExceptione){

e.printStackTrace();

}

@Override在异步方式下,不再需要主动创建子线程,只需要把创建的请求加入队列中即可。testPost_as函数代码如下:三、任务实施@Override

publicvoidonResponse(@NonNullCallcall,@NonNullResponseresponse)throwsIOException{

//获取响应的数据部分

Stringresult=response.body().string();

//在主线程更新UI，即在textView2文本框中显示

runOnUiThread(newRunnable(){

@Override

publicvoidrun(){

binding.textView2.setText(result);

}

});

}

});

}函数中创建了一个表单,将表单数据放入request中,通过POST方法提交。将客户端请求加入队列中,会自动在子线程中运行。返回有2种情况:失败或者有响应。如果有响应,则获取响应的数据部分,在主线程更新UI,即在textView2文本框中显示。三、任务实施注意在btn2的单击事件监听中,调用testPost_as异步请求函数。单击测试btn2异步请求按钮,在APP中测试异步请求,如图2-31所示。图2-31在APP中测试异步请求测试发现,可以成功返回数据并展示出来。相关链接pipost工具:/get.php。三、任务实施(5)解决浏览器乱码问题。有的浏览器(HTTP客户端)在HTTP请求返回的消息中出现乱码,是字符编码的问题,可以按以下步骤处理。以Google浏览器为例,首先解压浏览器扩展程序,如图2-32所示。图2-32解压浏览器扩展程序图2-33加载已解压的扩展程序然后加载已解压的扩展程序,如图2-33所示。点击Chrome浏览器地址栏右侧的扩展程序图标,选择Charset右侧的图钉,可以将其固定在地址栏右侧,以方便后续使用。三、任务实施最后,当请求返回数据乱码时,点击Charset图标,选择UTF-8,即可重新发送请求加载页面,请求回来的数据中文不再显示成乱码,如图2-34所示。图2-34正确的数据显示三、任务实施中国作为一个拥有庞大的互联网用户群体和技术创新能力的国家,在互联网领域涌现出很多优秀的API,包括移动支付API(如支付宝、微信支付等)、地图API(如百度地图、高德地图等)、社交媒体API(如微博、微信开放平台等)、短信服务API等。这些API不仅为互联网企业和开发者提供了便捷的技术支持,也为用户带来了更加智能化、便利化的服务体验。除了互联网领域,中国在人工智能、物联网、大数据等领域也涌现出一批优秀的API。例如,在人工智能领域,腾讯AI开放平台、百度AI开放平台等都提供了丰富的API,包括语音识别、图像识别、自然语言处理等方面的功能。在物联网领域,阿里云物联网平台、华为物联网平台等也提供了丰富的API,包括设备接入、数据处理、规则引擎等方面的功能。中国的API不仅为国内企业和开发者提供了丰富的技术支持,也在全球范围内受到越来越多的关注和应用。我们在学习物联网系统设计的过程中,也可以在尊重知识产权、保护用户隐私、确保安全性等方面的原则下,开发自己的API,提供给用户使用,共同推动API技术的健康发展,按照党的二十大报告提出的“建设现代化产业体系”目标,促进数字经济和实体经济深度融合。eoapi参考文档:/docs/api/geoapi/city-lookup/相关链接学思之窗四、任务小结与练习任务小结任务4利用OkHttp框架,在APP中创建HTTP客户端,分别通过GET、POST、同步、异步方式向服务器发送HTTP请求,接收到HTTP响应后将相应的数据部分取出展示。在后续任务中,我们会使用OkHttp框架实现天气预报功能。任务4通过城市ID查询了天气情况。如果要查询城市的Location_ID,可使用以下API:/v2/city/lookup?location=%E5%8C%97%E4%BA%AC&key=d7ac748d2e2447cdb8d42e13451a646d通过城市名称在浏览器查询你家乡的城市ID,然后修改APP中同步请求函数中的url,获取展示你家乡的天气情况。实践练习谢谢聆听2相关知识34任务小结与练习1任务实施任务引入与目标物联网APP的布局设计一、任务引入与目标任务目标在任务5中,我们将新建一个Android工程,开始物联网APP的设计。设计的物联网APP共有三个页面:页面1用于用户登录和注册,页面2用于MQTT通信功能,页面3实现HTTP通信功能。当然本任务只进行页面的布局设计,具体功能在接下来的项目和任务中逐步完成。任务引入有了自定义对话框、意图和HTTP相关的基础,下面就可以正式开始物联网APP的设计了。APP设计的首要问题是布局,一个合理的、功能完善的APP应该是什么样子的?布局又需要我们掌握哪些知识呢?二、相关知识Android的View类View类是所有可视化控件的基类,主要提供控件绘制和事件处理的方法。TextView、EditText、Button均继承自View类。View及其子类的相关属性可以在布局XML文件中使用“Android:名称空间”来设置,也可以通过成员方法在代码中进行设置。Android的布局在Android中,View有六大布局,分别是:LinearLayout(线性布局)、Relative-Layout(相对布局)、TableLayout(表格布局)、FrameLayout(帧布局)、Absolute-Layout(绝对布局)、GridLayout(网格布局)。布局方式使用XML语言进行描述。二、相关知识你见过或者使用过哪些和物联网相关的APP?这些APP都有什么功能?课堂讨论三、任务实施实施设备安装了AndroidStudio开发环境的计算机。实施过程1.新建工程在AndroidStudio新建工程“IOTSystem”,默认页面的布局文件和活动文件分别是activity_main.xml和MainActivity。如图2-35所示,可以通过复制的方法再增加2个页面,默认的页面是第1个页面。增加的第2个页面的布局文件和活动文件分别是activity_second.xml和SecondActivity,增加的第3个页面的布局文件和活动文件分别是activity_third.xml和ThirdActivity。图2-35增加2个页面三、任务实施2.页面1的布局在页面1的activity_main.xml文件中,放置两个按钮,表示注册和登录,如图2-36所示。图2-36页面1布局预览三、任务实施两个按钮控件的id分别为btn11、btn12。代码如下:<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><LinearLayout android:gravity="center" android:layout_width="match_parent" android:layout_height="match_parent"> <Button style="?android:attr/buttonBarButtonStyle" android:id="@+id/btn11" android:text="登录" android:textSize="20sp“ android:layout_marginEnd="30dp" android:layout_width="wrap_content" android:layout_height="wrap_content"> </Button>三、任务实施 <Button android:id="@+id/btn12" android:text="注册" android:textSize="20sp" android:layout_marginStart="30dp" android:layout_width="wrap_content" android:layout_height="wrap_content" style="?android:attr/buttonBarButtonStyle"> </Button></LinearLayout></LinearLayout>在程序中,android:gravity="center"设置线性布局里2个按钮的对齐方式为居中;默认排列方向为horizontal,设置线性布局内部两个按钮水平排列;线性布局的宽度和高度都是“match_parent”,代表充满父容器。btn11、btn12按钮的宽度和高度为“wrap_content”,代表实际大小。三、任务实施3.页面2的布局(1)页面2总体布局设计。在页面2的activity_second.xml文件中,总体是按线性布局设计的,如图2-37所示。图2-37页面2布局预览三、任务实施代码如下:<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".SecondActivity">

<!--1.控制--><!--2-状态--><!--3-接受消息--><!--4-下一页--></LinearLayout>整个页面由4个部分构成,全部采用线性布局,方向垂直。每部分如下:控制部分,有2个控制用的ImageView;状态部分,其中2个TextView用于显示温度、湿度的值;接收消息部分,用于显示MQTT接收消息;下一页部分,由1个按钮构成,点击跳转下一页。三、任务实施(2)准备2个图标。在网上(比如阿里巴巴图标库)下载2个图标,如图2-38所示,其中2个图标像素为128×128。名称中的字母为小写。图2-38准备2个图标粘贴2个图标文件到app→main→res→drawable目录,如图2-39所示。图2-39添加图标到工程中三、任务实施(3)页面2的控制部分布局。代码如下：

<!--1.控制--><LinearLayout android:layout_marginTop="50dp" android:gravity="center_vertical" android:layout_width="match_parent" android:layout_height="150dp"> <LinearLayout android:orientation="vertical" android:layout_weight="1" android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:src="@drawable/led1" android:id="@+id/image21“ android:layout_gravity="center_horizontal" android:layout_width="80dp" android:layout_height="80dp"> </ImageView>三、任务实施 <TextView android:text="开灯" android:textSize="20sp