Kodular E-Book

การใช้งาน Kodular

จัดทาโดย
อนันต์ เลขวรรณวจิ ติ ร

Kodular เปน็ โปรแกรมประเภท

Native Application คือ แอปพลเิ คชัน่ ทถ่ี กู
พฒั นาขึ้นโดยอาศยั Library หรอื SDK
ของแพลตฟอร์มน้ันๆ และจะต้องพฒั นา
ดว้ ยภาษาของแต่ละแพลตฟอร์ม เชน่

 iOS สาหรับ iPhone, iPad, Apple
Watch จะใชภ้ าษา Objective-C, Swift
การพัฒนาจะต้องใช้โปรแกรม XCode

 Android จะใช้ภาษา Java และใช้
โปรแกรม Android Studio, Kodular
หรือ MIT Inventor ในการพฒั นา

 Windows Phone ใชภ้ าษา C#
และใชโ้ ปรแกรม Visual Studio ในการ
พัฒนา

ข้นั ตอนการใช้งาน
1. เปิดเว็บบราวน์เซอร์ เชน่ Google
Chrome แล้วพิมพ์ที่ URL ว่า Kodular.io
จะปรากฏหน้าจอดังภาพ

2. คลกิ ปมุ่ CREATE APPS! จะปรากฏ
หนา้ จอดังภาพ

3. ให้เลอื ก Sign in with Google จะ
ปรากฏหนา้ จอดงั ภาพ

4. ใหเ้ ลอื กบญั ชอี ีเมลท่ตี ้องการ และพมิ พ์
รหสั ผ่านของบัญชอี เี มลใหถ้ กู ต้อง จะ
ปรากฏหนา้ จอดังภาพ

5. สร้างโปรเจก็ ให้เลือก Create project
จะปรากฏหน้าจอดงั ภาพ

6. ให้พมิ พ์ชอ่ื โปรเจก๊ ท่ตี ้องการในช่อง
Project name ในการสาธิตครง้ั น้จี ะทา
ขอ้ มูลเกี่ยวกบั ประวตั สิ ว่ นตัว ใหพ้ มิ พ์คาว่า
Resume ดงั ภาพ

7. คลิกปมุ่ Next จะปรากฏหนา้ จอดังภาพ
8. คลิกป่มุ Finish จะปรากฏหน้าจอดังภาพ

สว่ นประกอบตา่ งๆ ของ Kodular



หมายเลข  คือ เมนู (Menu) เป็น
แหลง่ รวมคาสั่งต่างๆ สาหรับใช้งาน ดังน้ี
1. Project เปน็ เมนูสาหรับจัดการโพรเจกต์
เช่น สร้าง บันทึก นาเขา้ และส่งออกโพรเจกต์
ดงั ภาพ

2. Test เปน็ เมนูสาหรบั ทดสอบงานทีส่ รา้ ง
ผา่ นการสแกน QR Code ชองมือถอื

3. Export เปน็ เมนสู าหรบั แปลงเปน็ ไฟล์
APK และไฟล์ AAB

4. Help เป็นเมนูให้ความชว่ ยเหลือในการ
ใช้โปรแกรม

สว่ นประกอบตา่ งๆ ของ Kodular



หมายเลข  คอื กลุ่มตัวช่วยตา่ งๆ
(Assistance) ประกอบดว้ ย
1. My Projects เปน็ แหลง่ รวบรวมโพร
เจกต์ท่ีสร้างไว้

2. Community เปน็ แหล่งพูดคุย
แลกเปลย่ี น ถามปัญหาเก่ียวกบั Kodular

3. Docs อธิบายการทางานใหผ้ ใู้ ชง้ านได้
ศึกษา

4. Donate แหล่งสนบั สนุนทมี งานสร้าง
Kodular

5. Account ใช้จัดการบญั ชผี ู้ใช้งาน และ
การออกจาก Kodular

สว่ นประกอบต่างๆ ของ Kodular

  

หมายเลข  คือ ช่ือโพรเจกต์ (Project
Name) ในท่นี ้คี อื Resume
หมายเลข  คอื กลุม่ สกรนี (Screen)
ประกอบด้วย

1. Screen1 หน้าจอทส่ี ร้างขนึ้ แต่ละหนา้
2. Add Screen เปน็ การเพิ่มหนา้ จอ
3. Copy Screen เปน็ การทาสาเนา
หนา้ จอ

4. Remove Screen เปน็ การลบหน้าจอ

สว่ นประกอบต่างๆ ของ Kodular

  



