App Inventor設計程式跟組合樂高一樣簡單，本文介紹進入程式編輯器，工作面板選擇元件事件，拖曳手機圖片按鈕，設置被點選即發出音效，並且複製程式方塊。

上一節已經大致設計好了這款簡單手機APP的介面，包括一個標籤和兩個按鈕，不過使用手機APP，當然是期待在按下按鈕時會執行某些動作，這個之前所提到英文語法裡另一個基本句型：主詞+動詞。這一節便要繼續完善這個APP，讓它在按下小貓小狗的照片之後，手機就會發出相對應動物的叫聲。

一、設置音效元件

元件面板由12個可摺疊的抽屜所組成的，之前章節是取出「操作使用者介面」中的按鈕和標籤，這裡則是要用到「多媒體」中的「音效」。雖然是不同類型的元件，設計流程完全相同：將「音效」元件拖曳到「工作面板」上，然後於「元件清單」中選取這個元件，在屬性「來源」裡上傳一個多媒體聲音檔案（zanzancat1）。只要先前實際動手設計過按鈕圖像，這裡的操作應該不會是太大困難。

雖然設計流程相同，但其實音效和先前的按鈕和標籤在本質上有所區別。仔細看工作面板，音效會放置在最下面「非可視元件」的區域裡面，這表示在最後手機APP呈現的時候，可以看到按鈕和標籤，但不會看到音效，非可視原件是作為非視覺化的多媒體內容、或者是輔助APP運作的物件。

二、程式方塊設計

到現在這款APP的所有元件都設置好了，接下來讓這些元件動起來。由此要進入APP inventor另外一個介面，為了使讀者更加清楚，先把語言切換到英文，可以注意到在右上角有兩個選項，其中英文分別為：畫面編排（Designer）及程式設計（Blocks）。

設計元件都是在「畫面編排」界面，現在要點擊進入「程式設計」，特別把中英文列出來，是因為「畫面編排」中英文表達的意思差不多，「程式設計」的話，中文表達的是操作效果，英文「Blacks」則表達其如何被操作的，亦即以方塊進行程式設計，也就是本節接下來的步驟。

三、程式工作面板

程式設計介面主要分成三大區域：方塊、素材、工作面板。方塊區域又分成幾個部分，在這裡我們會用到先前設計好的「screen1」各個元件，至於方塊區域裡其他部分，留待以後的章節再作介紹。第二區域為素材區，其內容作用和前面畫面編排是相同的，在此不多作介紹。

工作面板區域像一塊大白板，在這裡結合方塊、以圖像化方式編輯程式。例如在方塊區域裡點一下「按鈕1」，工作面板即會出現該按鈕可以設計執行的操作，其中第一個為「當按鈕1被點選執行」。將一隻手的游標圖示移到此方塊，浮窗顯示一行英文的輔助說明：「User tapped and release the button」，相當清楚地描述該事件程序。

四、新增按鈕方塊

按一下「被點選」方塊，這個方塊即被放置在工作面板的白板上。

五、音效播放方塊

同樣方式，將方塊區域中「音效1」的「呼叫音效1播放」方塊，放置到工作面板上。

六、按鈕播放音效

目前工作面板中有兩個程式方塊：「當按鈕1被點選執行」、「呼叫音效1播放」，直接拖曳讓這兩個方塊結合起來。如圖所示，有點像是拼圖一樣，這兩個方塊在上方部位有個一凸一凹的卡扣，當它們緊扣在一起，電腦會有一個扣住了的聲響。這是APP inventor的設計，拼圖組合和卡扣結合的方式，確保程式設計沒有問題。

「呼叫音效1播放」方塊下面還有一個突出來的地方，這是因為「當按鈕1被點選」，可能希望不止執行一項操作如果有第2項第3項的話，同樣方法可以增加其他的操作。

不僅編寫程式語句簡單，複製程序語句同樣相當簡單，只要在已經組合好的程式方塊上，直覺地滑鼠右鍵，有非常多的快捷選項，其中一項就是「複製程式方塊」。

七、三個程式積木

成功為三個按鈕設計了執行音效播放的程式。注意到按鈕和音效皆可下拉選擇，任何一個方塊很方便可以設置改為其他按鈕或者其他音效。

為寶貝女兒設計App

這一節最後設計成的APP專案以介面而言，一個名稱標籤、三個小動物布偶的照片，以APP程式而言，按下去分別有預錄製好的小朋友聲音，這款簡單的手機APP是我設計給自己家寶貝女兒贊贊玩的，贊贊的玩偶照片、錄製贊贊的聲音。

讀者當然在實際嘗試的時候，當然會用自己所拍的照片、自己所錄製的聲音，這便是自己設計手機APP程式的樂趣所在，全然的客製化、全然的自己動手DIY。這款APP雖然簡單，不過延伸擴大，只要將界面照片換成是音樂專輯的封面，程式設計按下封面開始播放音樂，或者是親朋好友的照片，只要點選照片，撥打電話給對方，諸如此類的APP以目前功力來說，已經非常接近了。接下來章節便會繼續擴充APP的結構，設計更為複雜靈活的手機APP。

每天學習，每天充電：AppInventor文章合集。

本文內容取自《人人都學得會的App Inventor 2初學入門》，書本仍然是最好的學習方法，省下一張電影票的錢，今天就買本書吧！