เอกสารประกอบการอบรมเชิงปฎิบัติ

คำนำ

คู่มือการใช้งาน Glide App ในโครงการสัมมนาเปลี่ยนครูเป็น Dev คู่มือนี้จัดทำขึ้นเพื่อประกอบกิจกรรม
เชิงปฏิบัติการเปลี่ยนครูเป็น Dev เป็นคู่มือการใช้ในระดับขั้นพื้นฐาน ประกอบไปด้วยเนื้อหาสำคัญดังน้ี
การเตรียมข้อมูลระบบจัดการข้อมูลนักเรียน การเตรียมข้อมูลเกมแบบทดสอบ การลงชื่อเข้าใช้งาน Glide App
วิธีการสร้างแอปพลิเคชัน การปรับแต่งแอพ การสร้างเกมแบบทดสอบ การสร้างเกมแบบตรวจสอบคะแนน
การเผยแพร่และการนำแอปพลิเคชนั ไปใชง้ าน การติดตัง้ แอปพลิเคชนั บนโทรศพั ท์

หวังว่าคู่มือการใช้ Glide App นี้ จะเป็นประโยชน์ในการปฏิบัติงาน โดยเฉพาะใช้สำหรับทางการศึกษา
ที่เกี่ยวกับ Glide App หากมีข้อแนะนำที่เป็นประโยชน์ต่อการปรับปรุงเอกสารเล่มนี้ กรุณาแจ้งต่อผู้เขียนจัก
เป็นพระคุณยิ่ง

สารบญั หนา้

เร่ือง 1
3
1. การลงชอ่ื เข้าใช้งาน Glide Apps 5
2. วธิ ีการสร้างแอปพลเิ คชัน 7
3. การปรบั แตง่ แอพ 7
4. แอปพลิเคชนั จดั การข้อมลู นกั เรียน 16
33
4.1 เตรยี มขอ้ มลู ระบบจัดการข้อมลู นักเรยี น 33
4.2 การสร้างระบบจดั การขอ้ มลู นกั เรียน 41
5. แอปพลเิ คชนั แบบทดสอบ 57
5.1 เตรียมข้อมลู แบบทดสอบ 68
5.2 การสรา้ งเกมแบบทดสอบ
5.3 การสรา้ งแบบตรวจสอบคะแนน
6. การเผยแพรแ่ ละการนำแอปพลเิ คชันไปใช้งาน

1

คู่มอื การใชง้ าน Glide Apps
โครงการสัมมนาเชงิ ปฏบิ ตั ิการ เรือ่ ง เปลี่ยนครใู ห้เปน็ Dev

คู่มือฉบับนีจ้ ดั ทำขึ้นเพอ่ื เป็นเอกสารประกอบการจัดทำ โครงการสมั มนาเชิงปฏิบัตกิ าร เรื่อง เปล่ียนครูให้
เป็น Dev ในรายวิชาสัมมนาทางด้านเทคโนโลยีและการสื่อสารการศึกษา โดยมี อาจารย์เกริกศักดิ์ เบญจรัฐพงศ์
เป็นอาจารย์ผู้สอน และคู่มือนีจ้ ัดทำข้ึนมาเพือ่ ประกอบกิจกรรมปฏิบัตกิ าร การสร้างการจัดการข้อมูลนักเรียนและ
เกมแบบทดสอบ ด้วย Glide Apps คู่มือการใช้งาน Glide Apps เป็นคู่มือการใช้งานในระดับขั้นพื้นฐาน มีเนื้อหา
สำคญั ดังน้ี

1. การลงชอ่ื เข้าใชง้ าน Glide Apps
1.1 เข้าสเู่ ว็บไซต์ https://www.glideapps.com/

2

1.2 Log in เข้าใช้งาน

1.3 เม่ือลงชอื่ เขา้ ใช้งานสำเร็จระบบจะนำเขา้ สหู่ น้าการสรา้ งแอปพลเิ คชนั

3

2. วธิ ีการสร้างแอปพลเิ คชนั
2.1 คลิกที่ “New Project”

2.2 เมอ่ื คลิกที่ New Project จะปรากฏหน้าตา่ งดงั น้ี
Glide App หมายถึง รูปแบบแอปพลเิ คชันในรูปแบบของสมาร์ทโฟน หรือ แท็บเลต็
Glide Page หมายถึง รูปแบบแอปพลเิ คชนั ในรูปแบบบนเวบ็ ไซต์
ท้ังนี้ ทางคณะผู้จัดทำจะนำเสนอในรูปแบบของ Glide App จากน้ันคลกิ Continue

4

2.3 เมอ่ื เลอื กรปู แบบท่ตี อ้ งการแล้ว จะปรากฏหน้าตา่ งดงั นี้
ระบบจะสอบถามว่าจะนำเข้ามูลเข้าในรูปแบบใด ถ้าหากมีการเตรียมข้อมูลไว้แล้วให้เลือก

