1 คู่มือการสร้างแอปพลิเคชันตรวจเช็คสภาพรถผ่าน App Sheet ระดับประกาศนียบัตรวิชาชีพ (ปวส.) ชั้นปีที่ 1 จัดทำโดย 1. นางสาวกัญญาณัฐ ทองทวี เลขที่ 5 2. นายณัฐพล จันทร์แสงดี เลขที่ 10 3. นางสาวนันทิชา ทรัพย์ศิลป์ เลขที่ 18 4. นางสาวนิภรณ์ เติมช้อย เลขที่ 20 นำเสนอ ครูสุนิสา อินทนิน รายงานเล่มนี้เป็นส่วนหนึ่งของรายวิชา การพัฒนาโปรแกรมบนอุปกรณ์เคลื่อนที่แบบพกพา รหัสวิชา 30204-2303 ภาคเรียนที่ 2 ปีการศึกษา 2566 วิทยาลัยอาชีวศึกษาเพชรบุรี
ก คำนำ รายงานฉบับนี้เป็นส่วนหนึ่งของวิชา การพัฒนาโปรแกรมบนอุปกรณ์เคลื่อนที่แบบพกพา รหัสวิชา 30204-2303 ระดับชั้นประกาศนียบัตรวิชาชีพชั้นสูง (ปวส.) โดยมีจุดประสงค์ เพื่อจัดทำ คู่มือแสดงขั้นตอนการสร้างแอปพลิเคชันตรวจเช็คสภาพรถพร้อมการอนุมัติซ่อมด้วย App Sheet เป็นการศึกษาเพื่อนำความรู้ที่ได้จากการสร้างแอปพลิเคชันมาจัดทำเป็นคู่มือเพื่อทำการนำเสนอให้ เห็นถึงขั้นตอนการจัดทำแอปพลิเคชัน ซึ่งคู่มือฉบับนี้มีเนื้อหาเกี่ยวกับความรู้เนื่องจากในปัจจุบัน เทคโนโลยีมีบทบาทในการใช้ชีวิตในสังคมมากขึ้น ความก้าวหน้าทางเทคโนโลยีสารสนเทศและ การสื่อสารมีการปรับตัวสูงขึ้นเรื่อย ๆ จึงได้ทำการคิดค้นเทคโนโลยีที่เหมาะสมกับยุคปัจจุบัน เพื่อเพิ่ม ความสามารถทางด้านการใช้งานโปรแกรม App Sheet โดยทางคณะผู้จัดทำได้เลือก หัวข้อนี้ในการทำรายงานเนื่องมาจากเป็นเรื่องที่น่าสนใจ รวมถึง เป็นการนำเสนอแอปพลิเคชันตรวจเช็คสภาพรถพร้อมการอนุมัติซ่อม ที่สามารถสร้างแอปพลิเคชันได้ ด้วย App Sheet ผู้จัดทำหวังว่าคู่มือเล่มนี้จะเป็นประโยชน์ต่อผู้ที่เข้ามาอ่านและนำความรู้ที่ได้ไป จัดทำจนบรรลุวัตถุประสงค์สำเร็จลุล่วงไปได้ด้วยดี ด้วยความกรุณาและช่วยเหลือที่ดีเป็นอย่างยิ่งจากคุณครูผู้สอน ครูสุนิสา อินทนิน ที่กรุณา เสียสละเวลาให้คำแนะนำ พร้อมกับการตรวจแก้ไขข้อบกพร่องด้วยความเอาใจใส่ ทางคณะผู้จัดทำ รู้สึกซาบซึ้งในความกรุณาของคุณครูและขอขอบคุณเป็นอย่างสูงไว้ ณ ที่นี้ด้วย คณะผู้จัดทำ
ข สารบัญ หน้า คำนำ ก สารบัญ ข ขั้นตอนการจัดทำแอปพลิเคชัน TMS Truck 1 ขั้นตอนการตกแต่งแอปพลิเคชัน TMS Truck 30 ขั้นตอนการเพิ่มหน้า Home 32 ขั้นตอนการสร้างแอปพลิเคชัน ( ระบบแจ้งซ่อมรถ ) 39 ขั้นตอนการสร้างแอปพลิเคชัน ( ระบบอนุมัติซ่อมรถ ) 66 ขั้นตอนการสร้างแอปพลิเคชัน ( ระบบอนุมัติซ่อมรถเสร็จแล้ว ) 81 ขั้นตอนการปรับแต่งแอปพลิเคชัน 97
1 1. เริ่มจากการเข้าที่ Google Drive แล้วกด New Folder แล้วตั้งชื่อโฟลเดอร์ว่า ระบบบันทึกการตรวจสอบรถ แล้วกด Create 2. จากนั้นทำการเพิ่ม Google Sheets ในโฟลเดอร์ที่สร้างขึ้นมา 3. สร้าง Google Sheets ที่มีชื่อว่า List Employess
2 4. เปลี่ยนชื่อ Sheets แรกให้เป็นชื่อ List Employess 5. ต่อมาเพิ่มชื่อในคอลัมน์ดังภาพ 6. สร้าง Google Sheets อีกหนึ่ง Sheets
3 7. เปลี่ยนชื่อ Sheets ให้เป็นชื่อ System Check Truck 8. จากนั้นทำการเปลี่ยนชื่อ Sheet ดังภาพ 9. จากนั้นทำการเพิ่มหัวข้อในคอลัมน์ดังภาพ
4 10. จากนั้นทำการเข้าที่ AppSheet แล้วกดที่เครื่องมือ Create จากนั้นเลือกไปที่ Start with existing data 11. จะปรากฏหน้าต่างนี้ขึ้นมา ให้ทำการเปลี่ยน App name เป็น TMS Truck และทำการ เลือก Category เป็น Other และทำการกด Choose your data 12. จากนั้นทำการเลือก Google Sheet ที่สร้างไว้ตั้งแต่เริ่มต้น และทำการกด Select
5 13. จากนั้นจะปรากฏหน้าต่าง App Sheet นี้ขึ้นมา 14. จากนั้นคลิกที่ไอคอนดังภาพ App Sheet ก็จะเปลี่ยนหน้าต่างการทำงานเป็นอีกหน้าต่างดังภาพ 15. จากนั้นทำกดที่ New Table
6 16. แล้วคลิกเลือกที่ Google Sheets 17. จากนั้นทำการเลือกไปที่โฟลเดอร์ที่มีชื่อว่า ระบบบันทึกการตรวจสอบรถ 18. จากนั้นทำการเลือกไปที่ Google Sheets ที่มีชื่อว่า List Employee
7 19. จะปรากฏหน้าต่างนี้ขึ้นมา ให้ทำการกด Add to app 20. จากนั้นทำก็จะปรากฏหน้าต่างนี้ขึ้นมา ให้กดไปที่เครื่องมือรูปดินสอหน้าหัวข้อ 21. จากนั้นก็จะปรากฏหน้าต่างนี้ขึ้นมาให้ใส่สูตร
8 22. จากนั้นทำการพิมพ์สูตร [_RowNumber]-1 แล้วทำการกด Save 23. เมื่อกด Save จะได้หน้าต่างนี้ขึ้นมาให้ทำการกด Done 24. จากนั้นทำกด Save
9 25. จากนั้นเลือกที่คอลัมน์ ทะเบียนรถ 26. แล้วทำการกำหนด Type Details ให้เป็น 6 หลัก เพื่อเป็นการบังคับการใส่ข้อมูลไม่ให้เกิด ช่องว่างในการแจ้งทะเบียนรถ 27. เมื่อกำหนดค่าเสร็จก็ทำการกด Done
10 28. จากนั้นเลือกที่คอลัมน์ ทะเบียนหาง 29. แล้วทำการกำหนด Type Details ให้เป็น 6 หลัก เพื่อเป็นการบังคับการใส่ข้อมูลไม่ให้เกิด ช่องว่างในการแจ้งทะเบียนรถ 30. กดจากนั้นทำการกด Done
11 31. เปลี่ยน Type ในคอลัมน์รูปภาพพนักงาน เป็น Image 32. จากนั้นทำการเช็คในช่องว่างที่คอลัมน์ SHOW EDITABLE REQUIRE 33. จากนั้นทำการกด Save
12 34. จากนั้นทำกรเปลี่ยน Type ตามหัวข้อ 35. จากนั้นคลิกที่เมนู UX แล้วคลิกไปที่ System Check Truck 36. จากนั้นทำการเปลี่ยน View type ให้เป็นแบบ Form
13 37. เปลี่ยนรายละเอียดข้อมูลดังภาพ 38. จากนั้นทำการกด Save แล้วเลือกไปที่เมนู Data 39. คลิกไปที่ Column ข้อมูลรถ แล้วทำการเปลี่ยน Category ให้เป็น Page_Heading จากนั้น คลิกไปที่ช่อง Content
14 40. ก็ใส่สูตรดังภาพ แล้วกด Save 41. จะปรากฏหน้าต่างออกมาดังภาพ ให้ทำการกด Done 42. คลิกไปที่ Column ข้อมูลตารางเช็ค แล้วทำการเปลี่ยน Category ให้เป็น Page_Heading จากนั้นคลิกไปที่ช่อง Content
15 43. แล้วทำการเปลี่ยนข้อมูลดังภาพ จากนั้นกด Save 44. จากนั้นทำการกด Done 45. รูปแบบแอปจะออกมาในลักษณะดังภาพ
16 46. คลิกไปที่ Column ทะเบียนรถ แล้วทำการเปลี่ยน Soure table ให้เป็น List Employess 47. เลื่อนลงมาถึง Input mode แล้วเลือกเป็น Dropdown แล้วกด Done 48. คลิกเลือกไปที่ Column ทะเบียนหาง จากนั้นทำการพิมพ์สูตรดังภาพ แล้วกด Save
17 49. เมื่อได้ข้อมูลมาแล้วให้ทำการกด Save ที่ระบบอีกครั้ง 50. คลิกเลือกไปที่ Column ชื่อพนักงานขับรถ จากนั้นทำการพิมพ์สูตรดังภาพ แล้วกด Save 51. จากนั้นทำการเปลี่ยน Type ของ วันที่ตรวจเช็ค ให้เป็น Date
18 52. ทำการเปลี่ยน Type ของ เวลาตรวจเช็ค ให้เป็น Time 53. คลิกเลือกไปที่ App Formula ของคอลัมน์ วันที่ตรวจเช็ค จากนั้นทำการพิมพ์ NOW() แล้วทำ การกด Save 54. คลิกเลือกไปที่ App Formula ของคอลัมน์ เวลาตรวจเช็ค จากนั้นทำการพิมพ์ NOW() แล้วทำ การกด Save
19 55. จากนั้นทำการกด Save ที่ระบบ 56. คลิกเลือกไปที่คอลัมน์ 1.ตรวจเช็คเชื้อเพลิง จากนั้นทำการเปลี่ยน Type ให้เป็น Enum จากนั้น ทำการเปลี่ยน Values กำหนดให้เป็น ปกติ และ ไม่ปกติ 57. เปลี่ยน Input mode ให้เป็น Buttons แล้วทำการกด Done
20 58. คลิกเลือกไปที่คอลัมน์ 2.ตรวจเช็คยางลม จากนั้นทำการเปลี่ยน Type ให้เป็น Enum จากนั้นทำ การเปลี่ยน Values กำหนดให้เป็น ปกติ และ ไม่ปกติ 59. เปลี่ยน Input mode ให้เป็น Buttons แล้วทำการกด Done 60. คลิกเลือกไปที่คอลัมน์ 3.ตรวจเช็คระบบไฟ จากนั้นทำการเปลี่ยน Type ให้เป็น Enum จากนั้น ทำการเปลี่ยน Values กำหนดให้เป็น ปกติ และ ไม่ปกติ
21 61. เปลี่ยน Input mode ให้เป็น Buttons แล้วทำการกด Done 62. จากนั้นทำการกด Save 63. ทำการเช็คในช่องสี่เหลี่ยมให้ครบดังภาพ
22 64. กดไปที่ Data แล้วเลือกไปที่ Slices 65. คลิกไปที่ รายงานข้อมูล จากนั้นทำการเปลี่ยน Source Table ให้เป็น System Check Truck 66. จากนั้นเปลี่ยน Update mode ให้เหลือแค่ Updates และ Deletes
23 67. จากนั้นทำการเข้ามาที่ UX แล้วเลือกไปที่ Views และทำการเปลี่ยน View Type ให้เป็น แบบ Form 68. ทำการเปลี่ยน View name ให้เป็น บันทึกเช็ครถ 69. เลื่อนลงมาด้านล่างจะเจอกับ Display ให้ทำการเปลี่ยน Icon ตามความพอใจ
24 70. ต่อมาในส่วนของ List Employess 71. ให้ทำการเปลี่ยน View name เป็น พนักงานขับรถ และให้เปลี่ยน View type เป็นแบบ deck
25 72. จากนั้นตั้งค่า View options ดังนี้ 72.1 ตั้งค่า Sort by ให้เป็นในส่วนของ ลำดับ และเลือกเป็น Ascending 72.2 ตั้งค่า Group aggregate ให้เป็น COUNT 73. ตั้งค่า Main Image เป็น รูปพนักงาน
26 74. จากนั้นทำการกำหนด 74.1 Primary header เป็น ชื่อพนักงานขับรถ 74.2 Secondary header เป็น ทะเบียนรถ 74.3 Summary column เป็น ลำดับ 75. จากนั้นทำการเปลี่ยน Icon ตามความพึงพอใจ 76. จากนั้นทำการกด Save
27 77. จากนั้นทำการกดที่ Create a new view 78. ทำการเปลี่ยน View name เป็น รายงานข้อมูล 79. เลือก View type เป็นแบบ deck
28 80. จากนั้นทำการกำหนด 80.1 Primary header เป็น ชื่อพนักงานขับรถ 80.2 Secondary header เป็น ทะเบียนรถ 80.3 Summary column เป็น วันที่ตรวจเช็ค 81. จากนั้นทำการกด Save 82. ทำการเปลี่ยน Icon
29 83. จากนั้นทำการกด Save
30 1. เลือกไปที่ Setting แล้วเลือกไปที่ Theme & Brand 2. จากนั้นทำการเปลี่ยนตามความพึงพอใจ 3. จากนั้นทำการเปลี่ยนตามความพึงพอใจ
31 4. จากนั้นทำการกด Save
32 1. กดไปที่ Google Drive จากนั้นทำการกดเพิ่ม Google Sheets 2. ทำการเปลี่ยนชื่อ Sheet เป็นคำว่า Home 3. จากนั้นทำการกด Add new Data
33 4. จากนั้นกดที่ Google Sheets 5. เลือก Sheets ที่มีชื่อว่า Home 6. จากนั้นกด Add to app
34 7. ก็จะได้หน้าต่าง Home ออกมาในลักษณะนี้ 8. จากนั้นทำการกดที่ Add view 9. จากนั้นทำการกดไปที่ Create a new view
35 10. ก็จะปรากฏออกมาในลักษณะดังภาพ 11. จากนั้นทำการเปลี่ยน View name ให้เป็น Home 11.1 เปลี่ยน For this data ให้เป็น Home 12. จากนั้นทำการกด Add ที่เครื่องหมายดังภาพ
36 13. ทำการใส่รูปภาพตามความต้องการ จากนั้นกด Save 14. ก็จะได้ออกมาในลักษณะนี้ 14.1 ให้เป็นทำการเปลี่ยน View type เป็น detail 14.2 เปลี่ยน Position ให้เป็น first 15. จากนั้นทำการเปลี่ยน Main image เป็น image 15.1 เปลี่ยน Coloumn order เป็น image
37 16. เปลี่ยน Display mode เป็น No Headings 16.1 เปลี่ยน Image style เป็น Background 17. จากนั้นทำการเปลี่ยน Icon ตามความต้องการ แล้วทำการกด Save 18. จากนั้นทำการเลือกไปที่ Data ของ Home จากกดที่ Table Setting
38 19. จะปรากฏหน้าต่างนี้ขึ้นมา ให้ทำการกดไปที่ Read-Only จากนั้นกด Done 20. จากนั้นทำการกด Save ก็เป็นอันเสร็จสิ้นการทำแอปพลิเคชัน
39 1. เริ่มจากการเข้าที่ Google Drive แล้วกด New Folder แล้วตั้งชื่อโฟลเดอร์ว่า ระบบแจ้งซ่อมรถรถ แล้วกด Create 2. จากนั้นทำการเพิ่ม Google Sheets ในโฟลเดอร์ที่สร้างขึ้นมา สร้าง Google Sheets ที่มี ชื่อว่า ระบบแจ้งซ่อมรถ 3. ตั้งชื่อ Sheets ที่มีชื่อว่า ระบบแจ้งซ่อมรถ
40 4. จากนั้นทำการเพิ่มชื่อใน คอลัมน์ ดังภาพ 5. ทำการเพิ่มชื่อใน คอลัมน์ ดังภาพ 6. สร้าง Google Sheets อีกหนึ่ง Sheets ใน Google Drive ที่สร้างไว้
41 7. เปลี่ยนชื่อ Sheets ให้เป็นชื่อ ข้อมูลพนักงาน 8. จากนั้นทำการเพิ่มชื่อใน คอลัมน์ ดังภาพ 9. ตั้งชื่อ Sheets ที่มีชื่อว่า ข้อมูลพนักงาน
42 10. จากนั้นทำการเข้าที่ AppSheet แล้วกดที่เครื่องมือ Create จากนั้นเลือกไปที่ Start with existing data 11. จะปรากฏหน้าต่างนี้ขึ้นมา ให้ทำการเปลี่ยน App name เป็น TMS Maintenance และ ทำการเลือก Category เป็น Other 12. ทำการกด Choose your data
43 13. จากนั้นทำการเลือก Google Sheet ที่สร้างไว้ตั้งแต่เริ่มต้น 14. ทำการเลือก Sheets และกด Select 15. จากนั้นคลิกที่ไอคอนดังภาพ App Sheet ก็จะเปลี่ยนหน้าต่างการทำงานเป็นอีกหน้าต่างดังภาพ
44 16. แล้วคลิกเลือกที่ Data แล้วเลือกมาที่ Columns 17. จากนั้นทำการเลือกไปที่ไอคอนรูปดินสอหน้าคอลัมน์ สำหรับพนักงาน 18. จากนั้นทำการเปลี่ยน Type เป็น Show 18.1 เปลี่ยน Category เป็น Section_Header 18.2 จากนั้นทำการกดไปที่ Content
45 19. จากนั้นทำการพิมพ์ สำหรับแจ้งซ่อม ในช่องว่าง แล้วทำการกด Save 20. จากนั้นทำการกด Done 21. จากนั้นมาที่ช่อง วันที่แจ้งซ่อม ทำการเปลี่ยน Type ให้เป็น Date
46 22. จากนั้นมาที่ช่อง เวลาแจ้งซ่อม ทำการเปลี่ยน Type ให้เป็น Time 22.1 จากนั้นทำการกดที่ช่อง Formula ของคอลัมน์ เวลาแจ้งซ่อม 23. จากนั้นทำการพิมพ์NOW() ลงในช่องว่างของ วันที่แจ้งซ่อม แล้วทำการกด Save 24. จากนั้นทำการพิมพ์NOW() ลงในช่องว่างของ เวลาแจ้งซ่อม แล้วทำการกด Save