DataV Dashboards: สอนการใช้งานเบื้องต้น

  • by

[Alibaba Cloud Thailand] DataV Dashboards: สอนการใช้งานเบื้องต้น

By Saris Kongpichetkul, Presales Engineer of ATCETERA CORPORATION LIMITED and partner of Alibaba Cloud Thailand

DataV คืออะไร

DataV เป็นเครื่องมือสร้างภาพข้อมูลของ Alibaba Cloud ซึ่งช่วยสร้างบอร์ดแสดงข้อมูลแบบโต้ตอบแบบหลายชั้นที่สามารถอัปเดตได้แบบเรียลไทม์

DataV เป็นเครื่องมือประเภทหนึ่งที่สามารถใช้ในการสร้างบอร์ดแสดงข้อมูลเพื่อมอนิเตอร์ซึ่งต่างจากเครื่องมือ BI แบบเดิมๆ ตรงที่มันสร้างการแสดงภาพแบบโต้ตอบและมีส่วนร่วม ซึ่งรวมเอาองค์ประกอบที่ซับซ้อน เช่น แผนที่ 3 มิติ

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

ตัวอย่างแดชบอร์ดของ DataV

This image has an empty alt attribute; its file name is รูปภาพ1.gif
This image has an empty alt attribute; its file name is รูปภาพ2.gif
This image has an empty alt attribute; its file name is รูปภาพ3.gif

DataV มีเทมเพลตในตัวซึ่งได้รับการตั้งค่าและพร้อมใช้งาน ดังนั้นแม้แต่วิศวกรหรือนักพัฒนาที่มีประสบการณ์ด้านการออกแบบเพียงเล็กน้อยก็สามารถสร้างผลลัพธ์ที่ดูดีได้

แล้วข้อเสียคืออะไร?

DataV มีราคาแพงในการทดสอบในฐานะปัจเจกบุคคล รุ่นที่ถูกที่สุด (รุ่นพื้นฐาน) ที่มีอยู่ใน alibabacloud.com คือ 360 USD ต่อปี เป็นผลิตภัณฑ์สำหรับการสมัครสมาชิกเท่านั้น ดังนั้นจึงไม่มีทางซื้อแบบ Pay-A-You-Go

อีกสองรุ่น Enterprise และ Professional เสนอระยะเวลาการสมัครสมาชิกที่สั้นกว่า (สั้นกว่าหนึ่งเดือน) แต่ก็ค่อนข้างแพงเช่นกัน Enterprise หนึ่งเดือนมีค่าใช้จ่าย 300 USD ทำให้ Basic เป็นข้อตกลงที่ดีที่สุดหากคุณเพิ่งเริ่มต้น

นั่นเป็นหนึ่งในเหตุผลสำหรับบล็อกโพสต์ของวันนี้: เราต้องการแสดงให้คุณเห็นว่า DataV ทำอะไรได้บ้างโดยที่คุณไม่ต้องเสียเงิน!

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

การสร้างแดชบอร์ด

ทำตามขั้นตอนกัน โดยเราจะสาธิตโดยทดสอบใช้แบบ Professional Edition

อันดับแรก เราต้องเข้าสู่คอนโซล DataV จากหน้าแรกของคอนโซล Alibaba Cloud:


ต่อไป เราคลิกปุ่ม “Use” ใต้ “Region: MY”:

สิ่งนี้นำเราไปสู่หน้าแรกของ DataV:

การคลิกที่ ” Create Project” จะทำให้เราสามารถสร้าง new project จากเทมเพลตเปล่า หรือเทมเพลตที่สร้างไว้ล่วงหน้าจำนวนมากของ DataV สำหรับการสาธิต ฉันจะใช้เทมเพลตนี้:

เราตั้งชื่อการแสดงผลใหม่ จากนั้นคลิกที่ “Create”:

ตอนนี้เราพร้อมที่จะทำการปรับเปลี่ยนการแสดงผล เพิ่มองค์ประกอบใหม่ (เรียกว่า ” widgets “) ปรับสี ลักษณะ ขนาด และตำแหน่ง และแน่นอนว่าเพิ่มแหล่งข้อมูลบางส่วน

