ลองเล่น Compose Multiplatform บน Kotlin Multiplatform (Part 1)

3 min readAug 5, 2023

หากพูดถึง cross-platform framework ในปัจจุบันคนมักจะนึกถึง React Native หรือ Flutter กัน ซึ่ง cross-platform สมัยนี้นั้นมี performance ที่ดีแทบจะเทียบเท่า native แล้วแตกต่างจากสมัยก่อน ดังนั้นหลายๆองค์กรจึงเลือกมอง cross-platform เหล่านี้เป็นตัวเลือกแรกๆในการพัฒนาโปรเจคโดยเฉพาะ mobile app ซึ่งในขณะนี้ก็ได้มีผู้ท้าชิงรายใหม่เกิดขึ้นแล้วและน่าสนใจเป็นอย่างมากอีกด้วยนั่นก็คือ Kotlin Multiplatform

Kotlin Multiplatform คือเทคโนโลยีที่ช่วยในการพัฒนาโปรเจคแบบ cross-platform จากบริษัท JetBrains โดยจะต้องพัฒนาแอพพลิเคชั่นขึ้นมาด้วยภาษา Kotlin ซึ่งขณะนี้รองรับ platform มากมายไม่ว่าจะเป็น iOS, Android, macOS, Windows, Linux หรือ watchOS

หนึ่งใน platform ที่น่าสนใจคือการแชร์โค๊ดร่วมกันระหว่าง mobile platform นั่นก็คือ iOS และ Android โดยจะเรียกว่า Kotlin Multiplatform Mobile (KMM) โดยต้องบอกว่าตัว KMM เองจะแยกในส่วนของ UI ให้พัฒนาด้วย native ของแต่ละ platform แล้วในส่วนของ business logic นั้นจะเป็น sharing code ที่เขียนด้วย kotlin นั่นเอง ข้อดีก็คือจะได้ performance เป็น native แน่นอนและ access platform API ได้โดยตรงอีกด้วย

แต่ถึงอย่างนั้นการแยกเขียน UI แต่ละ platform ก็อาจจะยังไม่ตอบโจทย์บางคน ทาง JetBrains จึงได้ปล่อยตัว framework อย่าง Compose Multiplatform ออกมาซึ่งเป็น declarative UI framework on top Kotlin Multiplatform พัฒนาด้วย Kotlin และ Jetpack Compose ที่ทำให้สามารถเขียนโค๊ดในส่วนของ UI แค่เพียงครั้งเดียวและสามารถใช้ร่วมกันได้ทุก platform ซึ่งทำให้ตัว cross-platform นี้น่าสนใจขึ้นเป็นอย่างมาก

Note
- ตัว Compose Platform นั้นค่อนข้างเป็นมิตรกับ Android Developer อย่างมาก สามารถใช้ความรู้ที่มีอยู่แล้วในการพัฒนา Android ต่อยอดเพิ่มเติมได้อย่างไม่ยากเย็นนัก ไม่ว่าจะเป็นตัวภาษา Kotlin, Jetpack Compose รวมถึงรูปแบบการพัฒนา
- ณ วันที่เขียนบทความ Kotlin Platform ยังมีสถานะเป็น Beta อยู่รวมถึง Compose Multiplatform สำหรับ iOS มีสถานะเป็น Alpha เช่นกัน ฉะนั้นยังไม่เหมาะแก่การนำขึ้นโปรเจคจริง

ติดตั้ง environment

ก่อนที่จะเริ่มพัฒนา Kotlin Platform จำเป็นอย่างยิ่งที่จะต้องติดตั้ง tools เหล่านี้ก่อน

การจะเขียน native code ของ iOS และ run แอพพลิเคชั่นบน iOS นั้นจำเป็นต้องรันบน MacOS

Android Studio : ใช้เป็น IDE หลักในการพัฒนา Kotlin Multiplatform
Xcode : (สำหรับผู้ที่ใช้ macOS เท่านั้น) ส่วนใหญ่จะถูกใช้ run ใน background แต่อาจจำเป็นหากต้องการพัฒนาในส่วนของ Swift และ Objective-C
Cocoapods: (สำหรับผู้ที่ใช้ macOS เท่านั้น)ใช้ในการจัดการ dependency ฝั่ง iOS โดย Cocoapods นั้นจะรันอยู่บน Ruby หากยังไม่มีต้องติดตั้ง Ruby เสียก่อน
JDK : สามารถตรวจสอบว่าติดตั้งแล้วหรือยังผ่าน การรันคำสั่ง java -versionใน terminal

สำหรับผู้ที่ใช้ macOS แนะนำให้ลง KDoctor tools เพื่อใช้เช็ค environment ในเครื่องว่าติดตั้งทุกอย่างครบหรือไม่

เปิด Terminal แล้วรันคำสั่งต่อไปนี้

brew install kdoctor

2. หลังจากติดตั้งเสร็จให้รันคำสั่ง

kdoctor

cli จะขึ้น check list มาให้ หากมีอันไหนเป็นกากบาทตัว tool จะมีคำแนะนำขึ้นมาให้เราทำตาม แก้ไขให้หมดจนเป็นเครื่องหมายติ๊กถูกทั้งหมดดังภาพต่อไปนี้

หลังจากติดตั้งทุกอย่างเสร็จแล้วให้เปิด Android Studio ขึ้นมาแล้วไปยัง Plugin > Marketplace แล้วค้นหา Kotlin Multiplatform Mobile แล้วทำการ Install

เมื่อ Install เสร็จหากมากดที่ New Project จะพบกับ Template ของ Kotlin Multiplatform Mobile ให้เลือก ซึ่งในขณะที่เขียนบทความนี้ จะยังไม่ได้มีตัว Compose Platform ติดตั้งมาให้

ดังนั้นจึงจะใช้วิธี clone template ตัว Compose Platform จาก Github มาใช้แทน

สร้างโปรเจค Compose Platform

ให้กดตรงสัญลักษณ์จุด 3 จุดข้าง New Project แล้วเลือก Get project from Version Control แล้วใส่ลิงค์ template Compose Platform จอก JetBrains ตัวนี้

https://github.com/JetBrains/compose-multiplatform-ios-android-template.git

จะได้โปรเจคมาลักษณะนี้

Run แอพพลิเคชั่น

การ Run แอพพลิเคชั่น Android

สามารถสร้าง Android Emulator ผ่าน Android virtual device
บริเวณ run configurations เลือก androidApp
เลือก Android Device ที่ต้องการและกด Run ได้เลย

การ Run แอพพลิเคชั่น iOS

เปิดโปรแกรม Xcode ขึ้นมา ในครั้งแรกอาจจะต้องกด Accept license term เสียก่อน
ใน Android Studio เลือก iosApp จาก run configurations และคลิ๊ก Run หากไม่มี iosApp ให้ทำตามนี้