สิ่งที่ต้องรู้การเขียนแอพด้วย App inventor สำหรับมือใหม่

สิ่งที่ต้องรู้การเขียนแอพด้วย  App inventor สำหรับมือใหม่

1.  ทำงานบนเว็บ โดยต้องใช้อีเมล์ของ GMAIL ล๊อกอิน
เข้าทำงานได้ที่ http://ai2.appinventor.mit.edu

2. การสร้างแอพ มีอยู่สองโหมดที่ต้องสลับทำงานคือ โหมด Design สำหรับการออกแบบและโหมด Block สำหรับการต่อชุดคำสั่งให้ทำงานตามต้องการ

3.วัตถุที่ลากมาวางบนหน้า Design จะเรียกว่าคอมโพแนน (Component) โดยแตละคอมโพแนนจะประกอบด้วย Properties (คุณสมบัติ) และ Event (เหตุการณ์) และจะมีโคโพแนนบางตัวที่ไม่แสดงบนหน้าจอแต่จะทำงานด้านหลัง เช่น เสียง  , การติดต่อกับอุปกรณ์มือถือ  , วิดีโอ , sensor เป็นต้น

4. Properties (คุณสมบัติ) คือการบอกคุณสมบัติของคอโพแนนแต่ละตัวว่าเป็นยังไร เช่น ปุ่ม จะมีลักษระสีแดง ข้อความเขียนว่า ตกลง สีตัวอักษรสีขนาว ขนาดตัวอักษร 18 px เป็นตัวสามารถตั้งค่าในโหมด Design  และโหมด  Block

5. Event  (เหตุการณ์) คือการสั่งให้คอมโพแนนทำงานตามที่เรากำหนดในชุดคำสั่ง เช่น เมื่อกดปุ่ม แล้วให้เปลี่ยนสีพื้นหลังของแอพ ซึ่งจะทำงานในส่วนของโหมด block

6.การเซพงานที่เรากำลังทำอยู่จะเซฟอัตโนมัติ แล้วสามารถเปิดได้ทุกที่ทีมีเน็ตผ่านเว็บเบราเซอร์ โดยใช้อีเมล์ gmail ของเรา  Log in

7.  การทดสอบแอพที่เราสร้าง สามารถทำได้ สาม วิธี

•  ทดสอบผ่าน emulator หรือตัวจำลอง ที่ระบบให้มาเรียบร้อยต้องติดตั้งโปรแกรมเพิ่ม
• ทดสอบผ่านมือถือแอนดรอย์​ โดยที่เราต้องโหลดแอพ  mit ai2 Componion  มาสแกนและต้องใช้ wifi ชุดเดียวกันกับเครื่องที่เราพัฒนา 
• save เป็นไฟล์​ APK แล้วมาทดสอบกับตัวจำลองอื่นๆ เช่น bulestack , genymotion

8. แอพที่เราสร้างสามารถที่นำขึ้น  Play store ได้ โดยต้องใช้คู่กับ keystore และต้องมี Google Account Devlopper  ค่าสมัครสมาชิกตลอดอายุการใช้ 25$ หรือ 850 บาท

ตอนที่ 4 คอนเซปของการสร้าง Mobile Application ด้วย App Inventor

การสร้าง Mobile Application แบบ Native App  อย่าง Android  หรือการเขียนแบบ Cross platform อย่าง Phonegap หรือ Cordova  ล้วนจะแบ่ง Concept เป็นสองส่วนด้วยกันคือ ส่วนของการออกแบบและส่วนของการเขียนชุดคำสั่ง

ในการเขีย Mobile Application ด้วย App inventor ก็เช่นกัน จะต้องประกอบการด้วยสองส่วนเช่นเดียวกัน แต่ส่วนของการเขียนชุดคำสั่งนั้นจะวางต่อ Block ลักษณะการต่อจิกซอล์แทน เรียกเป็นทางการว่า Block Programing  ดังนั้นในส่วนของชุดคำสั้งจะไม่ต้องเขียนโปรแกรมนั้นเอง

