ย้อนรอย GDG DevFest: ประสบการณ์การพัฒนา Mobile Banking ด้วย Flutter

Flutter Framework

ย้อนกลับเมื่อวันที่ 10 ตุลาคม ปี 2563 ทาง Google Thailand ได้มีการจัดงาน GDG DevFest Bangkok 2020 ขึ้นที่โรงแรม Carlton Hotel Bangkok Sukhumvit ปกติแล้ว KBTG มักจะสปอนเซอร์งานสำหรับผู้พัฒนาอื่นๆ อยู่เสมอ ครั้งนี้ก็เช่นกันครับ เราได้มีโอกาสเข้าไปแบ่งปันความรู้จากการทำงานฝั่ง Banking ที่มีความเข้มงวดด้าน Security สูงเป็นพิเศษ โดยมีตัวแทนจาก KBTG ขึ้นไปพูดด้วยกัน 2 คน คนแรกคือคุณต่อ ทัศพล (Tassapol A.) ที่นำความรู้จากการทำงานบริษัท Silicon Valley มาหลายที่ เช่น Apple, Apache, VMware มาแชร์ให้ฟังว่าเป็นอย่างไร รวมถึงการนำกระบวนการทำงานสเกลระดับโลกมาประยุกต์ใช้ใน KBTG ส่วนตัวแทนคนที่ 2 คือผมเองครับ ในฐานะหนึ่งในสมาชิกทีมนักพัฒนา MAKE by KBank แอป Mobile Banking ตัวใหม่ล่าสุดของ KBTG ผมได้หยิบประสบการณ์การใช้ Flutter พัฒนาแอปตัวนี้มาเล่าให้ผู้ร่วมงานฟัง ทั้งนี้ผมเชื่อว่ายังมีอีกหลายคนที่สนใจศึกษาเกี่ยวกับ Flutter แต่อาจจะไม่ได้เข้าร่วมงานดังกล่าว ผมจึงขอรวบรวมเนื้อหามาฝากกันอีกสักครั้งในบทความนี้ครับ

Native คืออะไร?

คือการพัฒนา Mobile Application ด้วยภาษาและเครื่องมือที่ทางเจ้าของ Mobile Device ได้จัดเตรียมไว้ให้ อย่างฝั่ง Apple ภาษาที่ใช้จะเป็น Swift หรือ Objective C ทำบนเครื่องมือที่ชื่อว่า Xcode ในขณะที่ฝั่ง Google จะใช้ภาษา Kotlin หรือ Java เครื่องมือที่ใช้ในการพัฒนาจะมีหลากหลายกว่า แต่ที่ Google แนะนำนั้นจะเป็น Android Studio

Flutter คืออะไร?

คือการพัฒนา Mobile Application ด้วย Framework ที่พัฒนาขึ้นโดย Google จุดเด่นคือการที่นักพัฒนาไม่จำเป็นต้องเขียนโค้ดแยกแพลตฟอร์ม เพียงเขียนโค้ดครั้งเดียวก็สามารถลงบน iOS และ Android ได้พร้อมกัน

Flutter สามารถใช้ทำได้หลายแพลตฟอร์ม ไม่ว่าจะเป็น iOS, Android, Mac App, Linux App, Windows App, Web และอื่นๆ อีกมากมาย โดยโค้ดกว่า 80% ที่เราเขียนจะสามารถลงทุกแพลตฟอร์มได้โดยตรง ทั้งนี้ที่ต้องระบุว่า 80% เพราะสุดท้ายเราต้องมาปรับการทำงานในหน้าต่างๆ ให้เหมาะสมกับแพลตฟอร์มนั้นๆ อยู่ดี ยกตัวอย่างเช่น Mac App จะไม่มีการเรียก GPS หรือขอ Location ดังนั้นเราจำเป็นต้องปรับโค้ดให้ตรงตามข้อกำหนดดังกล่าว

Background

สมัยที่ยังเป็น iOS Developer ผมเคยมีความคิดว่าเราเขียน Native ได้แล้ว ทำไมถึงจะต้องมาเขียน Cross Platform และไม่น่าจะมี Use Case ไหนที่เราจะได้ใช้จริงๆ

