{{ 'fb_in_app_browser_popup.desc' | translate }} {{ 'fb_in_app_browser_popup.copy_link' | translate }}
{{ 'in_app_browser_popup.desc' | translate }}
{{word('consent_desc')}} {{word('read_more')}}
{{setting.description}}
{{ childProduct.title_translations | translateModel }}
{{ getChildVariationShorthand(childProduct.child_variation) }}
{{ getSelectedItemDetail(selectedChildProduct, item).childProductName }} x {{ selectedChildProduct.quantity || 1 }}
{{ getSelectedItemDetail(selectedChildProduct, item).childVariationName }}
課程大綱
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下載與安裝」的說明。