Category: การพัฒนา Web Application

การเข้ารหัส Password หรือข้อมูลส่วนบุคคลในฐานข้อมูล ด้วย Hash Function กับ Salt Value

การ Hash
การ Hash หรือ Hashing ชื่ออย่างเป็นทางการคือ Cryptographic Hash คือการสร้างข้อมูลที่เป็นตัวแทนของข้อมูลที่ต้องการ ซึ่งอาจจะเป็นรหัสผ่าน หรือข้อมูลส่วนบุคคลอื่นๆ และนำไปจัดเก็บในฐานข้อมูลหรือใน Text file หรือในที่อื่นๆ ซึ่งข้อดีของการทำ Hash คือจะไม่สามารถถอดรหัส หรือกระทำการใดๆ เพื่อที่จะ Reverse ให้ออกมาเป็นข้อความต้นฉบับ ซึ่งในปัจจุบันมีวิธีการ Hash มากมาย เช่น MD5, SHA1, SHA256, SHA512, RipeMD, WHIRLPOOL, SHA3 เป็นต้น

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

MD5 Hashing & Cracking
เป็นการทำ Hash ที่พื้นฐานที่สุด และเมื่อหลายปีที่ผ่านมามีข่าวออกมาว่ามีผู้ Crack ได้สำเร็จ ซึ่งรายละเอียดคร่าวๆ ของเรื่องนี้คือ การทำ Hash ทุกชนิดจะมีการเกิดการซ้ำกันของค่า Hash เนื่องจากการมีคุณสมบัติแทนข้อมูลที่ต้องการ ซึ่งค่า Hash ที่สร้างขึ้นจะมีความยาวที่เท่ากันเสมอ ซึ่งสำหรับ MD5 ก็จะมีความยาว 16 bytes (128 bits) ซึ่งค่า hash ที่เป็นไปได้ทั้งหมดก็จะมีค่า 256^16 (หรือ 2^128) ค่าเท่านั้น ในขณะนี้ที่ข้อมูลที่เราต้องการแทนตัวนั้นอาจเป็นข้อมูลอะไรก็ได้ที่มากกว่าค่า 256^16 (หรือ 2^128) แน่นอน จึงเป็นไปได้ที่จะพบข้อมูลมากกว่า 1 ชุดจะมีค่า Hash ที่ตรงกัน
ความจริงแล้ว MD5 จะไม่สามารถถอดรหัสได้ เนื่องจาก Hash ทุกชนิดจะผ่านกระบวนการเข้ารหัสแบบทางเดียว ดังนั้นทางที่จะสามารถจะรู้ได้ว่าค่าตั้งต้นของ Hash นี้คืออะไร คือการพยายามสุ่มรหัสที่เป็นไปได้ จากนั้นเอาไปแปลงค่าเป็น MD5 และนำค่าที่ได้ไปเปรียบเทียบ (เรียกว่าเป็นการ Brute force นั่นเอง) ซึ่งถ้าเป็นข้อมูลที่มีความยาวหรือมีความซับซ้อนมาก ก็จะต้องใช้เวลาที่นานขึ้น

Rainbow Table
เป็นการเก็บข้อมูล Hash โดยมีข้อมูลต้นฉบับจากการ Brute Force เพื่อความรวดเร็วในการตรวจสอบ ซึ่งในปัจจุบัน GPU ระดับปานกลางหลายๆ รุ่นจะสามารถคำนวน Hash ได้ในระดับ 10 ล้าน Hash ต่อวินาที ซึ่งในปัจจุบันมีผู้ยอมเสียเวลาเพียงครั้งเดียวเพื่อสร้าง Hash ที่มีควายาวมากๆ และมีความซับซ้อน เพื่อในครั้งต่อๆ ไปจะสามารถนำมาาใช้งานได้ทันที และมีให้ดาวน์โหลดได้ฟรีอีกด้วย

ปัญหาของ Rainbow Table ในปัจจุบันคือ ยังไม่มีการสร้าง rainbow table ขึ้นมาสำหรับ hash ทุกชนิดหรือทุกความยาวของข้อมูลที่ต้องการ ถึงแม้จะมี CPU หรือ GPU ความสามารถสูงๆ แต่การทำ Hash ก็ยังคงใช้พลังในการประมวลผลมากเช่น SHA-2 ขนาด 256 bits ขึ้นไป เป็นต้น