หมายเลข  คอื เครอื่ งมือในการสรา้ งโพร
เจกต์ ประกอบดว้ ย

1. Assets Manager เป็นการจดั การ
ไฟลต์ ่างๆ ท่ีต้องใช้ในโพรเจกต์ เชน่ ไฟล์
รูปภาพ เสยี ง วีดทิ ศั น์ หรือข้อความ

2. Project Settings เป็นการกาหนดค่า
ต่างๆ ของโพรเจกต์ เชน่ ช่อื แอปพลิเคชัน
ไอคอนของแอปพลิเคชนั กาหนดสีหนา้ จอ
แอปพลิเคชนั การเผยแพร่ ฯลฯ

3. Designer เปน็ สว่ นออกแบบหนา้ จอ
แอปพลเิ คชันที่จะสรา้ ง เชน่ พิมพ์ขอ้ ความ
สร้างชอ่ งกรอกข้อมูล ใส่รูปภาพ สรา้ งปมุ่
ใสค่ ลิป Youtube ฯลฯ เป็นหนา้ จอแรก
หลังจากสร้างโพรเจกต์

4. Blocks เป็นสรา้ งแอปพลิเคชัน โดยการ
ลากและวางบล็อกตา่ งๆ แทนการเขยี นโคด้

โปรแกรม

สว่ นประกอบต่างๆ ของ Kodular

  



หมายเลข  คอื Palette จะประกอบด้วย
คอมโพเนนต์ ซ่ึงหมายถึงวัตถุที่จะถูกวางบน
หน้าจอแอปพลิเคชันทอี่ อกแบบ โดยมี
คอมโพเนนต์ตา่ งๆ ดงั นี้

- User Interface เปน็ กลุ่มคอมโพเนนต์
พื้นฐานทม่ี ใี นทุกแอปพลเิ คชนั

- Layout เปน็ รปู แบบโครงสรา้ งสาหรบั
วางคอมโพเนนต์ตา่ งๆ

- Media เปน็ กลมุ่ คอมโพเนนต์เก่ยี วกับส่อื
ตา่ งๆ

- Drawing and Animation เป็นกลุ่ม
คอมโพเนนต์สาหรับการวาดและทาภาพ
เคลอ่ื นไหว

- Maps เป็นกลมุ่ คอมโพเนนต์สาหรบั
การสรา้ งแผนท่ี

- Sensors เป็นกลมุ่ คอมโพเนนต์สาหรับ
การสรา้ งเซนเซอร์ต่างๆ

- Social เป็นกลุม่ คอมโพเนนต์สาหรบั
การสรา้ งสอ่ื โซเซยี ลตา่ งๆ

- Storage เปน็ กลุ่มคอมโพเนนต์สาหรบั
การสรา้ งฐานขอ้ มลู และแหล่งเก็บขอ้ มลู

- Utilities เป็นกลมุ่ คอมโพเนนต์สาหรับ
โปรแกรมอรรถประโยชนต์ า่ งๆ

- Dynamic Components เป็นกลุม่
คอมโพเนนต์สาหรบั การสรา้ งคอมโพเนนต์
แบบไดนามกิ

- Connectivity เปน็ กลุม่ คอมโพเนนต์
สาหรับสร้างการตดิ ต่อส่อื สาร

ฯลฯ

ส่วนประกอบต่างๆ ของ Kodular

  







หมายเลข  คอื Viewer เปน็ หน้าจอ
แสดงผลทจ่ี ะลากคอมโพเนนต์มาวางไว้ เพอ่ื

สรา้ งแอปพลิเคชัน
หมายเลข  คือ All Components
เป็นสว่ นแสดงคอมโพเนนต์ทงั้ หมดทถี่ กู ลาก

มาวางไวบ้ น Viewer
หมายเลข  คือ Properties เป็นส่วน
สาหรบั ใชก้ าหนดคณุ สมบัติของคอมโพเนนต์

ต่างๆ

ขั้นตอนสร้างงานใน Kodular
1. หลังจากเข้ามายังหน้าจอหลักของ
โปรแกรม Kodular ใหล้ าก Label 3 อัน
จาก User Interface จะไดด้ งั ภาพ

2. เลือก Label1 แลว้ กาหนดขนาดตวั อกั ษร
ท่ี Font size เท่ากับ 24 ตวั หนา และ
เปล่ียนจาก Text for Label1 เปน็ คาว่า
ยนิ ดีตอ้ นรับ โดยพิมพ์ในชอ่ ง Text และจดั
ตาแหนง่ ใหอ้ ยตู่ รงกลาง โดยเลือกในชอ่ ง
Text Alignment เปน็ คาวา่ Center : 1
และเลอื กในชอ่ ง width เป็นคาวา่ Fill
parent จะไดด้ งั ภาพ

