月老社區

標題: 10分鐘製作您的第一個手機APP [打印本頁]

作者: hsw 時間: 2012-11-25 16:57
標題: 10分鐘製作您的第一個手機APP
先期準備動作請參考: 環境建置

1. 首先開啟 http://beta.appinventor.mit.edu 網頁備用(請使用Google Chrome瀏覽器開啟), 如下畫面:

2. 打開[More Actions]-->點選[Upload Source]。
3. 出現選擇檔案的視窗後, 點擊[選擇檔案], 請載入第四步驟所下載的 Love.zip。
4. 下載範例程式:

Love.zip (36.97 KB, 下載次數: 1109) 。程式碼下載:

5. 可以看到 AppInventor 網頁將建立剛剛上傳的檔案成為新專案, 如下圖:

6. 點擊右上角[Open the Blocks Editor] 以開啟方塊編輯器,
(此步驟會下載一個 AppInventorForAndroidCodeblocks.jnlp 的檔案, 下載完請直接點擊它)。
7. 開啟 Blocks Editor 視窗如下圖:

8. 點擊 Blocks Editor 視窗右上角的[New emulator]後, 出現手機模擬視窗如下圖:

9. 當手機模擬視窗執行穩定後(大概需要兩三分鐘), 再點擊 Blocks Editor 視窗右上角的[Connect to Device...],
選擇[emulator:5554]如下圖:

10. 手機模擬視窗將載入您的專案 Love.zip 的畫面, 如下圖:

結束。

恭喜您, 您已經成功製作完成您的第一個手機APP專案!!{:soso_e142:}

本手機APP範例 [Love] 專案, 是在手機上產生一個按鈕, 輕觸按鈕後將顯示一段文字及一張圖,
利用 AppInventor 網頁裡的元件增減, 將可輕易的達到您要的加按鈕及加圖的功能並可編輯元件屬性,
再利用 Blocks Editor 視窗編撰程式, 以達到每個元件的出現時機!!
希望會員能多加學習, 並歡迎提供您自己製作的手機APP範例讓大家一起成長, 謝謝!!...{:soso_e181:}

下載本範例的手機APK(安裝)檔: