前言

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

主要材料準(zhǔn)備

STM32F103C8T6板子

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

?? ??

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

1.APP制作

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

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

1.3 大部分同學(xué)還沒注冊過機智云賬號，所以先去注冊一個。

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

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

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

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

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

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

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

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

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

1.8 完成上面的步驟后，就自動來到了下圖的界面。這個時候我們的 只控制窗開關(guān)的APP 已經(jīng)做好了，那我們怎么看效果呢？我們先點擊下圖左側(cè)的 虛擬設(shè)備 。

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

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

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

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

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

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

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

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

這個時候?qū)儆谀阕约旱腁PP就做好了??！照著步驟一步一步來，五分鐘內(nèi)完成！有手就行！

2 給ESP8266模塊燒錄固件

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

2.1 首先在機智云官網(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個引腳，但ESP8266燒錄時，有7根引腳需要接線，所以ESP8266沒法接到USB轉(zhuǎn)TTL模塊上的引腳，我們就把它們接到我們的STM32上。）線連接好后，將USB轉(zhuǎn)TTL模塊接如電腦的USB口，STM32也要保持供電。（或者去淘寶買個ESP8266固件下載器，這樣就不用自己接線了，下載器鏈接我也放在資料里）

2.4 設(shè)備燒錄。

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

點擊OK

2.5 燒錄設(shè)置。

1，打勾，選擇燒錄該項固件

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

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

4, SPI SPEED 選擇 40MHz

5, SPI MODE 選擇 DOUT

6，將DoNotChgBin勾選上

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

8，波特率選擇115200

2.6 燒錄操作

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

會出現(xiàn)

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

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

3.代碼移植

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

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

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

首先

然后

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

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

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

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

在代碼里，兩個串口和定時1s的定時器初始化函數(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呢？因為資料提供的基礎(chǔ)工程里邊，USART2負(fù)責(zé)與ESP8266進(jìn)行通訊。（提示：操作該步驟前，先往usart.c添加gizwits_product.h頭文件，否則編譯器找不到gizPutData()函數(shù)）。

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

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

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

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

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

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

說明：

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

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

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

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

說明：

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

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

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

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

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

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

4 成果演示。

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

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

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

4.4

4.5

4.6

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

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

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

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

? ??

4.11開關(guān)窗演示