MIT App Inventor ตอนที่ 2
ทำแอปแรก Talk To Me
Talk to me เป็นการใช้คำสั่ง TextToSpeech ทำให้แอปออกเสียงตามข้อความที่พิมพ์App Inventor ประกอบด้วย 2 ส่วน คือ Designer กับ Blocks
Designer ใช้จัดองค์ประกอบและหน้าตาของ App ส่วน Blocks ใช้กำหนดการทำงานของแต่ละองค์ประกอบ
เริ่มต้นลองทำ App ชื่อ Talk To Me ตามตัวอย่างของเว็บ MIT App Inventor โดยเลือกเมนู Start new project จะมีช่องให้กรอก Project name ใส่ชื่อ TalkToMe (เขียนติดกัน เพราะในการใช้งานจะไม่มีเว้นวรรคหรือ space อาจจะใช้ _ แทนได้) เมื่อกด OK จะได้หน้า screen เปล่าขึ้นมา
เริ่มต้นจากเลือกปุ่มที่ Button ใน Palette ของ User Interface และลากมาปล่อยที่ Viewer
ที่หน้า Designer คลิกที่ Button ตรงคอลัมน์ Components (ซึ่งทำให้คอลัมน์ Properties แสดงคุณสมบัติของ Button) จากนั้นพิมพ์ข้อความ Talk To Me ลงในช่อง Text ตรงด้านล่างของ Properties ข้อความที่พิมพ์จะไปปรากฏที่ปุ่ม Button ที่หน้าจอ Viewer
ต่อไปนำ Components ที่ 2 คือ TextToSpeech จาก Media ในคอลัมน์ Palette มาวางที่ Viewer โดย Component นี้จะไม่แสดงที่ Viewer แต่จะแสดงอยู่ในช่อง Components และ Properties
เมื่อวาง Components เรียบร้อยแล้ว ต่อไปเป็นการกำหนดการทำงานแต่ละ Components โดยคลิกที่ Blocks
หน้า Blocks ประกอบด้วย Blocks ทางด้านซ้าย ตรงกลางเป็น Viewer สำหรับวาง Blocks และถังสำหรับใส่ Blocks ที่ต้องการลบ โดยลากลงไปปล่อยหรือใช้คีย์ Delete ก็ได้
เครื่องมือของ Blocks ประกอบด้วย Built-in ซึ่งเป็นคำสั่งมาตรฐาน ถัดลงมาเป็นส่วนของ Screen ซึ่งมี Components ที่ถูกนำมาวางไว้ในหน้า Designer ได้แก่ Button กับ TextToSpeech
เมื่อคลิกที่ Button จะปรากฏคำสั่งในการดำเนินการกับ Button ให้เลือก ในกรณีนี้ให้เลือก when Button Click do ลากมาวางที่ Viewer ซึ่งเป็นการเริ่มคำสั่งเมื่อปุ่มถูกคลิก
จากนั้นคลิกที่ TextToSpeech และเลือก Blocks call TextToSpeech Speak message มาต่อกับคำสั่ง when Button Click do เป็นการสั่งให้โปรแกรมเปลี่ยนข้อความเป็นเสียงพูดพร้อมกับขึ้นข้อความตามมา
การพิมพ์ข้อความลงไป ให้ไปที่ Blocks ของ Text ที่อยู่ใน Built-in เลือก Block เครื่องหมายคำพูดมาวางต่อท้าย
จะได้คำสั่งในการใช้งานได้เรียบร้อย
เมื่อคลิกบนปุ่มที่หน้าจอ จะมีเสียงพูดตามข้อความที่พิมพ์ สามารถเปลี่ยนข้อความได้ตามต้องการ โดยกลับมาเปลี่ยนข้อความใน Blocks
____________________________________
จากตัวอย่างของ MIT AppInventor ถ้าปรับข้อมูลอีกเล็กน้อยโดยกรอกข้อความที่ต้องการออกเสียงได้ที่หน้าจอของแอป ไม่ต้องกลับไปกรอกที่ Blocks
ไปที่หน้า designer คลิกที่ Label ในคอลัมน์ User Interface ลากมาปล่อยที่ Viewer และพิมพ์ข้อความ "กรอกข้อความในช่องว่าง" ที่ช่อง Text ตรงด้านล่างของ Properties
ลาก TextBox จากช่อง User Interface มาวางที่ Viewer และลบข้อความ Hint ออก และอาจะคลิกที่ช่อง MultiLine ถ้าต้องการกรอกข้อความหลายบรรทัด
ไปที่หน้า Blocks ลากข้อความใน Text Block สีแดงออก ลากไปปล่อยในถังด้านขวา
ดูที่ Palette ด้านซ้าย จะเห็นว่าที่ Blocks ส่วน Screen มี Button, Label1, TextBox1 ตามที่ใส่ไว้ในหน้า Designer
คลิกที่ TextBox1 และเลือก TextBox1.Text ที่ช่อง Viewer ต่อกับ call.TextToSpeech.Speak ตรงส่วนของ message
ที่หน้าจอมือถือจะมีช่องให้กรอกข้อความ เพื่อให้แอปอ่านออกเสียงตามข้อความได้
ข้อมูลจาก http://appinventor.mit.edu/explore/
ไม่มีความคิดเห็น:
แสดงความคิดเห็น