App Inventor 2 的第一支程式 - Hello Purr

App Inventor 2 的第一支程式 - Hello Purr

Hello Purr 的功能為進入 APP 後，顯示一張可愛的貓咪圖

片，使用者點選圖片後即發出一聲喵叫聲。

• 貓咪圖片   kitty.png  
• 
  
• 喵叫聲     meow.mp3 
• 
  

  1)  新增一個名稱為「CAT_Hello_Purr」的專案，按下 OK 後，即可進入 App Inventor 的  

       Designer 視窗。

  2) 新增一個Button 

  在視窗左側的元件面板(Palette)中，點選 User Interface 中的按鈕(Button)元件，按住滑

  鼠不放將其拖曳至中間的畫面預覽(Viewer)視窗，即可為 APP 程式新增一個按鈕元件。

3) 視窗右側的屬性(Properties)面板上，點選 Image 屬性，上傳一張圖片當作按鈕上的顯示

圖片，點選後會出現過去曾上傳的檔案清單，也可以直接點選上傳檔案(Upload File)按鈕，

選擇電腦中的圖片上傳。

上傳圖片按 OK 後，即可看到中間的畫面預覽視窗出現貓咪的圖片，但此時圖片上會顯示 

Text for Button1 的文字，這原本是顯示在按鈕上的提示語，

4)  可在視窗右側的屬性(Properties)面板上，找到 Width 屬性，設定為 Fill Parent 將貓咪 

      的圖片填滿。

5)   可在視窗右側的屬性(Properties)面板上，找到 Text 屬性，將方框中的文字清除。

6) 在視窗左側的元件面板(Palette)中，點選媒體(Media)選單中的聲音(Sound)元件，按住

滑鼠不放將其拖曳至中間的畫面預覽(Viewer)視窗，即可為 APP 程式新增一個聲音元件。

聲音元件置於視窗的底部。

7) 在視窗右側的屬性(Properties)面板上，點選 Sound 屬性，再按下檔案來源(Source)按

鈕，準備上傳喵叫聲的檔案。接著，點選上傳檔案(Upload File)按鈕，選擇電腦中的貓叫聲

音檔(meow.mp3)上傳。

8) 修改APP 的 Title 

9) 完成 APP 的視窗畫面佈局(Layout)後，開始使用 App Inventor 來寫程式，請先從視窗

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

10) 在左側 Blocks 選單中點選 Screen1 下的 Button1，在彈出的拼圖式程式區塊中選取 

when Button1 Click do 的事件區塊(event handler)，置於預覽視窗中。接著在點選 

Screen1 下的 Sound1，在彈出的拼圖式程式區塊中選取 call Sound1 Play 的命令區塊

(command block)，將其卡入 when Button1 Click do 的事件區塊中，AI2會自動將其嵌入

並發出提示音效，表示已將兩程式區塊合併

「當 Button1 按鈕被按下後，呼叫播放 Sound1 的副程式」。

when Button1 Click do 是一種事件區塊(event handler)，

call Sound1 Play 則是一種命令區塊(command block)。

11 ) 加入震動

按下貓咪圖案時，不僅會發出一聲喵叫聲，手機還會震動半秒鐘

請在左側 Blocks 選單中點選 Screen1 下的 Sound1，在彈出的拼圖式程式區塊中選取 

call Sound1 Vibrate 的命令區塊(command block)，然後將其卡入 when Button1 Click 

do 事件區塊中的 call Sound1 Play 下。

 12) . Build APP   (Provide QR Code for .apk)

13) 利用手機 的APP 程式    MIT AI2 Companion 掃瞄並下載APP程式 測試並執行APP