【App Inventor 2 教學 範例 2018 】

【MIT App Inventor 首頁】

【App Inventor 2 初學者 範例 2018 】
【App Inventor 2 基礎 範例 2018 】
【App Inventor 2 中階 範例 2018 】
【App Inventor 2 進階 範例 2018 】

【App Inventor 2 其他 範例 2018 】

 

【App Inventor TW 中文學習網】

【APP Inventor 2 輔助教學網】

【延伸學習:MIT App Inventor 2】

【程式設計課程輔助教學網站】

【App Inventor 2 筆記】】

【MIT App Inventor 2 簡單設計入門】

【雲林SONG: MIT App Inventor 2 教學】

【CAVEDU BLOG APPINVENTOR – 圖形化ANDROID】

【以MIT APP Inventor教程式的感想】

【CAVEDU APP Inventor範例教學】

17coding.人人编程

 

 

 

 

文章標籤

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

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

【MIT App Inventor 2(AI2)入口】

 各種聲音音效

http://www.mcjh.kl.edu.tw/usr/wdh/techedu/wavsound/index.html 

ex1.您好喵咪 P01_HelloPurr

ex2.照片撥打電話 P02_PicCall

ex3 數位塗鴉畫圖 P03_DigitalDoodle Drawing App

ex4 彈跳球 P04_BallBounce Game App

ex5.照片塗鴉1 P05_PaintPot(Part1)

ex6.照片塗鴉2 P06_PaintPot(Part2)

ex7.MAP地圖簡易版P07_MAP

ex8 魔術8號球P08_Magic 8-ball

ex9.景點介紹P09_Map Tour

ex10.打地鼠P10_MoleMash

ex11.木琴P11_Xylophone

ex12.野生動物秀P12_WildLifeShow

【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) 人氣()

【App Inventor 2 初學者 範例 2018 】BA07 您好小蜜蜂 Hello Codi! (BA07_2018)

畫面編排:

BA07-01.jpg

本例題素材:
蜜蜂圖片
http://appinventor.mit.edu/explore/sites/all/files/ai2tutorials/helloCodi/codi.jpg

蜜蜂聲音
http://appinventor.mit.edu/explore/sites/all/files/ai2tutorials/helloCodi/Bee-Sound.mp3

程式設計:

BA07-02.jpg
執行畫面:

BA07-03.jpg

ref:
http://appinventor.mit.edu/explore/ai2/hello-codi.html


【App Inventor 2 基礎 範例 2018 】

文章標籤

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

【App Inventor 2 初學者 範例 2018 】BA05 照片塗鴉2 PaintPot (Part 2) (BA05_2018)

畫面編排:

BA05-01.jpg
程式設計:

BA05-02.jpg

BA05-03.jpg
執行畫面:

BA05-04.jpg

BA05-05.jpg

REF:
http://appinventor.mit.edu/explore/ai2/paintpot-part2.html


【App Inventor 2 基礎 範例 2018 】

文章標籤

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

【App Inventor 2 初學者 範例 2018 】BA04 照片塗鴉1 PaintPot (Part 1)  (BA04_2018)

畫面編排:

BA04-01.jpg
程式設計:

BA04-02.jpg

BA04-03.jpg
執行畫面:

BA04-04.jpg

BA04-05.jpg

REF:
http://appinventor.mit.edu/explore/ai2/paintpot-part1.htm
l


【App Inventor 2 基礎 範例 2018 】
 

文章標籤

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

【App Inventor 2 初學者 範例 2018 】BA02 魔術8號球 Magic 8 Ball (BA02_2018)

畫面編排:

BA02-01.jpg

本範例的素材:

收銀台聲音
http://appinventor.mit.edu/explore/sites/all/files/ai2tutorials/magic8ball/Cha_Ching.mp3

茶匙敲叮噹響聲音
http://appinventor.mit.edu/explore/sites/all/files/ai2tutorials/magic8ball/Clinking_Teaspoon.mp3

噹噹聲音
http://appinventor.mit.edu/explore/sites/all/files/ai2tutorials/magic8ball/Tada.mp3

魔術8號球圖片
http://appinventor.mit.edu/explore/sites/all/files/Teach/media/image_8_ball.jp
g

魔術8號球圖片
http://appinventor.mit.edu/explore/sites/all/files/ai2tutorials/magic8ball/magic8ball.jpg

程式設計:

BA02-02.jpg
執行畫面:

BA020-03.jpg

BA020-04.jpg

ref:http://appinventor.mit.edu/explore/ai2/magic-8-ball.html
【App Inventor 2 基礎 範例 2018 】

文章標籤

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

【App Inventor 2 初學者 範例 2018 】BE04 數位塗鴉畫圖 DigitalDoodle Drawing(BE04_2018)

畫面編排:

BE04-01.jpg
程式設計:

BE04-02.jpg
執行畫面:

BE04-03.jpg
參考資料:
http://appinventor.mit.edu/explore/sites/all/files/hourofcode/DigitalDoodle.pdf

 

【App Inventor 2 初學者 範例 2018 】

文章標籤

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

