วิธีการเข้าสู่โปรแกรม kodular

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

สารบัญ Show

วิธีการเข้าสู่โปรแกรม Kodular มีขั้นตอนอย่างไร
Kodular มีชื่อเดิมว่าอะไร
ขั้นตอนใดสำคัญที่สุดในการสร้างแอปพลิเคชัน
Application ประเภทใดที่ถูกเขียนขึ้นมาเพื่อเป็น Browser สำหรับการใช้งานเว็บเพจต่างๆ

Kodular Companion ช่วยให้ผู้สร้างแอปพลิเคชันใช้ Kodular เพื่อทดสอบแอปของตนได้โดยไม่ต้องส่งออกและรวบรวมแอปพลิเคชัน!

เพียงแค่ดาวน์โหลดแล้วเชื่อมต่อกับผู้สร้างและแอปของคุณจะปรากฏในแอปนี้ ประหยัดเวลาในการทดสอบแอปของคุณ แอปนี้เหมือนกับกระจกเงา: ถ้าคุณเปลี่ยนบางอย่างในตัวสร้างออนไลน์แอปก็จะอัปเดตแอปโดยอัตโนมัติโดยให้การแสดงตัวอย่างแบบเรียลไทม์
นอกจากนี้คุณยังสามารถตรวจสอบสถานะเซิร์ฟเวอร์ได้ง่ายๆด้วย Kodular Companion

ไปกันเถอะและสร้างแอป Android!

ในภารกิจนี้นักศึกษาทุกคนจะได้ศึกษาขั้นตอนการสร้าง Application สำหรับโทรศัพท์มือถือที่ทำงานบนระบบปฏิบัติการ Andriod ด้วยโปรแกรม Kodular Creator

เมื่อทำภารกิจนี้เสร็จแล้วนักศึกษาจะได้ Application บนโทรศัพท์มือถือที่สามารถวาดภาพ บันทึกภาพวาด และโหลดภาพที่วาดขึ้นมาดูได้ โดย Application จะมีลักษณะหน้าจอคล้ายกับตัวอย่างนี้

มาเริ่มทำภารกิจนี้กันเลยครับ...

คำอธิบาย: ให้นักศึกษาทำภารกิจให้เสร็จสมบูรณ์

0. ไปที่ Google Drive -> http://bit.ly/2XjZ6CX แล้วสร้าง Folder ใหม่ โดยตั้งชื่อตามรหัสประจำตัวของตนเอง เช่น "6XXXXXXXX" จากนั้นให้ Download ไฟล์ทั้งหมดใน Folder ชื่อ Quest04_Files

1. เปิดเว็บไซด์ -> https://www.kodular.io/ แล้วคลิกปุ่ม "Create Apps!" เพื่อเข้าสู่ระบบ Kodular Creator

2. ที่หน้าจอ Login ให้คลิกปุ่ม "G" ด้านล่าง แล้วเลือก Gmail Account มหาวิทยาลัยของนักศึกษา (ถ้าไม่สามารถใช้ Gmail ของมหาวิทยาลัยได้ ให้ใช้ Email สำรองที่นักศึกษาเคยแจ้งอาจารย์ไว้แทน)

3. เมื่อเข้าสู่ระบบ Kodular สำเร็จแล้ว จะพบกับหน้าจอเริ่มต้น เนื่องจากครั้งนี้ไม่ได้เป็นการเข้าสู่ Kodular ครั้งแรก นักศึกษาจะเห็นรายชื่อของ Project ที่ได้สร้างไว้ นักศึกษาสามารถคลิกที่ชื่อ Project ที่ต้องการเปิดขึ้นมาแก้ไข หรือในที่นี้เราต้องการสร้าง Application ใหม่ ให้คลิกที่ปุ่ม "Create Project" ทางด้านซ้ายมือของจอภาพเพื่อเริ่มสร้าง Project ใหม่

4. กรอกชื่อ Project ที่ช่อง Project Name โดยตั้งชื่อว่า "Sketchy6XXXXXXXX" จากนั้นให้กดปุ่ม "Next" (ชื่อ Project ห้ามขึ้นต้นด้วยตัวเลข ห้ามเว้นวรรค ต้องประกอบด้วยตัวอักษร ตัวเลข และเครื่องหมาย Underscore เท่านั้น)

