目前分類:【MIT App Inventor 教學】 (105)

瀏覽方式: 標題列表 簡短摘要

【MIT App Inventor 2(AI2)Intermediate範例】ex4. I04_VideoWall for App Inventor 2

版面安排:

I04  

I04-1  

素材: 

 方塊圖:

 I04-b1  

I04-b2  

I04-b3  

I04-b4  

輸出:

I04-out  

I04-out-1  

I04-out-2  

I04-out-3  

 掃描QRCODE安裝到你的Android中

或者下載APK:

http://appinventor.mit.edu/explore/sites/all/files/ai2tutorials/videoWall/VideoWall.apk

下載原始碼(ource Code):

 http://appinventor.mit.edu/explore/sites/all/files/ai2tutorials/videoWall/VideoWall.aia

ref:

http://appinventor.mit.edu/explore/ai2/videowall.html

【MIT App Inventor 2(AI2)Intermediate範例】

s810802 發表在 痞客邦 留言(0) 人氣()

【MIT App Inventor 2(AI2)Intermediate範例】ex3. I03_Mole Mash 2 with Sprite Layering for App Inventor 2

  版面安排:

I03-1  

I03-2  

 

素材:

http://appinventor.mit.edu/explore/sites/all/files/ai2tutorials/moleMash2/hole.png

http://appinventor.mit.edu/explore/sites/all/files/ai2tutorials/moleMash2/mole.png

I03-3  

I03-4  

方塊圖:

I03-B01  

 

I03-B02  

I03-B03  

輸出:

 I03-out  

 掃描QRCODE安裝到你的Android中

或者下載APK:

http://appinventor.mit.edu/explore/sites/all/files/ai2tutorials/moleMash2/MoleMash2.apk

下載原始碼(ource Code):

 http://appinventor.mit.edu/explore/sites/all/files/ai2tutorials/moleMash2/MoleMash2_MIT.aia

 ref:

http://appinventor.mit.edu/explore/ai2/molemash-2.html

【MIT App Inventor 2(AI2)Intermediate範例】

s810802 發表在 痞客邦 留言(0) 人氣()

【MIT App Inventor 2(AI2)Intermediate範例】ex1. I01_Get the Gold for App Inventor 2

 版面安排:

 I01  

io1-b01  

I01-2  

素材下載

海盗:

pirateship  

http://appinventor.mit.edu/explore/sites/all/files/ai2tutorials/GetTheGold/pirateship.jpeg

 

金幣

goldcoin  

http://appinventor.mit.edu/explore/sites/all/files/ai2tutorials/GetTheGold/goldcoin.jpeg

 方塊圖:

 I01-b1  

I01-b2  

I01-b3  

I01-b4    

 

輸出:

  I01-out  

 QRCODE:

 

下載Source Code:

http://appinventor.mit.edu/explore/sites/all/files/ai2tutorials/GetTheGold/GetTheGold.aia

ref:

http://appinventor.mit.edu/explore/ai2/get-gold.html

【MIT App Inventor 2(AI2)Intermediate範例】

s810802 發表在 痞客邦 留言(0) 人氣()

【MIT App Inventor 2(AI2)Intermediate範例】

ex1. I01_Get the Gold for App Inventor 2(Sprites,Drawing Canvas,Game)

ex2. I02_Paint Pot Extended with Camera (AI2)

ex3. I03_Mole Mash 2 with Sprite Layering for App Inventor 2

ex4. I04_VideoWall for App Inventor 2

ex5. I05_StockQuotes for App Inventor 2

ex6. I06_Mini Golf: Fling, TouchUp, TouchDown Gestures for App Inventor 2

ex7. I07_Space Invaders

ex8. I08_No Text While Driving for AI2

ex9. I09_QuizMe for App Inventor 2

ex10. I10_Sharing Component: send files and text with the app of your choice

ex11. I11_Photo Booth App

  

【MIT App Inventor 2 (AI2)入門練習】

 【MIT App Inventor 2 (AI2)入門範例】

