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

Welcome to App Inventor for Android![br]
The Google account that you are receiving this email on has been given access to App Inventor.[br]
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.[br]
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-installer-image.dmg ไฟล์ประมาณ 55 MB ครับ จะได้ไฟล์ดังรูปมา

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

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

ต่อไปถึงคิว GNU/Linux เริ่มที่ทำการ โหลดไฟล์ install จาก http://dl.google.com/dl/appinventor/installers/linux/appinventor-extras_1.0-1_all.deb จากนั้นทำการ 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_extras_setup.exe จากนั้นทำการ 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 : )