แต่แล้ววันหนึ่งผมได้รับมอบหมายโปรเจคใหม่ โดยทางทีม KBTG ต้องการนำ Flutter มาทดสอบว่าสามารถใช้งานได้จริงหรือไม่ มีติดขัดเรื่อง Technical ใดๆ ตรงไหน เป็นการสำรวจเทคโนโลยีใหม่ๆ ตามสไตล์องค์กรที่ไม่เคยหยุดเรียนรู้ ตอนที่จับ Flutter ครั้งแรก ส่วนตัวแอบ อคติว่าทำอะไรได้ไม่เยอะหรอก ถ้าทำได้ดีเหมือน Native จริงๆ ป่านนี้คงดังไปแล้ว แต่พอได้ลองจริงๆ ก็ทำให้เราได้เห็นโลกอีกมุมนึง กลายเป็นว่าผมชอบ Flutter พอๆ กับ Native เลยครับ

ไฟล์ Presentation ของผมจากงาน GDG DevFest Bangkok 2020 สำหรับคนที่สนใจอ่านประกอบครับ

MAKE by KBank with Flutter

MAKE by KBank เป็นแอป Mobile Banking ที่นอกจากจะนำเสนอความใหม่ในส่วนของฟีเจอร์แล้ว ยังใหม่ในด้านการพัฒนาอีกด้วย เพราะทำด้วย Flutter เกือบจะทั้งหมด โดยคิดเป็น 95% ของ UI/Business Logic และ Coding ส่วนอีก 5% ที่เหลือจะเป็น Native ที่เขียนด้วย Swift และ Kotlin ครับ

ทำไมต้องเขียน Native? ถ้าบอกว่า Flutter ทำงานได้หมด?

Flutter Framework หลักๆ จะใช้สำหรับทำงานด้าน UI เป็นหลัก ดังนั้นจะมีบางส่วนที่ Flutter ไม่เก่ง หรือยังไม่มีใครเขียนส่วนนี้ ผมก็จะนำ Logic ส่วนนั้นไปไว้บน Native แทน ซึ่งการเขียน Flutter ต่อกับ Native นั้นง่ายมากๆ ใช้เวลาไม่ถึง 1 ชั่วโมงก็สามารถเชื่อมต่อได้แล้วครับ

Why Flutter?

Flutter ถือกำเนิดขึ้นมาเพื่อแก้ Pain Point ที่ว่าทำไมเราต้องเขียนแอป 2 ตัวขึ้น ทั้งๆ ที่มีหน้าตาและ/หรือ Functionality ซ้ำกันกว่า 90% ทำไมต้องสร้างทีมขึ้นมาถึง 2 ทีม แถมแต่ละทีมมีการ Implement ไม่เหมือนกันอีก ทำให้เวลาเกิดบัค แต่ละทีมต้องแยกกันหาปัญหาของแพลตฟอร์มที่ตัวเองทำ ถ้าเราเขียนครั้งเดียวแล้วเสร็จเลยไม่ดีกว่าเหรอ แม้จะต้องมีแก้นิดหน่อย แต่ภาพรวมก็จะออกมาเหมือนๆ กัน ซึ่งส่วนนี้เองทำให้เกิดเทคโนโลยี Cross Platform ขึ้นมาครับ

แน่นอนว่าไม่ได้มีแค่ Flutter เท่านั้นที่สามารถทำสิ่งนี้ได้ ในท้องตลาดยังมีอีกหลากหลายเจ้า ไม่ว่าจะเป็น React Native, Xamarin, และอื่นๆ แต่ที่เราเลือก Flutter เนื่องด้วย 2 เหตุผลหลักๆ คือ

1. Performance ของ Flutter ที่เกือบเทียบเท่า Native เพราะสุดท้าย Flutter จะถูก Compile ออกมาเป็น Native Code เพื่อให้ Apple และ Android Device เรียกใช้งาน ซึ่งจะมี Framework ที่จะทำได้เหมือน Flutter ก็คือ Xamarin
2. ความนิยมและความเป็นไปได้ของตลาด ล่าสุดเทรนด์ความนิยมของ Flutter นำหน้า React Native เป็นที่เรียบร้อย ถึงเรื่อง Library ต่างๆ จะยังแพ้อยู่มาก แต่ถ้ามองอนาคตแล้ว Flutter ยังโตไปได้อีกครับ

ด้วยเหตุผลข้างต้น โดยเฉพาะอย่างยิ่งเรื่อง Performance ทำให้เราตัดสินใจเลือก Flutter ซึ่งจากประสบการณในอดีต เราจะเห็นได้ว่าตลาดต้องการของที่ Performance ที่ดีมากกว่าการมีฟีเจอร์ที่ดี

Should I use Flutter?

ใครฟังแล้วรู้สึกโอววว… Flutter ต้องรีบใช้แล้ว ช้าก่อนครับ ต้องบอกไว้ก่อนว่า Flutter ไม่สามารถทำได้ทุกอย่างนะครับ แต่ผมขออธิบาย 5 ข้อที่ผมคิดว่าเป็นจุดสำคัญของการเลือกใช้ tools