【MIT App Inventor 2(AI2)Basic範例】

 【MIT App Inventor 2(AI2)Intermediate範例】

  【MIT App Inventor 2(AI2)Advanced範例】

  【MIT App Inventor 2 (AI2)入門與範例】(2014)  

 

s810802 發表在 痞客邦 留言(0) 人氣()

【MIT App Inventor 2(AI2)Basic範例】

 

【MIT App Inventor 2(AI2)入口】

 

ex1. B01_您好喵咪Hello Purr for App Inventor 2

ex2. 魔術8號球 B02_Magic 8-ball for App Inventor 2 (Game,Accelerometer)

ex3. B03_MoleMash for App Inventor 2 (Sprites,Clock Timer,Game)

ex4. 照片塗鴉 B04_PaintPot (Part 1) for App Inventor 2 (Drawing Canvas)

ex5. B05_PicCall for App Inventor 2

ex6. B06_PaintPot (Part 2) for App Inventor 2 (Drawing Canvas)

 

【MIT App Inventor 2 (AI2)入門練習】

 【MIT App Inventor 2 (AI2)入門範例】

【MIT App Inventor 2(AI2)Basic範例】

 【MIT App Inventor 2(AI2)Intermediate範例】

  【MIT App Inventor 2(AI2)Advanced範例】

  【MIT App Inventor 2 (AI2)入門與範例】(2014)  

 

s810802 發表在 痞客邦 留言(0) 人氣()

【MIT App Inventor 2 (AI2)入門範例】ex1 文字轉語音 E01_TalkToMe Text-to-Speech App

  版面安排:

HW1-0  

方塊圖:

HW01.jpg  

 

 

輸出:

  E01_OUT  

ref:

http://appinventor.mit.edu/explore/sites/all/files/hourofcode/TalkToMePart1.pdf

 

【MIT App Inventor 2 (AI2)入門範例】

s810802 發表在 痞客邦 留言(0) 人氣()

【MIT App Inventor 2 (AI2)入門範例】ex2 擴充文字轉語音(搖晃) E02_Extended TalkToMe App: Shake!

 版面安排:

HW4-0  

方塊圖:

  HW04  

 

輸出: 

 

 

ref:

http://appinventor.mit.edu/explore/sites/all/files/hourofcode/TalkToMePart2.pdf

 

【MIT App Inventor 2 (AI2)入門範例】

s810802 發表在 痞客邦 留言(0) 人氣()

【MIT App Inventor 2 (AI2)入門範例】ex3 彈跳球 BallBounce Game App

  版面安排: 

HW3-0  

方塊圖:

 HW03.jpg  

 

輸出:

 

 ref:

http://appinventor.mit.edu/explore/sites/all/files/hourofcode/BallBounceTutorial.pdf

 

【MIT App Inventor 2 (AI2)入門範例】

s810802 發表在 痞客邦 留言(0) 人氣()

【MIT App Inventor 2 (AI2)入門範例】ex4 數位塗鴉畫圖 DigitalDoodle Drawing App

  版面安排:

HW2-0  

方塊圖: 

HW02.jpg  

輸出: 

 

 ref:

http://appinventor.mit.edu/explore/sites/all/files/hourofcode/DigitalDoodle.pdf

 

【MIT App Inventor 2 (AI2)入門範例】

s810802 發表在 痞客邦 留言(0) 人氣()

最新中文版【App Inventor 2 教學 範例 2018 】
http://s810802.pixnet.net/blog/post/66682245

 

 

 

【MIT App Inventor 2 (AI2)入門與範例】(2014)  

 home  

 MIT App Inventor 1 (AI1)入口

MIT App Inventor 2 (AI2)入口 

各種聲音音效
http://www.mcjh.kl.edu.tw/usr/wdh/techedu/wavsound/index.html

 

 AI2 執行需要:(不需要安裝 Java JRE or Java JDK)

1.要有 Google帳號 和 使用Google Chrome瀏覽器: 

Google Chrome瀏覽器:  Google Chrome Portable 31.0.1650.63 穩定版 免安裝中文版 

http://www.azofreeware.com/2010/01/google-chrome-portable-4024978.html

 

