สร้าง app บนมือถือด้วย app inventor 2

สร้าง app บนมือถือด้วย app inventor 2

เมื่อพูดถึงมือถือ หลายคนคงจะใช้เป็นส่วนหนึ่งของชิวิตไปแล้ว ถือได้ว่าเป็นอวัยวะส่วนหนึ่งของร่างกายไปแล้ว ทำให้ค่ายมือถือต่าง ๆ พัฒนาโปรแกรมที่ใช้งานบนมือถือออกมามากมาย เพื่อตอบสนองกับกิจวัตรประจำวันของผู้ใช้ แต่โปรแกรมที่ดีก็มักจะมาพร้อมกับค่าใช้จ่ายที่ต้องแลก หากผู้ใช้จะพัฒนาโปรแกรมขึ้นใช้งานเอง ก็จำกัดด้วยเครื่องมือในการพัฒนาและต้องอาศัยความสามารถในการเขียนโปรแกรม หลายคนถึงกับบอกว่า แค่คิดก็ผิดแล้ว จริงครับ แค่คิดก็ผิดแล้ว ผิดอย่างไร ผิดที่ไม่รู้ว่าตอนนี้มีเครื่องมือที่สามารถสร้างโปรแกรมบนมือถือได้ง่ายๆ แถบจะไม่ต้องคิดอะไร ก็สามารถสร้างโปรแกรมบนมือถือได้แล้ว

โปรแกรมที่สุดวิเศษนี้ ชื่อว่า MIT App Inventor 2  ซึ่งเป็นนวัตกรรมใหม่ที่มาปฏิวัติวงการเขียนโปรแกรมบนมือถือที่มีการเขียนคำสั่งซับซ้อนมากมายหลายพันบรรทัด ให้กลายเป็นการเขียนโปรแกรมแบบกล่องคำสั่ง ที่ลากแล้ววางต่อกันเป็นโปรแกรมด้วยภาพกราฟิกที่ง่ายและสะดวกต่อการใช้งาน สามารถสร้างโปรแกรมที่ซับซ้อนด้วยเวลาไม่ถึงชั่วโมง ที่สำคัญ เป็นโปรแกรมที่ให้ใช้ได้ฟรี  ไม่มีค่าใช้จ่าย เหมาะกับนักพัฒนาโปรแกรมมือใหม่ หรือผู้ที่ต้องการเรียนรู้การพัฒนาโปรแกรมบนมือถือ

App Inventor 2 เป็นการพัฒนาโปรแกรม ที่ไม่ต้องติดตั้งตัวพัฒนาบนเครื่องคอมพิวเตอร์ แต่เป็นการพัฒนาบนเว็บไซต์ของ MIT ทำให้สามารถพัฒนาโปรแกรมที่ไหนก็ได้ ที่สามารถเชื่อมต่ออินเทอร์เน็ตได้ ทำให้มีความสะดวกแก่ผู้พัฒนาโปรแกรมเป็นอย่างมาก และการทดสอบโปรแกรมสามารถโหลดโปรแกรมลงในโทรศัพท์ได้อย่างรวดเร็ว ทำให้ลดความซ้ำซ้อนในการสร้างไฟล์โปรแกรม แต่ยังมีข้อจำกัดของ App Inventor 2 คือ พัฒนาโปรแกรมสำหรับระบบปฏิบัติการแอนดรอยด์เท่านั้น 

 

เตรียมตัวก่อนพัฒนา application

การพัฒนา application ด้วย app inventor 2 นั้น สามารถพัฒนาได้ง่าย โดยใช้เว็บเบาร์เซอร์ ทั่วไปที่ติดตั้งอยู่ในคอมพิวเตอร์ แต่การทดสอบการทำงานระหว่างการพัฒนาโปรแกรมนั้น จำเป็นต้องติดตั้งและกำหนดค่าเบื้องต้นอีกเล็กน้อย 

 

ทางเลือกสำหรับการทดสอบ application ที่พัฒนาด้วย app inventor 2

1. กรณีทดสอบด้วยมือถือระบบ Android และเชื่อมต่ออินเทอร์เน็ต ด้วย wireless  สามารถพัฒนา application โดยที่ไม่ต้องติดตั้งโปรแกรมเพิ่มเติมบนคอมพิวเตอร์  แต่จะต้องติดตั้ง application สำหรับเรียกใช้งาน app inventor 2 บนมือถือ ทางเลือกนี้ เป็นทางเลือกที่ดีที่สุดสำหรับการพัฒนา application ด้วย app inventor (ข้ามไปอ่าน ทางเลือกที่ 1)

 

2.  กรณีที่ไม่มีมือถือระบบปฏิบัติการ Android จำเป็นต้องติดตั้งจำลองการทำงาน Android emulator บนคอมพิวเตอร์ (ข้ามไปอ่าน ทางเลือกที่ 2)

 

