เมนู export ใน kodular มีหน้าที่ใด

คู่มือ Thunkable
สร้างแอพพลิเคชั่นโดยไม่ต้องเขียนโปรแกรม
เรียนรู้จักเครื่องมือในการส้รางแอพพลิเคชั่นแอนดรอยด์ เหมาะสำหรับผู้ใช้ทั่วไป สามารถฝึกฝนได้ด้วยตัวเอง

ดาวน์โหลดไฟล์ได้ที่ https://helloteacher.biz/?p=281
ดูไม่ชัดหรือสงสัยในส่วนไหน สามารถทักแชท Facebook มาสอบถามได้ครับ
ยินดีแบ่งปันไฟล์ครับ

ข้าราชการครู at โรงเรียนบ้านสวายสนิท

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

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

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

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

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

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

2. คลิกที่ "Register" ด้านมุมบนขวาของหน้าจอ เพื่อสมัครเป็นสมาชิก Kodular Creator

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

4. จากนั้นให้รอสักครู่ Kodular จะแสดงข้อความ Term of Service นักศึกษาควรอ่านคำอธิบายและข้อตกลงในการใช้งาน Kodular แล้วกดแทบ "I accept the terms of service." ด้านล่างของหน้าจอภาพเพื่อยอมรับข้อตกลงในการใช้งาน Kodular

5. เมื่อเข้าสู่ระบบ Kodular สำเร็จแล้ว จะพบกับหน้าจอเริ่มต้น ในที่นี้เป็นการเข้าสู่ Kodular ครั้งแรกนักศึกษาจึงยังไม่มี Project ใน Kodular ให้กดปุ่ม Let's go

6. คลิกปุ่ม "Create Project" ทางด้านซ้ายมือของจอภาพเพื่อเริ่มสร้าง Project ใหม่

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

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

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

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

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

ลำดับ	Palette	Component
10.1	User Interface	Label1
10.2	User Interface	TextBox1
10.3	User Interface	Button1
10.4	Media	Text-to-Speech2

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

ลำดับ	ชื่อเดิม	ชื่อใหม่ (Rename)
11.1	Label1	MessageLabel
11.2	TextBox1	MessageTextBox
11.3	Button1	SpeakMessageButton
11.4	Text-to-Speech2	MessageTTS

12. ที่หน้าจอ Designer ให้ปรับแต่งคุณสมบัติ (Properties) ของ Component ต่าง ๆ ที่หน้าจอ Properties ที่ด้านขวาของโปรแกรมดังนี้

ลำดับ	Component	Property	Value
12.0	Screen1	About Screen	App ชื่อ MyFirstMobileApp623230019 สร้างโดย 623230019 นายศิริชัย หลักกนก หมู่เรียน 23.2
		Align Horizontal	Center: 3
		Align Vertical	Center: 2
		Background Color	Light Grey
		Icon	"icons8-voice-96.png" (ต้อง Upload ไฟล์นี้ไปเก็บไว้ที่ Asset ก่อนถึงจะเรียกใช้งานไฟล์นี้ได้)
		Title	"MyFirstMobileApp623230019"
12.1	MessageLabel	Font Bold	True
		Font Size	20
		Font Typeface	Serif
		Text	"ข้อความ: "
		Text Color	Black
12.2	MessageTextBox	Error Text	"กรุณาพิมพ์ข้อความ"
		Font Size	20
		Font Typeface	Serif
		Hint	"พิมพ์ข้อความที่นี่"
		Hint Color	Grey
		Text	"" (ไม่มีข้อความ)
12.3	SpeakMessageButton	Background Color	Blue
		Font Bold	True
		Font Size	20
		Font Typeface	Serif
		Text	"อ่านข้อความ!"
		Text Color	White
12.4	MessageTTS	Country	USA
		Languages	en

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

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

14.1 วาง Block เพื่อดักจับเหตุการณ์เมื่อผู้ใช้โปรแกรมกดปุ่ม "อ่านข้อความ!" เริ่มด้วยการคลิกที่ SpeakMessageButton จากรายชื่อของ Blocks ทางด้านซ้ายมือของหน้าจอภาพ แล้วลาก Block ชื่อ SpeakMessageButton.Click ไปวางไว้ที่พื้นที่ Blocks