2.需要使用Android模擬器要安裝App Inventor Setup Software

 PC安裝軟體: 安裝 MIT_App_Inventor_Tools_2.3.0_win_setup

 http://appinv.us/aisetup_windows

  

【MIT App Inventor 2 (AI2)入門練習】 

ex1.您好喵咪 Hello Purr

ex2.照片撥打電話 PicCall

ex3 數位塗鴉畫圖 DigitalDoodle Drawing App

ex4 彈跳球 BallBounce Game App

ex5.照片塗鴉1 PaintPot(Part1)

ex6.照片塗鴉2 PaintPot(Part2)

ex7.MAP地圖簡易版

ex8 魔術8號球Magic 8-ball

ex9.景點介紹Map Tour

ex10.打地鼠MoleMash

ex11.木琴Xylophone 

ex12.野生動物秀P12_WildLifeShow

 【MIT App Inventor 2  (AI2)入門範例】

ex1. 文字轉語音 TalkToMe Text-to-Speech App
ex2. 擴充文字轉語音(搖晃) Extended TalkToMe App: Shake!
ex3. 彈跳球 BallBounce Game App
ex4. 數位塗鴉畫圖 DigitalDoodle Drawing App

 【MIT App Inventor 2(AI2)Basic範例】 

ex1. Hello Purr for App Inventor 2

ex2. 魔術8號球 Magic 8-ball for App Inventor 2 (Game,Accelerometer)

ex3. MoleMash for App Inventor 2 (Sprites,Clock Timer,Game)

ex4. 照片塗鴉 PaintPot (Part 1) for App Inventor 2 (Drawing Canvas)

ex5. PicCall for App Inventor 2

ex6. PaintPot (Part 2) for App Inventor 2 (Drawing Canvas)

 【MIT App Inventor 2(AI2)Intermediate範例】

ex1. I01_Get the Gold for App Inventor 2(Sprites,Drawing Canvas,Game)

ex2. I02_Paint Pot Extended with Camera (AI2)

ex3. I03_Mole Mash 2 with Sprite Layering for App Inventor 2

ex4. I04_VideoWall for App Inventor 2

ex5. I05_StockQuotes for App Inventor 2

ex6. I06_Mini Golf: Fling, TouchUp, TouchDown Gestures for App Inventor 2

ex7. I07_Space Invaders

ex8. I08_No Text While Driving for AI2

ex9. I09_QuizMe for App Inventor 2

ex10. I10_Sharing Component: send files and text with the app of your choice

 【MIT App Inventor 2(AI2)Advanced範例】 

ex01 A01_Colored Dots for App Inventor 2

ex02 A02_Pizza Party with Fusion Tables for App Inventor 2

ex03 A03_NFC Cup Game for AI2

ex04 A04_Android, Where's My Car? for App Inventor 2

ex05 A05_Map It: Displaying Locations on a Google Map

ex06 A06_Exploring with Location Sensor in AI2

ex07 A07_Oh My Spikes

 

【O'Reilly.App Inventor.Create Your Own Android Apps教材】

http://www.appinventor.org/book2

 

  

  [REF]Getting Started with MIT App Inventor 2 

http://appinventor.mit.edu/explore/get-started?

 

其他說明:

(一)三種測試APP的連接方式:
http://appinventor.mit.edu/explore/ai2/setup.html

 

(二)設計和方塊圖介面
http://appinventor.mit.edu/explore/designer-blocks.html

 

(三)入門範例:
http://appinventor.mit.edu/explore/hour-of-code.html

 

(四)輸出APK檔
http://appinventor.mit.edu/explore/ai2/share.html

 

文章標籤

s810802 發表在 痞客邦 留言(0) 人氣()

【MIT App Inventor 入門範例】ex7.MAP地圖簡易版

7-0  

版面安排

7-1  

 

 

 

 

 

 

 

 

7-2  

7-3  

素材:

 

http://goo.gl/7GFPYR

 

http://goo.gl/2MD6Qk

 

 

ref:

http://appinventor.mit.edu/explore/content/maptour.html