Salting
เป็นเทคนิคนึงสำหรับเพิ่มความปลอดภัยสำหรับข้อมูลตั้งต้นของเรา ซึ่งทำให้ใช้เวลาในการถอดรหัสมากขึ้น ดังตัวอย่างเช่น ข้อความที่ต้องการเข้ารหัสตั้งต้นคือ “ThisIsMyPassword” และเมื่อรวมเข้ากับ Salt (ซึ่งอาจมาจากข้อความที่สุ่มขึ้นมา) คือ “3gswgW09seh” จะได้เป็น “ThisIsMyPassword3gswgW09seh” จากนั้นนำข้อความนี้ไป Hasing ซึ่งถ้าคำนวนความน่าจะเป็นของข้อความ กรณีที่เป็นตัวอักษรตัวเล็ก ตัวใหญ่ และตัวเลข มีความเป็นไปได้ 62 แบบ จะเท่ากับว่าถ้ารหัสผ่านที่เราเก็บมีความยาว 16 ตัวอักษร ก็ต้อง Hash ถึง 16^62 แบบ แต่ถ้าเป็นข้อความที่รวมกับSalt แล้วข้างต้น เป็นความยาว 27 ตัวอักษร ผู้ไม่ประสงค์ดีต้อง Hash ถึง 27^62 ถึงจะได้ข้อความที่ถูกต้อง ซึ่งต้องใช้เวลามหาศาลมากกว่าเดิม แต่ข้อเสียของวิธี Salting จะต้องมีการเก็บ Salt Value ในลักษณะของ Plain Text หรือเก็บไว้ในโปรแกรมที่พัฒนา เพื่อการถอดรหัสที่ถูกต้อง และถ้าหาก Salt Value มีการเสียหายหรือเปลี่ยนค่าไปหลังจากการเข้ารหัสเสร็จแล้ว จะไม่สามารถเทียบ Hash เพื่ออ่านข้อความต้นฉบับได้เลย

Conclusion
1. การเก็บข้อมูลที่สำคัญ เช่น รหัสผ่าน หรือแม้กระทั่งเลขประจำตัวประชาชน ในฐานข้อมูล ควรเก็บในรูปแบบ Hash เท่านั้น
2. รหัสผ่านยิ่งยาว ยิ่งใช้เวลาในการถอดรหัสมากขึ้น และยิ่งมีการใช้ Salt Value จะใช้เวลามากยิ่งขึ้น โดยเฉพาะการใช้ Salt Value เพิ่มเข้าไปเพื่อให้มีความยาวมากขึ้น
3. MD5 ก็ยังเพียงพอต่อการเก็บรหัสผ่านและข้อมูลอื่นๆ แต่ก็ยังสู้ SHA-2 ไม่ได้
4. ทางที่ดีที่สุดคือ อย่าให้รหัสผ่านหรือข้อมูลที่เก็บอยู่ ถูกเข้าถึงจากภายนอก แม้แต่จะเป็นแค่ Hash ก็ตาม

Reference:
https://crackstation.net/hashing-security.htm

June 27, 2019
การเขียน SQL เพื่อเลื่อนลำดับขึ้นลงอัตโนมัติ

การเขียน SQL เพื่อเลื่อนลำดับขึ้นลงอัตโนมัติของ column ที่ระบุลำดับเป็นตัวเลข

รูปที่ 1 ตัวอย่างรูปแบบตาราง
(more…)

June 24, 2019
เล่าเบื้องหลังการสร้าง www.psudev.info