5. ในขั้นตอนนี้นักศึกษาสามารถตั้งค่าเริ่มต้นให้กับ Project นี้ได้ ในที่นี้จะข้ามขั้นตอนนี้ไปก่อน เราสามารถเข้าไปตั้งค่าได้ในภายหลัง ให้กดปุ่ม Finish เพื่อเริ่มสร้าง Mobile App

6. เมื่อเข้าสู่ Project เรียบร้อยแล้ว ให้ศึกษาส่วนประกอบต่าง ๆ ของหน้าจอโปรแกรม Kodular Creator ซึ่งประกอบด้วยหน้าจอหลักอยู่ 3 ส่วนคือ

ลำดับชื่อหน้าจอหลักหน้าที่ตัวอย่าง6.1Assetsจัดเก็บไฟล์ต่าง ๆ ที่ใช้ในการสร้าง Appไฟล์ภาพ ไฟล์เสียง และไฟล์ข้อมูล เป็นต้น6.2Designerใช้ออกแบบลักษณะของหน้าจอ Appการสร้างปุ่ม การสร้างช่องกรอกข้อความ และการแสดงรูปภาพ เป็นต้น6.3Blocksใช้เขียนคำสั่งของ App ด้วยการลาก การวาง และการประกอบ Block คำสั่งเพื่อให้ App ทำงานตามที่ต้องการBlock ตรวจจับเหตุการณ์การกดปุ่ม Block ตรวจสอบเงื่อนไข และ Block ทำงานซ้ำเป็นวงรอบ เป็นต้น

7. ที่หน้าจอ Designer ให้ออกแบบหน้าโปรแกรมแกรม Sketchy6XXXXXXXX ด้วยการลาก Component จาก Palette ที่ด้านซ้ายของโปรแกรมลงไปวางไว้ที่ Screen1 ตามลำดับดังนี้

ลำดับPaletteComponent7.1Layout->GeneralHorizontal_Arrangement17.2User InterfaceButton1 (วางไว้ใน HorArr1)7.3User InterfaceButton2 (วางไว้ใน HorArr1)7.4User InterfaceButton3 (วางไว้ใน HorArr1)7.5Drawing & AnimationCanvas17.6Layout->GeneralHorizontal_Arrangement27.7Layout->GeneralVertical_Arrangement1 (วางไว้ใน HorArr2)7.8Layout->GeneralVertical_Arrangement2 (วางไว้ใน HorArr2)7.9Layout->GeneralVertical_Arrangement3 (วางไว้ใน HorArr2)7.10Layout->GeneralHorizontal_Arrangement3 (วางไว้ใน VerArr1)7.11User InterfaceLabel1 (วางไว้ใน HorArr3)7.12User InterfaceLabel2 (วางไว้ใน HorArr3)7.13User InterfaceSpinner1 (วางไว้ใน VerArr1)7.14User InterfaceLabel3 (วางไว้ใน VerArr2)7.15User InterfaceSpinner2 (วางไว้ใน VerArr2)7.16User InterfaceLabel4 (วางไว้ใน VerArr3)7.17User InterfaceSlider1 (วางไว้ใน VerArr3)7.18SensorsAccelerometer17.19StorageTiny_DB17.20User InterfaceNotifier1

8. ที่หน้าจอ Designer ให้คลิกที่ Component แต่ละชิ้นแล้วตั้งชื่อใหม่ให้สื่อความหมาย 2 ส่วน คือ 1) หน้าที่ของ Component และ 2) ชนิดของ Component ดังนี้