方塊圖

7-4  

輸出:

7-5  

 

s810802 發表在 痞客邦 留言(0) 人氣()

  • 這篇文章限定好友觀看。
    若您是好友,登入後即可閱讀。

【MIT App Inventor 入門範例】ex5.MoleMash打地鼠


地鼠素材

http://beta.appinventor.mit.edu/learn/tutorials/molemash/MoleMashAssets/mole.png

http://goo.gl/xL4On


版面安排:

ex6-1  

ex6-2  

ex6-3  

ex6-4  

ex6-5  

ex6-6  

  ex6-7  

 

方塊圖:

ex6-8  

ex6-9  

ex6-10  

輸出:


ex6-11  

 

ex6-12  

 

PDF:

http://cs.usfca.edu/~wolber/appinventor/bookSplits/ch3MoleMash.pdf

http://goo.gl/NI6bD


REF:

http://appinventor.mit.edu/explore/content/molemash.html

http://beta.appinventor.mit.edu/learn/tutorials/molemash/molemash.html

 1.

2. 

3. 

4. 

5. 

   

【MIT App Inventor 入門範例】

文章標籤

s810802 發表在 痞客邦 留言(0) 人氣()

【MIT App Inventor 入門範例】ex4.Map Tour景點介紹

 1.先加入三元件

Image (Basic) Image1 只秀出圖片
ListPicker (Basic) ListPicker1 顯示表列目的地
ActivityStarter (other stuff) ActivityStarter1 ((non-visible) component)

2.修改ListPicker1  Text 為 "台北景點選擇" or 其它地區,你自己的家鄉,高雄,台中,雲林....

REF: 
台北景點: 

http://okgo.tw/buty/taipei.html 

http://travel.network.com.tw/tourguide/twnmap/taipeicity.asp 

http://travel.network.com.tw/main/travel/taipeicity.asp

版面安排

ex5-1  

ex5-2  

ex5-3  

3.設定ActivityStarter的特性

Action: android.intent.action.VIEW
ActivityClass: com.google.android.maps.MapsActivity
ActivityPackage: com.google.android.apps.maps

ex5-4  

4.開啟 blocks editor 設定方塊
def variable ("Destinations") (Definitions) 新增目的地的列表
make a list (Lists) 製作清單
text ("臺北市西門町") (Text) 第1個地點  (Taipei Ximending)
text ("臺北市孔廟") (Text) 第2個地點 (Taipei Confucius Temple)
text ("台北植物園") (Text) 第3個地點 (Taipei Botanical Garden)
text ("陽明山國家公園") (Text) 第4個地點 (Yangmingshan National Park)
text ("臺北市立木柵動物園") (Text) 第5個地點 (Taipei Zoo)

方塊圖:

ex5-5  

5.加入元件的行為
MapTour有兩種行為
(1).app 開始執行時,當點選"ListPicker"元件(台北景點選擇的按鈕)會列出5個地點清單
(2).點選目的地後,會開啟 Google地圖顯示所選的地點

所以程式開始執行時要顯示清單
Screen1.Initialize (Screen1) app開始執行時
set ListPicker1.Elements to (ListPicker1) 列出清單
global destinations (My Definitions) 顯示目的地

ex5-6  

6.執行 Google Maps 搜尋目的地
當目的地選好後,利用ActivityStarter執行Google Maps 搜尋所選定的目的地
(1). ListPicker.AfterPicking 事件啟動
(2).將ActivityStarter的DataUri元件值設定geo:0,0?q='西門町' (目的地)
(3).ActivityStarter1.StartActivity 執行 Google Maps 搜尋目的地 

ListPicker1.AfterPicking (ListPicker1) 當ListPicker被點選時
set ActivityStarter1.DataUri to (ActivityStarter1) DataUri 呼叫 Maps 執行
make text (Text) 建立 DataUri所需要的文字
text ("geo:0,0?q=") (Text) DataUri的第一部分文字
ListPicker1.Selection (ListPicker1) 選定的地點
ActivityStarter1.StartActivity (ActivityStarter1) 執行Maps

