DataTrippu

การสร้าง Dynamic Image บน Dashboard (Looker Studio ep5)

—

by

Napon Meenmanee
in

สวัสดีครับทุกโคนนน โพสนี้เรามาถึง Ep5 กันแล้ว เรามาเรียนวิธีการทำ Dynamic image บน Looker studio dashboard กันครับ ของโคตรดีย์ บอกเลยย ทำเป็นปุ๊บ Dashboard ดูดีขึ้น 30% 555+

หากเพื่อนๆ ที่เข้ามาเจอ Ep นี้แต่ยังไม่เคยเรียนมาก่อนสามารถกลับไปอ่านได้ตามลิ้งนี้ได้เลยครับ
Ep1: เริ่มต้นสร้าง Data Visualization บน Looker Studio (Google Data Studio) ง่ายๆ

Table of Content

  1. 1. วิธีสร้าง Dynamic Image
  2. 2. การสร้าง Dynamic image จากรูปสาธารณะ (Public image source)
    1. Copy link รูปภาพที่ต้องการ
    2. เก็บ link ไว้ใน Google sheet
    3. Import Googlesheet มาที่ Looker studio
    4. Confirm Data type
    5. แสดงผลรูปภาพ (Visualization)
  3. 3. การสร้าง Dynamic image จากรูปใน Googel Drive ส่วนตัว (Private image source)
    1. Upload รูปภาพไปที่ Google Drive
    2. เก็บ link ไว้ใน Google sheet
    3. แปลง format URL ก่อนนำไปใช้งาน
    4. ขั้นตอนที่เหลือ
  4. 4. Filter เลือกแสดงรูปที่ต้องการ
  5. สรุปการใช้ Dynamic Image

1. วิธีสร้าง Dynamic Image

เราสามารถทำ Dynamic image ได้หลักๆ 2 วิธี คือ

  1. สร้าง Dynamic image จากรูปสาธารณะ (Public image source)
  2. สร้าง Dynamic image จากรูปส่วนตัว (Private image source)

ทั้ง 2 วิธีนี้แตกต่างกันแค่ แหล่งข้อมูลรูปภาพที่เรานำมาใช้ (source) ซึ่งจะมีผลต่อการเตรียมข้อมูลเพื่อนำไปแสดงบน Dashboard ของเราครับ

2. การสร้าง Dynamic image จากรูปสาธารณะ (Public image source)

Public image เป็นรูปที่เราสามารถ search หาได้บนอินเตอร์เน็ตเลย อย่างบน Google เมื่อเรา search keyword ออกมาแล้วให้ไปที่แท็บ Images จะได้ตามรูปด้านล่างครับ

ช่วงที่เขียนนี้ผมกำลังอินกับการชงมัทฉะ เลยเอามาหารูปมาใช้สอนทำ Dashboard เลย 555+

ให้เราคลิ๊กขวาไปที่รูปภาพที่ต้องการและเลือก Copy image address เพื่อ copy link ของรูปภาพนั้นมาครับ

ให้เราสร้างตารางบน Google sheet ขึ้นมาเพื่อใช้เป็นฐานข้อมูล (Database) ในการแสดงรูปภาพบน Looker studio

เมื่อสร้างตารางแล้วให้ตั้งชื่อ และวาง (Paste) ลิ้งค์ที่เราได้มาลงในคอลัมม์ชื่อ Public link ตามรูปด้านล่างครับ ทำแบบนี้ซ้ำๆ กับรูปที่เราต้องการทุกอันเลย

Import Googlesheet มาที่ Looker studio

ให้เราสวิตซ์มาที่ Looker studio และสร้าง Report ใหม่ ให้เรียบร้อย แล้ว ไปที่ Add data และเลือก Google Sheet เพื่อ import ฐานข้อมูลจากตารางที่เราสร้างเมื่อกี้ครับ

Confirm Data type

เมื่อ import google sheet เรียบร้อยแล้วให้มาที่ Resource > Manage added data source > Edit จะมี pop-up แสดง Data type ของข้อมูลเราขึ้นมาครับ

ให้มาที่ Field ที่เก็บ URL ของรูปเรา ดูว่า Type เป็น URL ไหม ถ้ายังให้คลิ๊กเปลี่ยน Data type ให้เป็น URL ก่อนครับ ตามรูปด้านล่างนี้เลย

แสดงผลรูปภาพ (Visualization)

ให้ทุกคนสร้าง Table ขึ้นมาโดย set field ที่เก็บลิ้งค์รูปภาพเป็น Dimension (ตัวอย่างนี้คือ Field ชื่อ Public link)