3.  กรณีที่ไม่มีการเชื่อมต่ออินเทอร์เน็ตแบบไร้สาย จำเป็นต้องติดตั้งโปรแกรมลงบนคอมพิวเตอร์เพื่อให้สามารถเชื่อมต่ออุปกรณ์ที่มือระบบปฏิบัติการ Android ผ่านช่อง USB ได้ ซึ่งเป็นวิธีการที่ไม่ค่อยจะมีประสิทธิภาพในการพัฒนา application มากนัก ขอให้เป็นทางเลือกสุดท้ายนะครับ 

(ข้ามไปอ่าน ทางเลือกที่ 3)

 

ทางเลือกที่ 1 เชื่อมต่ออุปกรณ์ด้วยระบบเครือข่ายแบบไร้สาย

สามารถพัฒนา application โดยที่ไม่ต้องติดตั้งโปรแกรมเพิ่มเติมบนคอมพิวเตอร์  แต่จะต้องติดตั้ง application สำหรับเรียกใช้งาน app inventor 2 บนมือถือ โดยมีขั้นตอน ดังนี้

ขั้นที่ 1 Download และติดตั้ง MIT AI2 Companion App บนมือถือ

สามารถเข้าไป download ได้ผ่าน Play Store หรือจะอ่านจาก QR code scanner ด้านล่างนี้ได้เลยครับ  

https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3

 

หรือจะ download โดยตรงได้ที่ http://appinv.us/companion

หลังจาก download และดำเนินการติดตั้งลงบนมือถือแล้ว จะสามารถเรียกใช้งานโปรแกรม ได้ตลอดการพัฒนาโปรแกรม กรณีที่ download ไฟล์สำหรับติดตั้งโดยตรง จะต้องไปกำหนดค่าในมือถือ device setting ให้สามารถติดตั้งโปรแกรมแบบ "unknown sources"  ส่วนมากจะกำหนดค่าที่ "Settings > Security" หรือ "Settings > Security & Screen Lock"  หลังจากนั้นเลือก "Unknown Sources"  จะทำให้สามารถติดตั้งโปรแกรมจากการ download โดยตรง

 

ขั้นที่ 2 เชื่อมต่อคอมพิวเตอร์และมือถือ ด้วยเครือข่ายไร้สายเดียวกัน

การพัฒนา app inventor จะแสดงผลอัตโนมัติในขณะที่พัฒนา application เมื่อมือถือและคอมพิวเตอร์เชื่อมต่ออินเทอร์เน็ตด้วยเครือข่ายไร้สายตัวเดียวกัน

 

ขั้นที่ 3 พัฒนาโปรแกรมด้วย app inventor 2 แล้วเชื่อมต่อกับอุปกรณ์

เมื่อพัฒนา application แล้ว ต้องการจะทดสอบการทำงาน ให้เลือก "Connect" และ "AI Companion" จากแถบเมนูด้านบน

 

หลังจากนั้น app inventor จะสร้าง QR code สำหรับ download ตัว application แสดงที่หน้าจอคอมพิวเตอร์ ให้เปิด application MIT App Companion ที่มือถือ และเลือกปุ่ม “Scan QR code”

หลังจากนั้น application ที่เราพัฒนาจะถูก download และติดตั้งบนมือถือ หรือถ้าไม่สามารถอ่าน QR code ได้ สามารถกรอกรหัสเพื่อ download ตัวโปรแกรมได้เช่นเดียวกัน

 

ทางเลือกที่ 2 เชื่อมต่ออุปกรณ์ด้วยระบบเครือข่ายแบบไร้สาย

ในการพัฒนา application ถ้าหากเราไม่มีอุปกรณ์ที่เป็นระบบปฏิบัติการ android เราสามารถติดตั้งโปรแกรมสำหรับจำลอง หรือ Android emulator บนคอมพิวเตอร์ เพื่อทำหน้าที่เป็นตัวแสดงผลการทำงาน

ขั้นที่ 1 การติดตั้ง App Inventor 2 Setup บน Windows

1. Download ตัวติดตั้งโปรแกรม http://appinv.us/aisetup_windows

2. เปิดไฟล์ MIT_Appinventor_Tools_2.3.0 (~80 MB) ที่ได้ download มาแล้ว

3. ดำเนินการติดตั้งตามขั้นตอนของการติดตั้งโปรแกรม

 

ขั้นที่ 2 เปิดโปรแกรม aiStarter

เมื่อติดตั้งโปรแกรม App Inventor 2 สำเร็จแล้ว ให้เปิดโปรแกรม aiStarter ซึ่งเป็นโปรแกรมที่ช่วยให้การเชื่อมต่อระหว่างตัว app inventor 2 กับ emulator

สามารถทำงานได้อย่างมีประสิทธิภาพ

 

เมื่อเปิดโปรแกรม aiStarter ควรจะได้หน้าต่างโปรแกรม ดังนี้

 

ขั้นที่ 3 พัฒนาโปรแกรมด้วย app inventor 2 แล้วเชื่อมต่อกับอุปกรณ์

เมื่อพัฒนา application แล้ว ต้องการจะทดสอบการทำงาน ให้เลือก "Connect" และ " emulator " จากแถบเมนูด้านบน

 

