Standas Not Standard

1. จุดเริ่มต้น Project
2. Sales Check In System Pilot version
3. ข้อดี / ข้อเสียของ Google Apps Script
4. Sales Check-In System Official version
   1. Request เพิ่มเติมสำหรับ official version
   2. ออกแบบฐานข้อมูลบน Google Sheet
   3. Prompt บน Gemini (Gem: Coding partner)
   4. สร้าง System บน Google Apps Script
      1. [1] เปิด Google Apps Script
      2. [2] นำ code มาใส่บน Apps Script
      3. Change YOUR_SPREADSHEET_ID
      4. Deploy Project
      5. ปรับแก้ไข UI App เพิ่มเติม
   5. Official Version launch
5. Data Visualization
   1. Preparing Data
   2. Sales Check-In Dashboard

จุดเริ่มต้น Project

Project เก่าเพิ่งผ่านไป project ใหม่มาอีกแล้ว สำหรับใครที่ยังไม่ได้อ่านเรื่อง My Google Maps ตัวช่วยในการสร้างแผนที่ สำหรับคนมีเวลาน้อย แนะนำให้ไปกดอ่านก่อนเลย ของดีย์

แต่วันนี้เรามาด้วยเรื่อง การสร้างระบบ Sales Check in บน Google Apps Script โดยใช้ Gemini (ฟรี) จากที่วันก่อน พี่ทีม Marketing ขอช่วยเรื่องการทำแผนที่รถบัส มาวันนี้พี่หัวหน้าทีมเซลล์บอกว่า

” น้องๆ พี่อยากได้ระบบ tracking การเยี่ยมร้านค้าของ sales team นอกจาก track พิกัดได้แล้ว อยากให้เก็บข้อมูลร้านค้าที่ไปเยี่ยมไว้เป็น Database เพื่อใช้งานในอนาคตได้ด้วย “

โอเค แล้วพี่มี budget เท่าไหร่ คำตอบคือ ไม่มี !!! 555 (แต่พี่เค้าให้เหตุผลว่า เอาไว้ใช้ในช่วงนี้ไปก่อนที่จะมีระบบเข้ามาในอนาคต) โอเค หนูจะพยายามค่ะ

หลังจากที่ได้โจทย์มา เราก็ลองไปหาผ่าน Google, Youtube และ AI ไม่ว่าจะเป็น Chatgpt, Gemini, Claude แล้วก็ได้แนวทางแก้ปัญหานี้มาประมาณนึง คือ

1. AppSheet : เป็น No code app builder สามารถสร้างระบบ check in เพื่อ track พิกัดได้ แต่ตัวนี้เรารู้สึกว่า UI หน้าตา App มันยังดูค่อนข้างเก่า และจำกัดจำนวนคนเข้าใช้งานไม่เกิน 10 คนต่อแอป เลยยังไม่เลือกใช้ตัวนี้
2. Glide App : เป็น No code app builder เช่นกัน แต่ UI สวยกว่า ตอนแรกตัดสินใจว่าจะเลือกใช้ตัวนี้ แต่พอไปอ่านข้อจำกัดปรากฎว่า มีข้อจำกัดเดียวกัน คือ สร้างได้แค่ 1 แอป และใช้งานได้ไม่เกิน 10 คนต่อ 1 แอป เลยเป็นเหตุผลที่ยังไม่เลือกใช้เช่นกัน

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

ปรากฎว่า นี่แหละแสงสว่างที่ปลายอุโมงค์ 555

Sales Check In System Pilot version

หลังจากฟังคลิปจบ เราก็ลองนำ prompt ที่ทางช่องเค้าให้ มาลองปรับแก้ไขเป็นสิ่งที่เราต้องการ แล้วก็ได้เป็น prompt ดังต่อไปนี้

Prompt Gemini

ต้องการสร้าง web application ระบบเช็คอินของพนักงานขาย ใน Google Apps Script โดยให้ฐานข้อมูลเก็บอยู่ใน Google Sheets

โดยอยากให้ระบบมีหน้าตา interface ดังต่อไปนี้
– ให้หน้าตา interface ของ web application มีความสวยงามคล้ายๆกับ instagram
– font ของระบบให้เป็น font ที่ชื่อว่า Kanit
– header title ของชื่อเว็บ ให้ background มีสีเหมือนกับตีมของเว็บ instagram
-ให้หน้าจอของ web application สามารถปรับเปลี่ยนขนาดแบบ responsive ได้กรณีแสดงผลลัพท์ในโทรศัพท์มือถือ