ถ้าฉันคลิกที่ widgets เช่น “revenue” ใกล้กับด้านบนของกระดาน บานหน้าต่างด้านข้างจะเปิดขึ้นทางด้านขวา

มีสามแท็บในบานหน้าต่างด้านข้าง อันแรก (ดังแสดงด้านล่าง) ให้ฉันทำการปรับแต่งสไตล์สำหรับสี ขนาดฟอนต์ ฯลฯ…

แท็บที่สองให้คุณตั้งค่า ” data source ” สำหรับ widget ตามค่าเริ่มต้น widget จะใช้ ” Static Data ” เป็นแหล่งข้อมูล ซึ่งโดยปกติแล้วจะหมายถึงเอกสารข้อความที่มีรูปแบบ JSON สำหรับข้อมูลจำนวนเล็กน้อยที่ไม่ได้เปลี่ยนแปลงบ่อย คุณสามารถแทรกข้อมูลลงใน widget ได้โดยตรงโดยอัปเดตแหล่งข้อมูล ” Static Data ” นี้:

แท็บที่สามจะช่วยให้คุณสามารถผูกเหตุการณ์กับ widget ได้ เมื่อผู้ใช้คลิกที่ widget ตัวทริกเกอร์จะดำเนินการ เช่น การเปลี่ยนคุณสมบัติการแสดงผลของ widget ตัวอย่างเช่น widget แผนที่จำนวนมากที่สร้างขึ้นใน DataV จะเน้นหรือปรับปรุงพื้นที่เฉพาะของแผนที่เมื่อมีการคลิก ในกรณีนี้ widget แบบข้อความธรรมดานี้ไม่มีการดำเนินการใดๆ ที่ผูกไว้โดยค่าเริ่มต้น (เราสามารถเพิ่มได้ หากเราต้องการ):

การเพิ่มแหล่งข้อมูล (Data Source)

สำหรับส่วนถัดไปนี้ เราจะนำเข้าข้อมูลไปยังฐานข้อมูล MySQL บนบริการ RDS ของ Alibaba Cloud

เราได้ตั้งค่าฐานข้อมูลในภูมิภาคมาเลเซียแล้วซึ่งมีข้อมูลตัวอย่างจากบล็อกโพสต์นี้ 

กลับไปที่หน้าแรกของ DataV เราจำเป็นต้องเลือก ” Data Sources” และคลิกที่ ” Add Source”:

ต่อไป ป้อนรายละเอียดการเชื่อมต่อสำหรับฐานข้อมูล MySQL ของเรา:


หมายเหตุ คุณอาจต้องทำตามขั้นตอนเหล่านี้ 

เพื่อเพิ่ม DataV’s IP address range(s) ลงใน RDS database whitelist ก่อนที่คุณจะเชื่อมต่อได้สำเร็จ

ตอนนี้เราควรจะเห็นแหล่งข้อมูลใหม่ของเราปรากฏขึ้น:

เราสามารถเปลี่ยนแปลง widget “profit” ที่ด้านบนของแดชบอร์ดได้ ลบ $ ออกที่ด้านหน้าและเปลี่ยนแหล่งข้อมูลให้ชี้ไปที่ฐานข้อมูล MySQL ของเรา:


พิมพ์คำสั่ง SQL:

SELECT COUNT(*) AS value FROM orders;

AS vaule เราต้องแน่ใจว่าเราพิมพ์คำสั่งเอาต์พุตจากฐานข้อมูล MySQL ของเราว่ามีคอลัมน์ชื่อ “value”อยุ่ เนื่องจากนี่คือ field name ที่ widget ของDataV จะเห็น หากคุณที่ ” Data Source” คุณจะเห็น ” field mappings” ที่อธิบาย field names (ชื่อคอลัมน์) ที่widget ของ DataV แต่ละรายการจะเห็นในเอาต์พุต SQL ของคุณ คุณต้องทำตามข้อตกลงการตั้งชื่อการ field mapping (และลำดับ) เมื่อดึงข้อมูลเข้าสู่แดชบอร์ด DataV ของคุณ