Google Sheets หรอื Excel ถ้าท่านยังไมไ่ ด้เตรียมข้อมลู ไว้ ให้เลือกที่ Glide Tables
ทั้งนี้ ทางคณะผู้จัดทำได้มีการเตรียมข้อมูลไว้แล้วจึงเลือก Google Sheets จากนั้น

คลกิ Continue

2.4 เลอื ก ไฟลข์ ้อมูลที่จะนำมาเช่ือมกบั แอปพลเิ คชนั เมือ่ เลอื กเสร็จแลว้ คลกิ “Select”

5

2.5 จะปรากฏหน้าดังนี้

3. การปรบั แต่งแอปพลิเคชัน

3.1 คลกิ จะปรากฏหน้าดังน้ี

6

3.2 คลกิ Appearance เพื่อเลือกสีของแอปพลิเคชัน

3.3 คลกิ App Info เพื่อเลือกหรอื เปลย่ี น โลโกแ้ อปพลิเคชัน

หากต้องการเลือกจากคอมพิวเตอร์ คลิก “Upload” ถ้าต้องการเลือกรูปที่ Glide app มีให้
ใหค้ ลกิ ที่รปู จะปรากฎรูปดินสอ

7

4. แอปพลิเคชนั จัดการข้อมูลนกั เรยี น
4.1 เตรียมข้อมูลระบบจัดการขอ้ มูลนักเรยี น

4.1.1 เขา้ เวบ็ ไซต์ https://drive.google.com/

4.1.2คลิก “ใหม่” แลว้ เลือก โฟลเดอร์

8

4.1.3 จะปรากฏหน้าต่างดงั น้ี ใหท้ ำการตงั้ ช่อื โฟลเดอร์ เม่อื เสร็จแลว้ คลกิ “สรา้ ง”

4.1.4 เมื่อสรา้ งเสร็จแล้วจะปรากฏโฟลเดอรท์ ี่ไดส้ ร้าง แล้วทำการเข้าไปยังโฟลเดอรน์ นั้

9

4.1.5 นำขอ้ มลู อื่นๆ เชน่ รูปนกั เรียน รปู ปกแอปพลิเคชนั มาใสใ่ นโฟลเดอร์

4.1.6 คลิกท่ี ชือ่ โฟลเดอร์ แล้วเลอื ก “แชร์”

10

4.1.7 คลกิ ที่ “เปลี่ยนเป็นทกุ คนท่ีมีลิงก”์

4.1.8 เมอ่ื เปลยี่ นสำเรจ็ คลกิ “สำเรจ็ ”

11

4.1.9 เมื่อเข้ามายังโฟลเดอร์แล้วให้คลิกขวา จะปรากฏหน้าต่างดังภาพ ให้ทำการคลิกที่
google sheet

4.1.10 ระบบจะพามายัง google sheet แล้วให้ต้ังชอ่ื งานดา้ นซ้าย

12

4.1.11 คลกิ “ซตี 1” แล้วเปลยี่ นช่อื เป็น “เมนู”

4.1.12 ใสข่ อ้ ความในคอลมั นด์ ังภาพ

13

4.1.13 กลับมายังโฟลเดอร์ เลือกรูปปกแอป แล้วคลิกขวาท่รี ปู ให้เลอื ก “รับลงิ ก”์

4.1.14 กด “คัดลอกลงิ ก”์ แลว้ คลิก “เสรจ็ สน้ิ ”

14

4.1.15 นำลงิ ก์รูปปกแอป มาวางไวด้ า้ นลา่ งคอลมั น์ รปู ปก ดงั ภาพ

4.1.16 คลิกท่ี + เพือ่ เพิ่มแผน่ งาน เมื่อเพ่มิ เสรจ็ แลว้ ใหท้ ำการเปลยี่ นชอื่ ซตี 2 เป็น “กลุ่มสาระ”

15

4.1.17 ใส่ข้อความในคอลัมน์ดังภาพ (หากต้องการเพิ่มกลุ่มสาระ ให้พิมพ์ในช่องโดยเรียงต่อลง
มาเรอื่ ย ๆ)

4.1.18 คัดลอกลิงก์ ภาพปกของกลุ่มสาระในโฟลเดอร์ Google drive มาใส่ลงช่องด้านล่างรูป
กลุ่มสาระ

4.1.19 คลกิ ท่ี + เพอ่ื เพม่ิ แผ่นงาน เมอ่ื เพิ่มเสร็จแลว้ ให้ทำการเปล่ยี นชือ่ ซตี 3 เปน็ “คุณคร”ู

16

