มาลองเล่น App Inventor กันครับ : )
by sensor : Posted at 05/08/2010 00:47

สวัสดีครับ วันนี้ผมเขียน Blog ครั้งแรกในชีวิต : ) ของเริ่มบนเวป DroidSans แห่งนี้เลยแล้วกันครับ วันนี้ (4 สิงหาคม 2010) ตอนเช้า 07.19 น. ผมได้รับอีเมลล์ ฉบับนี้

Quote:

Welcome to App Inventor for Android!

The Google account that you are receiving this email on has been given access to App Inventor.

We recommend you start your app building adventures by working through the Getting Started material. You might also want to read more about App Inventor and take a look at some sample apps. Finally, you can ask questions and get help by signing up for the App Inventor Google Group.

Thanks!
Google's App Inventor Team

วะวะวะว๊าว มานมาแล้ว App Inventor ที่รอคอย เค้า Create User ให้เราเรียบร้อย หลังจากรอเป็นเดือน งั้นก็...พร้อม...ลุย!!!

หลายคนน่าจะรู้จัก App Inventor มาบ้างแล้ว ซึ่งมันคือ สิ่งที่ทำให้แม้แต่เคยที่ไม่มีพื้นฐานเขียนโปแกรมเลยสร้าง Application เจ๋งๆได้นั่นเอง วันนี้ผมจะอธิบายรูปแบบการเขียนอย่างละเอียดให้ดูเลยแล้วกันครับ : )
เจ้าตัวที่ชื่อว่า App Inventor นั้นเป็นตัวสร้าง Applicaion ที่ใช้สร้างบน Web Browser สามารถรันโปรแกรมลงมือถือผ่าน USB ได้ทันที หรือถ้าในกรณีที่มันไม่สามารถเชื่อมต่อกับโทรศัพท์มือถือได้ เราก็ยังสามารถนำตัว .apk ที่เราได้จากการรันมาใส่ที่คอมฯแล้วค่อยก็อปไป install ที่เครื่องได้

มาดูทรัพยากรพื้นฐานที่ต้องใช้กันบ้าง เริ่มที่ OS ที่สามารถใช้ได้ดังนี้เลยครับ : )

• Macintosh: Mac OS X 10.5, 10.6 (Intel)
• Windows: Windows XP, Windows Vista, Windows 7
• GNU/Linux: Ubuntu 8+, Debian 5+

ต่อไปเป็น Browser ที่ต้องการ

• Mozilla Firefox 3.6 and higher
• Apple Safari 5.0 and higher
• Google Chrome 4.0 and higher
• Microsoft Internet Explorer 6 and higher

Java: คอมพิวเตอร์ของคุณต้องมี Java6 ลงไว้นะ ถ้าไม่มีโหลดที่ http://www.java.com สำหรับ ผู้ที่ใช้ Mac แนะนำให้ใช้ JRE 1.6 (Java 6) นะครับ

ต่อไปเป็นส่วนสำคัญคือการติดตั้ง App Inventor Extras software ครับ

มาเริ่มกันที่ Mac OS X

เริ่มโดยการโหลดตัว install ที่ http://dl.google.com/dl/appinventor/installers/mac/appinventor-extras-in... ไฟล์ประมาณ 55 MB ครับ จะได้ไฟล์ดังรูปมา

จากนั้นเริ่มทำการ install ดังรูปครับ

คลิกที่ Continue แต่อย่าเปลี่ยน Location สำหรับ Install นะครับ จากนั้นใส่พาสเวิร์ด กด OK ส่วนไฟล์ที่ติดตั้งเสร็จแล้วจะไปอยู่ที่ /Applications/Applnventor

ต่อไปถึงคิว GNU/Linux เริ่มที่ทำการ โหลดไฟล์ install จาก http://dl.google.com/dl/appinventor/installers/linux/appinventor-extras_... จากนั้นทำการ install ตามปกติครับ ในกรณีที่ไม่สามารถ install แบบแรกได้ ให้ทำการ เข้า terminal แล้วพิมพ์คำสั่ง

sudo dpkg –install appinventor-extras_1.0-1_all.deb

เมื่อ install เสร็จไฟล์จะไปอยู่ที่ /usr/google/appinventor-extras

ถึงตา Windows มั่งแล้ว เริ่มที่โหลดตัว install ที่ลิงค์ http://dl.google.com/dl/appinventor/installers/windows/appinventor_extra... จากนั้นทำการ install เหมือนโปรแกรมทั่วไป แนะนำอย่าเปลี่ยน location ปลายทางนะครับ : )