1. Fast and Responsive

Flutter จะเป็นตัวเลือกที่เหมาะถ้าต้องการใช้แอปที่เน้นความ Responsive เป็นหลัก แต่ถ้าทำแอปภายในองค์กรหรือสำหรับกลุ่มคนเล็กๆ ที่ใช้เฉพาะทางและอยากลดต้นทุนให้มากที่สุด ไม่ได้สนใจเรื่อง Performance เท่าไรนัก ควรมองตัวเลือกอื่นๆ ที่พัฒนาได้ง่ายกว่า เช่น React Native เป็นต้น

2. Supported OS

โดยปกติแล้ว Cross Platform คนจะเลือกทำ iOS/Android เป็นหลัก Flutter จะตอบโจทย์ส่วนนี้ แต่หากคุณต้องการทำลงแพลตฟอร์มอื่นๆ แล้วต้องการความเร็วในการซัพพอร์ต ยกตัวอย่างเช่น สมมุติ Business Model ของคุณชอบเล่น OS ใหม่ๆ ตั้งแต่ Day 1 ชนิดที่ว่าถ้า iOS มีฟีเจอร์ใหม่ออกมาเมื่อไหร่ แอปผมต้องมีเมื่อนั้น ก็จะไม่เหมาะกับ Flutter เพราะอย่างตอนที่ iOS 14 ออกมา Flutter ก็ยังไม่สามารถใช้งานร่วมได้ ต้องรอประมาณ 2 อาทิตย์จน Flutter ออกตัวใหม่มา ดังนั้นคุณต้องรอได้ไม่รีบ หรือถ้ามองว่าแอปที่ทำมีแผนจะขยายไป Apple TV หรือ OS ตัวใหม่ๆ ก็ต้องข้าม Flutter ไป คือต้องมีเป้าหมายชัดเจนแล้วว่าจะลงแพลตฟอร์มไหนบ้าง หากมาเพิ่มทีหลังจะลำบากครับ

3. 3rd Party Tools

โดยปกติการทำ Mobile App เราจะมีการเชื่อมต่อกับ 3rd Party ต่างๆ ซึ่งถ้าแอปเราพึ่งพา 3rd Party ค่อนข้างสูง ก็จะลำบากขึ้น เพราะทางนั้นไม่ได้ทำ Flutter SDK มาให้ ส่วนใหญ่จะทำของ Native SDK เป็นหลัก และอาจทำของพวก Cross Platform บ้าง แต่ก็จะเห็นว่า Cross Platform ในปัจจุบันเน้น React Native มากกว่า Flutter ทั้งนี้ในความโชคร้ายก็แฝงความโชคดี เพราะเครื่องมือที่สำคัญที่สุดสำหรับการพัฒนา Mobile นั้นอยู่ในมือของ Google ซึ่งก็คือ Firebase ที่รองรับ Flutter แบบเต็มรูปแบบนั่นเอง

แต่ใช่ว่าใช้ 3rd Party เยอะๆ แล้วจะห้ามใช้ Flutter นะครับ ยังสามารถทำได้อยู่ด้วยการใช้ Bridge to Native เพียงแค่จะมีความลำบากมากกว่าเท่านั้น

Writing custom platform-specific code

4. Testing & CI/CD

เรื่อง Testing, CI/CD สำคัญมากๆ สำหรับแอประดับใหญ่ เพราะเราต้องมั่นใจว่าฟีเจอร์ที่เพิ่มขึ้นและฟีเจอร์ที่ทำอยู่สามารถใช้งานด้วยกันได้ ถ้าจะให้เราทำ Manual Testing ตลอดเวลาคงไม่ไหว งานใหม่ก็มา งานเก่าก็ไม่อยากให้กระทบ ทำให้ผมมองว่าเบสิคส่วนนี้เป็นสิ่งที่ขาดไม่ได้ Flutter CI/CD ก็คือการทำ CI/CD สำหรับ iOS/Android นั่นเอง ก่อนจะ Deploy ได้ ก็ต้องผ่านการ Build เป็น iOS/Android ก่อนครับ

ส่วนการ Testing จะแบ่งออกเป็น 3 ส่วนด้วยกัน คือ

