項(xiàng)目4任務(wù)3-在Node-RED 中搭建Web服務(wù)器

2相關(guān)知識(shí)34任務(wù)小結(jié)與練習(xí)1任務(wù)實(shí)施任務(wù)引入與目標(biāo)在Node-RED中搭建Web服務(wù)器一、任務(wù)引入與目標(biāo)任務(wù)目標(biāo)任務(wù)3在Node-RED中搭建Web服務(wù)器,APP收到用戶(hù)反饋意見(jiàn)時(shí),APP中創(chuàng)建的HTTP客戶(hù)端連接服務(wù)器;服務(wù)器對(duì)HTTP請(qǐng)求進(jìn)行處理,完成郵件轉(zhuǎn)發(fā),并將響應(yīng)發(fā)回;APP接收HTTP響應(yīng),處理其中的數(shù)據(jù)部分。實(shí)現(xiàn)效果:(1)手機(jī)點(diǎn)擊“反饋建議”按鈕后,調(diào)出對(duì)話(huà)框。(2)在對(duì)話(huà)框輸入內(nèi)容后,以post方式向Node-RED中創(chuàng)建的HTTP服務(wù)端提交HTTP請(qǐng)求,網(wǎng)址為后臺(tái)url加上后綴APP_feedback。(3)Node-RED中創(chuàng)建的HTTP服務(wù)端收到請(qǐng)求后,發(fā)回響應(yīng)內(nèi)容“成功收到,感謝您的反饋與建議”,APP將接收的響應(yīng)內(nèi)容在屏幕上Toast出來(lái)。(4)后臺(tái)將收到的內(nèi)容轉(zhuǎn)發(fā)至作者郵箱。任務(wù)引入如果用戶(hù)對(duì)APP有一些建議,那么該怎樣聯(lián)系作者呢?可以在Node-RED中創(chuàng)建Web服務(wù)器,當(dāng)用戶(hù)有建議時(shí),可以通過(guò)HTTP客戶(hù)端向Web服務(wù)器提交請(qǐng)求,由Node-RED處理。二、相關(guān)知識(shí)Node-RED中的郵箱控件Node-RED的輸出郵箱控件,把msg.payload作為郵件內(nèi)容,把msg.topic作為郵件主題。消息接收者可以在節(jié)點(diǎn)中配置,如果它是空白的,那么應(yīng)該使用msg.to來(lái)設(shè)置它。消息的屬性如果留下空白,也可以指定msg.cc(轉(zhuǎn)發(fā)的收件箱地址)屬性。注意,使用SMTP的SSL端口465。郵箱的IMAP和SMTP服務(wù)IMAP是一種電子郵件接收的協(xié)議,用于管理和檢索來(lái)自接收服務(wù)器的電子郵件消息。SMTP是一種電子郵件發(fā)送的協(xié)議,可以使用SMTP從郵件客戶(hù)端(如QQ郵箱)向接收電子郵件服務(wù)器發(fā)送、中繼或轉(zhuǎn)發(fā)郵件。SMTP中繼服務(wù)可以幫助用戶(hù)發(fā)送電子郵件,而不需要建立自己的SMTP服務(wù)器。二、相關(guān)知識(shí)以QQ郵箱為例,設(shè)置IMAP(接收)/SMTP(發(fā)送)服務(wù)。需要保證IMAP/SMTP服務(wù)這一項(xiàng)是開(kāi)啟的,如圖4-29所示。如圖4-30所示,成功開(kāi)啟后,會(huì)給一個(gè)授權(quán)碼,需要記住。如果忘記也沒(méi)關(guān)系,可以再次生成。上述配置的IMAP和SMTP中繼服務(wù),會(huì)在Node-RED中的接收和發(fā)送郵件節(jié)點(diǎn)用到,用來(lái)實(shí)現(xiàn)接收郵件和發(fā)送郵件功能。圖4-29QQ郵箱的IMAP/SMTP服務(wù)圖4-30IMAP/SMTP服務(wù)的授權(quán)碼三、任務(wù)實(shí)施實(shí)施設(shè)備部署了AndroidStudio和Node-RED開(kāi)發(fā)環(huán)境的計(jì)算機(jī)。實(shí)施過(guò)程1.APP設(shè)計(jì)APP設(shè)計(jì)里,需要用到OkHttp框架和對(duì)話(huà)框的知識(shí)。在ThirdActivity.java中,針對(duì)btn32進(jìn)行設(shè)計(jì)。(1)對(duì)話(huà)框。已經(jīng)添加viewBinding框架,需要在第三個(gè)頁(yè)面編寫(xiě)btn32按鈕的事件監(jiān)聽(tīng)方法。binding3.btn32.setOnClickListener(newView.OnClickListener(){@OverridepublicvoidonClick(Viewview){finalEditTextet=newEditText(ThirdActivity.this);et.setText("很好");AlertDialogalertDialog=newAlertDialog.Builder(ThirdActivity.this).setTitle("請(qǐng)?zhí)峤灰庖?jiàn)建議").setView(et).setPositiveButton("確定",newDialogInterface.OnClickListener(){@OverridepublicvoidonClick(DialogInterfacedialogInterface,inti){textSuggest=et.getText().toString();Post_as();}}).setNegativeButton("取消",null).show();}})三、任務(wù)實(shí)施前面需要定義變量:privateStringtextSuggest;點(diǎn)擊“確定”按鈕后,調(diào)用Post_as()函數(shù),將文本框的內(nèi)容textSuggest以post的方式、HTTP請(qǐng)求提交給后臺(tái):11:1880/APP_feedback。(2)異步請(qǐng)求Post_as()函數(shù)。所謂異步請(qǐng)求,就是把請(qǐng)求加入enqueue(隊(duì)列)中,等待執(zhí)行。接下來(lái),我們?cè)诋惒秸?qǐng)求函數(shù)Post_as()中使用POST方法,提交異步請(qǐng)求,代碼如下://異步請(qǐng)求函數(shù)privatevoidPost_as(){//創(chuàng)建表單FormBodyformBody=newFormBody.Builder().add("username",).add("feedback",textSuggest).build();//將表單數(shù)據(jù)放入request中,通過(guò)post方法提交Requestrequest=newRequest.Builder().url("11:1880/APP_feedback").post(formBody).build();//將客戶(hù)端加入隊(duì)列中,會(huì)自動(dòng)在子線程中運(yùn)行,返回有2種情況:失敗或者有響應(yīng)okHttpClient.newCall(request).enqueue(newCallback(){@OverridepublicvoidonFailure(@NonNullCallcall,@NonNullIOExceptione){e.printStackTrace();}三、任務(wù)實(shí)施如果沒(méi)有收到response,那么不做處理;如果收到response,那么Toast出后臺(tái)響應(yīng)的數(shù)據(jù)部分。@OverridepublicvoidonResponse(@NonNullCallcall,@NonNullResponseresponse)throwsIOException{//獲取響應(yīng)的數(shù)據(jù)部分Stringresult=response.body().string();//在主線程中Toast出來(lái)runOnUiThread(newRunnable(){@Overridepublicvoidrun(){Toast.makeText(ThirdActivity.this,"后臺(tái)回復(fù):"+result,Toast.LENGTH_SHORT).show();}});}});}三、任務(wù)實(shí)施其中,11為Node-RED所部署的電腦在局域網(wǎng)中的IP地址。如圖4-31所示,查看IP地址的方法:cmd命令行。輸入:ipconfig。至此,APP設(shè)計(jì)就完成了,結(jié)構(gòu)如圖4-32所示。圖4-31查看IP地址圖4-32APP結(jié)構(gòu)三、任務(wù)實(shí)施2.Node-RED流程設(shè)計(jì)(1)測(cè)試打印APP提交的表單信息。在cmd命令行,輸入:node-red。啟動(dòng)Node-RED。注意不要關(guān)閉cmd。在NR中,添加一個(gè)httpin節(jié)點(diǎn)和一個(gè)debug節(jié)點(diǎn),連接起來(lái)。httpin是一個(gè)提供Web服務(wù)的HTTP端點(diǎn)(HTTP服務(wù)器),供APP訪問(wèn)。如圖4-33所示,配置httpin節(jié)點(diǎn),請(qǐng)求方式為POST;URL的后綴為/APP_feedback,完整的URL為11:1880/APP_feedback。debug節(jié)點(diǎn)直接打印消息內(nèi)容,即httpin節(jié)點(diǎn)(HTTP服務(wù)器)收到的消息內(nèi)容。圖4-33編輯httpin節(jié)點(diǎn)三、任務(wù)實(shí)施部署流程2,運(yùn)行APP。當(dāng)APP提交反饋意見(jiàn)“很好!!!”時(shí),Node-RED的debug打印內(nèi)容如圖4-34所示。圖4-34表明:Node-RED成功收到APP的HTTP客戶(hù)端POST的數(shù)據(jù),這正是APP代碼的2個(gè)表單項(xiàng):圖4-34Node-RED接收到HTTP請(qǐng)求//創(chuàng)建表單FormBodyformBody=newFormBody.Builder().add("username",).add("feedback",textSuggest).build();三、任務(wù)實(shí)施(2)Web展示APP提交的表單信息。在Web頁(yè)面顯示APP提交的表單內(nèi)容是較為容易的,回顧之前的JSON解析知識(shí)即可完成。設(shè)計(jì)dashboard,添加頁(yè)面(菜單)“實(shí)時(shí)反饋與建議”,如圖4-35所示,添加一個(gè)組“反饋與建議”,組里面添加2個(gè)“text”節(jié)點(diǎn)作為組件。2個(gè)text節(jié)點(diǎn)的配置如圖4-36所示。圖4-35流程中添加反饋與建議部分圖4-36編輯text節(jié)點(diǎn)三、任務(wù)實(shí)施查看Web頁(yè)面,如圖4-37所示。(3)Web服務(wù)器給APP發(fā)回response。如圖4-38所示,在流程中增加一個(gè)“change”節(jié)點(diǎn)和一個(gè)“httpresponse”節(jié)點(diǎn)。httpresponse節(jié)點(diǎn)將響應(yīng)(response)送回提交請(qǐng)求(request)的HTTP客戶(hù)端。圖4-37查看Web頁(yè)面圖4-38流程中設(shè)定響應(yīng)內(nèi)容圖4-39編輯change節(jié)點(diǎn)change節(jié)點(diǎn)配置如圖4-39所示。三、任務(wù)實(shí)施httpresponse節(jié)點(diǎn)按默認(rèn)設(shè)置即可,如圖4-40所示。結(jié)果如圖4-41所示:APP提交之后,會(huì)Toast從后臺(tái)response的內(nèi)容。圖4-40編輯httpresponse節(jié)點(diǎn)圖4-41APP接收到response三、任務(wù)實(shí)施在流程中添加發(fā)送郵件節(jié)點(diǎn),如圖4-42所示。如果沒(méi)有這個(gè)節(jié)點(diǎn),那么需要安裝,如圖4-43所示。圖4-42添加發(fā)送郵件節(jié)點(diǎn)圖4-43安裝email節(jié)點(diǎn)三、任務(wù)實(shí)施發(fā)送郵件節(jié)點(diǎn)配置,包括收件箱地址、郵件服務(wù)器和端口號(hào)、發(fā)件箱地址和授權(quán)碼,如圖4-44所示。部署流程,查看收件箱是否收到郵件,