ปัจจุบันบระบบยืนยันตัวตนแบบ 2 ขั้นตอน (2FA) หรือ MFA ถูกผลักดันให้ใช้งานกันอย่างแพร่หลาย ทั้งนี้เพื่อยกระดับการรักษาความปลอดภัยของระบบสารสนเทศ คณะการแพทย์แผนไทย ม.อ. มีความมุ่งหมายที่จะเปลี่ยนแปลงระบบล๊อกอินของระบบสารสนเทศต่างๆ ทั้งหมดของคณะให้เป็น 2FA ตามนโยบายความปลอดภัยของมหาวิทยาลัยฯ ด้วย
ต่อไปนี้จะแสดงตัวอย่างการ implement ระบบเพื่อติดตั้งใช้งาน PSU Passport (Authentik) ด้วยภาษา PHP
(more…)บล็อกนี้น่าจะเป็น EP สุดท้ายของซีรี่ส์ Drag & Drop row ใน HTML Table แล้ว จากบล็อกที่ผ่านๆ มา ผู้เขียนได้ใช้เทคนิคต่างๆ โดยพึ่งพา framework ที่ใช้ในการพัฒนาโปรแกรม เช่น ASP.NET, Blazor หรือ jQuery แต่สำหรับบล็อกนี้เราจะเขียนโดยใช้ JavaScript ล้วนๆ บวกกับ CSS จาก Bootstrap อีกนิดหน่อยเพื่อความสวยงามของ Table และเพื่อไม่ให้เป็นการเสียเวลา เรามาลุยกันเลยครับ
1. เริ่มต้นด้วยการเตรียมไฟล์ HTML ดังโค้ดด้านล่าง
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Drag & Drop Table Row</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"> </head> <body style="padding:10px"> <table style="width:90%;" class="table table-striped"> <thead> <tr > <th>ลำดับ</th> <th>จังหวัด</th> </tr> </thead> <tbody id="provinceList"> </tbody> </table> </body> </html>
2. เพิ่ม code JavaScript สำหรับเพิ่มข้อมูลลงใน Table ใน event window.onload โดยเราจะเพิ่มแท็ก <tr> ใน element tbody ที่มี id=”provinceList” และระบุ class=”prv-item” สำหรับใช้ในการอ้างถึงจากโค้ด JavaScript
<script>
window.onload = async () => {
const provinces = ['สงขลา','ปัตตานี','ยะลา','นราธิวาส','สตูล'];
for (let i = 0; i < provinces.length; i++) {
provinceList.innerHTML += "<tr class='prv-item' data-value=" + i + "><td> " + (i + 1) + "</td><td>" + provinces[i] + "</td></tr>";
};
};
</script>
ซึ่งจะได้ผลลัพธ์หน้าจอดังรูป และเป้าหมายของเราก็คือสามารถคลิกเลือกจังหวัด จากนั้นลากและวางไปยังตำแหน่งที่ต้องการได้
3. และเพิ่มโค้ด JavaScript สำหรับผูก event ต่างๆ เข้ากับแต่ละ <tr> ที่เพิ่มเข้าไป ใน event window.onload เพื่อให้สามารถลากและวางได้
let listPrvItems = document.querySelectorAll(".prv-item");
listPrvItems.forEach((element) => {
element.draggable = true;
element.addEventListener("dragstart", dragStart, false);
element.addEventListener("dragover", dragOver, false);
element.addEventListener("drop", drop, false);
});
4. เพิ่มโค้ด JavaScript ส่วนควบคุม event ต่างๆ คือ เมื่อเริ่มกดลาก เมื่อกดวาง และฟังก์ชันสำหรับหาตำแหน่งของแถว (<tr>) ที่เริ่มกดลาก ดังนี้
//หาลำดับของ tr จาก value ที่ส่งมา ทำการวนลูปเทียบกับ data-value ใน tr ของตารางทั้งหมด
const getPosition = (value) => {
let elementIndex;
let listPrvItems = document.querySelectorAll(".prv-item");
listPrvItems.forEach((element, index) => {
let elementValue = element.getAttribute("data-value");
if (value == elementValue) {
elementIndex = index;
}
});
return elementIndex;
};
//เก็บตำแหน่ง x,y และ element ที่เริ่มคลิกลาก
function dragStart(e) {
initialX = e.clientX;
initialY = e.clientY;
//Set current Element
currentElement = e.target;
}
function dragOver(e) {
e.preventDefault();
}
//เหตุการณ์วาง
const drop = (e) => {
e.preventDefault();
// เก็บตำแหน่ง x, y ที่วาง
let newX = e.clientX;
let newY = e.clientY;
//Set targetElement(where we drop the picked element).It is based on mouse position
// เก็บ element ที่จะถูกวางแทนที่
let targetElement = document.elementFromPoint(newX, newY);
// ตรวจสอบว่า element ที่ถูกวาง เป็น TD หรือไม่ ถ้าใช่ จะเปลี่ยนให้เป็น TR ที่เป็น parent ของ TD นั้น
// เนื่องจากการลากวาง จะเป็นการลากวางและแทนที่ทั้งแถว ซึ่งก็คือ TR
if(targetElement.nodeName == "TD")
{
targetElement = targetElement.parentNode;
}
// เก็บ value จาก element ต้นทางและปลายทาง
let currentValue = currentElement.getAttribute("data-value");
let targetValue = targetElement.getAttribute("data-value");
//หาตำแหน่ง TR จาก value
let [currentPosition, targetPosition] = [
getPosition(currentValue),
getPosition(targetValue),
];
initialX = newX;
initialY = newY;
try {
if (currentPosition < targetPosition) {
// ถ้าแถวที่เริ่มลาก น้อยกว่าแถวที่จะวาง จะทำการแทรกในตำแหน่งด้านล่างของแถวที่จะวาง
targetElement.insertAdjacentElement("afterend", currentElement);
} else {
// ถ้าแถวที่เริ่มลาก มากกว่าแถวที่จะวาง จะทำการแทรกในตำแหน่งด้านบนของแถวที่จะวาง
targetElement.insertAdjacentElement("beforebegin", currentElement);
}
} catch (err) {}
};
4. เมื่อทดสอบการทำงาน รายชื่อจังหวัดในตารางจะสามารถคลิก ลาก และวางไปยังตำแหน่งที่ต้องการได้
5. และเมื่อ drop ลงไปยังตำแหน่งที่ต้องการ จังหวัดที่ลากมาก็จะแทรกเข้าไปยังตำแหน่งที่ drop
จากซีรี่ส์ Drag & Drop Row ใน Table อันยาวนานนี้ ผู้เขียนหวังเป็นอย่างยิ่งว่าจะมีประโยชน์กับผู้อ่านไม่มากก็น้อยที่จะนำไปประยุกต์ใช้กับงานของตัวเอง แล้วเจอกันใหม่โอกาสหน้า เมื่อผู้เขียนจะมีเหตุให้ต้องเข้ามาอีก สวัสดีครับ
แหล่งข้อมูลอ้างอิง
สำหรับ blog นี้ของผู้เขียน ถือว่าเป็นซีรี่ส์ที่ต่อเนื่องมาจาก https://sysadmin.psu.ac.th/2021/05/25/ขยับแถว-row-ขึ้น-ลง-ใน-asp-net-gridview-ด้วย-j/ และ https://sysadmin.psu.ac.th/2021/05/27/ขยับแถว-row-ขึ้น-ลง-ใน-asp-net-gridview-ด้วย-c/ ก็คือผู้เขียนจะนำเสนอวิธีการขยับแถวอีกวิธีหนึ่ง ที่น่าจะเฟรนด์ลี่ต่อผู้ใช้มากกว่า นั่นก็การ Drag & Drop ก็คือผู้ใช้งานสามารถเลือกคลิก ลาก และวาง เพื่อจัดลำดับได้ตามความต้องการ ซึ่งเมื่อผู้เขียนมาทำงานบน Blazor พบว่าการ implement เรื่องนี้สามารถทำได้ง่ายมาก โดยไม่ต้องพี่งพา javascript แต่อย่างใด เรามาดูกันเลยครับ
1. เพิ่มโค้ด HTML ในส่วนของการแสดงผลข้อมูลในรูปแบบ Table
@if (provinces != null)
{
<table class="table table-striped" >
<thead>
<tr >
<th>ลำดับ</th>
<th>จังหวัด</th>
</tr>
</thead>
<tbody>
@foreach (var pr in provinces)
{
<tr role="button" class="cursor-pointer" >
<td>@pr.ID</td>
<td>@pr.Name</td>
</tr>
}
</tbody>
</table>
}
2. เพิ่มโค้ด C# ในส่วนที่ควบคุมการทำงานและจำลองข้อมูล
private List<Province> provinces = new List<Province>();
protected override void OnInitialized()
{
provinces.AddRange(new List<Province> {
new Province(1,"สงขลา"),
new Province(2,"ปัตตานี"),
new Province(3,"ยะลา"),
new Province(4,"นราธิวาส"),
new Province(5,"สตูล")
});
}
public class Province
{
public Int32 ID;
public string Name;
public Province(int id, string name)
{
ID = id;
Name = name;
}
}
ซึ่งจะได้ผลลัพธ์หน้าจอดังรูป และเป้าหมายของเราก็คือสามารถคลิกเลือกจังหวัด จากนั้นลากและวางไปยังตำแหน่งที่ต้องการได้
3. จากนั้นเพิ่มโค้ดส่วนที่ควบคุมการ Drag และ Drop ทั้งใน HTML และ C#
@if (provinces != null)
{
<table class="table table-striped" ondragover="event.preventDefault();">
<thead>
<tr >
<th>ลำดับ</th>
<th>จังหวัด</th>
</tr>
</thead>
<tbody>
@foreach (var pr in provinces)
{
<tr role="button" class="cursor-pointer" draggable="true"
@ondrop="@(()=> Drop(pr))" @ondrag="@(e => StartDrag(pr))" >
<td>@pr.ID</td>
<td>@pr.Name</td>
</tr>
}
</tbody>
</table>
}
/// <summary>
/// เก็บตำแหน่งของจังหวัดที่คลิกเลือก เมื่อเริ่ม drag
/// </summary>
/// <param name="province"></param>
private void StartDrag(Province province)
{
currentIndex = GetIndex(province);
}
/// <summary>
/// หาตำแหน่งของจังหวัดที่อยู่จาก list
/// </summary>
/// <param name="province"></param>
/// <returns></returns>
int GetIndex(Province province)
{
return provinces.FindIndex(p => p.ID == province.ID);
}
/// <summary>
/// เมื่อ Drop จังหวัดที่ drag มาลงในตำแหน่งที่ต้องการ
/// </summary>
/// <param name="province"></param>
void Drop(Province province)
{
if (province != null)
{
// หาตำแหน่งของจังหวัดที่ถูก drop
var index = GetIndex(province);
// หาจังหวัดที่ถูก drag มา จาก index ที่เก็บไว้ตั้งแต่เริ่ม drag
var current = provinces[currentIndex];
// ลบจังหวัดที่ถูก drag มา ออกจาก list
provinces.RemoveAt(currentIndex);
// แทรกจังหวัดที่ถูก drag มา ลงในตำแหน่งที่ drop
provinces.Insert(index, current);
StateHasChanged();
}
}
4. เมื่อทดสอบการทำงาน รายชื่อจังหวัดในตารางจะสามารถคลิก ลาก และวางไปยังตำแหน่งที่ต้องการได้
5. และเมื่อ drop ลงไปยังตำแหน่งที่ต้องการ จังหวัดที่ลากมาก็จะแทรกเข้าไปยังตำแหน่งที่ drop
ขั้นตอนถัดไป ท่านผู้อ่านก็แค่ทำการบันทึกตำแหน่งใหม่ของจังหวัดลงในฐานข้อมูลหรือทำอย่างอื่นได้ต่อไป ซึ่งวิธีการนี้เราสามารถนำไปประยุกต์ใช้กับคอมโพเน้นอื่นๆ ได้ เช่น li, div หรืออย่างอื่นที่ผู้ใช้ในการนำเสนอข้อมูลในรูปแบบรายการ
ผู้เขียนหวังเป็นอย่างยิ่งว่าบทความนี้น่าจะมีประโยชน์ต่อผู้อ่านไม่มากก็น้อย แล้วเจอกันใหม่โอกาสหน้า สวัสดีครับ
แหล่งข้อมูลอ้างอิง
กลับมาพบกับท่านผู้อ่านอีกครั้งหนึ่ง หลังจากห่างหายกันไปนาน เนื่องจากผู้เขียนได้รับโจทย์ที่ทำให้ต้องทำการ research เล็กน้อย จึงขอนำมาบันทึกไว้กันลืมสำหรับตัวเอง และเผื่อท่านผู้อ่านแวะเข้ามาจะสามารถนำไปประยุกต์ใช้ได้
โจทย์ที่ว่าก็คือ จะต้องดึงข้อมูลรายละเอียดต่างๆ ของ Youtube จาก URL ที่ระบุ ไม่ว่าจะเป็น Thumbmail, Title, Description ซึ่งจากการไปศึกษา API ที่ Youtube ได้จัดเตรียมไว้ให้ ก็พบว่าสามารถใช้งานได้อย่างไม่ยุ่งยากแต่อย่างใด เพียงแต่เราจะต้องมี API Key ที่ต้องใช้ในการเข้าถึงข้อมูลต่างๆ ของ Youtube ดังนั้นเริ่มต้นเราจะไปดูวิธีการให้ได้มาซึ่ง API Key ก่อน
1. เข้าไปที่ https://console.cloud.google.com/cloud-resource-manager และ login ด้วย google account ให้เรียบร้อย จากนั้นทำการสร้าง Project ใหม่
2. ป้อนชื่อโปรเจ็ค ในที่นี้สมมติเป็น Sample Project กด CREATE
3. จากนั้นให้ทำการ Enable API เพื่อให้โปรเจ็คที่เราสร้างสามารถใช้งานได้ โดยให้ไปที่เมนูแฮมเบอร์เกอร์ -> APIs & Services -> Enabled APIs & services
4. กด + ENABLE APIS AND SERVISES
5. ค้น Youtube Data API
6. เลือก YouTube Data API v3 และกด Enable
7. กด Enable
8. กลับไปที่ Enable APIS And Services และเลือก YouTube Data API v3
9. เลือก CREATE CREDENTIALS
10. เลือก Public data และกด NEXT
11. จะได้ API Key ที่จะนำไปใช้ในการเขียนโปรแกรมเพื่อดึงข้อมูลจาก Youtube API ให้สำเนาเก็บไว้ใช้งานในขั้นตอนต่อไป
เมื่อเราได้ API Key มาแล้ว เราก็จะมาถึงขั้นตอนในการเขียนโปรแกรมกันต่อ เนื่องจากในตอนนี้ผู้เขียนพัฒนาโปรเจ็คต่างๆ ด้วย Blazor ซึ่งเป็นเฟรมเวิร์คปัจจุบันของ ASP.NET ตัวอย่างโค้ดผู้เขียนก็จะขอเขียนด้วย Blazor ซึ่งในส่วนของการติดต่อ API ก็น่าจะพอเป็นแนวทางให้กับการพัฒนาด้วยเฟรมเวิร์คอื่นหรือภาษาอื่นได้ และเพื่อไม่ให้บล็อกนี้ยาวเกินไป ผู้เขียนขอข้ามขั้นตอนการสร้างโปรเจ็คไปเลย
1. เริ่มต้นเพื่อให้โปรเจ็คของเราสามารถใช้งาน Youtube API ได้ เราจะต้องติดตั้ง Library ที่จำเป็นก่อน โดยเราจะติดตั้งผ่านเครื่องมือที่เรียกว่า Nuget โดยคลิกขวาที่โปรเจ็ค เลือก Manage Nuget Packages…
2. ค้น Youtube เลือก Google.Apis.Youtube.v3 และ Install
3. และเพื่อให้ page ที่เราจะเขียนโปรแกรมติดต่อกับ Youtube API สามารถใช้งาน Library ดังกล่าวได้ เราจะต้องเพิ่ม using Library นั้นๆ เข้ามาก่อน
@using Google.Apis.Services @using Google.Apis.YouTube.v3 @using Google.Apis.YouTube.v3.Data
4. สร้าง YoutubeService เพื่อใช้ในการติดต่อ API และเราจะกำหนด API Key ใน object นี้ ดังโค้ดตัวอย่าง
var youtubeService = new YouTubeService(new BaseClientService.Initializer()
{
ApiKey = "XXxxXxXxXXX0xxxxXXxxxXxXXxxxxXXxX0XX0x0",
ApplicationName = this.GetType().ToString()
});
5. สร้าง object ListRequest และกำหนดข้อมูลที่ต้องการเป็น snippet ผ่านเมทธอด List ซึ่ง snippet จะเป็น object ที่บรรจุข้อมูลต่างๆ ของวิดีโอยูทูปนั้นๆ
VideosResource.ListRequest req = youtubeService.Videos.List("snippet");
6. กำหนดค่าแปรวิดีโอที่เราต้องการดึงข้อมูล ซึ่งจะเป็น parameter ที่อยู่หลังตัวแปร v เช่น https://www.youtube.com/watch?v=4VTx7oIzv_8 ค่าที่เราต้องการคือ 4VTx7oIzv_8
req.Id = "4VTx7oIzv_8";
7. จากนั้นทำการดึงข้อมูลจาก Youtube โดยเรียกเมทธอด Execute และดึงข้อมูลที่ต้องการจาก property ต่างๆ ที่อยู่ใน object Snippet
VideoListResponse resp = req.Execute();
if (resp.Items.Count > 0)
{
title = resp.Items.ElementAt(0).Snippet.Title;
description = resp.Items.ElementAt(0).Snippet.Description;
ThumbnailDetails tmb = resp.Items.ElementAt(0).Snippet.Thumbnails;
thumbnail = tmb.Default__.Url;
}
8. และโด้ด HTML ส่วนแสดงผล
<p><b>URL : </b> @url</p> <p><b>Title : </b> @title</p> <p><b>Description : </b> @title</p> <p><b>Thumbnail : </b> </p> <img src="@thumbnail" />
9. จะได้ผลลัพธ์ดังตัวอย่าง
10. นอกจากนี้ผู้อ่านสามารถดึงข้อมูลอื่นๆ ที่เกี่ยวข้องกับ video นั้นๆ ได้ผ่าน object Snippet รวมทั้งมี object ย่อยๆ อีกมากมายอย่างเช่น Thumbnails เป็นต้น หรือผู้อ่านจะทดสอบการทำงานได้ง่ายๆ ผ่าน query string โดยให้แทนที่ API Key ด้วยคีย์ของท่านเอง และ Video ID ด้วย ID ของ Video ที่ต้องการได้เลย ดังตัวอย่าง
https://www.googleapis.com/youtube/v3/videos?part=snippet&id={video IDs}&key={API key}
สุดท้ายนี้ผู้เขียนหวังเป็นอย่างยิ่งว่าบทความนี้จะมีประโยชน์กับท่านผู้อ่านได้ไม่มากก็น้อย ขอบคุณสำหรับการแวะเข้ามาอ่าน และสวัสดีครับ
แหล่งข้อมูลอ้างอิง
เนื่องด้วยทางทีมงานต้องการใช้ font ผ่าน css ที่อยู่คนละที่ โดยต้องการให้ไปเรียกที่เดียวเพื่อการจัดการง่าย แต่ปัญหาก็เกิดขึ้น เพราะทางต้นทางมีการ block ไม่ให้เข้าถึง วันนี้จึงมีแนวทางการแก้ปัญหาดังนี้
หวังว่าจะเป็นประโยชน์ให้กับคนที่มีปัญหาแบบเดียวกันนี้นะคะ
ที่มา
เนื่องจากระบบที่กำลังพัฒนาอยู่ มีความต้องการแสดงผลข้อมูลในรูปแบบ Timeline ดังรูป
เมื่อลองหาแนวทางดูพบว่ามี how to ที่เว็บไซต์ https://www.w3schools.com/howto/howto_css_timeline.asp ลองนำมาประยุกต์ใช้ โดยปรับสี เพิ่มเงา และส่วนแสดงผลรูป และไอคอนเข้าไป โดยใช้ https://getbootstrap.com/ เวอร์ชัน 5 เพื่อช่วยในการจัดตำแหน่งเนื้อหาด้านใน ก็จะได้ CSS และ HTML สำหรับนำไปใช้ในเว็บไซต์ดังนี้
CSS (ตัด media query ออก เนื่องจากใช้ flex box ช่วยในการทำ responsive อยู่แล้ว)
.timeline {
position: relative;
/*max-width: 1200px;*/
margin: 0 auto;
}
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: #977c44;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
.timeline-container {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
.timeline-container::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -12px;
background-color: white;
border: 4px solid #FF9F55;
top: 15px;
border-radius: 50%;
z-index: 1;
}
.timeline-left {
left: 0;
}
.timeline-right {
left: 50%;
}
.timeline-left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}
.timeline-right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
.timeline-right::after {
left: -12px;
}
.timeline-content {
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 6px;
}HTML โดยในตัวอย่างได้นำโครงสร้าง html page และ ส่วนแสดงอีโมไอคอนออกเพื่อให้อ่านง่าย เห็นโครงสร้าง html ของ timeline ชัดเจน และต้องมีรูปอยู่ที่โฟลเดอร์ images (ภาพประกอบเนื้อหาของท่านเอง)
/*Include Bootstrap 5*/
<link href="css/bootstrap.min.css" rel="stylesheet" />
<div class="timeline">
<div class="timeline-container timeline-left">
<div class="timeline-content shadow-lg">
<div class="d-flex justify-content-between align-items-baseline">
<img src="/images/location01.jpg" class="rounded-3 img-shadow" width="150" height="150" />
<h3 class="text-brown text-shadow">พ.ศ. 1601-1700</h3>
</div>
<p>อุทยานประวัติศาสตร์พระนครศรีอยุธยา สัมผัสความรุ่งเรืองของกรุงศรีอยุธยา อดีตราชธานีที่ปกครองแผ่นดินมายาวนานถึง 417 ปี ภายในมีโบราณสถานมากมายน่าเที่ยว ทั้ง พระราชวังหลวง วัดพระศรีสรรเพชญ์ วัดราชบูรณะ วัดมหาธาตุ วัดไชย...</p>
</div>
</div>
<div class="timeline-container timeline-right">
<div class="timeline-content shadow-lg">
<div class="d-flex justify-content-between align-items-baseline">
<img src="/images/location02.jpg" class="rounded-3 img-shadow" width="150" height="150" />
<h3 class="text-brown text-shadow">พ.ศ. 1601-1700</h3>
</div>
<p>อุทยานประวัติศาสตร์พนมรุ้ง ปราสาทหินพนมรุ้งเป็นโบสถ์พราหมณ์ลัทธิไศวะ มีการบูรณะก่อสร้างต่อเนื่องกันมาหลายสมัย ตั้งแต่ประมาณพุทธศตวรรษที่ 15 ถึงพุทธศตวรรษที่ 17 และในพุทธศตวรรษที่ 18 พระเจ้าชัยวรมันที่ 7 แห่ง...</p>
</div>
</div>
<div class="timeline-container timeline-left">
<div class="timeline-content shadow-lg">
<div class="d-flex justify-content-between align-items-baseline">
<img src="/images/location01.jpg" class="rounded-3 img-shadow" width="150" height="150" />
<h3 class="text-brown text-shadow">พ.ศ. 1601-1700</h3>
</div>
<p>อุทยานประวัติศาสตร์พระนครศรีอยุธยา สัมผัสความรุ่งเรืองของกรุงศรีอยุธยา อดีตราชธานีที่ปกครองแผ่นดินมายาวนานถึง 417 ปี ภายในมีโบราณสถานมากมายน่าเที่ยว ทั้ง พระราชวังหลวง วัดพระศรีสรรเพชญ์ วัดราชบูรณะ วัดมหาธาตุ วัดไชย...</p>
</div>
</div>
<div class="timeline-container timeline-right">
<div class="timeline-content shadow-lg">
<div class="d-flex justify-content-between align-items-baseline">
<img src="/images/location02.jpg" class="rounded-3 img-shadow" width="150" height="150" />
<h3 class="text-brown text-shadow">พ.ศ. 1792-2006</h3>
</div>
<p>อุทยานประวัติศาสตร์ศรีสัชนาลัย ศรีสัชนาลัย มีพัฒนาการมาแต่สมัยก่อนประวัติศาสตร์ตอนปลาย ประมาณ ๒,๓๐๐ – ๑,๕๐๐ ปีมาแล้ว โดยปรากฏชื่อควบคู่ไปกับเมืองสุโขทัยที่เป็นราชธานี สันนิษฐานว่าเมืองศรีสัชนาลัยมีความสำคัญในฐาน...</p>
</div>
</div>
</div>ก็จะได้หน้าเว็บใกล้เคียงความต้องการ ดังรูปตัวอย่างนะครับ สามารถนำไปปรับใช้ โดยการปรับแก้ css และเพิ่มเติมส่วนแสดงผลอื่นๆได้ตามต้องการ
สวัสดีครับ วันนี้เราจะมาว่ากันด้วยเรื่องของ การออกแบบสินค้าและบริการที่ตอบโจทย์และดีต่อผู้ใช้ การสร้างสินค้าและบริการจะต้องประกอบไปด้วยการออกแบบทางด้านประสบการณ์ของผู้ใช้ หรือ UX เพราะทุกสิ่งที่ถูกคิดค้นหรือสร้างขึ้นล้วนต้องผ่านการคิด วิเคราะห์ สร้างเพื่ออะไร ทำไปทำไม ตอบโจทย์อะไรกับผู้ใช้ ซึ่งการออกแบบมีด้วยกัน 6 ขั้นตอนหลักๆดังนี้
เป็น phase แห่งการทำความเข้าใจ การทำความเข้าใจในที่นี้หมายถึง การที่เราเข้าใจผู้ใช้, เข้าใจ brand, เข้าใจในเงื่อนไขต่างๆ เพื่อที่จะเอามาเป็นแนวทางในการทำ research ให้ phase ถัดไป
phase นี้จึงเป็น phase แห่งการค้นคว้า เก็บข้อมูลตั้งต้นเพื่อที่จะนำมาวิเคราะห์ในขั้นตอนต่อไป การ research มีด้วยกันหลายวิธี
ในการสร้างแบบสอบถามขึ้นมา เราต้องรู้ถึงปัญหาของผู้ใช้ ปัญหานี้เกิดในผู้ใช้กลุ่มไหน แล้วนำข้อมูลนั้นมาวิเคราะห์ออกมาเป็นสมมติฐาน
การทำ Usability test จะทำให้เราทราบถึง pain point และ happy point ของระบบได้ชัดเจนมากขึ้น
การทำ CI เป็นการสังเกตุการณ์จากการใช้งานจริงว่าติดปัญหาอย่างไร เรียนรู้จากเรื่องราวของบุคคลนั้นๆ เป็นแนวสนทนาปลายเปิด บางกรณีผู้ใช้จะเปิดใจพูดได้โดยไม่ต้องกังวลไม่เหมือนการสัมภาสแบบกลุ่มหรือในสภาพแวดล้อมที่ไม่คุ้นเคยก็จะเกิดความไม่ครบถ้วนของข้อมูลได้ มีการทำ/แก้ไข Prototype หน้างานแล้วทดสอบได้เลย
วิธีการทำ Research อื่นๆ ศึกษาต่อได้ที่ More Research Techniques
เป็น phase แห่งการวิเคราะห์ กลั่นกรองข้อมูลออกมาให้เหลือแต่สิ่งที่สำคัญ ขั้นตอนนี้สามารถทำได้หลายกระบวนการ แต่เราจะยกตัวอย่างมาให้เล็กน้อยก่อน
เป็นเหมือนเข็มทิศในการออกแบบ การตัดสินใจ การออกแบบจะแก้ปัญหาของผู้ใช้อย่างไร แล้วจะตอบสนองความต้องการของเขาได้อย่างไร ซึ่งจะประกอบไปด้วย
การทำ user journey จะช่วยให้เรามองเห็นภาพรวมของระบบ ในขั้นตอนต่างๆว่า ผู้ใช้รู้สึกอย่างไร จุดไหนที่ต้องมีการปรับปรุงอีก
User journey จะประกอบด้วย Flow การทำงานของระบบที่ผู้ใช้จะต้องเจอ ข้อมูล Emotions หรืออารมณ์ที่ผู้ใช้จะต้องเจอในแต่ละหน้าแต่ละขั้นตอน ข้อมูลความคิดของผู้ใช้ ณ ขณะนั้นซึ่งสัมพันธ์กับข้อมูลอารมณ์ของผู้ใช้ ข้อมูลโอกาสที่เราวิเคราะห์ออกมาว่า ณ ขณะนั้น เราสามารถ Offer อะไรให้กับผู้ใช้ได้บ้าง ข้อมูลประสบการณ์ มีความง่ายในการใช้งานมากแค่ไหน น่าเบื่อหรือไม่ และข้อมูลอื่นๆเพิ่มเติมที่สามารถนำมาวิเคราะห์ได้
**นอกเหนือจากการทำ User persona และ User journey ที่กล่าวมาข้างต้น ยังมีวิธีการทำ Analyze อีกหลายวิธีเช่น การทำ Storyboard, Card Sorting, SWOT Analysis, Use cases และอื่นๆ More Analyze Techniques
หลังจากได้ผ่านขั้นตอนแห่งการวิเคราะห์มา ขั้นตอนต่อไปคือการทำให้เกิดขึ้นมา ทำให้ Test ได้ ไม่ว่าจะเป็นการทำ Wireframe หรือ Prototype ขั้นตอนนี้เป็น phase แห่งการทดลอง ลองผิดลองถูก อ้างอิงจาก use case ต่างๆ นำข้อมูลที่ได้จากการ Analyze มาสร้างเป็นสิ่งที่สามารถทดสอบได้ ในขั้นตอนนี้จะประกอบไปด้วยการออกแบบในหลายๆส่วน ส่วนหลักๆจะประกอบไปด้วย
เมื่อมีการออกแบบเสร็จสิ้น เราจะต้องทำการทดสอบ ประเมินผล ถ้าไม่ผ่านการทดสอบก็ต้องวนกลับมาขั้นตอนเดิมคือ ออกแบบใหม่ ทดสอบ วนไปเรื่อยๆ จนกว่าจะผ่านไป phase ต่อไปได้
เมื่อผ่านขั้นตอนของการออกแบบมาแล้ว ขั้นตอนต่อไปคือขั้นตอนของการสร้างมันขึ้นมาให้เหมือนกับที่ออกแบบไว้ ในขั้นตอนนี้อาจจะมีการปรับเปลี่ยนหน้าตาหรือขั้นตอนที่ต่างจากการออกแบบได้เนื่องจากปัจจัยทางการสร้างหรือ coding ซึ่ง ณ ขั้นตอนนี้ก็ควรปรึกษาผู้ออกแบบและช่วยกันหาทางออกร่วมกันได้ ผลที่ได้จากการสร้าง เช่น
Prototype เป็นการนำ Wireframe มาต่อยอด มีการลงรายเอียดส่วนของสัดส่วน สี ตัวอักษร รวมถึง Icon และรูปภาพ ลงรายละเอียด Content จริงๆ มีการเชื่อมโยงปุ่มกับหน้าต่างๆหรือเรียกว่า Prototyping ให้เป็น Flow การทำงานจริงๆขึ้นมา เราสามารถนำผลงานมาขึ้น Mockup เป็น device จริงไปให้ผู้ใช้ได้ทดสอบแทนการเปิดหน้าจอ application ให้ดูผ่านจอก็ได้เช่นกัน ในส่วนนี้สามารถทำได้จากหลากหลายโปรแกรมเช่น Figma, Adobe XD และโปรแกรมอื่นๆเป็นต้น
เป็นการพัฒนา application หรือ feature นั้นๆขึ้นมาจริงๆจะต้องมีการประเมินความสำคัญของ feature หรือความสำคัญถึงการที่จะต้องทดสอบกับการใช้งานจริงๆด้วยเช่นกัน เพราะจะส่งผลต่อการลงแรงของหลายๆฝ่ายและค่าใช้จ่ายที่เพิ่มเติมขึ้นมาได้ (เรียกได้ว่า มีความเสี่ยงสูงเช่นกัน)
Make sure your product is perfect! :: Do you trust in your research and analysis?
ถ้าคิดว่าการ Launch Feature ใหม่หรือสินค้าใหม่ออกสู่ตลาดหรือออกสู่ public ยังไม่กล้าเสี่ยงลองนำผลงานที่ได้ไป
สุดท้ายแล้วเมื่อปรับปรุงแก้ไขจนคิดว่าอยู่ในเกณฑ์ที่ยอมรับได้ ก็ถึงเวลา Launch ปรับ Version ตัวโปรแกรมจริงๆให้ผู้ใช้ได้ใช้
เมื่อเราได้ผ่านขั้นตอนของการสร้างมาแล้ว ผู้ใช้ได้เจอกับสิ่งที่เราปรับปรุงหรือสร้างขึ้นมาใหม่ สิ่งที่เรา research analyze design ไปนั้นมันถูกต้องแล้วใช่หรือไม่ ตอบโจทย์ปัญหา pain point ของผู้ใช้หรือไม่ ดึงดูดให้ผู้ใช้กลับมาใช้งานระบบไหม และแน่นอนสิ่งที่ต้องเกิดคู่กันกับการเปลี่ยนแปลงคือ ผลตอบรับหรือ feedback เราจะต้องมีการเก็บข้อมูล feedback มาวิเคราะห์ อาจจะมีจุดที่เราพลาดไป ทดสอบไม่เจอในกลุ่มการทดสอบ beta ก็จะได้แก้ไข ปรับปรุง feature ให้ตอบโจทย์กว่าเดิม หรือคิดว่าการปรับปรุงระบบไปในแนวทางอื่นๆอาจจะส่งผลได้ดีกว่านี้ ข้อมูลตรงนี้ก็จะไปเป็นสารตั้งต้นของการขึ้นรอบการออกแบบและพัฒนาในรอบถัดๆไป
การที่เราทำ loop แบบนี้ไปเรื่อยๆทำให้ระบบหรือสินค้าที่เราสร้างขึ้นมีการพัฒนาอย่างตรงจุด ตอบโจทย์ผู้ใช้ เป็นระบบที่เข้าใจผู้ใช้ อาจจะมีการปรับปรุงไปในแนวใหม่เพื่อรองรับกลุ่มผู้ใช้ที่หมุนเปลี่ยนไปในทุกๆครั้งที่กลับมาทำ research ก็ไม่ผิดแปลกไป
ปล. การวน loop ในแต่ละครั้งเราสามารถตัดขั้นตอนบางอย่างไปได้เช่น รอบที่ 2 อาจจะเป็นผู้ใช้คนเดิมก็ข้ามไปทำ research ได้เลย หรือมีข้อมูลจาก loop เก่าก็สามารถนำข้อมูลนั้นมา Design & Test ได้เลย การกระทำแบบนี้เราเรียกว่าการ Lean UX Process
**Perfect มันไม่มีอยู่จริง ไม่ต้องไป keep perfect but ทำให้ใกล้คำว่า perfect ที่สุดจะดีกว่า เราไม่สามารถออกแบบหรือสร้างอะไรสักอย่างที่มันตอบโจทย์คนทั้งโลกได้ แต่ทำให้ดีที่สุดของเราได้
จบแล้วขั้นตอนการออกแบบ UX Design process เบื้องต้น ยาวหน่อยแต่รายละเอียดเกือบครบ จะเห็นได้ว่าจริงๆแล้วขั้นตอนทาง UX design process ได้เข้าไปเกี่ยวข้องกับทุกๆส่วนของชีวิตประวันและของรอบตัว มันมีวิธีการต่างๆหลากหลายรูปแบบ ขึ้นกับมุมมองของผู้ทำ แต่ทุกวิธี base on problem แน่นอน ถ้าเราวิเคราะห์ได้ว่าคนๆนั้นไปเจอปัญหาอะไรมา แล้วเราแก้ไขให้เขาได้ ทำไมเขาจะไม่ซื้อ/ใช้สินค้าของคุณ ที่สำคัญคือ “Keep doing research, keep developing.“
Thanks for references:
The UX design process in 6 stages | Inside Design Blog (invisionapp.com)
What is user research? | Inside Design Blog (invisionapp.com)
หลงไปในงาน UX Research at Agoda. เอะนั่นเห็นมี Event UX Research at… | by Dark_Spirit (Warm) | WIP team | Medium
UX Process – UX Mastery
เรามักได้ยินคำว่า UI เป็นประจำเมื่อเราพัฒนาระบบแต่ รู้หรือไม่ว่านอกจาก UI แล้วมันมีอีกหนึ่งอย่างที่ควรรู้และสำคัญยิ่งกว่าแต่ถูกมองข้ามไปคือ UX (ย่อมาจาก User experience) หลายๆคนมักจะสับสนว่า UI และ UX มันคือสิ่งเดียวกัน จริงๆแล้วมันคือคนละอย่างกันเลย วันนี้เราจะมาเล่าให้ฟัง
User Interface คือหน้าตาของระบบที่ผู้ใช้ได้เห็น ได้ตอบสนอง ไม่ใช่ระบบในทางคอมพิวเตอร์อย่างเดียวที่มี UI ถ้าเทียบกับขวดซอสมะเขือเทศ ขวดก็คือหนึ่งใน UI เช่นกันหรืออาหาร 1 จาน หน้าตาของอาหารก็ถือว่าเป็น UI ด้วย
“UI เป็นสิ่งที่สามารถมองเห็นได้หรือจับต้องได้“
User Experience คือ Experience หรือประสบการณ์ของผู้ใช้ที่เราได้ส่งมอบให้ มากกว่า Interface ที่ผู้ใช้งานได้ตอบสนอง เราจะไป focus ที่ผู้ใช้ใช้สินค้าเราแล้วมีความรู้สึกอย่างไร ผู้ใช้ใช้สินค้าเราแล้วได้บรรลุวัตถุประสงค์ของเราหรือไม่
“UX คือสิ่งที่อยู่กับความรู้สึก จับต้องไม่ได้ มองไม่เห็น แต่วัดประเมินผลได้”
ยกตัวอย่างแบบเห็นภาพ การออกแบบ UX ของการรับประทานอาหารจานหนึ่ง เราอยากให้ผู้ใช้รู้สึก fresh ก่อนตามด้วยความแน่นของรสชาติที่ตั้งใจปรุงตามมา ก็ต้องออกแบบจานอาหาร การเลือกใช้วัตถุดิบ หรือการให้กินคู่กับเครื่องดื่มบางอย่าง จะช่วยส่งเสริม/เติมเต็มให้ผู้กินได้รับประสบการณ์ที่แปลกใหม่ได้
จริงๆแล้ว นอกจาก website หรือ application ที่ต้องมี UX ที่ดีเป็น 1 ในองค์ประกอบแล้ว ทุกๆอย่างรอบตัวในชีวิตประจำวันก็ต้องมี UX ที่ดีเช่นกัน
UX เรียกได้ว่าเป็นสารต้นต้นของสินค้าก็ว่าได้ การทำให้ผู้ใช้ได้รับประสบการณ์ที่ดีมักจะเป็น 1 ในวัตถุประสงค์หลักในการออกแบบสินค้าและบริการ เพราะถ้าทำออกมาแล้ว ผู้ใช้ไม่ enjoy ใช้แล้วลำบากกว่าเดิม แล้วใครจะมาใช้งาน? สินค้าบางอย่างที่ใช้ในชีวิตประจำวันเช่นซอสมะเขือเทศออกแบบขวดซอสแบบทั่วไป เวลาใช้ผู้ใช้จะต้องเคาะ/เขย่าขวด ซอสจึงจะออกมา การออกแบบขวดให้เป็นแบบคว่ำ บีบแล้วซอสออกเลย เป็นการแก้ปัญหาของผู้ใช้ เมื่อผลิตออกมาจึงขาย ตอบโจทย์ปัญหาของผู้ใช้ ผู้ใช้ก็ happy, win win ทั้งผู้ขายและผู้ซื้อ
แล้วเราจะไปหาข้อมูลอะไรมาวิเคราะห์หละ แน่นอน
Research เท่านั้น ไม่ว่าจะเป็นการทำแบบสอบถาม การสัมภาส การสังเกตการใช้งาน การลงพื้นที่จริง หรือการอิงข้อมูลทางสถิติหรือข้อมูล log ยิ่งทำเยอะยิ่งทำให้เกิด UX ที่ดี
การมี user experience ที่ดีมาจากการทำ Research หรือการค้นความหาข้อมูล ถามว่าการตามหาข้อมูลจะทำได้อย่างไรหละ
การ research ข้อมูลของผู้ใช้งาน/กลุ่มผู้ใช้งาน จะได้ออกแบบได้ตรงจุด
ข้อมูลเหล่านี้เป็นตัวแปรตั้งต้นที่เราจะต้องมาออกแบบระบบอย่างไรให้ตอบโจทย์กลุ่มผู้ใช้ที่เราเก็บข้อมูลมา จะเห็นได้ว่า ยิ่งเราทำ research มาเท่าไหร โอกาสของการสร้างสินค้ามาให้ตอบโจทย์คนส่วนใหญ่ได้ จะทำให้สินค้าเราขายออกได้ง่ายกว่าเช่น การออกแบบระบบสารสนเทศที่กลุ่มผู้ใช้ระบบ 90%เป็นผู้มีอายุ การทำระบบให้เขาใช้งานก็ควรมีตัวอักษรที่ใหญ่กว่าทั่วไป มีการทำ Shortcut เมนูที่ง่าย ไม่สับซ้อน
คนที่ว่าจ้างหรือว่าง่ายๆคือเจ้าของระบบคือใคร Brand หรืออัตลักษณ์ของเขาเป็นอย่างไร วัตถุประสงค์ขององค์กร สีขององค์กร design token ขององค์กร ก็เป็นอีก 1 อย่างที่ต้องมีการศึกษาข้อมูลด้วยเช่นกัน
นอกจากการ research ผู้ใช้แล้ว เราก็ควรศึกษาปัญหาที่เกิดขึ้นด้วยเช่นกัน เพราะอะไรผู้ใช้ถึงเลิกใช้ ทำไมผู้ใช้ถึงไม่ใช้ feature นี้ ทำไมผู้ใช้สับสนในการใช้งาน ปัญหาเหล่านี้ก็จะเป็นอีกหนึ่งสารตั้งต้นที่จะทำไปออกแบบและพัฒนาสินค้าด้วยเช่นกัน ซึ่งเราสามารถสำรวจปัญหาเหล่านี้ได้จากการให้ผู้ใช้ทำแบบสอบถาม การลงพื้นที่จริงไปสังเกตการใช้งานระบบ
(ยกตัวอย่าง) ในการสร้างสินค้าขึ้นมาสักชิ้นที่จะทำให้ผู้ใช้รู้สึก win แล้วนั้น อีก 2 สิ่งที่ต้อง win ด้วยคือ Brand/Business win ด้วยไหม เสียผลประโยชน์รึเปล่าและ Team หรือคนสร้างสินค้า win ด้วยหรือไม่ ถ้าทั้ง 3 อย่างนี้ win ถือว่าเป็น UX ที่ดี
ทั้งนี้การมี UX ที่ดีข้างต้นอาจเป็นเพียงสมมติฐานเบื้องต้น อาจจะมีปัจจัยอื่นๆเข้ามาเกี่ยวข้องอีก หรืออาจจะใช้ปัจจัยอื่นมาเป็นตัววัดก็ได้เช่น Happiness, Usability เป็นต้น
จะเห็นได้ว่า UX หรือ User experience ได้เข้าไปอยู่ในทุกๆส่วนในชีวิตประจำวันในหลายๆอย่าง นอกจากการออกแบบระบบสารสนเทศหรือ website เพียงอย่างเดียว ตั้งแต่การออกแบบสินค้าต่างๆที่เป็นมิตรต่อการใช้งาน การออกแบบบริการที่ตอบโจทย์คน การทำ marketing ที่สามารถส่งเสริมการขายได้ดี และอื่นๆอีกมากมาย
โอกาาสหน้าไว้จะมาอธิบายการทำ UX Research ด้วยวิธีการต่างให้ดูเป็นแนวทางในการสร้างสินค้าและบริการให้ฟังกันครับ