จีรศักดิ์ สายนาค

DevToys รวมเครื่องมือใช้บ่อยของโปรแกรมเมอร์

May 23, 2022 11:34

เคยมั้ยครับ ได้ข้อมูลรูปแบบ JSON มาอยากจัดรูปแบบให้อ่านได้ง่าย (ค้น google หาเว็บจัดรูปแบบ) อยาก Decode JWT ออกมาดูก่อนเริ่มเขียนโปรแกรมอ่านค่า (ค้น google หาเว็บ Decode) อยากทดสอบ Regex ที่เขียนว่าถูกต้องหรือไม่ (ค้น google หาเว็บทดสอบ) ฯลฯ https://devtoys.app/ DevToys คือ ซอฟแวร์ที่รวมเอา Utility ที่เหล่า Dev ใช้งานบ่อยๆเอาไว้ที่เดียวกัน ในรูปแบบ Windows App ทำให้สะดวกต่อการเรียกใช้งานมากครับ และที่สำคัญฟรี เพราะพัฒนาขึ้นโดย Community ของ Dev ที่ทำงานบนระบบปฏิบัติการ Windows แล้วรู้สึกว่าขาดสิ่งอำนวยความสะดวกเหล่านี้ (แนวคิดคล้ายๆกับ PowerToys ชื่อยังล้อกันมาด้วย) โดยโปรแกรมนี้ก็จะมีเมนูที่แบ่งหมวดหมู่แยกไว้ตามแต่ละประเภท ดังรูป เมื่อเราคลิกเข้าไปในแต่ละเมนู ก็จะมี UI ที่เรียบง่าย สามารถเข้าใจวิธีการใช้งานได้ทันที ตัวอย่างการใช้งาน

สร้าง UI หน้าเว็บแบบ Timeline ด้วย HTML+CSS

May 19, 2022 13:53

เนื่องจากระบบที่กำลังพัฒนาอยู่ มีความต้องการแสดงผลข้อมูลในรูปแบบ Timeline ดังรูป เมื่อลองหาแนวทางดูพบว่ามี how to ที่เว็บไซต์ https://www.w3schools.com/howto/howto_css_timeline.asp ลองนำมาประยุกต์ใช้ โดยปรับสี เพิ่มเงา และส่วนแสดงผลรูป และไอคอนเข้าไป โดยใช้ https://getbootstrap.com/ เวอร์ชัน 5 เพื่อช่วยในการจัดตำแหน่งเนื้อหาด้านใน ก็จะได้ CSS และ HTML สำหรับนำไปใช้ในเว็บไซต์ดังนี้ HTML โดยในตัวอย่างได้นำโครงสร้าง html page และ ส่วนแสดงอีโมไอคอนออกเพื่อให้อ่านง่าย เห็นโครงสร้าง html ของ timeline ชัดเจน และต้องมีรูปอยู่ที่โฟลเดอร์ images (ภาพประกอบเนื้อหาของท่านเอง) ก็จะได้หน้าเว็บใกล้เคียงความต้องการ ดังรูปตัวอย่างนะครับ สามารถนำไปปรับใช้ โดยการปรับแก้ css และเพิ่มเติมส่วนแสดงผลอื่นๆได้ตามต้องการ

Oracle: แปลงข้อมูล JSON เป็น Table หรือ View

March 29, 2022 13:23

