ลองเขียน Flutter เชื่อมต่อกับ Omise RESTful API เล่นๆ

ในช่วงเดือนที่ผ่านมามีคนคุยกันเรื่อง Flutter ค่อนข้างมาก ก็เลยถือเอาเวลาว่างเมื่อวานมาลองเขียน Flutter ดู โดยมีโจทย์คือเขียนเชื่อมต่อ RESTful API ของทาง Omise และต้องเขียน Test ได้

โดย API ที่ตั้งโจทย์ไว้คือ API ทางฝั่ง Client ที่ใช้งานแค่ public key คือ Token API, Source API และ Capability API

ในขั้นแรกก็เลยเข้าไปนั่งอ่านเอกสารของทาง Flutter ว่าจะต้องเริ่มเขียนยังไงดี และอยากจะเขียนเป็นในเชิง Library หรือ package เพื่ออัพโหลดขึ้นไปบนเว็บไซต์ที่รวม packages ต่างๆของทาง Flutter คือ https://pub.dev ก็เลยเจอเอกสารนี้ครับ https://flutter.dev/docs/development/packages-and-plugins/developing-packages

จากนั้นก็เลยลองนั่งเขียนไปเรื่อยก็พบว่าติดปัญหาในเรื่อง Syntax ของภาษา Dart (Flutter ใช้ภาษา Dart) เนื่องจากไม่เคยเขียนภาษา Dart มาก่อน และติดในเรื่องของการวาง Structure ใน Flutter ครับ เลยลองหา package ชาวบ้านบน pub.dev มาลองผสมดู 😂

สุดท้ายก็ได้มาแล้วครับเทสต์ผ่านด้วย เฮ~ โดยในการเทสต์ API ผมได้ลองทดสอบกับ public key บน Account ของผมเรียบร้อยแล้วว่าใช้งานได้ แล้วก็เลยเขียนเทสต์โดยทำการ Mock HTTP request เอาครับ

แน่นอนว่าอาจจะมี structure หรือ syntax บางอย่างที่อาจจะต้องปรับปรุง หากมีใครหลงเข้ามาดูก็ comment หรือแจ้งบอกใน GitHub ได้นะครับ จะได้ปรับปรุง code กันไป

GitHub: https://github.com/keeratita/omise_flutter
Pub : https://pub.dev/packages/omise_flutter

ทดลองเขียน 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/

ASP.NET Core กับ omise-dotnet

เกริ่นก่อนว่าได้เข้าไปลองดูตัวอย่างใน http://github.com/omise/examples ซึ่งในนั้นก็มีตัวอย่างสำหรับ ASP.NET เพียงแต่ว่าเป็นตัวอย่างที่รองรับการรันบน .NET Framework 4.5 (ละมั้งถ้าจำไม่ผิด) ซึ่งถ้าเอามาลองรันบน macOS แล้ว เหมือนจะรันได้ แต่พอ Submit ปุ๊ปก็จะ error เกี่ยวกับ System.Web.UI