ex5-7  

輸出:

ex5-8  

ex5-9  

ex5-10  

 

 PDF:

http://goo.gl/iew2x

http://cs.usfca.edu/~wolber/appinventor/bookSplits/ch6Map.pdf


REF:

http://appinventor.mit.edu/explore/content/maptour.html

http://beta.appinventor.mit.edu/learn/tutorials/maptour/maptour.html


【MIT App Inventor 入門範例】

文章標籤

s810802 發表在 痞客邦 留言(1) 人氣()

【MIT App Inventor 入門範例】ex2.PicCall照片撥打電話

版面安排

 ex2-1  

方塊圖

ex2-2  



REF:

http://appinventor.mit.edu/explore/content/piccall.html

http://beta.appinventor.mit.edu/learn/tutorials/piccall/piccall.html


【MIT App Inventor 入門範例】

文章標籤

s810802 發表在 痞客邦 留言(0) 人氣()

【MIT App Inventor 入門範例】ex6.Xylophone,木琴

 版面安排

ex4-1  

ex4-1a  


方塊圖

ex4-2  

ex4-3  

ex4-4  

ex4-5  

ex4-6  

ex4-7  

輸出:

ex4-8  



木琴聲音
http://goo.gl/ksgFn


PDF:

http://goo.gl/BZPJ5

http://cs.usfca.edu/~wolber/appinventor/bookSplits/ch9Xylophone.pdf

 


 

【MIT App Inventor 入門範例】

文章標籤

s810802 發表在 痞客邦 留言(0) 人氣()

【MIT App Inventor 入門範例】ex3.PaintPot照片塗鴉

版面安排

ex3-1  

  

方塊圖

ex3-2  

ex3-3  

ex3-4  

輸出:

ex3-5  

 

PDF:

http://cs.usfca.edu/~wolber/appinventor/bookSplits/ch2PaintPot.pdf

http://goo.gl/o2Mmo

 

ref:

http://appinventor.mit.edu/explore/content/paintpot-part-1.html

http://appinventor.mit.edu/explore/content/paintpot-part-2.html

http://beta.appinventor.mit.edu/learn/tutorials/paintpot/paintpot-part1.html

1.

2.

3.

4.

5.

【MIT App Inventor 入門範例】

文章標籤

s810802 發表在 痞客邦 留言(0) 人氣()

【MIT App Inventor 入門範例】ex1.Hello Purr

版面安排

 ex1-1  

方塊圖

ex1-2  

PDF:

http://goo.gl/tayX6

http://cs.usfca.edu/~wolber/appinventor/bookSplits/ch1HelloPurr.pdf

素材

http://goo.gl/78j0R

貓照片
http://beta.appinventor.mit.edu/learn/tutorials/hellopurr/HelloPurrAssets/kitty.png
聲音
http://beta.appinventor.mit.edu/learn/tutorials/hellopurr/HelloPurrAssets/meow.mp3

REF:

http://appinventor.mit.edu/explore/content/hellopurr-phone-part-1.html

http://appinventor.mit.edu/explore/content/hellopurr-emulator-part-1.html

http://appinventor.mit.edu/explore/content/hellopurr-part-2.html

https://sites.google.com/a/stu.nknush.kh.edu.tw/appinventor/shi-zuo-fan-li----jiben/fan-li-shi-zuo---pet-kitty

 http://appinventor.mit.edu/explore/content/hellopurr.html

 1:

 

2:

 

3:

 

比較仔細說明

a:

 

b:

 

 

【MIT App Inventor 入門範例】

文章標籤

s810802 發表在 痞客邦 留言(0) 人氣()

【MIT App Inventor 入門範例】

 

MIT App Inventor 入口
http://appinventor.mit.edu/explore/classic.html

http://jiangzero-ai.appspot.com/

 

ex1.Hello Purr

ex2.PicCall照片撥打電話

ex3.PaintPot照片塗鴉

ex4.Map Tour景點介紹

ex5.MoleMash打地鼠

ex6.Xylophone,木琴

ex7.MAP地圖簡易版

 