14.2 วาง Block เพื่อสั่งให้ MessageTTS อ่านออกเสียงเมื่อผู้ใช้โปรแกรมกดปุ่ม "อ่านข้อความ!" เริ่มด้วยการคลิกที่ MessageTTS จากรายชื่อของ Blocks ทางด้านซ้ายมือของหน้าจอภาพแล้วลาก Block ชื่อ MessageTTS.Speak ไปวางไว้ใน Blocks ชื่อ SpeakButton.Click

14.3 วาง Block เพื่อสั่งให้ MessageTTS ดึงข้อความที่ผู้ใช้พิมพ์ใน MessageTextBox มาอ่านออกเสียง เริ่มด้วยการคลิกที่ MessageTextBox จากรายชื่อของ Blocks ทางด้านซ้ายมือของหน้าจอภาพแล้วลาก Block ชื่อ MessageTextBox.Text ไปวางที่ Socket ชื่อ "message" ของ Block ชื่อ MessageTTS.Speak

14.4 เพื่อป้องกันการลืมการทำงานของแต่ละ Block นักศึกษาสามารถเพิ่มการจดบันทึกข้อความ (Comment) ไว้ที่ Block นั้น ๆ เริ่มด้วยการคลิกขวาที่ Block ที่ต้องการ แล้วเลือก "Add Comment"

14.5 จากนั้นให้คลิกที่ Icon เครื่องหมาย "?" สีนำเงินที่มุมบนซ้ายของ Block แล้วพิมพ์ Comment ตามภาพประกอบ

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

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

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

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

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

19. เมื่อ App ปรากฎบนโทรศัพท์แล้ว ให้นักศึกษาทดลองใช้ด้วยการกรอกข้อความที่ต้องการแล้วกดปุ่ม "อ่านข้อความ!" โปรแกรมจะอ่านออกเสียงตามข้อความที่กรอก จากนั้นให้ Capture ภาพการทดสอบ App บนโทรศัพท์เป็นไฟล์ภาพ จากนั้นให้ตั้งชื่อไฟล์นี้ว่า "MyFirstMobileApp623230019_Testing.jpg" (ศึกษาการ Capture ภาพหน้าจอโทรศัพท์จากคู่มือของโทรศัพท์รุ่นที่นักศึกษาใช้)

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

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

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

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

23.1 แนะนำตัวเอง เกริ่นนำ
23.2 ทวนโจทย์ของโปรแกรมที่สร้าง
23.3 อธิบายการออกแบบหน้าจอ Design
23.4 อธิบายการวาง Blocks (เน้นข้อนี้มาก ๆ)
23.5 สาธิตการใช้งานโปรแกรม
23.6 ระบุความแตกต่างหรือความสามารถของ App ที่สร้างเพิ่มเติม (เน้นข้อนี้มาก ๆ)
23.7 อื่น ๆ (ถ้ามี)

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

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

ลำดับ	รายการ	ชื่อไฟล์
24.1	ไฟล์ภาพหน้าจอ Designer (.png หรือ .jpg)	MyFirstMobileApp623230019_Designer.png
24.2	ไฟล์ภาพหน้าจอ Blocks (.png หรือ .jpg)	MyFirstMobileApp623230019_Blocks.png
24.3	ไฟล์ภาพหน้าจอการทดสอบโปรแกรมบนโทรศัพท์มือถือ (.png หรือ .jpg)	MyFirstMobileApp623230019_Testing.png
24.4	ไฟล์ Project (*.aia)	MyFirstMobileApp623230019_Project.aia
24.5	ไฟล์ติดตั้งโปรแกรม (*.apk)	MyFirstMobileApp623230019_Install.apk
24.6	ไฟล์วิดีโอคลิปรีวิวโปรแกรม (*.mp4)	MyFirstMobileApp623230019_Review.mp4

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

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

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

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