ลำดับชื่อเดิมของ Componentตั้งชื่อใหม่ (Rename)8.1Horizontal_Arrangement1HorArr18.2Button1 (วางไว้ใน HorArr1)LoadButton8.3Button2 (วางไว้ใน HorArr1)SaveButton8.4Button3 (วางไว้ใน HorArr1)ClearButton8.5Canvas1SketchingCanvas8.6Horizontal_Arrangement2HorArr28.7Vertical_Arrangement1 (วางไว้ใน HorArr2)VerArr18.8Vertical_Arrangement2 (วางไว้ใน HorArr2)VerArr28.9Vertical_Arrangement3 (วางไว้ใน HorArr2)VerArr38.10Horizontal_Arrangement3 (วางไว้ใน VerArr1)HorArr38.11Label1 (วางไว้ใน HorArr3)ColorLabel8.12Label2 (วางไว้ใน HorArr3)ColorSampleLabel8.13Spinner1 (วางไว้ใน VerArr1)ColorSpinner8.14Label3 (วางไว้ใน VerArr2)DotSizeLabel8.15Spinner2 (วางไว้ใน VerArr2)DotSizeSpinner8.16Label4 (วางไว้ใน VerArr3)LineWidthLabel8.17Slider1 (วางไว้ใน VerArr3)LineWidthSlider8.18Accelerometer1ใช้ชื่อเดิม8.19Tiny_DB1ใช้ชื่อเดิม8.20Notifier1ใช้ชื่อเดิม

9. ปรับแต่งคุณสมบัติของ Component ต่าง ๆ ที่หน้าจอ Properties ที่ด้านขวาของโปรแกรมดังนี้ (คำแนะนำ: สามารถปรับคุณสมบัติอื่น ๆ เพิ่มเติมได้)

ลำดับComponentPropertyValue9.0Screen1About Screen"App ชื่อ Sketchy6XXXXXXXX สร้างโดย <รหัสประจำตัว> <ชื่อ-สกุล> <หมู่เรียน> (icon มาจาก https://icons8.com/)"Iconหา Icon ที่สื่อความหมายเกี่ยวกับการวาดภาพด้วยตนเองจาก Internet เช่น https://icons8.com/Screen OrientationSensorShow Status BarFalseTitle"Sketchy6XXXXXXXX"Title VisibleFalse9.1HorArr1HeightAutomaticWidthFill Parent9.2LoadButtonFont BoldTrueFont Size20Text"Load"9.3SaveButtonFont BoldTrueFont Size20Text"Save"9.4ClearButtonFont BoldTrueFont Size20Text"Clear"9.5SketchingCanvasHeightFill ParentWidthFill Parent9.6HorArr2HeightAutomaticWidthFill Parent9.7VerArr1HeightFill ParentWidthFill ParentAlign HorizontalLeft: 19.8VerArr2HeightFill parentWidthFill ParentAlign HorizontalLeft: 19.9VerArr3HeightFill ParentWidthFill ParentAlign HorizontalLeft: 19.10HorArr3HeightAutomaticWidthFill Parent9.11ColorLabelFont BoldTrueFont Size20HeightAutomaticWidthAutomaticText"Color"9.12ColorSampleLabelBackground ColorBlackHeightFill ParentWidthFill ParentText""9.13ColorSpinnerElements from StringBlack, Red, Green, Blue (เพิ่มสีอื่น ๆ ได้อีก)WidthFill Parent9.14DotSizeLabelFont BoldTrueFont Size20HeightAutomaticWidthAutomaticText"Dot Size"9.15DotSizeSpinnerElements from String1 px.,3 px., 5 px. (เพิ่มค่านี้เพื่อกำหนดขนาดของจุดที่วาด)WidthFill Parent9.16LineWidthLabelFont BoldTrueFont Size20HeightAutomaticWidthAutomaticText"Line Width = 1"9.17LineWidthSliderWidthFill ParentMax Value5.0 (เพิ่มค่านี้เพื่อกำหนดขนาดสูงสุดของเส้นที่วาด)Min Value1.0Thumb Position1.09.18Accelerometer1Sensitivitystrong9.19Tiny_DB1--9.20Notifier1--

10. เมื่อออกแบบหน้าจอ และปรับแต่งคุณสมบัติของ Component เสร็จแล้ว ให้ Print Screen หน้าจอนี้้เก็บไว้ (ตัดมาเฉพาะส่วนที่เป็น Mockup เท่านั้น ดูตัวอย่างภาพด้านล่าง) แล้วตั้งชื่อไฟล์นี้ว่า "Sketchy6XXXXXXXX_Designer.jpg"

11. ที่หน้าจอ Blocks เขียนคำสั่งของโปรแกรมโดยลาก Block มาวางที่หน้าจอ Block Editor ดังนี้

