前言

最近有不少小伙伴私信留言，想要我推出一章能夠通過APP進(jìn)行遠(yuǎn)程控制并獲取傳感器信息的實(shí)驗(yàn)教程。說實(shí)話在嵌入式畢設(shè)里邊，這算是中等偏上水平的了。剛好我也有興趣寫寫。全篇4700多字，我寫的很詳細(xì)，按著文章一步一步操作即可。（建議跟同學(xué)集資購買模塊，多一個(gè)人一起學(xué)習(xí)交流，能更快學(xué)會(huì)）

主要材料準(zhǔn)備

STM32F103C8T6板子

ESP8266模塊（下面兩張圖是ESP8266模塊的正反面）

?? ??

第九章的所有模塊，杜邦線若干條。

1.APP制作

1.1 首先利用網(wǎng)上的一些物聯(lián)網(wǎng)自助開發(fā)平臺(tái)去制作APP，這里我選用機(jī)智云。瀏覽器搜索機(jī)智云，然后進(jìn)入官。

1.2 進(jìn)入官網(wǎng)后點(diǎn)擊右上角的開發(fā)者中心。

1.3 大部分同學(xué)還沒注冊(cè)過機(jī)智云賬號(hào)，所以先去注冊(cè)一個(gè)。

1.4 注冊(cè)完成后，登錄賬號(hào)就進(jìn)入了下方界面，點(diǎn)擊左側(cè)“智能產(chǎn)品”欄的“+創(chuàng)建”，開始制作APP。

1.5 點(diǎn)擊“+創(chuàng)建”后，就來到下圖中的界面進(jìn)行APP的類型選擇（照著下圖操作）。我們點(diǎn)擊照明，再點(diǎn)擊 球泡燈，然后點(diǎn)擊自定義方案，最后點(diǎn)擊 燈。（這些操作只是先給APP選個(gè)模板而已，到時(shí)候功能可以不跟控?zé)艄δ芟嚓P(guān)）

1.6完成步驟1.5后，我們就相當(dāng)于選好了APP的模板類型，接下來會(huì)彈出下方的界面，我們只要按照下圖中紅色框一樣設(shè)置就行了（產(chǎn)品名稱可以自己?。?，按圖片操作完后，點(diǎn)擊界面底部的創(chuàng)建。

1.7 完成步驟1.6之后，就自動(dòng)來到了下圖的界面。這里我們開始給APP添加內(nèi)容，點(diǎn)擊下圖的 去編輯。

然后參考下圖紅色框框部分進(jìn)行填寫(這里我們先實(shí)現(xiàn)往APP里添加一個(gè)窗開關(guān)的內(nèi)容)；

在 標(biāo)識(shí)名 這一項(xiàng)，我們?nèi)∶值臅r(shí)候盡量取得“清楚”，就是一眼就知道是什么意思。因?yàn)楹竺鏅C(jī)智云自動(dòng)生成的單片機(jī)程序代碼里表示窗開關(guān)的的變量名就是根據(jù)這個(gè) 標(biāo)識(shí)名 生成的。顯示名稱：就是等會(huì)APP上會(huì)顯示的文字，比如我們填寫“窗開關(guān)”，等會(huì)生成的APP上就會(huì)有個(gè)地方標(biāo)注文字“窗開關(guān)”，然后我們繼續(xù)填寫下面的讀寫類型和數(shù)據(jù)類型，讓APP上“窗開關(guān)”的文字旁邊顯示個(gè)按鍵，這樣我們一眼就這個(gè)按鍵是用來控制窗開關(guān)的；
讀寫類型：就看該功能實(shí)現(xiàn)方式：
一般需要在APP上手動(dòng)操作的屬于可寫，比如需要添加的是按鍵或者滑動(dòng)條（滑動(dòng)條類似下圖紅色框）等就選擇可寫，所以我們是實(shí)現(xiàn)窗的開關(guān)，明顯填可寫。

如果只是起顯示數(shù)值作用屬于只讀，比如顯示溫度值和濕度值。

數(shù)據(jù)類型：窗的狀態(tài)有“開”和“關(guān)”兩種狀態(tài)，所以數(shù)據(jù)類型是布爾值類型（也就是0和1）。