4.1.20 ใส่ข้อมูลลงในคอลัมน์ โดยจะมีข้อมูลดังนี้ ชื่อ-นามสกุล กลุ่มสาระ เบอร์โทร ไอดีไลน์
เฟสบุ๊ก ครทู ่ปี รึกษา อีเมล รปู คณุ ครู ดังภาพ

4.2 การสรา้ งระบบจดั การข้อมูลนกั เรียน
4.2.1 เข้าสู่ Glide App โดยการเชอื่ มข้อมูลผา่ น Google sheet

17

4.2.2 จะปรากฏหน้าตา่ งดงั น้ี

4.2.3 ลบขอ้ มลู SCREEN ออกให้หมดเสยี ก่อน

18

4.2.4 เปลยี่ นชอื่ แถบข้อความดา้ นบน เปน็ ชอื่ แอปพลิเคชนั

4.2.5 เพิ่มปกแอปพลเิ คชัน โดยการคลกิ + ที่ SCREEN แล้วเลอื ก

19

4.2.6 ภาพจะปรากฎดงั น้ี

4.2.7 ปรบั ขนาดภาพใหเ้ ปน็ 1:1

20

4.2.8 คลกิ ที่ Add Action

4.2.9 คลกิ None ให้เลอ่ื นหาและคลิก “Show New Screen”

21

4.2.10 คลกิ ท่ี Data แลว้ เปลีย่ นให้เป็น “กลุ่มสาระ”

4.2.11 คลิกท่ีภาพปกบนหนา้ จอโทรศัพท์

22

4.2.12 หน้าจอโทรศพั ทจ์ ะเปลย่ี นไปหนา้ กลุม่ สาระ

4.2.13 หากตอ้ งการเปลี่ยนรูปแบบการจดั วาง สามารถลองเลอื กรูปแบบตา่ ง ๆ ได้ท่ี เมนดู า้ นซ้าย

23

4.2.14 คลกิ บริเวณแถบดา้ นบน

4.2.15 จะปรากฏหนา้ ตา่ งดังภาพ ให้คลกิ ที่ กลมุ่ สาระ

4.2.16 คลิก บริเวณด้านขวา จะปรากฏหน้าต่างดังนี้ แล้วให้ทำการเปลี่ยนชื่อที่ช่อง
Label เป็น ครู

24

4.2.17 คลกิ Column Type แล้วเลือก

4.2.18 จะปรากฎแถบเมนดู า้ นลา่ ง

25

4.2.19 คลิก None เลือก คุณครู

4.2.20 เลือก กลุม่ สาระ

26

4.2.21 กด √ ที่ชอ่ ง Match multiple เมอ่ื เสรจ็ แลว้ คลกิ Done

4.2.22 จะปรากฎขอ้ มลู ดังภาพ

4.2.23 คลกิ บรเิ วณแถบดา้ นบน

27

4.2.24 มายงั หน้า กลมุ่ สาระ คลิกท่ีรปู กลมุ่ สาระ

4.2.25 จะปรากฏหนา้ ตา่ งดงั ภาพ ใหล้ บขอ้ มลู ท่ชี อ่ ง SCREEN ออกใหห้ มด

28

4.2.26 คลิก + ท่ชี อ่ ง SCREEN แล้วเลอื ก Inline List

4.2.27 คลิกท่ี Inline List

29

4.2.28 จะปรากฏแถบเมนูดา้ นขวา

4.2.29 คลิกท่ี Image เลือก รูปคณุ ครู

30

4.2.30 จะปรากฎขอ้ มลู ดังภาพ

4.2.31 หากต้องการเปล่ยี นรปู แบบการจัดวางของภาพใหเ้ ลือก Tiles

31

4.2.32 เลื่อนแถบเมนูลงมาดา้ นล่างจะเห็น Tile Shape สามารถเปล่ยี นรปู แบบของภาพได้

4.2.33 คลิกท่ี ภาพของคุณครู

32

4.2.34 จะปรากฏหนา้ ดังน้ี ใหล้ บ Link ออกจาก SCREEN

4.2.35 คลกิ + ที่ SCREEN แล้วเลือก
4.2.36 จะปรากฏภาพดังนี้ สามารถย้ายตำแหน่งข้อมูลต่างๆ ที่ช่อง SCREEN ได้ด้วยการคลิก
ซ้ายค้างแลว้ ลากข้ึนลงได้

33

5.แอปพลเิ คชนั แบบทดสอบ
5.1 การเตรยี มขอ้ มูลแบบทดสอบ

5.1.1 เขา้ เวบ็ ไซต์ https://drive.google.com/

5.1.2คลิก “ใหม่” แลว้ เลอื ก โฟลเดอร์

34

5.1.3 จะปรากฏหนา้ ตา่ งดงั นี้ ใหท้ ำการตง้ั ช่ือโฟลเดอร์ เมื่อเสรจ็ แล้ว คลกิ “สร้าง”

