第四章 我的第一支手機程式-Hello Purr

我的第一支程式(Hello Purr)

1.1 專題介紹：Hello Purr

在建置本專題前，首先須確認您已經學會App Inventor 2當中環境之建置與基礎的操作。Hello Purr為一支簡單上手又具玩樂性質的APP，一般來說，初學者可以在幾分鐘內寫完這支APP程式，並且體驗將自己一手開發的APP遊戲安裝到手機中操作的樂趣。

1.2 專題重點

※明白按鈕使用

※理解程式拼塊的基本元件操作

※能將圖片、音效匯入、增加震動功能

2. 專題實作：我的第一支程式

2.1專題總覽

　　在製作好HelloPurr之後，開啟這APP時便會顯示一張貓咪圖片，在點擊圖案時，會伴隨聲音(貓叫聲)產出。而後段進階挑戰則是點擊圖案後，聲音的產出同時會伴隨所操作數位設備的震動。

2.2 專題建置

◎需求元件：

1.貓咪圖片

2.喵叫聲

1.新增專案：HelloPurr

按下Start new projects，新增「專題名稱：HelloPurr」的專案。

進入App Inventor的Designer視窗

(註：專案名稱開頭不能是數字；專案名稱中可用底線，但是不能使用空格或其他特殊字元)

2.3 介面配置

2.增加元件Button1

點選視窗左側組件面板(Palette)裡面的用戶介面(User Interface)，選取按鈕(Button)按住滑鼠不放將其拖曳至中間的工作面板(Viewer)視窗中。

新增按鈕：Palette / User Interface / Button

3.新增按鈕的背景圖片

點選剛剛拖曳到工作面板(Viewer)的按鈕(Button1)。接著請在視窗右側的屬性(Properties)面板中，點選Image，選取Upload File，上傳圖片。

新增按鈕背景圖片：Properties/ Image/ Upload File 

4.消除按鈕上的文字

上傳圖片後，圖片上會顯示Text for Button1 的文字，為按鈕上附加的提示語，若覺得不美觀，可在視窗右側的屬性(Properties)面板中的Text屬性，將方框中預設的文字清除，便能顯示完整的貓咪圖片囉！

消除文字：Properties/ Text:

5.新增音效

在視窗左側的組件面板(Palette)中，點選多媒體(Media)選單中的聲音(Sound)元件，按住滑鼠鍵不放將其拖曳至中間的畫面預覽(Viewer)視窗，新增一個聲音元件，並按下Upload File，上傳聲音元件。

◎  解釋:

由於聲音元件並不會顯示在APP畫面視窗中，因此App Inventor將其置於視窗的底部。

新增音效：Palette/ Media/ Sound

          Properties/ Source/ Upload File

使用元件及其重要屬性

名稱	屬性	說明
Button1	Image: kitty.png Text:	可選擇想要的動物圖片來上傳。
Sound1	Source: 喵叫聲	選擇搭配圖片的聲音即可。

2.4 專題分析和程式拚塊說明

請先從視窗右上角的 Designer 視窗切換至 Blocks 視窗。

6.播放聲音

在左側Blocks選單中點選Screen1中的Button1，在彈出的拼圖式程式區塊中選取when Button1 Click do的事件區塊，置於預覽視窗中。接著在點選Screen1下的Sound1，在彈出的拼圖式程式區塊中選取call Sound1 Play的命令區塊(command block)，然後將其卡入when Button1 Click do的事件區塊中。

播放聲音：Blocks/ Screen1/ Button1/ when Button1 Click do

Blocks/ Screen1/ Sound1

◎  解釋:

目前合併的程式區塊集合像下圖這樣，它的意思是「當Button1按鈕被按下後，呼叫播放Sound1的副程式」。when Button1 Click do是一種事件區塊(event handler)，而 call Sound1 Play 則是一種命令區塊(command block)。我們可將event handler想像成我們要程式採取什麼動作的種類，而command block則是這種動作實際要做的任務細節。

3. 其他應用

3.1加入震動

　　如果我們希望按下貓咪圖案時，不僅會發出一聲喵叫聲，手機還會震動半秒鐘，該如何做呢？

在左側Blocks選單中點選Screen1下的Sound1，在彈出的拼圖式程式區塊中選取call Sound1 Vibrate，然後將其卡入 when Button1 Click do事件區塊中的 call Sound1 Play下。

在左側Blocks選單中點選內建Built-in下的數學指令Math，在彈出的拼圖式程式區塊中選取第一個未含任何運算符號的常數，然後將其卡入call Sound1 Virbate右下的millisecs缺口，並將原本的常數0改為500，因單位是毫秒，所以500毫秒即為半秒鐘，這樣就完成了。

加入震動：Blocks/ Screen1/ Sound1/ call Sound1 Vibrate

          Blocks/ Built-in/ Math

3.2增加按鈕與音訊

　　現在你已經學會製作基礎的程式了，很簡單吧！為了能和使用者有著更多的互動，就讓我們來為程式做點小改變，新增一些功能吧！

1.      新增一個的文字(Label)在貓咪按鈕下方，在視窗右側的屬性(Properties)面板中的Text 屬性中，輸入：「下列哪一個是貓咪的叫聲?」，字體大小(FontSize)設為30。

2.      新增三個的按鈕(Button) 在文字(Label)下方，並在視窗右側的屬性(Properties)面板中的Text 屬性中，分別輸入：叫聲1、叫聲2、叫聲3。

3.      自行匯入其他2種的動物叫聲，並重複2.3節第五步驟的新增音效以及2.4節第六步驟的播放音效的程式流程，將三種動物的叫聲任意與下方的叫聲1(Button2)、叫聲2(Button3)、叫聲3(Button4)做連結。

4.      Butto1是原本的那張貓咪圖片按鈕，播放的當然是Sound1的貓叫聲，至於其他的叫聲1(Button2)、叫聲2(Button3)、叫聲3(Button4)，就任意放置不同的聲音，這樣就完成了最基本的猜猜看APP囉。

程式專案檔QRcode：

手機執行檔QRcode：