填寫好標(biāo)識(shí)名、顯示名稱、讀寫類型、數(shù)據(jù)類型后點(diǎn)擊界面下方的 確定。

1.8 完成上面的步驟后，就自動(dòng)來到了下圖的界面。這個(gè)時(shí)候我們的 只控制窗開關(guān)的APP 已經(jīng)做好了，那我們?cè)趺纯葱Ч?？我們先點(diǎn)擊下圖左側(cè)的 虛擬設(shè)備 。

1.9 完成上面步驟就來到下圖界面。接著用手機(jī)下載個(gè) 機(jī)智云APP，下載完成后，用APP去掃下圖的二維碼即可看到我們自己制作的APP了。

下圖是手機(jī)掃碼后，我們所看到的手機(jī)視角，IOT智能家居是我們步驟1.6時(shí)候取的APP名字，我們點(diǎn)擊紅色方框進(jìn)入APP界面?。ㄓ覉D所示）

這里我們可以在APP上打開窗的開關(guān)，如下圖所示。

然后我們就會(huì)發(fā)現(xiàn)，網(wǎng)頁上界面跟著動(dòng)了起來，下圖所示。

一個(gè)APP只有控制開關(guān)窗的功能太單調(diào)了，我們點(diǎn)擊下圖左側(cè)的 產(chǎn)品信息 回到步驟1.7的地方，繼續(xù)添加APP的內(nèi)容。

1.10 然后點(diǎn)擊左側(cè)的 新建，填寫參考步驟1.7的操作填寫標(biāo)識(shí)名，顯示名稱，讀寫類型，數(shù)據(jù)類型去完成APP新的內(nèi)容的添加。

下面4張圖是我增加的功能。

然后按照步驟1.8和去1.9去掃設(shè)備二維碼，就可以看到APP的視圖了。

這個(gè)時(shí)候?qū)儆谀阕约旱腁PP就做好了?。≌罩襟E一步一步來，五分鐘內(nèi)完成！有手就行！

2 給ESP8266模塊燒錄固件

接下來，我們還需要給ESP8266模塊燒錄固件。（下面步驟是針對(duì)樂鑫ESP8266模塊進(jìn)行串口模式燒寫流程，ESP8266的購買鏈接在資料里提供了）

2.1 首先在機(jī)智云官網(wǎng)下載ESP8266固件到本地電腦上，

ESP8266 GAgent固件下載地址：https://devdocs.gizwits.com/download.html#166419072645267?1672219764470

2.2 確認(rèn)下載的固件

下載到本地后，解壓，得到以下文件，本文用到的ESP8266模塊燒錄的是下圖的bin文件。

2.3 ESP8266接線。

按照下圖的連接方式，將ESP8266與USB轉(zhuǎn)TTL模塊連接好，（一般的USB轉(zhuǎn)TTL模塊只有4個(gè)引腳，但ESP8266燒錄時(shí)，有7根引腳需要接線，所以ESP8266沒法接到USB轉(zhuǎn)TTL模塊上的引腳，我們就把它們接到我們的STM32上。）線連接好后，將USB轉(zhuǎn)TTL模塊接如電腦的USB口，STM32也要保持供電。（或者去淘寶買個(gè)ESP8266固件下載器，這樣就不用自己接線了，下載器鏈接我也放在資料里）

2.4 設(shè)備燒錄。

完成上面步驟后，我們以管理員的方式打開資料里提供的燒錄工具，

點(diǎn)擊OK

2.5 燒錄設(shè)置。

1，打勾，選擇燒錄該項(xiàng)固件

2，選擇步驟3.2時(shí)，我們剛剛確認(rèn)好的ESP8266固件

3，地址設(shè)置為0

4, SPI SPEED 選擇 40MHz

5, SPI MODE 選擇 DOUT

6，將DoNotChgBin勾選上

7，選擇USB轉(zhuǎn)TTL模塊對(duì)應(yīng)的串口

8，波特率選擇115200

2.6 燒錄操作

步驟一、選擇正確的串口，當(dāng)串口連接成功之后，點(diǎn)擊如下圖的“START”按鈕

會(huì)出現(xiàn)