ในการเชื่อมต่อกับ emulator จะใช้เวลาสักพัก เพื่อสร้างตัวจำลองการทำงาน

เมื่อสร้างตัวจำลองการทำงานเสร็จแล้ว จะได้หน้าโปรแกรมจำลองการทำงานมือถือ และสามารถใช้งานทดสอบ application ที่พัฒนาขึ้นมาได้

 

ทางเลือกที่ 3 เชื่อมต่ออุปกรณ์ผ่านสายสัญญาณ USB

สำหรับการทดสอบโปรแกรมที่พัฒนาขึ้น ด้วยการเชื่อมต่อมด้วยสายสัญญาณ USB นั้น ใช้สำหรับการพัฒนาโปรแกรมที่ไม่สามารถเชื่อมต่อด้วยเครือข่ายไร้สายได้ 

ขั้นที่ 1 การติดตั้ง App Inventor 2 Setup บน Windows

1. Download ตัวติดตั้งโปรแกรม http://appinv.us/aisetup_windows

2. เปิดไฟล์ MIT_Appinventor_Tools_2.3.0 (~80 MB) ที่ได้ download มาแล้ว

3. ดำเนินการติดตั้งตามขั้นตอนของการติดตั้งโปรแกรม

 

ขั้นที่ 2 Download และติดตั้ง MIT AI2 Companion App บนมือถือ

สามารถเข้าไป download ได้ผ่าน Play Store หรือจะอ่านจาก QR code scanner ด้านล่างนี้ได้เลยครับ  

https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3

 

หรือจะ download โดยตรงได้ที่ http://appinv.us/companion

หลังจาก download และดำเนินการติดตั้งลงบนมือถือแล้ว จะสามารถเรียกใช้งานโปรแกรม ได้ตลอดการพัฒนาโปรแกรม กรณีที่ download ไฟล์สำหรับติดตั้งโดยตรง จะต้องไปกำหนดค่าในมือถือ device setting ให้สามารถติดตั้งโปรแกรมแบบ "unknown sources"  ส่วนมากจะกำหนดค่าที่ "Settings > Security" หรือ "Settings > Security & Screen Lock"  หลังจากนั้นเลือก "Unknown Sources"  จะทำให้สามารถติดตั้งโปรแกรมจากการ download โดยตรง

 

ขั้นที่ 3 เปิดโปรแกรม aiStarter

เมื่อติดตั้งโปรแกรม App Inventor 2 สำเร็จแล้ว ให้เปิดโปรแกรม aiStarter ซึ่งเป็นโปรแกรมที่ช่วยให้การเชื่อมต่อระหว่างตัว app inventor 2 กับ emulator

สามารถทำงานได้อย่างมีประสิทธิภาพ

 

เมื่อเปิดโปรแกรม aiStarter ควรจะได้หน้าต่างโปรแกรม ดังนี้

 

 

ขั้นที่ 4 กำหนดค่าให้สามารถเชื่อมต่อมือถือผ่านสาย USB 

ในการนำโปรแกรมไปทดสอบบนมือถือ จำเป็นต้องส่งผ่านสายสัญญาณ USB จึงต้องให้มือถือและคอมพิวเตอร์เชื่อมต่อกันด้วย USB ให้ได้ก่อน โดยปกติจะกำหนดค่าที่ Settings > Developer Options แล้วเปิดใช้งาน "USB Debugging"

แต่สำหรับมือถือรุ่นใหม่ๆ ส่วนของ Developer จะถูกซ่อนเอาไว้ สามารถเปิดใช้งานได้โดยเข้าไปที่ Settings > About phone -> Software information แล้วคลิกที่ Build number จำนวน 7 ครั้ง ระบบจะเปิดโหมดสำหรับการพัฒนา Developer แล้วให้ไปเปิดใช้งาน "USB Debugging" ได้ตามปกติ

ทดสอบการเชื่อมต่อโดย เข้าไปยังหน้าเว็บ http://appinventor.mit.edu/test/  

 

ขั้นที่ 5 พัฒนาโปรแกรมด้วย app inventor 2 แล้วเชื่อมต่อกับอุปกรณ์

เมื่อพัฒนา application แล้ว ต้องการจะทดสอบการทำงาน ให้เลือก "Connect" และ "USB" จากแถบเมนูด้านบน

 

บทส่งท้าย

จากที่ได้กล่าวมาทั้งหมดข้างต้น เป็นการเตรียมตัวเบื้องต้นสำหรับการพัฒนา application ด้วย  App inventor 2 ซึ่งมีทางเลือกในการทดสอบโปรแกรม 3 ทางเลือก ซึ่งสำหรับผมชอบใช้ทางเลือกที่ 1 เพราะมีความน่าเชื่อถือและความผิดพลาดน้อยที่สุด สำหรับการพัฒนา application ผมจะได้กล่าวถึงในบทความต่อไปนะครับ

 

 

 

 

Add comment

Security code
Refresh