Categories
Diary

เขียนโค้ดจาวาสคริปเพื่อเช็คว่าใช้งาน MetaMask อยู่หรือไม่

Web3 (ที่ไม่ใช่ Web 3.0 ตามที่คุณ Tim Berners-Lee กล่าวไว้) เป็นเว็บไซต์รูปแบบหนึ่งที่อยู่บนบล็อคเชนที่นำหลักการ Decentralization และหลักการ Token-based economics ตัวอย่างเช่นคริปโต โดย Web3 ที่พบได้ และบางคนก็ใช้ก็ตัวอย่างเช่น DeFi แบบ Pancakeswap หรืออื่น ๆ

อย่างไรก็ดี เวลาที่เปิดใช้งานเว็บแนวนี้เราก็ต้องเช็คก่อนครับว่ามีกระเป๋าตังคริปโต (ที่ได้ยินบ่อยก็เป็น MetaMask) หรือไม่ ถ้ามี เราก็เปิดให้เชื่อมกับกระเป๋าตังสำหรับใช้ทำธุรกรรม Smart Contract หรืออื่น ๆ ต่อได้เลย แต่ถ้าไม่มีก็ให้เว็บแจ้งว่าไม่มี

Categories
Diary

การเขียนโค้ดเพื่อใช้งาน GraphQL โดยไม่ใช้ไลบรารี

เวลาที่ส่งข้อมูลระหว่าง Client และ Server ผ่านทางจาวาสคริปโดยเรียกใช้งานผ่านทาง AJAX ปกติ เราจะส่งข้อมูลโดยวิธี POST ผ่านการพิมพ์โค้ดตามด้านล่างนี้ (ในตัวอย่างจะใช้ XMLHttpRequest แต่จะใช้ Fetch, Axios หรืออื่น ๆ ก็ได้ เพราะได้ผลเหมือนกัน)

Categories
Diary

วิธีการเลือก parent element ด้วย JavaScript

ปกติเวลาที่เราเลือก element ด้วยภาษาจาวาสคริป เราจะใช้คำสั่งที่รู้จักกันอย่าง

document.getElementById("id");
document.document.getElementsByClassName("class name");
document.document.getElementsByName("name");
document.document.getElementsByTagName("tag name");

หรือเลือก element โดยการใช้ CSS Selector ด้วยคำสั่งที่รู้จักอย่าง

document.querySelector("selector");
parent_element.querySelector("selector");
document.querySelectorAll("selector");
parent_element.querySelectorAll("selector");

คำสั่งเหล่านี้ะคืนค่า element ที่เราเลือกไว้ ไม่ว่าจะเป็น element เดียว หรือ element ทั้งหมดที่เราพบในหน้าเว็บเพจนั้น ๆ อย่างไรก็ดีเราต้องการเลือก parent element จาก element ที่อยู่ภายใน จุดนี้เราจะทำได้อย่างไร?

Categories
Diary

ใช้ HTTPOnly Cookies บน Node.js ด้วย Express สำหรับ Access Token

เดิมทีเวลาที่เราใช้งานเพื่อเข้าสู่ระบบ เราจะเขียนโค้ดเพื่อขอ Access Token จากเซิร์ฟเวอร์แล้วนำมาเก็บไว้บน Client เพื่อนำมาใช้งานระบบที่จำเป็น โดยในบทความบนเว็บที่เกี่ยวกับการทำระบบ Authentication โดยใช้ไลบรารี Apollo GraphQL นั้น เราจะเก็บข้อมูล Access Token ที่สร้างขึ้นไว้บน LocalStorage เพื่อนำมาใช้งานต่อครับ

อย่างไรก็ดี การเก็บข้อมูลไว้ในนี้ก็มีปัญหาเรื่องความปลอดภัย ในบทความนี้จะแนะนำวิธีการเก็บข้อมูล Access Token ที่ปลอดภัยกว่าการเก็บบน LocalStorage ครับ

Categories
Diary

Hello World ใน Python, JS และ C++

Hello World เป็นโปรแกรมที่เขียนขึ้นมาเพื่อแสดงผลหน้าจอว่า “Hello World” ซึ่งเป็นสิ่งที่พบได้ในทุกภาษา และมีไว้แสดงลักษณะการเขียนในภาษาเขียนโปรแกรมนั้น ๆ (Syntax) นอกเหนือจากนี้แล้วการเขียนโปรแกรมนี้ขึ้นมามีหน้าที่ทดสอบว่า เราติดตั้งแล้วสามารถใช้งานตัว Compiler หรือตัว Interpreter ว่าทำงานได้ปกติหรือไม่

ต่อมา เราเขียนทวิตหนึ่งไป แล้วแมสมาพอดี มีโควทหนึ่งในทวิตว่าสนใจที่จะเขียน Hello World เราเลยแสดงให้เห็นว่า การเขียนในภาษาไพทอน จาวาสคริป และ C++ เป็นอย่างไรครับ

Categories
Diary

การใช้ Spread Operator ในภาษาไพทอน