步驟二、將ESP8266上的RST引腳線拔掉，也就是將ESP8266進(jìn)行復(fù)位,會(huì)出現(xiàn)下圖的情況。

步驟三、等待一段時(shí)間后，出現(xiàn)“FINISH”字樣表示燒寫成功。

3.代碼移植

現(xiàn)在APP制作完畢，ESP8266固件也燒錄好了，接下來就是進(jìn)入編寫STM32程序的環(huán)節(jié)。（內(nèi)部復(fù)雜的代碼原理，有興趣的去機(jī)智云官網(wǎng)學(xué)習(xí)，這里只是教大家怎么用，以最快的速度做出自己想要的畢設(shè)）

3.1機(jī)智云能夠根據(jù)我們剛才制作的APP，自動(dòng)生成APP與STM32通訊的代碼工程，這一點(diǎn)機(jī)智云官方有說明（下圖）?？床欢筒焕硭?，反正等會(huì)我們會(huì)把自動(dòng)生成的代碼里關(guān)于APP與STM32通信相關(guān)的代碼移植進(jìn)我們自己的工程里邊實(shí)現(xiàn)與APP相互通訊。

進(jìn)行下方兩張圖的操作進(jìn)行代碼自動(dòng)生成。

首先

然后

3.2完成上圖操作后，等待一會(huì)，代碼就會(huì)自動(dòng)生成完畢，我們將其下載下來，并解壓后得到以下文件。我們只需要用到Gizwits文件夾和Utils文件夾里的內(nèi)容。

將機(jī)智云自動(dòng)生成代碼工程里的Gizwits文件夾和Utils文件夾兩個(gè)文件夾復(fù)制到資料（獲取方法在文章底部）里提供的基礎(chǔ)工程里邊?；A(chǔ)工程內(nèi)容就是在第九章的代碼工程基礎(chǔ)上多增加了兩個(gè)串口功能（一個(gè)串口負(fù)責(zé)打印信息，一個(gè)串口負(fù)責(zé)與ESP8266進(jìn)行通訊）和一個(gè)實(shí)現(xiàn)1ms定時(shí)的定時(shí)器功能。

這里說明一下，基礎(chǔ)工程需要具備什么條件呢？答案是：必須得有兩個(gè)串口功能和實(shí)現(xiàn)1ms定時(shí)的定時(shí)器功能。這一點(diǎn)可以看下圖，機(jī)智云官網(wǎng)上有提出。所以，如果不想用資料提供的基礎(chǔ)工程做移植操作，而是想用你自己的工程來做移植操作的，只要你的項(xiàng)目還空出兩個(gè)串口可以用，以及有個(gè)定時(shí)器，就可以繼續(xù)按下文進(jìn)行操作。

3.3然后打開資料里基礎(chǔ)工程。

在代碼里，兩個(gè)串口和定時(shí)1s的定時(shí)器初始化函數(shù)在mian()函數(shù)內(nèi)，看下圖。

3.4將剛剛移植到基礎(chǔ)工程的Gizwits文件夾和Utils文件夾里C文件和H文件包含進(jìn)工程內(nèi)。

3.5接下來打開gizwits_product.c,將HAL相關(guān)的代碼替換成標(biāo)準(zhǔn)庫的代碼。

接下來gizwits_product.h，進(jìn)行以下修改。

3.6上面一系列的注釋添加操作，只是將Gizwits文件夾和Utils文件內(nèi)的代碼內(nèi)容的HAL庫函數(shù)相關(guān)代碼全用標(biāo)準(zhǔn)庫代碼替換，下一步就是將Gizwits文件夾和Utils文件夾內(nèi)的代碼參與基礎(chǔ)工程的代碼執(zhí)行。

3.6.1將gizPutData( )添加到USART2的接收中斷內(nèi)，為什么是USART2呢？因?yàn)橘Y料提供的基礎(chǔ)工程里邊，USART2負(fù)責(zé)與ESP8266進(jìn)行通訊。（提示：操作該步驟前，先往usart.c添加gizwits_product.h頭文件，否則編譯器找不到gizPutData()函數(shù)）。