11.1 วาง Block สร้างตัวแปรสาธารณะเพื่อใช้เก็บข้อมูล ขนาดของจุด (Dot Size) ที่จะวาด และกำหนดค่าเริ่มต้นเท่ากับ 1 pixel

11.2 วาง Block ตรวจสอบการเลือกสีที่จะใช้วาดภาพ หลังจากที่ผู้ใช้กดตัวเลือก Color (มี 4 สีให้เลือก คือ Black, Red, Green, และ Blue)

11.3 วาง Block ตรวจสอบการเลือกขนาดจุดที่จะวาด หลังจากที่ผู้ใช้กดตัวเลือก Dot Size (มี 3 ขนาดให้เลือก คือ 1, 3, และ 5 pixel)

11.4 วาง Block ตรวจสอบการเลือกความหนาของเส้นที่จะวาด หลังจากที่ผู้ใช้กดตัวเลือก Line Width (กำหนดความหนาของเส้นที่จะวาดได้ระหว่าง Min Value = 1 pixel ถึง Max Value = 5 pixel) พร้อมกับแสดงค่าความหนาของเส้นที่เลือกไว้

11.5 วาง Block ดักจับเหตุการณ์เมื่อผู้ใช้นำนิ้วไปแตะที่หน้าจอบนพื้นที่ SketchingCanvas สั่งให้เรียกใช้ Procedure ของ SketchingCanvas ชื่อ DrawCircle เพื่อวาดวงกลมโดยกำหนดจุดศูนย์กลาง (center X, center Y) เป็นตำแหน่งที่นิ้วแตะ กำหนดรัศมี (radius) เท่ากับค่าในต้วแปร DotSize และเทสี (fill) ลงในวงกลมด้วย

11.6 วาง Block ดักจับเหตุการณ์เมื่อผู้ใช้นำนิ้วไปแตะและลากที่หน้าจอบนพื้นที่ Canvas สั่งให้เรียกใช้ Procedure ของ Canvas ชื่อ DrawLine เพื่อวาดเส้น โดยกำหนดจุดเริ่มต้นของเส้น (x1 = ตำแหน่ง x ที่นิ่วแตะก่อนหน้า, y1 = ตำแหน่ง y ที่นิ่วแตะก่อนหน้า) และกำหนดจุดสิ้นสุดของเส้น (x2 = ตำแหน่ง x ที่นิ่วแตะในปัจจุบัน, y2 = ตำแหน่ง y ที่นิ่วแตะปัจจุบัน)

11.7 วาง Block ดักจับเหตุการณ์เมื่อผู้ใช้กดปุ่ม SaveButton ให้เรียกใช้ Procedure ของ Tiny_DB1 ชื่อ Store Value โดยกำหนด tag ของข้อมูลเป็น "picture" และค่าที่จะบันทึกเป็นภาพที่วาดไว้บน SketchingCanvas พร้อมกำหนดชื่อไฟล์เป็น "Sketchy6XXXXXXXX_Saved.png" จากนั้นให้แสดงข้อความแจ้งการบันทึกข้อมูลภาพ (Alert)

11.8 วาง Block ดักจับเหตุการณ์เมื่อผู้ใช้กดปุ่ม LoadButton ให้เรียกใช้ Procedure ของ Tiny_DB1 ชื่อ Get Value โดยกำหนด tag ของข้อมูลที่จะอ่านเป็น "picture" และถ้า Tag ไม่มีการบันทึกมาก่อนหน้านี้ ให้ใช้ชื่อไฟล์เป็น "Sketchy6XXXXXXXX_Saved.png" แล้วนำภาพไปแสดงที่ SketchingCanvas จากนั้นให้แสดงข้อความแจ้งการอ่านข้อมูลภาพ (Alert)

11.9 วาง Block ดักจับเหตุการณ์เมื่อผู้ใช้กดปุ่ม ClearButton ให้เรียกใช้ Procedure ของ SketchingCanvas ชื่อ Clear เพื่อลบภาพที่วาด และภาพที่แสดงทั้งหมด

11.10 วาง Block ดักจับเหตุการณ์เมื่อผู้ใช้เขย่าโทรศัพท์ (Shaking) ให้เรียกใช้ Procedure ของ SketchingCanvas ชื่อ Clear เพื่อลบภาพที่วาด และภาพที่แสดงทั้งหมด (ทำงานเหมือนกับการกดปุ่ม ClearButton)

