ใบความรู้ที่ 6 application talk to me
3 likes5,806 views
Application: Talk To Me เป็นแอพลิเคชันที่สามารถออกเสียงตามข้อความที่กำหนด
![ครูณัฐพล บัวอุไร [www.nattapon.com] 1
การสร้างแอพลิเคชันด้วย MIT AppInventor
ใบความรู้ที่ 6
เรื่อง Application Talk To Me
Application: Talk To Me เป็นแอพลิเคชันที่สามารถออกเสียงตามข้อความที่กาหนด โดยมีวิธีการ
สร้างดังนี้
1. สร้างโปรเจ็คใหม่
คลิกปุ่ม New Project
ตั้งชื่อโปรแกรม TalkToMe
กดปุ่ม OK
2. สร้างหน้าต่างโปรแกรม
ลากคอมโพเน้นท์ Button มาวางบนหน้าจอ
ตั้งค่า Button ในหน้าต่าง Properties ตามต้องการ
](https://image.slidesharecdn.com/6applicationtalktome-140615113013-phpapp02/85/6-application-talk-to-me-1-320.jpg)
![ครูณัฐพล บัวอุไร [www.nattapon.com] 2
การสร้างแอพลิเคชันด้วย MIT AppInventor
ลากคอมโพเน้นท์ TextToSpeech มาวางบนหน้าจอ
คอมโพเน้นท์ TextToSpeech จะไม่ปรากฏอยู่บนหน้าจอ เพราะเป็นคอมโพเน้นท์ที่ไม่มีการ
แสดงผลออกทางหน้าจอ
เปลี่ยนชื่อ Application ที่แสดงบนหน้าจอโดยการคลิกที่พื้นหลัง
ตั้งค่าที่หน้าต่าง Properties ในหัวข้อ Title
](https://image.slidesharecdn.com/6applicationtalktome-140615113013-phpapp02/85/6-application-talk-to-me-2-320.jpg)
![ครูณัฐพล บัวอุไร [www.nattapon.com] 3
การสร้างแอพลิเคชันด้วย MIT AppInventor
ให้นักเรียนสังเกตหน้าต่าง Component จะแสดงคอมโพ
เน้นท์ทั้งหมดที่นักเรียนลากมาใส่ในโปรแกรม
ซึ่งนักเรียนสามารถเปลี่ยนชื่อคอมโพเน้นท์ให้เหมาะสมได้ ด้วย
การคลิกเลือกคอมโพเน้นท์ที่ต้องการเปลี่ยนชื่อแล้วคลิกปุ่ม Rename
ด้านล่าง
หากต้องการลบคอมโพเน้นท์นักเรียนสามารถทาได้โดยการคลิก
เลือกคอมโพเน้นท์ที่ต้องการลบ แล้วคลิกปุ่ม Delete ด้านล่าง
3. การเขียนคาสั่งควบคุมโปรแกรม
คลิกปุ่ม Blocks เพื่อเข้าสู่หน้าต่างเขียนคาสั่งควบคุมโปรแกรม
](https://image.slidesharecdn.com/6applicationtalktome-140615113013-phpapp02/85/6-application-talk-to-me-3-320.jpg)
![ครูณัฐพล บัวอุไร [www.nattapon.com] 4
การสร้างแอพลิเคชันด้วย MIT AppInventor
คลิก Blocks ที่ชื่อ Button1 แล้วลาก Block when Button1.Click มาวางบนหน้าต่าง Viewer
ลากมาวางดังรูป
คลิก Blocks ที่ชื่อ TextToSpeech1 แล้วลาก Block call TextToSpeech1.Speak มาวางใน
หน้าต่าง Viewer โดยใส่ให้เข้าล็อคของ Block when Button1.Click
](https://image.slidesharecdn.com/6applicationtalktome-140615113013-phpapp02/85/6-application-talk-to-me-4-320.jpg)
![ครูณัฐพล บัวอุไร [www.nattapon.com] 5
การสร้างแอพลิเคชันด้วย MIT AppInventor
ใส่ให้เข้าล็อคดังรูป
คลิก Blocks ที่ชื่อ Text แล้วลาก Block ข้อความ (Block แรก) ไปต่อในใน Block ดังรูป
ลาก Block มาต่อดังรูปและพิมพ์ข้อความที่ต้องการให้โปรแกรมออกเสียง ดังตัวอย่าง
](https://image.slidesharecdn.com/6applicationtalktome-140615113013-phpapp02/85/6-application-talk-to-me-5-320.jpg)
![ครูณัฐพล บัวอุไร [www.nattapon.com] 6
การสร้างแอพลิเคชันด้วย MIT AppInventor
4. ทดสอบ Application
คลิกเมนู Connect เลือก Emulator
รอจนกระทั่งโปรแกรมเปิดขึ้นมาสาเร็จ ดังรูป
หากมีหน้าต่างนี้แสดงขึ้นมาให้คลิกปุ่ม Not
Now
](https://image.slidesharecdn.com/6applicationtalktome-140615113013-phpapp02/85/6-application-talk-to-me-6-320.jpg)
![ครูณัฐพล บัวอุไร [www.nattapon.com] 7
การสร้างแอพลิเคชันด้วย MIT AppInventor
5. การปรับแต่งโปรแกรมเพิ่มเติม โดยให้มีกล่องใส่ข้อความที่ต้องการให้โปรแกรมออกเสียง อยู่ที่หน้าจอ
แสดงผล
ลาก TextBox ไปวางบนหน้าจอดังรูป
ลาก Blocks TextBox1.Text ไปวางในบล็อกคาสั่งดังรูป
](https://image.slidesharecdn.com/6applicationtalktome-140615113013-phpapp02/85/6-application-talk-to-me-7-320.jpg)
ใบความรู้ที่ 6 application talk to me
- 1. ครูณัฐพล บัวอุไร [www.nattapon.com] 1 การสร้างแอพลิเคชันด้วย MIT AppInventor ใบความรู้ที่ 6 เรื่อง Application Talk To Me Application: Talk To Me เป็นแอพลิเคชันที่สามารถออกเสียงตามข้อความที่กาหนด โดยมีวิธีการ สร้างดังนี้ 1. สร้างโปรเจ็คใหม่ คลิกปุ่ม New Project ตั้งชื่อโปรแกรม TalkToMe กดปุ่ม OK 2. สร้างหน้าต่างโปรแกรม ลากคอมโพเน้นท์ Button มาวางบนหน้าจอ ตั้งค่า Button ในหน้าต่าง Properties ตามต้องการ
- 2. ครูณัฐพล บัวอุไร [www.nattapon.com] 2 การสร้างแอพลิเคชันด้วย MIT AppInventor ลากคอมโพเน้นท์ TextToSpeech มาวางบนหน้าจอ คอมโพเน้นท์ TextToSpeech จะไม่ปรากฏอยู่บนหน้าจอ เพราะเป็นคอมโพเน้นท์ที่ไม่มีการ แสดงผลออกทางหน้าจอ เปลี่ยนชื่อ Application ที่แสดงบนหน้าจอโดยการคลิกที่พื้นหลัง ตั้งค่าที่หน้าต่าง Properties ในหัวข้อ Title
- 3. ครูณัฐพล บัวอุไร [www.nattapon.com] 3 การสร้างแอพลิเคชันด้วย MIT AppInventor ให้นักเรียนสังเกตหน้าต่าง Component จะแสดงคอมโพ เน้นท์ทั้งหมดที่นักเรียนลากมาใส่ในโปรแกรม ซึ่งนักเรียนสามารถเปลี่ยนชื่อคอมโพเน้นท์ให้เหมาะสมได้ ด้วย การคลิกเลือกคอมโพเน้นท์ที่ต้องการเปลี่ยนชื่อแล้วคลิกปุ่ม Rename ด้านล่าง หากต้องการลบคอมโพเน้นท์นักเรียนสามารถทาได้โดยการคลิก เลือกคอมโพเน้นท์ที่ต้องการลบ แล้วคลิกปุ่ม Delete ด้านล่าง 3. การเขียนคาสั่งควบคุมโปรแกรม คลิกปุ่ม Blocks เพื่อเข้าสู่หน้าต่างเขียนคาสั่งควบคุมโปรแกรม
- 4. ครูณัฐพล บัวอุไร [www.nattapon.com] 4 การสร้างแอพลิเคชันด้วย MIT AppInventor คลิก Blocks ที่ชื่อ Button1 แล้วลาก Block when Button1.Click มาวางบนหน้าต่าง Viewer ลากมาวางดังรูป คลิก Blocks ที่ชื่อ TextToSpeech1 แล้วลาก Block call TextToSpeech1.Speak มาวางใน หน้าต่าง Viewer โดยใส่ให้เข้าล็อคของ Block when Button1.Click
- 5. ครูณัฐพล บัวอุไร [www.nattapon.com] 5 การสร้างแอพลิเคชันด้วย MIT AppInventor ใส่ให้เข้าล็อคดังรูป คลิก Blocks ที่ชื่อ Text แล้วลาก Block ข้อความ (Block แรก) ไปต่อในใน Block ดังรูป ลาก Block มาต่อดังรูปและพิมพ์ข้อความที่ต้องการให้โปรแกรมออกเสียง ดังตัวอย่าง
- 6. ครูณัฐพล บัวอุไร [www.nattapon.com] 6 การสร้างแอพลิเคชันด้วย MIT AppInventor 4. ทดสอบ Application คลิกเมนู Connect เลือก Emulator รอจนกระทั่งโปรแกรมเปิดขึ้นมาสาเร็จ ดังรูป หากมีหน้าต่างนี้แสดงขึ้นมาให้คลิกปุ่ม Not Now
- 7. ครูณัฐพล บัวอุไร [www.nattapon.com] 7 การสร้างแอพลิเคชันด้วย MIT AppInventor 5. การปรับแต่งโปรแกรมเพิ่มเติม โดยให้มีกล่องใส่ข้อความที่ต้องการให้โปรแกรมออกเสียง อยู่ที่หน้าจอ แสดงผล ลาก TextBox ไปวางบนหน้าจอดังรูป ลาก Blocks TextBox1.Text ไปวางในบล็อกคาสั่งดังรูป