หน่วยที่ 2 เตรียมความพร้อมก่อนใช้งาน kodular

หนว่ ยท่ี 2
เตรยี มความพรอ้ มก่อนใช้งาน kodular

เตรียมเครอื่ งใหพ้ รอ้ มทกุ อย่างก็พร้อม

ตอ้ งเตรียมเคร่ืองมอื ต่าง ๆ ให้พร้อมกอ่ นการเร่ิมตน้ สร้างแอป

01 เครอื่ งคอมพิวเตอร์
เคร่ืองคอมพวิ เตอรส์ าหรบั
02
สรา้ งแอป จะเปน็ เคร่ืองพซี ี ระบบปฏบิ ตั กิ าร

เดสกท์ อปหรอื โนต๊ บุก๊ กไ็ ด้ ระบบปฏบิ ตั ิการ Windows, Mac
OS, Linux หรอื Ubuntu

03 Browser

เบราวเ์ ซอร์ 04 Internet + WiFi
เช่น Chrome, firefox, safari
ไมแ่ นะนาใหใ้ ช้ internet explorer สามารถเช่ือมต่ออินเตอร์เนต็ และ
หรอื Edge WiFi สาหรบั เช่ือมตอ่ กบั อุปกรณ์
เพ่อื ถา่ ยโอนข้อมูล

เรม่ิ ต้นการสร้างแอป

เม่อื เตรียมทกุ อยา่ งพรอ้ มแลว้ เร่ิมตน้ การใช้งาน kodular กนั เลย
เข้าไปท่ี https://www.kodular.io/

Login

ล็อกอินด้วย E-mail ของตนเอง ในท่นี ี้
แนะนาให้ใช้แอกเคานต์ Google

Let’s Go!

เร่ิมต้นใช้งาน Kodular หากตอ้ งการเรยี นรู้
วิธีใช้ Kodular ให้คลิกไอคอน Let’s Go

Create project

คลกิ ท่ีปุ่ม Create project เพ่อื มเร่ิม
สรา้ ง project ใหม่

Project name

คลิกท่ปี ุ่ม Create project เพ่อื มเร่มิ
สร้าง project ใหม่

การตง้ั ช่ือ Project
• ขน้ึ ต้นดว้ ยอักขระ A – Z, a – z และ_ เท่านั้น
• ไมม่ ีเวน้ วรรคระหวา่ งการตง้ั ช่ือ
• ช่ือ Project กบั ช่ือ App เปน็ คนละช่ือกันได้
เน่อื งจากสามารถแกไ้ ขไดใ้ นภายหลงั

Configure your project

กากหนดค่าให้กบั แอพแล้วกด Finish ใน
สว่ นนสี้ ามารถปรบั ตัง้ คา่ และแก้ไข
เพ่ิมเตมิ ได้ในภายหลัง

หนา้ ต่างของ Kodular

Kodular มีหน้าตา่ งในการใช้งาน 2 สว่ น ไดแ้ ก่
1. หนา้ Designer

2. หนา้ Block Editor

หน้า Designer

เม่ือเปิดโปรเจ็กต์ขึ้นมา จะพบหนา้ Designer เปน็ หน้าสาหรับการออกแบบ A
โดยสามารถสร้างแอปท่ีมีหลาย Screen (แต่ไมค่ วรเกนิ 10 สกรีน)

02 01
03
Component
แบง่ ออกเปน็ 16 กลุม่

Application โดยมีสว่ นประกอบตา่ ง ๆ ใหเ้ รานามาวางในหน้าจอ Screen

04

05

สว่ นประกอบของ หน้า Designer

สว่ นท่ี 1 Menu เปน็ แหล่งรวมคาส่งั ท่เี อาไว้ใช้สาหรับแอปพลเิ คชัน ดงั นี้
• Project เปน็ เมนูสาหรบั จดั การ Project เช่น สรา้ ง Project ใหม่ หรือ ลบ Project เปน็ ตน้
• Test ใช้แสดงผลการทางานเม่ือจาลองผา่ นมือถือจริงๆ
• Export สามารถนา Project เราแปลงเปน็ ไฟล์ APK ไฟลท์ ่ีสามารถตดิ ตงั้ บนมือถอื
• Help เม่อื มปี ัญหาสามารถแจง้ ได้
• My Project แหลง่ รวบรวม Project ของเราท่ีสร้างไว้
• Community แหลง่ พูดคุยแลกเปล่ยี น ถามปัญหาเก่ยี วกบั Kodular

• Docs อธิบายการทางานใหผ้ ูเ้ รยี นศึกษา