“กรุงโรมไม่สร้างแค่วันเดียว” ฉันใดฉันนั้นเพื่อให้เครือข่ายนักพัฒนาแอพพลิเคชั่น (เหล่าโปรแกรมเมอร์) ของมหาวิทยาลัยสงขลานครินทร์ เกิดการร่วมกลุ่มกันอย่างเป็นรูปธรรมกันมากขึ้น จึงมีแนวคิดจะสร้างเว็บไซต์ลักษณะที่เป็นฐานข้อมูลรวบรวมรายชื่อสเหมือนสมุดหน้าเหลือง (เด็กสมัยใหม่อาจจะงง!) www.psudev.info เพื่อเป็นข้อมูลไว้ติดต่อกันสามารถค้นหาได้สะดวก คอนเซปคือต้องพัฒนาได้ง่ายและรวดเร็ว เป็น https ไม่ต้องเสียค่า cert สามารถออนไลน์ได้ทั่วโลก ไม่มีวันล่ม ไม่ต้องดูแลอินฟา และไม่รอช้าานั่นเริ่มกันเลยครับ…
(more…)

May 7, 2019
เรียนรู้เทคโนโลยี OAuth2
OAuth2 คืออะไร ทำไมต้องใช้

OAuth2 คือมาตรฐานหนึ่งของระบบยืนยันตัวตน และจัดการสิทธิ์การเข้าใช้งานระบบต่าง ๆ เป็นมาตรฐาน rfc6747^[1] ที่ใช้สำหรับ Client เชื่อมต่อกับ Server ที่ใช้ในการ Authen & Authorize เพื่อให้ได้รับสิ่งที่เรียกว่า Access Token เพื่อใช้แทน Username และ Password (สามารถใช้อย่างอื่นเพื่อขอ Token ก็ได้) เพื่อนำไปใช้กับบริการอื่น ๆ ทำให้มีความปลอดภัยมากขึ้น รวมถึงบอกว่าทำมีสิทธิ์ทำอะไรได้บ้างกับบริการนั้น ๆ (จริง ๆ แล้วถ้า Access Token หลุดก็เอาไปเข้าระบบอื่น ๆ ได้ อาจจะต่างตรงแค่ไม่เห็น Password) โดยแนะนำต้องใช้คู่กับ https อีกชั้นเพื่อความปลอดภัยสูงสุด โดยแสดงภาพคร่าว ๆ เป็น Protocol Flow ดังรูป^[2]

โดย Access Token จะมีเวลาจำกัดในการใช้งานเมื่อ Token หมดอายุ ก็ต้องไปขอใหม่ เมื่อเลิกใช้งานก็ขอยกเลิก Token รูปแบบการใช้งานมี 4 รูปแบบหรือเรียกว่า grant_type โดยแต่ละแบบมีรายละเอียดดังนี้^[3]
1. Authorization Codeใช้สำหรับ Web Server ที่ใช้ Code ด้านหลังในการเชื่อมต่อกับ OAuth Server โดยไม่ได้เปิดเผยให้สาธารณะเห็น อธิบายเป็นลักษณะการใช้งานคือ
  – ผู้ใช้งานเข้า Web Site
  – จะมีให้กด Login Facebook, Twitter, Google หรืออื่น ๆ
  – เมื่อผู้ใช้กดก็จะเด้งให้ไป Login ที่ผู้ให้บริการนั้น ๆ ถ้าเคย Login ไว้แล้วก็จะข้ามขั้นตอนนี้ไป
  – ถ้าผู้ให้บริการนั้น ๆ เช่น Facebook จะให้กดยอมรับข้ออนุญาต ส่วนมากจะถามเรื่องสิทธิ์ในการเข้าถึงข้อมูลส่วนตัว
  – เมื่อผู้ใช้กดอนุญาต ก็จะกลับมายัง Web Site โดยในเบื้องหลัง WebSite จะได้ authorization code มาเรียกร้อยแล้วจากผู้ให้บริการ
  – จากนั้นทาง Web Site ก็สามารถเข้าถึงข้อมูลของผู้ให้บริการนั้น ๆ ได้ตามสิทธิที่อนุญาตไว้
  
  วิธีใช้ authorization code
  1. มีปุ่ม login ซึ่งมี link มี parameter คล้ายๆแบบนี้
    https://[oauth-server]/authorize?response_type=code&client_id=testclient&client_secret=testpass&redirect_uri=http%3A%2F%2F10.1.0.20%3A32778%2F%3Fauth%3Dsso
  2. เมื่อกดปุ่ม login ระบบจะต้องแจ้งว่า จะขอใช้สิทธิเรื่องใดบ้าง
  3. เมื่อผู้ใช้กดตกลงอนุญาต หน้าจอจะถูกพาไปยัง redirect_uri ที่ระบุไว้ พร้อมทั้งส่ง authorization code มาให้ด้วย
  4. ซึ่งจะมีหน้าตาประมาณนี้
    https://yoursite.com/oauth/callback?code=xxx
  5. อ่าน code ออกมาเพื่อนำไปขอ access_token กับ API ของผู้ให้บริการ login ตัวนั้นๆ
    POST https://api.blah.com/oauth/token?grant_type=authorization_code&code=xxx&redirect_uri=xxx&client_id=xxx&client_secret=xxx
    
    ค่า client_id, client_secret โดยมาก เจ้าของ login API (Identity provider) จะเป็นคนกำหนดมาให้
    
    หลังจากส่ง code ด้วย HTTP method POST และบอกว่าเป็น grant_type แบบ authorization_code ไปแล้ว client จะได้ access_token กลับมา เราจะเอา access_token นั้นในการเรียก API อื่น ๆ ต่อไป
