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 … Read more

django – as a Dialogflow Webhook #03

บทความนี้ จะกล่าวถึง การใช้ django ทำหน้าที่เป็น Webhook จาก Dialogflow ผ่าน Fulfillment ทาง HTTP Post Request ด้วย JSON object และ ทำการประมวลผล แล้วตอบกลับไปเป็น JSON Object เช่นกัน เพื่อให้ Dialogflow ตอบสนองต่อผู้ใช้ได้ตามต้องการ เช่น อาจจะให้ไปค้นข้อมูลจากฐานข้อมูลในองค์กรมาตอบ เป็นต้น ในมุมของ django django (ดี)จังโก้ ดีอย่างไร #01 ได้กล่าวถึงการสร้าง Web Application จาก Model โดยกำหนด Fields ต่าง ๆ จากนั้น django ก็จะสร้าง Web Form ต่าง ๆ ให้อัตโนมัติ และยังสามารถสร้าง Users ของระบบ พร้อมทั้ง กำหนดสิทธิ์การเข้าถึงของแต่ละคนได้อีกด้วย … Read more

django – Deploy to Production #02

ต่อจาก django #01 Development Environment เริ่มจาก ไปที่ command prompt แล้วใช้คำสั่งต่อไปนี้ เพื่อ เก็บรายละเอียดของ Package และ Version ที่ใช้ในการพัฒนา ไว้ในไฟล์ myenv.txt และ เก็บไฟล์ myproject ทั้งหมดไว้ในไฟล์ myproject.tar.gz (บน Windows อาจจะใช้ 7zip สร้าง) แล้ว Upload ไฟล์ myenv.txt และ myproject.tar.gz ขึ้นบน Projection Server Production Server ในที่นี้ ลองไปใช้ Google Compute Engine สร้าง Instance ขึ้นมา เป็น Ubuntu 18.04 และ ได้ Upload ไฟล์ myenv.txt … Read more

django (ดี)จังโก้ ดีอย่างไร #01

ขอไม่ลงรายละเอียดว่า อะไรคือ Web Framework, MVC, MVT พวกนั้นนะครับ อ่านเองที่ https://www.djangoproject.com/ และ เขียนวิธีติดตั้งบน Windows ไว้คร่าว ๆ ที่ ขั้นตอนการติดตั้ง django บน Windows และในที่นี้ใช้ Visual Studio Code เป็น Editor (สั่งด้วยคำสั่ง code …) โจทย์ สมมุติในทีม มีคน 10 คน ต้องการ ระบบบันทึกการปฏิบัติงาน จัดเก็บข้อูล วันเวลาของงานที่ทำ, ประเภทของงงาน (ตาม TOR), รายละเอียดของงานที่ทำ, ระยะเวลาที่ใช้ไป (ชั่วโมง) แต่ละคน ต้อง Login เข้ามาก่อน จึงจะบันทึกปฏิบัติงานได้ วิถีแบบ django สร้าง project ชื่อ myproject django-admin startproject myproject สร้าง … Read more

Stencil : Web component compiler

Stencil เป็น compiler ที่ทำหน้าที่สร้าง standards-based web component (custom element) ซึ่งรวบรวมแนวคิดที่ดีของ framework ต่างๆที่ได้รับความนิยมสูง มาไว้ใน component โดย build-time tool ที่ใช้งานง่าย เช่น Virtual DOM Async rendering (inspired by React Fiber) Reactive data-binding TypeScript JSX web component ที่ได้จาก Stencil เป็น standards-based web component ทำให้สามารถใช้งานร่วมกับ framework ต่างๆที่ได้รับความนิยม และสามารถใช้ได้โดยไม่มี framework ก็ได้ จากเดิมเมื่อพัฒนาด้วย framework หนึ่งแล้ว ไม่สามารถนำไปใช้ร่วมกับ framework อื่นได้ Stencil มี APIs เช่น … Read more