【MIT App Inventor 範例】

 

【MIT App Inventor 入門準備】

 


各種聲音檔案

 

素材

文章標籤

s810802 發表在 痞客邦 留言(0) 人氣()

【MIT App Inventor 入門】

MIT App Inventor 入口
http://appinventor.mit.edu/explore/

使用 MIT App Inventor 前的準備

1.要有Gmail帳號

Google Chrome瀏覽器
http://goo.gl/4dkGO



2.安裝JRE(Java Runtime Environment)
http://www.oracle.com/tw/index.html

Jave JRE  7u21 X86
Windows 離線 (32 位元)檔案大小: 30.93 MB 

jre-7u21-windows-i586.exe


https://docs.google.com/a/pixnet.net/file/d/0B-JLL5O3huAHTUJCTTBEQVBEaHc/edit


http://goo.gl/stkFH



Windows 離線 7u21 X64 (64 位元)檔案大小:32.344MB  

jre-7u21-windows-x64.exe


https://docs.google.com/a/pixnet.net/file/d/0B-JLL5O3huAHUGFrX2RfSDJOTVk/edit


http://goo.gl/89vHh



3.下載AppInventor_Setup_Installer安裝
http://beta.appinventor.mit.edu/learn/setup/setupwindows.html

AppInventor_Setup_Installer_v_1_2.exe


http://dl.google.com/dl/appinventor/installers/windows/appinventor_setup_installer_v_1_2.exe


http://goo.gl/OtHVW


4.申請 pixnet帳號 再 我為好友 (分享線上教材)
http://s810802.pixnet.net/blog/


說明REF:
App Inventor Setup:
http://beta.appinventor.mit.edu/learn/setup/index.html

第一次登入 MIT App Inventor
http://appinventor.mit.edu/explore/

  

【MIT App Inventor 入門範例】

 

Getting Started with AppInventor:



以下為目前可參考的教學網站:

1.App Inventor中文學習網
http://www.appinventor.tw/


2.App Inventor 教學.CG數位學習網
http://www.cg.com.tw/AppInventor/AppInventor.asp

4.AppInventor - CAVE-Education
http://www.cavedu.com/appinventor_getstarted

5.學習點點頭: Google MIT App Inventor使用教學
http://learningorz.blogspot.com/2012/05/google-mit-app-inventor.html

6高師大附中資訊社App Inventor 教學網
https://sites.google.com/a/stu.nknush.kh.edu.tw/appinventor/

7.[教學] App Inventor 單機執行(不需網路)
http://tw.myblog.yahoo.com/lego-caveschool/article?mid=8369

8.MIT App Inventor 官方教學
http://appinventor.mit.edu/explore/content/tutorials.html

9.Professor Wolber App Inventor 官方教學
http://www.appinventor.org/projects

 

10:teach:

http://appinventor.mit.edu/teach/

 

11:resources:
http://appinventor.mit.edu/teach/resources.html

 

12.Android Aid:
http://android.jwtyler.com/?page_id=7

 

 

App Inventor Setup:

 

Use MIT App Inventor:

 

Setup MIT App Inventor
http://appinventor.mit.edu/explore/content/setup-mit-app-inventor.html

 

Middle School Android
https://sites.google.com/site/middleschoolandroid/home/app-inventor-tutorials

 

離線用 App Inventor 開發應用程式
http://www.wingsv.org/2012/02/android-app-inventor.html

 

 

Android Programming
http://hscc.cs.nctu.edu.tw/~lincyu/Android/android.html

 

最後建立完成的 appinventor host. 
http://jiangzero-ai.appspot.com/

 

【 App Inventor 教學】

文章標籤

s810802 發表在 痞客邦 留言(0) 人氣()

Close

您尚未登入,將以訪客身份留言。亦可以上方服務帳號登入留言

請輸入暱稱 ( 最多顯示 6 個中文字元 )

請輸入標題 ( 最多顯示 9 個中文字元 )

請輸入內容 ( 最多 140 個中文字元 )

reload

請輸入左方認證碼:

看不懂,換張圖

請輸入驗證碼