2. Implicit
  
  ใช้สำหรับ App ฝั่ง Client ซึ่งไม่จำเป็นต้องมี Web Server เป็นเหมือนการคุยระหว่าง Web Browser Client กับ OAuth Server ตรง ๆ เหมาะกับพวกที่ลงท้ายด้วย JS เช่น ReactJS, AngularJS ที่ต้องการดึงข้อมูลด้วย Browser เลย (เหมาะกับ Mobile เป็นพิเศษ) ลักษณะการทำงานคล้าย ๆ กับข้อ 1 แต่จะต่างกันตรงไม่ต้องส่ง Client_Secret เป็นวิธีที่เปิดเผยให้สาธารณะเห็น
  
  วิธีใช้ Implicit
  1. สร้างปุ่ม login ที่ส่ง action ไปยัง URL แบบนี้
    https://login.blah.com/oauth?response_type=token&client_id=xxx&redirect_uri=xxx&scope=email
  2. เมื่อผู้ใช้กดปุ่ม จะแสดงหน้าต่างขอใช้สิทธิ หากตกลงข้อมูลจะ submit ไป server แล้วข้อมูล token จะถูกส่งกลับมาตาม redirect_uri ที่กำหนดเอา
  3. client_id ในข้อ 1 id provider เป็นคนกำหนดมาให้
  4. token ที่ได้มา เอาไปใช้ได้ดึงข้อมูลตามสิทธิ์ที่ได้มาได้เลย
3. Password Credentials
  
  ใช้สำหรับ Application ที่มีการจัดการสิทธิเอง แต่ต้องการยืนยันตัวตนเท่านั้น ซึ่งวิธีนี้ไม่ต้อง Redirect ไปที่ผู้ให้บริการอื่น วิธีนี้เหมาะกับการใช้งานที่เป็นบริการของตัวเอง เพราะ username password จะปรากฎในเครื่องที่ส่งขอ token ถ้าไปรันวิธีนี้บน Server อื่นที่ไม่ได้เป็นเจ้าของ แสดงว่า เขาอาจจะดักเอา username password ไปใช้ก็ได้
  
  การใช้ Password Credentials
  1. มี form รับ username/password เมื่อกด submit แล้ว ส่ง form submit (POST method) ไปยัง server/service ของเรา
    POST https://login.blah.com/oauth/token?grant_type=password&username=xxx&password=xxx&client_id=xxx
  2. จะได้ access_token มาใช้งานได้เลยหากใส่ข้อมูลถูกต้อง
4. Client Credentials
  
  ในกรณีที่เป็นการคุยระหว่าง Application -> Service โดยจะไม่เกี่ยวข้องกับผู้ใช้ ยกตัวอย่างว่าเราอาจจะได้ข้อมูลสักอย่างแต่ต้องการความปลอดภัยว่าต้องเป็นเครื่องที่เราให้สิทธิ์ ก็สามารถส่ง id และ secret ที่ออกให้ Application ส่งมาขอ token เพื่อเข้าถึง Service นั้น ๆ ได้เลย