12. เมื่อวาง Blocks เสร็จแล้ว ให้ Capture ภาพ Block ทั้งหมดเป็นไฟล์ภาพ จากนั้นให้ตั้งชื่อไฟล์นี้ว่า "Sketchy6XXXXXXXX_Blocks.jpg" ซึ่งมี 2 วิธี ดังนี้ (คำแนะนำ: สำหรับงานนี้ให้ใช้วิธี 12.2 เพราะต้องการแสดง Block ทั้งหมด)

12.1 วิธีการ Capture ภาพ Blocks โดยใช้วิธีการ PrintScreen แล้วนำไป Paste ลงโปรแกรมวาดภาพ เช่น Microsoft Paint หรือ Adobe Photoshop แล้ว Crop ภาพให้เหลือเฉพาะส่วนที่เป็น Block เท่านั้น จากนั้นให้ Save ชื่อภาพตามที่โจทย์กำหนด
12.2 วิธีการ Capture ภาพ Blocks ด้วยวิธีการ Download ให้คลิกขวาที่หน้าจอ Blocks แล้วเลือก "Download Blocks as Image" จากนั้น Web Browser จะ Download ไฟล์ภาพขื่อ "Blocks.png" ให้เปลี่ยนชื่อภาพตามที่โจทย์กำหนด

(หมายเหตุ: Block ในภาพยังไม่เสร็จสมบูรณ์ นักศึกษาต้องวาง Block บางส่วนด้วยตนเอง)

13. เมื่อประกอบ Block คำสั่งเสร็จแล้ว ให้ทดสอบการทำงานของ App เริ่มด้วยการไปที่ Google Play แล้ว Download และติดตั้งโปรแกรมสำหรับใช้ทดสอบชื่อว่า "Kodular Companion" ลงในโทรศัพท์ที่จะใช้ทดสอบ App นี้ (ถ้านักศึกษาไม่มีโทรศัพท์ Android ให้ใช้โปรแกรม BlueStack หรือ NOX เพื่อจำลองการทำงานของเครื่องโทรศัพท์ Android บนเครื่องคอมพิวเตอร์แทนได้)

14. ที่หน้าจอ Kodular ให้คลิกที่เมนู "Test" แล้วเลือกคำสั่ง "Connect to companion" แล้วรอจนกว่าจะปรากฎหน้าจอแสดง QR Code

15. เมื่อหน้าจอแสดง QR Code ปรากฎแล้ว ให้เปิดโปรแกรม "Kodular Companion" ที่โทรศัพท์มือถือแล้ว Scan QR Code หรือกรอก Code จากนั้นให้รอสักครู่ ถ้าไม่มีปัญหาใด ๆ App จะไปปรากฎบนโทรศัพท์

16. เมื่อ App ปรากฎบนโทรศัพท์แล้ว ให้นักศึกษาทดลองใช้โปรแกรมนี้บนโทรศัพท์ ให้ทดลองวาดจุด (แตะจอภาพ -> Dot) และเส้น (แตะแล้วลากบนจอภาพ -> Line) ให้ครบทุกสี และทุกขนาด ทดลองบันทึกภาพที่วาดลงโทรศัพท์ (Save -> จะได้ภาพชื่อ "Sketchy6XXXXXXXX_Saved.png" บันทึกอยู่ที่ Root ของ Internal Memory ในโทรศัพท์) ทดลองลบภาพที่วาด (Clear/Shake) และทดลองโหลดภาพที่บันทึกไว้ในโทรศัพท์ขึ้นมาดู (Load) เมื่อทดสอบครบแล้ว ให้เพิ่มความสามารถของโปรแกรมให้มากขึ้น เช่น ตบแต่งหน้าจอโปรแกรม เพิ่มตัวเลือกสี (Color) เพิ่มตัวเลือกขนาดของจุด (Dot Size) เพิ่มตัวเลือกความหนาของเส้น (Line Width) ใช้ Sound1 สั่งสั่นโทรศัพท์สั้น ๆ เมื่อผู้ใช้วาดจุด สั่นโทรศัพท์ยาวๆ เมื่อผู้ใช้เขย่าโทรศัพท์ แสดง Notifier แสดงข้อความให้ผู้ใช้ยืนยันการลบภาพที่วาด (Yes -> ลบ/No -> ไม่ลบ) หรือสร้างปุ่มออกจากโปรแกรมโดยมี Notifier แสดงข้อความให้ผู้ใช้ยืนยันการออกจากโปรแกรม (Yes -> ออก/No -> ไม่ออก) เป็นต้น จากนั้นให้ Capture หน้าจอนี้้เก็บไว้ โดยตั้งชื่อ "Sketchy6XXXXXXXX_Testing.jpg"