สำหรับ Windows นั้นต้องมีการ Install drivers กันด้วย สำหรับ App Inventor นั้นจะใส่ Driver มาในตัว Installer แล้วสำหรับ Hardware ดังต่อไปนี้

• T-Mobile G1* / ADP1
• T-Mobile myTouch 3G* / Google Ion
• Verizon Droid*
• Nexus One
• และอื่นๆที่มีรูปแบบใกล้เคียง

ถ้าอยากรู้ว่า โทรศัพท์มือถือของเรานั้น install driver เรียบร้อยหรือยัง มีวิธีตรวจสอบครับ

- เริ่มที่ เข้า Command Prompt จากนั้นไปที่ Directory ปลายทางที่เรา install ไว้

- จากนั้น พิมพ์ dir ตรวจดูว่ามี adb.exe หรือไม่ถ้ามีแสดงว่าทำถูกต้องแล้ว

- เชื่อมต่อโทรศัพท์เข้ากับคอมพิวเตอร์ คุณต้องแน่ใจว่าที่โทรศัพท์นั้นมี notification เตือนว่า USB connected และ USB debugging connected แล้ว

- ต่อมาพิมพ์คำสั่ง “adb devices” คุณจะเจอข้อความว่า “daemon not running “ และตามด้วย “daemon stated successfully” และสุดท้าย “list of devices attached” เป็นอันว่าเสร็จสมบูรณ์ครับ

- แต่ถ้าเป็นอย่างอื่นละก้อ คุณต้องลง driver แบบ Manual ละครับ ส่วนนี้ผมยังไม่ได้ review นะครับ ลองไปทดสอบเองที่ http://appinventor.googlelabs.com/learn/setup/setupwindows.html topic รองสุดท้ายนะครับ

ต่อไปเรามาตั้งค่าโทรศัพท์ให้สามารถทำการ debug โปรแกรมได้กันครับ ตามขั้นตอนดังนี้ๆๆๆๆๆๆๆ

1. ไปที่หน้า home ของ โทรศัพท์ กดปุ่ม menu > Setting > Applications
2. ถ้าโทรศัพท์คุณมีเมนู Unknown Sources box กดเลือกไว้ครับ
3. ต่อไปเลือกที่ Development ครับ
4. ตรวจสอบว่า คุณใส่เครื่องหมายถูกที่ USB Debugging กับ Awake are checked เรียบร้อยหรือยัง
5. กด back หนึ่งครั้งไปที่หน้า Setting
6. เลือกที่เมนู Sound & Display เลื่อนลงมาด้านล่างจะเห็น Orientation ตรวจสอบให้แน่ใจว่าไม่ได้เลือกไว้นะครับ สำหรับโทรศัพท์บางรุ่นนั้นไม่มีเมนูดังกล่าวให้หาเมนูที่ตั้งค่าการ Auto rotate ของหน้าจอแล้วตรวจสอบให้แน่ใจว่าไม่ได้ทำการเลือกไว้

มาเริ่มทดสอบการเขียนโปรแกรมกันเลยพวกเรา เอ้าเฮ!!

1. เปิด Web Browerและไปยัง http://appinventor.googlelabs.com/ เลยครับ

2. ทำการ Login ด้วย Gmail Account จากนั้นเข้าสร้าง new project ก็จะเข้าสู่หน้าต่าง App Inventor แล้ว ดังรูป

**บางคนที่ login เข้าไปแล้วเจอหน้าตาให้กรอกข้อมูล นั่นแสดงว่า Gmail ของคุณยังไม่สามารถเล่นตัว App Inventor ได้ครับ ให้กรอกข้อมูลส่งไปบอกเหตุผลที่ต้องการเล่น เดี๋ยวทาง google จะ activate ให้คุณเองครับ : )***

3. สร้างโปรแกมเล่นเสียงกันดีกว่า โดยลาก item ต่างๆ ลงมาได้เลยเริ่มจากTopic Basicตามลำดับ Label > Button > Label จากนั้นไปที่ Topic Media เลือก Sound ลากมาวาง จะได้ดังรูป

4. ทำการอัพโหลด media ที่เราต้องการให้เล่นมาใส่ ในที่นี้ผมโหลด dishhh.wav กับ varnDich.jpg มาลงดังรูป

5. จากนั้นกำหนดองค์ประกอบต่างๆ ได้ตามใจชอบเลยครับ ดังรูป

6. ซึ่งผมจะลบข้อความในปุ่มทิ้ง และใส่รูปที่จัดเตรียมมาลงไป ส่วนข้อความก็ใส่ไปขำๆนะครับ : )
ในที่นี้ผมปรับขนาดปุ่มเป็น Width 235 และ Height 314 นะครับ เท่ากับขนาดภาพที่เตรียมมาเป๊ะ ฮ่าๆๆ ส่วนข้อความก็ใส่มั่วๆไปเลย ของผมก็จะได้ออกมาดังนี้