OAuth2 ปลอดภัยหรือไม่

อยู่ที่การใช้งาน ว่าปลอดภัยหรือไม่ ถ้ารันบน http ธรรมดา ยังไงก็ไม่ปลอดภัย ถ้าใช้ php 4/5 หรือ windows 2003/2008/2008/2008 R2 ยังไงก็ไม่ปลอดภัย

แล้วทำไมต้องใช้ OAuth2

– เนื่องจากเป็นมาตรฐานที่พัฒนาจาก OAuth1.0a ที่มีการใช้งานมาก ทำให้ Version 2 ซึ่งลดความซับซ้อนลง การใช้งานจึงเข้าใจง่ายขึ้น

– เร็วกว่า xml web service ใช้ json ในการสื่อสาร เพราะขนาดข้อมูลที่ส่งจะเล็กกว่ามาก

– มีผู้ให้บริการภายนอกหลากหลาย

– เหมาะกับใช้งานที่หลากหลาย เพราะรองรับหลากหลายภาษา (Java, Python, Go, .NET. Ruby, PHP, .NET, ฯลฯ)

– สามารถประยุกต์นำมาใช้งานเป็น Single Sign On ได้ (ต้องพัฒนาเพิ่มเอง ไม่มีมาให้ในมาตรฐาน)

=================================================

References :
[1] The OAuth 2.0 Authorization Framework : https://tools.ietf.org/html/rfc6749

[2] An Introduction to OAuth2 : https://www.digitalocean.com/community/tutorials/an-introduction-to-oauth-2

[3] OAuth 2.0 clients in Java programming, Part 1, The resource owner password credentials grant : https://www.ibm.com/developerworks/library/se-oauthjavapt1/index.html
March 3, 2019
Refresh ข้อมูลในกรณีที่ฐานข้อมูลมีการอัพเดทใน LINQ และ Entity Framework (Refresh Query in LINQ)

จากปัญหาที่เคยเจอในกรณีที่ฐานข้อมูลมีการอัพเดทไปแล้ว พอ Select ข้อมูลออกมาข้อมูลไม่ refresh ในกรณีนี้จะยกตัวอย่างการใช้งานฟังก์ชัน reload ของ System.Data.Entity.Infrastructure

public class DbEntityEntry where TEntity : class
// Summary:
// Reloads the entity from the database overwriting any property values with values
// from the database. The entity will be in the Unchanged state after calling this
// method.
public void Reload();

โดยการใช้งานนั้นจะยกตัวอย่างตามโค้ดด้านล่าง

ProjectEntities pe = new ProjectEntities();
var project = pe.PROJECT.Where(w => w.ID == projectID && w.YEAR == year).FirstOrDefault();
if (project != null)
{
pe.Entry(project).Reload();
}

หวังว่าคงจะได้ช่วยโปรแกรมเมอร์ทีมีปัญหาเรื่องการ refresh ข้อมูลผ่าน LINQ และ Entity Framework

February 22, 2019
การสร้างเงื่อนไขแบบหลายตัวแปรในการค้นหาข้อมูลผ่าน LINQ (Multiple Search In LINQ)
การสร้างเงื่อนไขแบบหลายตัวแปรในการค้นหาข้อมูลผ่าน Linq เพื่อให้เห็นภาพชัดเจน จะยกตัวอย่างโดย กำหนดเงื่อนไข 3 ตัวแปร ดังนี้
- ตัวแปร “ชื่อ/นามสกุล/เลขประจำตัวประชาชน”
  โดยใช้ control TextBox ที่ชื่อ ID=”txtSearch”
- ตัวแปร “โครงการรับ” โดยใช้ control DropDownList ที่ชื่อ ID=”ddProject”
- ตัวแปร “สถานะการตรวจเอกสาร”
  โดยใช้ control DropDownList ที่ชื่อ ID=”ddStatus”
จากนั้นเราสร้าง Entity ยกตัวอย่างเป็น UploadEntities ซึ่งในที่นี้ สร้าง DbSet ที่เชื่อมต่อฝั่งฐานข้อมูลยกตัวอย่างเป็น V_REGISTRATION_UPLOAD ผ่าน Entity Framework 4.5 จากนั้นใช้ LINQ ในการเขียนเงื่อนไข ยกตัวอย่างตามโค้ดด้านล่าง