17. เมื่อทดสอบ App ได้ผลการทำงานที่ถูกต้องแล้ว ให้คลิกเมนู "Project" แล้วเลือกคำสั่ง "Save project" เพื่อบันทึก App ไว้ในระบบ Kodular

18. เพื่อเป็นการสำรองข้อมูล Project ให้นักศึกษา Export ไฟล์ Project เป็นไฟล์ AIA เก็บไว้ด้วยการคลิกเมนู "Project" แล้วเลือกคำสั่ง "Export selected project (.aia) to my computer แล้วตั้งชื่อไฟล์นี้ว่า "Sketchy6XXXXXXXX_Project.aia"

19. จากนั้นให้นักศึกษาสร้างไฟล์สำหรับใช้ติดตั้ง App นี้ลงโทรํศัพท์ ด้วยการคลิกที่เมนู "Export" แล้วเลือกคำสั่ง "Save .apk to my computer แล้วตั้งชื่อไฟล์นี้ว่า "Sketchy6XXXXXXXX_Install.apk"

20. เพื่อเป็นการทบทวนและแสดงความเข้าใจในการทำงานชิ้นนี้ ให้นักศึกษาถ่ายวิดีโอคลิปรีวิวโปรแกรมที่ตนเองสร้าง (Sketchy6XXXXXXXX) ความยาวประมาณ 2-3 นาที โดยต้องเห็นหน้าของนักศึกษา และ App ที่สร้าง แล้วตั้งชื่อไฟล์นี้ว่า "Sketchy6XXXXXXXX_Review.mp4" โดยการนำเสนอต้องมีประเด็นต่าง ๆ ครบถ้วนดังนี้...

20.1 แนะนำตัวเอง เกริ่นนำ
20.2 ทวนโจทย์ของโปรแกรมที่สร้าง
20.3 อธิบายการออกแบบหน้าจอ Design
20.4 อธิบายการวาง Blocks (เน้นข้อนี้มาก ๆ)
20.5 สาธิตการใช้งานโปรแกรม
20.6 ระบุความแตกต่างหรือความสามารถของ App ที่สร้างเพิ่มเติม (เน้นข้อนี้มาก ๆ)
20.7 อื่น ๆ (ถ้ามี)

(คำแนะนำ: เพื่อให้ได้ขนาดภาพที่ดี ควรถ่ายวิดีโอแนวนอนหรือ Landscape !!!)

21 Upload ไฟล์ผลงานทั้งหมดที่เสร็จสมบูรณ์แล้วจำนวนอย่างน้อย 7 ไฟล์ลง Folder ใน Google Drive ดังต่อไปนี้...

ลำดับรายการชื่อไฟล์21.1ไฟล์ภาพหน้าจอ Designer (*.png หรือ *.jpg)Sketchy6XXXXXXXX_Designer.png21.2ไฟล์ภาพหน้าจอ Blocks (*.png หรือ *.jpg)Sketchy6XXXXXXXX_Blocks.png21.3ไฟล์ภาพหน้าจอการทดสอบโปรแกรมบนโทรศัพท์มือถือ (*.png หรือ *.jpg)Sketchy6XXXXXXXX_Testing.png21.4ไฟล์ Project (*.aia)Sketchy6XXXXXXXX_Project.aia21.5ไฟล์ติดตั้งโปรแกรม (*.apk)Sketchy6XXXXXXXX_Install.apk21.6ไฟล์วิดีโอคลิปรีวิวโปรแกรม (*.mp4)Sketchy6XXXXXXXX_Review.mp421.7ไฟล์ภาพที่ทดลองวาดและบันทึกลงโทรศัพท์มือถือ (*.png)Sketchy6XXXXXXXX_Saved.png21.*ไฟล์อื่น ๆ (ถ้ามี) เช่น ไฟล์ Icon ไฟล์เสียง และไฟล์ภาพ ฯลฯSketchy6XXXXXXXX_ชื่อที่สื่อความหมาย.*