ซึ่งเท่าที่ทดลองค้นหาข้อมูลใน Google ก็พบว่ามันไม่รองรับ Web Forms นั่นเอง (https://docs.microsoft.com/en-us/aspnet/core/fundamentals/choose-aspnet-framework?view=aspnetcore-2.1)

ก็เลยทดลองเขียนตัวอย่างสำหรับ ASP.NET Core เสียเลย โดยก็แค่แปลงๆจากตัวอย่าง Code ของทาง Omise แบบง่ายๆเท่านั้น ซึ่งพอทดลองใช้แล้วก็ปรากฏว่าใช้งานได้ (ตอนแรก Submit ข้อมูลไม่ผ่าน เลยต้องไปหาว่า Razor ในสมัยนี้มันเขียนยังไงกันแน่)

ไม่ต้องพูดพร่ำทำเพลง ลองไปดาวน์โหลดมาทดสอบใช้งานกันได้ที่ GitHub ผมเลยคร้าบ

Omise Payment Flow สำหรับ 3-D Secure

Omise Payment Method

ก่อนที่จะอธิบาย Omise Payment Flow ขออนุญาตอธิบายถึงวิธีการสร้าง Charge หรือการชำระกับทาง Omise (อ่านว่า โอ-มิ-เซะ หลายคนอ่านกัน โอมิส 😂) ก่อน ซึ่งในตอนนี้มีหลายรูปแบบ โดยคร่าวๆที่ทราบตอนนี้คือมี

  1. Credit / Debit card ชำระผ่านบัตรเครดิต หรือบัตรเดบิต ซึ่งสามารถแยกได้อีก 2 รูปแบบย่อยคือ Non 3-D Secure (Non 3DS) กับ 3-D Secure (3DS)
    บางคนงงว่า 3DS มันคืออะไร ก็ลองอ่านจากบทความนี้ดูครับ
  2. Internet Banking ชำระผ่านอินเตอร์เน็ตแบงค์กิ้ง
  3. Alipay (Online) ชำระผ่านอาลีเพย์แบบออนไลน์
  4. Bill Payment (Tesco Lotus) ชำระด้วยบาร์โค้ดที่เทสโก้โลตัส (ในบทความนี้จะไม่พูดถึงเรื่อง Bill Payment)

Continue reading “Omise Payment Flow สำหรับ 3-D Secure”

omise-react-native 0.0.4 มาแล้วว

ก่อนหน้านี้ผมได้สร้าง package สำหรับคนที่ต้องการใช้งาน Omise ด้วย react-native โดยสามารถสร้าง Token ได้

ที่ผ่านมาทาง Omise ได้มี API ใหม่ที่ชื่อว่า Source API (สำหรับ API version 2017-11-02 ขึ้นไป) ซึ่งเจ้า Source API นี้มันทำตัวคล้ายๆกับ Token แต่ไม่ได้สร้างขึ้นจากข้อมูลบัตรเครดิต แต่สร้างขึ้นเพื่อสำหรับชำระด้วยวิธีอื่นๆที่ไม่ใช่บัตรเครดิต เช่น Internet Banking, Alipay หรือ Bill Payment เป็นต้น ซึ่งตอนนี้ผมทำให้รองรับการสร้าง Source จาก Source API ของ Omise ได้เรียบร้อยครับ

Continue reading “omise-react-native 0.0.4 มาแล้วว”

วิธีใช้งาน Omise.js ใน Vue.js และ React.js แบบง่ายๆ

เล่าประวัติกันเล็กน้อย

เป็นโปรเจคเก่าๆที่ทำไว้เล่นๆ เพราะว่ามีคนถามค่อนข้างเยอะว่าเอ๊ะ ทำไมใช้ Omise.js กับ JavaScript Framework อื่นๆไม่ได้ เช่น Vue.js หรือ React.js เป็นต้น

โดยเอาจริงๆแล้วมันใช้งานได้นะครับ 😅 แต่ว่าพักหลังๆ โปรแกรมเมอร์จะติดกับการใช้งานพวก JavaScript Package Manager เช่น npm, yarn หรือ bower กันซะเยอะ จนลืมไปว่าจริงๆแล้ว JavaScript มันทำงานกันอย่างไร

ขอออกตัวก่อนว่าก็ไม่ได้รู้ลึกอะไรขนาดนั้นนะครับ เนื่องจากห่างหายจากการเป็นโปรแกรมเมอร์มานานหลายปีมากๆ แต่ก็ยังชอบเขียนโปรแกรมหรือศึกษาเล่นๆเป็นงานอดิเรกอยู่ ซึ่งช่วงที่เป็นโปรแกรมเมอร์นั้นก็ได้ใช้งาน JavaScript มาบ้างครับ

อธิบายการทำงานคร่าวๆ

ทุกวันนี้การเขียนพวก event ต่างๆใน JavaScript มันเป็นเรื่องที่ง่ายขึ้นมาก โดยไม่ต้องไปสนใจว่าเขียนแบบนี้นะ จะใช้งานบน Browser นี้ได้ แต่จะใช้งานบน Browser นี้ไม่ได้ ต้องแก้ด้วยวิธีนี้ร้อยแปดพันเก้า เพราะตัว JavaScript Framework มันจัดการให้หมด ซึ่งชีวิตมันเริ่มสบายตั้งแต่มี jQuery เข้ามา

ซึ่งเวลาเขียนมันง่ายมากเนอะ สมมติเรื่องตอนที่เว็บมัน onload ก็แค่นี้เอง

$(document).ready(function() {
    // code here
});

หรือ

$(window).on("load", function() {
    // code here
});

อ่านเพิ่มเติม jQuery | $(document).ready()
แต่บอกเลยว่าถ้าก่อนยุคนั้น (ซึ่งผมอยู่ในยุคเก่าๆนั้นแหละ 😂) มันเขียนเยอะมากครับ เช่น

The Javascript Anthology

อันนี้ต้องบอกว่าผมเอามาจากหนังสือ Textbook เก่าๆของผมเองชื่อ The Javascript Anthology แต่คงไม่มีใครใช้แล้วละมั้ง 🤪

สังเกตุว่ามันจะมีวิธีการเขียนที่เยอะกว่าเนอะ เพราะต้องตรวจเรื่อง Object ของแต่ละ browser ที่ support แตกต่างกันด้วย

แต่เอาจริงๆถ้าจะศึกษาพวกนี้ ก็ไปแกะ Source Code ของพวก jQuery หรือ JavaScript Framework อื่นๆกันดูก็ได้ครับ เพราะเขาก็ Open Source กันหมด แต่ส่วนใหญ่จะขี้เกียจกันใช่ไหมล่ะ!!? (แทงใจไหม)

แนะนำให้ลองเข้าไปศึกษาบ้างนะครับ หากใช้งานกันจริงๆเนอะ เพราะเวลาที่จะเอาแต่สะดวกกันจริงๆ จะมีปัญหากับงานหรือโปรเจคที่ต้องลงถึงพวก Fundamental 😘

เอาล่ะหยุดบ่น (ทำอย่างกะตัวเองเก่ง Fundamental 😂) จริงๆผมก็ไม่ได้เก่งครับ มั่วๆซะส่วนใหญ่ คนที่รู้จักผมก็จะรู้ดี พูดเท่ๆไปงั้น 555

อะเข้าเรื่องครับ

การใช้งานตัว Omise.js นั้นตามเอกสารที่ทาง Omise เขาเขียนเอาไว้ก็ค่อนข้าง(โคตร)ชัดเจนว่าให้ใช้ tag script เพื่อเรียกใช้งาน JavaScript Library โดยตรงจาก CDN ของเขาเลย

<script src="https://cdn.omise.co/omise.js.gz"></script>

ไปอ่านเพิ่มเติมเองจาก link ข้างล่างครับ

มาถึงแค่ส่วนเริ่มต้นนี้หลายคนที่ไม่เคยมาเขียนอะไรแบบนี้เองก็งงแล้ว หากใครงงแนะนำว่าศึกษาการเขียน html ขั้นพื้นฐานก่อนเลยนะครับแล้วค่อยไปต่อ

เอาล่ะหลังจากที่เขียนเรียก Omise.js แล้วหลายคนก็เริ่มติดว่า แล้วจะเรียกใช้งาน Omise.js ยังไง key ของส่วนนี้ก็ Fundamental อีกแล้วอะ ถ้าใครใช้งานไม่เป็นแสดงว่าอาจจะยังไม่เข้าใจเรื่อง Global Scope และ Local Scope ของ JavaScript ครับผม

แนะนำให้อ่านเพิ่มเติมตามนี้ครับ

และแน่นอนครับทุกคนสามารถทดสอบ debug ได้เองจาก browser ที่ท่านๆใช้งาน (โปรแกรมเมอร์ที่ไม่รู้เรื่องนี้บาปมาก) โดยลองพิมพ์

console.log(Omise);

และ

console.log(window.Omise);

โดยสังเกตุว่าก็จะพบ Omise ทั้งคู่ ซึ่งหากใน JavaScript Framework ของท่านไม่เจอในวิธีแรก ท่านก็เรียกด้วยวิธีที่ 2 ได้ครับ คือไปเรียกจาก Global scope นั่นเอง ง่ายมั๊ย 😂

วิธีนี้ใช้ได้กับทุก JavaScript Framework นะครับผม ไม่ว่าจะเป็น Vue.js React.js หรือจะเป็นตัวอื่นๆเช่น Angular.js

หากขี้เกียจอ่านบทความนี้ลองดู Video ที่อัดทิ้งไว้นะครับ และก็ดูให้ครบทุกวินาทีนะครับ มันแค่ 3 นาทียัง skip อีกผมก็คิดว่าท่านควรพิจารณาตัวเองแล้วครับ ผมก็ไม่ทราบจะช่วยยังไงละ 😂

Omise.js กับ Vue.js

Youtube: https://www.youtube.com/watch?v=_aUJjTFw4vU

Omise.js กับ React.Js

Youtube: https://www.youtube.com/watch?v=_OpEi5eXKE8

Expo กับ `OnActivityResult` Event

เมื่อไม่นานมานี้ได้ทดลองเขียน App บนมือถือโดยใช้ Expo ในการพัฒนา

ก่อนอื่นก็เกริ่นก่อนว่า Expo จริงๆแล้วก็คือ React-Native นั่นแหละ แต่เพียง Expo เป็น SDK ตัวหนึ่งที่ bundle library ต่างๆที่ทำให้เราไม่จำเป็นต้องไปโหลด dependency อื่นๆ หรือต้องมานั่งเขียน bridge ระหว่างตัว javascript กับ Android Native หรือ iOS Native (เอาจริงๆก็มีบ้างที่ต้องทำแบบนั้น)

ในกรณีที่ผมเขียนนั้นตัว Expo SDK เอง ไม่มี library ที่ตัวผมเองต้องการ จึงต้องทำการ detach project เพื่อเขียน bridge ระหว่างตัว Android Native กับ Expo

โดยปกติแล้วหากเขียน Component เพื่อดำเนินการ Login กับ 3rd Party ข้างนอกใน Android Native เพื่อให้ React-native สามารถใช้งานได้ ในตัว Component ก็ต้องมี method เพื่อรับสถานะการ Login หลังจากมีการ Login เสร็จสมบูรณ์นั้นก็คือ OnActivityResult นั่นเอง

แต่ปัญหาที่พบคือเจ้า Expo เนี่ยมันไม่ยิง Event เข้าตัวนี้เลยนี่สิ… งานเข้าแล้วเลยทำการ Debug Project ไปเรื่อยๆ จนได้เจอตัวนี้ `host.exp.exponent.ActivityResultListener`

วิธีการเขียนก็ง่ายๆครับ

private final host.exp.exponent.ActivityResultListener mActivityEventListener = new host.exp.exponent.ActivityResultListener() {
    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
          // some code here
     }
};