project = ddProject.SelectedValue;
status = ddStatus.SelectedValue;
search = txtSearch.Text.Trim();
outList = ue.V_REGISTRATION_UPLOAD
.Where(w => (w.STUD_FNAME.Contains(search) || w.STUD_LNAME.Contains(search) || w.CITIZEN_ID.Contains(search)) || string.IsNullOrEmpty(search))
.Where(x => x.PROJECT_ID == project || string.IsNullOrEmpty(project))
.Where(y => y.APPROVED_STATUS == status || string.IsNullOrEmpty(status)) .ToList();
gvUploadedList.DataSource = outList;
gvUploadedList.DataBind();

แสดงการใช้งานฟังก์ชัน Where ของ LINQ ในส่วนของ code behide

ผลลัพธ์ที่ได้จากการเรียกใช้เงื่อนไขฟังก์ชัน Where ของ LINQ

สรุปได้ว่าการนำฟังก์ชัน Where ของ LINQ มาใช้งานนั้น ทำให้โปรแกรมเมอร์สะดวกและลดการเขียนโค้ดให้ง่ายขึ้นจากเมื่อก่อนที่ต้องตรวจสอบเงื่อนไขเป็นแบบทีละเงื่อนไข
February 22, 2019
การสร้าง RESTful API สำหรับใช้งานจริง ง่าย ๆ ด้วย Flask และ Waitress
จาก From LAB to Production – จาก Machine Learning Model สู่ Flask RESTful ซึ่งได้นำ Machine Learning แบบ Statistical Approach อย่าง Logistic Regression ที่สร้างโมเดล และ Train กับข้อมูลเรียบร้อยแล้ว (บนเครื่อง Development) จากนั้น ได้นำโมเดลออกมาใช้งาน โดยใช้ วิธีการ Serialization ด้วย joblib ในภาษา Python ได้เป็นไฟล์ออกมา แล้วจึงนำไปใช้เพื่อใช้ในการทำนาย (predict) ชนิดของดอก Iris บนเครื่อง Production โดยรับ Input จากผู้ใช้ผ่าน HTTP Protocol ทั้ง GET/POST ที่ TCP/5000

ตัวอย่างดังกล่าว ยังเป็นเพียงการ “ทดสอบ” แต่ในบทความนี้ จะเป็นวิธีการ ซึ่งนำไปสู่การใช้งานจริง ๆ ซึ่ง Flask แนะนำให้ใช้งานกับ “waitress” (น่าจะเลียนแบบจาก Server) ซึ่งเป็น WSGI (Web Server Gateway Interface) อีกตัวหนึ่ง ใช้งานง่าย เพราะไม่ต้องติดตั้ง Apache/Nginx เลย

ติดตั้ง waitress
```
pip install waitress
```
predict.py
```
from flask import Flask, request, jsonify
from flask_restful import Resource, Api, reqparse
from flask_cors import CORS

app = Flask(__name__)
# Enable CORS
CORS(app)

@app.route("/predict", methods=["POST"])
def predict():
	result = 0
	if request.method == "POST":    		
		input_value = request.form["input_value"]
		# ประมวลผล
		# ...
		# ตัวอย่างเช่น รับค่ามา แล้ว คูณ 2
		result=input_value * 2
		# ###
	return jsonify(
		prediction=result
	),201
```
ไฟล์ predict.py เป็นตัวอย่าง python ซึ่งรับค่า input_value จาก HTML form ผ่าน POST method เข้ามา ที่ /predict ซึ่งเขียนด้วย Flask ที่จะไปเรียกใช้ฟังก์ชั่น prediction() แล้วก็ทำการคำนวณที่ต้องการ จากนั้น ตอบค่ากลับไปเป็น JSON ด้วยฟังก์ชั่น jsonify โดยสามารถกำหนด key ชื่อ prediction และ value เป็น result ที่คำนวณได้ และแจ้ง Response Code เป็น 201