3.6.2將gizTimerMS( )添加到定時(shí)器3中斷函數(shù)內(nèi)。為什么定時(shí)器3，因?yàn)?/span>資料提供的基礎(chǔ)工程里用定時(shí)器3實(shí)現(xiàn)1ms的定時(shí)功能。（提示：操作該步驟前先往main函數(shù)添加gizwits_product.h頭文件，否則編譯器找不到gizTimerMS()函數(shù)）。

3.6.3然后將gizwits_product.c內(nèi)的userHandle()函數(shù)內(nèi)的每個(gè)變量進(jìn)行賦值，這些變量是前面我們?cè)谥谱鰽PP時(shí)，那些設(shè)置只讀的數(shù)據(jù)內(nèi)容，就是溫度、濕度、二氧化碳濃度和甲醛濃度。那哪個(gè)變量是溫度，哪個(gè)是濕度呢，這就要根據(jù)我們前面制作APP時(shí)，取的標(biāo)識(shí)名了，具體看下圖。

CO2就是二氧化碳濃度數(shù)據(jù)點(diǎn)的標(biāo)識(shí)名，所以二氧化碳濃度值要賦值給變量valueCO2，TVCO就是甲醛濃度標(biāo)識(shí)名。下圖就是賦值完的程序。

紅框的變量TEMP，HUMP，CO2和TVCO，已經(jīng)在mian( )函數(shù)里邊獲取了溫度值，濕度值，二氧化碳濃度值和甲醛濃度值了，看下圖。

（userHandle()函數(shù)，我們?cè)谙挛臅?huì)將其放入到main( )函數(shù)的while(1)循環(huán)里。目的是去不斷刷新變量valueTEMP，valueHUMP，valueCO2和valueTVOC的值，這樣APP上的溫濕度、二氧化碳濃度和甲醛濃度數(shù)據(jù)才會(huì)實(shí)時(shí)更新）

3.6.4然后在main( )函數(shù)內(nèi)添加userInit( )函數(shù)，gizwitsInit( )函數(shù)和gizwitsSetMode( )函數(shù)，這三個(gè)函數(shù)運(yùn)行一次就可以了，所以別放在while(1)循環(huán)里邊。（提示：操作該步驟前先往main函數(shù)添加gizwits_product.h頭文件，否則編譯器找不到這三個(gè)函數(shù)，已添加了就忽略該提示）。

說明：

userInit( )函數(shù)內(nèi)就是設(shè)置剛打開APP時(shí)，APP上那些數(shù)據(jù)內(nèi)容的初值，這里可以不用做設(shè)置，如果想要設(shè)置，那就直接將下圖紅色框的注釋打開然后將對(duì)應(yīng)的的標(biāo)識(shí)名變量賦值即可，（賦值的大小必須時(shí)在制作APP時(shí)設(shè)置的數(shù)值范圍內(nèi)。比如，我們?cè)谥谱鰽PP時(shí)，溫度數(shù)據(jù)點(diǎn)設(shè)置的范圍是-10~100，那我們對(duì)下圖的currentDataPoint.valueTEMP的賦值必須在-10~100這個(gè)范圍內(nèi)）。

gizwitsInit( )函數(shù)，就是開辟一個(gè)環(huán)形緩沖區(qū)，我們直接調(diào)用就是了。

關(guān)于gizwitsSetMode( )函數(shù)，機(jī)智云官網(wǎng)也做出說明（下圖）。這里我們直接選擇AirLink模式可以了，也就是gizwitsSetMode( )函數(shù)參數(shù)填2。

3.6.5在main( )函數(shù)的while(1)循環(huán)里邊添加 userHandle( )函數(shù)和 gizwitsHandle( ) 函數(shù)。

說明：

userHandle()函數(shù)，我們?cè)诓襟E2.6.3時(shí)，在該函數(shù)內(nèi)部對(duì)數(shù)據(jù)點(diǎn)的數(shù)值變量進(jìn)行賦值操作，也說了會(huì)將該函數(shù)放入main( )函數(shù)的while(1)循環(huán)里面，讓其不斷被執(zhí)行，目的是不斷刷新數(shù)據(jù)點(diǎn)變量存儲(chǔ)的值（數(shù)據(jù)點(diǎn)變量存儲(chǔ)的值會(huì)gizwitsHandle( )函數(shù)被實(shí)時(shí)上傳到APP），進(jìn)而使APP上的溫濕度，二氧化碳濃度，甲醛濃度這些數(shù)據(jù)不斷更新。

