วิธีใช้งาน 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 แบบเดิมได้แล้วครับ

หนังสือแนะนำเกี่ยวกับงานด้าน DevOps

เมื่อไม่นานมานี้มีประชุมกับหัวหน้าเรื่องการตั้ง Goal การพัฒนาตนเองในเวลาว่างที่ทำงาน ส่วนตัวมีโปรเจคที่คิดว่าต้องศึกษาคือเรื่อง Docker ตามโพสต์ก่อนหน้า

ซึ่งหัวหน้าผมเป็นคนที่อ่านหนังสือค่อนข้างเยอะ (มาก) และได้รับคำแนะนำดีๆจากการคุยในครั้งนั้น โดยหัวหน้าผมได้เคยอ่านหนังสือเล่มหนึ่งที่เกี่ยวกับเรื่องแนวๆ DevOps และบอกเป็นหนังสือที่ทำให้เข้าใจความสำคัญของ DevOps มากขึ้น โดยหนังสือจะเป็นลักษณะนิยาย IT คือ The Phoenix Project

The Phoenix Project
Credit: Amazon

ผมเลยได้ค้นหาดูได้พบกับหนังสือเล่มนี้บน Amazon ครับ และได้พบกับ Review คร่าวๆของหนังสือเล่มนี้ว่าดีมากเช่นกัน

คงต้องรีบอ่านแล้วล่ะ !

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