1. Unit Testing สามารถทำงานได้ปกติเหมือน Unit Test ภาษาอื่นๆ ตรงนี้ไม่มีติดประเด็นอะไร
2. Golden Testing ด้วยความที่ Flutter เป็นแอปแบบ Component Based ดังนั้นเราจะมี Widget หรือตัว View ค่อนข้างเยอะ ซึ่ง Widget เหล่านี้จะมารวมกันเป็น View หนึ่งหน้า ถ้าเราอยากมั่นใจว่า Widget ที่เราแชร์ไปเยอะๆ นั้น ไม่ได้โดนคนอื่นแก้จนดีไซน์แอปเสียหมด Flutter ก็สามารถทำ Test ประเภทนี้ได้ครับ
3. UI Testing แม้ตัวนี้จะไม่ได้จำเป็นมาก แต่ก็ยังจำเป็นอยู่นะครับ เท่าที่เคยใช้ใน iOS/Android ทางนั้นจะดีกว่าเยอะครับ เพราะเขามีทั้ง Recode Mode ไม่ว่าจะเป็น Record Espresso Test หรือ XCUI Test Recorder ที่ทำให้ Non-Dev ก็สามารถทำ UI Testing ได้ ผิดกับ Flutter ที่ต้องใช้โค้ดเท่านั้นในการทำ Test ปัจจุบันผมเองก็ยังมีปัญหากับเรื่องของ Flutter UI Test อยู่ สืบเนื่องจาก Widget ยังขัดๆ กัน ทำให้ยังไม่สามารถทำ UI Testing ได้

ทาง Flutter มีเตรียมคู่มือการทำ CI/CD ให้เรียบร้อย ไปตามกันได้ครับ

Continuous delivery with Flutter

5. Productivity

การทำ Cross Platform ช่วยลดเวลาในการพัฒนาจริงเหรอ? เพราะถ้าสุดท้ายแล้ว Cross Platform ใช้งบประมาณมากกว่า Native ทั้งหมดที่กล่าวมา 4 ข้อก็จะไม่มีประโยชน์เลยครับ ซึ่งฟีเจอร์สำคัญที่ช่วยให้ Productivity สูงคือ Hot Reload หรือการแก้โค้ด UI และสามารถอัพเดตอัตโนมัติในแอปให้ภายในเวลา 1–2 วินาทีเพียงเท่านั้น จากที่ผมเคยทำ iOS การ Build ใหม่อย่างเร็วสุดแบบที่แก้ไม่เยอะจะใช้เวลาประมาณ 15–20 วินาที ซึ่ง 1 วันเราต้อง Build เยอะมาก อาจจะตกสัก 30 ครั้งได้ ฟังก์ชัน Hot Reload จึงเป็นตัวช่วยประหยัดเวลาอย่างมาก หากลองคำนวนคร่าวๆ แล้ว MAKE by KBank มี Dev 6 คน เราลดเวลาได้ถึง 60 Man Day ใน 1 ปี!

ส่วนความเร็วในการพัฒนา Flutter ที่ทำ 1 ครั้งแล้วได้ 2 แพลตฟอร์มนั้น แม้ตามทฤษฎีจะประหยัดได้กว่า 50% แต่ในโลกความจริงเป็นนั้นจะต่างออกไป เพราะเราอาจต้องปรับแก้บางส่วนให้เหมาะสมกับแต่ละแพลตฟอร์ม หรืออาจจะมี Technical Issue ต่างๆ ในฝั่ง Flutter ที่เราก็ต้องหาทางแก้ สรุปตัวเลขแล้วจะสามารถลดต้นทุนได้ประมาณ 41% สำหรับทั้ง 2 แพลตฟอร์ม ตัวเลขนี้คือจากประสบการณ์ของจริงที่ได้เจอมาครับ

เมื่อได้ทั้ง 5 ประเด็นนี้มาช่วยในการตัดสินใจ เราก็จะรู้ว่าโปรเจคเราเหมาะกับ Flutter หรือไม่ครับ

อย่างไรก็ตามเนื่องจาก MAKE by KBank เป็น Mobile Banking ที่ต้องการ Security สูง ผมจึงอยากเสนออีกสักประเด็นเป็นข้อเสริมพิเศษ

6. Security

ตามที่ได้รับการ Penetration Testing มา พบว่า Flutter มี Security ที่สูงกว่า iOS/Android Native เสียอีก น่าประหลาดใจมั้ยครับ? สาเหตุคือการที่เราเขียน Dart แล้ว Compile เป็น iOS/Android อีกทีนั้น ทำให้ Business Logic หรือการบันทึกข้อมูลต่างๆ เป็นบน Dart พอ Compile มาเป็น iOS/Android การ Reverse Engineer จะมีความซับซ้อนขึ้น เพราะเราต้อง Reverse ของ Binary ไปเป็น iOS/Android รอบนึง แต่เราก็จะยังไม่รู้ว่า Logic ที่ต้องการอยู่ที่ไหน ต้อง Reverse ของ iOS/Android กลับไป Dart อีกรอบ จึงทำให้ยากกว่าในการแกะแอป Flutter ออกมาดู แต่ถ้าคนสามารถหาวิธี Reverse Dart ได้ ประเด็นนี้ก็อาจจะเปลี่ยนไป