ถ้าเพื่อนๆคนไหนยังสร้าง Table ไม่เป็นกลับไปอ่านโพสนี้ก่อนน้า
https://datatrippu.com/2024/04/28/import-data-to-looker/

และไฮไลท์สำคัญอยู่ตรงนี้ครับ ให้เราเลือก edit Field ที่กล่องด้านซ้ายมือของชื่อ Field ตามรูปครับ แล้วให้เลือก Data Type เป็น Image (ทุกคนอาจสงสัยว่าถ้าเราเลือก Data type เป็น image ตั้งแต่ตอนตรวจสอบ Data type จะได้ผลเหมือนกันไหม อันนี้ลองไปทำกันดูแล้วคอมเม้นบอกกันได้นะคร้าบ)

เสร็จแล้วข้อมูลที่เป็น URL ในตารางจะเปลี่ยนเป็นรูปภาพตามรูปด้านล่างนี้ครับ

3. การสร้าง Dynamic image จากรูปใน Googel Drive ส่วนตัว (Private image source)

ในบางครั้งรูปที่เราต้องการเอามาใช้ไม่ได้มีอยู่บนออนไลน์เช่น รูปพนักงานบริษัท, รูปภาพส่วนตัว เป็นต้น ดังนั้นเราจะนำ Google Drive มาใช้ประโยชน์ในการเก็บรูปเหล่านั้น เพื่อนำไปแสดงผลใน Dashboard เรากันครับ

อย่างที่กล่าวไปตอนต้นครับว่าทั้งวิธี Public และ Private souce ต่างกันแค่การเตรียมข้อมูลใน Google sheet เราเท่านั้นครับ ไปทำพร้อมกันเลยยย

Upload รูปภาพไปที่ Google Drive

อันดับแรกเลยให้เรา อัพโหลดรูปภาพทั้งหมดที่เราต้องการใช้งานลงไปที่ Google Drive ของเราให้เรียบร้อยก่อนครับ

จากนั้นให้ทุกคนกดที่ “…” ที่อยู่มุมบนขวามือของไฟล์รูปภาพเราครับ จะมี Pop-up การแชร์รูปภาพขึ้นมาให้เราตั้ง General access เป็น Anyone with the link และคลิ๊กที่ Copy link เราก็จะได้ URL มาเหมือนตอนทำ public source ครับ

จากนั้นให้วาง URL รูปลงไปในตารางข้อมูลของเราใน Google sheet ครับ ตามรูปตัวอย่างนี้จะเป็นคอลัมม์ชื่อ Private line original

ให้เราสร้างไว้ 2 คอลัมม์ คือ Private link original กับอีกคอลัมม์คือ Private link to Looker เนื่องจากเราต้องมีการแปลง URL ก่อนนำไปใช้งานในขั้นตอนต่อไปครับ

แปลง format URL ก่อนนำไปใช้งาน

link ที่เราได้มาถ้า import ไปที่ Looker studio เลยจะไม่สามารถ display รูปออกมาได้ครับ เราจะต้องมีการแปล URL นิดหน่อยเพื่อให้มันใช้งานได้ครับ

ภาพรวมการแปลง URL (ตัวอย่างตามรูปด้านล่างคร้าบ)

  • เปลี่ยน ” file/d/ ” ให้เป็น ” uc?id= “
  • ลบ ” /view?usp=sharing “ ออกให้เหลือแค่ id

ถ้าแก้มือแค่รูป สองรูปก็ทำได้ แต่ถ้ามีเป็นสิบรูป จะทำยังไง?
คำตอบ: ให้เราใส่สูตรเพื่อทุ่นแรงแทนครับ เย้

ให้ทุกคนใส่สูตรไว้ในคอลัมม์ Private link to Looker ตามนี้ครับ

=left(REPLACE(ชื่อcell,26,7,"uc?id="),64)

ความหมายของสูตรคือ

  • LEFT: เอาตัวหนังสือเพียง 64 ตัวจากด้านซ้าย = ลบ ” /view?usp=sharing “ ออก
  • REPLACE: แทนที่ตัวหนังสือตัวที่ 26 ไปจำนวน 7 ตัว (26-32) = เปลี่ยน ” file/d/ ” ให้เป็น ” uc?id= “

ให้ copy สูตรมาวางทุก row ที่เรามี original link ครับ จะได้ข้อมูลตามรูปด้านล่าง

ขั้นตอนที่เหลือ