7. จากนั้นเลือก Open The Block Editor ที่มุมขวาบน รอโหลด มาแล้วคลิกรัน จะได้หน้าต่างนี้ขึ้นมา

8. จากนั้นเลือกที่ My Blocks แล้วก็เลือก Object มาวางดังรูป

9. กด save จากนั้น เชื่อมต่อโทรศัพท์กับคอมพิวเตอร์และ กด Connect to phone จนขึ้นว่า connecting

10. จากนั้น กลับไปที่หน้าออกแบบ UI และทำการ อัพโหลดโปรแกรม สามารถเลือกว่าจะลงคอมพิวเตอร์ หรือโทรศัพท์ ดังรูป

หวังว่าบทความที่ผมเขียนขึ้นนี้คงเป็นประโยชน์บ้าง ไม่มากก็น้อยครับ
ในส่วนการ develop ผมยอมรับว่าเพิ่มเริ่มต้น หากผิดพลาดประการใดขออภัยมา ณ ที่นี้ด้วยครับ

sensor Androidlian From Chanthaburi : )






Pin It

Offline
Last seen: 3 years 40 weeks ago
Joined: 07/12/2010
Points: 13

น่าลองนะเนี่ย

tonhor's picture
Offline
Last seen: 33 weeks 1 day ago
Joined: 08/02/2009
Points: 2361

ไม่หลับไม่นอน

tonhor's picture
Offline
Last seen: 33 weeks 1 day ago
Joined: 08/02/2009
Points: 2361

ขอบคุณคับ สำหรับบทความ

เดี๋ยวหลังสอบพรุ่งนี้จะลองเล่นมั่ง

plazt's picture
Offline
Last seen: 2 years 31 weeks ago
Joined: 06/30/2010
Points: 60

*()*

Offline
Last seen: 23 weeks 5 days ago
Joined: 04/13/2010
Points: 171

รอ grant access ต่อไป

euclid's picture
Offline
Last seen: 1 year 11 weeks ago
Joined: 06/12/2010
Points: 214

ส่งขอ access ไปนานแล้ว แต่ยังไม่ได้รับตอบกลับเลยครับ
รอ รอ รอ

Offline
Last seen: 30 weeks 4 days ago
Joined: 07/12/2010
Points: 60

ใช่รอๆๆๆ เหมือนกันตั้งแต่ทราบข่าว จะได้ลองไหมนะ o_O??

dahoba's picture
Offline
Last seen: 5 days 31 min ago
Joined: 08/14/2009
Points: 1813

ยังมีอาการเชื่อมกับตัวโทรศัพท์ไม่ค่อยได้อยู่บ่อย แต่มันก้อเมพมากแล้ว AppInventer เนี่ย Smile

sensor's picture
Offline
Last seen: 3 days 20 hours ago
Joined: 05/05/2010
Points: 738

ฮาาา ถูกต้องเลย T T

meen_onboard's picture
Offline
Last seen: 2 years 20 weeks ago
Joined: 01/11/2010
Points: 222

เช่นกันกับต่อกับโทรศัพท์ไม่ค่อยติด บอกแต่ the phone is not connect ก็เสียบสาย + adb ก็เจอแล้วนี่นา ==

yeeha's picture
Offline
Last seen: 2 years 34 weeks ago
Joined: 07/22/2010
Points: 4

มันเป็นapp ทำอะไรอ่ะครับ - -

sensor's picture
Offline
Last seen: 3 days 20 hours ago
Joined: 05/05/2010
Points: 738

เป็น app ที่ใช้ทำ app บน Android เนี่ยแหละครับ : )

Offline
Last seen: 29 weeks 3 days ago
Joined: 06/28/2010
Points: 177

ขอบคุณสำหรับบทความครับ

moo0417's picture
Offline
Last seen: 7 hours 44 min ago
Joined: 07/11/2010
Points: 66

น่าสนใจครับ

Offline
Last seen: 5 days 12 hours ago
Joined: 07/24/2010
Points: 799

ลากๆวางๆ น่าจะทำเกมจีบสาวได้นะนี่ >_<

NuiNui's picture
Offline
Last seen: 3 weeks 2 days ago
Joined: 06/18/2010
Points: 22

ฮ่าๆ มาแล้วเด๋วลองคืนนี้เลย ขอบคุณครับ

madoatz's picture
Offline
Last seen: 15 weeks 1 day ago
Joined: 05/18/2010
Points: 108

