KMPでktorを使用して郵便番号検索APIを使ってみた
ktorを使ってみる
KMPでAPI通信をやってみたいと思い入門レベルなら郵便番号検索APIがちょうど良いかなと思い試してみたが結構ハマりました💦
ktorというライブラリを使用しております。
対象者
- Jetpack Composeの知識がある
- SwiftUIの知識がある
こちらが完成品のデモ
このマルチプラットフォームですが設定するところが多いので詰まると思います。まずはライブラリの依存関係を追加しましょう。
プロジェクトのトップレベルのbuild.gradle.kts設定をする。
📁shared/の中のbuild.gradle.ktsを設定する。
📁androidApp/の中のbuild.gradle.ktsを設定する。
終わったら
終わったら共通ロジックの作成を行う。Githubを参考にやっていただけるといいかなと。記事のよりリポジトリのソースコードを見てもらった方がどの位置にあるのか感覚が掴めるかなと。
Androidの設定をする
data classの定義
ktroで通信するロジック
ViewModelを定義する
Viewは📁androidApp/の中に作成します。パーミッションの権限もこちらで設定する。
Viewのコードはこちら
iOSの設定をする
SwiftUIでViewのコードを作成するのですが、共通ロジックがあるといえ、状態管理もiOS側でする必要がありました。Observationなるものを使ってやってみました。RxSwiftのようなものでしょうか。observableを使うとのことで、Streamで状態管理してるのでしょうね。
１個のファイルにまとめてしまいましたがラッパーを作って、共通ロジックのViewModelを呼び出して、iOS側で作成したこれもViewModelになると思いますが、Observationを使って状態管理をしています。ボタンが押されるとViewの状態を更新してくれる仕組みになっております。
使ってみた感想
設定が大変ですね。特徴はiOS/Androidでロジックを共通できるところもあり、ViewはiOS/Androidで分けることができるので、１個のプラットフォームに依存していないところが良いなと思いました。
Android側だとMaterial Designが表示され、iOS側だとiPhone独特のデザインになるので、ReactNative/Expoなら同じことできますが、FlutterだとAndroid側のMaterial Designになってしまう。OSが違うとUIは変更したい要件に合わせるなら、KMPの方が良いと感じました。
UIは共通化しないことで独自のものを使えるのがメリットなのでしょうね。
Android側だとktorやViewModelが使えるし、iOS側だとSwiftUIのObservationを使えるので、プラットフォームごとに独自のAPIを使うこともできるのがメリットでしたね。
クロスプラットフォームと違って、ネイティブ独自のセンサー系の機能を使いたいとかOS独自の機能を呼び出すのは実装しやすいそうです。まだ試せておりませんが💦
Discussion