3. ส่วนอกี 2 ขอ้ ความ ใหเ้ ลอื ก Label2
แลว้ พมิ พค์ าว่า สู่ และ Label3 พิมพค์ าวา่
ประวตั สิ ว่ นตวั แลว้ กาหนดค่าต่างๆ ให้
เหมือนกบั Label1จะไดด้ งั ภาพ

5. ลาก Image จาก User Interface มา
วางตอ่ จาก Label3 จะไดด้ ังภาพ

6. กาหนดค่าต่างๆ ให้กับรูปภาพ เช่น จะ
สร้างลิงคโ์ ดยใช้รปู ภาพ ใหค้ ลิก Clickable
และกาหนดให้รปู ภาพมีขนาดพอดกี บั พน้ื ท่ี
ใหเ้ ลอื ก Height และ Width เปน็ คาว่า Fill
parent ดงั ภาพ

7. ดาเนนิ การ Upload file ในช่อง Picture
โดยคลกิ รูป Upload file จะปรากฏหนา้ ต่าง
ดังน้ี

8. คลกิ Upload asset จะปรากฏหนา้ ตา่ ง
ดังนี้

9. เลือก Upload file ทีละรปู จนครบตามที่
ต้องการ จะได้ดังภาพ

หมายเหตุ : เราสามารถตรวจสอบรูปภาพได้
โดยการคลกิ ไฟลร์ ูปภาพ จะปรากฏรูปภาพ

10. ปดิ หน้าตา่ งนี้ แลว้ ไปเลอื กรูปภาพที่
ต้องการในช่อง Picture จะได้ดังภาพ

11. คลกิ Add Screen เพ่ือเพ่มิ หน้าใหม่
จะปรากฏหนา้ ต่างดังภาพ

11. เปล่ยี นชอ่ื หนา้ Screen2 เป็นคาว่า
Resume เพราะหนา้ นี้จะทาเปน็ หนา้ ประวตั ิ
ส่วนตวั จะได้ดงั ภาพ

12. คลกิ ปมุ่ Create จะไดด้ งั ภาพ

13. หนา้ นี้จะพิมพป์ ระวัตสิ ่วนตวั หลาย
บรรทดั ให้ลาก Vertical Arrangement
จาก Layout > General จะไดด้ ังภาพ

14. ลาก Label จาก User Interface มา
วางใน Vertical Arrangement ตามความ
ตอ้ งการ จะได้ดงั ภาพ

15. พมิ พข์ ้อความทีละ Label และกาหนด
ขนาดตวั อกั ษรตามความตอ้ งการ จะได้
ดงั ภาพ

16. ลาก Image จาก User Interface มา
วางตอ่ จาก Label4 จะได้ดงั ภาพ

17. กาหนดคา่ ตา่ งๆ และเลือกรปู ภาพที่
ตอ้ งการในช่อง Picture จะได้ดงั ภาพ

18. ลาก Horizontal Arrangement จาก
Layout > General วางใต้รปู ภาพ จะได้
ดงั ภาพ

19. กาหนดใหอ้ ยกู่ ่ึงกลางแนวนอน และปรบั
ขนาดให้พอดกี ับแนวนอน โดยเลอื ก Center :
3 ในช่อง Align Horizontal และคลกิ เลอื ก
Fill parent ในชอ่ ง Width จะได้ดังภาพ

20. ลากปมุ่ (Button) จาก User Interface
มาใสใ่ น Horizontal Arrangement 2 ปมุ่
จะไดด้ ังภาพ

21. เปล่ยี นขอ้ ความ Button1 เปน็ คาวา่
กลับ และ Button2 เป็นคาว่า ถัดไป ในชอ่ ง
Text แลว้ กาหนดขนาดตัวอักษรและสีปมุ่ ตาม
ความตอ้ งการ จะไดด้ ังภาพ

22. คลิก Add Screen เพ่ือเพม่ิ หนา้ ใหม่
และพมิ พ์ชอื่ หนา้ วา่ Pictures ดังภาพ

23. คลกิ ปุ่ม Create จะไดด้ งั ภาพ

24. ลาก Vertical Scroll Arrangement
จาก Layout > General จะไดด้ ังภาพ

