Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

akkie76
June 21, 2023

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

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

akkie76

June 21, 2023
Tweet

More Decks by akkie76

Other Decks in Technology

Transcript

  1. potatotips #82
    ©2023 RAKUS Co., Ltd.
    KMM & Compose MultiPlatformで
    始めるクロスプラットフォーム開発
    @akkiee76
    potatotips #82 iOS/Android開発Tips共有会

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  5. potatotips #82
    Kotlin Multiplatform for Mobile (KMM)
    フレームワークイメージ

    View Slide

  6. potatotips #82
    Kotlin Multiplatform for Mobile (KMM)
    アーキテクチャイメージ
    Compose Multiplatform

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  11. potatotips #82
    プロジェクト構成

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  16. potatotips #82
    Navigation
    とりあえず自前で実装(Android)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  21. potatotips #82
    DI (Dependency Injection) 〜 Android 編

    View Slide

  22. potatotips #82
    DI (Dependency Injection) 〜 iOS 編

    View Slide

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

    View Slide

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

    View Slide