ในการส่งข้อมูลระหว่างแอพพลิเคชัน ในปัจจุบันปฏิเสธไม่ได้ว่ารูปแบบ JSON ได้รับความนิยมสูงมาก วันนี้มีโจทย์ในการพัฒนาระบบอย่างนึงที่ผมเจอคือ ได้ข้อมูลจาก log มาจัดเก็บในฐานข้อมูลซึ่งอยู่ในรูปแบบ JSON แต่ต้องการแยกเก็บเป็นฟิลด์เพื่อนำไปประมวลผล และวิเคราะห์ต่อ วิธีการแปลงข้อมูลที่ผมเลือกใช้ คือใช้ฟังก์ชัน JSON_TABLE โดยตัวอย่างข้อมูล JSON มีรูปแบบดังนี้ จะเห็นได้ว่ามีจำนวน Key และ Value จำนวนมากและอยู่ในรูปแบบ Parent Chid ด้วยแต่สามารถสร้าง View หรือ Table จากข้อมูลดังกล่าวด้วยคำสั่งเดียวดังนี้ สังเกตุว่า จุดสำคัญคือคำสั่ง json_table ที่เราจะต้องระบุฟิลด์ที่เก็บข้อมูล JSON ของเราดังในตัวอย่างคือ l.detail ที่เดิมเก็บอยู่ในตาราง log_traffic โดยใช้ path ย่อเป็น ‘$’ จากนั้นระบุ Keyword columns และตั้งชื่อ columns สำหรับ view ที่เราจะสร้างเช่น service_name ซึ่งใช้เก็บข้อมูลที่อยู่ใน path ดังนี้ ‘$.service.name’ เป็นต้น ซึ่งเมื่อรันคำสั่งดังกล่าวจะได้ view ดังรูป ในเรื่องของประสิทธิภาพพบว่าประมวลผลจำนวน 4000+ รายการใช้เวลาประมาณ 0.0008 วินาที ซึ่งถือว่ารวดเร็ว แต่ถ้าจำนวนข้อมูลมากขึ้น และประมวลผลช้าลงอาจปรับเป็น Materialize View หรือวิธีการอื่นๆ ที่ใช้ในการประมวลผลเฉพาะรายการที่เพิ่มใหม่ หรือประมวลผลตามรอบเวลา (ไม่เรียลไทม์) โดยใช้คำสั่งดังกล่าวช่วยก็ได้เช่นกัน หวังว่าจะเป็นประโยชน์สำหรับท่านที่มีโจทย์ประมาณนี้นะครับ

Flutter : ดึงข้อมูลจาก RESTFul API

May 30, 2021 00:26