และอยากให้ระบบมี features ดังต่อไปนี้
– มีให้กรอกชื่อร้านค้า, Distributor, ชื่อ – นามสกุลของเซลล์ และต้องเป็น drop down list เพื่อที่จะควบคุมเรื่อง data accuracy
– ให้ดึงพิกัดของพนักงานคนนั้นๆโดยอัตโนมัติ
– สามารถแนบรูปภาพของเซลล์คนนั้นๆ เพื่อเช็คอินได้โดยเป็นการถ่ายรูป หรือ อัพโหลดรูปลง

โครงสร้างไฟล์ Google Sheets ให้มีชีทดังต่อไปนี้
– ชีทรวบรวมประวัติของพนักงาน ชื่อ นามสกุล ตำแหน่งของเซลล์ ภาคที่สังกัด และ Distributor ที่ดูแล
– ชีทรวบรวมรายชื่อของ Distributor โดยประกอบไปด้วย ชื่อ Distributor, จังหวัด, ภาค, เซลล์ที่ดูแล
– ชีทรวบรวมตำแหน่งที่ตั้งของร้านค้าที่เซลล์ไปเช็คอิน โดยประกอบด้วย ชื่อร้านค้า, พิกัดเช็คอิน (lattitude, longitude), Distributor ที่สังกัด, เซลล์ที่ดูแล [โดยที่ชื่อร้านค้าห้ามซ้ำกันในแต่ละ Distributor ที่สังกัด]

ก่อนจะนำ Prompt ไปวาง ให้เลือก Gem (ตัวนี้จะคล้ายกับ Custom GPT) ที่ชื่อว่า Coding partner(คู่หูเขียนโค้ด) ใน Gemini และ เลือก Model เป็น 2.5 Pro (preview) เพื่อให้ Gemini นั้นเขียน code ได้เก่งขึ้น จากนั้นนำ prompt ด้านบนวาง และรันคำตอบได้เลย

ผลลัพธ์ที่ได้คือ Gemini จะสอนเราตั้งแต่การเริ่มต้นสร้างฐานข้อมูลบน Google Sheet, สร้าง Script เพื่อให้เรานำไปวางบน Apps Script ทั้งยังสอนถึงวิธีการนำโค้ดไปใช้งานแบบ Step by step หรือหากเราไม่เข้าใจส่วนไหน ก็สามารถ prompt ถามได้โดยตรง โครตเจ๋ง !

ตัวอย่างผลลัพธ์ที่ได้

Gemini จะเริ่มต้นสอนตั้งแต่สร้างฐานข้อมูลบน Google Sheet

วิธีการนำ Code ไปวางบน Apps Script

วิธีการ Deploy Project

และนี่คือผลลัพธ์ หลังจากทำตามขั้นตอนที่ Gemini แนะนำมา

App version pilot ที่ได้มา มี UI ที่เรียบง่าย ทันสมัย สบายตา ตรงตามที่เราบรีฟไปเลย ถือว่าทำได้ดีมาก สิ่งต่อมาคือ เราต้องปรับแอปให้ตรงตามความต้องการของเราเอง ไม่ว่าจะเป็น ฐานข้อมูลจริง เงื่อนไขในการบันทึกข้อมูล หรือวิธีการใช้งาน

แต่ก่อนจะไปปรับ เรามาดูข้อดี/ข้อเสีย ของ Google Apps Script กันก่อน

ข้อดี / ข้อเสียของ Google Apps Script

อีกข้อที่เรารู้สึกว่ามันดีมากเลยคือ เมื่อเราแก้ไขข้อมูลบน Google sheet มันจะทำการ Update ข้อมูลบนแอปให้โดยอัตโนมัติ โดยไม่จำเป็นต้องกดรันลูปการทำงานใหม่

แต่ในขณะเดียวกัน หากเรามีการแก้ไข Google sheet เช่น มีการเปลี่ยนคอลัม การสลับตำแหน่งคอลัม ก็อาจจะเกิดผลกระทบกับแอปได้ เพราะฉะนั้น นี่ก็เป็นข้อควรระวังอย่างหนึ่งสำหรับการใช้ Google App s Script

Sales Check-In System Official version

