รายงาน เรื่อง แสดงขั้นตอนการสร้างแอปพลิเคชันทดสอบคำศัพท์ง่ายๆด้วย App Sheet

รายงาน เรื่อง แสดงขั้นตอนการสร้างแอปพลิเคชันทดสอบคำศัพท์ง่ายๆด้วย App Sheet ระดับประกาศนียบัตรวิชาชีพ (ปวส.) ชั้นปีที่ 1 จัดทำโดย 1. นางสาวกัญญาณัฐ ทองทวี เลขที่ 5 2. นายณัฐพล จันทร์แสงดี เลขที่ 10 3. นางสาวนันทิชา ทรัพย์ศิลป์ เลขที่ 18 4. นางสาวนิภรณ์ เติมช้อย เลขที่ 20 นำเสนอ ครูสุนิสา อินทนิน วิทยาลัยอาชีวศึกษาเพชรบุรี ภาคเรียนที่ 2 ปีการศึกษา 2566 รายงานเล่มนี้เป็นส่วนหนึ่งของรายวิชาการพัฒนาโปรแกรมบนอุปกรณ์เคลื่อนที่แบบพกพา รหัสวิชา 30204-2303

1 รายงาน เรื่อง แสดงขั้นตอนการสร้างแอปพลิเคชันทดสอบคำศัพท์ง่ายๆด้วย App Sheet ระดับประกาศนียบัตรวิชาชีพ (ปวส.) ชั้นปีที่ 1 จัดทำโดย 1. นางสาวกัญญาณัฐ ทองทวี เลขที่ 5 2. นายณัฐพล จันทร์แสงดี เลขที่ 10 3. นางสาวนันทิชา ทรัพย์ศิลป์ เลขที่ 18 4. นางสาวนิภรณ์ เติมช้อย เลขที่ 20 นำเสนอ ครูสุนิสา อินทนิน วิทยาลัยอาชีวศึกษาเพชรบุรี ภาคเรียนที่ 2 ปีการศึกษา 2566 รายงานเล่มนี้เป็นส่วนหนึ่งของรายวิชา การพัฒนาโปรแกรมบนอุปกรณ์เคลื่อนที่แบบพกพา รหัสวิชา 30204-2303

ก คำนำ รายงานฉบับนี้เป็นส่วนหนึ่งของวิชา การพัฒนาโปรแกรมบนอุปกรณ์เคลื่อนที่แบบพกพา รหัสวิชา 30204-2303 ระดับชั้นประกาศนียบัตรวิชาชีพชั้นสูง (ปวส.) โดยมีจุดประสงค์ เพื่อจัดแสดง ขั้นตอนการสร้างแอปพลิเคชันทดสอบคำศัพท์ง่ายๆด้วย App Sheet เป็นการศึกษา เพื่อนำความรู้ที่ ได้จากการสร้างแอปพลิเคชันมาจัดทำเป็นรายงานนำเสนอให้เห็นถึงขั้นตอน การจัดทำแอปพลิเคชัน ซึ่งรายงานฉบับนี้มีเนื้อหาเกี่ยวกับความรู้เนื่องจากในปัจจุบันเทคโนโลยีมีบทบาทในการใช้ชีวิตใน สังคมมากขึ้น ความก้าวหน้าทางเทคโนโลยีสารสนเทศและการสื่อสาร มีการปรับตัวสูงขึ้นเรื่อย ๆ จึง ได้ทำการคิดค้นเทคโนโลยีที่เหมาะสมกับยุคปัจจุบัน เพื่อนำมาช่วยในการพัฒนาด้านการบริหารการ จัดการธุรกิจในเรื่องร้านอาหารรูปแบบออนไลน์ จึงทำให้คิดค้นการสร้างแอปพลิเคชัน ซึ่งมองเห็นใน มุมมองของการตลาด เรื่อง การจัดจำหน่ายอาหารในรูปแบบออนไลน์ที่ได้รับความนิยมเป็นอย่างมาก เนื่องจากผู้จัดทำมีความสนใจในเรื่องการทำแอปพลิเคชันและมีลักษณะการจัดเก็บข้อมูล เพื่อเพิ่ม ความสามารถทางด้านการใช้งานโปรแกรม App Sheet โดยทางคณะผู้จัดทำได้เลือก หัวข้อนี้ในการทำรายงานเนื่องมาจากเป็นเรื่องที่น่าสนใจ รวมถึง เป็นการนำเสนอแอปพลิเคชันที่เป็นการทดสอบคำศัพท์แบบง่ายๆ ที่สามารถสร้างด้วย App Sheet ผู้จัดทำหวังว่ารายงานเล่มนี้จะเป็นประโยชน์ต่อผู้ที่เข้ามาอ่านและนำความรู้ที่ได้ไปจัดทำจนบรรลุ วัตถุประสงค์สำเร็จลุล่วงไปได้ด้วยดี ด้วยความกรุณาและช่วยเหลือที่ดีเป็นอย่างยิ่งจากคุณครูผู้สอน ครูสุนิสา อินทนิน ที่กรุณา เสียสละเวลาให้คำแนะนำ พร้อมกับการตรวจแก้ไขข้อบกพร่องด้วยความเอาใจใส่ ทางคณะผู้จัดทำ รู้สึกซาบซึ้งในความกรุณาของคุณครูและขอขอบคุณเป็นอย่างสูงไว้ ณ ที่นี้ด้วย คณะผู้จัดทำ 17 ธันวาคม 2566

