App Inventor:仔細看看

  • 瞭解事件驅動程式設計
  • 瞭解 MIT App Inventor 平臺中不同類型的塊

以下是本課的活動:

事件

移動應用程式基於事件驅動的程式設計。 

事件驅動的程式設計 基於事件,而不是從上到下運行代碼。有些程式只是一次執行所有代碼,但移動應用程式的工作方式取決於使用者如何與它交互。

移動應用程式基於事件工作,這些事件是觸發代碼運行的事情。一個例子是 – 用戶點擊一個按鈕。該事件是使用者按兩下時發生的事件。事件觸發代碼運行,稱為事件處理程式

停下來討論

你能想到一些你與手機互動的方式以及你的手機有什麼作用嗎?以下是一些入門方法:

  • 當您按下某個應用的圖示時,該應用將打開。
  • 當您按兩下「發送」以獲取文字消息時,它會發送消息併發出聲音。
  • 當您嘗試登錄應用程式時,該應用程式會要求輸入密碼。
女孩們在討論

讓我們先看一下 App Inventor 平臺的不同部分。

App Inventor 有兩個視窗,您可以使用它來構建 App。按兩下“設計器”按鈕(螢幕右上角)將轉到 “設計器”,您可以在其中設計用戶介面。 用戶介面 是應用中使用者可以與之交互的所有內容。這些東西可以是按鈕、導航欄、文字框、圖片等。

APP INVENTOR 設計器視窗

App Inventor 設計器視窗
1

調色板

您可以從 Palette 中選擇要添加到 Viewer 的元件,該 Viewer 位於視窗中間。有幾個元件抽屜可供探索和使用。

2

觀眾

將元件拖動到 查看器上。元件是從頂部到左側向下添加的。您必須使用佈局元件和對齊方式來更好地控制元件的確切顯示位置。

3

元件清單

此清單為您提供了螢幕上元素的層次結構清單。您可以通過在檢視器中或此清單中按下它們來選擇它們。

4

屬性面板

屬性面板允許您設置每個元件的屬性,例如字體大小、對齊方式、顏色等。

5

不可見元件

不可見的元件不會顯示在螢幕上,但仍是應用的一部分。當您拖放它們時,它們會顯示在螢幕下方。

當有人使用您的應用程式時,他們將通過按下按鈕、輸入文字等方式與您的使用者介面進行交互。由你來決定你的應用程式應該做什麼,並程式設計它來做這些事情。

塊編輯器

按兩下塊將帶您進入 塊編輯器 視窗,您可以在其中進行所有編碼。您可以將塊從左側面板拖動到螢幕中央的工作區中。

App Inventor 塊編輯器
1
塊調色板

在左側,您將找到可以拖動到工作區中的塊。它們屬於 Control 和 Logic 等類別/抽屜。

3

觀眾

這是您的工作區,您可以在其中拖動所有塊。你可以移動它們,將它們相互夾住和插入。您還可以刪除任何不需要的塊。

2

元件塊

應用中的每個元件都有自己的一組塊。您將按下 該元件以顯示塊,然後您可以將其拖動到工作區中。

事件處理程式

App Inventor 中的事件處理程式塊是金色的,形狀為開放塊,因此您可以在其中捕捉塊。這些塊僅在該事件發生時運行。

按鈕點擊事件塊

按兩下按鈕時
您已經使用過這個。當使用者按下特定按鈕時,您會希望該應用程式執行某些操作,例如打開另一個螢幕或發送消息。

Screen1 方向更改事件塊

更改螢幕方向時
如果使用者將手機從縱向(垂直)變為橫向(水準),您可能需要執行某些操作,例如更改螢幕佈局或元件的大小。

當滑塊位置改變時
滑塊允許使用者拖動它以沿它選擇某個值。這可能會觸發對另一個元件的更改。例如,您可以使用滑塊在繪圖應用中增加筆的大小。

功能

函數 是執行某些操作的代碼塊。它們可以在應用程式內多次運行。在 App Inventor 中,功能塊的顏色為紫色。某些語言將函數稱為方法或過程。事實上,App Inventor 通常將這些稱為 過程。它們做了一些事情,所以你可以把它們看作是動作塊。

功能塊

TextToSpeech.Speak (文本到語音)
TextToSpeech 元件可以說出或說出您希望它朗讀的任何文本。

Camera.TakePicture
相機元件可以使用手機拍照。

聲音播放
Sound 元件可以播放聲音。

SETTER 和 GETTER

綠色塊與元件及其屬性相關。 

可以捕捉到另一個塊的淺綠色塊稱為 getters,因為您正在獲取屬性的值。

塞特是 深綠色的,它們可以卡入,末端有一個開口槽。這允許您設定屬性的值。

App Inventor Setter 和 Getter 塊

Button1 的文本
Button1 的文本被 獲取 並存儲在變數全域問候語中。

Button1 的文本
Button1 的文本設置為“我喜歡編碼。“我喜歡編碼”字樣將出現在按鈕上。

標籤 1 的文字
Label1 的 Text 設定為 Sound1 的 Source 。這意味著聲音文件名將顯示在 Label1 中。

聲音的來源1
Sound1 的 Source(聲音檔名) 被獲取 並存儲在 Label1 的 Text 屬性中,設置標籤的文字實質上顯示標籤中的值,因此聲音檔的名稱將出現在 Label1 中。

label1 的文本

TextToSpeech 獲取 Label1 的 Text 的內容並朗讀它。Label1 中顯示的任何文本都會被朗讀。 

最佳做法: 提醒學生,這與真正的編碼完全一樣。我們正在使用的奇怪詞彙(函數、getter、setter)正是編碼人員使用的。

 

要向學生提出的指導性問題: 你能想到你所做的一些日常工作嗎?(例如:烤蛋糕、刷牙——任何有可重複步驟的事情)。功能與演算法非常相似!

導師提示由 AmeriCorps 提供支援。

程式化的 A,海軍藍的 AmeriCorps 標誌

數據塊

使用 setter 塊時,可能會使用一些其他內置塊來表示數據或可在應用中使用的資訊。下面可以看到一些可以使用的數據塊示例。

App Inventor 數學塊

數位
數位值可以用作應用程式中的數據。這些塊可以在塊調色板的數學抽屜中找到。

文字或字串
文字(有時稱為字串)可以用作數據。這些是可以在應用中使用的字母、單詞和句子。這些塊位於「塊」選項板的「文本」抽屜中。

App Inventor 布爾塊

布爾
此數據類型只有兩個可能的值 – true 或 false。 這些塊可以設置或測試某物的「狀態」 ,並將在條件語句中使用,您將更多地瞭解這些條件。

活動:音板教程

預計時間:45 分鐘

按照下面的視頻教程進行操作

在此處查看 App Inventor 庫中的起始專案,將應用程式載入到 App Inventor 中,
並按照下面視頻中戴夫的指示進行操作。

請注意,視頻從 1:11 開始,以跳過載入說明。如果您使用上述連結載入了啟動專案,則不需要這些說明。

挑戰

在活動中,您使用了:

  • Event Handler 塊
  • 功能塊

讓我們嘗試通過添加到您的 Soundboard 應用程式來使用一些 setter 和 getter 塊。

當使用者按下任何圖片以播放關聯的語音時,請更改螢幕的背景顏色。

您可以將其更改為一種特定顏色,但這樣您就無法輕鬆地將其更改回起始顏色(黑色),因此,請將螢幕的背景更改為隨機顏色。 

提示:檢查顏色抽屜並查找 製作色。然後在數學抽屜中查找 隨機整數 塊。顏色由 3 個數位組成,RGB 代表紅色、綠色、藍色,範圍從 0-255。

反射

現在,您已經對不同的代碼塊有了更多的瞭解,請考慮您的應用解決方案:

您的應用程式需要哪些元件?
您的應用中需要哪些事件事件處理程式?
在您的應用中觸發事件時,將執行哪些操作?

關鍵術語的審查

  • 用戶介面 – 使用者可以與應用中交互的所有內容
  • 設計師 – 視窗,您可以在其中向應用程式添加元件並設計它們的外觀
  • 塊編輯器 – 視窗,您可以在其中為應用程式編寫塊代碼
  • 事件 – 觸發代碼運行的事件
  • 事件處理程式 – 代碼塊,告訴您的應用程式在事件發生時該做什麼
  • 事件驅動程式設計 – 基於事件的程式設計,而不是從上到下運行整個代碼
  • 函數 – 可運行的代碼塊,可以多次運行

其他資源

在 appinventor.org 上查看 Dave Wolber 的 App Inventor 初學者教程的更多內容