แต่ยังไงซะก็ต้องอยู่บนแนวคิดของการเขียนโปรแกรม (programing concept) โดยจะลักษณะการเขียนโปรแกรมเชิงวัตถุ ( object programing) คือแต่ละออบเจ็ต(ใน app inventor  จะเรียกว่า component) จะมีองค์ประกอบสองอย่างด้วยกันคือ Preperties หรือคุณสมบัติและ Event หรือเหตุการณ์ว่าสามารถทำอะไรยังไงได้บ้าง

แล้ว  component คืออะไร ? ว่ากันง่ายๆคืออะไรก็ตามที่ปรากฏอยู่บนหน้าจอ นั้นคือ Component และก็จะมี Component บางตัวที่ไม่แสดงบนหน้าจอ เช่นพวกเสียง เซ็นเซอร์ หรืออื่นๆ พวกนี้จะเรียกว่า non visible component ค่อยเรียนรู้ละกันน่ะ

เอาละ มาดูภาพประกอบเพื่อความเข้าใจเพิ่มขึ้นกัน

คุณสมบัติ (Preperties) คือ ลักษณะทางกายภาพของ component จากรูป อธิบายได้ดังนี้

• Component พื้นหลัง  (screen1) มีคุณสมบัติ สีของพื้นหลังเป็นสี ดำ
• Component ปุ่ม (button) มีคุณสมบัติคือ นำรูปภาพสวิสต์เปิดปิด แทนปุ่ม
• Component Layout  มีการจัดตรงการของ  Layout (ค่อยอธิบายในตอนถัดไป )

ในส่วนของ Event นั้นคือเป็นการสั่งว่าแต่ละ Component ให้ดำเนินการยังไง จะทำงานอยู่ในส่วน Block mode จากรูปจากกำหนดชุดคำสั่ง เมื่อ ( when ) ปุ่ม Button1 ถูกคลิก (click)   ให้ดำเนินการ  (do) เปิดแฟลช (call openFlash)


โดยใน App Inventor ได้เตรียม component มากมายแบ่งเป็นหมวดหมู่ได้ถึง  9 หมวดหมู่ คลอบคลุมการ Mobile Application ได้อย่างดี

ตอนที่ 3 สิ่งที่ต้องเตรียมความพร้อมก่อนใช้งาน App Inventor

สิ่งที่ต้องเตรียมความพร้อมก่อนใช้งาน App Inventor คือ