waitress_server.py
```
from waitress import serve
import predict
serve(predict.app, host='0.0.0.0', port=8080)
```
ไฟล์ waitress_server.py ก็เพียงแค่ import serve จาก waitress ที่ติดตั้งไป และ import predict ซึ่งก็คือไฟล์ predict.py ข้างต้น (อยู่ในไดเรคทอรีเดียวกัน) จากนั้น ก็เรียก predict.app โดยรับได้จากทุก IP (0.0.0.0) ที่ TCP port 8080

วิธีใช้งาน

ก็แค่เปิด Command Prompt (ตัวอย่างนี้ทำบน Windows Server) แล้วใช้คำสั่ง
```
python waitress_server.py
```
จากนั้น ก็พัฒนา web application หรือ จะใช้ postman ทดสอบติดต่อเข้ามาก็ได้ ที่ http://server-ip-address:8080/predict แล้ว POST ข้อมูลเข้ามา ก็จะได้ผลลัพธ์กลับไปเป็น JSON

หวังว่าจะเป็นประโยชน์ครับ
January 4, 2019
Stencil : Styling
Shadow DOM

Shadow DOM เป็น API ที่อยู่ใน browser ที่ให้ความสามารถในทำ DOM encapsulation และ style encapsulation โดย Shadow DOM จะแยก component ออกจากภายนอก ทำให้ไม่ต้องกังวลกับ scope ของ css หรือผลกระทบกับ component ภายนอก หรือ component ภายนอกจะกระทบกับ component ภายใน

ใน Stencil ค่า default การใช้งาน Shadow DOM ใน web component ที่สร้างด้วย Stencil จะถูกปิดอยู่ หากต้องการเปิดใช้งาน Shadow DOM ใน web component ต้องกำหนดค่า shadow param ใน component decorator ดังตัวอย่างด้านล่างนี้
```
@Component({
  tag: 'shadow-component',
  styleUrl: 'shadow-component.scss',
  shadow: true
})
export class ShadowComponent {

}
```
สิ่งจำเป็นเมื่อเปิดใช้งาน Shadow DOM
- QuerySelector เมื่อต้องการ query element ที่อยู่ภายใน web component จะต้องใช้ this.el.shadowRoot.querySelector() เนื่องจาก DOM ภายใน web component อยู่ภายใน shadowRoot
- Global Styles จะต้องใช้ CSS custom properties
- css selector สำหรับ web component element คือ “:host” selector
โดยทั่วไป จะเก็บ styles ไว้ภายไต้ ชื่อ tag ของ component นั้น
```
my-element {
  div {
    background: blue;
  }
}
```
ในกรณีของ Shadow DOM อยู่ภายใต้ tag :host
```
:host {
  div {
    background: blue;
  }
}
```
Scoped CSS

สำหรับ browser ที่ไม่สนับสนุน Shadow DOM, web component ที่สร้างโดย Stencil จะกลับไปใช้ scoped CSS แทนที่จะ load Shadow DOM polyfill ที่มีขนาดใหญ่ Scoped CSS จะทำการกำหนดขอบเขต CSS ให้กับ element โดยอัตโนมัตตอน runtime

CSS Variables

CSS Variables เหมือนกับ Sass Variables แต่ต่างกันตรงที่ CSS Variables รวมอยู่ใน browser โดยที่ CSS Variables ให้ความสามารถในการกำหนด CSS properties ที่ใช้ได้ภายใน app ตัวอย่างการใช้งานที่พบบ่อยคือ การกำหนดสี (color) ถ้ามีสีหลักที่ต้องการใช้ร่วมกันทั้ง app แทนที่จะกำหนดสีนั้นๆในแต่ละที่ที่ใช้งาน ก็จะสร้าง variable ขึ้นมาและใช้ variable นั้นในทุกๆที่ที่ต้องการ ซึ่งถ้าต้องการเปลี่ยนสี ก็สามารถเปลี่ยนที่ variable ที่เดียว

การใช้งาน CSS Variables ใน Stencil

สร้าง file : variables.css ที่ใช้เก็บ CSS Variabless ใน “src/global/” directory และเพิ่ม config globalStyle: ‘src/global/variables.css’ ใน stencil.config.js

