บันทึกการสร้าง Desktop App ด้วย Compose for Desktop เพื่อใช้ในงาน Android Developer Meetup 08.2022

เมื่อคุณเป็น Android Dev ที่อยากเขียน Desktop App แต่มูฟออนไปจาก Jetpack Compose ไม่ได้

เรื่องมีอยู่ว่าผมเป็นหนึ่งในทีมงานของ Android Developer Meetup 08.2022 และมีการจัดกิจกรรมสำหรับผู้เข้าร่วมงานด้วย เพื่อให้ทุกคนได้ทำกิจกรรมร่วมกัน ได้รู้จักกัน และลุ้นของรางวัลจากทีมงาน

กิจกรรมจะอยู่ในช่วงท้ายของงาน

กิจกรรมดังกล่าวจะเป็นการเล่นเกมทายคำศัพท์แอนดรอยด์ (Guess the Android word) ที่จะให้ผู้เข้าร่วมงานจัดทีมเพื่อทายคำศัพท์ผ่านคำใบ้จากคนอื่นภายในทีมให้ถูกต้อง

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

แน่นอนว่าทางเลือกอันดับแรก ๆ สำหรับหลาย ๆ คนก็คือการสร้าง Web App ขึ้นมา เพราะสามารถเข้าถึงจากที่ไหนก็ได้ ขอแค่มีอินเตอร์เน็ตก็พอ

แต่ละทีมจะต้องส่งตัวแทนมาทายคำตอบ คนที่เหลือก็ช่วยกันคิดคำใบ้

แต่เราต้องการแค่โปรแกรมง่าย ๆ ที่ควบคุมโดยทีมงานเองทั้งหมด ไม่มีขั้นตอนไหนที่ผู้เล่นต้องยุ่งกับโปรแกรมเลย จึงทำให้ผมตัดสินใจเลือกสร้างเป็น Desktop App ขึ้นมาแทน เพื่อเปิดบนคอมที่ใช้ฉายภาพขึ้นจอภายในงาน

และอาจจะฟังดูไม่คุ้นหูสำหรับผู้อ่านหลาย ๆ คนซักเท่าไร แต่ผมสร้าง Desktop App ด้วย Kotlin Multiplatform และการทำงานทั้งหมดจะอยู่บน Compose for Desktop

https://www.jetbrains.com/lp/compose-desktop/

Compose for Desktop เป็น UI Framework โดยใช้ภาษา Kotlin ที่แยกออกมาจาก Jetpack Compose บน Android อีกที ซึ่งจะอยู่ภายใต้การดูแลของ JetBrains แทน

เหตุผลที่ผมตัดสินใจใช้ Compose for Desktop จะมีดังนี้

• คุ้นเคยกับ Jetpack Compose บน Android อยู่แล้ว
• ต้องทำให้เสร็จภายใน 2 คืน จะได้เอาเวลาไปเตรียมงานส่วนอื่นต่อ
• ใช้ IntelliJ IDEA ในการพัฒนาได้โดยตรง
• รองรับได้ทั้ง Windows, macOS, และ Linux (ด้วยพลังของ Skia) ถึงแม้ในงานจะใช้แต่ macOS ก็เถอะ
• จะได้มีเรื่องอวย Jetpack Compose

ใช้ IntelliJ IDEA เพื่อพัฒนาแอปด้วย Compose for Desktop

เนื่องจากงานประจำมีการใช้ IntelliJ IDEA สำหรับงานบางส่วนอยู่แล้ว จึงไม่ใช่เรื่องยากที่จะสร้าง Desktop App ด้วย IDE สุดเทพตัวนี้ เพราะเราสามารถกดสร้างโปรเจคสำหรับ Compose for Desktop ได้เลย

จะสร้างเป็น Multiple Platforms ที่รองรับทั้ง Desktop และ Web ก็ได้นะ

จากนั้นก็ลงมือเขียนโค้ดได้เลย

ตัวอย่างโค้ดบางส่วนของโปรแกรมที่ใช้ในเกม Guess the Android word

เรื่องราวที่เกี่ยวกับ Compose for Desktop

• Desktop App ที่ว่าสร้างขึ้นด้วย Kotlin Multiplatform และสร้าง UI ด้วย Compose for Desktop
• Kotlin Multiplatform เป็นโปรเจคที่มีสถานะเป็น Alpha อยู่ — แต่นั่นก็เพียงพอสำหรับงานนี้ที่เป็นงานเล็กและมีความซับซ้อนต่ำ
• ผมใช้ Compose for Desktop เวอร์ชัน 1.1.1 ที่เป็น Stable Version ในตอนนั้น
• อ่าน Documentation จากของ Android ได้เลย และนั่นจึงทำให้มีข้อมูลของ Desktop App น้อย — แต่ก็ไม่ได้มีปัญหาอย่างใด
• ไม่มี Live Preview แบบ Android Studio ทำให้ต้องกด Run App อยู่บ่อย ๆ เพื่อดู UI ว่าตรงตามต้องการหรือไม่
• Compose for Desktop เป็นแค่ UI Framework เท่านั้น จึงไม่มี Structure หรือ Pattern สำหรับโค้ดที่เป็น Non-UI จึงต้องการ Library อย่าง Decompose มาใช้งานควบคู่ — แต่เนื่องจากเป็นงานเล็กและรีบ ผมเลยไม่ได้ใช้