หลังจากที่ได้ลองใช้งาน pilot version ไปแล้ว ถือว่าแอปใช้งานได้ดีเลย คราวนี้เราจะมาทำการ prompt เพิ่มเติม เพื่อที่จะ customize ระบบให้ใช้งานง่ายขึ้น และทำให้ระบบหลังบ้านเก็บข้อมูลได้อย่างมีประสิทธิภาพมากขึ้น

Request เพิ่มเติมสำหรับ official version

• เนื่องจาก sales team มีฐานข้อมูลร้านค้าที่เก็บไว้อยู่ชุดนึง ดังนั้น เราจะนำเอาข้อมูลร้านค้าเก่าที่มีอยู่ มาใส่ใน Google sheet เพื่อเก็บไว้เป็นข้อมูลนำร่อง
  
  นั่นหมายความว่า เราจำเป็นต้องเก็บข้อมูลประเภทของร้านค้า(เพิ่มหน้า UI) ว่าจุดที่พนักงานขายออกไปเช็คอินนั้น เป็นร้านค้าเก่าที่เคยมีอยู่ในระบบ หรือร้านค้าใหม่ เพื่อป้องกันความซ้ำซ้อนของข้อมูล

• เนื่องจากร้านค้าจะอยู่ภายใต้ Distributor (ดูความสัมพันธ์จากรูปภาพด้านล่าง) ดังนั้น การกรอกข้อมูล หากไม่ทำการบังคับให้เลือกได้เฉพาะร้านค้าภายใน Distributor นั้นๆ อาจทำให้เกิดความสับสน และชื่อร้านค้าอาจซ้ำกันได้
  
  วิธีแก้ไขคือ หน้า UI เราจำเป็นต้องบังคับให้กรอกชื่อ Distributor ก่อน หลังจากนั้นให้ดึงชื่อร้านค้าเก่าในระบบของ Distributor นั้นๆ ออกมาโชว์เป็น Drop down list พนักงานขายถึงจะสามารถเลือกชื่อร้านค้า และกรอกข้อมูลได้ (กรณีประเภทร้านค้าเก่า)

• เราอยากเก็บข้อมูลว่า ในแต่ละเดือนพนักงานขาย ไปเยี่ยมร้านค้าใหม่ได้กี่ร้าน จึงเพิ่มชีท 1 ชีท เพื่อเก็บข้อมูลเฉพาะร้านค้าใหม่
  
  ในส่วนของหน้า UI หากเลือกเป็นประเภทร้านค้าใหม่ พนักงานจะสามารถกรอกชื่อร้านค้าเข้ามาได้เลย แต่มีเงื่อนไขคือ หากชื่อร้านค้านั้นซ้ำกับชื่อร้านค้าเก่า ระบบจะไม่ทำการบันทึก และขึ้น pop up แจ้งเตือนว่า มีชื่อร้านค้านี้อยู่ในระบบแล้ว จำเป็นต้องกรอกชื่อร้านค้าใหม่ (กรณีประเภทร้านค้าใหม่)

ออกแบบฐานข้อมูลบน Google Sheet

เนื่องจากเรามีประสบการณ์จาก pilot version แล้ว ดังนั้น ฐานข้อมูลของ official version จะคล้ายๆกันกับของ pilot version แต่จะมีข้อมูลที่ละเอียดขึ้น และเพิ่มชีท New Stores ขึ้นมาเพื่อเก็บข้อมูลร้านค้าใหม่ ซึ่งจะมีทั้งหมด 5 ชีท ได้แก่

Employee (ข้อมูล Sales Team)

Distributors (ข้อมูล Distributors)

Stores (ข้อมูลร้านค้าเก่าของแต่ละ Distributor เป็นชีทสำคัญที่ระบบจะ filter และดึงชื่อร้านค้าของแต่ละ Distributor ออกมาโชว์ใน drop down list)

CheckinHistory (ชีทสำคัญ สำหรับบันทึกข้อมูล, เก็บพิกัด Latitude, Longitude และเก็บลิ้งค์รูปภาพ)

New Stores (ชีทสำหรับเก็บข้อมูลร้านค้าใหม่)

เตรียม Database บน google sheet เรียบร้อยแล้ว ขั้นตอนต่อไปคือการเขียน prompt ให้กับ Gemini

Prompt บน Gemini (Gem: Coding partner)

