[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
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 โปรดดูคู่มือการเริ่มต้นฉบับย่อในเอกสารอย่างเป็นทางการ เจอกันคราวหน้า!