Spread Operator เป็นตัวช่วยให้เราเขียนโค้ดในภาษาจาวาสคริปได้สะดวกขึ้นหลังจากการเปิดให้ใช้ตั้งแต่ ES6 เป็นต้นมา สัญลักษณ์นี้อนุญาตให้เรากระจายข้อมูลใน Array, String, Object ออกมาเป็นตัวแปรเดี่ยว ๆ เพื่อนำไปใช้งานในฟังก์ชัน หรือนำไปใช้สร้าง Array, Object ใหม่ เป็นต้น ตามนิยามของ Mozilla Developer Network ได้ตามนี้

Spread syntax (...) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.นิยามของ Spread syntax จากเว็บ MDN

Categories
Diary

นำแอพที่ใช้ ElectronJS ไปใช้งานบน Surface Pro X

เขียนต่อจากโพสก่อนที่พูดถึงเรื่องแอพที่ใช้ คราวนี้มาพูดถึงการพอร์ตแอพเพื่อนำมาใช้งานบน Surface Pro X ครับ ซึ่งที่เคยทำแล้วทำได้ก็คือคอมไพล์โปรแกรมที่ใช้ไลบรารี Electron ที่อนุญาตให้เราเขียนเว็บแล้วเอามารันบน Desktop ได้เลย

แต่ทีนี้ปัญหาของโปรแกรมที่ให้ดาวน์โหลดก็คือ ตัวโปรแกรมรองรับสถาปัตยกรรม x86 ที่ใช้ 32-bit หรือ 64-bit แต่ไม่ได้เปิดให้ดาวน์โหลดใช้งานสำหรับ ARM64 ยกเว้นบางโปรแกรมตัวอย่างเช่น Visual Studio Code, MS Team เป็นต้น

Categories
Diary

1st customized Node-RED คือตัว Downloader

ต่อจากบทความก่อนหน้าที่พูดถึงการสร้าง Node ในโปรแกรม Node-RED ขึ้นมาใช้งานเอง ตอนนี้ได้เขียนขึ้นมาชิ้นแรกที่เปิดเป็น public บน GitHub แล้วฮะ คือตัวดาวน์โหลดไฟล์

ปกติแล้วเวลาที่เราจะดาวน์โหลดไฟล์อะไรก็ตามเราก็กดเปิด URL แล้วปล่อยให้เว็บเบราวเซอร์มันทำงานเองใช่ไหมครับ แล้วถ้าเป็น Node-RED เราจะใช้งานอย่างไร อันนี้เป็นตัวอย่างนึงของการสร้าง Node ขึ้นมาใช้เอง แล้วเราจะเขียนอย่างไรล่ะ

สำหรับคนที่ไม่อยากเขียนเอง ไปดาวน์โหลดไฟล์ได้ใน Github ของผมนะครับ

Categories
Diary

เทคนิคสร้าง Node เพื่อใช้งานกับ Node-RED ให้ทำตามที่เราต้องการ

Node-RED เป็นเครื่องมือที่ช่วยให้เราทำงานแบบ Flow-based programming ซึ่งเป็นอุปกรณ์ที่ช่วยให้นักพัฒนาโปรแกรมสามารถทำงานให้เครื่องมือ IoT (Internet of Things) ทำงานได้ตามที่เราต้องการได้ง่ายโดยทำผ่านเว็บเบราวเซอร์ ตัวอย่างของอุปกรณ์ที่จะมาพัฒนาที่มีชื่อก็ได้แก่ Raspberry Pi ที่วางขายมานานแล้ว จนตอนนี้ออกเป็นรุ่น Raspberry Pi 4 Model B ออกมาครับ เรามาเข้าเรื่องกันดีกว่า

ข้อดีของการใช้งานเครื่องมืออย่าง Node-RED เครื่องมือนี้คืออะไร ข้อดีเท่าที่ใช้มาแล้วคือใช้ง่าย แค่ลากลงมาบนหน้าจอแล้วตั้งค่านิดหน่อยก็ใช้ได้แล้ว แต่ปัญหาที่เราเจอจากการใช้งานคือ ตัวแพคเกจบางอย่างมันเก่าไปแล้ว อัพเดทล่าสุดก็ประมาณ 6 เดือนขึ้นไป จนถึง 2-3 ปีมาแล้ว แถมอีกอย่างตัวไลบรารีที่ใช้ (ตัวอย่างที่ใช้ก็เช่น Apollo Client ที่เชื่อมต่อเซิร์ฟเวอร์ผ่าน GraphQL) ในนั้นก็ล้าสมัยจนเกิดไป จุดนี้แหละคือปัญหาที่ทำให้เราต้องสร้าง Node เพื่อให้เราใช้งานได้ตามที่เราต้องการ

Categories
Diary

เทคนิคการนำโมเดล Tensorflow มารันบน Node.js โดยไม่ต้องใช้ tfjs-converter

ปกติเวลาเรามีข้อมูลที่ได้รับการเทรนเรียบร้อยแล้วทดสอบแล้วได้ผลที่แม่นยำตามที่เราต้องการ จากนั้นเรานำโมเดลที่ผ่านการเทรน และทดสอบแล้วมารันในโปรแกรมซึ่งส่วนใหญ่ก็จะเขียนในภาษาไพทอน แต่ทีนี้เราจะต้องดูปลายทางว่าเราจะนำข้อมูลที่เทรนมาทำงานบนเว็บเบราวเซอร์ มาไว้ในอุปกรณ์ IoT (Internet of Things) หรืออื่น ๆ

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

Allow All
Manage Consent Preferences Save