อย่างที่พูดไปตอนต้นว่า official version เราจะ customize ระบบให้ใช้งานง่ายขึ้น ตรงโจทย์และใช้งานได้จริง โดยการปรับหน้า UI ปรับการบันทึก และปรับการดึงข้อมูลหลังบ้าน และนี่คือ prompt ที่เราปรับเนื้อหาเรียบร้อยแล้ว

ต้องการสร้าง web application ระบบเช็คอินของพนักงานขาย ใน Google Apps Script โดยให้ฐานข้อมูลเก็บอยู่ใน Google Sheets

โดยอยากให้ระบบมีหน้าตา interface ดังต่อไปนี้
– ให้หน้าตา interface ของ web application มีความสวยงามคล้ายๆกับ instagram
– font ของระบบให้เป็น font ที่ชื่อว่า Kanit
– header title ของชื่อเว็บ ให้ background มีสีเหมือนกับตีมของเว็บ instagram
-ให้หน้าจอของ web application สามารถปรับเปลี่ยนขนาดแบบ responsive ได้กรณีแสดงผลลัพท์ในโทรศัพท์มือถือ

และอยากให้ระบบมี features ดังต่อไปนี้
– มีให้กรอกชื่อ-นามสกุลพนักงานขาย, Distributor, ชื่อร้านค้า และต้องเป็น drop down list เพื่อที่จะควบคุมเรื่อง data accuracy
– ให้ดึงพิกัดของพนักงานคนนั้นๆโดยอัตโนมัติ
– สามารถแนบรูปภาพของเซลล์คนนั้นๆ เพื่อเช็คอินได้โดยเป็นการถ่ายรูป หรือ อัพโหลดรูปลง
– หน้า UI เรียงลำดับ ตามนี้ ชื่อ-นามสกุลพนักงานขาย, Distributor, ชื่อร้านค้า, แนบรูปภาพเพื่อเช็คอิน

– ระหว่าง Distributor กับร้านค้าให้มีระบบ Check box เพื่อเลือกว่าร้านค้านั้นๆเป็นร้านค้าเก่า หรือ ร้านค้าใหม่ โดยที่
** หากเป็นร้านค้าเก่าต้องขึ้น Dropdownlist ชื่อร้านค้า และดึงข้อมูลชื่อร้านค้าจากชีท Stores โดยมีเงื่อนไขว่า dropdownlist ที่โชว์ ต้องมีเฉพาะชื่อร้านค้าใน Distributor นั้นๆเท่านั้น นั่นหมายความว่า จำเป็นต้องกรอกชื่อ Distributor มาก่อน เพื่อจะได้ filter และดึงรายชื่อมาโชว์ใน dropdown list เฉพาะของ Distributor นั้น
** หากเป็นร้านค้าใหม่ ให้ขึ้นเป็นช่องเพื่อกรอกข้อมูลร้านค้า แต่มีเงื่อนไขว่า ใน Distributor เดียวกัน ชื่อห้ามซ้ำกัน หากซ้ำกัน ให้ขึ้น pop up แจ้งเตือนว่า มีชื่อร้านค้านี้อยู่ใน Distributor นี้และ กรุณากรอกชื่อใหม่

– ชีท CheckinHistory คอลัม Type of Store จะทำการ record ว่าข้อมูลที่บันทึกเป็นร้านค้าเก่า หรือร้านค้าใหม่
– เก็บ record ข้อมูลเฉพาะร้านค้าใหม่ ลงในชีทที่ชื่อว่า New Stores โดยมี 2 คอลัมคือ StoreName และ Distributor เพื่อเก็บ record ชื่อร้านค้าและชื่อ Distributor

โครงสร้างไฟล์ Google Sheets ให้มีชีทดังในรูปที่แนบมา

อย่าลืมข้อสำคัญเลยคือ ต้องมีพิกัด Latitude, Longitude ของร้านค้า และรูปภาพ เพื่อยืนยันด้วย

ใน prompt จะมีการแนบรูปหน้าตา database บน google sheet ที่เราสร้างขึ้นมาก่อนหน้านี้ โดยเราทำการแนบรูปไปทั้งหมด 5 รูป ตามจำนวนชีทฐานข้อมูลด้านบน เพื่อให้ Gemini เข้าใจฐานข้อมูลได้ง่ายขึ้น