(*** การ Upload ไฟล์งานใน Google Drive เป็นการเก็บข้อมูลหลัก ***)

22. Submit ไฟล์ทั้งหมดจำนวนอย่างน้อย 7 ไฟล์ (ไฟล์เดียวกันกับที่ส่งใน Google Drive) ที่ A+ Assignment ด้วยการแนบไฟล์ ถ้ากรณีไฟล์มีขนาดใหญ่มากกว่าที่ Classraft รับได้ (ขนาดมากกว่า 25MB) ให้ส่งเฉพาะไฟล์นั้นเป็น Shared Link ที่สามารถกดเปิดได้แทน นักศึกษาควรเขียนข้อความอธิบาย แจ้งข้อมูลที่เกี่ยวกับการส่งชิ้นงานเพิ่มเติมได้ในส่วนนี้

(*** การ Submit ไฟล์งานใน Classcraft เป็นการเก็บข้อมูลสำรองและบันทึกเวลาส่งงาน ***)

23. ก่อนจบภารกิจให้นักศึกษาเข้าไปแสดงความคิดเห็นที่เกี่ยวกับภารกิจนี้ที่ Discussion เช่น ความยากหรือง่าย สิ่งที่ได้เรียนรู้ และคำแนะนำอื่น ๆ ในการทำภารกิจนี้ เป็นต้น

วิธีการเข้าสู่โปรแกรม Kodular มีขั้นตอนอย่างไร

Kodular เปิดให้ใช้ ฟรี.

ลงทะเบียน เข้าใช้งานที่ Kodular ทำการลงทะเบียน และเข้าสู่ระบบ.

สร้าง Projectคลิกที่ Create New Project และทำการตั้งชื่อ Project..

ออกแบบหน้าแอปพลิเคชัน ออกแบบหน้าจอแอปพลิเคชันตามที่เราต้องการ เพียงแค่ลาก-วางส่วนประกอบ (Component) ที่มีใน Kodular เท่านั้น.

Kodular มีชื่อเดิมว่าอะไร

เนื่องจากมีหลายคนถามมาว่า Kodular ต่างจาก App Inventor อย่างไร ก็ต้องบอกว่า Kodular มีรากฐานมาจาก App Inventor ดังนั้น แนวทางจะเหมือนกัน แต่ส่วนที่ต่างกัน อย่างเห็นได้ชัด คือ Kodular นั้นมีคอมโพเนนต์มากกว่า เยอะเลย และแอปที่ได้ออกมา ก็จะมีหน้าตาทันสมัยเหมือนแอปรุ่นใหม่ๆ

ขั้นตอนใดสำคัญที่สุดในการสร้างแอปพลิเคชัน

ขั้นตอนการออกแบบนั้นนับเป็นหัวใจส าคัญในการพัฒนาแอปฯ แอปพลิเคชันที่พร้อมน าไปใช้งานนั้นมักมีความซับซ้อนและ รายละเอียดปลีกย่อยจ านวนมาก จึงมีความจ าเป็นในการน าแนวคิด เชิงค านวณมาประยุกต์

Application ประเภทใดที่ถูกเขียนขึ้นมาเพื่อเป็น Browser สำหรับการใช้งานเว็บเพจต่างๆ

Web Application (เว็บ แอพพลิเคชั่น) คือ Application ที่ถูกเขียนขึ้นมาเพื่อเป็น Browser (บราวเซอร์) สำหรับการใช้งานเว็บเพจต่างๆ ซึ่งถูกปรับแต่งให้แสดงผลแต่ส่วนที่จำเป็น เพื่อเป็นการลดทรัพยากรในการประมวลผล ของตัวเครื่องสมาร์ทโฟน หรือ แท็บเล็ต ทำให้โหลดหน้าเว็บไซต์ได้เร็วขึ้น อีกทั้งผู้ใช้งานยังสามารถใช้งานผ่าน ...