• Donate ถา้ ผู้ใช้ต้องการสนบั สนนุ ทีมงานสรา้ ง Kodular สามารถโอนเงินไดห้ ลากหลายช่องทาง
• Account ใช้จดั การบัญชี Kodular ของเรา
สว่ นท่ี 2 Design ใช้ออกแบบหนา้ จอแอปพลเิ คชัน ภายในส่วนนจ้ี ะประกอบดว้ ยคอมโพเนนต์หลัก 16 กล่มุ
ในแต่ละกลุ่มจะแบง่ สว่ นการทางานย่อยออกเปน็ ส่วน ๆ ใหผ้ ู้ใช้สามารถนามาใช้ในการออกแบบหนา้ จอแอป
พลิเคชัน
สว่ นท่ี 3 Screen แสดงผลการออกแบบหนา้ จอแอปพลิเคชัน ใช้สาหรับลากวางส่วนประกอบ (Component)
ในสว่ นน้นี อกจากจะแสดงตัวอย่างบนสมาร์ทโฟนแล้วยงั สามารถปรบั ใหแ้ สดงตวั อย่างบนแทบ็ เล็ตไดด้ ้วย
สว่ นท่ี 4 Blocks ใช้ออกแบบการทางานของแอปพลิเคชันลาก - วาง บล็อคการทางานท่เี ปรียบเสมือนการ
เขยี น Code
สว่ นท่ี 5 Property ใช้กาหนดคุณสมบัติของแอปพลเิ คชัน และกาหนดคุณสมบตั ิของส่วนประกอบ
(Component) ต่างๆ



หน้า Block Editor

หน้า Block Editor เปน็ หน้าท่ใี ช้ในการเขยี นโค้ดควบคุมการทางานของแอป
คือ กลุม่ Built-in และ Component โดยวิธกี ารเขียนโปรแกรมจะทาได้โดยก

Built–in Block
คือ บลอ็ กคาส่งั ท่ัวไป
เปน็ คาส่ังพนื้ ฐาน

เม่อื คลกิ ท่ีกลุ่มใดคาส่งั
ทัง้ หมดในกลุ่มน้นั กจ็ ะ
ปรากฏ

Component Block
คอื บล็อกท่ีมากับ
คอมโพเนนตต์ า่ งๆ ท่ีเรา
นามาใชใ้ นโปรเจกต์

บล็อกคาส่งั ท้ังหมดในกลุ่มท่ีเลือก

ซ่ึงคาส่ังตา่ ง ๆ มกี ารทางานเปน็ บล็อก โดยแบ่งออกเปน็ 2 กลุ่มใหญ่ ๆ
การลากคาส่งั มาวางตอ่ กนั

Backpack ใช้เกบ็ หรอื กอ็ ปป้ีโคด้ บลอ็ ก
เพ่อื นาไปใช้ในสกรนี หรอื ในโปรเจกตอ์ ่นื ๆ

เม่ือคลกิ ขวาจะปรากฏ ซูมยอ่ หรือขยายโค้ด
เมนูลดั และคาส่งั

ใชล้ บบล็อกท่ไี มต่ ้องการ โดยการลากมาใสใ่ นถังขยะน้ี

เมนู และคาส่งั

เมนู Project

ไปยงั หน้ารวมโปรเจกต์

สร้างโปรเจกต์ใหม่

บันทกึ โปรเจกตเ์ ก็บไวบ้ นเวบ็
บันทึกโปรเจกตเ์ ปน็ อีกช่ือซ่ึงจะได้เปน็ อีกโปรเจกตใ์ น
ช่ือใหม่
ลบโปรเจกตท์ ่เี ปิดอยู่

อัปโหลดไฟลโ์ ปรเจกต์ หรือไฟล์สกรนี จาก
คอมพวิ เตอร์ เพ่อื ใช้ในการแก้ไข
ดาวนโ์ หลดไฟล์โปรเจกตห์ รือไฟล์สกรนี ไวท้ ่ี

คอมพิวเตอร์
ดาวน์โหลดโปรเจกตท์ งั้ หมดมาไว้ท่คี อมพิวเตอร์

เมนู Test

ทดสอบการใช้งานแอพรว่ มกบั แอพ Kodular Companion ผา่ น WiFi
ทดสอบแอพโดยการเช่ือมตอ่ USB
ตดั การเช่ือมต่อระหวา่ งแอนดรอยด์กบั คอมพวิ เตอร์ เม่อื หยุดการทดสอบ

รเี ฟรชหน้าจอของแอพ Kodular Companion

เมนู Export

เม่ือ Export แบบ Android App (.apk) จะสามารถดาวนโ์ หลดไฟล์
.apk มาไวใ้ นเคร่อื งคอมพิวเตอร์
เม่ือ Export แบบ Android App Bundles จะทาให้การดาวนโ์ หลดแอป

หมายเหตุ ไปติดตงั้ มีประสทิ ธภิ าพมากขึ้น ไฟลข์ นาดเลก็ ลง
 .aia เปน็ ไฟลต์ ้นฉบับ สามารถอัปโหลดขน้ึ เวบ็ kodular เพ่อื แกไ้ ขได้
 .ais เปน็ ไฟล์ต้นฉบบั เฉพาะสกรีนท่เี ราส่งั บันทกึ สามารถอัพโหลดใสใ่ นโปรเจก็ ได้
 .apk เปน็ ไฟล์สาหรับติดต้ังบนอุปกรณ์แอนดรอยด์ ไมส่ ามารถเปิดเพ่ือแก้ไขได้
 .aab เปน็ ไฟลส์ าหรับตดิ ต้งั บนอุปกรณแ์ อนดรอยด์ ไมส่ ามารถเปิดเพ่อื แกไ้ ขได้ โดยตัด
ไฟล์ท่ไี มจ่ าเปน็ ต่อเคร่ืองออกไป ทาให้ใช้เวลาดาวนโ์ หลดนอ้ ยลง เพราะไฟล์มขี นาดเลก็ ลง