หลังจากแนบรูปเรียบร้อย ก็สามารถทำการ run prompt ได้เลย

สร้าง System บน Google Apps Script

ผลลัพธ์ที่ได้มาก็จะหน้าตาคล้ายกับ pilot version ซึ่งประกอบไปด้วย

• วิธีการสร้างฐานข้อมูล (google sheet)
• Script ที่เป็น code ทั้งไฟล์ Code.gs, Index.html, JavaScript.html และ CSS.html (สามารถคัดลอก และนำไปวางบน App Script ได้เลย)
• คำแนะนำสำหรับการนำโค้ดไปวางบน App Script
• วิธีการ Deploy project และนำไปใช้งาน

โดยเราจะมาสอนวิธีการทำตั้งแต่เริ่มต้น (วิธีการสร้างฐานข้อมูลบน google sheet เราได้จัดเตรียมไว้ก่อนหน้านี้เรียบร้อยแล้ว ไม่ต้องทำอะไรเพิ่มเติม) มาเริ่มกันตั้งแต่เปิด Apps Script จน Deploy project กัน

[1] เปิด Google Apps Script

เปิดไฟล์ Database ที่เราสร้างไว้บน google sheet ไปที่ Extensions > Apps Script

จะได้หน้าต่างแบบนี้ขึ้นมา

[2] นำ code มาใส่บน Apps Script

code ของเรามีทั้งหมด 4 ไฟล์ด้วยกัน ซึ่งแต่ละ project จะได้จำนวนไฟล์ code ไม่เท่ากัน (ไม่ต้องตกใจ) เพราะมันขึ้นอยู่กับความซับซ้อนของแต่ละ project

ยกตัวอย่าง pilot version เราได้ไฟล์ code มา 2 ไฟล์ แต่เมื่อ customize มากขึ้นเป็น official version ไฟล์ code ก็เพิ่มจาก 2 มาเป็น 4 ไฟล์

มาเริ่มกันที่ไฟล์ code.gs : ทำการลบข้อมูลทั้งหมด และ copy code ใน Gemini มาวางในไฟล์ code.gs ได้เลย

ต่อไปจะทำการสร้างไฟล์ Script บน Apps Script และเปลี่ยนชื่อเป็น Index.html ตามวิธีด้านล่าง และสามารถทำแบบเดียวกันกับ อีก 2 ไฟล์ที่เหลือ คือ JavaScript.html และ CSS.html (เราจะทำการสร้างไฟล์ไว้ทีเดียวเลย)

ไปที่ + > HTML

ทำการเปลี่ยนชื่อเป็น Index.html

และนี่คือไฟล์ Script ที่ได้

ทำซ้ำกับอีก 2 ไฟล์ (JavaScript.html และ CSS.html)

จากนั้นนำ Code ที่ Gemini generate มาให้ วางตามไฟล์ที่เราสร้างไว้ได้เลย (ก่อนนำ code มาวาง อย่าลืมลบ code ที่เป็นค่าเริ่มต้นออกก่อน)

Index.html

JavaScript.html

CSS.html

เป็นอันเรียบร้อย ขั้นตอนต่อไปคือ การเปลี่ยน ID Spreadsheet เพื่อให้ App สามารถเข้าถึง และบันทึกข้อมูล ลงบน google sheet ได้

Change YOUR_SPREADSHEET_ID

กลับไปที่หน้า google sheet ของเรา ที่ URL ส่วนที่ไฮไลท์ เราเรียกสิ่งนี้ว่า SPREADSHEET_ID ทำการ copy ส่วนนี้ไว้

.../spreadsheets/d/1U0904yehL7hJ-AR6QaQ75v7LJS87aCY-6nMpcZ03pf8/edit#gid=0

กลับไปที่หน้า Apps Script ไฟล์ Code.gs นำ SPREADSHEET_ID ที่ copy ไว้ paste ลงไป

วาง SPREADSHEET_ID

หลังจาก set ค่า Spreadsheet ID เรียบร้อยแล้ว ก็จะเข้าสู่ขั้นตอนการ Deploy Project

Deploy Project

ไปที่ Save project to Drive > Deploy > New deployment

ไปที่รูป ฟันเฟือง > Web app > ใครมีสิทธิ์เข้าถึง: Anyone > Deploy

