[ Intel Edison ] 透過 App Inventor 呼叫 API 開關 LED

前置準備作業

  1. 準備 Intel® Edison 開發板

  2. 準備 Arduino Breakout Board

  3. 準備 Grove LED

  4. 組裝 Intel Edison 、 Arduino Breakout Board 與 LED 並連接到電腦 ( LED 接 D5 )

Intel Edison 與 Arduino Breakout Board 連接圖

Imgur


Intel Edison 端

請參考 透過 API 開關 LED - Python


App Inventor 端


  • Step 2. 新增專案

    Projects -> Start New Project

Imgur


  • Step 3. 建立專案名稱

Imgur Imgur


  • Step 4. 建立 LED 開關按鈕與 Web Viewer

    從左邊的 User Interface 拉 2 個 Button 到 Viewer 中

    從左邊的 User Interface 拉 1 個 Web 到 Viewer 中

Imgur


  • Step 5. 改變 Button 名稱

    點選 Components 中的 Button1 更名為「Open」

    點選 Components 中的 Button2 更名為「Close」

Imgur


  • Step 6. 更改 Button 顯示名稱

    點選 Componets 中的「Open」按鈕,在到右邊的 Properties 中的 Text 更改顯示名稱為「開啟」

    點選 Componets 中的「Close」按鈕,在到右邊的 Properties 中的 Text 更改顯示名稱為「關閉」

Imgur


  • Step 7. 點選畫面右上角的 Blocks

Imgur Imgur


  • Step 8. 建立一個存放 IP 位置的全域變數

    Variables -> initialize global name to

Imgur Imgur


  • Step 9. 將 global 取名

    將 name 的地方取一個變數名稱代替,如 url_base

Imgur


  • Step 10. 輸入 IP 位置

    從左邊的 Blocks 區塊中的 Text 取得第一個方塊並輸入 IP 位置

Imgur Imgur Imgur


  • Step 11. 設定 Open 按鈕的點擊動作

    點選左邊的 Blocks 中的 Open 按鈕並點選第一個方塊

Imgur Imgur


  • Step 12. 設定要呼叫的 API

    點選左邊 Blocks 中的 Web1 元件並選擇 set Web1 url to 的元件

Imgur Imgur

點選左邊的 Blocks 中的 Text 並點選 join 元件

Imgur Imgur

點選左邊的 Blocks 中的 Variables 並點選 get 元件

Imgur Imgur Imgur

點選左邊的 Blocks 中的 Text 並點選第一個方塊,輸入「/api/v1.0/led」

Imgur Imgur Imgur


  • Step 13. 設定 RequestHeaders

點選左邊的 Blocks 中的 Web1 並點選 set Web1 RequestHeaders to 元件

Imgur Imgur

點選左邊的 Blocks 中的 List 並點選 make a list

Imgur Imgur

點選左邊的 Blocks 中的 Text 並點選第一個方塊,輸入「Content-Type」與「application/x-www-form-urlencoded」

Imgur Imgur Imgur


  • Step 14. 設定 API 傳入參數

點選左邊的 Blocks 中的 Web1 並點選 call Web1.PostText text

Imgur Imgur

點選左邊的 Blocks 中的 Web1 並點選 call Web1.BuildRequestData list

Imgur Imgur

點選左邊的 Blocks 中的 List 並點選 make a list

Imgur Imgur

點選左邊的 Blocks 中的 Text 並點選第一個方塊,輸入「turn」與「on」

Imgur Imgur Imgur


  • Step 15. 將剛才建立的 Open 按鈕的動作複製一份,並修改成 Close 的按鈕事件

Imgur

將 Open Click 改成 Close Click

Imgur

更改呼叫 API 的傳入參數,將原本的 on 改為 off

Imgur


  • Step 16. 打包程式

    點擊 Connect -> AI Companion

Imgur Imgur


Android 端

  • Step 1. 到 Google Play 下載 MIT AI2 Companion

Imgur


  • Step 2. 開啟 MIT AI2 Companion

Imgur


  • Step 3. 輸入 Six Character Code 並按下 connect with code

Imgur

結果畫面

點擊「開啟」按鈕

Imgur

點擊「關閉」按鈕

Imgur


List of blogs

Archer

Having being a full stack engineer. Experience with C, Python, Go, Swift, JavaScript, Node.js, LinkIt 7697, LinkIt Smart 7688, Raspberry Pi, ARM mbed, IoT solutions. Contact us : [email protected]

ALL RIGHTS RESERVED. COPYRIGHT © 2016. Designed and Coded by Makee.io