^
^
คนข้างบนนี่คุ้นๆ อิอิ

Tarlabgab's picture
Offline
Last seen: 2 years 3 days ago
Joined: 01/13/2010
Points: 168

ใครทำ App เปิด-ปิด Edge ของ Galaxy S หน่อยดิ เอาแบบเนียนๆ อ่ะครับ

Offline
Last seen: 1 day 5 hours ago
Joined: 11/13/2008
Points: 1046

ยังไม่ได้ลองเลย
มัน export project เพื่อแก้บน eclipse ได้เปล่าครับ
แบบว่าทำง่ายๆแล้วค่อยไปแก้ลึกๆเอาเองอะ

sensor's picture
Offline
Last seen: 3 days 20 hours ago
Joined: 05/05/2010
Points: 738

เหมือนจะไม่ได้นะคับ : )

Offline
Last seen: 14 weeks 6 days ago
Joined: 03/05/2010
Points: 93

ต้องลอง ต้องลอง

krapalm's picture
Offline
Last seen: 9 weeks 3 days ago
Joined: 01/14/2010
Points: 19

ไมผมไม่ได้รับเมล์หน่า

space2001's picture
Offline
Last seen: 2 days 8 hours ago
Joined: 02/08/2010
Points: 462

น่าสนใจนะ

Offline
Last seen: 3 years 14 weeks ago
Joined: 10/27/2010
Points: 5

สำหรับคนที่อยากได้โปรแกรมเปิด edge/gprs ลองใช้ apndroid หาได้จาก market ทางร้านที่ซื้อแนะนำมา ผมลองแล้วใช้ได้ดีครับ แต่ถ้าจะพัฒนาขอความรู้บ้างนะครับ มือใหม่

Offline
Last seen: 3 years 36 weeks ago
Joined: 11/14/2010
Points: 1

พี่มัช แล้ว เขียนบนลินุกซ์กะบนวินโด ต่างกันยังไงอ่า เขียนบนไหนเวิร์คกว่ากัน หื้มม

sensor's picture
Offline
Last seen: 3 days 20 hours ago
Joined: 05/05/2010
Points: 738

ไม่ต่างกันเลย เวิร์คทั้งคู่แหละ แต่เป็นไปได้ ทำบน Linux แหละนะ สนับสนุน : )

Offline
Last seen: 2 years 31 weeks ago
Joined: 09/12/2010
Points: 2

ผมใช้ WinXP เน็ท TOT

ลงโปรแกรมตามนี้แล้วครับ
ถึงตา Windows มั่งแล้ว เริ่มที่โหลดตัว install ที่ลิงค์ http://dl.google.com/dl/appinventor/installers/windows/appinventor_extra... จากนั้นทำการ install เหมือนโปรแกรมทั่วไป แนะนำอย่าเปลี่ยน location ปลายทางนะครับ : )

แต่เปิด
1. เปิด Web Browerและไปยัง http://appinventor.googlelabs.com/ เลยครับ ไม่ได้

ขอคำแนะนำด้วยครับ

sensor's picture
Offline
Last seen: 3 days 20 hours ago
Joined: 05/05/2010
Points: 738

แสดงว่า Email ยังไม่ได้ถูก Activate อ่ะครับ ต้องส่งคำขอไปก่อน
ปล.เหมือนจะตอบช้าไปหลายเดือนเลย ฮาๆ

muew1989's picture
Offline
Last seen: 3 years 3 weeks ago
Joined: 06/17/2011
Points: 1

กด Connect to phone ไม่ได้ทำอย่างไรดีค่ะ อยากทดลองทำจริงๆ

sensor's picture
Offline
Last seen: 3 days 20 hours ago
Joined: 05/05/2010
Points: 738

เลือก Download to this Computer ก็ได้ครับ พอได้ไฟล์ .apk ก็ก็อปใส่ SDCard แล้วค่อยไป install ในเครื่องเอาครับ

Offline
Last seen: 2 years 28 weeks ago
Joined: 04/04/2011
Points: 6

วิธีของ account ของ app inventor นี้ทำยังไงครับใครรู้ช่วยบอกหน่อย

Offline
Last seen: 1 year 51 weeks ago
Joined: 06/08/2012
Points: 2

ใครที่เข้าไม่ได้
ใช้เว็บนี้หรือเปล่า

http://appinventor.mit.edu/

allzero's picture
Offline
Last seen: 2 weeks 4 days ago
Joined: 09/09/2010
Points: 92

Block Editor ไม่รองรับภาษาไทย...

Navigation
User login
Moderator Team
Contributor
Active forum topics
Recent blog posts
Recent comments
Facebook Fan Page
Who's new
Hits Counter