Google จะขออนุญาต (Authorization) ให้สิทธิ์สคริปต์เข้าถึงข้อมูลใน Google Sheet และ Drive ของคุณ ให้กด ให้สิทธิ์เข้าถึง (Authorize access) เลือกบัญชี Google ของคุณ และในหน้า “แอปนี้ไม่ได้รับการยืนยัน” ให้คลิกที่ ขั้นสูง (Advanced) > ไปที่ ... (ไม่ปลอดภัย) และกดยินยอม (สำคัญมาก)

หลังจาก Deploy สำเร็จ เราจะได้รับ URL ของเว็บแอป ให้คัดลอก URL นั้นไปใช้งานได้เลย

และนี่คือหน้าตา Sales Check-In App ที่เราได้

จากรูปจะเห็นได้ว่า เราจำเป็นต้องปรับ UI ส่วนกล่องที่ “คลิกเพื่อเลือกรูป หรือ ถ่ายรูป” เพราะกล่องไม่เต็มหน้าจอ และ ตัวอักษรมีการซ้อนทับกัน

ปรับแก้ไข UI App เพิ่มเติม

เราจะทำการแนบไฟล์โค้ดทั้งหมด ทั้ง (code.gs, Index.html, JavaScript.html และ CSS.html) ให้ Gemini ทำการ review พร้อมทั้งแนบรูปหน้า UI pilot version และ official version ที่เกิดปัญหา

จากนั้นทำการ prompt ให้ Gemini แก้ไขโค้ดให้ใหม่ ให้หน้า UI official version ส่วน “คลิกเพื่อเลือกรูป หรือ ถ่ายรูป” เหมือนกับ pilot version

จากนั้นทำการ prompt ว่า

ฉันทำแอป Sales Checkin ขึ้นมาบน App Script ตอนนี้ฉันมีปัญหาคือ
หน้าแอปของฉันเหมือนรูปที่ 1 คือ ส่วนที่เป็นกล่อง “คลิกเพื่อเลือกรูป หรือ ถ่ายรูป” ไม่เต็มหน้าจอ และตัวอักษรมีการซ้อนทับกันอยู่

ซึ่งฉันอยากให้ส่วนที่เป็นกล่อง “คลิกเพื่อเลือกรูป หรือ ถ่ายรูป” เป็นเหมือนรูปที่ 2 แล้ว แก้ข้อความตรงกลางกล่องว่า “แตะเพื่อถ่ายรูป หรือแนบรูปภาพ”

อย่าลืมใช้ตัวอักษร Kanit

ช่วย review และแก้ไข code ให้หน่อย

เราก็จะได้ โค้ด, วิธีการแก้ไข และวิธีปรับ Script แบบละเอียด

ในกรณีที่ไม่เข้าใจว่าต้องเอาโค้ดที่ได้ไปแทนที่ หรือแก้ตรงไหน (สำหรับคนที่ไม่เก่งเรื่อง coding) สามารถถาม Gemini ได้โดยตรงเลย ดังรูปด้านล่าง

หลังจากเราทำการแก้ไขโค้ดเรียบร้อยแล้ว ก็ทำการ Deploy Project อีกครั้ง

ไปที่ Save project to Drive > Deploy > Manage deployments

Edit(รูปดินสอ) > Version: New version > Deploy

เราก็จะได้ Link app official version สามารถกดเปิด หรือ copy link ไปเปิดบนโทรศัพท์ได้เลย

และนี่คือผลลัพธ์ของแอป Sales Check-In ที่ได้ สามารถใช้งานได้ทั้งคอมพิวเตอร์ และ โทรศัพท์มือถือ

สำหรับสิ่งที่เราต้องการสื่อใน part นี้คือ วิธีการแก้ไขปัญหา กรณีที่เจอ code หรือ UI ที่ไม่ตรงตามความต้องการ บางคนอาจจะ prompt แค่ครั้งเดียวแล้วได้แอปที่ตรงความต้องการ

หรืออย่างเรา จริงๆต้อง prompt หลายครั้งเลยทีเดียว กว่าจะได้มาเป็นแอปในรูปแบบที่ สามารถใช้งานได้จริง

ข้อแนะนำสำหรับเราก่อน prompt ลง Gemini เลย คือ

• แนะนำให้ลองวาดภาพ UI ที่อยากได้
• ออกแบบฐานข้อมูล ที่พร้อมใช้งาน
• list เงื่อนไขสำหรับแอป หรือระบบอย่างละเอียด

