คมู่ ือสรา้ ง Read Watch and
Practice
Application
เม่ือหลายปีก่อน ผมได้จัดทำ�คลิปวิดีโอ สอนสร้างแอปพลิเคชันด้วย
ด้วย App Inventor และเผยแพรไ่ วใ้ น Youtube เพื่อเปิดโอกาสให้ผสู้ นใจ
สามารถศกึ ษาไดด้ ว้ ยตนเอง โดยไมม่ ีค่าใช้จ่าย ซ่ึงก็ไดร้ บั เสียงชนื่ ชม
สงวนลิขสิทธ์ิ เปน็ อยา่ งมาก พรอ้ มกบั มลี กู ศษิ ยอ์ อนไลนจ์ �ำ นวนมากทส่ี ามารถสรา้ ง
แอปของตนเองได้ส�ำ เรจ็
โดย นายณรงคพ์ ร เหล่าศรสี ิน
มาถึงวันน้ี คลิปวิดีโอเหล่านั้นก็ล้าสมัยแล้ว ประกอบกับมีเว็บใหม่
ไมอ่ นญุ าตใหท้ �ำ การลอกเลยี น อยา่ ง Kodular ซง่ึ มคี อมโพเนนตใ์ หเ้ ราไดเ้ ลอื กใชส้ รา้ งแอปไดม้ ากกวา่
ดดั แปลง เผยแพร่ หรือนำ�ไปใช้ แอปมหี น้าตาทนั สมยั กว่า App Inventor จึงถอื เปน็ โอกาสเหมาะที่จะ
ไมว่ า่ จะรปู แบบใดกต็ าม ไม่วา่ อัปเดตองค์ความรู้ทางด้านนี้ ให้ผู้ที่สนใจสามารถนำ�ไปใช้สร้างแอป
สว่ นหน่ึงสว่ นใดหรือท้งั หมด ไดจ้ ริง
ของหนังสอื เล่มน้ี เวน้ แต่จะได้รบั
อนุญาตเป็นลายลักษณ์อกั ษร และเพ่ือให้การเรียนรู้มีประสิทธิภาพมากข้ึน ผมจึงออกแบบเนื้อหาอิง
จากเจ้าของลขิ สทิ ธิ์ กับโครงงานแอปพลิเคชันท่จี ะสร้าง (Project-based Learning) คอื
ใช้แอปตัวอย่างเป็นโจทย์เพื่อเรียนรู้วิธีการสร้างแอป ตั้งแต่แนวคิด
ราคา 350 บาท ในการออกแบบ หลักการทำ�งาน การเลือกใช้คอมโพเนนต์ การวาง
เลย์เอาต์ เขียนโฟลว์การทำ�งาน รวมถึงเรียนรู้วิธีการใช้คำ�ส่ังในการ
ผู้เขียน เขียนโปรแกรม
ณรงค์พร เหล่าศรีสิน ส่วนวิธีการสร้างแอปที่ต้องลงมือทำ�ตามขั้นตอนน้ัน ผมจัดทำ�เป็น
วิดีโอสาธิตอยู่ใน Facebook Group ช่ือ Kodular Thailand วิธีน้ี
ผู้ชว่ ยบรรณาธกิ าร จะชว่ ยใหผ้ เู้ รยี นทเี่ พง่ิ เรมิ่ ตน้ สามารถดแู ละฝกึ ฝนตามขนั้ ตอนไดด้ กี วา่
การอธิบายดว้ ยภาพน่งิ ในหนงั สือ
จิตรภณ เหล่าศรสี ิน
และเพื่อให้การเรียนรู้คร้ังน้ี ได้ผลดี ขอแนะนำ�ให้เรียนรู้ตามบทเรียน
ผู้อ�ำ นวยการฝา่ ยศิลป์ ทวี่ างไวใ้ ห้ ไลจ่ ากงา่ ยไปยากทลี ะขนั้ ไมค่ วรขา้ มไปสรา้ งแอปทต่ี อ้ งการ
เพราะในแต่ละบท มีเนื้อหาความรู้ท่ีจำ�เป็นในการสร้างแอปแทรกอยู่
อนันท์ วรสทิ ธิ์สิน ในทุกบท ผมเช่ือว่า หากฝึกฝนจากบทเรียนท้ัง 15 บทแล้ว ไ่ม่เพียง
มีความชำ�นาญมากขึ้น แต่ยังยกระดับความรู้ให้สามารถสร้างแอป
พิมพ์ท่ี ท่คี ณุ คดิ และออกแบบเองได้ในอนาคต
บริษทั พิมพ์ดี จ�ำ กัด ณรงค์พร เหล่าศรสี นิ
30/2 หมู่ 1 ถ.เจษฎาวิถี
ต.โคกขาม อ.เมอื งสมทุ รสาคร
จ.สมุทรสาคร 74000
กด Like เป็น Fanpage ท่ี
http://fb.me/narongporn.lao
สารบัญ
6 บทท่ี 1 ทางเลอื กในการสรา้ งแอพ
หนา้ 6-45
รู้จักกบั ทางเลือกใหม่ในการสร้างแอปด้วย
46 วิธีง่ายๆ และเรียนรู้ข้ันตอนในการสร้างแอป
หนา้ 46-81 ตั้งแตต่ ้น จนไดเ้ ป็นไฟล์ apk สำ�หรับตดิ ตง้ั
ในอุปกรณ์แอนดรอยด์
บทท่ี 2 รจู้ กั กบั User Interface
เรียนรู้การใช้ User Interface พ้ืนฐาน และ
การจัดเลย์เอาต์หน้าจอ ด้วยการสร้างแอป
ท่ีเปิดให้ผู้ใช้กรอกข้อมูล และแชร์ข้อมูลไปยัง
แอปอน่ื ๆ ทม่ี ใี นเครอ่ื ง
82 บทท่ี 3 วนุ้ แปลภาษา
หนา้ 82-105
จากจินตนาการในการ์ตูนดัง “โดราเอมอน”
ก�ำ ลงั จะกลายเปน็ แอปทช่ี ว่ ยแปลขอ้ ความ
ทเ่ี ราพดู ใหก้ ลายเปน็ ภาษาตา่ งประเทศ โดยใช้
Speech Recognizer ท�ำ งานรว่ มกบั Yandex
Translate และ Text To Speech
106 บทท่ี 4 เครอ่ื งคดิ เลขพดู ได้
หน้า 106-113
สรา้ งแอปเครอ่ื งคดิ เลขทไ่ี มต่ อ้ งมปี มุ่ เพยี งพดู
โจทยเ์ ลข แอปจะค�ำ นวณ แลว้ อา่ นผลลพั ธใ์ หฟ้ งั
โดยอาศยั ความสามารถของ Math Extension
114 บทท่ี 5 เกมปงิ ปอง
หนา้ 114-129
จากวดิ โี อเกมยอดฮติ ในยคุ 80’s กลายมาเปน็
เกมบนแอนดรอยดท์ ส่ี รา้ งไมย่ าก แถมไดเ้ รยี นรู้
การใช้ Canvas และ Image Sprite ในการท�ำ
ภาพเคลอ่ื นไหว และเกม
130 บทท่ี 6 แอปวาดภาพ
หน้า 130-143
ดว้ ยแอปน้ี คณุ สามารถใชน้ ว้ิ เขยี นขอ้ ความ หรอื
วาดเสน้ ลงบน Canvas ซง่ึ จะเปน็ ไอเดยี เรม่ิ ตน้
สำ�หรับใครท่อี ยากทำ�แอปบันทึกลายเซ็น หรือ
แอปคัดลายมือ และคุณยังจะได้เรียนรู้ User
Interface เพม่ิ เตมิ ทง้ั FAB, Buttom Sheet,
Image Picker และ Image Editor
144 บทท่ี 7 เซตอปั Firebase
หน้า 144-165
Firebase มบี รกิ ารหลายๆ อยา่ งทเ่ี ราสามารถ
น�ำ มาใชใ้ นแอปของเราได้ เชน่ Firebase
Authentication, Real-time Database,
Storage เปน็ ตน้ แตเ่ ราตอ้ งเซตอปั Firebase
ใหพ้ รอ้ มใชง้ านกบั แอปของเรากอ่ น
166 บทท่ี 8 สรา้ งระบบ Login
หน้า 166-183
อาศยั บรกิ าร Firebase Authentication
เราสามารถสรา้ งระบบ Sign Up, Log in
และจดั การกบั ผใู้ ชแ้ บบงา่ ยๆ ไดอ้ ยา่ งรวดเรว็
รองรบั การเปดิ แอกเคานตใ์ หมด่ ว้ ยอเี มล
พาสเวริ ด์ หรอื ดว้ ยแอกเคานตข์ อง Google
184 บทท่ี 9 สรา้ งแอปไวแ้ ชตกบั เพอ่ื น
หนา้ 184-201
ทดลองสร้างแอปแชตแบบง่ายๆ เพอื่ สาธิต
การท�ำ งานของ Firebase Real-time
Database และการใช้ ChatView ในการ
แสดงขอ้ ความทส่ี นทนากนั
202 บทท่ี 10 การใช้งานคอมโพเนนต์
หนา้ 202-217 Google Maps
เรยี นรู้การใช้ Google Maps ในการสรา้ งแอป
ท่ีมีแผนท่ี เช่น แสดงหมุดของสถานท่ีต่างๆ
โดยดึงข้อมูลจาก Dropbox หรือ Google
Sheets พร้อมทั้งเรียนรู้เทคนิคอีกมากมาย
เชน่ ตรวจสอบการเปิด GPS การเลอ่ื นแผนที่
เป็นตน้
218 บทท่ี 11 ระบบตดิ ตามยานพาหนะ
หนา้ 218-233
ลองมาสรา้ งแอปทส่ี ามารถตดิ ตามยานพาหนะ
ว่าอยู่ที่ไหนบนแผนท่ี และติดตามการเคลื่อน
ทแี่ บบเรยี ลไทม์ โดยอาศยั Google Maps และ
Firebase Real-time Database
234 บทท่ี 12 แอป POS
หนา้ 234-251 ส�ำ หรบั รา้ นกาแฟ
เรียนรกู้ ารสร้างแอปสำ�หรับธรุ กจิ เล็กๆ
แบบครบวงจร โดยแอปนี้สามารถรับออเดอร์
จากลกู คา้ ค�ำ นวณค่าเคร่อื งดม่ื เงนิ ทอน
และจดั ทำ�รายงานการขายแบบง่ายๆ
ทส่ี ามารถแชรใ์ หผ้ จู้ ดั การรา้ นไดท้ นั ทที ปี่ ดิ รา้ น
252 บทท่ี 13 สรา้ งแอปแบบทดสอบ
หน้า 252-279
ผใู้ ชส้ ามารถท�ำ แบบทดสอบ multiple-choice
ด้วยแอปนี้ แล้วทราบผลคะแนนได้ทันที พร้อม
เฉลยค�ำ ตอบทถี่ กู ตอ้ ง และเรายงั สามารถเพม่ิ
แบบทดสอบใหม่ๆ ไดง้ า่ ยๆ ผา่ นทาง Google
Sheets
280 บทท่ี 14 แอปพลเิ คชนั
หน้า 280-299 ดา้ น AI เบอ้ื งตน้
ทดลองสร้างแอปท่ีมีความสามารถด้าน AI
ด้วย Extesnsion ใหม่ล่าสุดจาก MIT App
Inventor ซ่ึงเราสามารถจะเทรนให้จำ�แนก
ภาพ เสียง สตั ว์ สง่ิ ของ และยังมี Extension
ที่สามารถตรวจจบั จุดสำ�คญั บนใบหน้าและ
โครงของรา่ งกาย
300 บทท่ี 15 User Interface
หน้า 300-320 และ Layout ทน่ี า่ สนใจ
บทสง่ ท้ายท่สี รปุ วธิ ใี ชง้ านคอมโพเนนต์ใน
กลมุ่ User Interface และ Layout หลายๆ อยา่ ง
ทน่ี า่ สนใจ ซง่ึ จะชว่ ยท�ำ ใหแ้ อปของคณุ ดดู ี
ยง่ิ ขน้ึ
6 คู่มือสรา้ ง Application ด้วย
ทางเลอื กในการสรา้ งแอป
ถ้าพดู ถึงการสรา้ งแอปพลเิ คชนั
หากคุณไมจ่ า้ งนกั พัฒนา (developer) มาสรา้ งให้
คณุ ก็ตอ้ งเรียนรู้ภาษาคอมพวิ เตอร์แสนยาก
ซง่ึ อาจใช้เวลานานกว่าจะเรม่ิ สรา้ งแอปได้
แต่กย็ งั มีวิธกี ารทีง่ า่ ยกว่านัน้ มาก
น่นั คอื หนั มาใชบ้ รกิ ารบนเว็บในการสรา้ งแอปแทน
สไตล์ drag-and-drop 7
MIT App Inventor
ถือเป็นเวบ็ แรกที่เป็นจดุ ก�ำ เนดิ ของการสรา้ งแอปพลิเคชัน ด้วยวิธีการ
ลากวาง (drag and drop) ทำ�ใหก้ ารสร้างแอปเปน็ ไปโดยงา่ ย ไม่ตอ้ ง
ติดตั้ง SDK ใดๆ เพราะการสร้างแอปท้งั หมดอยู่บนเวบ็ นี้
MIT App Inventor เป็นผลจากความร่วมมอื กัน
ระหว่าง Google และ MIT (Massachusetts
Institute of Technology) นำ�ทีมโดย Hal
Abelson และ Mark Friedman ในการพฒั นา
แพลตฟอรม์ น้ีขน้ึ มา และได้ย้ายมาอยูภ่ ายใต้การ
ดแู ลของ MIT ในช่วงปี 2011
MIT App Inventor ทเี่ ปน็ เวอรช์ นั ด้งั เดมิ มีชอื่ วา่
App Inventor Classic และเวอรช์ นั ล่าสดุ คอื
App Inventor 2 เปดิ ตัวเมือ่ ปลายปี 2013
จนถงึ ต้นปี 2020 มีผู้ใชล้ งทะเบยี นแล้วกว่า 10 Hal Abelson
ล้านยสู เซอร์ ใน 195 ประเทศ มีแอปที่สรา้ งด้วย
แพลตฟอร์มนี้ มากกว่า 43 ล้านแอป
การพัฒนาแอปสามารถท�ำ ไดง้ ่ายๆ โดยลากคอมโพเนนตห์ รอื ส่วนประกอบของแอปมาวาง สว่ นการ
เขยี นโปรแกรมกเ็ พยี งลากบลอ็ กค�ำ สง่ั มาวางตอ่ กนั เหมอื นการตอ่ เลโก้ นอกจากน้ี ยงั สามารถทดสอบ
แอปดว้ ย companion ผา่ น WiFi และสรา้ งไฟล์ apk เพอ่ื น�ำ ไปตดิ ตั้งบนอปุ กรณ์แอนดรอยด์ หรือ
นำ�ออก Google Play store ไดเ้ ลย ทีส่ �ำ คัญ ไมม่ คี า่ ใชจ้ ่ายใดๆ ในการพฒั นาแอปบนเวบ็ นี้
http://ai2.appinventor.mit.edu/
8 ค่มู ือสร้าง Application ด้วย
Thunkable
Arun Saigal และ WeiHua Li ทง้ั สองเคยอยูใ่ นทมี MIT App
Inventor และพบวา่ ผใู้ ช้ App Inventor ไมใ่ ชแ่ คน่ กั เรยี น แตเ่ ปน็
คนที่ต้องการสร้างแอปเพื่อธุรกิจด้วย จึงแยกตัวออกมาตั้ง
บริษทั ใหม่ชอื่ Thunkable เมอื่ ปี 2015
ในชว่ งเรมิ่ ตน้ แพลตฟอรม์ ของ
Thunkable ไดพ้ ัฒนาต่อยอด
จากเวบ็ App Inventor เพ่อื ให้
ส า ม า ร ถ ส ร้ า ง แ อ น ด ร อ ย ด์
แอปไดส้ วยงาม มคี อมโพเนนต์
ใหเ้ ลือกใชม้ ากกว่า
ต่อมาบริษัทได้วางแผนพัฒนา Arun Saigal (CEO) และ WeiHua Li (CTO)
แพลตฟอร์มให้สามารถสร้าง
แอปทั้งแอนดรอยด์ และ iOS
โดยเรียกชื่อว่า Thunkable X
ส่วนแพลตฟอร์มเดิมสำ�หรับ
แอนดรอยด์น้ัน เปล่ียนช่ือเป็น
Thunkable Classic ซึ่งใน
ปจั จบุ นั ปดิ รบั ยสู เซอรใ์ หมแ่ ลว้
คา่ บรกิ าร มที ง้ั แบบฟรี ซง่ึ โปรเจกตข์ องคณุ จะถกู เปดิ เผยสสู่ าธารณะ ผใู้ ชอ้ น่ื สามารถก๊อปปไ้ี ปตอ่ ยอด
แตห่ ากเลอื กเสยี ค่าบรกิ าร $25/เดอื น หรอื $200/ปี โปรเจกตก์ จ็ ะเปน็ แบบ private อย่างไรก็ตาม
Thunkable X ก็ยังมคี ำ�สั่งจำ�กัด รวมทัง้ ยงั ไมม่ ี Extension ใหใ้ ชง้ าน คงตอ้ งตดิ ตามกนั ต่อไป
www.thunkable.com
สไตล์ drag-and-drop 9
Diego Barreiro Pérez, (CEO) ในช่วงกลางปี 2017 นกั ศกึ ษา 7 คนจาก 5 ประเทศ (สเปน
เยอรมนี อังกฤษ อินเดีย และเนเธอร์แลนด์) ได้แก่ Conor
Shipp, Diego Barreiro Pérez, Michael Rüdiger,
Pavitra Golchha, Sander Jochems, Sivagiri
Visakan และ Vishwas Adiga ซง่ึ ทง้ั หมดมาจาก Thunkable
community โดยมีแนวคิดท่ตี ้องการพัฒนาแพลตฟอร์ม
สร้างแอปให้ดีย่ิงข้ึนไปอีก จึงรวมตัวกันเปิดตัวเว็บไซต์
Makeroid ซ่งึ ในภายหลังเปล่ียนชื่อเป็น Kodular
ในช่วงปลายปี 2019 Hossein Amerkashi อดีตวิศวกร
ซอฟต์แวร์ ซึ่งเป็นหน่ึงในผู้เชี่ยวชาญ App Inventor
และเป็นผู้ก่อต้ังเว็บ AppyBuilder ซ่ึงเป็นแพลตฟอร์ม
พัฒนาแอปเช่นกัน ได้เข้าร่วมกับ Kodular ซึ่งการรวมกัน
ครั้งน้จี ะสง่ ผลดีต่อการพฒั นาฟเี จอร์ใหม่ๆ ให้กับ Kodular
ย่ิงข้ึน
www.kodular.io
เว็บพฒั นาแอปที่เปน็ นอ้ งใหม่ จาก Ghaziabad ประเทศอินเดยี
(https://casagbic.com/) เพิ่งเปดิ ตัวในชว่ งกลางปี 2019
โดยมี Kunal Mishra เปน็ CEO
10 คู่มือสร้าง Application ด้วย
ขน้ั ตอนการสรา้ งแอป
สไตล์
ในบทนี้ เราจะมาเรียนรู้การสรา้ งแอปดว้ ยบริการจากเวบ็ Kodular
ตั้งแต่การเตรียมอุปกรณ์ เลือกส่วนประกอบหรือคอมโพเนนต์
ส�ำหรับใช้ในแอป จัดเลย์เอาต์ เขียนโปรแกรมด้วยการลากบล็อก
ทดสอบแอป และสร้างไฟล์ apk ส�ำหรับติดต้ังแอป ทั้งหมดน้ีด้วย
การสร้างแอปตัวอย่างแบบง่ายๆ ที่จะเป็นแอปแรกในชีวิตของใคร
หลายๆ คน
สไตล์ drag-and-drop 11
เตรยี มเครอื่ งให้พรอ้ ม
ก่อนอืน่ เราตอ้ งเตรียมเคร่ืองมอื ตา่ งๆ ในการสรา้ งแอปใหพ้ ร้อม ดงั น้ี
01 เคร่ืองคอมพิวเตอร์ส�ำ หรับสรา้ งแอป 02 สามารถใชเ้ ครอ่ื งคอมพวิ เตอรท์ ท่ี �ำ งาน
จะเป็นเครื่องพซี เี ดสก์ทอป บนระบบปฏบิ ตั กิ าร Windows, Mac OS,
หรือโนต้ บุ๊กก็ได้ Linux หรอื Ubuntu
03 โปรแกรมหลักทใ่ี ชใ้ นการสร้างแอป คือ
เบราวเ์ ซอร์ เช่น Chrome, Firefox,
Safari อย่างไรกต็ าม ไม่แนะนำ�ให้ใช้
Internet Explorer หรือ Edge
04 สามารถเช่อื มต่ออนิ เทอร์เนต็ เพอื่ เขา้ สูเ่ ว็บ Kodular
และมี WiFi ส�ำ หรบั เช่ือมตอ่ กับอุปกรณแ์ อนดรอยด์
เพอ่ื ถา่ ยโอนขอ้ มูล ถงึ แม้จะสามารถใชอ้ นิ เทอร์เนต็
ผ่านเครอื ขา่ ยโทรศัพทม์ ือถอื ได้ แตอ่ าจมี
ความเร็วตำ�่ และเสยี ค่าใช้จ่ายสงู
05 ใช้อุปกรณ์แอนดรอยดเ์ พ่ือทดสอบการทำ�งานของแอป
บนอปุ กรณจ์ รงิ แนะนำ�ให้ใช้ Android 5 หรือใหมก่ ว่า
พร้อมทั้งติดต้งั แอป Kodular Companion และแอป
สแกนบารโ์ คด้
06 เพอื่ ความสะดวก สามารถใชแ้ อกเคานต์ Google, Facebook หรือ Twitter
ในการ Sign In เข้าใชง้ าน Kodular อย่างไรกต็ าม แนะน�ำ ใหใ้ ช้แอกเคานต์
Google เพือ่ ความสะดวกในการใช้งานคอมโพเนนตอ์ ืน่ ๆ เชน่ Firebase
12 คมู่ ือสร้าง Application ด้วย
เริม่ ต้นใช้บริการสร้างแอป
เมื่อเตรยี มทกุ อย่างพรอ้ มแล้ว ใหไ้ ปที่เว็บ creator.kodular.io กจ็ ะพบกบั หน้า Sign In
01 แนะนำ�ใหล้ อ็ กอินดว้ ยแอกเคานต์ Google
จากนน้ั เลอื กแอกเคานต์ทจ่ี ะใช้
02 เมอ่ื ลอ็ กอินเข้ามาได้แล้ว ก็จะพบกับหนา้ รวมโปรเจกต์ แต่สำ�หรับคนท่เี พิ่งเรม่ิ ใช้
Kodular เป็นครั้งแรก กจ็ ะพบไดอะล็อกแนะนำ�น้ี ให้คลกิ ปุม่ นีเ้ พ่อื เรมิ่ ใชง้ าน
03 คลกิ ปมุ่ Create project เพอื่ เรม่ิ สร้างโปรเจกตส์ �ำ หรับแอปใหม่
สไตล์ drag-and-drop 13
การต้ังชือ่ โปรเจกต์
•• ต้องข้นึ ต้นดว้ ยอักษรภาษาอังกฤษ
•• ห้ามเวน้ วรรค หรือเครื่องหมายอ่ืน
ใช้ได้เฉพาะ _ (underscore)
•• ช่ือโปรเจกต์ กับชือ่ แอปอาจเป็น
คนละชื่อกันได้ โดยเราสามารถ
เปล่ียนช่อื แอปไดใ้ นภายหลัง
04 ตั้งช่อื โปรเจกต์ แลว้ คลิกปมุ่ Next
05 เน่ืองจากคา่ ตา่ งๆ ทีต่ อ้ งกำ�หนดในหน้านี้ อาจเปน็ เรอื่ งท่เี ขา้ ใจยากในตอนน้ี จึงขอให้
ขา้ มไปกอ่ น โดยคลกิ ปมุ่ Finish เพอ่ื เริ่มสร้างโปรเจกต์ข้นึ มาเลย (ไมต่ ้องหว่ ง เรายงั
สามารถเปล่ยี นแปลงคา่ เหล่านไ้ี ดใ้ นภายหลงั )
14 คู่มอื สร้าง Application ด้วย
หนา้ Designer
เม่อื เปิดโปรเจกตข์ น้ึ มา กจ็ ะพบกับหนา้ Designer ส�ำหรบั ใชอ้ อกแบบหนา้ ตาของแอป โดยใหเ้ ราเลือก
คอมโพเนนต์ หรอื ส่วนประกอบของแอปมาวางในหน้าจอ (Screen)
ชือ่ โปรเจกต์ ป่มุ สำ�หรบั จดั การสกรีน เมนูและคำ�สง่ั ตา่ งๆ
น่ีคือ คอมโพเนนต์ เพียงลาก
ตา่ งๆ ทเ่ี ราสามารถ คอมโพเนนต์
น�ำ มาใช้ในแอปของ ทต่ี อ้ งการใช้
เราได้
มาวางใน
คอมโพเนนตท์ ้ังหมด หน้าจอนี้
แบง่ ออกเปน็ 16 กลุม่ ดว้ ยกัน
คณุ จะได้เหน็ หน้าจอ
แอปแบบครา่ วๆ
จากสว่ นนี้
นอกจากแสดงตัวอย่างบนสมาร์ตโฟนแลว้
ยงั สามารถปรับให้พรวี ิวบนแทบ็ เลต็ ไดด้ ว้ ย
สไตล์ drag-and-drop 15
เราสามารถสร้างแอปที่มีหลายสกรีนได้ โดยคลิกปุ่ม Add Screen หรือ Copy Screen เพ่ือเพ่ิม
สกรนี ใหม่ (แตไ่ มค่ วรเกนิ 10 สกรนี ) และคลกิ ปมุ่ Remove Screen เพอ่ื ลบสกรนี ออก อยา่ งไรกต็ าม
แอปจะเรมิ่ ทำ�งานท่ี Screen1 ดังนั้นเราจงึ ไมส่ ามารถลบ Screen1 ได้
สว่ นน้ใี ช้อปั โหลดไฟล์ภาพ และไฟลอ์ ่นื ๆ หนา้ Blocks
เขา้ ไปไว้ในโปรเจกต์ เพอ่ื ใชง้ านในแอป มีไวส้ ำ�หรับเขยี นโค้ด
เมื่อนำ�คอมโพเนนตม์ าใส่
ในแอป มันจะปรากฏใน
2 ส่วนนี้ ซึง่ เราสามารถ
ลบ หรือเปล่ียนชื่อ
คอมโพเนนต์ได้ โดยใชป้ ่มุ
Delete หรอื Rename
สว่ นน้ใี ช้กำ�หนดคุณสมบัติ หรอื Properties
ตา่ งๆ ของแตล่ ะคอมโพเนนตท์ เ่ี ราเลอื กไว้
16 คูม่ ือสรา้ ง Application ด้วย
หนา้ block editor
เปน็ หนา้ ทเ่ี ราใชเ้ ขยี นโคด้ เพอื่ ควบคมุ การท�ำงานของแอป ซงึ่ ค�ำสงั่ ตา่ งๆ จะมลี กั ษณะเปน็ บลอ็ ก โดยแบง่
ออกเปน็ 2 กลมุ่ ใหญ่ๆ คือ กลุ่ม Built-in และ Component ส่วนวธิ เี ขยี นโปรแกรม ก็เพยี งคลกิ ทกี่ ลุ่ม
ค�ำส่งั และลากค�ำสงั่ ไปวางต่อกัน
Built-in block คอื ลากบลอ็ ก
บล็อกค�ำ สง่ั ทวั่ ไป คำ�ส่ังจากแถบน้ี
เป็นค�ำ สัง่ พ้ืนฐาน มาวางในบรเิ วณน้ี
หรือมาต่อกับ
เมอ่ื คลิกทีก่ ลุ่มใด
คำ�ส่งั ท้งั หมดใน บล็อกอน่ื ๆ
กลุ่มนั้นกจ็ ะปรากฏ
Component block
คอื บล็อกท่ีมากบั
คอมโพเนนต์ต่างๆ
ทเี่ ราน�ำ มาใช้ใน
โปรเจกต์
บลอ็ กคำ�สงั่ ทงั้ หมดในกลุ่มน้นั
สไตล์ drag-and-drop 17
หากสังเกตใหด้ ี จะเหน็ วา่ บล็อกคำ�สง่ั ในแตล่ ะกลุ่มมีสที ่ีตา่ งกัน และบลอ็ กค�ำ ส่งั ยังมีรปู รา่ งทแี่ ตกตา่ ง
กันดว้ ย รวมท้ังมีช่อง (Slot) ส�ำ หรบั น�ำ บลอ็ กมาตอ่ กนั วิธีนช้ี ว่ ยลดความผดิ พลาดในการเขียนโคด้
เนือ่ งจากบล็อกทไี่ ม่เข้ากัน ก็จะไมส่ ามารถน�ำ มาต่อกนั ได้
เม่อื คลิกปุ่ม Blocks กจ็ ะเปลย่ี นมาทห่ี นา้ Block Editor และเราสามารถ
คลกิ ปุ่ม Designer เพือ่ กลบั ไปยังหน้า Designer ไดเ้ มื่อตอ้ งการ
Backpack ใชเ้ ก็บหรอื ก๊อปปโ้ี คด้ บล็อก
เพอ่ื นำ�ไปใช้ในสกรนี หรือในโปรเจกต์อ่ืนๆ
เมือ่ คลกิ ขวาทบี่ ล็อกคำ�สง่ั
หรอื คลกิ บรเิ วณทเ่ี ขยี นโคด้
จะปรากฎเมนลู ัดและคำ�สง่ั
ตา่ งๆ ส�ำ หรบั จดั การกบั โคด้
ใช้ซมู ย่อหรอื ขยายโค้ด
การลบบล็อกสามารถท�ำ ไดห้ ลายทาง เชน่ เลอื กบลอ็ กแลว้ กดคีย์ Delete หรือ
คลกิ ขวาแลว้ เลือกคำ�สัง่ Delete จากเมนลู ดั แต่หากต้องการลบทีละหลายๆ
บล็อกท่ตี ่อเนอื่ งกนั กใ็ ห้ลากมาใสถ่ ังขยะนเี้ ลย
18 คมู่ ือสร้าง Application ดว้ ย
เมนู และค�ำ สั่งตา่ งๆ
เมนู Project
ไปยงั หน้ารวมโปรเจกต์ท้งั หมด
สรา้ งโปรเจกตใ์ หม่
บนั ทึกโปรเจกตเ์ กบ็ ไวบ้ นเวบ็
บนั ทกึ โปรเจกตเ์ ปน็ อกี ชอ่ื
ซึง่ จะไดเ้ ป็นอีกโปรเจกต์ในชื่อใหม่
ลบโปรเจกต์ที่เปดิ อยู่
อปั โหลดไฟลโ์ ปรเจกต์ หรือไฟล์สกรีนจาก
คอมพิวเตอรข์ องเรา เพือ่ แกไ้ ข
ดาวน์โหลดไฟล์โปรเจกต์
หรือไฟล์สกรีนไว้ท่คี อมพวิ เตอร์
ดาวนโ์ หลดโปรเจกตท์ งั้ หมดมาไวท้ ี่คอมพิวเตอร์
หากมโี ปรเจกต์จำ�นวนมาก ก็จะใชเ้ วลานานมาก
เมนู Test
ทดสอบแอปโดยใชร้ ว่ มกบั แอป Kodular Companion ผ่าน WiFi
ทดสอบแอปโดยใชส้ าย USB กับคอมพวิ เตอร์
ตัดการเช่ือมตอ่ ระหว่างอปุ กรณแ์ อนดรอยด์ที่ใชท้ ดสอบกับ
คอมพวิ เตอร์ เพือ่ หยุดการทดสอบ
รีเฟรชหน้าจอของแอป Kodular Companion ใหม่
เมนู Export
เมือ่ สั่ง export จะได้ QR Code เพอ่ื ใหเ้ ราใช้อปุ กรณ์แอนดรอยด์
สแกน และดาวนโ์ หลดแอปไปติดต้ัง
เม่อื สง่ั export จะดาวนโ์ หลดไฟล์ .apk มาไวใ้ นเครื่องคอมพิวเตอร์
สไตล์ drag-and-drop 19
หมายเหตุ
ไฟล์ .aia เปน็ ไฟลต์ น้ ฉบบั ของโปรเจกต์ ซง่ึ เราสามารถอัปโหลดขนึ้ เวบ็ Kodular เพื่อแก้ไขได้
ไฟล์ .ais เป็นไฟลต์ ้นฉบับเฉพาะสกรีนทเี่ ราส่ังบนั ทึก เราสามารถอัปโหลดไฟล์สกรนี น้ี ไปใส่ใน
โปรเจกต์ได้
ไฟล์ .apk เปน็ ไฟลส์ ำ�หรบั ติดตั้งแอปบนอปุ กรณแ์ อนดรอยด์ เกดิ จากการสงั่ Export โปรเจกต์
ดังนน้ั จงึ ไม่ใช่ตน้ ฉบบั ทสี่ ามารถเปิดมาแกไ้ ขโคด้ ได้
โดยปกติ เมื่อมีการแกไ้ ข เปลยี่ นแปลงใดๆ ในโปรเจกต์ ทาง Kodular จะบนั ทึกให้เองโดยอตั โนมตั ิ
จงึ ไมจ่ �ำ เป็นตอ้ งสั่ง Save project อยา่ งไรกต็ าม ในขณะท่แี กไ้ ขโปรเจกต์ หากพบปญั หาการเชื่อม
ต่ออนิ เทอรเ์ น็ต ใหแ้ กไ้ ขจนกลบั มาเชือ่ มตอ่ ได้ แลว้ ส่งั Save project เพอื่ บันทึกการเปลย่ี นแปลง
ทัง้ หมดไวบ้ นเว็บ Kodular กอ่ นท่ีจะแกไ้ ข หรอื ท�ำ การเปลย่ี นแปลงใดๆ กับโปรเจกตน์ ั้นต่อ
หนา้ assets
เป็นหนา้ ที่เราใชจ้ ัดการกบั ไฟล์ตา่ งๆ ท่ตี ้องใชใ้ นโปรเจกต์ เช่น ไฟล์ภาพ เสียง วิดีโอ หรอื ข้อความ
คลิกปมุ่ เหล่าน้์ีเพือ่ ดาวนโ์ หลด หรอื ลบไฟล์
คลกิ ชอื่ ไฟลเ์ พื่อแสดงพรวี วิ
คลกิ ปุ่มน้ีเพอื่ อปั โหลดไฟล์
ขอ้ ความนแ้ี สดงว่า ก�ำ ลังอปั โหลดไฟลข์ น้ึ เว็บ
20 คู่มือสรา้ ง Application ด้วย
ขน้ั ตอนในการสรา้ งแอป
เรยี นรูข้ ้ันตอนทั้งหมดในการสร้างแอป ต้ังแตต่ ้น จนสามารถติดตงั้ ลงในเครือ่ งได้
เพื่อใหผ้ ้เู รยี นสามารถเข้าใจข้นั ตอนต่างๆ ในการสรา้ งแอปจะอาศยั
การเรยี นรู้แบบ project-based โดยการสรา้ งแอปง่ายๆ ขึน้ มา
ซึง่ การสร้างแอปดว้ ย Kodular นน้ั มขี ้ันตอนดังน้ี
01 02 03 04
ก�ำ หนดคุณสมบตั ิ วางแผน และ ออกแบบวธิ กี าร จัดเตรียมข้อมูล
หรือความสามารถ ออกแบบโฟลว์ ใช้งาน กอ่ นลงมอื
ของแอป เพือ่ ใหแ้ อปมีความสามารถ เพ่ือให้กลมุ่ ผ้ใู ช้ทีเ่ ราคาดไว้ สรา้ งแอป
จดุ เรมิ่ ตน้ ในการสรา้ งแอป ในการทำ�งานตามท่ีต้องการ สามารถจะใช้งานแอป ก่อนจะเรม่ิ ลงมอื
อาจเกิดจากต้องการ เรากจ็ ะตอ้ งวางแผน และ ของเราได้อยา่ งสะดวก สร้างแอป อาจตอ้ ง
ใช้แอปเพอ่ื แก้ปญั หา ออกแบบ หลักการท�ำ งาน จำ�เปน็ ตอ้ งออกแบบวิธีการ มีการเตรียมข้อมูล
ท่พี บอยู่ หรอื ตอ้ งการแอ ของแอปวา่ จะตอ้ งมขี น้ั ตอน ใช้งานที่ง่าย ไม่ซบั ซ้อน ไฟล์ภาพกราฟิก
ปทจ่ี ะมาชว่ ยให้การทำ�งาน ในการทำ�งานอย่างไร ตัดขั้นตอนทีไ่ ม่จำ�เป็น รวมไปถงึ การเซตอัป
การใชช้ ีวติ ดีขึ้น ง่ายขึ้น เมอ่ื เสรจ็ ขน้ั ตอนหนง่ึ ตอ้ งท�ำ มกี ารตรวจสอบความ ฐานขอ้ มูล หรือระบบ
สะดวกขน้ึ เราต้องน�ำ อะไรต่อ ต้องใชข้ ้อมลู อะไร ถกู ตอ้ งเพ่อื ป้องกันความ สว่ นอื่นที่อาจต้องนำ�มา
ประเดน็ เหล่าน้ี มาก�ำ หนด ในการทำ�งาน ผดิ พลาด มีการจดจ�ำ ใชร้ ่วมกนั
ความต้องการวา่ จะสร้าง ขอ้ มูลไว้ เพอื่ จะไดไ้ มต่ อ้ ง
แอปทสี่ ามารถทำ�อะไร ใสข่ อ้ มูลซำ้�อกี เป็นตน้
ไดบ้ า้ ง เพ่ือประโยชนอ์ ะไร ซง่ึ ผลลพั ธท์ ไ่ี ดจ้ ากขน้ั ตอนน้ี
สำ�หรบั ใคร ควรจะเปน็ mock up ของ
หนา้ จอต่างๆ และแสดงการ
เช่ือมโยงกัน
ขัน้ ตอนที่ 1-4
เปน็ การท�ำ งาน
ท่ีอย่นู อก Kodular
ส่วนขน้ั ตอนที่ 5-10
จะเร่ิมใช้ Kodular
ในการสร้างแอป
สไตล์ drag-and-drop 21
08
07 ทดสอบการ 09 10
ทำ�งานของแอป
เขยี นโค้ด เราสามารถทดสอบ Export โปรเจกต์ ส่งแอปให้ผใู้ ช้
ด้วยบลอ็ ก การท�ำ งานของแอป เปน็ ไฟล์ apk ตดิ ตงั้
โคด้ คือ คำ�สั่งท่รี ะบุ เพอ่ื ใหแ้ นใ่ จวา่ การท�ำ งาน เมื่อแนใ่ จวา่ การท�ำ งาน เราสามารถสง่ ต่อไฟล์
การท�ำ งานของ ถกู ตอ้ งตามทเ่ี ราตอ้ งการ ของแอปถกู ตอ้ ง apk ได้หลายทาง เชน่
แอปวา่ ตอ้ งท�ำ อะไร ซง่ึ เราสามารถทดสอบ สมบรู ณ์แลว้ กจ็ ะสั่งให้ แชร์ไว้บนคลาวด์ หรอื
ตามล�ำ ดบั อยา่ งไร แบบ Live คอื เมอ่ื มกี าร export เป็นไฟล์ apk เซริ ฟ์ เวอร์ รวมท้งั นำ�
ซ่งึ การเขยี นโค้ด แกไ้ ขโคด้ กจ็ ะสามารถ เพ่ือนำ�ไปติดต้งั บน ออกสู่ Google Play
ด้วยบล็อก ช่วยให้ ทดสอบไดท้ นั ที แตใ่ น อุปกรณแ์ อนดรอยด์
การสรา้ งแอปงา่ ยขน้ึ บางกรณี การทดสอบ
แต่เรากจ็ ะต้องเข้าใจ กอ็ าจจ�ำ เปน็ ตอ้ ง export
หลักในการเขียน แอปออกมา แลว้ น�ำ ไป
โปรแกรม และ ตดิ ตง้ั จรงิ และเมอ่ื พบ
รายละเอียดของ การท�ำ งานทผ่ี ดิ พลาด
แตล่ ะบล็อกคำ�สัง่ กจ็ ะตอ้ งวเิ คราะหห์ าสาเหตุ
และหาทางแกไ้ ข
06
กำ�หนด พร็อพเพอรต์ ี้ ใหก้ ับคอมโพเนนต์
แตล่ ะคอมโพเนนตม์ ี พรอ็ พเพอรต์ ี้ หรอื คณุ สมบตั ติ า่ งๆ
ที่เราจะต้องกำ�หนด เช่น ขนาดของปุ่ม ข้อความและ
สีของปุ่ม เป็นต้น ซึ่งจะทำ�ให้เราเร่ิมเห็นหน้าตาของ
แอปชัดเจนมากข้นึ
05
เลอื กคอมโพเนนตท์ ตี่ อ้ งใช้ และอัปโหลดไฟล์ข้อมูลเขา้ โปรเจกต์
เราจะเรม่ิ สร้างโปรเจกตใ์ หม่ขน้ึ มาใน Kodular แล้วเลือกคอมโพเนนตท์ ่ตี อ้ งใช้
มาวางในหนา้ จอแอป พร้อมกบั จัดเลย์เอาตต์ าม mockup ทอ่ี อกแบบไว้
นอกจากน้ี อาจตอ้ งอัปโหลดไฟลข์ อ้ มูล เชน่ ไฟล์เท็กซ์ ไฟลภ์ าพกราฟกิ ฟอนต์
ทตี่ อ้ งใชใ้ นแอป
22 คู่มอื สร้าง Application ด้วย
ลองสรา้ งแอปแรก
นี่เปน็ ตวั อย่างของแอปแรกท่เี ราจะลองสรา้ งกนั ซึง่ มีความสามารถ ดงั นี้
ถ่ายภาพ แลว้ แสดงภาพทถี่ ่ายบนหนา้ จอ
และแสดงช่อื ไฟล์/โฟลเดอร์ของไฟล์
ภาพถ่ายน้นั ไว้ใต้ภาพ
สแกนบาร์โคด้ แล้วแสดงข้อมลู ที่สแกนได้
เปดิ -ปิดไฟแฟลช แทนไฟฉาย
คอมโพเนนต์ที่ต้องใช้
Image อยใู่ นกลุ่ม User Interface
ส�ำ หรบั การแสดงภาพ
Label อยู่ในกล่มุ User Interface
สำ�หรับการแสดงข้อความ
Button อยใู่ นกลุม่ User Interface
มไี ว้เพ่ือใหผ้ ใู้ ช้สั่งงานแอป
Horizontal Arrangement อยใู่ นกลุม่ Layout / General
ส�ำ หรับการจัดเลย์เอาต์บนหนา้ จอ เพอื่ ให้สามารถจดั เรียงคอมโพเนนตต์ ามแนวนอน
ในตวั อยา่ ง คอื จดั เรยี งปุ่มทั้ง 3 ตามแนวนอน
นอกจากนี้ ยังมีคอมโพเนนตบ์ างอย่างท่มี องไมเ่ หน็ ในหน้าจอ ได้แก่
•• Camera อยู่ในกลมุ่ Media ใช้ถ่ายภาพ และเปิดไฟแฟลช
•• Barcode Scanner อยูใ่ นกลมุ่ Sensors ใช้ส�ำ หรบั สแกนบาร์โค้ด
วางคอมโพเนนต์ จดั เลยเ์ อาต์
01 เรม่ิ ดว้ ยการสรา้ งโปรเจกตใ์ หม่ ตง้ั ชอ่ื วา่ MyFirstApp จากนน้ั เรากจ็ ะตอ้ งลากคอมโพเนนต์
ทต่ี ้องใชม้ าวางในโปรเจกต์
สไตล์ drag-and-drop 23
02 คลกิ เลอื กกลมุ่ User Interface
03
ลาก Image และ Label
มาวางในหนา้ จอ จะเหน็ ว่า
คอมโพเนนตว์ างเรียงลง
มาตามแนวตั้ง ไมส่ ามารถ
เรยี งตามแนวนอนได้
หากต้องการจัดเลย์เอาต์ในแบบอื่นๆ จะต้องใช้คอมโพเนนต์ในกลุ่ม Layout มาช่วย ในตัวอย่างน้ี
เราใช้ Horizontal Arrangement ซึง่ เป็นคอมโพเนนตท์ ท่ี ำ�หนา้ ทเี่ ป็นกรอบ เมื่อน�ำ คอมโพเนนต์อนื่ ๆ
มาใสใ่ นกรอบน้ี มันกจ็ ะจดั เรยี งกนั ตามแนวนอน (Horizontal) ได้อยา่ งที่เราต้องการ
04 คลิกเลอื กกลมุ่ Layout / General
05 ลาก Horizontal
Arrangement
มาวางไวใ้ ต้ Label
24 คู่มอื สร้าง Application ด้วย
06 กลบั ไปท่ีกลุ่ม User Interface แลว้ ลาก Button มา 3 อนั
วางไวใ้ น Horizontal Arrangement ให้เรียงกนั ตามแนวนอน
07 คลกิ กล่มุ Media
08
ลาก Camera มาวางไว้
ทใี่ ดก็ไดใ้ นหน้าจอ
สไตล์ drag-and-drop 25
09 คลิกเลือกกลุม่ Sensors
10
ลาก Barcode Scanner
มาวางไวใ้ นหน้าจอ
ท้งั Camera และ Barcode Scanner ต่างกเ็ ปน็ คอมโพเนนต์แบบ non-visible คอื เปน็ คอมโพเนนตท์ ี่
จะไมป่ รากฎให้เหน็ บนหนา้ จอ และนก่ี ็คอื คอมโพเนนตท์ งั้ หมดทเ่ี ราต้องใช้ในแอปนี!้
กำ�หนดพรอ็ พเพอร์ตี้
หลงั จากทเ่ี ราได้วางคอมโพเนนตต์ า่ งๆ ทีต่ อ้ งใช้ในแอปของเรา พรอ้ มท้ังจัดเลยเ์ อาต์เรียบรอ้ ยแลว้
เรากจ็ ะมากำ�หนดพร็อพเพอร์ต้ีของแต่ละคอมโพเนนต์ เริ่มด้วยการคลิกที่ Screen1
พร็อพเพอรต์ ้สี ว่ นแรกใช้
ก�ำ หนดคุณสมบตั ขิ อง
About Screen
26 คมู่ ือสรา้ ง Application ด้วย
พร็อพเพอร์ต้ี สีส�ำ หรับสว่ นท่เี นน้ ใหเ้ ดน่
ของ Screen1 (ตอ่ ) (Accent Color)
การจดั เรยี งคอมโพเนนต์บน
ช่อื ของแอป สกรนี ตามแนวนอน (Left,
สีพ้ืนหลังของสกรนี Center, Right) และตามแนวตง้ั
ภาพพ้ืนหลังของสกรีน (Top, Center, Bottom)
แอนิเมชันในตอนทีเ่ ปดิ หรือปดิ ภาพทีใ่ ช้เปน็ ไอคอนของแอป
สกรีน มีใหเ้ ลอื กหลายแบบ สขี องแถบ Navigation Bar
ได้แก่ Default, Fade, Zoom, สสี ำ�หรับส่วนของ Title Bar
Slide Horizontal/Vertical และ Status Bar
และ None แสดงผลในแนวตงั้ /แนวนอน
ตามท่ผี ้ใู ช้ถอื โทรศพั ท์
เลอื กว่าจะใหร้ บั ไฟล์ประเภทใด
ทแี่ อปอืน่ แชร์สง่ มาให้ ก�ำ หนดเป็น Responsive เพือ่
ให้การแสดงผลยืดหยนุ่ ตาม
คลิกถกู หากตอ้ งการให้ ขนาดจอโดยอัตโนมัติ
เลอื่ นหน้าจอข้นึ -ลงได้
ขอ้ ความ Title/Subtitle
คลกิ ถูกเพือ่ แสดง Options ทีจ่ ะแสดงบน Title Bar
Menu และ Status Bar
คลกิ ถูกเพ่อื แสดง Title Bar
ธีมสขี องแอป ลิงกไ์ ปยงั เว็บเพจที่แนะน�ำ
การใช้งานแอปน้ี
ฟอนต์ของข้อความ
บน Title Bar พรอ็ พเพอรต์ ี้ข้ันสูงอ่ืนๆ
หมายเลขเวอร์ชันของแอป
ส�ำ หรับ Google Play Store
หมายเลขเวอร์ชนั ของแอป
ท่ีเราก�ำ หนดเอง
สไตล์ drag-and-drop 27
สว่ นประกอบต่างๆ ของหนา้ จอ
คลกิ ปุ่ม Options menu เมนู About Screen ปรากฎ ไดอะล็อก About Screen
About Screen Title
About Screen
Status Bar หากไมต่ ้องการให้แสดง
Title Bar ปุ่ม Options menu กใ็ ห้
ลบเครื่องหมายถูกหนา้ ช่อง
Show Options Menu
Navigation Bar
ในการกำ�หนดพร็อพเพอร์ตเ้ี กย่ี วกบั สี เราสามารถใช้
Color Picker เพ่ือเลอื กสีได้ตามต้องการ
02 คลิกเลอื กโทนสีท่ีตอ้ งการ
01 คลกิ เลือกสจี ากแถบน้ี
03 คลกิ เลือกระดบั ความโปรง่ ใส (Opacity)
ตงั้ แต่ 00 (ใส) ถึง FF (ทบึ )
หรอื จะก�ำ หนดค่าสี RGBA เปน็ เลขฐาน 16 กไ็ ด้
นอกจากน้ี ยงั มสี สี ำ�เรจ็ รปู ใหเ้ ลอื กใชไ้ ด้เลย
28 ค่มู ือสรา้ ง Application ด้วย
Screen1 เปน็ สกรนี พเิ ศษ เมอื่ แอปเรม่ิ ท�ำ งาน กจ็ ะเรม่ิ ท�ำ งานท่ี Screen1 ดงั นน้ั จงึ ไมส่ ามารถลบ
หรอื เปลย่ี นชอ่ื Screen1 เปน็ ชอ่ื อน่ื ได้ นอกจากน้ี พรอ็ พเพอร์ต้บี างอยา่ งก็มีเฉพาะใน Screen1
เท่านั้น โดยเป็นพร็อพเพอร์ตขี้ องแอปด้วย เชน่ ชอ่ื , ไอคอน และเวอร์ชนั ของแอป เปน็ ต้น
พร็อพเพอรต์ ขี้ อง Image
Image เปน็ เสมือนกรอบรปู ท่ีเราสามารถนำ�ภาพมาใส่ในกรอบเพอ่ื แสดงผล ในทนี่ ้ี เราจะใชแ้ สดงภาพ
ทไ่ี ดจ้ ากการถา่ ยภาพดว้ ยกลอ้ ง กอ่ นจะใชง้ าน เราจะตอ้ งก�ำ หนดพรอ็ พเพอรต์ โ้ี ดยคลกิ เลอื ก Image1
คลิกถูกหากตอ้ งการให้ผู้ใช้
สามารถคลิกทีภ่ าพน้ไี ด้
ก�ำ หนดความสงู และความ
กว้างใหเ้ ปน็ Fill parent
โดยคลกิ ปุม่ นี้
ก�ำ หนดชอ่ื ภาพที่จะแสดงผล
หลังจากอปั โหลดภาพแล้ว
กำ�หนดคา่ มมุ ในการหมุนภาพ
คลกิ ถูกเพื่อขยายภาพขนาดเลก็ ให้เตม็ กรอบ
คลิกถูกเพื่อแสดงคอมโพเนนตน์ ้ีบนหนา้ จอ
ความกวา้ งและความสูง Fill parent
Automatic
ในการก�ำ หนดความกว้าง (Width) และความสูง (Height)
ของคอมโพเนนต์ตา่ งๆ นน้ั สามารถกำ�หนดได้ 4 ลักษณะ
•• กำ�หนดขนาดเป็นพกิ เซล เชน่ 64px
•• กำ�หนดเป็น % ของความกว้างหรือความสูงของหน้าจอ เช่น 80%
•• Automatic ก�ำ หนดขนาดให้พอดีกบั คอนเท็นต์ท่อี ยู่ในกรอบโดยอัตโนมัติ
•• Fill parent ขยายขนาดให้เตม็ ความกว้างหรอื ความสูงของหนา้ จอ
คำ�แนะนำ�
•• เลือกใช้ Fill parent เพ่ือช่วยให้เลย์เอาต์บนหน้าจอคงที่ เช่น ในแอปน้ี เรากำ�หนดความสูงของ
Image1 เปน็ Fill parent ทำ�ใหป้ ุ่มทง้ั สามอยชู่ ิดท่ีขอบลา่ งของหนา้ จอเสมอ ไมว่ ่าภาพทีแ่ สดงจะ
มขี นาดใหญห่ รอื เล็กกต็ าม
•• เลือกใช้ Automatic ในกรณีท่ไี มส่ ามารถระบุขนาดทแี่ นน่ อน เชน่ ความสูงของข้อความใน Label,
Textbox หรอื ปมุ่ ใหก้ �ำ หนดเปน็ Automatic เพอ่ื ใหป้ รบั ขนาดใหพ้ อดกี บั ขนาดฟอนตโ์ ดยอตั โนมตั ิ
•• เลอื กใช้แบบ % เชน่ กำ�หนดความกวา้ งเป็น 90% ของความกวา้ งหนา้ จอ เพอื่ ไม่ใหค้ อมโพเนนต์
อยู่ชิดขอบจอทงั้ ซา้ ยและขวา
สไตล์ drag-and-drop 29
อัปโหลดไฟล์
ในกรณที ตี่ อ้ งการใช้ไฟล์ภาพ เสยี ง วดิ ีโอ หรอื ข้อความในแอป เราสามารถอปั โหลดไฟล์เหลา่ น้ันเข้าไป
ใส่ไวใ้ นโปรเจกตไ์ ด้ ซึ่งเราจะเรยี กไฟล์เหล่านีว้ า่ เปน็ ทรพั ย์สนิ หรอื Assets ของโปรเจกต์ สำ�หรับแอปนี้
ให้เราเตรยี มไฟลภ์ าพส�ำ หรับป่มุ 3 ภาพ และภาพสำ�หรบั Image1 อีก 1 ภาพ
01 คลกิ ปมุ่ Assets
01
หรอื คลกิ ปุ่ม
Upload
นคี่ ือ ไฟลท์ ่ีอปั โหลดไวใ้ น
โปรเจกตแ์ ลว้ สามารถ
คลกิ ทช่ี อื่ ไฟล์เพอ่ื พรวีิ ิว
(ได้เฉพาะไฟลภ์ าพ)
คลกิ ปมุ่ เหล่านเ้ี พอ่ื ดาวน์โหลดไฟล์ 02 คลิกปมุ่ Upload asset แล้วเลอื กไฟล์ทีจ่ ะอปั
มาไว้ในคอมพวิ เตอร์ หรอื ลบไฟล์ โหลดไดค้ รั้งละหนงึ่ ไฟลเ์ ทา่ น้ัน หรอื จะใช้
วธิ ีลากไฟลม์ าใสใ่ นไดอะล็อกนี้กไ็ ด้
ค�ำ แนะน�ำ
เน่ืองจากมีข้อจำ�กัดเร่ืองขนาดของไฟล์โปรเจกต์ จึงขอแนะนำ�ให้เตรียมภาพให้มีขนาดท่ีเหมาะสมกับ
การใช้งาน เช่น ภาพส�ำ หรับปุ่ม ควรมีขนาดไม่เกนิ 200 พิกเซล หรือภาพโดยท่ัวไป ไมค่ วรเกนิ 200KB
30 คู่มอื สร้าง Application ดว้ ย
พรอ็ พเพอร์ตี้ของ Label
Label เป็น กรอบ สำ�หรบั แสดงข้อความบนหน้าจอเทา่ น้นั ผใู้ ชไ้ มส่ ามารถแก้ไขขอ้ ความใน Label ได้
ในการก�ำ หนดพรอ็ พเพอร์ตี้ให้กับ Label ใหค้ ลกิ เลือก Label1
ก�ำ หนดสพี น้ื หลัง
ทำ�ให้ Label นีส้ ามารถคลิกได้
ท�ำ ให้เปน็ ตวั หนา/ตัวเอน
เลือกฟอนต์และขนาดตวั อักษร
กำ�หนดให้แสดงหรือซ่อน ความสงู เปน็ Automatic
คอมโพเนนต์นบ้ี นหน้าจอ ความกวา้ งเปน็ Fill parent
คลิกถูกหากตอ้ งการให้ ใสข่ อ้ ความที่จะแสดงผล
แสดงขอ้ ความ HTML ก�ำ หนดใหข้ ้อความอยู่กึง่ กลาง
เลอื กสขี องขอ้ ความ
ก�ำ หนดมมุ ในการ
หมุนข้อความ สามารถอปั โหลดไฟล์ฟอนต์
(.otf .ttf) แลว้ เลือกแสดง
ข้อความดว้ ยฟอนตน์ ้ไี ด้
คลิกถูกเพอ่ื แสดงขอ้ ความ
แบบตวั อักษรว่งิ
HTML Format <sub> ท�ำ ใหเ้ ปน็ ตัวหอ้ ย (Subscript)
<sup> เชน่ สูตรเคมี
เปน็ พรอ็ พเพอร์ตที้ ม่ี เี ฉพาะในหน้า Designer <br> ทำ�ให้เป็นตัวยกขึ้น (Superscript)
เท่านัน้ หากคลกิ ถกู หน้าชอ่ งนี้ จะทำ�ใหเ้ รา เช่น เลขยกก�ำ ลงั
ใช้ขึ้นบรรทดั ใหม่
สามารถจัดรปู แบบในการแสดงข้อความดว้ ย
แทก็ HTML ได้ ซง่ึ แทก็ ทสี่ ามารถใช้ไดน้ น้ั ได้แก่
<big> ท�ำ ให้ตวั อกั ษรใหญข่ ้ึน หากใสข่ อ้ ความนี้ H<sub>2<⁄sub>O ลงในชอ่ ง
<small> ท�ำ ให้ตัวอักษรเลก็ ลง Text แลว้ คลกิ ถกู หน้าช่อง HTML Format ก็จะ
<b> ทำ�ให้เป็นตวั หนา แสดงขอ้ ความเป็น H2O
<i> ทำ�ใหเ้ ป็นตัวเอน
สไตล์ drag-and-drop 31
พร็อพเพอร์ตีข้ อง Horizontal Arrangement
Horizontal Arrangement หรือเรียกส้ันๆ ว่า HA เป็นเสมือน กรอบ สำ�หรับใช้จัดเลย์เอาต์ให้
คอมโพเนนตท์ ่อี ยใู่ นกรอบเรยี งกันตามแนวนอน (Horizontal) โดยมพี รอ็ พเพอร์ตีต้ ่างๆ ดงั น้ี
กำ�หนดให้แสดงหรอื ซ่อน จัดเรียงคอมโพเนนต์ใหช้ ดิ ซา้ ย
คอมโพเนนตน์ ้บี นหน้าจอ ขวา บน ล่าง หรอื กึ่งกลาง
ก�ำ หนดสพี ้นื หลงั
ทำ�ให้ HA นี้สามารถคลิกได้
ความสงู เปน็ Automatic
ความกว้างเป็น Fill parent
สามารถอัปโหลดไฟล์ภาพ แลว้
เลอื กใชภ้ าพนน้ั เปน็ พน้ื หลงั
การแสดงผลเปน็ แบบการ์ด
Is Card และ Use Round Card แสดงผลเป็น Card
โดยท่ัวไป HA จะมีลักษณะเป็นกรอบสี่เหลี่ยมธรรมดา และมี
สีพ้ืนหลังใส เมื่ออยู่บนหน้าจอจึงมองไม่เห็น อย่างไรก็ตาม
เราสามารถท�ำ ใหด้ เู ดน่ ขน้ึ มาได้ โดยแสดงผลเปน็ การด์ (Card)
เพยี งคลิกถกู ท่ีช่อง Is Card แลว้ เลือกสีพ้นื หลัง (ไม่ให้ใส) กจ็ ะ
เห็นเปน็ แผน่ การ์ดลอยขน้ึ มา และมีเงาท่ีดา้ นลา่ งด้วย
นอกจากนี้ หากคลิกถกู ทชี่ อ่ ง Use Round Card ด้วย กจ็ ะได้ เม่อื ใช้ Use Round Card
แผน่ การด์ ท่ีมีมมุ มนย่งิ ข้นึ (ต้องใชร้ ว่ มกับ Is Card เสมอ)
Clickable
หากคลิกถูกหน้าช่อง Clickable จะทำ�ให้ผ้ใู ช้สามารถคลิกท่ี HA ได้ แต่ในกรณีที่มีคอมโพเนนต์อื่น
ท่สี ามารถคลกิ ได้ อยใู่ น HA ด้วย เชน่ ปมุ่ ผู้ใช้กย็ งั สามารถคลกิ ท่ีปุ่มไดต้ ามปกติ ส่วนการคลิกที่ HA
นน้ั จะต้องใชน้ ้วิ แตะในสว่ นท่ีไมม่ ีคอมโพเนนต์อนื่ มาบงั
32 คูม่ ือสรา้ ง Application ดว้ ย
พรอ็ พเพอรต์ ้ีของ Button
Button หรือ ปุ่ม ถือเป็นคอมโพเนนต์พื้นฐานท่ีสุดที่มีในทุกแอป ลักษณะของปุ่มที่ปรากฎอาจมีได้
หลายรปู แบบ ตงั้ แตแ่ บบธรรมดา ทเ่ี ปน็ ปมุ่ สเ่ี หลยี่ มและขอ้ ความบนปมุ่ หรอื แบบทใี่ ชภ้ าพไอคอนเปน็ ปมุ่
ไปจนถึงแบบท่มี ีทั้งภาพไอคอน พรอ้ มขอ้ ความบนป่มุ ดว้ ย
อัปโหลดไฟล์ภาพ ก�ำ หนดสีพน้ื หลงั ของป่มุ
แลว้ เลือกใชเ้ ปน็ ภาพปมุ่ ท�ำ ใหป้ ุ่มน้สี ามารถคลิกได้
ท�ำ ใหข้ ้อความบนปุ่ม
กำ�หนดข้อความบนปุ่ม เปน็ ตวั หนา/ตวั เอน
ในแอปนี้ ให้ลบข้อความออก
เลือกฟอนตแ์ ละขนาดตัวอักษร
เลือกสีของขอ้ ความบนปุ่ม
กำ�หนดให้แสดงหรือ ก�ำ หนดความกวา้ งและ
ซอ่ นปุ่มนบ้ี นหน้าจอ ความสงู ของปุม่ เปน็ 64px
ก�ำ หนดรปู ทรงของปมุ่ ไดห้ ลาย
สามารถอัปโหลดไฟลฟ์ อนต์ แบบ (Default, Rounded,
(.otf .ttf) แลว้ เลอื กแสดง Rectangular, Oval)
ข้อความด้วยฟอนต์นไ้ี ด้ จัดข้อความชดิ ซา้ ย ขวา หรอื
อยกู่ ่ึงกลางของปมุ่
คลิกถูกหากต้องการให้
แสดงขอ้ ความ HTML
กำ�หนดมุมในการหมนุ
ข้อความ
หากคลิกถูกทชี่ อ่ ง Show Feedback เมอื่ ผใู้ ชแ้ ตะปุ่มนี้ ปมุ่ จะเปลีย่ นเป็นสีตามทกี่ �ำ หนดในช่อง Touch
Color และเมอื่ ยกนวิ้ ขน้ึ ปมุ่ กจ็ ะกลบั เปน็ สเี ดมิ (Background Color) ทงั้ น้ี จะมผี ลเฉพาะในกรณที ไ่ี มไ่ ด้
ใช้ภาพเปน็ ปมุ่ และสีพืน้ หลังของปุ่มไม่ใส
สไตล์ drag-and-drop 33
สำ�หรับอีก 2 ปุ่มท่ีเหลือ ให้กำ�หนดพร็อพเพอร์ตี้เหมือนกัน คือ ขนาดความกว้าง และความยาว
ของปุ่มเป็น 64px และลบข้อความในช่อง Text ออก ส่วนในช่อง Image ให้เลือกภาพสำ�หรับ
ใชก้ บั แตล่ ะปุม่ ตามตวั อยา่ งในหนา้ 22
พรอ็ พเพอรต์ ขี้ อง Camera
Camera เปน็ คอมโพเนนต์สำ�หรับใชใ้ นการถ่ายภาพนิง่ และเปดิ -ปดิ ไฟแฟลช (หากต้องการถา่ ยวดิ ีโอ
ใหใ้ ชค้ อมโพเนนต์ Camcorder) คอมโพเนนต์นีไ้ ม่มีพรอ็ พเพอรต์ ใี้ ห้ก�ำ หนด
พร็อพเพอร์ตข้ี อง Barcode Scanner
Barcode Scanner เป็นคอมโพเนนต์สำ�หรับใช้สแกนบาร์โค้ดแบบต่างๆ รวมท้ัง QR Code ด้วย
คอมโพเนนต์นี้มเี พยี งพร็อพเพอรต์ ี้เดยี ว คือ Use External Scanner
หากคลกิ ถกู ท่ีช่องน้ี จะทำ�ให้แอปของเราไปเรียกใช้
แอปสแกนบารโ์ คด้ ทีต่ ิดต้ังไวใ้ นเคร่อื งของผู้ใช้
หากในเครอ่ื งนน้ั ไมม่ แี อปส�ำ หรบั สแกนบารโ์ คด้ กจ็ ะเกดิ
Error ขน้ึ ดงั น้ัน เพอ่ื ลดความเสีย่ งทีจ่ ะเกิด Error
ขอแนะน�ำ ใหล้ บเครอ่ื งหมายถกู ออกจากชอ่ งน้ี ซง่ึ จะ
ท�ำ ให้แอปของเราใช้ Barcode Scanner ทอ่ี ย่ภู ายใน
แอปแทน
34 คมู่ อื สรา้ ง Application ดว้ ย
การเขยี นโปรแกรม Event
Action
เม่ือนำ�คอมโพเนนต์มาวาง และจัดเลย์เอาต์หน้าจอเรียบร้อยแล้ว ขั้นต่อไป คือ
การเขียนโปรแกรมควบคุมการทำ�งานของแอป ซ่ึงการทำ�งานของโปรแกรมจะ
เริ่มต้นด้วยอีเวนต์ (event) คือ เม่ือเกิดเหตุการณ์ใดข้ึน จะให้แอปทำ�อะไรบ้าง
น่ันหมายความว่า เราจะต้องเขียนโปรแกรมเพ่ือให้แอปทำ�งานตอบสนองต่อ
อีเวนต์ท่ีเกิดข้ึนนั่นเอง ซ่ึงจะต่างจากเขียนโปรแกรมแบบเดิมที่เป็นโฟลว์เดียว
โดยจะมโี ฟลวก์ ารท�ำ งานยอ่ ยๆ หลายอนั แตล่ ะโฟลวเ์ รมิ่ ตน้ ดว้ ยอเี วนต์ ซงึ่ อเี วนต์
อาจเกิดขึน้ ได้หลายทาง ได้แก่
• เกิดจากผู้ใช้ เชน่ การกดปุ่ม การป้อนข้อมลู
• เกดิ ตอ่ เนอื่ งจากบลอ็ กค�ำ สง่ั กอ่ นหนา้ เชน่ เมอื่ สงั่ ใหเ้ ปดิ กลอ้ งเพอ่ื ถา่ ยภาพ การถา่ ยภาพจะยงั ไม่
เกดิ ขน้ึ จนกวา่ ผใู้ ชจ้ ะกดปมุ่ ชตั เตอร์ จงึ จะเกดิ อเี วนตต์ ามมา หรอื การสงั่ ใหอ้ า่ นขอ้ มลู จากเวบ็ ซงึ่ จะ
ไมไ่ ดข้ อ้ มลู ในทนั ทที สี่ ง่ั ตอ้ งรอจนกระทงั่ เวบ็ นน้ั สง่ ขอ้ มลู กลบั มาให้ จงึ เกดิ อเี วนตว์ า่ ไดร้ บั ขอ้ มลู แลว้
• เกดิ ขึน้ โดยอัตโนมัติ เช่น อีเวนต์ที่เกิดขึ้นเมอื่ แอปเร่มิ ทำ�งาน หรอื เมือ่ คอมโพเนนตพ์ ร้อมใช้งาน
เมอ่ื ลองเขยี นโฟลวก์ ารท�ำ งานของแอปน้ี กจ็ ะเปน็ ดงั ภาพ คอื ประกอบดว้ ยโฟลวย์ อ่ ย 5 อนั แตล่ ะโฟลว์
เร่ิมตน้ ดว้ ยอเี วนต์
เมอ่ื ผใู้ ช้คลกิ ปุ่ม 1 เม่อื ผ้ใู ชค้ ลกิ ปมุ่ 2 เมอ่ื ผใู้ ชค้ ลกิ ปุ่ม 3
เปดิ กล้องเพอื่ ถา่ ยภาพ เปิดกล้องเพ่อื สแกน เปดิ -ปดิ ไฟแฟลช
รอผูใ้ ช้ บารโ์ คด้
รอการสแกน การทม่ี ีโฟลว์ย่อยๆ หลายอัน
เมอื่ ผูใ้ ช้ แบบน้ี เราอาจตอบไม่ได้ว่า
กดชัตเตอร์ เมือ่ สแกนได้แล้ว จะเกิดอเี วนต์ใดก่อน และใน
บางกรณี ก็อาจเกิดหลาย
น�ำ ภาพถา่ ยมาแสดงผล นำ�ข้อมูลมาแสดงผล อเี วนตพ์ รอ้ มกนั กไ็ ด้ แตท่ ส่ี �ำ คญั
คอื เม่อื เกดิ อีเวนตใ์ ด จะต้อง
นำ�ชอื่ ไฟลภ์ าพมาแสดงผล รู้ว่าตอ้ งท�ำ งานอะไรบ้าง
สไตล์ drag-and-drop 35
การเขยี นโปรแกรมใน Kodular ท�ำ ไดง้ า่ ยๆ โดยการลากบลอ็ กค�ำ สง่ั มาเรยี งตอ่ กนั เรม่ิ ตน้ ดว้ ยอเี วนต์
02 คลิกเลอื ก Button1 01 คลิกปุ่ม Blocks เพอ่ื ไปยงั
ซ่งึ เป็นปมุ่ ถ่ายภาพ หน้า Block Editor
03 ลากอีเวนต์
Click มาวาง
Click เป็นอเี วนตส์ �ำ คัญของคอมโพเนนต์ Take Picture เป็นค�ำ สัง่ ในคอมโพเนนต์
Button ซง่ึ ใชบ้ อ่ ยทส่ี ดุ โดยอเี วนตน์ จี้ ะเกดิ Camera ใช้สั่งให้เปิดกลอ้ งเพ่อื ถ่ายภาพนงิ่
ข้ึนเมือ่ ผใู้ ช้คลิกปุ่ม
05 ลากคำ�สั่ง Take Picture
มาใสใ่ นอเี วนต์ Click
06 ลากอเี วนต์ After
Picture มาวาง
04 คลิกเลือก Camera1 After Picture เปน็ อีเวนต์ท่เี กิดขึ้น เมือ่ ผู้ใช้กดปุ่ม
ชตั เตอร์เพือ่ ถา่ ยภาพ ในอีเวนต์นี้มตี ัวแปร image
ซ่ึงเก็บชือ่ ไฟล์ภาพถ่าย และโฟลเดอรท์ ่เี กบ็ ภาพ
36 ค่มู ือสร้าง Application ด้วย
07 คลิกเลอื ก Image1 08 ลาก set Picture มาใส่ในอเี วนต์ After
Picture เพ่อื กำ�หนดชื่อของไฟลภ์ าพท่ี
09 เลอ่ื นเมาสไ์ ปชท้ี ต่ี วั แปร image จะแสดงท่ีคอมโพเนนต์ Image น้ี
ในอเี วนต์ After Picture รอสกั ครู่
ค�ำ สั่ง get และ set จะปรากฎ 10 ใหล้ าก get image มาวางตอ่ ทา้ ย
เปน็ การก�ำ หนดวา่ ให้ใช้ภาพทถ่ี า่ ยไดน้ น้ั
มาแสดงผลดว้ ยคอมโพเนนต์ Image1
11 คลิกเลอื ก Label1 12 ลาก set Text มาตอ่ จาก set Picture
เพื่อก�ำ หนดขอ้ ความที่จะแสดงที่ Label
สไตล์ drag-and-drop 37
13 คลิกขวาท่ีบล็อก get image แล้วเลือกคำ�ส่ัง
Duplicate จากเมนลู ดั เพอ่ื สรา้ งบลอ็ ก get image
ขน้ึ มาอีกอนั หนงึ่
14 ลาก get image ที่ได้จากการ
Duplicate มาต่อทา้ ย
บลอ็ กค�ำ สง่ั สว่ นน้ี ท�ำ เพอ่ื แสดงชอ่ื ไฟลภ์ าพถา่ ย และโฟลเดอรท์ เ่ี กบ็
ผา่ นทาง Label1 เพอ่ื ใหผ้ ใู้ ชท้ ราบวา่ ไฟลภ์ าพถา่ ยนั้นจัดเกบ็ ไวท้ ี่ไหน
Do Scan เปน็ ค�ำ สง่ั ในคอมโพเนนต์ Barcode 15 นำ�อเี วนต์ Click ของปมุ่ Button2 มาวาง
Scanner ใชส้ ง่ั ใหเ้ ปดิ กลอ้ งเพอ่ื สแกนบารโ์ คด้ ป่มุ นเ้ี ป็นปุ่มส่งั สแกนบาร์โค้ด
16 คลิก Barcode_Scanner1 17 ลากค�ำ สง่ั Do Scan ไปใส่
ในอีเวนต์ Click
After Scan เปน็ อีเวนตท์ ่ีเกดิ ขนึ้ เมอ่ื สามารถ 18 ลากอีเวนต์ After Scan มาวาง
สแกนบารโ์ คด้ ไดส้ ำ�เรจ็ ในอีเวนตน์ มี้ ีตวั แปร
result ซึ่งเก็บข้อมูลทไ่ี ดจ้ ากการสแกน
38 คมู่ ือสร้าง Application ดว้ ย
19 น�ำ set Text จาก Label1 21 น�ำ get result มาตอ่ ท้าย
มาวางในอเี วนต์ After Scan
บลอ็ กค�ำ สง่ั สว่ นน้ี ใชแ้ สดงขอ้ มลู ทไ่ี ดจ้ ากการ 20 เลื่อนเมาสไ์ ปชี้ทีต่ วั แปร result
สแกนบารโ์ คด้ ผา่ นทาง Label1 รอสกั ครู่ คำ�สงั่ get / set จะปรากฎ
22 นำ�อีเวนต์ Click ของปุ่ม
Button3 มาวาง
24 น�ำ บลอ็ ก Toggle Light
มาวางในอีเวนต์
23 คลกิ เลือก Camera1 Toggle Light เปน็ ค�ำ ส่งั ในคอมโพเนนต์
</> Camera ส�ำ หรับเปิด-ปิดไฟแฟลช โดยการ
สง่ั งานแต่ละคร้ัง จะทำ�ให้เปิด-ปิด สลับกนั
สไตล์ drag-and-drop 39
สรปุ การทำ�งานของโปรแกรม
โปรแกรมทัง้ หมดของแอปนี้ ประกอบด้วยโฟลว์การท�ำ งานยอ่ ย 5 อนั ตามท่เี ราออกแบบไวต้ ั้งแต่แรก
(หน้า 34) และใช้บล็อกคำ�ส่ังไปท้ังส้ินเพียง 14 บล็อกเท่าน้ัน โดยเราสามารถสรุปการทำ�งานของ
โปรแกรมได้ดงั น้ี
เม่อื ผู้ใช้คลกิ ปมุ่ Button1 กจ็ ะเกดิ อีเวนต์
Click ขนึ้ ภายในอเี วนต์ เราสงั่ ใหเ้ ปดิ กลอ้ ง
เพอ่ื ถา่ ยภาพดว้ ยค�ำ ส่ัง Take Picture
และเมื่อผู้ใช้คลิกปุ่มชัตเตอร์เพื่อถ่ายภาพ
ก็จะเกิดอีเวนต์ After Picture ตามมา
เรานำ�ชื่อไฟล์ภาพและโฟลเดอร์ในตัวแปร
image มากำ�หนดพร็อพเพอรต์ ี้ Picture
เพ่ือแสดงภาพทีถ่ ่ายด้วย Image1 และนำ�
ชื่อไฟล์นั้นไปกำ�หนดพร็อพเพอร์ต้ี Text
เพ่อื แสดงผลทาง Label1
ในกรณีท่ีผู้ใช้คลิกปุ่ม Button2 ก็จะเกิด
อเี วนต์ Click ขึน้ ภายในอเี วนต์ เราสงั่ ให้
เปิดกล้องเพื่อสแกนบาร์โค้ดด้วยคำ�ส่ัง
Do Scan
เม่อื สามารถสแกนบาร์โคด้ ไดแ้ ล้ว ก็จะเกิด
อเี วนต์ After Scan พร้อมขอ้ มูลทีส่ แกน
ไดอ้ ยใู่ นตวั แปร result เรานำ�ข้อมูลน้นั มา
กำ�หนดพร็อพเพอร์ต้ี Text เพื่อแสดง
ขอ้ มูลทาง Label1
สุดท้าย ในกรณีที่ผู้ใช้คลิกปุ่ม Button3
กจ็ ะเกดิ อเี วนต์ Click เชน่ กนั ภายในอเี วนต์
เราส่ังให้เปิด-ปิดไฟแฟลชของกล้องด้วย
คำ�สงั่ Toggle Light
และน่กี ค็ อื โปรแกรมทง้ั หมดของแอปน้!ี
40 คู่มือสร้าง Application ดว้ ย
ทดสอบแอป
เราสามารถทดสอบการทำ�งานของแอปที่เราสร้างข้ึนได้ ด้วยแอป Kodular Companion โดยเป็น
การทดสอบบนอุปกรณแ์ อนดรอยด์จรงิ และหากมีจดุ ผิดพลาด ก็สามารถแกไ้ ข แลว้ ทดสอบต่อไดเ้ ลย
ในการทดสอบแอป จะตอ้ งเตรยี มตัวดงั น้ี
01 ตดิ ตั้งแอป Kodular Companion ในอุปกรณ์แอนดรอยด์
ดาวน์โหลดได้ฟรจี าก Google Play
https://play.google.com/store/apps/
details?id=io.makeroid.companion
หรอื สแกน QR Code น้ี
02 เชอ่ื มตอ่ อปุ กรณแ์ อนดรอยดผ์ า่ น WiFi โดยจะตอ้ งเปน็ เครอื ขา่ ยเดยี วกบั เครอ่ื งคอมพวิ เตอร์
ท่ีใช้ในการพัฒนาแอปด้วย และอุปกรณ์ท้ังหมด ต้องเช่ือมต่อกับอินเทอร์เน็ต หากเชื่อมต่อ
อนิ เทอร์เนต็ ผ่านทาง Hotspot หรือเครือข่ายโทรศัพทม์ อื ถือ อาจท�ำ งานช้ากว่า
03 คลกิ เมนู Test เลอื ก Connect to companion
04 รอสกั ครู่ จะปรากฎ QR Code พรอ้ มรหสั สำ�หรบั การเช่อื มตอ่
สไตล์ drag-and-drop 41
05 รนั แอป Kodular Companion
คลิกปุ่ม Scan QR Code แล้วสแกน QR
Code บนหน้าจอคอมพิวเตอร์ หรือป้อน
รหัสทอ่ี ยขู่ า้ งๆ QR Code ลงในชอ่ งกไ็ ด้
รอสักครู่ จะมีการถ่ายโอนข้อมูลแอปไปสู่
อปุ กรณ์แอนดรอยด์ เม่อื ทุกอยา่ งเรียบรอ้ ย
แอปที่เราสร้างไว้กจ็ ะปรากฏบนหนา้ จอ
ขอ้ ควรทราบ
•• ระยะเวลาในการถา่ ยโอนขอ้ มลู เมอ่ื เรม่ิ เชอ่ื มตอ่ อาจเรว็ -ชา้ ขน้ึ กบั ความเรว็ อนิ เทอรเ์ นต็ และปรมิ าณ
ขอ้ มลู ในแอป และการเชอ่ื มตอ่ ครง้ั แรกอาจใชเ้ วลามาก เนอ่ื งจากตอ้ งถา่ ยโอนขอ้ มลู ทง้ั หมดไปบนั ทกึ
ไวใ้ นอุปกรณแ์ อนดรอยดก์ อ่ น แตใ่ นคร้งั ถดั ไปจะเรว็ ข้ึน เน่อื งจากมีข้อมูลเดมิ อย่แู ลว้
•• เมอ่ื มกี ารแกไ้ ข เปลย่ี นแปลงใดๆ ในหนา้ Designer เชน่ คอมโพเนนต์ เลยเ์ อาต์ หรือพร็อพเพอรต์ ้ี
แอป Companion จะเริ่มต้นทำ�งานใหม่ทุกครั้ง ทำ�ให้เราได้เห็นส่ิงที่เปล่ียนแปลงบนอุปกรณ์
แอนดรอยด์ไดท้ นั ที
•• หากแอป Companion หยุดทำ�งาน ซึ่งอาจเกดิ จากมีการเร่ิมใหม่หลายๆ ครง้ั ให้แก้ไขดงั นี้
•• ป ดิ แอป Companion แล้วเปิดใหม่
•• ไปท่ีเวบ็ Kodular คลิกเมนู Test และ Reset connection เพือ่ ตดั การเช่อื มตอ่
•• แล้วเชื่อมต่อแอป Companion กับเว็บ Kodular อีกคร้งั
•• การแก้ไข เปลี่ยนแปลงในส่วนของโปรแกรม จะไม่ทำ�ให้แอป Companion เร่ิมต้นทำ�งานใหม่
เราสามารถทดสอบโปรแกรมที่แก้ไขนนั้ ไดเ้ ลย ยกเว้นในกรณีที่ท�ำ งานในโปรแกรมส่วนนนั้ ไปแลว้
•• แอปทที่ ดสอบดว้ ยแอป Companion อาจทำ�งานชา้ กว่าที่ควรจะเป็นจรงิ
•• การทดสอบด้วยแอป Companion อาจไม่ครอบคลุมทกุ กรณี เชน่
•• กรณที ่ีแอปมีหลายสกรีน จะมีเพยี งสกรีนเดยี วทีท่ �ำ งานเทา่ น้นั
•• ไม่สามารถทดสอบระบบลอ็ กอนิ ด้วย Firebase ได้ เปน็ ต้น
42 ค่มู ือสร้าง Application ดว้ ย
สร้างไฟล์ตดิ ตัง้ แอป
เม่ือทดสอบการทำ�งานจนเรียบร้อยแล้ว ก็จะถึงขั้นตอนการ Export แอปเป็นไฟล์ apk เพ่ือนำ�ไป
ตดิ ตั้งบนอุปกรณ์แอนดรอยดต์ ่างๆ (apk ย่อมาจาก application package)
01 คลกิ เมนู Export เลอื ก Generate QR code for app
02
หรือคลกิ ลิงกน์ ้ีเพอ่ื ดาวน์โหลด
ไฟล์ apk มาไว้ในคอมพวิ เตอร์
QR Code น้ีมีอายใุ ชง้ าน
ได้เพียง 2 ชัว่ โมงเท่าน้ัน
02 ใชแ้ อปสแกนบาร์โค้ดในอุปกรณ์แอนดรอยด์ เพ่ือสแกน QR Code น้ี
ขอ้ มลู ทอี่ ย่ใู น QR Code กค็ อื ลิงก์ในการดาวน์โหลดไฟล์ apk นน่ั เอง
หมายเหตุ
•• QR Code นีเ้ ปน็ คนละอนั กับตอนท่ีทดสอบแอปด้วย Kodular Companion
•• หากต้องการแชร์ไฟล์ apk นี้ให้คนอื่นนำ�ไปตดิ ต้ัง ก็ให้คลกิ ลิงกใ์ นไดอะล็อก
เพื่อดาวน์โหลดไฟล์ apk มาไวใ้ นคอมพวิ เตอรแ์ ทน
•• นอกจากน้ี เรายังใชไ้ ฟล์ apk น้ี เพ่อื ส่งแอปข้ึน Google Play Store ได้ดว้ ย
สไตล์ drag-and-drop 43
กอ่ นท่จี ะใชแ้ อปสแกน QR Code แนะนำ�ใหป้ ิดหนา้ เวบ็ ทีเ่ ปดิ ค้างอยูใ่ หห้ มด ตามขั้นตอนนี้
03 ในตวั อยา่ ง คอื แอปบราวเซอร์ Chrome
ตัวเลขน้ีแสดงวา่ มกี ารเปิดหนา้ เว็บคา้ ง
ไวห้ ลายหนา้ ใหค้ ลกิ ท่ีปมุ่ น้ี
04 คลิกปุม่ เพ่อื แสดงเมนู
05 เมอ่ื เมนปู รากฎ ใหค้ ลกิ Close all tabs
เพอ่ื ปิดหนา้ เว็บท่ีเปิดคา้ งไว้ทงั้ หมด
06 ใชแ้ อปสแกนบาร์โคด้ สแกน QR Code ท่ีหน้าจอ
คอมพิวเตอร์ แลว้ สง่ั ใหเ้ ปิดเบราว์เซอร์
44 ค่มู อื สรา้ ง Application ดว้ ย
เน่ืองจากระบบปฏิบัติการแอนดรอยด์มีหลายเวอร์ชัน และอาจมีความแตกต่างกันตาม
ผผู้ ลติ โทรศพั ท์ นอกจากน้ี ผใู้ ชอ้ าจเลอื กใชภ้ าษาไทยหรอื องั กฤษกไ็ ด้ ดงั นนั้ ตวั อยา่ งหนา้ จอ
ทแ่ี สดงในขน้ั ตอนตอ่ ไปน้ี อาจแตกตา่ งออกไป ขอใหผ้ อู้ า่ นพยายามท�ำ ความเขา้ ใจในหลกั การ
และอ่านขอ้ ความให้เข้าใจชัดเจน ก่อนจะคลิกปมุ่ ใดๆ
แหล่งท่ีไม่ร้ทู ่ีมา (Unknown source) ลงิ กท์ ดี่ าวนโ์ หลดไฟล์ apk
จากเวบ็ Kodular
โดยทั่วไป ระบบปฏิบัติการแอนดรอยด์จะไม่อนุญาต
ให้ติดตั้งแอปจากแหล่งท่ีไม่รู้ที่มา หรือ Unknown
source เพราะอาจท�ำ ใหเ้ กดิ ความเสยี หายกบั อปุ กรณ์
แอนดรอยด์ได้ ซ่ึงหมายรวมถึงการติดต้ังไฟล์ apk
ทเ่ี รา export มาจากเวบ็ Kodular ดว้ ย ดงั นน้ั เราจงึ
ต้องเปลี่ยนค่า settings ของแอนดรอยด์เพื่อ
อนุญาตให้ตดิ ต้งั แอปจากแหลง่ ทไ่ี ม่รูท้ ่มี า
07 ก่อนท่ีจะดาวน์โหลดไฟล์ apk ก็จะมี
ขอ้ ความเตอื นวา่ ไฟลน์ อ้ี าจเปน็ อนั ตราย
ตอ่ อปุ กรณข์ องคณุ ในกรณนี ใ้ี หค้ ลกิ OK
(หรอื Download)
08 เมื่อดาวน์โหลดไฟล์ apk มาได้แล้ว
ให้เปดิ ไฟล์ โดยคลกิ Open
10 คลกิ เปดิ สวติ ช์ เพ่อื อนญุ าต
ให้ติดตงั้ แอปจากแหลง่ นี้
09 ข้อความเตือนวา่ ไม่อนุญาต
ใหต้ ิดตัง้ แอปจากแหลง่ น้ี
ใหค้ ลิก SETTINGS
สไตล์ drag-and-drop 45
ในสว่ นของ Google Play Protect กม็ กี ารสแกน
แอปกอ่ นติดต้งั อีกชน้ั หนึ่ง
11 เมอ่ื กดปุ่ม Back จะกลบั มา 12 แนะน�ำ ให้อา่ นข้อความในไดอะลอ็ ก
ท่หี นา้ นี้ ใหค้ ลกิ ปุ่ม INSTALL ก่อนจะคลิกป่มุ ใดๆ อยา่ งในกรณนี ี้
เพอื่ เร่ิมติดตั้งแอป Play Protect เตือนวา่ แอปนี้อาจไม่
ปลอดภยั ใหค้ ลกิ INSTALL ANYWAY
13 เมอื่ ตดิ ตัง้ แอปเรียบรอ้ ยแลว้ ใหค้ ลิก
OPEN เพ่อื เปดิ แอปมาลองใชง้ าน
ขน้ั ตอนการเซตคา่ เพอ่ื อนญุ าตใหต้ ดิ ตง้ั แอป
จากแหล่งท่ีไม่รู้ที่มา และอนุญาตให้ Play
Protect ติดตั้งแอปนี้ จะทำ�เพียงครั้งเดียว
ในตอนที่ติดตง้ั แอปครงั้ แรก หลังจากนี้ ก็จะ
สามารถตดิ ต้งั แอปจาก Kodular ไดเ้ ลย
เพม่ิ พลงั สร้างสรรค์
ใหโ้ ครงงาน micro:bit ดว้ ยหนังสือ
รวมโครงงาน คมั ภรี ร์ วม Extension
micro:bit เพิม่ พลงั ให้ micro:bit
แพก็ คู่ 420 บาท
ส่ังซ้อื ไดท้ ี่ http://fb.me/narongporn.lao