gizwitsHandle((dataPoint_t *)¤tDataPoint) 函數(shù)，機(jī)智云官網(wǎng)有對(duì)其功能做出解釋（下圖）?？梢岳斫鉃檫@是個(gè)后臺(tái)程序（聯(lián)網(wǎng)，上傳數(shù)據(jù)，接收下發(fā)數(shù)據(jù)等都跟它緊密相關(guān)），必須放在while(1)循環(huán)里時(shí)刻運(yùn)行著！

3.6.6 步驟3.6.5完成后，代碼已經(jīng)完成了APP上的傳感器數(shù)據(jù)實(shí)時(shí)更新的功能，其實(shí)就是我們不斷地往APP端不斷發(fā)送傳感器數(shù)據(jù)。接下來就是完善當(dāng)APP發(fā)指令下來時(shí)，設(shè)備端對(duì)應(yīng)的處理操作，就是APP發(fā)開關(guān)窗指令時(shí)，我們?cè)O(shè)備端做出相應(yīng)執(zhí)行動(dòng)作。

找到gizwits_product.c內(nèi)的gizwitsEventProcess函數(shù)，該函數(shù)就是對(duì)APP下發(fā)的指令事件進(jìn)行處理的。在該函數(shù)內(nèi)的switch判斷函數(shù)中，我們能看到EVENT_WINDOW_ONOFF,這里我們一看就知道是處理窗開關(guān)的地方，為什么呢，因?yàn)槲覀冊(cè)诓襟E1.7的時(shí)候給窗開關(guān)按鍵取的標(biāo)識(shí)名就叫做WINDOW_ONOFF,我當(dāng)時(shí)還讓小伙伴們?nèi)?biāo)識(shí)名的時(shí)候取“清楚”點(diǎn)，能夠一眼看出是什么意思。箭頭1指向的地方表示當(dāng)窗開關(guān)按鍵打開時(shí)，箭頭2指向的地方表示當(dāng)窗開關(guān)關(guān)閉時(shí)，知道箭頭1和2的意思后，我們就可以在箭頭3和4的地方編寫相應(yīng)操作了！

下圖是編寫完相應(yīng)操作的截圖。

自此代碼移植方面的工作就完成啦,編譯0警告0錯(cuò)誤后就可以直接去步驟4了。

4 成果演示。

4.1 完成上個(gè)步驟，代碼方面的移植工作已完成。按照下圖把所有模塊用杜邦線接起來，然后用Jlink或者STlink將上面完成代碼移植的代碼燒錄進(jìn)STM32里即可。(如果你的基礎(chǔ)工程用的是資料提供的代碼，就按照下圖接法，不是用資料提供的基礎(chǔ)工程的話，就自行根據(jù)自己的情況將ESP8266、TTL轉(zhuǎn)USB模塊連接到STM32)

4.2 將TLL轉(zhuǎn)USB模塊插上電腦，并打開串口助手，就能看到串口在打印信息了，這里咱們先不管打印內(nèi)容。

4.3 接下來打開機(jī)智云app，點(diǎn)擊左上角的 ＋ ，然后一鍵配網(wǎng)。

4.4

4.5

4.6

4.7 APP搜索附件設(shè)備的時(shí)候，STM32要保持供電。以免影響配對(duì)。

4.8 這時(shí)我們看串口打印助手打印的內(nèi)容，在配對(duì)過程中若出現(xiàn)下圖中紅色框的打印信息，則說明APP已和你的設(shè)備（STM32+ESP8266）配對(duì)上了。（RSSI后面的數(shù)值不一定是3，但一定得大于0）

4.9 配對(duì)上好，APP回到首頁，我們就能看到有個(gè)設(shè)備“亮”起來了，然后點(diǎn)擊該設(shè)備。

4.10點(diǎn)擊設(shè)備后，我們就看到左下圖的內(nèi)容，跟OLED顯示的內(nèi)容有點(diǎn)差異，主要是APP更新數(shù)據(jù)速度比OLED顯示的慢而已。（配對(duì)上后，下次就不用再次配對(duì)了）

? ??

4.11開關(guān)窗演示