จากนั้นก็ Register เข้า constructor เป็นอันเสร็จสิ้น

public class Sample extends ReactContextBaseJavaModule {

    private final host.exp.exponent.ActivityResultListener mActivityEventListener = new host.exp.exponent.ActivityResultListener() {
        @Override
        public void onActivityResult(int requestCode, int resultCode, Intent data) {
          // some code here
        }
    };
    public Sample(ReactApplicationContext reactContext) {
        super(reactContext);
        Exponent.getInstance().addActivityResultListener(mActivityEventListener);
    }
}

แค่นี้ก็สามารถใช้งาน OnActivitiyResult แบบเดิมได้แล้วครับ

Docker – อีกหนึ่งชื่อที่เข้ามาในชีวิต

ตอนนี้มีอีกหนึ่ง technology ที่เข้ามาในชีวิตแบบเต็มๆ (แม้ว่าเมื่อก่อนจะเคยใช้แบบผ่านๆ) คือ Docker นั่นเอง จริงๆแล้วจะไม่ใช่แค่ Docker แต่จะมี Kubernetes และ Jenkins ด้วย แต่หลักๆที่ต้องเรียนรู้คือ Docker

เนื่องจากการเขียน Deploy code บนเครื่อง Development หรือ Production ก็ดี จำเป็นที่จะต้องเขียน Dockerfile ได้ และจัดเตรียม Environment ที่จะให้ code ของเราสามารถติดตั้งและรัน code ได้อย่างสมบูรณ์ภายใน Docker

