App Inventor 2 : Magic 8-Ball

magic8 001 หลายคนคงเคยเล่นเกมเสี่ยงโชคที่ชื่อว่า Magic 8-Ball โดยเฉพาะสาวๆ แต่บางครั้งการเสี่ยงทายก็ไม่ค่อยจะตรงตามความต้องการของเรา วันนี้ผมจึงมาแนะนำวิธีสร้าง application ง่ายๆ ด้วย App inventor 2 เพื่อสร้าง Magic 8 ball เอาไว้ทำนายเรื่องราวต่างๆ ตามที่เราต้องการ หรือใครจะเขียนไว้ทำนายอาหารเที่ยงก็ได้ เพราะบางทีเราก็คิดไม่ออกว่าอยากกินอะไรดี เอาล่ะ ลงมือกันเลย

เตรียมข้อมูลก่อนลงมือ
ก่อนที่จะลงมือ ขอให้จัดเตรียมไฟล์ภาพและเสียงให้พร้อมก่อนใช้งาน คือ ภาพของ magic ball และไฟล์เสียงประกอบ หากไม่มี สามารถ download ไฟล์ตัวอย่างได้จากรายการต่อไปนี้

1. image_8_ball.jpg

2. Cha_Ching.mp3

หรือสามารถ download ได้จาก App Inventor Media Library.

ขั้นตอนที่ 1 สร้างปุ่ม และใส่เสียง

1. เปิดเว็บ เข้าไปยังหน้าสำหรับสร้าง Project ตั้งชื่อ project ว่า Magic8Ball

talk 002

magic8 002

2. upload ไฟล์ภาพและเสียงที่จะใช้ ไปเก็บไว้ที่ media

magic8 003

3. เพิ่มปุ่มเข้ามาในหน้าออกแบบ

magic8 004

ลบข้อความของปุ่มออกให้เป็นช่องว่าง และกำหนดภาพของปุ่มให้เป็น ภาพ image_8_ball.jpg

magic8 005

4. เพิ่ม player เข้ามาใน project ของเรา

magic8 006

กำหนด source เป็นไฟล์เสียง cha_ching.mp3

magic8 007

5. สร้างคำสั่ง เมื่อเกิดการกดปุ่ม
เปลี่ยนมุมมองการทำงานเป็นแบบ Block

magic8 008

คลิกที่ Button1 จะปรากฏคำสั่งที่ใช้งานได้ เลือก When Button1.Click ลากมาวางลงบนแผ่นงาน

magic8 009

คลิกที่ Player1 จะปรากฏคำสั่งขึ้นมา เลือก call Player1.Start ลากมาวางใน block ของ when Button1.Click ดังภาพ

magic8 010

ขั้นตอนที่ 2 สร้างคำทำนาย
จากขั้นตอนที่ 1 เมื่อเราทดสอบโปรแกรม โดยกดที่ปุ่มลูกบอล application จะส่งเสียงออกมา ในขั้นตอนนี้ เราจะต้องสร้าง label ขึ้นมา 2 ตัว ตัวแรกเป็นคำอธิบายวิธีการทำนาย ตัวที่ 2 จะเป็นคำทำนายที่ได้จากการสุ่มลูกบอลแต่ละครั้ง เปลี่ยนการทำงานกลับมาที่ Designer

magic8 011

1. เพิ่ม layout แบบ VerticalArrangement เข้ามาในแผ่นงาน

magic8 012

กำหนดความกว้างให้เป็น Fill parent คือ การกำหนดให้มีความกว้างเท่ากับ layout หลัก ในที่นี้คือ ให้แสดงเต็มความกว้างหน้าจอ

magic8 013

2. เพิ่ม Label จำนวน 2 ตัว เข้ามาใน layout

magic8 014

เปลี่ยนข้อความของ label1 เป็น “ตั้งจิตอธิฐาน แล้วถามลูกบอล”
เปลี่ยนข้อความของ label2 เป็น “แตะที่ลูกบอลเพื่อรับคำทำนาย”
กำหนดความกว้างของ label เป็น Fill parent... และจัดเรียงอักษร แบบ center : 1

magic8 015

จะได้ดังภาพ

magic8 016

3. กำหนดคำสั่งในการทำงาน โดยเปลี่ยนมาที่มุมมอง Blocks คลิกที่ Label2 จะปรากฏคำสั่ง เลื่อนหาจนเจอคำสั่ง set Label2.Text to ลากมาวางในกล่อง when Button1.Click โดยวางไว้ก่อนคำสั่ง call Player1.Start ดังภาพ

magic8 017

4. สร้าง list คำทำนายจาก magic 8-ball คลิกที่ Lists จะปรากฏคำสั่ง เลือกคำสั่ง pick a random item list ลากไปวางต่อกับคำสั่ง set Label2.Text to

magic8 018

5. สร้าง list คำทำนาย โดยคลิกที่ lists แล้วเลือกคำสั่ง make a list ลากไปลางต่อท้ายคำสั่ง pick a random item list

magic8 019

เพิ่มจำนวน item ใน list โดยคลิกที่รูปเฟือง หน้า make a list จะปรากฏคำสั่งขึ้นมา ให้ลากคำสั่ง item ไปเพิ่มในรายการของ list ตามจำนวนที่ต้องการ ประมาณ 8 item

magic8 020