【App Inventor 2 初學者 範例 2018 】BE03 彈跳球 BallBounce Game (BE03_2018)

畫面編排:

BE03-01.jpg
程式設計:

BE03-02.jpg
執行畫面:

BE03-03.jpg
參考資料:
http://appinventor.mit.edu/explore/sites/all/files/hourofcode/BallBounceTutorial.pdf

 

【App Inventor 2 初學者 範例 2018 】

文章標籤

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

【App Inventor 2 初學者 範例 2018 】BE02 擴充文字轉語音(搖晃) Extended TalkToMe : Shake! (BE02_2018)

畫面編排:

BE02-01.jpg

程式設計:

BE02-02.jpg


執行畫面:

BE02-03.jpg
參考資料:
http://appinventor.mit.edu/explore/sites/all/files/hourofcode/TalkToMePart2.pdf

 

【App Inventor 2 初學者 範例 2018 】

文章標籤

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

【App Inventor 2 其他 範例 2018 】O07 我愛動物 (O07_2018)

畫面編排:

1.建立專案:tiger,Screen1 設定:
標題:我愛老虎、背景顏色:橙色、關閉螢幕動畫:垂直滑動、開啟螢幕動畫:水平滑動、螢幕方向:鎖定直式畫面、允許捲動:取消核選。
2.介面設計:
上傳 <tiger1.jpg> [60X60]及 <tiger-2.png>[160X160]。
建立垂直配置1元件:水平對齊:置中、垂直對齊:置中、高度:180像素、寬度:填滿。
建立圖像1元件:高度:160像素、寬度:160像素、圖片:tiger-2.png。
建立垂直配置2元件:水平對齊:置中、垂直對齊:置中、高度:填滿、寬度:填滿。
建立按鈕1元件:重新命名:認識虎仔、字體大小:20、文字:認識新朋友-虎仔、寬度: 200像素、文字對齊:置中。
建立按鈕2元件:重新命名:線上看虎仔、字體大小:20、文字:線上看虎仔、寬度: 200像素、文字對齊:置中。

建立按鈕3元件:重新命名:可愛虎仔相簿、字體大小:20、文字:可愛虎仔相簿、寬度: 200像素、文字對齊:置中。
建立按鈕4元件:重新命名:來去找虎仔、字體大小:20、文字:來去找虎仔、寬度: 200像素、文字對齊:置中。

建立Activity啟動器1元件。

o07-1.jpg

3.建立三個 Screen 頁面:ScreenAbout、ScreenPhoto 及 ScreenSearch。
ScreenAbout 頁面設定:標題:認識虎仔、背景顏色:橙色、關閉螢幕動畫:水平滑動、開啟螢幕動畫:水平滑
動、螢幕方向:鎖定直式畫面、允許捲動:取消核選。
建立水平配置1元件:、高度:60像素、寬度:填滿。
建立圖像1元件:寬度:60像素、圖片:tiger1.jpg。
建立標籤1元件:
粗體 :核選、字體大小:20、文字:認識虎仔、文字對齊:置中、寬度:填滿。 建立按鈕1元件
:背景顏色:黑色、粗體:核選、高度:50像素、寬度:50像素、形狀:橢圓、文字:首頁、文字顏色:白色。
建立網路瀏覽器1元件。

o07-2.jpg

4.ScreenPhoto 及 ScreenSearch 頁面介面設計與 ScreenAbout 完全相同。

5.ScreenAbout 頁面網路瀏覽器1元件的首頁地址性值:
https://zh.m.wikipedia.org/wiki/%E8%99%8E

ScreenPhoto 頁面網路瀏覽器1元件的首頁地址屬性值:https://www.google.com.tw/search?safe=off&hl=zh-TW&biw=1821&bih=825&site=imghp&tbm=isch&sa=1&ei=1OsrW4rNF5Lu-QbZnYrwCA&q=%E8%80%81%E8%99%8E&oq=%E8%80%81%E8%99%8E&gs_l=img.3..35i39k1j0l9.2624.9487.0.10191.15.8.5.2.3.0.54.327.7.7.0....0...1c.1j4.64.img..1.14.353.0..0i30k1j0i24k1.0.dmNh877PVOQ

o07-3.jpg

ScreenSearch 頁面網路瀏覽器1元件的首頁地址屬性值:https://www.google.com/maps/place/%E8%87%BA%E5%8C%97%E5%B8%82%E7%AB%8B%E5%8B%95%E7%89%A9%E5%9C%92/@24.9988551,121.5788645,17z/data=!3m1!4b1!4m5!3m4!1s0x3442aa604a32818f:0xaafe06fd09b4d766!8m2!3d24.9988551!4d121.5810585

o07-4.jpg


程式設計:

Screen1 的拼塊

 

o07.jpg

7.ScreenAbout、ScreenPhoto 及 ScreenSearch的拼塊都相同:

o07-6.jpg


執行畫面:

o07-A.jpg

o07-B.jpg

o07-c.jpg

o07-d.jpg

o07-e.jpg

【App Inventor 2 教學 範例 2018 】

文章標籤

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

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

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

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

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

請輸入左方認證碼:

看不懂,換張圖

請輸入驗證碼