สำหรับนักพัฒนาแอปพลิเคชันในตอนนี้ คงไม่มีใครไม่รู้จัก Flutter อย่างแน่นอนนะครับ ซึ่งตอนนี้ก็ออกเวอร์ชัน 2.2 มาแล้ว สำหรับผมเองที่เพิ่งเริ่มศึกษาก็ขอเริ่มด้วยการทดสอบดึงข้อมูลจาก API เป็นอย่างแรกนะครับ เพราะแอปพลิเคชันสำหรับใช้งานด้านต่างๆ ในองค์กรมักจะต้องใช้ข้อมูลจากฐานข้อมูล โดยการเชื่อมต่อผ่าน API เป็นหลักครับ ขั้นตอนการติดตั้งบน Windows และเตรียมเครื่องมือสามารถอ่านได้ที่ https://flutter.dev/docs/get-started/install/windows ในบทความนี้ผมใช้ Visual Studio Code นะครับโดยติดตั้ง Extention เพิ่มเติมดังนี้ เปิด Visual Studio Code คลิกเมนู View > Command Palette พิมพ์ “install”, จากนั้นเลือก Extensions: Install Extensions. พิมพ์ “flutter” เลือก install พิมพ์ “dart” เลือก install เมื่อติดตั้งเสร็จเรียบร้อยจะมีรายการ Extention ดังรูปครับ จากนั้นทำการสร้างโปรเจค ดังนี้ครับ คลิกเมนู View > Command Palette พิมพ์ “flutter”, จากนั้นเลือก Flutter:New Application Project จะได้โปรเจคที่มีโครงสร้างไฟล์ดังรูปครับ สำหรับท่านใดที่อยากเห็นหน้าตาแอปพลิเคชันเริ่มต้น ให้เปิด USB Debuging ที่มือถือให้เรียบร้อย ต่อเข้ากับคอมพิวเตอร์ จากนั้นที่มุมขวามือล่างของ Visual Studio Code ให้เลือกชื่อมือถือของท่าน จากนั้นกด F5 ได้เลยครับ ในการเชื่อมต่อกับ API เราจะต้อง import package เพิ่มโดยพิมพ์คำสั่งที่ terminal > cmd ดังรูปครับ จากนั้นแก้ไขในไฟล์ main.dart โดยเริ่มจากการ import ดังนี้ครับ ด้านล่างเป็น Code ที่เชื่อมต่อ API โดยใช้ http.get เพื่อดึงข้อมูลแบบ Get จากนั้นก็ return ค่า response โดยใช้ประเภท Future เทียบกับภาษาอื่นๆ ประเภทข้อมูลนี้ก็คือ CallBack นั้นเองครับ เอาไว้อ่านค่าที่ได้จาก api เมื่อได้ข้อมูลมาแล้ว (ในอนาคต ไม่รู้ตอนไหน เมื่อเสร็จจะบอก ประมาณนั้น) ซึ่งข้างในเป็นค่าประเภท dynamic ที่ได้จาก jsonDecode ตรงนี้เป็นการสร้าง Widget สำหรับแสดงข้อมูลเป็นแถวๆ ต่อไปก็จะเป็น Main Function ที่มีการประกาศ state เพื่อเก็บข้อมูลไว้แสดงผลในรูปแบบ ListView เมื่อได้ข้อมูลจาก API มาแล้วนะครับ เมื่อ Run ดูก็จะได้หน้าตาประมาณนี้ครับ เรียกได้ว่าสัมผัสแรกกับ Flutter รู้สึกประทับใจทั้งในด้าน Extension ที่มีใน Visual Studio Code ให้ความรู้สึกไม่ต่างจากการพัฒนาด้วย .Net Framwork เพราะสามารถ Debug ได้ มี Intellisense ครบถ้วน ในด้าน Syntax เนื่องจากเป็นภาษาใหม่ยังต้องทำความเข้าใจอีกพอสมควร ในด้านการออกแบบ UI สำหรับท่านใดที่เคยใช้ React Native มาน่าจะพอเข้าใจ Concept ของ View Widget (เทียบเท่า Component) ได้ไม่ยากนัก ถ้าหากได้นำมาใช้ในงาน Production จริงๆ แล้วจะนำประเด็นที่น่าสนใจอื่นๆมาแชร์กันเพิ่มเติมครับ อ้างอิง https://flutter.dev/docs/get-started/codelab https://flutter.dev/docs/cookbook/networking/fetch-data

ตรวจสอบ Battery ด้วยคำสั่งเดียว (Windows OS)

May 26, 2021 21:25

เคยมั้ยครับอยากรู้ว่า Battery ของ Notebook ที่เราใช้งานอยู่ Design Capacity จากโรงงานเท่าไหร่ Full Charge Capacity ตอนนี้เหลือเท่าไหร่ ปกติก็ต้องหาโหลดโปรแกรม ติดตั้งและค่าที่ได้ออกมาบางทีก็ไม่ครบถ้วน เสี่ยงต่อมัลแวร์ ต้องเลือกแหล่งที่มาดีๆ สำหรับท่านที่ใช้งานระบบปฏิบัติการ Windows นั้น มีเครื่องมือที่ชื่อว่า powercfg ติดมาอยู่แล้วนะครับ จริงๆความสามารถของมันที่เกี่ยวกับการจัดการพลังงานของเครื่องมีเยอะมากครับ สามารถใช้คำสั่ง powercfg /? เพื่อเรียกดูความสามารถอื่นๆได้ โดยในบทความนี้ผมจะแนะนำวิธีการออก Battery report เพื่อตรวจสอบ Battery ของเราครับ เปิด cmd ขึ้นมา (พิมพ์ค้นหาว่า cmd ) พิมพ์คำสั่ง powercfg /batteryreport /output “c:\battery-report.html” เสร็จเรียบร้อยครับเราก็จะได้ไฟล์ battery-report.html อยู่ที่ c:\ สามารถเปลี่ยนชื่อไฟล์ หรือที่จัดเก็บได้ ไฟล์ดังกล่าวสามารถเปิดดูด้วย Browser ได้ทุกตัวครับ โดยในไฟล์ดังกล่าวจะประกอบไปด้วย