Lesson03 / App Inventor 2介紹3

課程大綱

1. 第一個app

課程內容

1.　我們第一個app要做的是模擬開關燈的過程。
　　有一個按鈕可以將燈打開，燈打開後碰一下燈，燈就會關掉。
　　做出來的成果請看以下影片。



2.　我們開一個新專案，名稱是「Lesson03」。
　　然後將App名稱(可用中文)改成「開關燈」。

3.　從左方「元件面板」中的「使用者介面」裡將「按鈕」拉進中間手機畫面中。
　　點擊右方「元件列表」裡的按鈕元件，右方會出現「元件屬性」，裡面有元件的各種屬性可以設定。
　　我們先將按鈕在畫面中顯示的文字改成「開」。
　　字體大小改成50，大點比較清楚。

4.　然後點擊「元件清單」下方的「重新命名」，將「按鈕1」換成新名稱「開燈」。
　　這是在程式設計時用的名稱。
　　我們把這個按鈕當作開關。

5.　依相同步驟，增加一個圓形按鈕，名稱為「燈」。
　　屬性設定如圖所示。
　　我們把這個按鈕當作燈。

6.　然後進到「程式設計」畫面。
　　在左邊會看到我們使用的元件。

7.　當點擊元件時，會出現可使用的「程式方塊」，每個元件的「程式方塊」內容不太一樣。
　　這裡我們使用第一個「被點選時要執行某動作」的「程式方塊」。
　　只要點一下，「程式方塊」就會被帶入畫面中。

8.　「當開燈的按鈕被點選」時要執行什麼動作呢?
　　我們用元件「燈」的背景顏色變換來表示燈的開或關。
　　點擊元件「燈」打開「程式方塊」，將「設燈背景顏色為」帶進畫面。
　　再放到「當開燈被點選時」要執行的後方空位中。

9.　當按鈕「燈」的背景顏色變成紅色時，表示燈打開了。
　　顏色我們從左邊「方塊」 →「內件方塊」 →「顏色」中去選。
　　「內件方塊」 為一般通用的「程式方塊」。
　　一樣是點擊後就會被帶入畫面。
　　我們選擇紅色，並把它加到「設燈背景顏色為」的後面。

10.　我們假設這是觸控燈，當碰一下燈就會關掉。
　　 依前面的步驟，完成這段程式。
　　 我們的第一個app就大功告成了。

11.　我們來看一下成果。
　　 選擇左上方「連線」 →「AI Companion」。

12.　會出現連接的QR Code和編碼。

13.　打開手機的「MIT AI2 Companion」，用「scan QR code」掃描QR Code或直接輸入六位編碼。

14.　然後會開始連線。在連線完成後，就能在手機裡即時預覽成果。
　　 使用「MIT AI2 Companion」只有在連線時才能在手機上操作app，並不會保存app在手機裡。
　　 如果要安裝app，就要用「打包apk」。

15.　左上方選擇「打包apk」 →「打包apk並顯示二維條碼」。

16.　開始製作apk檔。

17.　完成後也會出現一個QR Code。
　　 用「MIT AI2 Companion」或其他QR Code掃描程式都可以，掃描QR Code後就可以下載apk檔安裝。

18.　由於不是從Google Play下載的應用程式，
　　 安裝時有一些注意事項，請參考「app下載與安裝」的說明。