###### tags: `FM631A`

# LAB15 - iPhone 範例

:::info
此範例除了 iPhone 以外, 也同樣適用於 Android 手機。
:::

## AIO 建立 Feed

因為要將資料上傳到 AIO, 所以建立一個新的 Feed 來存放資料。請參考第 7 章到 [Adafruit IO](https://io.adafruit.com/) 建立一個名為 **door** 的 Feed ：


## 增加名稱資料夾

1. 開啟**下載範例檔案**, 並切換到『網頁資料/door_lock_iphone』資料夾：


2. 切換到 images 資料夾, 並建立**名稱資料夾**。此範例為 Chuan、Teddy 兩個人：


3. 在名稱資料夾內各自**放入 3 張對應的圖片**。圖片名稱一定要各自命名為 1、2、3 (圖片格式限制為 jpg 和 png)：

**Chuan 資料夾**

**Teddy 資料夾**

:::info
我們提供的範例網頁中, 只會讀取檔名為 1、2、3 的圖片, 所以可以多放圖片(程式不會讀取到), 不能少放。如果想要網頁多讀取一些圖片, 可以到 door_lock_iphone 資料夾裡的 script.js 內 (184 行) 更改：
<br>

for (let i = 1; i <= 3; i++) {

:::

## 上傳網頁資料夾

1. 連上 [GitHub 網站](https://github.com/), 切換到第 8 章建立的倉庫, 並點選 **Add file/Upload files**：


2. 將 **door_lock_iphone 資料夾** 拖曳至 GitHub：


3. 等待檔案全部上傳完畢後, 按下 **Commit changes**：


4. 即可看到 **door_lock_iphone 資料夾**：


## 開啟網頁

1. 在 Chrome 瀏覽器輸入以下網址開啟網頁：

    https://使用者名稱.github.io/door_lock_iphone/index.html

:::success
使用者名稱是 **GitHub 名稱**, 例如筆者的 GitHub 名稱是 **flagweng**, 網址就會是：
<br>

    https://flagweng.github.io/door_lock_iphone/index.html

:::


2. 輸入**前面建立放圖片的資料夾名稱**, 如果有多個資料夾請以**英文逗號隔開**, 輸入完畢後按下**確定**：


3. 輸入 **AIO 使用者名稱**。並按下**確定**：


4. 點選**允選**：


5. 稍等一下即可看到畫面：


6. 輸入 **AIO 的金鑰**, 並按下**辨識按鈕**：


7. 切換到 Adafruit IO, 點選剛剛建立的 door。如果有成功辨識, 則會出現資料：


## 執行程式

現在已經將資料上傳到 AIO 平台, 接著使用 ESP32 取得資料：

from umqtt.robust import MQTTClient # mqtt函式庫
from servo import Servo
from machine import Pin
import math
import network
import time

# 名稱列表
name_list = ["Teddy","Chuan"]

# 建立伺服馬達物件
my_servo = Servo(Pin(22))

# 連線至無線網路
sta=network.WLAN(network.STA_IF)
sta.active(True)   
sta.connect('無線網路名稱','無線網路密碼')  
while not sta.isconnected() :
    pass
print('Wi-Fi連線成功')

# MQTT 參數
mqtt_client_id = 'door'                       # 用戶端識別名稱(可以隨意取名)
AIO_URL = 'io.adafruit.com'                   # 主機網址
AIO_USERNAME = '請填入 Adafruit IO 使用者名稱'  # 帳戶名稱
AIO_KEY = '請填入 Adafruit IO 金鑰'            # 金鑰

client = MQTTClient(client_id=mqtt_client_id,  # 用戶端識別名稱
                    server=AIO_URL,            # 中介伺服器網址
                    user=AIO_USERNAME,         # 帳戶名稱
                    password=AIO_KEY)          # 金鑰                      
# 連線至 MQTT 伺服器          
client.connect()          
print('MQTT連線成功')

# 從 MQTT 伺服器獲得資料
def get_cmd(topic,msg):
    face = float(msg)
    name_index = int(math.ceil(face))-1
    dis = face-name_index
    if((name_index >= 0) and (dis < 0.4)):
        print(name_list[name_index],dis)
        print("開啟")
        my_servo.write_angle(0)
        time.sleep(3)
        my_servo.write_angle(90)
    else:
        print("我不認識你!!")
    
client.set_callback(get_cmd)

client.subscribe(str.encode(AIO_USERNAME)+b"/feeds/door")

while True:
    # 確定是否有新資料
    client.check_msg()

:::info
第 9 行：更改為**自己的名稱列表**。要與網頁上輸入的**順序相同**。

第 17 行：輸入**無線基地台名稱、密碼**。

第 25-26 行：輸入 **AIO 使用者名稱、密碼**。
:::

## 測試程式

執行程式後, 如果 ESP32 連上**指定基地台**並**訂閱 MQTT** 則會出現以下畫面：


接下來就可以使用手機辨識：


只要辨識到**名稱正確**且**差距小於 0.4**, 伺服馬達就會轉動。相反的, 只要其中一個條件沒達成, 互動環境就會顯示『**我不認識你!!**』。