ตัวอย่าง การกำหนด CSS Variable ใน src/global/variables.css
```
:root {
  --app-primary-color: #488aff;
}
```
จากตัวอย่างด้านบน สร้าง CSS Variable ชื่อ –app-primary-color ที่เก็บค่าสี #488aff อยู่ภายใต้ :root selector (:root selector คือ CSS pseudo selector ที่หมายถึง root element ของ app) การใช้ CSS Variable ที่กำหนดไว้ทำได้ดังนี้
```
h1 {
  color: var(--app-primary-color)
}
```
เป็นการกำหนดสี ที่เก็บไว้ใน CSS Variable –app-primary-color ให้กับ h1 element

อ้างอิง : https://stenciljs.com/docs/styling
December 9, 2018
Stencil : JSX
Stencil component ใช้ JSX template syntax ในการกำหนดรูปแบบการแสดงผลที่จะถูก render ของ component ซึ่งแต่ละ component จะมี render function ที่จะทำหน้าที่ return โครงสร้างของ component ที่จะเปลี่ยนเป็น DOM ตอน runtime เพื่อแสดงผลบนหน้าจอ
```
class MyComponent {
    render() {
       return (
          <div>
            <h1>Hello World</h1>
            <p>This is JSX!</p>
          </div>
       );
    }
}
```
จาก class Mycomponent ด้านบน render function จะ return div element ที่ภายในประกอบไปด้วย h1 และ p

Data Binding

เมื่อ component ต้องการที่จะ render ข้อมูลที่มีการเปลี่ยนแปลง dynamic data ทำได้โดยการ bindind ข้อมูลนั้นๆ โดยใช้ {variable} (ซึ่งจะใกล้เคียงกับ ES6 template ที่ใช้ ${variable})
```
render() {
     return (
        <div>Hello {this.name}</div>
     )
}
```
Conditionals

เมื่อ component มีการแสดงผลที่ขึ้นอยู่กับเงื่อนไข สามารถใช้ JavaScript if/else statements ใน render function ดังเช่นตัวอย่างด้านล่างนี้ ถ้า this.name ไม่มีการกำหนดค่า จะแสดงผล “Hello, World”
```
render() {
    if (this.name) {
        return ( <div>Hello {this.name}</div> )
    } else {
        return ( <div>Hello, World</div> )
    }
}
```
หรือ จะเขียนในรูปแบบ inline conditionals ก็ได้เช่นกัน
```
render() { 
       return ( 
          <div> 
          {this.name 
               ? <p>Hello {this.name}</p> 
               : <p>Hello World</p> 
          } 
          </div> 
       ); 
}
```
Loops

ใน JSX สามารถใช้ array operators : map ในการทำงานแบบ loop จากตัวอย่างด้านล่าง มี lists ของ todo object ใน this.Objects ซึ่ง map function ทำหน้าที่ loop ในแต่ละ todo object ใน this.Objects แล้วสร้าง new JSX sub tree และ add เข้าไปใน array ที่จะ return ออกจาก map function ซึ่งจะเพิ่มเข้าไปใน JSX tree ด้านนอกนั่นคือ div element
```
render() {
   return (
     <div>
       {this.todos.map((todo) =>
           <div>
             <div>{todo.taskName}</div>
             <div>{todo.isCompleted}</div>
           </div>
       )}
     </div>
  )
}
```
Handling User Input

Stencil สามารถใช้ native DOM events ได้ดังตัวอย่างด้านล่าง
```
export class MyComponent 
{ 
       handleClick(event: UIEvent) { 
            alert('Received the button click!'); 
       } 
       render() { 
           return ( 
              <button onClick={ (event: UIEvent) => this.handleClick(event)}>Click Me!               
              </button> 
           ); 
       } 
}
```
หรือจะเขียนในรูปแบบ onClick={this.handleClick.bind(this)} ก็ได้เช่นกัน
```
  handleClick(event: UIEvent) {
    alert('Received the button click!');
  }

  render() {
    return (
      <button onClick={this.handleClick.bind(this)}>Click Me!</button>
    );
  }
```
อ้างอิง : https://stenciljs.com/docs/templating-jsx
November 22, 2018