ทดลองเขียน Next.js ดูเล่นๆ

วันนี้ได้ทดลองเล่น Next.js ดู รู้สึกว่าสนุก! ถึงแม้ว่ายังไม่ได้ลองอะไรลึกๆ แต่มีความรู้สึกว่า Next.js มีการวางโครงสร้างไว้ให้ใช้งานง่ายๆ ยกตัวอย่างเหมือนการเขียน PHP แค่วางไฟล์ลงในโฟลเดอร์ /pages โครงสร้างของไฟล์และโฟลเดอร์จะสะท้อนถึง url โดยไม่ต้องมากำหนด routes … ฟังดูอาจจะงง ยกตัวอย่างเช่น

pages
|- index.js
|- about.js
|- blog
|- index.js
|- [slug].js

โดยสมมติ base url คือ https://keerati.co เราก็จะมี

  • https://keerati.co
  • https://keerati.co/about
  • https://keerati.co/blog
  • https://keerati.co/blog/node-js
  • https://keerati.co/blog/xxxx

ซึ่งเรา (แทบจะ) ไม่จำเป็นต้องมาเขียน routes อีกเลย ซึ่งส่วนตัวคิดว่าสะดวกมากๆ แม้ว่าจะไม่ได้เจาะจงเพื่อจะใช้งาน SSR (Server-Side Rendering)

ต้องยอมรับว่าแรกๆที่เริ่มเขียน ReactJS ก็มีความปวดหัวปนมีความน่าเบื่อในการเขียน Router, Routing พอสมควร แต่ Next.js ทำให้รู้สึกสนุกได้มากขึ้น

ตอนนี้ต้องยอมรับว่ายังไม่ทราบถึงข้อดีและข้อเสียทั้งหมดของ Next.js เพราะเพิ่งเริ่มศึกษา แต่หวังว่าน่าจะสนุกกับมันได้สิน่า

เชื่อมต่อกับ Omise อย่างง่ายๆ ด้วย Node.js

นานๆ จะกลับมาอัพเดท blog สักที เมื่อวันที่ผ่านมาได้มีโอกาสนั่งเขียนโค้ดเพื่อเป็นตัวอย่างในการเชื่อมต่อกับ Omise Payment Gateway อย่างง่ายๆด้วย node.js (express.js) โดยในโค้ดก็จะครอบคลุมการสร้าง Charge อย่างง่ายๆ ไม่ว่าจะเป็น Credit / Debit card และ Internet Banking รวมไปถึงการรับ WebHooks ด้วย

นานๆ จะกลับมาอัพเดท blog สักที เมื่อวันที่ผ่านมาได้มีโอกาสนั่งเขียนโค้ดเพื่อเป็นตัวอย่างในการเชื่อมต่อกับ Omise Payment Gateway อย่างง่ายๆด้วย node.js (express.js) โดยในโค้ดก็จะครอบคลุมการสร้าง Charge อย่างง่ายๆ ไม่ว่าจะเป็น Credit / Debit card และ Internet Banking รวมไปถึงการรับ WebHooks ด้วย

โดยจะประกอบไปด้วย

1) ฟอร์มสำหรับบัตรเครดิต/เดบิต โดยมีความปลอดภัยซึ่งทางผู้พัฒนาเว็บไซต์เองจะต้องไม่ส่งข้อมูลของบัตรเข้าเซิร์ฟเวอร์ของตนเอง และจะทำการสร้าง Token เพื่อนำไปสร้าง Charge เท่านั้น

2) การสร้าง Charge นั้นรองรับ 3-D secure หรือการกรอก OTP ซึ่งจะมีการ redirect ไปยังเว็บไซต์ของทางธนาคาร (ถ้าใช้ Live keys)

3) มี code สำหรับการสร้าง Charge สำหรับ Internet Banking ด้วยนะ ส่วนอื่นๆ เช่น Alipay, Installment ก็ทำคล้ายๆกัน แค่เปลี่ยน parameter เท่านั้น

4) มีตัวอย่างสำหรับหน้า return_uri หรือหน้าที่แสดงผลการชำระเงิน บางที่เรียก Thank you page ก็ว่ากันไปครับ

5) มีตัวอย่างสำหรับการรับข้อมูลจาก WebHooks ด้วยครับ แต่ก็ต้องไปพัฒนาต่อกันเองนะครับ ว่าจะมี logic ในการเอาไปประมวลผลอะไรต่อ

โดยในอนาคตอาจจะทำวีดีโออธิบายให้ด้วย และจะเพิ่มภาษาอื่นๆ หรือ Payment method อื่นๆ เพื่อเป็นตัวอย่างแบบง่ายๆให้นำไปพัฒนาต่อกันเองได้ครับ

ว่าแล้วก็สามารถเข้าไปดูได้ใน GitHub ของผมเลยครับ https://github.com/keeratita/omise-integration-examples

ปล. ก่อนหน้านี้มีบทความเกี่ยวกับ ASP.NET เดี๋ยวไว้จะเอามารวมไว้ใน Git เดียวกันครับ ลองไปอ่านได้ที่ https://keerati.co/2018/07/07/asp-net-core-กับ-omise-dotnet/