1. บทนำ
Looker Studio ช่วยให้คุณสร้างแดชบอร์ดแบบอินเทอร์แอกทีฟแบบเรียลไทม์ที่มีการแสดงข้อมูลเป็นภาพที่สวยงามได้ฟรี ดึงข้อมูลจากแหล่งที่มาต่างๆ และสร้างรายงานได้ไม่จำกัดใน Looker Studio พร้อมความสามารถในการแก้ไขและแชร์ได้อย่างเต็มที่ ภาพหน้าจอด้านล่างเป็นตัวอย่างรายงาน Looker Studio
( คลิกที่นี่เพื่อดูรายงานตัวอย่างนี้ใน Looker Studio)
Looker Studio มีแผนภูมิหลายประเภทในตัว ซึ่งรวมถึงแผนภูมิเส้น แผนภูมิแท่ง แผนภูมิวงกลม และแผนภูมิกระจาย การแสดงภาพข้อมูลจากชุมชนช่วยให้คุณสร้างและใช้การแสดงภาพข้อมูล JavaScript ที่กำหนดเองใน Looker Studio ได้ นอกจากนี้ คุณยังแชร์การแสดงข้อมูลแบบชุมชนกับผู้อื่นเพื่อให้ผู้อื่นใช้การแสดงข้อมูลดังกล่าวกับข้อมูลของตนเองได้ด้วย
สิ่งที่คุณจะได้เรียนรู้
ในโค้ดแล็บนี้ คุณจะได้เรียนรู้สิ่งต่อไปนี้
- วิธีการทำงานของการแสดงข้อมูลเป็นภาพของชุมชน Looker Studio
- วิธีสร้างการแสดงภาพข้อมูลจากชุมชนโดยใช้ไลบรารีตัวช่วย ds-component (dscc)
- วิธีใช้การแสดงภาพข้อมูลจากชุมชนในรายงาน Looker Studio
สิ่งที่คุณต้องมี
คุณต้องมีสิ่งต่อไปนี้จึงจะทำโค้ดแล็บนี้ให้เสร็จสมบูรณ์ได้
- สิทธิ์เข้าถึงอินเทอร์เน็ตและเว็บเบราว์เซอร์
- บัญชี Google
- สิทธิ์เข้าถึงที่เก็บข้อมูลของ Google Cloud Platform
- คุ้นเคยกับ JavaScript
2. แบบสำรวจสั้นๆ
ทำไมคุณถึงเลือก Codelab นี้
คุณวางแผนที่จะใช้ Codelab/บทแนะนำนี้อย่างไร
คุณจะให้คะแนนประสบการณ์การใช้งาน Looker Studio เท่าใด
ข้อใดอธิบายถึงพื้นฐานของคุณได้ดีที่สุด
คุณสนใจใช้ไลบรารีการแสดงภาพ JavaScript ใด
ไปที่หน้าถัดไปเพื่อส่งข้อมูลแบบสำรวจ
3. ภาพรวมของการแสดงภาพข้อมูลจากชุมชน
การแสดงภาพข้อมูลจากชุมชนของ Looker Studio ช่วยให้คุณสร้างและใช้การแสดงภาพ JavaScript ที่กำหนดเองในแดชบอร์ดได้
ในโค้ดแล็บนี้ คุณจะได้สร้างการแสดงภาพชุมชนแบบแผนภูมิตารางที่รองรับมิติข้อมูล 1 รายการ เมตริก 1 รายการ และการจัดรูปแบบส่วนหัวของตาราง
4. เวิร์กโฟลว์การพัฒนาการแสดงภาพข้อมูลจากชุมชน
หากต้องการสร้างการแสดงข้อมูลแบบกำหนดเอง คุณต้องมีไฟล์ต่อไปนี้ในที่เก็บข้อมูล Google Cloud Platform ซึ่งคุณจะสร้างในขั้นตอนถัดไป
ชื่อไฟล์ | ประเภทไฟล์ | วัตถุประสงค์ |
manifest.json* | JSON | ข้อมูลเมตาเกี่ยวกับการแสดงภาพและตำแหน่งของทรัพยากรการแสดงภาพทั้งหมด |
viz-codelab.json | JSON | ตัวเลือกการกำหนดค่าข้อมูลและสไตล์สำหรับแผงพร็อพเพอร์ตี้ |
viz-codelab.js | JavaScript | โค้ด JavaScript เพื่อแสดงภาพ |
viz-codelab.css (ไม่บังคับ) | CSS | รูปแบบ CSS สำหรับการแสดงภาพ |
*Manifest เป็นไฟล์เดียวที่มีชื่อที่จำเป็น ส่วนไฟล์อื่นๆ สามารถตั้งชื่อแตกต่างกันได้ ตราบใดที่ระบุชื่อ/ตำแหน่งไว้ในไฟล์ Manifest
5. เขียนการแสดงภาพ Hello, world!
ในส่วนนี้ คุณจะเพิ่มโค้ดที่จำเป็นในการแสดงภาพ "Hello, world!" อย่างง่าย
เขียนแหล่งที่มาของ JavaScript สำหรับการแสดงภาพ
ขั้นตอนที่ 1: ดาวน์โหลดไฟล์ dscc.min.js จากหน้าคลังคอมโพเนนต์ชุมชนของ Looker Studio (dscc) แล้วคัดลอกไปยังไดเรกทอรีการทำงาน
ขั้นตอนที่ 2: คัดลอกโค้ดต่อไปนี้ลงในเครื่องมือแก้ไขข้อความและบันทึกเป็น viz-codelab-src.js ในไดเรกทอรีการทำงานในเครื่อง
viz-codelab-src.js
function drawViz(data) {
// Container setup.
let container = document.getElementById('container');
if (container) {
container.textContent = '';
} else {
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
}
// Render the viz.
container.textContent = 'Hello, viz world!';
}
// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });
เตรียมไฟล์แพ็กเกจ JavaScript
ขั้นตอนที่ 3: รวม JavaScript ทั้งหมดที่จำเป็นไว้ในไฟล์เดียวโดยคัดลอกเนื้อหาของไลบรารีตัวช่วยการแสดงข้อมูลด้วยภาพ (dscc.min.js) และไฟล์ viz-codelab-src.js ลงในไฟล์ใหม่ชื่อ viz-codelab.js คุณเรียกใช้คำสั่งต่อไปนี้เพื่อต่อไฟล์ได้ ทำขั้นตอนนี้ซ้ำทุกครั้งที่อัปเดตรหัสภาพข้อมูลต้นทาง
สคริปต์การต่อกันของ Linux/Mac OS
cat dscc.min.js > viz-codelab.js
echo >> viz-codelab.js
cat viz-codelab-src.js >> viz-codelab.js
สคริปต์การต่อกันของ Windows
del viz-codelab.js
type nul > viz-codelab.js
type dscc.min.js >> viz-codelab.js
echo.>> viz-codelab.js
type viz-codelab-src.js >> viz-codelab.js
6. เขียน CSS ของการแสดงข้อมูลภาพ
ไฟล์ CSS จะกำหนดสไตล์สำหรับการแสดงภาพและไม่บังคับ คัดลอก CSS ต่อไปนี้และบันทึกเป็น viz-codelab.css.
viz-codelab.css
table {
width: 100%;
border-collapse: collapse;
}
tr {
border-bottom: 1pt solid #d1d1d1;
}
th, td {
padding: 8px;
text-align: left;
}
7. เขียนการกำหนดค่า JSON
การกำหนดค่าภาพจะกำหนดแอตทริบิวต์ข้อมูลและสไตล์ที่ภาพรองรับและจำเป็นต้องใช้ ภาพนี้ในโค้ดแล็บนี้ต้องใช้มิติข้อมูล 1 รายการและเมตริก 1 รายการ และมีองค์ประกอบรูปแบบ 1 รายการเพื่อเลือกสีเติม ดูข้อมูลเพิ่มเติมเกี่ยวกับมิติข้อมูลและเมตริก
คัดลอกโค้ดต่อไปนี้และบันทึกเป็น viz-codelab.json.ดูข้อมูลเพิ่มเติมเกี่ยวกับพร็อพเพอร์ตี้ที่คุณกำหนดค่าได้ที่ข้อมูลอ้างอิงการกำหนดค่าการแสดงภาพข้อมูลจากชุมชน
viz-codelab.json
{
"data": [
{
"id": "concepts",
"label": "Concepts",
"elements": [
{
"id": "tableDimension",
"label": "Dimension",
"type": "DIMENSION",
"options": {
"min": 1,
"max": 1
}
},
{
"id": "tableMetric",
"label": "Metric",
"type": "METRIC",
"options": {
"min": 1,
"max": 1
}
}
]
}
],
"style": [
{
"id": "header",
"label": "Table Header",
"elements": [
{
"type": "FILL_COLOR",
"id": "headerBg",
"label": "Header Background Color",
"defaultValue": "#e0e0e0"
}
]
}
]
}
8. สร้างโปรเจ็กต์และ Bucket ของพื้นที่เก็บข้อมูลระบบคลาวด์
ขั้นตอนที่ 1: สร้างโปรเจ็กต์ Google Cloud Platform (GCP) หรือใช้โปรเจ็กต์ที่มีอยู่
ขั้นตอนที่ 2: สร้างที่เก็บข้อมูล GCP คลาสพื้นที่เก็บข้อมูลที่แนะนำคือระดับภูมิภาค ดูรายละเอียดเกี่ยวกับระดับฟรีได้ที่ราคาของ Cloud Storage หมายเหตุ: พื้นที่เก็บข้อมูลการแสดงข้อมูลของคุณไม่น่าจะมีค่าใช้จ่ายสำหรับคลาสพื้นที่เก็บข้อมูลระดับภูมิภาค
ขั้นตอนที่ 3: จดชื่อ/เส้นทางของที่เก็บข้อมูล โดยเริ่มจากส่วนหลัง Buckets/ เส้นทางนี้เรียกว่า "รหัสคอมโพเนนต์" ใน Looker Studio และใช้เพื่อระบุและติดตั้งใช้งานการแสดงภาพ
9. เขียนไฟล์ manifest.json
ไฟล์ Manifest จะให้ข้อมูลเกี่ยวกับตำแหน่งและการแสดงภาพ รวมถึงทรัพยากร โดยต้องตั้งชื่อว่า "manifest.json" และต้องอยู่ในที่เก็บข้อมูล/เส้นทางที่สร้างขึ้นในขั้นตอนก่อนหน้า ซึ่งเป็นเส้นทางเดียวกับที่ใช้สำหรับรหัสคอมโพเนนต์
คัดลอกโค้ดต่อไปนี้ลงในเครื่องมือแก้ไขข้อความและบันทึกเป็น manifest.json.
ดูข้อมูลเพิ่มเติมเกี่ยวกับไฟล์ Manifest ได้ที่เอกสารประกอบข้อมูลอ้างอิงของไฟล์ Manifest
manifest.json
{
"name": "Community Visualization",
"logoUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
"organization": "Looker Studio Codelab",
"organizationUrl": "https://url",
"termsOfServiceUrl": "https://url",
"supportUrl": "https://url",
"packageUrl": "https://url",
"privacyPolicyUrl": "https://url",
"description": "Community Visualization Codelab",
"devMode": true,
"components": [
{
"id": "tableChart",
"name": "Table",
"iconUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
"description": "A simple table chart.",
"resource": {
"js": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.js",
"config": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.json",
"css": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.css"
}
}
]
}
10. อัปโหลดไฟล์ภาพข้อมูลไปยัง Google Cloud Storage
- อัปโหลดไฟล์
manifest.json,viz-codelab.js,viz-codelab.jsonและviz-codelab.cssไปยัง Bucket ของ Google Cloud Storage โดยใช้อินเทอร์เฟซเว็บหรือเครื่องมือบรรทัดคำสั่ง gsutil ทำซ้ำขั้นตอนนี้ทุกครั้งที่คุณอัปเดตภาพ
คำสั่งอัปโหลด gsutil
gsutil cp -a public-read manifest.json gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
gsutil cp -a public-read viz-codelab.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
11. ทดสอบการแสดงภาพข้อมูลจากชุมชนใน Looker Studio
สร้างรายงานและเพิ่มข้อมูล
ขั้นตอนที่ 1: คัดลอก URL สำหรับชุดข้อมูลตัวอย่างของการแสดงภาพชุมชน หรือจะใช้แหล่งข้อมูลใดก็ได้ตามต้องการ แล้วข้ามขั้นตอนต่อไปนี้
ขั้นตอนที่ 2: ลงชื่อเข้าใช้ Looker Studio คลิก + สร้าง ที่ด้านซ้ายบน จากนั้นเลือกรายงาน
ขั้นตอนที่ 3: คุณจะเห็นเครื่องมือแก้ไขรายงาน ซึ่งแผงเพิ่มข้อมูลลงในรายงานเปิดอยู่
ขั้นตอนที่ 4: ในแท็บเชื่อมต่อกับข้อมูล ให้เลือกเครื่องมือเชื่อมต่อ Google ชีตโดย Google
ขั้นตอนที่ 5: เลือก URL แล้ววาง URL ของ Google ชีตจากขั้นตอนที่ 1
ขั้นตอนที่ 6: คลิกเพิ่มที่ด้านขวาล่าง
ขั้นตอนที่ 7: หากระบบแจ้งให้ยืนยันว่าคุณกำลังจะเพิ่มข้อมูลลงในรายงานนี้ ให้คลิกเพิ่มลงในรายงาน ระบบจะสร้างรายงานที่ไม่มีชื่อและเพิ่มตารางเริ่มต้นลงในรายงานพร้อมข้อมูลตัวอย่าง เลือกและลบตารางเริ่มต้น (ไม่บังคับ) เพื่อให้เหลือรายงานเปล่า
เพิ่มการแสดงภาพข้อมูลจากชุมชนลงในรายงาน
ขั้นตอนที่ 1: คลิกการแสดงภาพและคอมโพเนนต์ของชุมชน 
ในแถบเครื่องมือ
ขั้นตอนที่ 2: คลิก + สำรวจเพิ่มเติมเพื่อเปิดแกลเลอรีชุมชน
ขั้นตอนที่ 3: คลิกสร้างภาพของคุณเอง
ขั้นตอนที่ 4: ในส่วนทดสอบและเพิ่มการแสดงภาพข้อมูลจากชุมชน ให้ป้อนเส้นทางไฟล์ Manifest แล้วคลิกส่ง เส้นทางไฟล์ Manifest คือชื่อและเส้นทางของ Bucket ใน Google Cloud Storage ที่ชี้ไปยังตำแหน่งของไฟล์ Manifest ของภาพ โดยมีคำนำหน้าเป็น gs://. เช่น gs://community-viz-docs/viz-codelab หากป้อนเส้นทางไฟล์ Manifest ที่ถูกต้อง การ์ดการแสดงภาพควรแสดงผล
ขั้นตอนที่ 5: คลิกการ์ดภาพเพื่อเพิ่มลงในรายงาน
ขั้นตอนที่ 6: หากได้รับข้อความแจ้ง ให้ยินยอมเพื่อให้การแสดงข้อมูลผ่านภาพแสดงผลได้
ขั้นตอนที่ 7: อัปเดตมิติข้อมูลและเมตริกที่เลือกสำหรับตาราง (ไม่บังคับ) หากใช้ชุดข้อมูลตัวอย่างที่ให้ไว้ ให้ตั้งค่ามิติข้อมูลเป็นประเทศ และตั้งค่าเมตริกเป็นประชากร การดำเนินการนี้จะไม่มีผลต่อภาพจนกว่าจะถึงช่วงท้ายๆ ของ Codelab
แผงพร็อพเพอร์ตี้ทางด้านขวาจะแสดงองค์ประกอบที่กำหนดค่าไว้ใน viz-codelab.json
ในแผงการตั้งค่า การแสดงภาพจะอนุญาตให้มีมิติข้อมูล 1 รายการและเมตริก 1 รายการ
ในแผงรูปแบบ การแสดงข้อมูลมีองค์ประกอบเดียวสำหรับจัดรูปแบบส่วนหัวของตาราง ในตอนนี้ การควบคุมสไตล์จะไม่มีผลต่อภาพจนกว่าจะมีการอัปเดตโค้ดภาพในขั้นตอนถัดไป หมายเหตุ: คุณจะเห็นตัวเลือกสไตล์เพิ่มเติมสำหรับการแสดงภาพที่ไม่ได้กำหนดไว้ในไฟล์การกำหนดค่า ซึ่งเป็นเรื่องปกติเนื่องจากภาพทั้งหมดมีชุดการควบคุมทั่วไปที่พร้อมใช้งานโดยอัตโนมัติ
12. แสดงข้อมูลเป็นตาราง
ในส่วนนี้ คุณจะอัปเดตการแสดงภาพเพื่อแสดงชุดข้อมูลตัวอย่างของการแสดงภาพข้อมูลจากชุมชนเป็นตาราง
ข้อมูลที่จะแสดงมีอยู่ในออบเจ็กต์ tables และมีโครงสร้างตามการเปลี่ยนรูปแบบที่ระบุโดยการแสดงภาพ ในโค้ดแล็บนี้ การแสดงภาพขอรูปแบบตาราง (tableTransform) ซึ่งมีออบเจ็กต์ headers และออบเจ็กต์ rows ที่มีข้อมูลทั้งหมดที่เราต้องการเพื่อแสดงตาราง
ขั้นตอนที่ 1: แทนที่เนื้อหาของ viz-codelab-src.js ด้วยโค้ดด้านล่าง
viz-codelab-src.js
function drawViz(data) {
// Container setup.
let container = document.getElementById('container');
if (container) {
container.textContent = '';
} else {
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
}
// Create the table.
const table = document.createElement('table');
const tableHeader = document.createElement('thead');
const tableBody = document.createElement('tbody');
data.tables.DEFAULT.headers.forEach(function (column) {
const tableColumn = document.createElement('th');
tableColumn.textContent = column.name;
tableHeader.appendChild(tableColumn);
});
data.tables.DEFAULT.rows.forEach(function(row) {
const tableRow = document.createElement('tr');
row.forEach(function(cell) {
const tableCell = document.createElement('td');
if (typeof cell == 'number') {
tableCell.textContent = new Intl.NumberFormat().format(cell);
} else {
tableCell.textContent = cell;
}
tableRow.appendChild(tableCell);
});
tableBody.appendChild(tableRow);
});
table.appendChild(tableHeader);
table.appendChild(tableBody);
// Render the table.
container.appendChild(table);
}
// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });
ขั้นตอนที่ 2: เตรียมไฟล์ JavaScript Bundle จากนั้นอัปโหลดและเขียนทับไฟล์ภาพของคุณไปยัง Google Cloud Storage
ขั้นตอนที่ 3: รีเฟรชรายงาน Looker Studio เพื่อโหลดซ้ำและทดสอบการแสดงภาพข้อมูลจากชุมชน ตอนนี้ตารางจะแสดงข้อมูล (เช่น สเปรดชีตใน Google ชีต) และแสดงคอลัมน์ส่วนหัวตามมิติข้อมูลและเมตริกที่เลือก ปรับขนาดภาพเพื่อดูแถวทั้งหมด
13. ใช้การเปลี่ยนแปลงสไตล์แบบไดนามิก
ในส่วนนี้ คุณจะอัปเดตการแสดงข้อมูลเพื่อจัดรูปแบบส่วนหัวของตารางตามสีเติมที่เลือกในแผงรูปแบบ
สถานะขององค์ประกอบรูปแบบทั้งหมดจะอยู่ในออบเจ็กต์ style โดยคีย์ของแต่ละรายการจะกำหนดตามการกำหนดค่ารูปแบบการแสดงข้อมูลภาพ (viz-codelab.json) สำหรับส่วนนี้ คุณจะได้รับสีเติมที่เลือกและใช้สีดังกล่าวเพื่ออัปเดตสีพื้นหลังของส่วนหัวของตาราง
ขั้นตอนที่ 1: แทนที่โค้ดในไฟล์ viz-codelab-src.js ด้วยโค้ดด้านล่าง
viz-codelab-src.js
function drawViz(data) {
// Container setup.
let container = document.getElementById('container');
if (container) {
container.textContent = '';
} else {
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
}
// Create the table.
const table = document.createElement('table');
const tableHeader = document.createElement('thead');
const tableBody = document.createElement('tbody');
data.tables.DEFAULT.headers.forEach(function (column) {
const tableColumn = document.createElement('th');
tableColumn.textContent = column.name;
tableHeader.appendChild(tableColumn);
});
data.tables.DEFAULT.rows.forEach(function(row) {
const tableRow = document.createElement('tr');
row.forEach(function(cell) {
const tableCell = document.createElement('td');
if (typeof cell == 'number') {
tableCell.textContent = new Intl.NumberFormat().format(cell);
} else {
tableCell.textContent = cell;
}
tableRow.appendChild(tableCell);
});
tableBody.appendChild(tableRow);
});
table.appendChild(tableHeader);
table.appendChild(tableBody);
// Set header color based on style control.
tableHeader.style.backgroundColor = data.style.headerBg.value.color;
// Render the table.
container.appendChild(table);
}
// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });
ขั้นตอนที่ 2: เตรียมไฟล์ JavaScript Bundle จากนั้นอัปโหลดและเขียนทับไฟล์ภาพของคุณไปยัง Google Cloud Storage
ขั้นตอนที่ 3: รีเฟรชรายงาน Looker Studio เพื่อโหลดซ้ำและทดสอบการแสดงภาพข้อมูลจากชุมชน
ขั้นตอนที่ 4: ในแผงรูปแบบ ให้ใช้ตัวควบคุมรูปแบบสีพื้นหลังของส่วนหัวเพื่อเปลี่ยนสีพื้นหลังของส่วนหัวของตาราง
ยินดีด้วย คุณสร้างการแสดงข้อมูลแบบกำหนดเองใน Looker Studio แล้ว ซึ่งจะนำคุณไปสู่ตอนท้ายของ Codelab นี้ ตอนนี้มาดูกันว่าคุณจะทำอะไรต่อไปได้บ้าง
14. ขั้นตอนถัดไป
ขยายการแสดงภาพ
- ดูข้อมูลเพิ่มเติมเกี่ยวกับข้อมูลและรูปแบบที่ใช้ได้สำหรับการแสดงภาพ
- ดูข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบสไตล์ที่มีอยู่และเพิ่มการจัดรูปแบบเพิ่มเติมลงในการแสดงภาพ
- เพิ่มการโต้ตอบลงในการแสดงภาพ
- ดูวิธีพัฒนาภาพข้อมูลในเครื่อง
ทำสิ่งต่างๆ ได้มากขึ้นด้วยการแสดงภาพข้อมูลจากชุมชน
- ดูข้อมูลอ้างอิงสำหรับไลบรารีตัวช่วย dscc, ไฟล์ Manifest และไฟล์การกำหนดค่า
- ส่งการแสดงภาพข้อมูลไปยังแกลเลอรีการแสดงภาพข้อมูลจากชุมชน
- สร้างปลั๊กอินจากชุมชนสำหรับใช้ลิงก์ข้อมูล สำหรับ Looker Studio
แหล่งข้อมูลเพิ่มเติม
ด้านล่างนี้คือแหล่งข้อมูลต่างๆ ที่คุณเข้าถึงได้เพื่อช่วยให้คุณเจาะลึกเนื้อหาที่ครอบคลุมในโค้ดแล็บนี้
ประเภททรัพยากร | ฟีเจอร์สำหรับผู้ใช้ | ฟีเจอร์สำหรับนักพัฒนาแอป |
เอกสารประกอบ | ||
ข่าวสารและข้อมูลอัปเดต | ลงชื่อสมัครใช้ใน Looker Studio > การตั้งค่าผู้ใช้ | |
ถามคำถาม | ||
ตัวอย่าง |