ถึงแม้จะเคยเขียนแบบผ่านๆมาบ้าง แต่ครั้งนี้ต้องบอกว่าเข้าขั้น advance มากขึ้นเพราะต้องตีโจทย์การ Deploy ให้ดี เนื่องด้วยทรัพยากรบางส่วนก็มีจำกัด จึงอาจจะต้องเซ็ทค่า Docker ให้สามารถรันได้หลายภาษาใน Docker เดียว (ซึ่งปกติจะเขียนโดยใช้ image เฉพาะทางแยกไปแต่ละภาษา)

จริงๆแบบนี้เขาทำกันหรือเปล่าหนอ แต่ก็ต้องลองดูล่ะ 🤪🤪

deploy เว็บไซต์ที่เขียนด้วย Nodejs ง่ายๆ โดยใช้ PM2

เพิ่งกลับมาทดสอบเริ่มเขียน Node.js อีกครั้ง ที่ปกติแล้วที่บริษัทจะมีทีม DevOps ซึ่งเขาใช้ Jenkins เพื่อ build docker และ deploy image ที่ผ่านการทดสอบแล้วขึ้น production โดยอัตโนมัติเพียงแค่ push code ขึ้น git เท่านั้น

แต่เนื่องด้วยว่าถ้าเขียน project เอง และค่อนข้างโง่เรื่อง Jenkins (ทำไม่เป็นอะ 😂😂😂😂) เลยได้มาใช้ PM2