1. เครื่องคอมพิวเตอร์ และ ระบบปฏิบัติการ
2. เบราว์เซอร์ (ที่ติดตั้ง Java)  Google Chrome 4.0 ขึ้นไป,Mozilla Firefox 3.6  ขึ้นไป  (ควรใช้ version ล่าสุด
3. โปรแกรม App Inventor Setup   คลิกที่นี้>> สำหรับ windows , สำหรับ Mac OS X
   ให้ดาวนโหลดและทำการติดตั้งและเปิดโปรแกรมนี้ทุกครั้งที่ต้องการเปิด App inventor จาก url
4. ถ้าจะใช้รันทดสอบบนมือถือผ่าน wifi ให้โหลด MIT AI2 Companion ใน play store ด้วย  >> คลิกที่นี้ หรือยิง QR code นี้
   
5. เปิดใช้โปรแกรม App inventor ที่ ai2.appinventor.mit.edu

ดูการติดตั้งเพิ่มเติมได้ที่ http://appinventor.mit.edu/explore/ai2/setup.html

ตอนที่ 2 การเริ่มสร้างชิ้นงานใหม่และการจัดการชิ้นงาน [ App inventor ]

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

       สำหรับในตอนที่ 2 นี้ผมจะสอนในเรื่องการจัดการชิ้นงาน (project) ประกอบด้วยการเริ่มสร้างชิ้นงานใหม่ (New Project)  บันทึกชิ้นงานที่เราสร้างไว้ (save project) การนำชิ้นออกเป็นไฟล์โปรเจ็ค (expert) และการนำเข้าไฟล์โปรเจ็ค (import)

ส่วนของชุดคำสังของการบริหารจัดการชิ้นงาน (projects)

• การสร้างชิ้นงาน (Project) ใหม่       

           การเริ่มสร้าง Project ใหม่นั้น จะเริ่มจการคลิกที่เมนู Project แล้วเลือก Start new project

หลัวจากนั้นจะปรากฏกล่องข้อความให้เรากรอกชื่อ Project ที่เราจะสร้างชิ้นงานใหม่ ที่ Project name กฏของการสร้างชื่อ Project คือต้องพิมพ์ด้วยตัวอักษรภาษาอังกฤษเท่านั้น ห้ามีการเว้นวรรค ห้ามใช้ตัวสัญลักษณะต่างๆ แต่สามารถใช้ตัวเลข ขีดกลาง (-) ขีดล่าง (_) ได้ หลังจากนั้นคลิกปุ่ม OK ก็เข้าสู่หน้าจอพร้อมที่จะสร้าง Project ชิ้นงานนั้นได้

• การบันทึกชิ้นงานใหม่ (save preject)

โดยปกติแล้วชิ้นงานที่เราสร้างขึ้นมานั้นมันจะ save งานอัตโนมัติแต่เราสามารถบันทึกงานด้วยตัวเองที่เมนู Project แล้วเลือก Save Project เพื่อบันทึกชิ้นงานของเราโดยใช้ชื่อเดิมและ Save Project As ในกรณีที่ต้องการบันทึกชิ้นงานของเราในชื่อที่แตกต่างกันไป โดยชื่อใหม่ที่ให้บันทึก ระบบจะใส่ _copy ต่อท้ายชื่อเดิม แต่เราสามารถแก้ไขชื่อตามใจชอบได้

การบันทึกนั้น ชิ้นงานของเรานั้นจะถูกเก็บบนใน Server ของ App inventor  ดังนั้นเราสามารถไปเปิดจากเครื่องคอมพิวเตอร์เครื่องอื่นได้ทันที แค่มีอินเตอร์เน็ตใช้ (http://ai2.appinventor.mit.edu/)  โดยการล๊อกอิน อีเมล์ที่เราสร้างชิ้นงานนั้นๆ โดยที่งานที่เรา save จะแสดงในหน้า my project  

ต้องการเรียกใช้ชิ้นงานไหน ก็ดับเบิลคลิกชิ้นงานนั้น 

หากต้องการลบชิ้นงานที่เราสร้างออก ทำได้โดการเลือกชิ้นงานที่เราต้องการลบ แล้วกดคำว่า Delete 

• การนำชิ้นงานของเราเก็บไว้ที่คอมพิวเตอร์ ( export )

ในกรณีต้องการให้ชิ้นงานที่เราสร้าง นำออกมา (export) จับเก็บที่เครื่องคอมพิวเตอร์ของเรานั้น คลิกที่เมนู Project เลือก Export selected project to my computer ซึ่งจะถูกจัดเก็บในรูปแบบไฟล์ .aia ไฟล์ .aia 

•  การนำเข้า (import) ชิ้นงานจากคอมมายังโปรแกรม app inventor

ชิ้นงานที่เราจัดเก็บในเครื่องในรูปแบบไฟล์ .aia นั้นสามารถนำเข้ามาทำงานต่อด้วย เมนู project เลือก import project (.aia) from my computer 

ในตอนถัดไป เดียวผมจะมาสอนการทดสอบชิ้นงานของเราบนมือถือจำลองที่เรียกว่า emulator และการทดสอบบนมือถือจริงกันครับ สำหรับในตอนนี้ก็ขอขอบคุณที่ท่านที่อ่านบทความจนจบ 55 

ตอนที่ 1 แนะนำเครื่องมือสร้างแอพโดยไม่ต้องเขียนโปรแกรมด้วย App Inventor 2

       การเขียนแอพหรือเรียกให้ทางการคือ Mobile Application ในปัจจุบันมีเครื่องมือในการช่วยเขียนมากมาย ไม่ว่าจะเขียนด้วยภาษา JAVA หรือเขียนด้วยภาษา html แต่การเขียนโปรแกรมเหล่านั้นยังต้องอาศัยทักษะการเขียนโปรแกรมอยู่

      ในวันนี้มีทางออกสำหรับผู้ที่ต้องการสร้างแอปโดยที่ไม่ต้องเขียนโปรแกรมครับ แต่ความสามารถก็ไม่น้อยหน้าในการเขียนโปรแกรม เป็นลักษณะของการลากวาง block ชุดคำสั่งคล้ายกับการต่อจิกซอว์เรียกให้เป็นทางการว่า Block Programming นั้นคือโปรแกรม App Inventor 2

App Inventor 2  สามารเข้าไปใช้งานออนไลน์ได้เลยไม่ต้องลงโปรแกรม (มีแบบออฟไลน์ที่ไม่ต้องต่อเน็ตด้วย) ที่ http://ai2.appinventor.mit.edu โดยจะต้องใช้อีเมล์ Gmail ในการล๊อกอินเข้าสู่ระบบ ก็จะพบหน้าจอแบบนี้ครับ

หน้าจอโปรแกรม App Inventor 2

App Inventor จะมีหน้าจออยู่สองส่วน คือส่วนของออกแบบหน้าจอ จะเรียนว่า Designer และส่วนของการลากวาง Block คำสั่งลักษณะเหมือนต่อจิกซอว์ จะเรียกว่า Blocks

หน้าจอส่วนของ Block ของโปรแกรม App Inventor

การสร้างแอพในส่วนหน้าจอ Designer นั้น เราจะลาก Component (คอมโพแนน) ที่อยู่ในกล่อง Palette(พาเลท) ด้านซ้ายมือ ลากมาวางส่วนของ Viewer( วิวเวอร์) ซึ่งเป็นที่แสดงผลของหน้าจอแอพ โดยเราสามารถกำหนดว่าคอมโพแนนแต่ละตัวมี Properties (คุณสมบัติ) อย่างไรบ้าง

สาธิตการลาก Component มายังส่วนหน้าจอ ของ App Inventor 2 

อะไรคือ Component ? อะไรคือ Properties ? งงกันมั้ยครับ

Component คือวัตถุที่จะถูกวางบนหน้าจอแอพที่เราออกแบบจะมีทั้งแสดงผลบนหน้าจอและส่วนของการทำงานภายใน Component จะเก็บใน Palette โดยแยกตามประเภทของ component ประเภทต่างๆ ดังนี้

• User Interface   เป็นส่วนที่แสดงบนหน้าจอจะเป็นส่วนที่ใช้ติดต่อระหว่างผู้ใช้แอพกับตัวแอพ พูดง่ายๆ คือส่วนที่เราจะมองเห็นหรือสั่งให้แอพทำอะไร โต้ตอบแสดงผลกับผู้ใช้ ทั้งหมดจะถูกเก็บไว้ส่วนนี้ เช่น ปุ่ม , การพิม์ข้อความ, การใส่ภาพและอื่นๆ 
• Layout  เป็นส่วนที่จะมาจัดวางการแสดงผลของหน้าจอว่าจะวางยังไรให้สวยงาม โดยทั่วไปเราจะลากส่วนนี้มาวางเป็นสัดสวนก่อนแล้วค่อยลากคอมโพแนนส่วน User Interface มาวาง
• Media เป็นส่วนของการใช้งานด้านมีเดีย ไม่ว่าจะเป็นการเล่นเสียง เล่นวิดีโอ  ถ่ายรูป อัดเสียงและอีกมากมาย 
• Drawing and Animation จะเป็นส่วนของการวาดรูปและการทำให้ภาพเกิดการเคลื่อนไหว
• Sensors  จะเป็นส่วนที่ใช้ทำงานร่วมกับเซ็นเซอร์ของอุปกรณ์ เช่น เซ็นเซอร์ความเร็ว เซ็นเซอร์GPS เซ็นเซอร์เข็มทิศ
• Social เป็นส่วนของของการเขียนโปรแกรมเกี่ยวกับการโทรออก การส่ง sms การเรียกดูสมุดโทรศัพท์และส่วนของแชร์ไปยังโปรแกรมสังคอมออนไลน์ 
• Storage เป็นส่วนการเรียกใช้ฐานข้อมูลในการจัดเก็บข้อมูล การจัดเก็บไฟล์
• Connectivity เป็นส่วนการเรียนกใช้บลูทูธ การติดต่อกับ java app 

รายละเอียดแต่ละประเภทของ Component จะอธิบายอย่างละเอียดอีกครั้งในตอนต่อไปนะครับ 

ในแต่ละ Component  เราสามารถที่จะกำหนดคุณสมบัติของมันได้ด้วยว่าต้องการคุณสมบัติยังไร ซึ่งสามารถกำหนดคุณสมบัติในแต่ละ Component ได้ในส่วนของ Properties

การกำหนดคุณสมบัติของคอมโพแนนซ์ ในส่วยของ Properties

   การกำหนด Properties จะมีหน้าที่ที่ค่อยบอกว่า Component ของเรานั้นจะมีคุณสมบัติอย่างไร เช่น ปุ่ม จะมีขนาดตัวอักษรเท่าไหร่?  พื้นหลังสีอะไร? มีข้อความบนปุ่มเขียนว่ายังไร?




เมื่อเรารู้จักส่วนของ Designer แล้ว เดี่ยวจะมาทำความรู้จักส่วนของ Blocks ซึ่งจะเป็นส่วนของการที่จะบอกให้แอพของที่เราจะสร้างนั้น มีกระบวนการทำงานยังไร เช่นหลักจากที่ กดคลิกที่ปุ่มแล้วให้ทำอะไร,การกำหนดค่าตัวแปรมีชื่อตัวแปรอะไรมีค่าเท่าเริ่มต้นเท่าไหร่ ,การคำนวนบวกเลขแล้วแสดงผลหน้าจออย่างไร เป็นต้น

ตัวอยาการต่อจิกซอให้คอมโพแนนทำงานเมื่อมีการกดคลิก

ฺblock ใน App Inventor ใช้งานยังไร? มีรูปแบบอะไรบ้าง?  สำหรับผู้ที่เริ่มใช้งานใหม่ๆ อาจจะดูงงๆกับรูปแบบของ block ที่จะมาใช้งาน การแบ่งกลุ่มรูปแบบของ Block ดังนี้

• เรียกค่าคุณสมบัติของ Component (property getter)

  สิ่งที่เราทราบก่อนหน้านี้คือทุกๆ Component ที่เราจะเรียนใช้งานจะมีคุณสมบัติและสามารถแก้ไขมันได้เพิ่มเติม  หากเราต้องการนำส่วนของคุณสมบัตินั้นมาใช้ เราสามารถเรียกใช้ Block ลักษณะดังนี้ (สังเกต block จะเป็นสีเขียวอ่อน)

• กำหนดค่าคุณสมบัติของ Component (property setter)

การกำหนดคุณสมบัติของ Component นอกจากที่เราสามารถกำหนดค่าจากส่วน Designer แล้ว ในส่วนของ Block ก็สามารถกำหนดค่าได้เช่นกันโดยใช้ Block ลักษณะดังนี้  (สังเกต block จะเป็นสีเขียวเข้ม)

• มีการดำเนินเหตุการณ์กับ Component (event handler) 

การดำเนินเหตุการณ์ คืออะไร ? ถ้าสังเกตการทำงานของแอพ เช่นในการคลิกเมนูเพื่อแสดงหน้าที่เราต้องการ หรือการเลือกคำตอบของข้อสอบ สิ่งเหล่านี้คือเป็นลักษณะการดำเนินเหตุการณ์ เช่นถ้าคลิกปุ่มนี้ แล้วให้มันทำอะไรต่อ , หากเป็นการเริ่มต้นเปิดหน้าจอแอพแล้วให้มันดำเนินการยังไร   เราสามารถเรียกใช้ Block ลักษณะดังนี้ (สังเกต block จะเป็นน้ำตาล)

โดยการวางชุดคำสั่งในส่วนของ Block จะสัมพันธ์กับ Component ในส่วนของ Designer  ว่ากันง่ายๆคือ  Component ไหนที่จะเรียกใช้ในการลากวางชุดคำสั่งในหน้า Block จะต้องลาก Component ที่เกี่ยวข้องมาวางใน Viewer ในหน้า Designer เสียก่อน

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

หากเอามา Block แต่ละแบบที่ผมอธิบายมาต่อกัน จะได้ชุดคำสั่งที่ทำงานได้ประมาณนี้

พอหอมปากหอมคอเกี่ยวการแนะนำภาพรวมของการ App Inventor 2 ในตอนหน้าจะมาแนะนำส่วนของการทดสอบแอพที่เราสร้างด้วยตัว emulator และการทดสอบผ่านมือถือจริง ขอบคุณที่อ่านนะครับ