พื้นฐาน User Interface ใน google sheet
ใน google sheet มี User Interface (UI) หรือ สิ่งเชื่อมต่อผู้ใช้ อยู่ด้วยนะ ซึ่งเรียกใช้งานผ่าน apps script ได้ โดยในบทความนี้ เราจะมาเรียนรู้เกี่ยวกับ ui โดยเราจะมาสร้างเกมทายตัวเลขกัน
1) สร้างชีตใหม่ เปิด apps script
ภาพที่ 1
2) เปลี่ยนชื่อโครงการเป็น "ทายตัวเลข" และเปลี่ยนชื่อฟังก์ชันเป็น "game"
ภาพที่ 2
3) เพิ่มตัวฟังก์ชัน game ตามสคริปต์ด้านล่าง
const key = Math.random()
console.log(key)
แล้วกดเรียกใช้
ภาพที่ 3
- ★Math.random() จะเป็นฟังก์ชันสุ่มค่าระหว่าง 0 ถึง 1
4) ทีนี้ให้เราปรับค่าจากช่วง 0 ถึง 1 ให้เป็น 0 ถึง 10 โดยการ *10 แล้วลองกดเรียกใช้
ภาพที่ 4
5) จากนั้นปรับให้เหลือเพียงจำนวนเต็มด้านหน้า โดยใช้ฟังก์ชัน Math.floor() ครอบ แล้วกดเรียกใช้
ภาพที่ 5
ค่าที่ได้ในการเรียกใช้แต่ละครั้งจะไม่เหมือนเดิม จะมีค่าระหว่าง 0 ถึง 9
6) สร้างตัวแปรใหม่
const ui = SpreadsheetApp.getUi()
ไว้ด้านบนนอกฟังก์ชัน
ภาพที่ 6
7) เพิ่มสคริปต์ต่อไปนี้เข้าไปในฟังก์ชัน game
var ans = ui.prompt('ทายตัวเลข 0 - 9')
if (ans.getResponseText() == key) {
ui.alert('ถูกต้อง!!!')
}
- ★.prompt() คือสร้าง ui สำหรับให้ผู้ใช้กรอกข้อมูล
- ★prompt ต่อด้วย .getResponseText() คือค่าที่ผู้ใช้กรอก
- ★.alert() คือสร้าง ui สำหรับแจ้งเตือนผู้ใช้
- ★สรุปรวมคือ ให้ตัวแปร ans เป็น prompt เขียนว่า 'ทายตัวเลข 0-9' ถ้า ans ตรงกับ key ให้แจ้งเตือนว่า 'ถูกต้อง!!!'
ทีนี้ลองกดเรียกใช้
ภาพที่ 7
สคริปต์จะหมุนไม่หยุด ให้เราไปดูที่หน้าชีตจะมี prompt ขึ้นมา
ภาพที่ 8
ทีนี้ลองตอบคำตอบที่ถูกต้องเข้าไป ก็จะมีแจ้งเตือนแสดงตามที่เราเขียนสคริปต์ไว้ แต่ถ้าตอบผิด ก็จะไม่มีการแจ้งเตือน
ภาพที่ 9
8) ต่อไปเราจะปรับให้สคริปต์ถามซ้ำ ๆ จนกว่าจะตอบถูกหรือจนกว่าจะกด [x] ปิด โดยเปลี่ยนฟังก์ชัน game ของเราให้เป็น
function game() {
const key = Math.floor(Math.random() * 10)
console.log(key)
while (true) {
var ans = ui.prompt('ทายตัวเลข 0 - 9')
if (ans.getResponseText() == key) {
ui.alert('ถูกต้อง!!!')
break
} else if (ans.getSelectedButton() == ui.Button.CLOSE) {
break
}
}
}
ภาพที่ 10
- ★ไวยากรณ์ while (เงื่อนไข) {สิ่งที่ดำเนินการเมื่อเงื่อนไขจริง}
- ★สิ่งที่อยู่หลัง while จะทำไปเรื่อย ๆ เมื่อเงื่อนไขจริง ซึ่งเงื่อนไขเราใส่ true ไว้ ดังนั้นมันก็จะทำไปเรื่อย ๆ ไม่มีการหยุด
- ★เราจึงต้องใส่ break ไว้ ที่หมายถึงให้มันหยุด
- ★.getSelectedButton() คือปุ่มที่ผู้ใช้กด
- ★.Button.CLOSE คือปุ่ม [x] ปิด
- ★สรุปว่าเราใช้ while สั่งให้ prompt ขึ้นมาให้ผู้ใช้กรอกค่าเรื่อย ๆ แต่จะหยุดเมื่อตอบถูกหรือกด [x]
ให้ลองเรียกใช้ดู แล้วลองตอบผิด จะเห็นว่า prompt จะขึ้นมาให้กรอกค่าเรื่อย ๆ ถ้าตอบถูกก็จะมีแจ้งเตือนตอบถูกแล้วหยุด แต่ถ้ากด [x] ปิดก็หยุดเช่นกัน
9) สร้าง menu
เราคงไม่เข้าหน้า apps script มาเรียกใช้ฟังก์ชันทุกครั้งที่เราจะเล่นเกม ดังนั้นเราควรสร้าง menu สำหรับเรียกใช้สคริปต์ไว้ ในกรณีนี้เราจะใช้ ui สร้างเมนูเพิ่มมา ให้เราสร้างฟังก์ชันใหม่ต่อจากฟังก์ชันเกม คือ
function onOpen() {
ui.createMenu('Game')
.addItem('ทายตัวเลข','game')
.addToUi()
}
ภาพที่ 11
- ★function onOpen() จะถูกเรียกใช้ทันทีเมื่อเปิดชีต
- ★.createMenu() คือสร้างเมนูเพิ่ม
- ★.addItem() คือเมนูย่อยลงมา จะต้องใส่ชื่อเมนูกับชื่อฟังก์ชันคู่กันเสมอ
- ★.addToUi() คือเพิ่มไปที่ user interface
ทีนี้กดบันทึกสคริปต์ แล้ว refresh บราวเซอร์ชีตใหม่ ก็จะมีเมนู "Game" เพิ่มขึ้นมา
ภาพที่ 12
ที่เมนู "Game" ก็จะมีเมนูย่อยชื่อว่า "ทายตัวเลข" ที่เมื่อกดก็คือการเรียกใช้ฟังก์ชัน game นั่นเอง
ภาพที่ 13
หากเห็นว่าบทความนี้เป็นประโยชน์ ช่วยกดถูกใจกดแชร์เป็นกำลังใจให้ผู้เขียนด้วยนะฮับ
- 1
โฆษณา
- ดาวน์โหลดแอปพลิเคชัน
- © 2024 Blockdit