5.1.4 เมอื่ สร้างเสรจ็ แลว้ จะปรากฏโฟลเดอร์ที่ไดส้ ร้าง แลว้ ทำการเข้าไปยงั โฟลเดอร์นน้ั

35

5.1.5 เมื่อเข้ามายังโฟลเดอร์แล้วให้คลิกขวา จะปรากฏหน้าต่างดังภาพ ให้ทำการคลิกที่
google sheet

5.1.6 ระบบจะพามายัง google sheet แลว้ ให้ต้งั ชือ่ งานดา้ นซ้าย

36

5.1.7 คลิก “ซีต1” แล้วเปล่ียนชื่อเป็น “โจทย์คำถาม”

5.1.8 คลกิ ที่ + เพื่อเพิ่มแผ่นงาน

37

5.1.9 จะปรากฏ “ซีต2” ข้นึ มา แล้วทำการเปลยี่ นชือ่ เป็น “คำตอบ”

5.1.10 ให้กลบั มายังหนา้ “โจทย์คำถาม” นำคำตอบของแตล่ ะข้อท่ีไดเ้ ตรียมไวม้ าใส่ โดยให้ใสค่ ำตอบ
ในแนวตงั้ ดังภาพ

38

5.1.11 เมอื่ กรอกขอ้ มลู ในส่วนของโจทย์คำถามเสร็จแล้ว ใหเ้ ปลี่ยนไปยังหนา้ “คำตอบ”
หนา้ น้จี ะเปน็ ส่วนสำหรับใหแ้ อปพลิเคชนั นำข้อมูลของนกั เรยี นที่ได้เล่นเกมแล้ว มาเก็บไวภ้ ายใน

หนา้ นี้ ซง่ึ ข้อมลู ทจ่ี ะเก็บจะมีดังน้ี วนั เดอื น ปี ที่เลน่ เกมแบบทดสอบ ชื่อ-นามสกุล คำตอบท่ีนักเรียน
ได้เลอื กในข้อนั้นๆ ท้ังนผ้ี อู้ อกแบบแอปพลิเคชนั สามารถนำข้อมูลนอกเหนอื จากนีม้ าใสไ่ ด้

39

5.1.12 ให้กลบั ไปยัง โฟลเดอร์ใน Google drive จะปรากฏ ไฟล์ google sheet อยู่ในโฟลเดอร์

5.1.13 นำข้อมลู อ่นื ๆ เชน่ ปกแอปพลเิ คชัน ปกโจทย์คำถาม มาใสล่ งในโฟลเดอร์

40

5.1.13 คลิกที่ ช่ือโฟลเดอร์ แลว้ เลือก “แชร”์

5.1.14 คลิกท่ี “เปลีย่ นเป็นทกุ คนทม่ี ลี ิงก”์

41

5.1.15 เมอ่ื เปลีย่ นสำเรจ็ คลกิ “สำเรจ็ ”

5.2 การสร้างแบบทดสอบ
5.2.1 คลกิ X เพื่อลบข้อมูลที่ “SCREEN” และลบช่ือท่ี Label ออกใหห้ มดเสยี กอ่ น

42

5.2.2 คลิกที่ Details เพือ่ เปลี่ยนรปู แบบแอปพลเิ คชนั

5.2.3 คลกิ ตรงSCREEN แลว้ จะมหี น้าต่างดงั น้ปี รากฎขน้ึ

43

5.2.4 เลอื่ นลงมาดา้ นล่าง หัวข้อ MEDIA แลว้ คลิก
5.2.5 คลกิ “Image” ทช่ี อ่ ง SCREEN จะปรากฎแถบเมนดู ้านขวา

5.2.6 คลิก “Image” ทแ่ี ถบเมนดู ้านขวา แล้ว เลือก “From URL”

44

5.2.7 มายงั Google drive ทไี่ ดท้ ำการสรา้ งไวใ้ นข้อที่ 1

5.2.8 คลิกขวา ท่ี รปู ปกแอปพลเิ คชนั แลว้ คลกิ “รับลิงก”์

45

5.2.9 คลิก “คดั ลอกลงิ ก”์ แล้วกด “เสรจ็ สน้ิ ”

5.2.10 นำลิงกท์ ่ีคดั ลอกมาวางในช่อง Image ท่แี ถบเมนูดา้ นขวา

46

5.2.11 คลิก เพอื่ ปรับขนาดภาพใหพ้ อดีกับแอปพลเิ คชัน

5.2.12 คลกิ ตรงSCREEN แล้วเลอื ก “Form Button”

47

5.2.13 จะปรากฏป่มุ ดงั ภาพ

5.2.14 เปลีย่ นชือ่ ปมุ่ เป็น “เร่มิ เกม” ท่แี ถบเมนูดา้ นขวา