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