หากทำตาม 3 ข้อนี้ได้ จะทำให้เวลา prompt เราเห็นภาพได้ชัดขึ้น และ prompt ได้อย่างละเอียดมากยิ่งขึ้น

แต่ถ้า Advance ขึ้นมาหน่อยก็ทำเป็น flow แล้วแนบไปด้วยตอนที่เรา prompt (prompt ดีมีชัยไปกว่าครึ่ง เพราะตอนแก้คุยกับ Gemini นานมาก)

ความยากของการปรับแก้คือ ตัวเราเองใช้ Gemini free version เลยทำให้ทุกครั้งที่ใช้งานจนติด Limit จำเป็นจะต้องใช้ Email ใหม่ในการแก้ไขให้ได้ตรงความต้องการ ซึ่งรวมทั้ง process ตั้งแต่ pilot จนถึง official version ที่ใช้งานได้จริง เราใช้ไปทั้งหมด 3 Email

แต่ก็คุ้มสำหรับโจทย์นี้ที่ไม่มี budget และได้ system app ที่มาช่วยอำนวยความสะดวกในการทำงาน

Official Version launch

ข้อมูลที่ทำการบันทึกไปในวิดีโอด้านบน ก็จะถูกบันทึกเข้ามาใน Google sheet (สามารถดูได้ที่ 2 รูปด้านล่าง) โดยระบบจะทำการดึงพิกัด latitude, longitude โดยอัตโนมัติ แต่มีข้อแม้ว่า ตอนที่บันทึกข้อมูล ผู้ใช้จำเป็นต้องอนุญาตให้ระบบเข้าถึงพิกัด ณ ตอนนั้น

• กรณีร้านค้าเก่า ข้อมูลจะบันทึกลงชีท CheckinHistory เพียงชีทเดียว
• กรณีร้านค้าใหม่ ข้อมูลจะบันทึกลงชีท CheckinHistory และ New Stores

ส่วนรูปที่ได้มีการเช็คอินและถ่ายภาพเข้ามา ระบบจะทำการเก็บไว้บน Google Drive

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

Data Visualization

Preparing Data

เราเลือกใช้ tool เป็น looker studio ในการ visualize เหตุผลเพราะ ฟรี ใช้งานง่าย สะดวก และด้วยตัวข้อมูลที่ไม่ได้มีโครงสร้างที่ซับซ้อน

แต่ก่อนจะนำข้อมูลเข้า looker studio เราจำเป็นต้องเตรียมข้อมูลหน้า CheckinHistory เพื่อที่จะอัพไฟล์เข้า looker ก่อน

เนื่องจากเราต้องเพิ่ม 1 คอลัม ที่เอาไว้บันทึกพิกัดเป็นรูปแบบ latitude, longitude จึงจำเป็นต้องสร้างชีทแยกออกมาอีก 1 ชีท ชื่อว่า “CheckinHistory-Up to Looker” เพื่อนำชีทนี้เข้า looker (เราสามารถแก้ไขปัญหานี้โดยการ prompt และบังคับให้บันทึกข้อมูลตามรูปแบบที่ต้องการตั้งแต่แรกได้เลย จะได้ไม่ต้องมาเสียเวลาเตรียมข้อมูลเพิ่มเติมภายหลัง)

ส่วนสาเหตุที่ไม่เพิ่มคอลัม หรือนำเอาข้อมูลจากชีท CheckinHistory เข้า looker โดยตรงเนื่องจาก เมื่อมีการปรับเปลี่ยน การเพิ่มคอลัม เกิดขึ้นภายในชีทที่ใช้บันทึกข้อมูลจากระบบ อาจทำให้ข้อมูลที่เราต้องการบันทึกจากแอป ไม่เข้า google sheet ได้ (พลาดมาแล้ว 555)

อธิบายง่ายๆคือ พยายามอย่าไปยุ่งกับชีทที่จะมีข้อมูลถูกบันทึกเข้ามา

แล้วถ้าเราสร้างอีกชีทเพื่อนำข้อมูลเข้า looker
เราจำเป็นต้อง copy ข้อมูลทุกครั้งที่บันทึกหรือเปล่า? คำตอบคือ ไม่

