- 瞭解事件驅動程式設計
- 瞭解 MIT App Inventor 平臺中不同類型的塊
事件
移動應用程式基於事件驅動的程式設計。
事件驅動的程式設計 基於事件,而不是從上到下運行代碼。有些程式只是一次執行所有代碼,但移動應用程式的工作方式取決於使用者如何與它交互。
移動應用程式基於事件工作,這些事件是觸發代碼運行的事情。一個例子是 – 用戶點擊一個按鈕。該事件是使用者按兩下時發生的事件。事件觸發代碼運行,稱為事件處理程式。
停下來討論
你能想到一些你與手機互動的方式以及你的手機有什麼作用嗎?以下是一些入門方法:
- 當您按下某個應用的圖示時,該應用將打開。
- 當您按兩下「發送」以獲取文字消息時,它會發送消息併發出聲音。
- 當您嘗試登錄應用程式時,該應用程式會要求輸入密碼。
讓我們先看一下 App Inventor 平臺的不同部分。
App Inventor 有兩個視窗,您可以使用它來構建 App。按兩下“設計器”按鈕(螢幕右上角)將轉到 “設計器”,您可以在其中設計用戶介面。 用戶介面 是應用中使用者可以與之交互的所有內容。這些東西可以是按鈕、導航欄、文字框、圖片等。
APP INVENTOR 設計器視窗
調色板
您可以從 Palette 中選擇要添加到 Viewer 的元件,該 Viewer 位於視窗中間。有幾個元件抽屜可供探索和使用。
觀眾
將元件拖動到 查看器上。元件是從頂部到左側向下添加的。您必須使用佈局元件和對齊方式來更好地控制元件的確切顯示位置。
元件清單
此清單為您提供了螢幕上元素的層次結構清單。您可以通過在檢視器中或此清單中按下它們來選擇它們。
屬性面板
屬性面板允許您設置每個元件的屬性,例如字體大小、對齊方式、顏色等。
不可見元件
不可見的元件不會顯示在螢幕上,但仍是應用的一部分。當您拖放它們時,它們會顯示在螢幕下方。
當有人使用您的應用程式時,他們將通過按下按鈕、輸入文字等方式與您的使用者介面進行交互。由你來決定你的應用程式應該做什麼,並程式設計它來做這些事情。
塊編輯器
按兩下塊將帶您進入 塊編輯器 視窗,您可以在其中進行所有編碼。您可以將塊從左側面板拖動到螢幕中央的工作區中。
在左側,您將找到可以拖動到工作區中的塊。它們屬於 Control 和 Logic 等類別/抽屜。
觀眾
這是您的工作區,您可以在其中拖動所有塊。你可以移動它們,將它們相互夾住和插入。您還可以刪除任何不需要的塊。
元件塊
應用中的每個元件都有自己的一組塊。您將按下 該元件以顯示塊,然後您可以將其拖動到工作區中。
事件處理程式
App Inventor 中的事件處理程式塊是金色的,形狀為開放塊,因此您可以在其中捕捉塊。這些塊僅在該事件發生時運行。
按兩下按鈕時
您已經使用過這個。當使用者按下特定按鈕時,您會希望該應用程式執行某些操作,例如打開另一個螢幕或發送消息。
更改螢幕方向時
如果使用者將手機從縱向(垂直)變為橫向(水準),您可能需要執行某些操作,例如更改螢幕佈局或元件的大小。
當滑塊位置改變時
滑塊允許使用者拖動它以沿它選擇某個值。這可能會觸發對另一個元件的更改。例如,您可以使用滑塊在繪圖應用中增加筆的大小。
功能
函數 是執行某些操作的代碼塊。它們可以在應用程式內多次運行。在 App Inventor 中,功能塊的顏色為紫色。某些語言將函數稱為方法或過程。事實上,App Inventor 通常將這些稱為 過程。它們做了一些事情,所以你可以把它們看作是動作塊。
TextToSpeech.Speak (文本到語音)
TextToSpeech 元件可以說出或說出您希望它朗讀的任何文本。
Camera.TakePicture
相機元件可以使用手機拍照。
聲音播放
Sound 元件可以播放聲音。
SETTER 和 GETTER
綠色塊與元件及其屬性相關。
可以捕捉到另一個塊的淺綠色塊稱為 getters,因為您正在獲取屬性的值。
塞特是 深綠色的,它們可以卡入,末端有一個開口槽。這允許您設定屬性的值。
Button1 的文本
Button1 的文本被 獲取 並存儲在變數全域問候語中。
Button1 的文本
Button1 的文本設置為“我喜歡編碼。“我喜歡編碼”字樣將出現在按鈕上。
標籤 1 的文字
Label1 的 Text 設定為 Sound1 的 Source 。這意味著聲音文件名將顯示在 Label1 中。
聲音的來源1
Sound1 的 Source(聲音檔名) 被獲取 並存儲在 Label1 的 Text 屬性中,設置標籤的文字實質上顯示標籤中的值,因此聲音檔的名稱將出現在 Label1 中。
label1 的文本
TextToSpeech 獲取 Label1 的 Text 的內容並朗讀它。Label1 中顯示的任何文本都會被朗讀。
導師小貼士
最佳做法: 提醒學生,這與真正的編碼完全一樣。我們正在使用的奇怪詞彙(函數、getter、setter)正是編碼人員使用的。
要向學生提出的指導性問題: 你能想到你所做的一些日常工作嗎?(例如:烤蛋糕、刷牙——任何有可重複步驟的事情)。功能與演算法非常相似!
導師提示由 AmeriCorps 提供支援。
數據塊
使用 setter 塊時,可能會使用一些其他內置塊來表示數據或可在應用中使用的資訊。下面可以看到一些可以使用的數據塊示例。
數位
數位值可以用作應用程式中的數據。這些塊可以在塊調色板的數學抽屜中找到。
文字或字串
文字(有時稱為字串)可以用作數據。這些是可以在應用中使用的字母、單詞和句子。這些塊位於「塊」選項板的「文本」抽屜中。
布爾
此數據類型只有兩個可能的值 – true 或 false。 這些塊可以設置或測試某物的「狀態」 ,並將在條件語句中使用,您將更多地瞭解這些條件。
活動:音板教程
按照下面的視頻教程進行操作
並按照下面視頻中戴夫的指示進行操作。
請注意,視頻從 1:11 開始,以跳過載入說明。如果您使用上述連結載入了啟動專案,則不需要這些說明。
挑戰
在活動中,您使用了:
- Event Handler 塊
- 功能塊
讓我們嘗試通過添加到您的 Soundboard 應用程式來使用一些 setter 和 getter 塊。
當使用者按下任何圖片以播放關聯的語音時,請更改螢幕的背景顏色。
您可以將其更改為一種特定顏色,但這樣您就無法輕鬆地將其更改回起始顏色(黑色),因此,請將螢幕的背景更改為隨機顏色。
提示:檢查顏色抽屜並查找 製作色 塊。然後在數學抽屜中查找 隨機整數 塊。顏色由 3 個數位組成,RGB 代表紅色、綠色、藍色,範圍從 0-255。
反射
現在,您已經對不同的代碼塊有了更多的瞭解,請考慮您的應用解決方案:
關鍵術語的審查
- 用戶介面 – 使用者可以與應用中交互的所有內容
- 設計師 – 視窗,您可以在其中向應用程式添加元件並設計它們的外觀
- 塊編輯器 – 視窗,您可以在其中為應用程式編寫塊代碼
- 事件 – 觸發代碼運行的事件
- 事件處理程式 – 代碼塊,告訴您的應用程式在事件發生時該做什麼
- 事件驅動程式設計 – 基於事件的程式設計,而不是從上到下運行整個代碼
- 函數 – 可運行的代碼塊,可以多次運行
其他資源
在 appinventor.org 上查看 Dave Wolber 的 App Inventor 初學者教程的更多內容