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

  1. Morph Post on August 5, 2010 at 10:46 am

    #21333

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

    • tonhor

      tonhor Post on August 5, 2010 at 10:57 am

      #21334

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

  2. tonhor

    tonhor Post on August 5, 2010 at 10:59 am

    #21335

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

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

  3. plazt

    plazt Post on August 5, 2010 at 1:49 pm

    #21338

    *()*

  4. keng2000 Post on August 5, 2010 at 2:41 pm

    #21339

    รอ grant access ต่อไป

  5. euclid

    euclid Post on August 5, 2010 at 3:09 pm

    #21341

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

  6. aumpradya Post on August 5, 2010 at 3:34 pm

    #21342

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

  7. dahoba

    dahoba Post on August 5, 2010 at 4:11 pm

    #21352

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

    • sensor

      sensor Post on August 5, 2010 at 8:10 pm

      #21378

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

    • meen_onboard

      meen_onboard Post on August 6, 2010 at 7:16 am

      #21499

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

  8. yeeha

    yeeha Post on August 5, 2010 at 6:18 pm

    #21367

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

    • sensor

      sensor Post on August 5, 2010 at 8:11 pm

      #21379

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

  9. stand Post on August 5, 2010 at 10:39 pm

    #21396

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

  10. moo0417

    moo0417 Post on August 6, 2010 at 12:53 am

    #21413

    น่าสนใจครับ

  11. 75863263 Post on August 6, 2010 at 1:34 am

    #21417

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

  12. NuiNui

    NuiNui Post on August 6, 2010 at 2:46 am

    #21429

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

  13. madoatz

    madoatz Post on August 6, 2010 at 4:47 am

    #21450

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

  14. Tarlabgab

    Tarlabgab Post on August 6, 2010 at 6:32 am

    #21479

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

  15. neonicus Post on August 6, 2010 at 7:51 am

    #21505

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

    • sensor

      sensor Post on August 7, 2010 at 7:43 am

      #21694

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

  16. mrboo Post on August 7, 2010 at 1:34 pm

    #21708

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

  17. krapalm

    krapalm Post on August 8, 2010 at 2:10 am

    #21838

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

  18. space2001

    space2001 Post on August 8, 2010 at 8:12 am

    #21892

    น่าสนใจนะ

  19. charnnarong_d Post on November 6, 2010 at 8:24 pm

    #47917

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

  20. natiixz Post on November 14, 2010 at 10:00 am

    #50186

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

    • sensor

      sensor Post on November 15, 2010 at 8:21 pm

      #50452

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

  21. tiawjung Post on February 1, 2011 at 3:45 am

    #76762

    ผมใช้ 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 Post on August 11, 2011 at 10:27 pm

      #217470

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

  22. muew1989

    muew1989 Post on June 17, 2011 at 8:18 pm

    #176892

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

    • sensor

      sensor Post on August 11, 2011 at 10:26 pm

      #217469

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

  23. hengngng Post on January 17, 2012 at 6:08 pm

    #334835

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

  24. tomm4974 Post on July 28, 2012 at 6:32 pm

    #508527

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

    http://appinventor.mit.edu/

  25. allzero

    allzero Post on October 4, 2012 at 5:51 pm

    #562006

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

    • Akram Aleeming

      Akram Aleeming Post on May 15, 2015 at 3:15 am

      #913231

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

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

  26. kamonchat Post on April 8, 2015 at 4:46 pm

    #907711

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

    • Akram Aleeming

      Akram Aleeming Post on May 15, 2015 at 3:12 am

      #913230

      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 Post on May 15, 2015 at 3:17 am

    #913232

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

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

Leave a Reply

To Top