GitHub - arkivanov/Decompose: Kotlin Multiplatform lifecycle-aware business logic components (aka…

• ระหว่างพัฒนาจะเขียนโค้ดบนหน้าจอ 2560 x 1440 px (16:9) แต่ตอนใช้งานจริงเป็นหน้าจอ 1024 x 768 px (4:3) จึงเผื่อใจไว้ตั้งแต่แรกว่าต้องไปนั่งปรับ UI ตอนหน้างานอีกที แทนที่จะเสียเวลาทำ Responsive UI — ในกรณีนี้ถือว่าคุ้มค่ากว่า
• ไม่ต้องสร้าง Theme เอง เพราะ Default Theme ของ Compose for Desktop คือ Material Design — ซึ่งผมไม่ต้องการอะไรมากไปกว่านั้นแล้ว
• ใช้ Library ที่ชื่อ Multiplatform Settings ด้วย เพื่อเก็บข้อมูลทั้งหมดในระหว่างใช้งานลงใน Local Storage ตลอดเวลา— Library ตัวนี้ใช้ได้บนทุก Platform ที่ Kotlin Multiplatform รองรับ

ภาพตัวอย่าง UI ทั้งหมดที่อยู่ในแต่ละหน้า

การ Build Package ของ Kotlin Multiplatform สำหรับ Desktop App

อีกอย่างที่ได้เรียนรู้เกี่ยวกับ Kotlin Multiplatform ก็คือเราสามารถ Build Package ให้เป็นไฟล์สำหรับติดตั้งแยกแต่ละ OS ผ่าน Gradle ได้เลย

• สร้างไฟล์ .msi สำหรับติดตั้งบน Windows ด้วยคำสั่ง ./gradlew packageMsi
• สร้างไฟล์ .dmg สำหรับติดตั้งบน macOS ด้วยคำสั่ง ./gradlew packageDmg
• สร้างไฟล์ .deb สำหรับติดตั้งบน Linux ด้วยคำสั่ง ./gradlew packageDeb

จากนั้นก็จะได้ไฟล์โปรแกรมเพื่อเอาไปติดตั้งในแต่ละ OS

ไอคอนยังใช้โลโก้ Kotlin อยู่เลย รีบทำแค่ไหนก็คิดดู

ความโชคดีในความโชคร้ายที่เกิดจากการคิดเผื่อไว้แล้ว

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

อย่างแรก — คือการเขียนโค้ดเพื่อจับเวลาที่ใช้ในการตอบแต่ละข้อ เพื่อนำมาคิดในกรณีที่มีทีมที่ได้คะแนนสูงสุดมากกว่า 1 ทีม ซึ่งในวันงานก็เป็นเช่นนั้นจริง ๆ เพราะมี 2 ทีมที่ได้คะแนนสูงสุดและเท่ากัน ทำให้ต้องดูว่าทีมไหนใช้เวลาน้อยที่สุดเพื่อให้เป็นผู้ชนะ

อย่างที่สอง —คือการเก็บข้อมูลไว้ใน Local Storage ตลอดเวลาเผื่อไว้ด้วย (การทำงานโดยปกติจะใช้ข้อมูลที่อยู่ใน In-memory) เพราะในระหว่างกิจกรรมเจอปัญหาโปรแกรมไม่ทำงานต่อ จนต้องปิดโปรแกรมแล้วเปิดใหม่ โดยที่ข้อมูลทั้งหมดยังคงอยู่ครบและใช้งานต่อจากเดิมได้ทันที (ถึงแม้ว่าจะใช้วิธีแปลงข้อมูลทั้งหมดเป็น JSON String ด้วย GSON แล้วยัดเป็น Key-value ตรง ๆ ก็เถอะ)

ไม่ผิดหวังที่เลือกใช้ Kotlin Multiplatform และ Compose for Desktop

การใช้เลือกใช้ Kotlin Multiplatform ร่วมกับ Compose for Desktop เพื่อสร้าง Desktop App สำหรับงาน Android Developer Meetup 08.2022 ก็ให้ผลลัพธ์ที่น่าพึงพอใจไม่น้อย และกิจกรรมดังกล่าวก็ผ่านพ้นไปได้ด้วยดี (และก็ขอแสดงความยินดีกับทีมที่ชนะด้วยครับ 👏🎉)

ดูผลลัพธ์ของโปรแกรมตัวนี้ได้จากวีดีโอย้อนหลังของงาน Android Developer Meetup 08.2022 บน Facebook ในช่วงเวลาที่ 2:15:58 ได้เลย

ถึงแม้ว่า Kotlin Multiplatform และ Compose for Desktop อาจจะไม่ใช่เครื่องมือที่นิยมมากนัก โดยเฉพาะงานขนาดใหญ่ในระดับ Production แต่อย่างน้อยก็เหมาะกับงานขนาดเล็กที่มีรูปแบบการทำงานที่เรียบง่าย ต้องการลด Learning Curve สำหรับ Android Dev อย่างเราที่ต้องมาพัฒนา Desktop App แบบไม่ทันตั้งตัว และทำให้ผมสามารถ Deliver งานออกมาได้ใน 2 คืน (และแก้โค้ดหน้างานอีกครึ่งชั่วโมงก่อนงานเริ่ม)

ถ้าคุณมีโปรเจคขนาดเล็กที่เป็น Desktop App, อยากจะลองใช้เครื่องมือใหม่ ๆ ในการพัฒนา, คุ้นเคยกับ Declarative UI, คุ้นเคยและชื่นชอบในภาษา Kotlin ก็ลองใช้ Kotlin Multiplatform และ Compose for Desktop ได้นะ สนุกดีฮะ

อะไรนะ? อยากเห็นโค้ดที่ผมเขียนอย่างงั้นหรือ? คุณคาดหวังอะไรกับโค้ดที่เขียนแค่ 2 คืนกันล่ะ เพราะงั้นผมไม่ให้ดูหรอก 😂