Development

มาลองเล่น App Inventor กันครับ : )

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

[quote]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
[/quote]

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

สวัสดีครับ วันนี้ผมเขียน 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 : )

37 Comments

37 Comments

  1. Morph

    August 5, 2010 at 10:46 am

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

    • tonhor

      tonhor

      August 5, 2010 at 10:57 am

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

  2. tonhor

    tonhor

    August 5, 2010 at 10:59 am

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

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

  3. plazt

    plazt

    August 5, 2010 at 1:49 pm

    *()*

  4. keng2000

    August 5, 2010 at 2:41 pm

    รอ grant access ต่อไป

  5. euclid

    euclid

    August 5, 2010 at 3:09 pm

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

  6. aumpradya

    August 5, 2010 at 3:34 pm

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

  7. dahoba

    dahoba

    August 5, 2010 at 4:11 pm

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

    • sensor

      sensor

      August 5, 2010 at 8:10 pm

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

    • meen_onboard

      meen_onboard

      August 6, 2010 at 7:16 am

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

  8. yeeha

    yeeha

    August 5, 2010 at 6:18 pm

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

    • sensor

      sensor

      August 5, 2010 at 8:11 pm

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

  9. stand

    August 5, 2010 at 10:39 pm

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

  10. moo0417

    moo0417

    August 6, 2010 at 12:53 am

    น่าสนใจครับ

  11. 75863263

    August 6, 2010 at 1:34 am

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

  12. NuiNui

    NuiNui

    August 6, 2010 at 2:46 am

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

  13. madoatz

    madoatz

    August 6, 2010 at 4:47 am

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

  14. Tarlabgab

    Tarlabgab

    August 6, 2010 at 6:32 am

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

  15. neonicus

    August 6, 2010 at 7:51 am

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

    • sensor

      sensor

      August 7, 2010 at 7:43 am

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

  16. mrboo

    August 7, 2010 at 1:34 pm

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

  17. krapalm

    krapalm

    August 8, 2010 at 2:10 am

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

  18. space2001

    space2001

    August 8, 2010 at 8:12 am

    น่าสนใจนะ

  19. charnnarong_d

    November 6, 2010 at 8:24 pm

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

  20. natiixz

    November 14, 2010 at 10:00 am

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

    • sensor

      sensor

      November 15, 2010 at 8:21 pm

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

  21. tiawjung

    February 1, 2011 at 3:45 am

    ผมใช้ WinXP เน็ท TOT

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

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

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

    • sensor

      sensor

      August 11, 2011 at 10:27 pm

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

  22. muew1989

    muew1989

    June 17, 2011 at 8:18 pm

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

    • sensor

      sensor

      August 11, 2011 at 10:26 pm

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

  23. hengngng

    January 17, 2012 at 6:08 pm

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

  24. tomm4974

    July 28, 2012 at 6:32 pm

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

    http://appinventor.mit.edu/

  25. allzero

    allzero

    October 4, 2012 at 5:51 pm

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

    • Akram Aleeming

      Akram Aleeming

      May 15, 2015 at 3:15 am

      App inventor ในส่วนของการตั้งชื่อ Component ต้องตั้งชื่อเป็นภาษาอังกฤษครับ
      แต่ถ้าเป็นการกำหนด text อะไรยังไง สามารถกำหนดภาษาไทยได้

      ดูเพิ่มเติมได้ที่ http://ai2startup.blogspot.com/

  26. kamonchat

    April 8, 2015 at 4:46 pm

    ระหว่างapp inventor กับ eclipse android ตัวไหนดีกว่ากันคะ
    แล้วตัวไหนที่สามารถพล็อตกราฟแบบเรียลไทม์ได้คะ ใครรู้วานตอบหน่อยนะคะ เวลาเร่งด่วนเลยล่ะ T T โดยส่วนตัว app inventorน่าใช้กว่าแต่เพราะไม่การเขียดโค้ดเลยก็เลยคิดว่าจะทำแบบประยุกต์ได้มั้ย

    • Akram Aleeming

      Akram Aleeming

      May 15, 2015 at 3:12 am

      app inventor เหมาะสำหรับคนที่ไม่มีทักษะการเขียนโปรแกรมมากนัก เพราะจะใช้ในการลากวาง block แทนการเขียนชุดคำสั่งแบบ elipse ที่เขียนด้วยภาษา JAVA

      app inventor การสร้างหน้า UI ทำไม่ค่อยดีมากน่ะ ถ้าเทียบกับ Eclipse แต่ข้อดีจะได้ mobile app ที่ไม่ต้องเขียนโค้ดอะไรมากมาย แถมComponent ที่ App inventer เตรียมมาก็เพียงพอสร้างได้

      app inventor ถ้าจะ plot กราฟก็คงอาศัย WEB VIEW ช่วยครับ

      ดูรายละเอีด App inventor
      [url]http://ai2startup.blogspot.com[ /url]

  27. Akram Aleeming

    Akram Aleeming

    May 15, 2015 at 3:17 am

    ปัจจุบัน App inventor เป็นเวอร์ชั่น 2 แล้วครับ มีคอมโพแนนเพิ่มเติมมากขึ้นกว่าเดิม
    หน้าจอก็ดีกว่าเยอะเลยครับ แถมตอนนี้รองรับหลายภาษา รวมถึงภาษาไทย ด้วยครับ

    ดูรายละเอียดและ workshop เพิ่มเติมมเกี่ยวกับ App inventor ได้ที่ http://ai2startup.blogspot.com/

Leave a Reply

To Top