ติดตั้ง Appinventorv
- 1. เริ่มต้ นพัฒนาแอพพลิเคชั่นบนโทรศัพท์ เคลือนที่ และ แท็บเล็ตบนระบบปฏิบัติการแอนดรอย์ ่ ด้ วย AppInventor ในปัจจุบนโทรศัพท์เคลื่อนที่และแท็บเลตระบบปฏิบติกรแอนดรอย์น้ นมีจานวนมาก หลายหลาย ั ั ั ํ รุ่ น หลายยีหอ ให้เลือกใช้งาน และคาดว่าในอนาคตจะมีการใช้งานกันมากขึ้นเรื่ อยๆ ซึ่ งเป็ นผลให้นกพัฒนา ่ ้ ั แอพพลิเคชันจําเป็ นต้องพัฒนาแอพพลิเคชันเพื่อให้สามารถตอบสนองความต้องการของผูใช้ได้ แต่ ้ ่ ่ เนื่องจากแอพพลิเคชันบนระบบปฏิบติการแอนดรอย์น้ นถูกพัฒนาขึ้นด้วยโปรแกรมภาษาจาวา ซึ่ งเป็ นเรื่ อง ั ั ่ ยากสําหรับนักพัฒนาแอพพลิเคชันมือใหม่ ที่อยากจะเรี ยนรู้เกี่ยวกับเรื่ องของการเขียนโปรแกรม App ่ Inventor เป็ นเครื่ องมือตัวหนึ่งที่ใช้ในการพัฒนาแอพพลิเคชันบนมือถือระบบปฏิบติการแอนดรอย์ ซึ่ งถูก ั ่ ออกแบบและพัฒนาโดยเริ่ มต้นจากทีมงานของกูกเกิล และปัจจุบนอยูในการควบคุมดูแลของสถาบัน MIT ั ่ (Massachusetts Institute of Technology) AppInventor ออกแบบมาเพื่อให้ง่ายต่อการใช้งาน โดยอาศัย หลักการทํางานผ่านระบบเครื อข่ายอินเตอร์ เนตเป็ นหลัก ซึ่ งใช้เว็บบราวเซอร์ ในการทํางานร่ วมกับเว็บเซิ ฟ เวอร์ แอพพลิเคชันที่ถูกพัฒนาจะถูกจัดเก็บไว้ในเครื่ องคอมพิวเตอร์เซิฟเวอร์ ซึ่งเวลาที่เราเรี ยกใช้งาน ่ จะต้องเข้าไปที่เว็บไซด์ appinventor.mit.edu/ เพื่อที่จะนําแอพพลิเคชันที่สร้างขึ้นมาแก้ไข และพัฒนาต่อ ่ ได้ ถือเป็ นอีกหนึ่งแนวทางในการพัฒนาแอพพลิเคชันบนมือถือรู ปแบบใหม่ ที่น่าสนใจ และใช้เป็ นพื้นฐาน ่ ในการพัฒนาแอพพลิเคชันขั้นสู งต่อไป ่ // diagram thwatchai_tom@hotmail.com Page 1
- 2. การตั้งค่ าและการติดตั้งโปรแกรมเพือใช้ งาน AppInventor ่ ก่อนอื่นให้เราเข้าไปที่ http://www.appinventor.mit.edu/ เป็ นเว็บไซด์หลักในการเข้าใช้งานโปรแกรม และดาวน์โหลดโปรแกรมสําหรับติดตั้งลงบนคอมพิวเตอร์ // website เราสามารถเข้าไปดาวน์โหลดไฟล์โปรแกรมได้ฟรี โดยคลิกไปที่ Explore http://explore.appinventor.mit.edu/learn // website_explor หลังจากนั้นคลิกเลือกไปที่แถบเมนู Learn แล้วคลิกเลือกที่หวข้อ Setup ั //setup thwatchai_tom@hotmail.com Page 2
- 3. หน้ าต่ างนีจะกล่ าวถึงกระบวนการ วิธีการติดตั้งโปรแกรม และสิ่ งทีต้องเตรียมก่อนการติดตั้งโปรแกรม ้ ่ // setup_1 คอมพิวเตอร์ และระบบปฏิบัติการทีใช้ ่ Macintosh (with Intel processor): Mac OS X 10.5, 10.6 Windows: Windows XP, Windows Vista, Windows 7 GNU/Linux: Ubuntu 8+, Debian 5+ โปรแกรมประเภทเว็บบราวเซอร์ ต่างๆ Mozilla Firefox 3.6 หรื อ สู งกว่า Apple Safari 5.0 หรื อ สู งกว่า Google Chrome 4.0 หรื อ สู งกว่า Microsoft Internet Explorer 7 หรื อ สู งกว่า *****แนะนําให้ผใช้ดาวน์โหลดโปรแกรมเว็บบราวเซอร์ที่เวอร์ชนล่าสุ ดในปัจจุบน ู้ ั่ ั หลังจากได้เตรี ยมการเสร็ จเรี ยบร้อยแล้ว ขั้นตอนต่อไปเป็ นขั้นตอนการติดตั้งโปรแกรม AppInventor ที่ บริ เวณตําแหน่งด้านล่างของเพจ http://explore.appinventor.mit.edu/content/setup จะบอกถึงขั้นตอนการ ติดตั้งโปรแกรม AppInventor ที่สามารถทํางานได้บนระบบปฏิบติการต่างๆ ไมว่าจะเป็ น Mac OS, Linux ั และ Windows โดยในที่น้ ีผมจะขออธิ บายเฉพาะการติดตั้งโปรแกรมบนระบบปฏิบติการ Windows โดย ั คลิกเลือกไปที่ Instructions for Windows thwatchai_tom@hotmail.com Page 3
- 4. //Install for windows http://explore.appinventor.mit.edu/content/windows หน้าต่างแสดงขั้นตอนการติดตั้งโปรแกรม AppInventor ที่ใช้งานบนระบบปฏิบติการ Windows ั //Installing_Windows คลิกเพื่อดาวน์โหลดโปรแกรมเพื่อใช้ในการติดตั้ง หลังจากดาวน์โหลดเสร็ จเรี ยบร้อย จะได้ไฟล์ชื่อว่า AppInventor_Setup_Installer_v_1_2.exe //downlaod_appinventor โปรแกรมที่ได้จากการดาวน์โหลด หลังจากนั้นดับเบิ้ลคลิกเพื่อทําการติดตั้งโปรแกรม thwatchai_tom@hotmail.com Page 4
- 5. // setup (1) คลิ๊ก Next // setup (2) คลิก I Agree เพื่อยอมรับข้อตกลงในการเข้าใช้งานโปรแกรม AppInventor //setup(3) เลือกตําแหน่งสําหรับติดตั้งโปรแกรม แนะนําให้เป็ นตําแหน่งปกติที่โปรแกรมตั้งไว้ให้ // setup(4) คลิกที่ปุ่ม Install เพื่อทําการติดตั้งโปรแกรม thwatchai_tom@hotmail.com Page 5
- 6. // setup (5) ่ ั การติดตั้งโปแกรม AppInventor อาจจะต้องใช้เวลาระยะหนึ่ง ขึ้นอยูกบความแรงของเครื่ องคอมพิวเตอร์ ด้วย // setup(6) หลังจากโปรแกรมทําการติดตั้งเสร็ จเรี ยบร้อยแล้วจะปรากฏหน้าต่างดังภาพ ให้คลิกที่ Finish เพื่อเสร็ จสิ้ น กระบวนการติดตั้งโปรแกรม // seupp(7) การติดตั้งโปรแกรม AppInventor นั้นหลังจากติดตั้งเสร็ จ จะมีไดรเวอร์ของโทรศัพท์มือถือบางรุ่ นติดตั้งบน คอมพิวเตอร์ ให้ดวย ้ • • • • • T-Mobile G1* / ADP1 T-Mobile myTouch 3G* / Google Ion / ADP2 Verizon Droid (not Droid X) Nexus One Nexus S สําหรับผูที่ใช้มือถือแอนดรอยด์ สามารถดาวน์โหลดไดรเวอร์ได้ฟรี ที่ ้ http://developer.android.com/sdk/oem-usb.html thwatchai_tom@hotmail.com Page 6
- 7. การตั้งค่ าโทรศัพท์ มือถือเพือให้ สามารถใช้ งานร่ วมกับ App Inventor ได้ ่ ก่อนอื่นต้องทําการติดตั้งไดรเวอร์ ของโทรศัพท์ระบบปฏิบติการแอนดรอยด์ ให้เรี ยบร้อยก่อน ั เพื่อให้โทรศัพท์สามารถทํางานร่ วมกับคอมพิวเตอร์ ได้ โดยวิธีการติดตั้งให้ดูตามระเอียดที่ระบุในคู่มือการ ใช้งานโทรศัพท์มือถือที่มาพร้อมกับโทรศัพท์มือถือของแต่ละรุ่ น หลังจากติดตั้งไดรเวอร์ เสร็ จเรี ยบร้อยให้ ทําตามขั้นตอนต่อไปนี้คือ 1. เปิ ดโทรศัพท์ข้ ึนมา 2. เลือกแทบเมนูการตั้งค่า (Setting) แล้วเลือกไปที่แอพพลิเคชัน (Application) ่ 3. คลิกเลือก Unknown sources setting ให้เป็ นเครื่ องหมายถูก ซึ่ งหมายถึงเราสามารถติดตั้ง แอพพลิเคชันจากแหล่งที่มาอื่นๆได้ โดยไม่จาเป็ นต้องติดตั้งผ่าน Google Play ํ ่ // setting android non market app 4. คลิกเลือกหัวข้อสําหรับนักพัฒนา (Development) 5. คลิกเครื่ องหมายถูกที่หวข้อ USB debugging และ Stay awake ซึ่ งเราจะใช้เป็ นช่องทางในการ ั ทํางานร่ วมกันระหว่างมือถื คอมพิวเตอร์ และ AppInventor // USB Debugging ถ้าโทรศัพท์ของเรามีการตั้งล็อคหน้าจอไว้ ให้เราทําการปลดล็อคหน้าจอก่อนเพื่อที่จะเป็ นการเตรี ยม ความพร้อมในการทํางานของโปรแกรม หลักจากที่เราทําการเสี ยบสาย USB ระหว่างมือถือกับคอมพิวเตอร์ แล้ว จะมีสถานะแสดงการทํางานปรากฏขึ้น บนหน้าจอโทรศัพท์ จะมองเห็นเป็ น 2 รายการ คือ ่ ั • USB Connected หมายถึง โทรศัพท์ของเราได้ทาการเชื่ อมต่ออยูกบคอมพิวเตอร์ ํ • USB Debugging Connected ทําให้ AppInventor สามารถจําลองการทํางานบนโทรศัพท์มือถือได้ เช่นเดียวกันกับการทํางานบนคอมพิวเตอร์ และเป็ นช่องทางการดาวน์โหลดและติดตั้งโปรแกรมด้วย thwatchai_tom@hotmail.com Page 7
- 8. การสมัครเข้ าใช้ งาน AppInventor หลังจากที่เราได้ทาการติดตั้งโปรแกรม และตั้งค่าการใช้งานร่ วมกันระหว่างโทรศัพท์มือถือแอน ํ ดรอย์ร่วมกับคอมพิวเตอร์ เรี ยบร้อยแล้ว ขั้นตอนต่อไปเป็ นขั้นตอนในการพัฒนาแอพพลิเคชัน ่ ก่อนอื่นเปิ ดโปรแกรมเว็บบราวเซอร์ และไปที่เว็บไซด์ http://www.appinventor.mit.edu/ //SiteAppinventor ่ คลิกเลือก Invent Create Mobile Apps ที่อยูบริ เวณด้านบนขวามือ //Invent จะปรากฏหน้าต่าง LOGIN เพื่อเข้าสู่ ระบบ thwatchai_tom@hotmail.com Page 8
- 9. // login โดยก่อนที่เราจะทําการ Login เพื่อเข้าไปใช้งานได้น้ นเราจําเป็ นต้องมี Google Account เพื่อใช้ในการ Login ั เข้าสู่ ระบบเสี ยก่อน ถ้ายังไม่มีให้เข้าไปลงทะเบียน Google Account เสี ยก่อน โดยคลิกเลือกที่หวข้อสมัครใช้ ั งาน //signup กรอกรายละเอียดต่างๆให้เรี ยบร้อย *** อีเมลล์ที่ใช้สมัครเป็ นเพียงอีเมลล์ที่ใช้ในการยืนยันตัวตนเท่านั้น ไม่ใช่การสมัครเพื่อขอใช้งานอีเมลล์ ่ ่ เพราะฉะนั้นเราสามารลใช้อีเมลล์ที่เรามีอยูแล้วไม่วาจะเป็ น hotmail gmail yahoo mail อื่นๆก็ได้ แต่ จําเป็ นต้องกรอกรายละเอียดให้ถูกต้อง เพราะหลังจากที่กรอกรายละเอียดเรี ยบร้อยแล้ว ทางกูกเกิลจะให้เรา ทําการ Re Activate โดยจะส่ งลิงค์ไปยังอีเมลล์ที่เราได้สมัครเอาไว้ แล้วให้เราทําการยืนยันอีกครั้งหนึ่ง จึง จะสามารถใช้อีเมลล์น้ ีเพื่อเป็ น Google Account ในการเข้าสู่ ระบบ เพื่อใช้งาน AppInventor ต่อไปได้ thwatchai_tom@hotmail.com //google accounts Page 9
- 10. หลังจากที่เราได้สมัคร google accounts เรี ยบร้อยแล้ว ให้เราทําการลงชื่อเพื่อเข้าใช้งาน AppInventor โดย ่ กรอกชื่อที่อยูอีเมลล์และรหัสผ่านที่เราได้ต้งเอาไว้ ั // loginsite หลังจากที่เราลงชื่อเข้าใช้งานเรี ยบร้อยแล้ว จะปรากฏหน้าต่างดังภาพ โดยปกติหน้าต่างนี้จะแสดงรายชื่อ ของโปรเจ็คที่เราได้สร้างเอาไว้ // myproject ทําการทดสอบการทํางานของ AppInventor เริ่ มต้นด้วยการสร้าง project ใหม่ โดยคลิกที่ New หลังจากนั้น ทําการตั้งชื่อ โปรเจ็คที่ช่อง Project Name เมื่อตั้งชื่อเรี ยบร้อยแล้วคลิกที่ปุ่ม OK เพื่อสร้างโปรเจ็คไฟล์ใหม่ ขึ้นมา // new app ่ จะปรากฏหน้าตาโปรแกรมดังภาพ ซึ่ งต่อไปเราจะเรี ยกหน้าต่างนี้วามุมมองการออกแบบ (Design) เป็ น หน้าต่างหลักเพื่อใช้สาหรับการออกแบบหน้าตาแอพพลิเคชัน การตั้งค่าต่างๆ รวมถึงการดาวน์โหลด ํ ่ แอพพลิเคชันลงบนโทรศัพท์มือถืออีกด้วย ่ thwatchai_tom@hotmail.com Page 10
- 11. // design *********เพิมเติมเกี่ยวกับการใช้งานเว็บไซด์ http://www.appinventor.mit.edu/ ่ ที่ตําแหน่งหัวข้ อ Teach เมื่อคลิกเข้ าไปข้ างในจะพบว่าจะมีเมนูยอยๆเข้ าไปอีกหลายหัวข้ อ โดยส่วนที่สาคัญจะอยู่ ที่แถบ ่ ํ เมนู Resources http://teach.appinventor.mit.edu/resources ซึงรวบรวมแหล่งข้ อมูล ไม่วาจะเป็ นหนังสือ ่ ่ ไฟล์วีดีโอสอนhttp://www.youtube.com/playlist?p=PL2D27126F35E50A1B ที่เป็ นประโยชน์ เหมาะสําหรับผู้ เริ่ มต้ นใช้ งาน // Teach_resources 2. ที่หวข้ อ Explore จะพบรายละเอียดต่างๆที่เกี่ยวข้ อกับ AppInventor จะมีแท็บเมนูให้ ศกษากันอยูหลายหัวข้ อแต่ ั ึ ่ หลักๆจะอยูที่ แท็บเมนู ่ Learn http://explore.appinventor.mit.edu/learn โดยจะรวบรวมข้ อมูลการใช้ งาน ทังหมดของ app inventor ไว้ ทนี่ ้ ี่ thwatchai_tom@hotmail.com Page 11
- 12. //Learn ขั้นตอนในการติดตั้งโปรแกรม และเตรี ยมความพร้อมก่อนการใช้งาน AppInventor http://beta.appinventor.mit.edu/learn/setup/index.html // learn_setup เรี ยนรู ้การใช้งาน AppInventor ในการพัฒนาแอพพลิเคชันรู ปแบบต่าง โดยจะมีการแบ่งเนื้อหาของการ ่ เรี ยนรู ้ต้งแต่ข้นพื้นฐานจนถึงขึ้นสู ง มีไฟล์เอกสาร ตัวอย่างซอร์สโค้ด ให้ดาวน์โหลด เหมาะสําหรับผูที่ ั ั ้ ต้องการเรี ยนรู ้ดวยตัวเองเป็ นอย่างมาก ้ thwatchai_tom@hotmail.com http://beta.appinventor.mit.edu/learn/tutorials/index.html Page 12
- 13. // learn_tutorials ่ การใช้งานเครื่ องมือต่างๆที่มีอยูใน AppInventor คําสั่งภาษาจาวาที่ใช้พฒนาแอพพลิเคชันบนมือถือแอน ั ่ ดรอย์ http://beta.appinventor.mit.edu/learn/reference/index.html // learn_reference *** สามารถศึกษารายละเอียดเพิ่มเติมของการติดตั้ง และใช้งานโปรแกรม AppInventor ได้จาก นิตยสาร PrototypeElectronic ฉบับที่22 http://www.tpemagazine.com และบทความเพิมเติม ่ http://www.tpemagazine.com/2009/download/issue22/AppInventor_110816.zip thwatchai_tom@hotmail.com Page 13
- 14. ขั้นตอนการติดตั้ง Java ซึ่ งเราสามารถดาวน์โหลดเวอร์ ชนล่าสุ ดได้จากเว็บไซด์ www.java.com หลังจากที่เข้าสู่ เว็บไซด์จะปรากฏ ั่ หน้าหนักของเว็บไซด์ดงภาพ ให้เราคลิกเลือกที่ Free Java Download เพื่อทําการดาวน์โหลดและติดตั้ง Java ั ลงในเครื่ องคอมพิวเตอร์ ของเรา //Javadownload คลิกเพื่อยอมรับข้อตกลง ดาวน์โหลด และติดตั้งโปรแกรม //java หลังจากดาวน์โหลดโปรแกรมเสร็ จ ระบบจะทําการติดตั้งโปรแกรมให้อตโนมัติ ั เมื่อโปรแกรมถูกติดตั้งเรี ยบร้อยแล้ว ก็คลิกที่ปุ่ม Close เพื่อปิ ดหน้าต่างนี้ได้เลย thwatchai_tom@hotmail.com Page 14