ส่วนเรื่อง Security พื้นฐานหลายๆ อย่างนั้น เราสามารถใช้ของ Native และเขียนบน Flutter อีกรอบได้ ทำให้ Flutter มี Security ที่ดีกว่า Native (จากปากของทีม Security ที่ทำ Penetration Testing นะครับ)

ขอ 3 คำสั้นๆ ใช้ Flutter ดีไหม

ใช้ ได้ ถ้า …

ถ้าแอปคุณเป็นแอปที่ไม่ได้มีจุดขายอยู่ที่ Performance เช่น แอปตัดต่อวิดีโอ แอปตัดแต่งรูป แอปที่มีการคำนวณสูงๆ ที่เหลือใช้ได้หมดครับ ยกตัวอย่างง่ายๆ

แอป A: Native ตัด VDO 4 K 30 วินาที ใช้เวลา Render 10 วินาที

แอป B: Flutter ตัด VDO 4 K 30 วินาที ใช้เวลา Render 20 วินาที

เพียงเท่านี้ Flutter ก็ขายไม่ออกแล้วครับ Optimize เท่าไหร่ก็สู้ Native ไม่ได้ แต่ถ้า Render UI ในแอป 60fps โดยปกติทำได้ไม่มีปัญหา ถ้าต้องการความเร็วในการคำนวณ Flutter จะไม่ใช่ตัวเลือกที่เหมาะสม แต่ถ้าแอปของคุณมีหน้าที่ในการถ่ายรูป ดูรายการเมนูอาหาร กดปุ่มเพื่อส่ง Request แบบปกติ สามารถใช้งาน Flutter ได้ครับ ซึ่งแอปในตลาดกว่า 80–90 % จะเป็นแบบนี้ทั้งสิ้น เฉพาะแอปพิเศษเท่านั้นที่อาจต้องใช้ Native

ตกลงปลงใจ ใช่เลย Flutter …แล้วยังไงต่อ?

Flutter มีจัดทำ Document ที่ค่อนข้างดีมาก มีระบุแต่ละขั้นตอนว่าใช้งานยังไง รวมถึงวิธีการ Migrate จาก iOS/Android/Xamarin/React Native/ Web เสร็จสรรพ ไม่ว่าคุณจะมาจากสายไหนก็ตาม Google เตรียมพร้อมให้ เช่น สำหรับคนเขียน Android แต่อยากเขียน Flutter สามารถดูตามลิงก์ด้านล่างไปได้เลย

Flutter for Android developers

สุดท้ายแล้วจากประสบการณ์ที่ได้คลุกคลีกับ Flutter มาปีกว่าๆ ผมได้เห็นความตั้งใจของ Google ที่มีการปล่อยอัพเดตออกมาอย่างต่อเนื่อง และการที่ Flutter สามารถพัฒนาแอปอย่าง MAKE by KBank ที่มี Animation ซับซ้อนระดับหนึ่ง ทั้งยังมี Security เทียบเท่ากับ Mobile Banking ตัวอื่นๆ ทำให้ผมมั่นใจในศักยภาพของ Flutter มากยิ่งขึ้น นอกจากนี้ Community ยังมาแรงแซง React Native ไปแล้วในด้านเทรนด์ ในมุมมองของผม Flutter มีอนาคตแน่นอนครับ แต่ไม่ใช่ว่าผมจะละทิ้งสกิล iOS ไปนะ ยังคงทำคู่กันไปครับ อันไหนที่ Flutter ทำไม่ได้ เราก็ไปเขียนบน Native แทน

ทิ้งท้ายอีกสักนิด ผมเขียน Apple Watch ด้วย SwiftUI แล้วยังเรียกข้ามมายัง Flutter ได้เลยครับ ส่งข้อมูลไปกลับมาไม่มีปัญหาใดๆ ครับ 👍

สำหรับชาวเทคคนไหนที่สนใจเรื่องราวดีๆ แบบนี้ หรืออยากเรียนรู้เกี่ยวกับ Product ใหม่ๆ ของ KBTG สามารถติดตามรายละเอียดกันได้ที่เว็บไซต์ www.kbtg.tech