2014年1月17日 星期五

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

用過 App Inventor 的人都知道,「Hello Purr」是學 App Inventor 程式開發的第一支範例程式,即使改版至 App Inventor 2,仍是如此,就讓我們一起來練習這支貓叫程式吧!

原始範例:Hello Purr from MIT

首先您必須已經學會 App Inventor 2 的環境建置與基礎操作,如果還不熟悉,可以先參考「App Inventor 2 的環境建置」的說明。

Hello Purr 是一支簡單又有趣的 APP,一般來說,初學者可在幾分鐘之內就寫完這支 APP 程式,並且體驗將自己所開發的 APP 遊戲安裝到手機中的樂趣。

程式功能分析:Hello Purr 的功能為進入 APP 後,顯示一張可愛的貓咪圖片,使用者點選圖片後即發出一聲喵叫聲。

需求元件:

  • 貓咪圖片 kitty.png (按滑鼠右鍵另存影像連結)
  • 喵叫聲 meow.mp3 (按滑鼠右鍵另存連結)。

開發步驟:

步驟一:請先新增一個名稱為「HellPurr」的專案,按下 OK 後,即可進入 App Inventor 的 Designer 視窗。(註:專案名稱中可用底線但不能有空格或其它特殊字元)





















步驟二:請在視窗左側的元件面板(Palette)中,點選使用者介面(User Interface)中的按鈕(Button)元件,按住滑鼠不放將其拖曳至中間的畫面預覽(Viewer)視窗,即可為 APP 程式新增一個按鈕元件。





















步驟三:接著請在視窗右側的屬性(Properties)面板上,點選 Image 屬性,準備上傳一張圖片當作按鈕上的顯示圖片,點選後會出現過去曾上傳的檔案清單,也可以直接點選上傳檔案(Upload File)按鈕,由 APP 開發者選擇電腦中的圖片上傳。





















步驟四:上傳圖片按 OK 後,即可看到中間的畫面預覽視窗出現貓咪的圖片,但此時圖片上會顯示 Text for Button1 的文字,這原本是顯示在按鈕上的提示語,若覺得不美觀,可在視窗右側的屬性(Properties)面板上,找到 Text 屬性,將方框中預設的文字清除,就能顯示完整無瑕的貓咪圖片囉!





















步驟五:請在視窗左側的元件面板(Palette)中,點選媒體(Media)選單中的聲音(Sound)元件,按住滑鼠不放將其拖曳至中間的畫面預覽(Viewer)視窗,即可為 APP 程式新增一個聲音元件。由於聲音元件並不會顯示在 APP 畫面視窗中,因此 App Inventor 將其置於視窗的底部。





















步驟六:接著請在視窗右側的屬性(Properties)面板上,點選 Sound 屬性,再按下檔案來源(Source)按鈕,準備上傳喵叫聲的檔案。接著,點選上傳檔案(Upload File)按鈕,由 APP 開發者選擇電腦中的貓叫聲音檔(meow.mp3)上傳,即完成此 APP 所有畫面元件及媒體檔案上傳。

步驟七:完成 APP 的視窗畫面佈局(Layout)後,接下來我們要開始使用 App Inventor 來寫程式式囉!首先,請先從視窗右上角的 Designer 視窗切換至 Blocks 視窗。

Blocks 在舊版 App Inventor 中稱之為 Blocks Editor,當時開啟 Blocks Editor 時會透過瀏覽器下載一個 AppInventorForAndroidCodeblocks.jnlp 的 Java Web Start 程式,執行此 jnlp 程式後會透過事先安裝好的 Java Development Kits (JDK)來啟動,步驟因而比較繁瑣。

App Inventor 2 則已完全網頁化,使用者只要直接切換至 Blocks 視窗即可開始寫程式,更重要的是舊版 Blocks Editor 使用中文字時會顯示成黑色方框,新版的 App Inventor 2 已解決此問題,能在程式撰寫的過程中正確顯示正體中文字。





















步驟八:請在左側 Blocks 選單中點選 Screen1 下的 Button1,在彈出的拼圖式程式區塊中選取 when Button1 Click do 的事件區塊(event handler),置於預覽視窗中。接著在點選 Screen1 下的 Sound1,在彈出的拼圖式程式區塊中選取 call Sound1 Play 的命令區塊(command block),然後將其卡入 when Button1 Click do 的事件區塊中,App Inventor 會自動將其嵌入並發出提示音效,表示已將兩程式區塊合併。



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



App Inventor 2 中含有八大類別的程式區塊,有興趣的讀者可自行參閱 ( Understanding Blocks in App Inventor 2 )。



進階挑戰:加入震動

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

步驟一:請在左側 Blocks 選單中點選 Screen1 下的 Sound1,在彈出的拼圖式程式區塊中選取 call Sound1 Vibrate 的命令區塊(command block),然後將其卡入 when Button1 Click do 事件區塊中的 call Sound1 Play 下。





















可是 call Sound1 Vibrate 的右下角有個 millisecs 的缺口,這代表我們必須輸入一個數值或變數當作震動多久的參數,millisecs 指的是毫秒(千分之一秒),震動半秒的意思等於震動 500 微秒,因此我們需要在 millisecs 後卡入一個常數 500。





















步驟二:請在左側 Blocks 選單中點選 Built-in 下的 Math,在彈出的拼圖式程式區塊中選取第一個未含任何運算符號的常數,然後將其卡入 call Sound1 Virbate 右下的 millisecs 缺口即完成程式。

如何?用 App Inventor 2 寫程式是不是很簡單!

5 則留言:

  1. 請高手釋疑:
    我利用upload file帶入Button Image,在模擬器可以看到貓的圖片,但利用平板電腦(Android 4.11)卻無法看到貓的圖片(wifi及USB連線都試過)

    回覆刪除
  2. 我們的經驗在 Appinventor 中無法顯示圖片的可能原因有:
    1.圖檔格式非PNG或標準壓縮法的JPG圖檔, 使得載入圖檔無法顯示
    2.圖檔太大, 模擬器是以記憶體模擬執行, 通常不會安裝太多APP, 平板實機上測試時, 因為apk檔及圖檔過大, 造成無法顯示圖片
    3.圖檔的檔名有大小寫衝突, Ex: 同時有kitty,png 及kitty.PNG圖檔, 或變數名發生大小寫衝突的情形, 都有可能造成圖檔開檔錯誤。

    以上, 提供參考!
    ps.我不是高手, 大家一起來玩appinventor~ ^^

    回覆刪除
  3. app inventor2可加入另外寫的java語言嗎?

    回覆刪除
  4. 或者app inventor2可以在程式裡加懸浮窗嗎

    回覆刪除
    回覆
    1. 原生的Appinventor並不支援外部程式模組,但可透過App Inventor Extension 讓開發者應用Java自定元件。建議參考文件:
      http://blog.cavedu.com/programming-language/appinventor/app-inventor-extension-%E6%96%B0%E6%B8%AC%E8%A9%A6%E4%BC%BA%E6%9C%8D%E5%99%A8%EF%BC%8C%E5%85%81%E8%A8%B1%E8%87%AA%E5%AE%9A%E7%BE%A9%E5%85%83%E4%BB%B6%E4%BA%86%EF%BC%81/

      刪除