ขั้นตอนที่เหลือตั้งแต่ Import ข้อมูล จนถึง เลือก Data Type ทุกคนสามารถทำได้เหมือนกับตอนทำ Public source เลยคร้าบ ง่ายนิดเดียว (ที่เหลือยากหมด เดี๋ยวๆๆ 555+)

ที่นี้มาลองเปรียบเทียบผลที่ได้จากทั้ง 2 วิธีกันครับ ฝั่งซ้ายเป็น ภาพที่ได้จาก Public source และฝั่งขวาจาก Private source ได้ภาพออกมาเหมือนกันเลย

4. Filter เลือกแสดงรูปที่ต้องการ

ขอแถมการ use case สำหรับนำไปใช้จริงครับ เราสามารถ filter รูปพวกนี้ให้แสดงรูปที่สอดคล้องกับข้อมูลใน Dashboard ได้ ตามนี้เลยครับ

  1. เพิ่ม Field ที่ต้องการใช้ Filter ใน Dimension (จากรูปผมเพิ่ม Field ฺBeverage เข้าไป)

2. เพิ่ม Filter โดยไปที่ Add a control > Drop-down list จะได้ Drop-down filter ขึ้นมา

3. ตั้ง Control filed ของ filter เป็น Beverage ก็จะได้ Drop-down list ให้เลือกชนิดเครื่องดื่มได้เลย รูปภาพก็จะเป็นไปตามชื่อที่เราเลยครับ

ที่นี้เราจะได้ Dynamic image ที่พร้อมทำงานกับข้อมูลอื่นๆใน Dashboard แล้ว เราสามารถเพิ่ม Chart ข้อมูลที่สนใจได้เลย แล้วลอง Filter ดูจะเห็นว่าข้อมูลจะเปลี่ยนไปล้อกันหมดทั้งหน้าครับ

ตัวอย่าง: Filter = ALL (เลือกทั้งหมด default)

ตัวอย่าง: Filter = Matcha (ยังอิน Matcha ไม่เลิก 555+)

สรุปการใช้ Dynamic Image

  • การสร้าง Dynamic Image บน Dashboard สามารถทำได้ 2 วิธี แบ่งตามแหล่งข้อมูลคือ Public source และ Private souce
  • Private source จะต้องมีการแปลง URL เสียก่อนถึงจะแสดงรูปภาพได้
  • สร้าง Table chart ใน Dashboard ด้วย Field image URL และต้องเลือก Data type เป็น Image
  • เราใช้ Dynamic image ทำงานร่วมกับ Filter และ Chart ต่างๆ บน Dashboard เพื่อแสดงข้อมูลที่สอดคล้องกัน
  • ตัวอย่าง use case เช่น การแสดงรูปสินค้าพร้อมรายละเอียดสินค้า, การแสดงรูปพนักงานขายพร้อม Sale performance ส่วนบุคคล, การแสดงรูปประกอบข้อมูลอื่น blah blah blah

เรื่อง Dynamic image นี้ทุกคนว่าไม่ยากเลยใช่ไหมครับ กว่าจะหาวิธีได้ก็ search นั่งอ่านกันตาแฉะอยู่ครับ 555+ แต่พอเรารู้ว่าสิ่งที่เราทำเรียนว่าอะไรจริงๆ แล้วสามารถเอาไปเขียน prompt ให้ AI สอนเราได้เลยครับ

ส่วนใหญ่ถ้ามีคนแชร์ข้อมูลใน internet อยู่แล้ว AI พวกนี้ก็จะมีฐานข้อมูลไปด้วย อย่างรูปด้านล่างนี้ผมถาม Gemini น้องก็สอนมาเป็นข้อๆเลย สุดยอด แต่ยังไงก็ใช้งาน AI แบบมี critical thinking จะ work มากๆครับๆ (แบบ เอ๊ะ อันนี้มันใช่หรอ)

ขอบคุณทุกคนมากที่อ่านมาจนถึงตรงนี้ สุดยอดคร้าบ ลองเอาความรู้จากโพสนี้ไปปรับใช้ในการทำ Dashboard ดูนะครับ ได้ไม่ได้อย่างไร คอมเม้นบอกกันได้เลย ถ้าชอบโพสนี้ หรือเห็นว่าโพสนี้ช่วยให้ทุกคนทำงานได้เก่งขึ้น ขอ Like, Share ผมได้คร้าบ เจอกันใหม่โพสหน้าคร้าบบ🍵

<- EP4: การรวมข้อมูล (Join Data) ด้วย Blend Data

Leave a comment