ข สารบัญ หน้า คำนำ ก สารบัญ ข ขั้นตอนการจัดทำแอปพลิเคชัน 1 ขั้นตอนการจัดทำหน้าปกแอปพลิเคชัน 84 ขั้นตอนการจัดทำหน้าผู้จัดทำแอปพลิเคชัน 93 ขั้นตอนการตกแต่งแอปพลิเคชัน 106

1 ขั้นตอนการจัดทำแอปพลิเคชัน 1. เริ่มจากการเข้าที่ Google Drive แล้วกด New Folder แล้วตั้งชื่อโฟลเดอร์ว่า TemplateVocabulary 2. จากนั้นทำการเพิ่ม Google Sheets ในโฟลเดอร์ที่สร้าง 3. สร้าง Google Sheets ที่มีชื่อว่า TemplateVocabulary

2 4. เปลี่ยนชื่อ Sheets แรกให้เป็นชื่อ Home 5. ต่อมาสร้าง Sheets ที่มีชื่อว่า Vocabulary แล้วใส่คำศัพท์ภาษาอังกฤษตามความต้องการ 6. สร้าง Sheets ที่มีชื่อว่า form แล้วใส่หัวข้อตามภาพ

3 7. จากนั้นทำการคลิกที่ Extensions แล้วเลือกสร้าง AppSheet 8. เมื่อกดสร้าง AppSheet แล้วจะปรากฏหน้าต่างนี้ขึ้นมาตามภาพ 9. กดที่แท็บ Data แล้วทำการกดบวกที่ Add new Data

4 10. จากนั้นทำการคลิกที่ Extensions แล้วเลือก AppSheet แล้วเลือก Create an app 11. เมื่อกดสร้าง AppSheet แล้วจะปรากฏหน้าต่างนี้ขึ้นมาตามภาพ 12. กดที่แท็บ Data แล้วทำการกดบวกที่ Add new Data

5 13. จากนั้นจะปรากฏหน้าต่างนี้ขึ้นมาให้คลิกเลือกที่ Add Table “Vocabulary” 14. เมื่อหน้าต่างนี้ขึ้นมาให้คลิกที่ Add This Table 15. กดที่ Add new Data อีกครั้ง แล้วทำการกดที่ Add Table “form”

6 16. แล้วคลิกเลือกที่ Add This Table 17. จากนั้นทำการเปลี่ยน Type ในหน้าต่าง Home ดังภาพ 18. จากนั้นทำการเปลี่ยน Type ในหน้าต่าง Vocabulary ดังภาพ

7 19. จากนั้นทำการเปลี่ยน Type ในหน้าต่าง form ดังภาพ 20. จากนั้นทำการเปลี่ยน Type ในหน้าต่าง form ดังภาพ จากนั้นทำการคลิกที่ช่อง Formula ในช่อง Email 21. เมื่อหน้าต่างนี้ปรากฏขึ้น ให้ทำการพิมพ์สูตรดังภาพ แล้วกด Save

