阿里雲IOT入門教程（一）阿里雲IOT Studio自建手機App控制Wemos D1 Mini( ESP8266 ）板載燈亮滅
概述
通過阿里雲物聯網平臺提供的IOT Studio服務創建一個手機App，實時控制WeMos D1 Mini板載的亮滅。這個加上繼電器就可以控制家中照明燈的亮滅，擴展性很強。
所需材料
Wemos D1 Mini開發板 *1 （9.9元）
智能手機 *1（。。。。每個人都有吧。。。）
合計：9.9元
Mqtt預備知識
參見帖子。。。。（先挖個坑，，，待我回頭補…）
hacklab端開發
這個部分就不重複寫了參見之前的帖子。這裏只給出大致的提綱。。嘿嘿嘿
VSCode+PlatformIo IDE（or hacklab方式）實現Wemos D1 Mini（ESP8266）接入阿里雲物聯網平臺
ESP8266 （Wemos D1 Mini）阿里雲IOT入門教程（二）— 如何測試Mqtt數據的發送和接收
硬件端上報屬性數據
主要代碼
阿里雲物聯網平臺端的設置
創建產品
創建產品性質
創建設備
複製Topic
阿里雲IOT Studio設置
創建項目
導入產品
手機端App開發
完成上圖的操作後，頁面就會跳轉到下面的UI開發界面。這個界面主要分爲三個區域：
1.區域一：上半部分爲整個App的UI頁面導航。分爲自定義頁面、賬號模塊、首頁模塊和我的模塊四個部分。下半部分爲一些UI開發時需要的控件。
2.區域二：爲各個頁面UI的設計頁面。
3.區域三：對區域二中的一些控件進行顏色、大小、數據源的配置。
這裏有一點需要特別詳細的介紹下。“賬號模塊”和“我的模塊”兩個部分開始的時候可以不用修改直接用默認的。"LED燈控制”這個頁面是我對“自定義頁面”重命名後名字。你第一次進入的時候這個位置可能顯示的不是這個，而是“自定義界面”。這個自定義界面很重要。他需要和後面的那個“首頁模塊”->列表頁進行數據關聯。後續會有詳細的介紹。我因爲是先進行了測試才寫的教程。所以截圖顯示的可能並不是你默認打開的樣子。請稍加註意。
App UI界面開發
整個App的UI開發，或者說你遠程控制這個燈的操作界面是在“自定義頁面”完成的。
按照下圖所示的順序。我們從區域一拖拽一個“開關”控件到區域二的界面上。並在區域三進行一些屬性的設置。如大小，頁面位置和顏色。
從區域一拖拽一個“文本標籤”控件到頁面上，更改文字爲“燈的開關”。對上一步的按鈕進行文字說明。
App UI界面與產品進行關聯
上一步拖拽到頁面上的這個按鈕控件主要是用來控制開發板上的板載燈的。所以需要對他的數據源進行配置。使按鈕和板載燈關聯起來。我們的板載燈其實就是上一個試驗中智能燈光產品那個智能插座的屬性。按照下圖的順序，打開“數據源配置”頁面。
在數據源配置界面，按照之前實驗中設置的產品、設備名稱進行配置。如果你不是按照我之前實驗做的。你就需要關聯自己的產品、設備等信息。下面的配圖少圈選了一個“格式驗證”，你點擊這個按鈕，可以驗證你關聯產品是否正確。驗證無誤後，點擊“確定”，完成按鈕和設備的關聯。
自定義頁面和【功能】->列表頁的關聯
註冊用戶
接下來我們會將這個程序打包成安裝程序，安裝程序會有一個登錄頁面。登錄頁面會要求輸入手機號和密碼。所以接下來我們在IOTStudio裏註冊下用戶。方便到時候登錄。（你也可以在註冊頁面進行註冊）
打包應用程序
打包安卓apk
在右上角選擇“構建”按鈕，在彈出的菜單中選擇“”Android構建”
選擇自己用。
隨機生成一個包名。
進入包生成界面。需要等待一點點時間。
IOS構建
IOTStudio提供的ios構建是源代碼包。裏面的bundleID你就用ios的app開發命名方式自己起一個名字就好比如“com.lalala.ledtest”，版本填寫“1.0.0”,就可以下載生成的源碼包。但是我把這個源碼包發給了IOS開發的朋友，他說運行的時候需要一個三方的插件什麼“cocoapods”，但是死活下載不下來這個插件。。。emmm 等我回頭研究研究。。。這裏先留個坑坑，有會的童鞋務必給我留言哈。。。我好像學習這個部分噻。
安卓apk安裝使用
安裝apk
通過掃之前生成的二維碼或直接下載的方式下載apk，下載好後進行安裝。雙擊打開apk會顯示下面的登錄頁面。在下面的頁面用你之前創建的賬號密碼進行登錄即可。
輸入賬號密碼後進入下面所示的界面。點擊阿里雲LED控制。
進入自定義的界面。打開關閉按鈕即可以控制板載的LED燈亮滅。板載LED其實就是一個引腳的高低電平變化。所以這個看似簡單的控制其實可以擴展成很多其好玩的設計，不如物聯網入門必會項目之----遠程澆花。
