KMM&Compose MutiPlatformで始めるクロスプラットフォーム開発

Slide 1

Slide 1 text

Slide 2

Slide 2 text

potatotips #82 Akihiko Sato / 株式会社ラクス Lead Engineer / @akkiee76 SaaS 開発 (Backend, Frontend) / Mobile 開発 (iOS, Android) 上流工程、コードレビュー、チームの課題改善などコールドブリューコーヒー☕ / パン作り🍞 / あんバターフランス🥐 自己紹介

Slide 3

Slide 3 text

potatotips #82 今日伝えたいこと KMM & Compose MultiPlatform　を導入したクロスプラットフォーム開発の紹介

Slide 4

Slide 4 text

potatotips #82 Kotlin Multiplatform for Mobile （KMM） JetBrainsが開発したKotlinベースのクロスプラットフォーム開発フレームワーク。1つの共通のKotlinコードベースを使用して、 iOSとAndroidの両方のプラットフォーム向けにネイティブアプリを開発することができる点が特徴。

Slide 5

Slide 5 text

potatotips #82 Kotlin Multiplatform for Mobile （KMM）フレームワークイメージ

Slide 6

Slide 6 text

potatotips #82 Kotlin Multiplatform for Mobile （KMM）アーキテクチャイメージ Compose Multiplatform

Slide 7

Slide 7 text

potatotips #82 Compose MultiPlatform Compose Multiplatformは、Kotlinを使用して複数のプラットフォーム間でUI を共有するための宣言的なフレームワークです。JetBrainsとオープンソースの貢献者によって開発され、Jetpack Composeに基づいています。 https://github.com/JetBrains/compose-multiplatform

Slide 8

Slide 8 text

potatotips #82 ここからは導入手順を紹介します

Slide 9

Slide 9 text

potatotips #82 開発に必要な環境・ macOS ・ Android Studio ・ Xcode ・ JDK ・ Kotlin Multiplatform Mobile plugin ・ Kotlin plugin ・ CocoaPods dependency manager あとは brew install kdoctor を実行するだけ

Slide 10

Slide 10 text

potatotips #82 プロジェクト作成＊ Desktop版はIntelliJから作成可能

Slide 11

Slide 11 text

potatotips #82 プロジェクト構成

Slide 12

Slide 12 text

potatotips #82 commonMainに定義されている共通コード

Slide 13

Slide 13 text

potatotips #82 実際に利用したライブラリなど・ Navigation ・ Network ・ DI （時間の関係上3つ紹介）

Slide 14

Slide 14 text

potatotips #82 Navigation 自分の実装イメージはこんな感じでしたが・・・。

Slide 15

Slide 15 text

potatotips #82 Navigation サポートされていなかった。。 https://github.com/JetBrains/compose-multiplatform/tree/master/tutorials/Navigation

Slide 16

Slide 16 text

potatotips #82 Navigation とりあえず自前で実装（Android）

Slide 17

Slide 17 text

potatotips #82 Navigation とりあえず自前で実装（iOS） * main.ios.ktも定義が必要です。

Slide 18

Slide 18 text

potatotips #82 Network Ktrofitライブラリを導入して実装 RetrofitのようなAPIで実装することが可能 https://foso.github.io/Ktorfit/

Slide 19

Slide 19 text

potatotips #82 Network レスポンスをselializeするため、 kotlinx-serializationも同時に導入します。 https://github.com/Kotlin/kotlinx.serialization

Slide 20

Slide 20 text

potatotips #82 DI （Dependency Injection）〜 module 定義 Koin（InsertKoinIO）を導入して実装 https://insert-koin.io/docs/reference/koin-mp/kmp/

Slide 21

Slide 21 text

potatotips #82 DI （Dependency Injection）〜 Android 編

Slide 22

Slide 22 text

potatotips #82 DI （Dependency Injection）〜 iOS 編

Slide 23

Slide 23 text

potatotips #82 まとめ・ ComposeでViewを共通で利用できるため、生産性の向上、保守性に期待できる・ Kotlinで実装する共通ロジックは、柔軟に設計ができる・ Android、iOS 両方のアーキテクチャの知見が必要・まだまだ使い勝手が悪い点もあるが今後のアップデートに期待！

Slide 24

Slide 24 text

potatotips #82 ご静聴ありがとうございました