1. 程式人生 > >AppInventor讓不會程式設計的小白也能製作app

AppInventor讓不會程式設計的小白也能製作app

本帖最後由 gzftcoex 於 2010-10-16 06:51 編輯

本人小白一枚,程式設計啥的全不懂,更不用說這語言那語言的了,但是生命在於折騰,我也製作自己的app了



之前在CB看到google為了能讓更多的人給自己的Android裝置開發軟體,開發了AppInventor,讓不懂程式設計的人也可以製作出android應用程式,當時就提交了申請,月初就收到了回信,後來把這事給忘了...今天突然想起來,立馬開始折騰.



00.jpg 

AppInventor裡已經提供許多的元件(Blocks),我們直接將它們託到檢視器(Viewer)裡,然後再用一些邏輯塊(Logic Blocks)將他們像拼圖一樣組裝起來就形成了一個Android軟體,而且如果手機開啟除錯模式後連線到電腦,所有的操作都是事實的顯示在手機上,軟體可以一邊製作一邊手機上測試.






首先準備執行AppInventor的環境
這裡是官方的說明
電腦
瀏覽器.火狐 Chrome IE都可以
需要安裝Java 6,可以從 www.java.com下載
手機的驅動程式也不能少
然後就是安裝App Inventor Extras Software for Windows
下載地址  http://dl.google.com/dl/appinventor/installers/windows/appinventor_extras_setup.exe
ps MAC和linux平臺的在網站上均有下載

手機
設定-應用程式-勾選未知來源
                   -開發-勾選USB除錯和保持喚醒(這個會讓充電時螢幕常亮,要記得關掉)
設定-顯示-自動旋轉螢幕要關掉


以上都準備好就可以開始了


我就做一個捅菊花的小軟體吧

新建應用程式和新增元件都是通過WEB的方式線上進行的,(每一步操作都會儲存在伺服器上,突然宕機也不怕成果丟失,完全的google風格,什麼雲列印 雲平臺 雲XX) 
在瀏覽器裡開啟http://appinventor.googlelabs.com選擇new 輸入名稱 juhua  (現在還不支援中文,就拿拼音代替吧)然後就進入編輯介面 
juhua.jpg 


左邊的Palette裡有這種各樣元件直接拖到中間的螢幕裡就可以新增,現成元件很豐富按鈕 文字 標題 多媒體 各種感測器等等,右邊可以編輯元件的屬性
點選右上方的Open the Blocks Editor就可以啟動剛才安裝的App Inventor Extras Software 來組合上面的元件.

0.jpg 

連線手機,點選Open the Blocks Editor,所有的操作都會在手機上實時顯示
6.jpg 

首先試著把Screen1改成中文爆菊花,然後拖入一個ListPicker 內容寫上hello world.
1.jpg 


但是在手機螢幕上中文變成???,看來還是不支援中文....
p1.jpg 


接下來拖入一個Butto元件,上傳一張菊花圖片.一個菊花的按鈕就做好了
3.jpg 


光爆菊花太沒意思了.還要加點聲音,再拖入一個Sound元件,上傳慘叫.mp3
4.jpg 


什麼?爆菊花太殘忍,那爆完了在撫摸一下吧.再加入一個感測器,拖入AccelerometerSensor元件,這樣搖一搖就可以撫摸一下小菊花了
11.jpg 




元件新增完,關鍵的時刻到了,回到App Inventor Extras Software裡來組合上面的元件.

Button1.Click框裡面嵌入Sound1.Play,就表示按下菊花鍵是播放剛才的慘叫.mp3 
這裡我又添加了一個震動,後面接上一個時間為500毫秒的標籤,這樣發出慘叫的時候還有震動,讓菊花爆的更猛烈~{:2_29:}    (捅菊花完成)
AccelerometerSensor1.Shaking框裡也嵌入Sound1.Play,表示感測器感到搖動的時候同樣播放慘叫.mp3{:2_30:}    (撫摸小菊花完成)
9.jpg 


ok現在就可以拿起手機向菊花按鈕捅一捅,立馬發出一生慘叫...{:2_29:}啊啊啊啊啊~~~捅壞了我心愛的N1可不行,要搖一搖,撫摸一下小菊花~{:2_28:}
p3.jpg 



最後就是生成APK了.點選右上角的Package for Phone,可以選擇下載APK到電腦或者直接下載安裝到手機.
000.jpg 
點選後等待數十秒,就會開始下載
10.jpg 


成品就是這樣,看起來很簡陋.APK我也不放出來了,不過對於我這樣完全不懂程式設計的小白,已經是0的突破了.而且還猥瑣的爆了一朵小菊花
p4.jpg 






來總結一下.AppInventor的原理簡單的說就是新增各種功能的元件,然後像拼圖一樣,把各各元件拼湊在一起,一個app就完成了.不會遇到讓人頭疼的複雜的程式碼之類的,所有的操作都是圖形化,用滑鼠拖動就可以新增和拼裝,就像玩積木一樣簡單.
官方網站上的入門教程很豐富,有一些小程式的製作方法,步驟也很詳細,可以自己去學習一下,試著做一做.
http://appinventor.googlelabs.com/learn/gettingstarted.html



另外附上老外的一個視訊教程,20分鐘就做出了自己的Twitter客戶端