Thunkable:仔細觀察

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

以下是本課的活動:

事件

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

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

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

停下來討論

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

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

讓我們先看看 Thunkable 平臺的不同部分。

Thunkable 有兩個視窗,您可以使用它來構建應用程式。 按下頂部選單列(螢幕左上角)中的“設計”將帶您進入 設計器,在那裡您可以設計使用者介面。 用戶介面 是應用中使用者可以與之交互的所有內容。這些東西可以是按鈕、導航欄、文字框、圖片等。

THUNKABLE 設計器視窗

可砰砰作響的設計器視窗
1

元件清單

您添加到應用的所有元件都在此處顯示,並按螢幕按層次結構進行組織。

3

工作

您可以在此中央工作區中將元件拖動到手機上。您可以控制元件的放置位置及其大小。

2

添加元件

您可以將視覺元件從此面板拖動到工作區中。 

4

屬性面板

“屬性”面板允許您設定每個元件的屬性。 屬性 是您可以為每個元件設置的不同特徵,例如其寬度、高度和顏色。在模型上選擇一個元件,然後您可以在「屬性」面板中更改其任何屬性。

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

塊編輯器

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

Thunkable 塊編輯器
1
塊調色板

在左側,您將找到塊調色板。頂部是UI元件。應用中的每個元件都有自己的一組塊。您將按下該元件以顯示可以拖動到工作區中的塊。

4

編碼工作區

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

2

核心塊

核心塊是要在應用中使用的標準編碼塊。它們根據其類型和顏色編碼進行分類。

3

應用功能

這些是您可以添加到應用中的不可見功能。您可以按下一個以添加它,然後設置屬性並拖出該功能的代碼塊。

事件處理程式

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

砰的按鈕點擊事件塊

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

Thunkable 清單查看器項目點擊事件塊

按兩下 ListViewer 項時
ListViewer 類似於下拉功能表,因此當使用者選擇清單中的專案時,會發生此事件。應用應對按兩下的項目執行某些操作。

砰砰聲屏幕打開事件塊

當螢幕打開時
當您想要在應用首次啟動或應用切換到另一個螢幕時執行某些操作時,將使用此事件。您可以設置變數,或從雲中更新資訊。

功能

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

功能塊


此功能讓應用程式可以說出或說出您希望它說出的任何文本。

計時器開始和聲音播放
Timer 元件可以開始計數。 該應用程式可以播放聲音。

SETTER 和 GETTER

綠色塊與元件的屬性相關。 

淺綠色的塊稱為 getter,因為您正在獲取屬性的值。

可砰的 getter 塊

Button1 的文本
文本被獲取並保存在變數 numberChoice 中。

Timer1 的時間(以秒為單位)
計時器的秒數值 被獲取 並存儲在 Lablel1 的文字中,因此該值顯示在標籤中。 

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

可砰的設置器塊

Button1 的文本
Button1 的文本設置為「按下我!

Label1.文本
Label1 的 Text 設置為 Timer1 的 Time (以秒為單位)。

Timer1 的 IntervalMilliseconds
Timer1 的 IntervalMilliseconds(關閉的頻率)設置為 3000 或 3 秒。

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

 

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

導師提示由 AmeriCorps 提供支援。

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

數據塊

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

Thunkable 數學塊

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

Thunkable 文字塊

文字或字串
文字(有時稱為字串)可以用作數據。這些是可以在應用中使用的字母、單詞和句子。這些塊位於塊調色板的 Core 部分的 Text drawer 中。

Thunkable 布爾塊

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

活動:音板教程

預計時間:45 分鐘

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

在此處下載媒體檔案(觀看 Dave 的視頻瞭解更多詳情)
然後,按照下面的 Dave 視頻操作,使用事件處理程式和函數在您的應用中播放語音。

挑戰

在活動中,您使用了:

  • Event Handler 塊
  • 功能塊

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

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

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

 提示: 檢查顏色抽屜,瞭解如何獲取隨機顏色。

反射

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

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

關鍵術語的審查

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

其他資源

在 draganddropcode.com 上查看 Dave Wolber 的 Thunkable 教程的更多內容

學生大使 Meenakshi Nair 在 Udemy 上的免費 Thunkable 課程是另一個很棒的資源!