เกริ่นก่อนว่าเคยได้รู้จัก PM2 คร่าวๆมาแล้วเมื่อ 2 ปีก่อน โดยไม่ได้ทำอะไรกับมันจริงจัง เพียงแค่รู้ว่ามันช่วย restart process ให้อัตโนมัตหาก script ที่เขียนมัน throw error และ process ตาย จนกระทั่งไปอ่านเว็บไซต์ของ PM2 และได้เจอหัวข้อ Deployment

สิ่งแรกง่ายๆเลยที่ต้องมีคือ

  1. ลง PM2 บนเครื่องของตัวเอง
  2. ลง PM2 บนเครื่องของ Server
  3. มี Git ที่ไหนสักที่ 😂 ส่วนตัวใช้ Private Git ของ Microsoft คือ Visualstudio.com
  4. สามารถ ssh remote โดยใช้ SSH Key-based authentication จากเครื่องของตัวเองไปยัง Server ได้ (วิธีตั้งค่าอ่านเจอที่นี่)
  5. เช่นกัน Server สามารถ clone git จาก Git Server โดยใช้ SSH Key-based authentication ได้
  6. แน่นอนทั้งบนเครื่องตัวเองและ Server อย่าลืมสร้าง SSH config เพื่อให้ชีวิตง่ายขึ้นใน ~/.ssh/config

    ส่วนนี้สำหรับบน macOS

    Host *
        UseKeychain yes
        AddKeysToAgent yes
        IdentityFile ~/.ssh/id_rsa
    

    ส่วนนี้สำหรับบน Linux

    Host *
        IdentityFile ~/.ssh/id_rsa
    

    หากใครอยากตั้งค่า advance กว่านั้นก็สามารถทำได้ครับ อันนี้แบบ simple

  7. จากนั้นก็ทำตามเอกสารของ PM2 ได้เลย~

พอติดตั้งทุกอย่างเสร็จสิ้น หลังจากที่แก้ไข code และ push ขึ้น git แล้วก็แค่พิมพ์

pm2 deploy production update

หากต้อง revert ก็พิมพ์

# Revert to -1 deployment
$ pm2 deploy production revert 1