8 22. จากนั้นทำการคลิกที่ช่อง Formula ในช่อง DataTime เมื่อหน้าต่างนี้ปรากฏขึ้น ให้ทำการ พิมพ์สูตรดังภาพ แล้วกด Save 23. จากนั้นทำการคลิกที่ช่อง Formula ในช่อง Number เมื่อหน้าต่างนี้ปรากฏขึ้น ให้ทำการ พิมพ์สูตรดังภาพ แล้วกด Save 24. จากนั้นทำการคลิกที่ช่อง Formula ในช่อง Word เมื่อหน้าต่างนี้ปรากฏขึ้น ให้ทำการพิมพ์ สูตรดังภาพ แล้วกด Save

9 25. จากนั้นทำการคลิก Edit ที่ Meaning 26. พิมพ์สูตรดังภาพ แล้วทำการกด Save 27. เมื่อพิมพ์สูตรเสร็จก็ทำการกด Done

10 28. เมื่อมีการเปลี่ยนแปลงข้อมูลทุกครั้งให้ทำการกด Save 29. เลือกไปที่ View แล้วเลือกไปที่ Vocabulary แล้วทำการเปลี่ยนดังภาพ 30. กด Save

11 31. คลิกไปที่ form แล้วทำการปรับแต่งดังภาพ แล้วกด Add 32. ทดลองใส่ข้อมูลดังภาพ 33. คลิกไปที่ Meaning

12 34. ทดลองเลือก 35. ทดลองใส่ข้อมูลแล้วทำการกด Save 36. ข้อมูลก็จะปรากฏดังภาพ

13 37. ข้อมูลจะไปปรากฏใน Google Sheets ดังภาพ 38. จากนั้นทำการกด Save 39. เมื่อเข้าสู่หน้าต่างนี้ให้ทำการ Add View

14 40. ก็จะปรากฏหน้าต่างออกมาดังภาพให้เลือกที่ Create a new view 41. จะปรากฏหน้าต่างออกมาดังภาพ 42. จากนั้นทำการเปลี่ยน View name

15 43. แล้วทำการเปลี่ยนข้อมูลดังภาพ 44. จากนั้นทำการกด Save 45. เลือกไปที่ form

16 46. ทำการเปลี่ยนข้อมูลดังภาพ 47. เลื่อนลงมาถึง Quick edit columns แล้วคลิกที่ Add 48. เมื่อเข้าสู่หน้าต่างนี้ให้ทำการเลือกที่ Meaning

17 49. เลือกข้อมูลที่ Sort by คือ DateTime 50. ข้อมูลก็จะปรากฏดังภาพ 51. จากนั้นทำการเปลี่ยน Column Order ให้เป็นดังภาพ

18 52. จากนั้นทำการกด Save 53. คลิกเลือกไปที่ Dashboard 54. เปลี่ยนที่ View entries เป็น Form

19 55. Add form_Detail เข้ามาเพิ่มใน View entries 56. จากนั้นทำการกด Save 57. เมื่อคลิกเข้าไปที่ Google Sheets ก็จะปรากฏข้อมูลขึ้นมา ดังภาพ

20 58. ข้อมูลจะไปปรากฏใน Google Sheets ดังภาพ 59. จากนั้นทำการกดเข้ามาที่ AppSheet 60. เลือกเข้ามาที่ Data แล้วทำการกดที่ Add virtual column

21 61. เมื่อคลิกแล้วก็จะปรากฏหน้าต่างนี้ขึ้นมา ทำการพิมพ์ที่ Column name ดังภาพ 62. จากนั้นทำการพิมพ์สูตรดังภาพแล้วกด Save 63. กด Done

22 64. แล้วทำการ Save 65. เลือกเข้ามาที่ Data แล้วทำการกดที่ Add virtual column 66. เมื่อคลิกแล้วก็จะปรากฏหน้าต่างนี้ขึ้นมาดังภาพ

23 67. เปลี่ยน Column name เป็น MostRecent 68. จากนั้นทำการพิมพ์สูตรในช่องของ App Formula 69. กด Save

24 70. กด Done 71. จากนั้นทำการกด Save 72. จากนั้นกดที่ช่อง Formula ของ column MeanBefore

25 73. ทำการพิมพ์สูตรดังภาพแล้วกด Save 74. จากนั้นทำการกด Save 75. จากนั้นกดที่ช่อง Formula ของ column Score

