KMM&Compose MutiPlatformで始めるクロスプラットフォーム開発

potatotips #82 iOS/Android開発Tips共有会の発表資料です。

Transcript

1. potatotips #82 ©2023 RAKUS Co., Ltd. KMM & Compose MultiPlatformで 始めるクロスプラットフォーム開発 @akkiee76 potatotips #82 iOS/Android開発Tips共有会
2. potatotips #82 Akihiko Sato / 株式会社ラクス Lead Engineer / @akkiee76 SaaS 開発 (Backend, Frontend) / Mobile 開発 (iOS, Android) 上流工程、コードレビュー、チームの課題改善など コールドブリューコーヒー☕ / パン作り🍞 / あんバターフランス🥐 自己紹介
3. potatotips #82 今日伝えたいこと KMM & Compose MultiPlatform　 を導入したクロスプラットフォーム開発の紹介
4. potatotips #82 Kotlin Multiplatform for Mobile （KMM） JetBrainsが開発したKotlinベースのクロスプラットフォーム 開発フレームワーク。1つの共通のKotlinコードベースを使用して、 iOSとAndroidの両方のプラットフォーム向けにネイティブアプリを 開発することができる点が特徴。
5. potatotips #82 Kotlin Multiplatform for Mobile （KMM） フレームワークイメージ
6. potatotips #82 Kotlin Multiplatform for Mobile （KMM） アーキテクチャイメージ Compose Multiplatform
7. potatotips #82 Compose MultiPlatform Compose Multiplatformは、Kotlinを使用して複数のプラットフォーム間でUI を共有するための宣言的なフレームワークです。JetBrainsとオープンソースの貢献 者によって開発され、Jetpack Composeに基づいています。 https://github.com/JetBrains/compose-multiplatform
8. potatotips #82 ここからは導入手順を紹介します
9. potatotips #82 開発に必要な環境 ・ macOS ・ Android Studio ・ Xcode ・ JDK ・ Kotlin Multiplatform Mobile plugin ・ Kotlin plugin ・ CocoaPods dependency manager あとは brew install kdoctor を実行するだけ
10. potatotips #82 プロジェクト作成 ＊ Desktop版はIntelliJから作成可能
11. potatotips #82 プロジェクト構成
12. potatotips #82 commonMainに定義されている共通コード
13. potatotips #82 実際に利用したライブラリなど ・ Navigation ・ Network ・ DI （時間の関係上3つ紹介）
14. potatotips #82 Navigation 自分の実装イメージはこんな感じでしたが・・・。
15. potatotips #82 Navigation サポートされていなかった。。 https://github.com/JetBrains/compose-multiplatform/tree/master/tutorials/Navigation
16. potatotips #82 Navigation とりあえず自前で実装（Android）
17. potatotips #82 Navigation とりあえず自前で実装（iOS） * main.ios.ktも定義が必要です。
18. potatotips #82 Network Ktrofitライブラリを 導入して実装 RetrofitのようなAPIで 実装することが可能 https://foso.github.io/Ktorfit/
19. potatotips #82 Network レスポンスをselializeするため、 kotlinx-serializationも同時に導入 します。 https://github.com/Kotlin/kotlinx.serialization
20. potatotips #82 DI （Dependency Injection） 〜 module 定義 Koin（InsertKoinIO）を導入して実装 https://insert-koin.io/docs/reference/koin-mp/kmp/
21. potatotips #82 DI （Dependency Injection） 〜 Android 編
22. potatotips #82 DI （Dependency Injection） 〜 iOS 編
23. potatotips #82 まとめ ・ ComposeでViewを共通で利用できるため、 生産性の向上、保守性に期待できる ・ Kotlinで実装する共通ロジックは、柔軟に設計ができる ・ Android、iOS 両方のアーキテクチャの知見が必要 ・ まだまだ使い勝手が悪い点もあるが今後のアップデートに期待！
24. potatotips #82 ご静聴ありがとうございました