เปิดการอัปเดตอัตโนมัติ

ต่อไปเราต้องตรวจสอบให้แน่ใจว่าแดชบอร์ดของเราจะอัปเดตตัวเองโดยอัตโนมัติ:

หากต้องการดูสิ่งนี้ คุณอาจต้องลดขนาดของเว็บคอนโซล DataV โดยเปลี่ยนการตั้งค่าการแสดงผลของเบราว์เซอร์ของคุณ ใน Chrome บน Mac ต้องลดขนาดลงเหลือประมาณ 70% ก่อนจึงจะเห็นการตั้งค่าการอัปเดตอัตโนมัติ (ใน Chrome คุณทำได้โดยกดปุ่ม “Control” และ “-” (ใน Windows) หรือ “Command” และ “-” (บนเครื่อง Mac)

ทำเครื่องหมายที่ช่องถัดจาก “คำขอข้อมูลอัตโนมัติ” (ตามที่เห็นในภาพหน้าจอด้านบน) ช่วงเวลาเริ่มต้นของ “ทุกๆ 1 วินาที” คุณอาจต้องการอัปเดตให้น้อยลง ทั้งนี้ขึ้นอยู่กับความซับซ้อนของระบบฐานข้อมูลของคุณ

บทสุดท้าย

มาเปลี่ยนข้อความด้านบนวิดเจ็ตของเราเป็น “Total Orders” กัน:


คุณสามารถเผยแพร่แดชบอร์ด DataV ได้แล้ว ซึ่งจะทำให้ทุกคนที่มี URL ใช้งานได้ (แม้ว่าเราจะเพิ่มการป้องกันผ่านรหัสผ่านหรือ URL token ได้หากต้องการ)

การเผยแพร่แดชบอร์ดของเรา

เมื่อสร้างแดชบอร์ดแล้ว การเผยแพร่ก็ค่อนข้างง่าย เพียงคลิกที่ไอคอนเครื่องบินกระดาษเล็กๆ ที่มุมขวามือ ดังนี้:

เลื่อนปุ่มตัวเลือกข้าง ” Publish ” จากตำแหน่ง “off” ไปที่ “on” แดชบอร์ดของคุณก็ใช้งานได้แล้ว

เราสามารถไปที่แดชบอร์ดในหน้าต่าง ” incognito ” ของ Chrome ได้ เพื่อให้แน่ใจอีกครั้ง

มันได้ผล! มาดูกันว่าจำนวนคำสั่งซื้อนั้นอัปเดตอัตโนมัติจริง ๆ หรือไม่ โดยกลับไปที่หน้าต่างตัวแก้ไข SQL ของคอนโซล DMS และเรียกใช้การดำเนินการ INSERT บางอย่างเพื่อเพิ่มรายการใหม่ลงในตาราง:

เราลอง insert ดู 3 บรรทัด

INSERT INTO orders VALUES (10000, ‘2021’, ’09’, ’23’, 12, 99);
INSERT INTO orders VALUES (10001, ‘2021’, ’09’, ’23’, 3, 86);
INSERT INTO orders VALUES (10002, ‘2021’, ’09’, ’23’, 1, 24);

จากนั้นกลับไปที่แดชบอร์ดของเราและดูว่ามีการอัปเดตเพื่อแสดงจำนวนคำสั่งซื้อทั้งหมดใหม่หรือไม่:

เราเห็นออร์เดอร์มากขึ้นกว่าเดิม 3 อย่าง! แดชบอร์ดได้อัปเดตโดยอัตโนมัติเพื่อแสดงการเปลี่ยนแปลงในฐานข้อมูลต้นทาง

ลำดับถัดไป

ตอนนี้คุณรู้วิธีสร้างแดชบอร์ด DataV จากเทมเพลต ทำการปรับเปลี่ยนสไตล์และแหล่งข้อมูล เผยแพร่แดชบอร์ดของคุณ และตรวจสอบว่าทำงานตามที่ตั้งใจไว้!

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

Facebook

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *