前言

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

主要材料準備

STM32F103C8T6板子

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

?? ??

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

1.APP制作

1.1 首先利用網上的一些物聯網自助開發平臺去制作APP，這里我選用機智云。瀏覽器搜索機智云，然后進入官。

1.2 進入官網后點擊右上角的開發者中心。

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

1.4 注冊完成后，登錄賬號就進入了下方界面，點擊左側“智能產品”欄的“+創建”，開始制作APP。

1.5 點擊“+創建”后，就來到下圖中的界面進行APP的類型選擇（照著下圖操作）。我們點擊照明，再點擊 球泡燈，然后點擊自定義方案，最后點擊 燈。（這些操作只是先給APP選個模板而已，到時候功能可以不跟控燈功能相關）

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

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

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

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

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

數據類型：窗的狀態有“開”和“關”兩種狀態，所以數據類型是布爾值類型（也就是0和1）。

填寫好標識名、顯示名稱、讀寫類型、數據類型后點擊界面下方的 確定。

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

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

下圖是手機掃碼后，我們所看到的手機視角，IOT智能家居是我們步驟1.6時候取的APP名字，我們點擊紅色方框進入APP界面！（右圖所示）

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

然后我們就會發現，網頁上界面跟著動了起來，下圖所示。

一個APP只有控制開關窗的功能太單調了，我們點擊下圖左側的 產品信息 回到步驟1.7的地方，繼續添加APP的內容。

1.10 然后點擊左側的 新建，填寫參考步驟1.7的操作填寫標識名，顯示名稱，讀寫類型，數據類型去完成APP新的內容的添加。

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

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

這個時候屬于你自己的APP就做好了！！照著步驟一步一步來，五分鐘內完成！有手就行！

2 給ESP8266模塊燒錄固件

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

2.1 首先在機智云官網下載ESP8266固件到本地電腦上，

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

2.2 確認下載的固件

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

2.3 ESP8266接線。

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

2.4 設備燒錄。

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

點擊OK

2.5 燒錄設置。

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

2，選擇步驟3.2時，我們剛剛確認好的ESP8266固件

3，地址設置為0

4, SPI SPEED 選擇 40MHz

5, SPI MODE 選擇 DOUT

6，將DoNotChgBin勾選上

7，選擇USB轉TTL模塊對應的串口

8，波特率選擇115200

2.6 燒錄操作

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

會出現

步驟二、將ESP8266上的RST引腳線拔掉，也就是將ESP8266進行復位,會出現下圖的情況。

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

3.代碼移植

現在APP制作完畢，ESP8266固件也燒錄好了，接下來就是進入編寫STM32程序的環節。（內部復雜的代碼原理，有興趣的去機智云官網學習，這里只是教大家怎么用，以最快的速度做出自己想要的畢設）

3.1機智云能夠根據我們剛才制作的APP，自動生成APP與STM32通訊的代碼工程，這一點機智云官方有說明（下圖）。看不懂就不理它，反正等會我們會把自動生成的代碼里關于APP與STM32通信相關的代碼移植進我們自己的工程里邊實現與APP相互通訊。

進行下方兩張圖的操作進行代碼自動生成。

首先

然后

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

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

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

3.3然后打開資料里基礎工程。

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

3.4將剛剛移植到基礎工程的Gizwits文件夾和Utils文件夾里C文件和H文件包含進工程內。

3.5接下來打開gizwits_product.c,將HAL相關的代碼替換成標準庫的代碼。

接下來gizwits_product.h，進行以下修改。

3.6上面一系列的注釋添加操作，只是將Gizwits文件夾和Utils文件內的代碼內容的HAL庫函數相關代碼全用標準庫代碼替換，下一步就是將Gizwits文件夾和Utils文件夾內的代碼參與基礎工程的代碼執行。

3.6.1將gizPutData( )添加到USART2的接收中斷內，為什么是USART2呢？因為資料提供的基礎工程里邊，USART2負責與ESP8266進行通訊。（提示：操作該步驟前，先往usart.c添加gizwits_product.h頭文件，否則編譯器找不到gizPutData()函數）。

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

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

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

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

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

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

說明：

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

gizwitsInit( )函數，就是開辟一個環形緩沖區，我們直接調用就是了。

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

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

說明：

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

gizwitsHandle((dataPoint_t *)¤tDataPoint) 函數，機智云官網有對其功能做出解釋（下圖）。可以理解為這是個后臺程序（聯網，上傳數據，接收下發數據等都跟它緊密相關），必須放在while(1)循環里時刻運行著！

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

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

下圖是編寫完相應操作的截圖。

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

4 成果演示。

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

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

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

4.4

4.5

4.6

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

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

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

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

? ??

4.11開關窗演示