เพราะเราจะใช้สูตร =เซลล์ในชีทCheckinHistory ไว้ในทุกแถวและ ทุกคอลัมที่มีข้อมูล ตั้งแต่คอลัม A ถึง J แล้วลากสูตรไว้ล่วงหน้า 1000 แถว หรือมากกว่านั้นตามความต้องการ

เพื่อที่หากมีข้อมูลถูกบันทึกเข้ามาในชีท CheckinHistory ข้อมูลนั้นก็จะปรากฎในชีท CheckinHistory-Up to Looker โดยอัตโนมัติ

ส่วนคอลัม K ก็จะทำการผูกสูตรเชื่อม latitude, longitude ไว้ โดยใช้ & ในการเชื่อมพิกัดในคอลัม G และ H โดยอัตโนมัติ

หลังจากเตรียมข้อมูลเรียบร้อยแล้ว ก็นำข้อมูลเข้าสู่ looker studio เพื่อ visualize ได้เลย

Sales Check-In Dashboard

สำหรับขั้นตอนการทำ Dashboard เราจะขอไม่ลงลึกใน part นี้ แต่เราจะโชว์ Dashboard ที่ทำเสร็จเรียบร้อยแล้วให้ได้ดูกัน

จาก Dashboard จะเห็นได้ว่า ผู้ใช้งานสามารถ กรองวันที่, Sales Name และ Distributor ได้

ในส่วนของ Dashboard จะโชว์ให้เห็นถึง จำนวนร้านค้าทั้งหมดที่พนักงานขายเข้าเยี่ยม, จำนวนร้านค้าใหม่, จำนวนการเข้าเยี่ยมร้านค้าแยกตามชื่อพนักงานขาย และ แสดงพิกัดของร้านค้าที่พนักงานขายเข้าเยี่ยมทั้งหมดให้เห็นบนแผนที่

จริงๆแล้วเราสามารถนำข้อมูลที่มีอยู่ ไปวิเคราะห์ในมุมมองอื่นได้อีก แต่ Dashboard นี้เราทำขึ้นมาคร่าวๆ เพื่อให้ทุกคนได้เข้าใจถึงวิธีการใช้ประโยชน์ของข้อมูลที่มีอยู่

และทั้งหมดที่ทำมานี้ ก็เพื่อตอบโจทย์ที่ทางพี่หัวหน้าทีมเซลล์ให้มา คือ

” อยากได้ระบบ tracking การเยี่ยมร้านค้าของ sales team นอกจาก track พิกัดได้แล้ว อยากให้เก็บข้อมูลร้านค้าที่ไปเยี่ยมไว้เป็น Database เพื่อใช้งานในอนาคตได้ด้วย (แบบไม่มี budget) “

ตรงตามโจทย์ที่ขอมา และมาพร้อม option เสริม คือ visualize ให้เห็นภาพแผนที่ ที่ทีมขายเข้าเยี่ยมร้านค้า พร้อมทั้งสามารถ filter วันที่ ชื่อพนักงานขาย ชื่อ Distributor ได้ด้วย

Link ของ project นี้ทั้งหมด (Google sheet, Sales Check-In App, Looker studio)

ตัวอย่าง Google Sheet :
https://docs.google.com/spreadsheets/d/1U0904yehL7hJ-AR6QaQ75v7LJS87aCY-6nMpcZ03pf8/edit?usp=sharing

Sales Check-In App :
https://script.google.com/macros/s/AKfycbyB0H5oYbhMy3Lzkv5WeqLNEo1_jWNr
EXQBCKTzYFRrP1E9qoudmGGqPj-A9y_jNYyd-Q/exec

Looker Studio :
https://lookerstudio.google.com/reporting/d28e2cb0-8376-4f24-8ddf-4710e7ca1cca

จบกันไปแล้วสำหรับ วิธีสร้างระบบแอป Sales Check-In เก็บข้อมูลร้านค้า บน Google Apps Script ด้วย Gemini

เป็นยังไงกันบ้างสำหรับบทความนี้ หวังว่าเพื่อนๆทุกคนที่เข้ามาอ่าน จะได้รับประโยชน์จากบทความนี้ และขอบคุณทุกคนที่อ่านจนจบน้า 🙇‍♀️

ขอขอบคุณทริคดีๆ จาก : บริหารงานแบบคนไอที

รับชมคลิปแบบเต็มๆได้ที่นี่ : https://www.youtube.com/watch?v=cfMOEVF_XoE