26 76. ทำการพิมพ์สูตรดังภาพแล้วกด Save 77. จากนั้นทำการกด Save 78. ต่อมากดที่ View แล้วเลือกที่ Dashboard แล้วเปลี่ยนข้อมูลดังภาพ

27 79. ต่อมากดที่ View แล้วเลือกที่ Form แล้วเปลี่ยนข้อมูลดังภาพ 80. จากนั้นทำการเลื่อนลงมาที่ Column Order 81. ทำการเพิ่ม MeanBefore เข้ามา

28 82. ทำการเพิ่ม RealMeaning เข้ามา 83. จากนั้นทำการกด Save 84. คลิกที่ลูกศรสามเหลี่ยมด้านข้างที่มีชื่อ Open right panel เป็นการเปิดหน้าต่างแอปขึ้นมา

29 85. เลือกไปที่ Dashboard 86. จากนั้นทำการทดสอบ 87. คะแนนด้าน Details ก็จะแสดงขึ้นมา จากนั้นคลิกที่ Data

30 88. ไปที่ Formula ของ SumScore 89. จากนั้นทำการพิมพ์สูตร ดังภาพ 90. จากนั้นทำการกด Save

31 91. ทำการกด Save อีกครั้ง 92. จากนั้นทำการทดสอบแอป 93. Score จะมีการเปลี่ยนแปลง

32 94. เลือกไปที่ Automation 95. จะปรากฏหน้าต่างนี้ขึ้นมา 96. จากนั้นทำการคลิกที่ Create my first automation

33 97. ทำการเลือกที่ Create a new bot 98. จากนั้นจะปรากฏหน้าต่างนี้ขึ้นมา 99. คลิกเลือกที่ Conflgure event

34 100. คลิกไปที่ Event name 101. จากนั้นทำการเลือกไปที่ Create a custom event 102. กดปิดกล่องข้อความที่แจ้งขึ้นมา

35 103. ทำการเปลี่ยน Event name 104. เมื่อเปลี่ยนเสร็จแล้วจะออกมาดังภาพ 105. ต่อมาทำการกดที่ Add a step

36 106. ทำการเลือก Create a custom step 107.จากนั้นจะปรากฏดังภาพ 108. คลิกเลือกที่ Branch on a cindition

37 109. ก็จะปรากฏหน้าต่างขึ้นมาดังภาพ ให้คลิกที่ช่อง = 110. จากนั้นทำการพิมพ์สูตรดังภาพ 111.จากนั้นทำการกด Save

38 112. เปลี่ยน Table ทางขวามือ 113. ทำการเปลี่ยนเป็น form 114. สูตรก็จะปรากฏในช่อง = ดังภาพ

39 115. เมื่อกดเข้าไปดูในช่อง ก็จะปรากฏว่า สูตรที่ใส่มีความถูกต้อง 116. จากนั้นทำการกด Save 117. ก็จะได้ออกมาดังภาพ

40 118. คลิกไปที่ Create a custom step 119. คลิกที่ Run a task 120. เปลี่ยนเป็น Run a data action กดเพิ่มสูตรทางด้านขวาในส่วนของ Set these column

41 121. พิมพ์สูตรดังภาพ แล้วทำการกด Save 122. จากนั้นทำการกด Save 123. คลิกเลือกไปที่ View

42 124. ทำการทดสอบแอปพลิเคชัน 125. สังเกต Score ที่ได้ออกมา 126. คลิกเลือกไปที่ Actions

43 127. กดเลือกที่ Add Action 128. จากนั้นคลิกที่ Create a new action 129. ก็จะได้ออกมาดังภาพ

44 130. จากนั้นทำการเปลี่ยนข้อมูลดังภาพ 131. จากนั้นทำเปลี่ยนจาก Home เป็น Form 132. เปลี่ยนจาก ID เป็น Status แล้วทำการกดเพิ่มสูตร

45 133. เพิ่มสูตรตามภาพ แล้วทำการกด Save 134. กด Add Action 135. คลิกที่ Create a new action for form

46 136. เปลี่ยน Action name ให้เป็นไปตามภาพ 137. จากนั้นทำการเลือกเป็น Status แล้วทำการเพิ่มสูตร 138. พิมพ์สูตรตามภาพ แล้วทำการกด Save