25. กาหนดใหอ้ ยู่ก่ึงกลางแนวนอน และปรับ
ขนาดใหพ้ อดกี บั แนวนอน โดยเลอื ก Center :
3 ในช่อง Align Horizontal และคลิกเลือก
Fill parent ในชอ่ ง Width จะไดด้ ังภาพ

26. ลาก Image จาก User Interface มา
ใสใ่ น Vertical Scroll Arrangement 3 อัน
จะได้ดังภาพ

27. ปรบั ทัง้ Image1, Image2 และ Image3
ใหเ้ ปน็ Fill parent ในช่อง Height และ
Width จะไดด้ ังภาพ

28. ลาก Horizontal Arrangement จาก
Layout > General วางใต้รปู ภาพ จะได้
ดงั ภาพ

29. กาหนดใหอ้ ยกู่ ่ึงกลางแนวนอน และปรบั
ขนาดให้พอดกี ับแนวนอน โดยเลอื ก Center :
3 ในช่อง Align Horizontal และคลกิ เลือก
Fill parent ในชอ่ ง Width จะได้ดังภาพ

30. ลากปุ่ม (Button) จาก User Interface
มาใสใ่ น Horizontal Arrangement 2 ปมุ่
จะไดด้ ังภาพ

31. เปลี่ยนข้อความ Button1 เป็นคาวา่
กลบั และ Button2 เป็นคาว่า หนา้ แรก ใน
ช่อง Text แลว้ กาหนดขนาดตวั อกั ษรและสี
ปุ่มตามความตอ้ งการ จะได้ดังภาพ

32. เลือกรปู ภาพในช่อง Image ใสใ่ น
Image1, Image2, Image3 จะได้ดังภาพ

33. เลอื กหน้า Screen1 แล้วเลือกคาว่า
Blocks ตรงมุมบนขวา จะไดด้ ังภาพ

34. เลอื ก Image1 แลว้ ลาก when Image1.
Click do มาวางส่วนของ Viewer เพอ่ื จะ
สรา้ งลิงค์ไปยงั หนา้ Resume จะได้ดังภาพ

35. เลือก Control แลว้ ลาก open another
screen screenName - Resume มาใสใ่ น
when Image1. Click do จะไดด้ งั ภาพ

36. เลือกหน้า Resume และ Image1 แลว้
ลาก when Image1. Click do มาวางสว่ น
ของ Viewer เพ่อื จะสร้างลงิ คไ์ ปยังหนา้
Pictures จะได้ดังภาพ

37. เลอื ก Control แล้วลาก open another
screen screenName - Resume มาใสใ่ น
When Image1. Click do จะไดด้ ังภาพ

38. เปลย่ี นจาก Resume เป็น Pictures
ดงั ภาพ

39. เลอื ก Button1 แลว้ ลาก when
Button1. Click do มาวางสว่ นของ Viewer
เพ่ือจะสร้างลิงค์ไปยังหนา้ Screen1 จะได้
ดังภาพ

40. เลือก Control แลว้ ลาก open
another screen screenName - Resume
มาใส่ใน when Button1. Click do จะได้
ดังภาพ

41. เปลยี่ นจาก Resume เปน็ Screen1
ดงั ภาพ

42. ชีท้ ่ี when Button1. Click do คลกิ
ขวา แล้วเลอื ก Duplicate ดังภาพ

43. จะได้ดังภาพ

44. เปล่ียนจาก Button1 เปน็ Button2
และเปลี่ยน Screen1 เปน็ Pictures จะได้
ดงั ภาพ

45. เลือกหนา้ Pictures และ Button1
แลว้ ลาก when Button1. Click do มาวาง
สว่ นของ Viewer เพือ่ จะสร้างลิงค์ไปยังหนา้
Resume จะไดด้ ังภาพ

46. เลือก Control แล้วลาก open
another screen screenName - Resume
มาใส่ใน when Button1. Click do จะได้
ดงั ภาพ

47. ช้ีที่ when Button1. Click do คลิก
ขวา แล้วเลือก Duplicate จะได้ดังภาพ

48. เปลี่ยนจาก Button1 เปน็ Button2
และเปล่ยี น Resume เปน็ Screen1 จะได้
ดงั ภาพ

49. ทดสอบการทางาน โดยเลือกเมนู Test
แล้วเลอื ก Connect to companion ดงั ภาพ

50. เปดิ โปรแกรม Kodular Companion
ในมอื ถอื แล้วนามาสแกน QR Code ดงั ภาพ
ก็จะแสดงหน้าตา่ งๆ ที่ได้สรา้ งไว้