คู่มือ “มือใหม่” หดั สรา้ ง Application (ชว่ ง Work From Home) Skilled Duck
คำ�นำ� ในชว่ งวกิ ฤต COVID-19 ที่หลายหนว่ ยงานต้อง Work From Home: WFH แบบไม่ทนั ตง้ั ตวั บางหน่วยงานอาจมีความ พรอ้ มอยแู่ ลว้ แต่บางหนว่ ยงานอาจยงั ไมม่ ีความพร้อม ทั้งด้านเทคโนโลยี ทง้ั บคุ ลากร ทง้ั แนวทาง การ WFH คมู่ อื เลม่ นี้ จะแนะน�ำวิธีการสรา้ ง Application ส�ำหรับการ WFH อยา่ งง่าย ด้วยการประยุกต์ใช้เครือ่ งมือในระบบออนไลนต์ ่าง ๆ ทเ่ี ปิดให้ใชฟ้ รี มาสร้างเปน็ Application ส�ำหรบั การ WFH ทง้ั นี้ Application นี้ เหมาะสำ� หรับหนว่ ยงานที่มขี นาดเล็ก มสี มาชิกไม่เกนิ 20 คน และมีผรู้ บั ผดิ ชอบในการกำ� กบั ดูแลการ Application ที่ชัดเจน หวังเป็นอยา่ งยงิ่ ว่า คูม่ อื เลม่ นี้จะเปน็ ประโยชนต์ อ่ หน่วยงานเล็ก ๆ ที่ตอ้ ง WFH ไมม่ ากกน็ ้อยนะคะ Skilled Duck เมษายน 2563 ก
สารบัญ หนา้ 1 หลกั การท�ำงานของระบบ 3 การสรา้ งโครงสร้างฐานขอ้ มลู 17 การสรา้ ง Application 42 การเผยแพร่ Application การตดิ ต้ัง Application 44 การแกไ้ ขปัญหาเบอื้ งตน้ 47 ข
หลักการทำ�งานของระบบ 1
หลักการทำ�งานของระบบ ระบบ Application ที่จะสรา้ งข้ึนส�ำหรับการใชง้ านช่วง Work From Home: WFH ระบบนี้ เปน็ การประยุกต์ใชง้ านจากเครื่องมอื ที่มใี ห้ใช้ ฟรีในปจั จุบนั โดยองค์ประกอบของ Application น้ี จะประกอบด้วย 1. หนา้ หลกั ท่รี วบรวม Link ส�ำหรับการลงเวลาเขา้ -ออกงาน Link ส�ำหรบั การรายงานผลการปฏิบตั งิ าน link ส�ำหรับการดาวน์โหลดเอกสาร 2. ระบบการลงเวลาเข้า-ออกงาน เป็นการประยกุ ตใ์ ช้ขอ้ มูลจาก Google Form และ Google Sheet โดยการสร้าง Google From เพื่อใหบ้ คุ ลากร ลงเวลาปฏิบตั งิ าน แล้วน�ำข้อมลู การประทบั เวลา ที่ปรากฏใน Google Sheet เป็นขอ้ มลู ในการลงเวลาเขา้ -ออกงาน 3. ระบบการรายงานผลการปฏบิ ตั งิ าน ช่วงทต่ี ้อง WFH เปน็ การ ประยุกตใ์ ชข้ ้อมูลจาก Google Form เพอ่ื ใหบ้ ุคลากรได้กรอกรายละเอียด แผนงานและผลการปฏบิ ัตงิ านชว่ งทตี่ ้อง WFH และสามารถ Download หรอื Print เสนอผ้บู รหิ ารได้ 4. ฐานขอ้ มูลส�ำหรับการติดต่อ เปรียบเสมือนสมุดโทรศพั ท์เคลื่อนท่ี ท่สี ามารถค้นหาบคุ คลทตี่ ้องการตดิ ต่อ แลว้ สามารถกดโทรออกหรอื กดส่ง Mail เพอ่ื ติดต่อบุคคลทต่ี อ้ งการไดท้ นั ที 5. รายละเอียดผลการปฏบิ ัตงิ านของแต่ละคน ท้งั นี้ การสร้าง Application จาก เคร่อื งมือดังกลา่ ว เปน็ การสร้างเพ่อื การใช้งาน เบอื้ งตน้ หากต้องการสร้างเพ่ือใชง้ านนอกเหนือ จากนี้ อาจตอ้ งลองศกึ ษาแนวทางหรือวิธกี ารจาก Template ตัวอยา่ ง แลว้ นำ� มาประยุกต์ใชง้ าน ตอ่ ไป 2
การสร้างโครงสรา้ งฐานขอ้ มลู 3
การสร้างโครงสรา้ งฐานข้อมูล จากหลกั การทำ� งานของระบบที่ได้กลา่ วไปข้างตน้ กอ่ นทีเ่ ราจะเรม่ิ ลงมือ สร้าง Application กัน สิง่ แรกทต่ี ้องท�ำก่อนคอื “การสรา้ งโครงสรา้ งฐานขอ้ มูล” ค�ำถามคอื .... “แล้วเราจะสร้างฐานขอ้ มลู อะไร อยา่ งไรบา้ ง” ระบบแรกทเ่ี ราจะสรา้ ง คอื ระบบการลงเวลาเข้า-ออกงาน ไม่ใชห่ นา้ หลกั นะจ๊ะ....เพราะเราใหค้ วามส�ำคัญเรอ่ื งการประทบั เวลาเป็นหลัก เลยตอ้ งสรา้ งระบบนี้ ก่อน ซึง่ ระบบการลงเวลาเป็นการประยกุ ตใ์ ชข้ อ้ มลู จากการประทับเวลาทบี่ คุ ลากรได้ กรอกขอ้ มูลผ่าน Google Form ดังน้นั ส่ิงแรกทเี่ ราตอ้ งทำ� คือ การสร้าง Google Form สำ� หรบั การลงเวลาเข้า-ออกงาน แล้วต้องสร้าง Form แบบไหน? “ไม่ยากเลย” เพราะในสว่ นนี้ เราตอ้ งการใชเ้ ฉพาะขอ้ มลู การประทับ เวลาเข้า-ออกงาน และช่อื ของบุคลากรท่ปี ฏบิ ตั ิงาน ดังน้ัน สิ่งที่ตอ้ งมีใน Google Form ของเราก็ คือ ชือ่ ของบุคลากรของเราทกุ คนท่ตี ้องลงเวลา เขา้ -ออกงาน เพ่อื ไมใ่ ห้เขาต้องพมิ พ์ชือ่ เอง เป็นการ ปอ้ งกนั การพิมพ์ชือ่ ของตนเองผิด และลดภาระ ของบคุ ลากรดว้ ย 4
การสร้างแบบฟอรม์ การลงเวลาปฏิบตั งิ าน สรา้ งไดด้ งั น้ี 1. Login เข้าบญั ชี G-mail ใครยังไม่มกี ็สมคั รนะคะ 2. เม่อื เข้า G-mail แล้ว ใหไ้ ปที่ Drive โดยสังเกตท่ีมุมบนขวา ที่มี จดุ วงกลม 9 จดุ ให้คลิกตรงจุดนน้ั แลว้ เลือก Drive (ไดรฟ์) 5
3. คลกิ เลือก New หรือ ใหม่ จากแถบ เมนูด้านซ้าย เลอื กเพ่มิ เตมิ แล้วเลอื ก Google Sheet (Google ฟอร์ม) 4. ตรงมมุ บนซ้าย ใหต้ ้งั ช่ือเป็น แบบฟอร์มลงเวลาปฏบิ ตั ิงาน เม่อื พมิ พแ์ ลว้ ข้อความดงั กล่าว จะปรากฏในพ้ืนทีห่ มายเลข 2 อัตโนมตั ิ จากน้ัน ตรงค�ำถามไม่ระบุช่อื ให้พิมพ์เปน็ ชอื่ -นามสกุล เลือก หลายตวั เลือก ส่วนตัวเลือก ให้ระบชุ ื่อ-นามสกลุ ของบุคลากรทกุ คนท่ตี ้องลงเวลาปฏิบตั ิงาน เข้า-ออก ผ่าน Application ท่ีเรากำ� ลงั จะสร้างข้ึน สุดทา้ ยคอื เปดิ ใช้งาน ปุ่ม “จ�ำเป็น” เพอ่ื เป็นการบังคับใหต้ อบ 6
เลอื กรปู ดวงตา เมือ่ กรอกรายละเอียดครบแล้ว เพ่ือดหู นา้ ตาของแบบฟอร์ม คลกิ ส่งทีม่ ุมบนขวา การใช้งานกค็ อื บุคลากรคลกิ เลอื กชอ่ื ตัวเอง แลว้ กด สง่ ข้อมลู การลงเวลาของบคุ ลากรก็จะถูกบนั ทึกไว้ใน Google Sheet ท่ีสร้างไว้ 7
จากน้นั กลบั มาหน้าแก้ไขแบบฟอร์มอกี คร้งั แลว้ กดส่งอีกคร้งั จากนั้นเลอื กเมนู Link แล้วตัด Link ให้สั้นลง เพื่อคัดลอก Link คลกิ เลอื กเมนู การตอบกลับ เพอื่ สร้าง Google Sheet 8
สรา้ ง Google Sheet สำ� หรบั จดั เกบ็ ขอ้ มลู การลงเวลาปฏิบัติงาน จากนัน้ ให้กลับไปที่ Google Drive แล้วคน้ หาไฟล์ Google Sheet ท่ีสร้างไว้ แล้วเปดิ ไฟล์นน้ั ขึน้ มา แบบฟอร์มดังกล่าวจะยังไม่มีข้อมูล จนกวา่ จะมคี นตอบใน Google Form แตเ่ ราจะไมส่ ่ง Link Google Form ใหใ้ ครกรอกเฉย ๆ คนท่ีจะกรอก ต้อง สามารถเข้า Google From ไดจ้ าก หนา้ Application ของเรา ดังนนั้ ล�ำดับต่อมาท่ีเราจะสรา้ งโครงสรา้ งฐานขอ้ มลู คอื หนา้ หลกั 9
กอ่ นสร้าง เราตอ้ งมโนก่อนวา่ หนา้ หลักของเราจะมีอะไรบ้าง 1. Link สำ� หรับลงเวลาเข้า-ออกงาน 2. Link สำ� หรบั รายงานผลการปฏบิ ัติงาน 3. Link ส�ำหรับดูรายละเอียดการกรอกผลการปฏิบัติงาน เมือ่ มโนไดแ้ ลว้ ว่าจะมอี ะไรบ้าง เรากส็ ร้าง Sheet ใหม่ ในไฟลล์ งเวลา เข้า-ออกงานทเ่ี ราเปิดขึน้ เมื่อสกั ครู่ โดยกดเครอื่ งหมาย + ด้านลา่ ง แล้วคลกิ ขวาที่ชอ่ื แผ่นงาน พรอ้ มเปลย่ี นช่อื เปน็ “หนา้ หลกั ” 10
จากนน้ั กรอกรายละเอยี ดของ Link ทีจ่ ะตอ้ งปรากฏในหนา้ หลัก โดย คัดลอก Link ของ Google Form ลงเวลาเข้า-ออกงานที่สร้างข้ึน มาวาง ไว้ใน Sheet น้ี ส่วน Link รายงานผลการปฏิบัตงิ าน และตรวจสอบการ รายงาน เมือ่ สรา้ งเสร็จแลว้ ค่อยนำ� มาวางภายหลัง มาถึงตรงน้ี เราก็ได้ 2 สว่ นแลว้ คอื ส่วนของฐานข้อมูลการลงเวลา เข้า-ออกงาน กับหนา้ หลกั ของ application ทสี่ ามารถคลิก Link เพ่ือเข้าส่หู นา้ Google Form ส�ำหรับการลงเวลาเข้า-ออกงาน แล้ว พกั สายตาแปบ๊ เด๋ยี วคอ่ ยมา “มโน” กันอกี นดิ ก่อนจะลงมือสร้างฐานข้อมูลท่ี 2 11
ต่นื ๆ ๆ จะให้ “มโน” ไดเ้ วลา “มโน” แล้ว อะไรอีกอ่ะ..... ก็แบบฟอร์มการรายงานผลการปฏิบัติงานไงล่ะ อา้ ว ๆ ๆ เราต้องการให้คน WFH กรอกรายงานอะไรให้เรา กท็ ำ� ระบบที่ 2 บ้างละ่ เบ้ืองตน้ กต็ อ้ งมีชือ่ คนรายงาน งานทไ่ี ด้รบั “แบบฟอรม์ ส�ำหรบั มอบหมาย และผลการดำ� เนนิ งาน เชอ่ื ว่า หลาย การรายงานผลการ หนว่ ยงานกค็ งจะคลา้ ย ๆ กนั น่ีแหล่ะนะ... ปฏิบตั งิ าน” ไงละ่ จะให้เขยี นอะไรเยอะแยะเน๊าะ เม่อื “มโน” ได้แล้ว หืมมมมม ก็ลงมือท�ำเลยจ้ะ..... ทำ� อะไรอ่ะ.... 12
มาต่อกนั ทอ่ี กี แบบฟอร์มนึงเลยจ้ะ... สร้างแบบฟอร์มใหม่อีก 1 แบบฟอรม์ ค�ำถามในแบบฟอร์ม กต็ ้องมี ตัวเลอื กของชื่อผูป้ ฏบิ ตั ิงาน และมชี ่องให้กรอกงานทไ่ี ดร้ ับมอบหมาย กับผลการ ปฏบิ ตั ิงานไงจะ๊ หน้าตาแบบฟอรม์ ท่สี รา้ ง มนั กจ็ ะประมาณน้แี หละ่ นะ... 13
เมื่อสรา้ งเสรจ็ คลิกเลอื กเมนู การตอบกลบั เพ่ือสรา้ ง Google Sheet เราก็จะ ไดโ้ ครงสรา้ งฐานข้อมูลสำ� หรับการเกบ็ ข้อมลู ผลการปฏิบัติงานของบุคลากร จากนั้น เราก็จะไม่ลืมท่จี ะ ไปคลิกที่ “สง่ ” เลอื กเมนู link แล้วตัด link ให้สนั้ ลง เพอื่ คัดลอก link นำ� link ทค่ี ัดลอกมา ไปวางไว้ในไฟล์ ลงเวลาเขา้ -ออกงาน ใน Sheet หนา้ หลักท่เี ราไดส้ รา้ งไว้ “วา๊ ว ๆ ๆ” ฐานขอ้ มลู 2 ฐาน เสรจ็ แล้ว ต่อไปก็สร้างฐานข้อมลู สดุ ท้าย คือ ฐานข้อมูลสำ� หรับการตดิ ตอ่ เผ่อื เวลาที่ WFH แล้วต้องติดตอ่ ใคร จะได้ค้นหาไดจ้ าก Application นไ้ี ด้ทนั ที 14
เริ่มต้นระบบท่ี 3 ดว้ ยการสรา้ ง Sheet ใหม่ในไฟล์ลงเวลาเข้า-ออกงาน แล้วใส่รายละเอียดบคุ ลากรที่ต้องการตดิ ต่อลงไป ต้องใสข่ ้อมูลอะไรบา้ ง กแ็ ลว้ แต่ เราว่าเราต้องการอะไรบ้าง ชื่อ-นามสกุล หน่วยงาน เบอรต์ ิดตอ่ E-mail มีภาพ ประกอบด้วยก็ดี เผอ่ื นึกชื่อไม่ออก เม่อื กำ� หนดรายละเอยี ดท่ีตอ้ งการได้แล้ว กล็ งมือกรอกรายละเอียดเลยจ้ะ ส่วนรูป แนะน�ำให้ท�ำเป็นขนาด 1:1 แลว้ น�ำมาวางไวใ้ น Folder แยกต่างหาก 15
จากนั้น ให้คลกิ ทีละภาพ แล้วเลอื กเมนู Link ตรงมุมบนขวา แลว้ คัดลอก Link ดงั กลา่ ว ไปวางให้ตรงกบั ชือ่ ทีเ่ รากรอกรายละเอยี ดไว้ เราเดินทางมาถึงครึง่ ทางของการสร้าง application ช่วง WFH กันแล้ว พกั สายตา ดื่มน้ำ�ชา กาแฟกันซักแกว้ แล้วกลับมาเรยี นรู้วิธกี ารสร้าง Application ในบทถดั ไปกนั ค่ะ 16
การสร้าง Application 17
หลายคนคงคิดว่า สว่ นนค้ี งจะยากแน่เลย ช้านไม่ไดจ้ บสาย IT ไมไ่ ด้จบ สาย Application มา จะทำ� ได้มย๊ั เนี่ย บอกเลยวา่ Skilled Duck เองกจ็ บบรหิ ารธุรกจิ ไมไ่ ด้จบสายนี้มา เชน่ กนั .... แตก่ ารสร้าง Application ผ่านเว็บไซดน์ ้ี มันไมไ่ ดย้ ากอยา่ งท่ี หลายท่านคดิ คะ่ กอ่ นอื่นก็เขา้ เวบ็ ไซด์ https://www.glideapps.com/ โดยเขา้ ระบบด้วย Mail ทเ่ี ราไดส้ รา้ งฐานขอ้ มูลไวน้ ะ... เขา้ Mail อน่ื เด๋ียวไมม่ ีขอ้ มูลให้ไปสรา้ ง Application นะจ๊ะ เม่อื Login ไดแ้ ล้ว หน้าตาของ Application มนั กจ็ ะมีให้สรา้ ง ใหม่ กับมี Template ใหเ้ ลือก.... เราเลอื กสร้าง Application ใหมก่ นั ก่อน ยงั ไม่ต้องไปดู Template นะ.... ไวท้ �ำเสร็จแล้ว อยากสร้าง Application อน่ื ๆ ไว้ใชง้ าน ค่อยเข้าไปดูตวั อยา่ งของเขาคะ่ เพราะถา้ มวั แต่ไปดู Template เด๋ยี ว Application ของเราจะไมเ่ สร็จเอานะคะ 18
จะเลือกสร้าง Application ใหม่ แล้ว ตอ้ งเลอื กอันไหนอ่ะ.... เมื่อเอา Mouse มาวางแล้วมนั ข้ึนใหเ้ ลอื ก 2 อนั เรากเ็ ลือก จาก Google Sheet โดยคลกิ ตวั เลือก From Foogle Sheet แลว้ เลือก Sheet ทเ่ี ราสร้างไว้คือ Sheet ลงเวลาเขา้ -ออกงาน เมอื่ เลอื ก Sheet ทีเ่ ปน็ ฐาน ข้อมลู ของเราแล้ว จะเขา้ มาสูห่ นา้ ของ การปรบั แตง่ Application โดยระบบ ของเวบ็ ไซดจ์ ะใช้ชอ่ื Sheet ทเี่ ราสร้าง ปรบั มาเปน็ แถบเมนู 19
กอ่ นทจ่ี ะด�ำเนินการปรับแต่งหนา้ ตาของ Application มาเรยี นรู้เมนู ในเวบ็ ไซดน์ ้ีกันก่อน Layout คือหน้าตาการแสดงผลของ Application Tabs คอื สว่ นของการปรบั แตง่ เมนขู อง Application Data คือ ส่วนท่ีแสดงรายละเอยี ดขอ้ มูลเหมอื นใน Google Sheet Preview as คอื สว่ นทีใ่ ห้เลอื กการแสดงผลของหนา้ Layout วา่ ตอ้ งการให้แสดงผลแบบ iOS หรือ Andriod Setting คอื ส่วนของการปรับแตง่ Application ทง้ั สขี อง App Icon ของ App ชอื่ ของ App Edit Sheet คือ ส่วนท่เี ช่อื มกับ Google Sheet หากคลิก เลือกภาพนี้ ระบบจะเปิดไฟล์ Google Sheet ทเี่ ราสรา้ งไว้ขน้ึ มา Reload Sheet คือ สว่ นท่ตี อ้ งกดทกุ ครัง้ เมือ่ มีการเพ่มิ -ลด Sheet หรือการเพ่มิ ลด Column ในแตล่ ะ Sheet เม่ือรู้จกั เมนูการใชง้ านเบื้องตน้ แลว้ มาปรบั แต่ง application กันคะ่ 20
Step 1 เพือ่ ความสวยงาม เราเลอื ก Setting กอ่ น เพอ่ื เลอื กธมี สี ของ Application โดยเมอื่ คลกิ เลอื ก Setting ดา้ นซา้ ยแล้ว ใหด้ แู ถบเมนู ดา้ นขวา จะมีตวั เลอื กใหป้ รบั แตง่ คอื 1. Design รปู แบบ คอื เลอื กสีของ Application มนั จะแสดง ใน App และตัว Icon ของ App 2. Icon คอื ภาพของ Icon ทจ่ี ะปรากฎอยู่หน้าจอโทรศัพท์ของเรา 21
ส่วน General เป็นตัวปรับแก้ชอื่ Application ของเรา ว่าจะต้ัง ชื่อ App ว่าอะไร ใครเปน็ ผ้เู ขยี น App เมือ่ กำ�หนดในส่วนนเี้ สรจ็ แล้ว ให้ไปสว่ นถัดไป คือ การกำ�หนดเมนูใน Application โดยเลือก Tabs ในแถบเมนูด้านซา้ ย 22
จากนัน้ ใหเ้ คร่อื งหมาย + ตรงมุมบนขวา ในส่วนน้ี เราสามารถเลือกได้ว่า เมนูท่ีเราจะก�ำหนด เราต้องการใหแ้ สดงผล จาก Sheet ไหนในฐานขอ้ มูล ทัง้ น้ี หากตอ้ งการเรยี งลำ� ดับ เมนูใน Application ใหม่ ให้คลิกท่ีช่ือ เมนนู ัน้ จากแถบเมนูด้านซ้าย คลกิ ค้างไว้ แลว้ ลากไปอยู่ในล�ำดับทตี่ ้องการ 23
เราสามารถเลือก Icon ของ แตล่ ะเมนไู ด้ ด้วยการเลือกภาพด้านลา่ ง (ไม่สามารถอพั โหลด Icon ใหม่ได้) สว่ นเมนูไหนทีไ่ ม่ต้องการ เราก็ สามารถคลกิ เลือกเมนนู ้นั แลว้ กดรูป ถังขยะ เพอ่ื ลบเมนูน้ันท้งิ 24
สำ� หรับแถบเมนู แถบเมนนู ี้ จะสามารถสนทนาระหวา่ ง ผูท้ ่มี ี Application น้ไี ด้ แตร่ ะบบจะให้ระบุ ช่อื พร้อม E-mail เพื่อ Verify ตวั ตน กอ่ นเขา้ ระบบสนทนา ผู้ใชง้ านทกุ คนจะสามารถ เหน็ การสนทนาดังกลา่ วได้ ทั้งนี้ ระบบสนทนา จะมีการยนื ยันตัวตนผ่าน E-mail ทกุ คร้ัง กอ่ นเขา้ หอ้ งสนทนา 25
เมอ่ื ตง้ั คา่ ในสว่ นของ Tabs เรียบร้อยแลว้ หน้าตาของ Application ท่เี ราสรา้ ง จะไดแ้ ถบ Icon และแสดงผลดงั ภาพ กรณีที่มีการสลับล�ำดบั ในเมนู Tabs ล�ำดับการแสดงผลใน Application ก็จะปรับตามอัตโนมตั ิ 26
จากเมนู Tabs เพอื่ ก�ำหนดเมนใู น Application แล้ว ล�ำดบั ต่อไป ก็ คือการตกแตง่ หน้าตาการแสดงผลของแต่ละเมนู ท�ำได้โดยเลือกเมนู Layout ใน แถบเมนูด้านซา้ ย แล้วดูชดุ ค�ำส่ังสำ� หรับปรับแตง่ ด้านขวามอื ในเมนแู รกท่เี ราจะปรบั คือ เมนู “หน้าหลัก” ทเ่ี ราตอ้ งการใหเ้ ห็นเป็น หนา้ แรกเมือ่ เข้า Application โดยหน้าแรกจะมี Link สำ� หรบั Check in/ out link ส�ำหรบั รายงานผลการปฏบิ ตั ิงาน และ Link สำ� หรบั ดรู ายงาน ทัง้ หมด ซ่ึงในฐานขอ้ มูลของเรา จะเชือ่ มกับ Sheet หน้าหลกั ทีเ่ ราไดค้ ดั ลอก link ทจ่ี ะเข้าสู่ Google Form วางไว้ ดังนน้ั เมือ่ เราตอ้ งการที่จะ ใหค้ นเข้า Application สามารถ คลิกที่ข้อความแล้วเข้าไปสู่หน้า Google Form ทก่ี ำ� หนดไว้ ใหเ้ รา 1. เลอื กรูปแบบการแสดงผลเปน็ Details 2. คลิกเครอื่ งหมาย + ทีม่ มุ บนขวา ตรงตวั เลอื ก Buttons ใหเ้ ลือก Link 27
3. ตรง Link ใหเ้ ราเลือกหวั ข้อท่ี เรากำ� หนด เชน่ Link สำ� หรบั ลง เวลาปฏิบัติงาน เราก็เลือกหัวขอ้ นัน้ แล้วก�ำหนดช่ือท่ีผู้ใช้งานอ่านแล้ว เข้าใจ สว่ น Title หากไม่ต้องการให้ มขี อ้ ความเหมอื นกัน ให้เลอื ก Caption as Title ขอ้ ความทปี่ รากฏ จะมีแค่ ขอ้ ความเดยี วใหเ้ ห็น ตามภาพ ทั้งน้ี หากเราไมต่ อ้ งการใหแ้ สดงผลแค่ ข้อความ อยากให้มีภาพประกอบดว้ ยเพอื่ ความ สวยงาม จะมคี �ำแนะน�ำสำ� หรับการใส่ภาพประกอบ โดยสามารถศึกษาได้ในส่วนของการสร้างเมนู Contact Person 28
Step 2 การสรา้ งหนา้ จอแสดงผลการลงเวลาปฏิบตั ิงาน เพ่อื ตรวจ สอบว่า ใครลงเวลาวันไหน เวลาเท่าไหร่ โดยการคลกิ เลอื กเมนู (ชอื่ Sheet ทจี่ ัด เกบ็ ขอ้ มลู การลงเวลา) จากนัน้ ใหเ้ ลือกรปู แบบ (Style) เป็นแบบ Calendar เพ่อื ใหร้ ะบบจดั กลุ่มตามวนั ใหอ้ ัตโนมตั ิ ซึง่ จะง่ายตอ่ การตรวจสอบ 29
เมอ่ื เลือกรปู แบบการแสดงผลโดยจัดกลุ่มตามวนั ใหแ้ ลว้ สง่ิ ท่ตี อ้ งตัง้ ค่า ตอ่ คอื ในแต่ละวนั เราต้องการให้แสดงผลอะไรบา้ ง โดยการต้งั ค่าจากส่วนของ Data ในแถบเมนูด้านขวา เมื่อระบบจดั กลุ่มตามวนั แล้ว สิ่งทจี่ ะใหง้ ่ายตอ่ การตรวจสอบ ควรจะ เป็นชือ่ และเวลาท่ีเข้า-ออกงาน ดังนนั้ ในสว่ นของ Title จึงควรก�ำหนดเป็น ช่ือบุคลากร และ When คือ ประทับเวลา สว่ น Order ขึน้ อย่กู ับหน่วยงาน ว่าต้องการเหน็ วันลา่ สดุ กอ่ น หรือว่าเริ่มใช้งานก่อน ในทน่ี ้ี ขอตั้งเปน็ วนั ลา่ สดุ เพื่อง่ายตอ่ การตรวจสอบรายวนั เมื่อกำ� หนดรายละเอียดเสร็จแล้ว ส่วนตอ่ ไป คอื Features การแสดงผลหนา้ นี้ เราต้องการให้สามารถ ค้นหาไดห้ รือไม่ หากต้องการใหส้ ามารถ ค้นหาได้ เชน่ ตอ้ งการดเู ฉพาะบุคลากร คนใดคนหนง่ึ ใหเ้ ลือก Show Search Bar 30
ส่วนของการ Filter by เนอื่ งจากขอ้ มูลใน Sheet น้มี ีเพยี ง 2 คอลมั น์ คอื ประทับเวลา กบั ชอื่ บคุ ลากร ดงั นน้ั หากจะก�ำหนดให้มกี าร Filter ได้ กจ็ ะ สามารถ Filter ได้เฉพาะชอื่ บุคลากรเท่านนั้ เมอื่ เลือก Filter บคุ ลากรแลว้ จะปรากฏสัญลกั ษณส์ ำ� หรบั Filter อยมู่ ุมบนขวาของหนา้ จอแสดงผล เมอื่ คลกิ ท่ีปุ่ม Filter จะปรากฏชอ่ื ให้เลือก สามารถเลือกได้ 1 หรอื มากกว่า เม่อื กำ� หนดโจทยส์ ำ� หรับ Filter แลว้ กด Done ระบบกจ็ ะคน้ หา ข้อมูลเฉพาะส่วนนัน้ มาแสดงผล 31
ส่วนสดุ ท้ายคือ ส่วนของ Contact Person ที่เราจะสรา้ งเพ่อื เปน็ ทำ� เนยี บในการตดิ ตอ่ ระหว่างบุคลากร จากท่ีเรา “มโน” ไวว้ ่า ในสว่ นน้ี เราจะมภี าพของคน ๆ น้นั พรอ้ ม ขอ้ มูลการติดต่อ และสามารถโทร หรอื Mail ตดิ ตอ่ ได้ทนั ที ซงึ่ ในฐานข้อมลู เราได้เตรียมไว้หมดแลว้ ในส่วนของการปรับแต่งการแสดง ผลเราจะตอ้ งท�ำอยา่ งไร 1. ตง้ั คา่ Style เปน็ แบบ Tiles 2. ข้อมลู ใต้ภาพ สามารถแสดงผล ได้ 2 บรรทัด จงึ ก�ำหนดในสว่ นของ Data ใหเ้ ป็นช่ือ กบั กลุ่มงาน 3. ในส่วนของการแสดงผลภาพ ของ แต่ละคน หากเราไมป่ รบั แต่งอะไร หนา้ จอจะปรากฏแบบน้ี ซ่ึงการแสดงผลจะไม่ตรงกับสัดส่วน ของภาพที่เราท�ำไว้ตั้งแต่แรกคือ 1:1 ดงั น้นั ในสว่ นของ Design หวั ขอ้ Tile Shape จึงตอ้ ง กำ� หนดเป็น Square 1:1 32
เมอ่ื ก�ำหนดแล้ว... โอ๊ย... ภาพใหญ่เวอร์ กว่าจะคน้ หาคนทตี่ ้องการเยอะ เมื่อยน้วิ แย่ “ขอเป็นแสดงผลเปน็ 2 คนต่อแถวได้มย๊ั ??” เมนู 1 Tile per row จ้ะ... ไปตรงนนั้ แล้วเลอ่ื นจดุ ไปจุดที่ 2 33
ไดอ้ ยา่ งท่ตี อ้ งการละ แตช่ อื่ ยาวไป แสดงผลไม่ครบ ท�ำไงอะ่ เลอื ก Allow text wrapping จะ้ แค่นีก้ แ็ สดงผลครบแลว้ 34
กอ่ นทจี่ ะไปปรบั แตง่ หนา้ แสดงผลขอ้ มลู ของแตล่ ะคน เรามาต้ังคา่ Filter กันอีกซกั นดิ เพ่ือใหง้ ่ายตอ่ การค้นหา หากบุคลากรในฐานขอ้ มูลของเรามหี ลายกลมุ่ เราอาจ Filter รายกลมุ่ จะท�ำใหค้ ้นหาคนทต่ี ้องการไดง้ ่ายข้ึน ดงั นนั้ ในส่วนของ Sort – filter by เรากเ็ ลือกเป็นแผนก/กลุ่มงาน เม่ือปรบั แต่งหน้านี้เสรจ็ แลว้ ต่อไปกเ็ ปน็ หน้าแสดงผลขอ้ มลู ของแตล่ ะคนล่ะคะ ใหค้ ลิกเลอื กคนใดคนนงึ เพือ่ เขา้ สหู่ นา้ แกไ้ ขการแสดงผลข้อมูล จากน้ันกป็ รบั แตง่ กนั !!!! 35
1. กรณี App ของใครไมแ่ สดงผล ภาพ แต่แสดงผลเป็นชอื่ ไฟล์ภาพ ให้คลกิ ท่ีแถบเมนูดา้ นขวา ตรง Components ทรี่ ะบเุ ปน็ ช่ือ รูปภาพ แล้วลบทิ้ง 36
จากนัน้ เพ่ิม Components ใหม่ โดยการคลกิ เครอื่ งหมาย + แล้ว เลอื ก Media เป็น Image จากน้ันต้งั คา่ ดังน้ี Original Image height เปน็ 1:1 Style เป็น Inset with content 37
แล้วเล่ือน Image มาอยู่ใต้ Title ชอ่ื -นามสกลุ ในสว่ นของโทรศัพท์ หากของใครไม่ แสดงผล Icon Message or Phone ก็ใหล้ บ Components น้นั ทิ้ง แล้วสร้างใหม่ โดย การกด + เพอ่ื เพ่ิม Components 38
ตงั้ ค่าการเชือ่ มต่อให้จาก Column ที่เปน็ เบอร์โทรศทั พ์ 39
ในสว่ นของ E-mail กเ็ ช่นกัน หากของใครไม่ขึ้น Icon E-mail ให้ลบ Components น้ันท้งิ แลว้ สร้างใหม่ โดยเพิ่ม Components เป็น E-mail แลว้ ตั้งคา่ การเชอ่ื มโยง Data เป็น To E-mail 40
เพยี งเท่านี้ หากใช้ Application หากกดท่ี Icon Phone มนั ก็จะ เช่ือมไปยังหนา้ จอการโทร หากกดท่ี Icon Message มนั กจ็ ะเช่ือมไปยังหนา้ พมิ พ์ข้อความเพ่ือ สง่ ไปเบอร์โทรดังกลา่ ว หรือหากกดท ่ี Icon E-mail มันกจ็ ะเชอ่ื มไปยัง E-mail ของเรา เพื่อท�ำการสง่ E-mail ได้ทนั ที และน่ีคอื ทงั้ หมดของการปรบั แต่ง Application สำ� หรับการ WFH ในส่วนต่อไป เราจะแนะนำ� วิธีการน�ำไปใช้งานกนั คะ่ 41
การเผยแพร่ Application 42
เม่ือเราสรา้ ง Application ของเราเรยี บร้อยแล้ว ใหก้ ด Share ระบบจะประมวลผลซักพกั แล้วจะสรา้ ง QR code กบั Link เพือ่ ใชใ้ นการแชร์ save QR code เพอ่ื ส่งต่อ กด Copy เพ่ือคดั ลอก Link ส�ำหรับส่งตอ่ 43
การตดิ ตงั้ Application 44
เมอ่ื เราไดร้ ับ Link หรอื Scan QR Code แลว้ การติดตงั้ จะแตกตา่ ง กนั ระหวา่ ง iOS และ Android ระบบ Android เม่อื เข้าระบบแลว้ บางเครื่องจะมี Pop Up สอบถามวา่ ...บนั ทกึ ลงหนา้ จอหลัก? ใหเ้ ลอื กบันทึกลง หนา้ จอหลักเลย รอซกั พกั เมอื่ ไปดูท่ีหนา้ จอหลักของมือถอื เรา ในหน้าจอหลกั กจ็ ะปรากฎ Icon Application สำ� หรับ เขา้ ระบบได้ เปน็ อันเสร็จสิ้นการติดตงั้ Application 45
ระบบ iOS เม่อื เขา้ ระบบแลว้ บางเครือ่ งจะมี Pop Up สอบถามวา่ ...บันทกึ ลงหน้าจอหลกั ? ให้เลือกบันทึกลง หนา้ จอหลกั เลย หากเครื่องใดไมแ่ สดง Pop Up เพ่ือให้ บันทึกลงหน้าจอหลัก ใหเ้ ลือกเปิดในแอพอ่นื (คือ เปิดผา่ นเวบ็ ไซด์) แลว้ เลือกเพ่มิ ไปยงั หน้าจอโฮม 46
การแก้ไขปญั หาเบื้องตน้ 47
Search
