Copyright 2023 m.coder All Rights Reserved. Environment diagnose (to see all details, use -v option): [✓] Operation System [✓] Java [✓] Android Studio [✓] Xcode [✓] Cocoapods Conclusion: ✓ Your system is ready for Kotlin Multiplatform Mobile development! 30 環境構築 環境が整っていれば全てに ✅がつく
Copyright 2023 m.coder All Rights Reserved. Environment diagnose (to see all details, use -v option): [✓] Operation System [✓] Java [✓] Android Studio [✓] Xcode [✓] Cocoapods Conclusion: ✓ Your system is ready for Kotlin Multiplatform Mobile development! 31 環境構築 環境が整っていれば全てに ✅がつく ● 比較的新しい MacOS マシン ○ Venturaならいける ● JDK ○ 11以上ならおそらくOK ● Android Studio ○ 最新の安定版 ○ Kotlin Multiplatform Mobile プラグイ ンのインストール ● Xcode ○ 最新の安定版ならおそらく OK ● CocoaPods ○ 最新ならおそらくOK
Copyright 2023 m.coder All Rights Reserved. Environment diagnose (to see all details, use -v option): [✓] Operation System [✓] Java [✓] Android Studio [✓] Xcode [✓] Cocoapods Conclusion: ✓ Your system is ready for Kotlin Multiplatform Mobile development! 32 環境構築 環境が整っていれば全てに ✅がつく ● 比較的新しい MacOS マシン ○ Venturaならいける ● JDK ○ 11以上ならおそらくOK ● Android Studio ○ 最新の安定版 ○ Kotlin Multiplatform Mobile プラグイ ンのインストール ● Xcode ○ 最新の安定版ならおそらく OK ● CocoaPods ○ 最新ならおそらくOK
Copyright 2023 m.coder All Rights Reserved. ---- App.kt expect fun getPlatformName(): String ---- main.android.kt actual fun getPlatformName(): String = "Android" ---- main.ios.kt actual fun getPlatformName(): String = "iOS" 42 サンプルアプリをいじってみる expect fun…複数プラットフォームで共通で使用す る関数の宣言 actual fun …各プラットフォームでの実際の関数の 動作
Copyright 2023 m.coder All Rights Reserved. ---- App.kt expect fun getPlatformName(): String ---- main.android.kt actual fun getPlatformName(): String = "Android" ---- main.ios.kt actual fun getPlatformName(): String = "iOS" 43 サンプルアプリをいじってみる expect fun…複数プラットフォームで共通で使用す る関数の宣言 actual fun …各プラットフォームでの実際の関数の 動作
Copyright 2023 m.coder All Rights Reserved. ---- App.kt expect fun getImageResource(): String ---- main.android.k t actual fun getImageResource(): String = "android.png" ---- main.ios.kt actual fun getImageResource(): String = "ios.png" 45 サンプルアプリをいじってみる expect fun getImageResource() を宣言し、actual fun に実装を書く
Copyright 2023 m.coder All Rights Reserved. ---- App.kt expect fun getImageResource(): ImageResource ---- main.android.kt import com.myapplication.common.MR actual fun getImageResource(): ImageResource = MR.images.android ---- main.ios.kt import com.myapplication.common.MR actual fun getImageResource(): ImageResource = MR.images.ios 61 サンプルアプリをいじってみる expect fun getImageResource() を宣言し、actual fun に実装を書く
Copyright 2023 m.coder All Rights Reserved. ---- App.kt expect fun getImageResource(): ImageResource ---- main.android.kt import com.myapplication.common.MR actual fun getImageResource(): ImageResource = MR.images.android ---- main.ios.kt import com.myapplication.common.MR actual fun getImageResource(): ImageResource = MR.images.ios 62 サンプルアプリをいじってみる expect fun getImageResource() を宣言し、actual fun に実装を書く ImageResource 型を返す関数に書き換える
Copyright 2023 m.coder All Rights Reserved. sourceSets { val commonMain by getting { dependencies { … implementation("io.ktor:ktor-client-core:$ktorVersion") } } val androidMain by getting { dependencies { … api("io.ktor:ktor-client-okhttp:$ktorVersion") } } val iosX64Main by getting val iosArm64Main by getting val iosSimulatorArm64Main by getting val iosMain by creating { dependencies { … implementation("io.ktor:ktor-client-darwin:$ktorVersion") } } } 78 Ktorのセットアップ core クライアントとプラットフォームごとのエンジン を依存関係に追加する
Copyright 2023 m.coder All Rights Reserved. sourceSets { val commonMain by getting { dependencies { … implementation("io.ktor:ktor-client-core:$ktorVersion") } } val androidMain by getting { dependencies { … api("io.ktor:ktor-client-okhttp:$ktorVersion") } } val iosX64Main by getting val iosArm64Main by getting val iosSimulatorArm64Main by getting val iosMain by creating { dependencies { … implementation("io.ktor:ktor-client-darwin:$ktorVersion") } } } 79 Ktorのセットアップ core クライアントとプラットフォームごとのエンジン を依存関係に追加する Android…OkHttp iOS…Darwin
Copyright 2023 m.coder All Rights Reserved. @Resource("v1/images/search") class Search( val api_key: String? = "{YOUR_API_KEY}", val has_breeds: String?, val limit: String? ) 100 Resource の導入 @Resource アノテーションを付与したクラスを作成 する
Copyright 2023 m.coder All Rights Reserved. defaultRequest { host = "api.thecatapi.com/v1" url { protocol = URLProtocol.HTTPS } } 110 地味な罠 host名指定 host以外の部分も指定すると … A server with the specified hostname could not be found., NSErrorFailingURLStringKey=
Copyright 2023 m.coder All Rights Reserved. defaultRequest { host = "api.thecatapi.com/v1" url { protocol = URLProtocol.HTTPS } } 111 地味な罠 host名指定 host以外の部分も指定すると … A server with the specified hostname could not be found., NSErrorFailingURLStringKey= ホスト名が見つからなくて通信エラーになる
Copyright 2023 m.coder All Rights Reserved. sealed class State { object Initial : State() object Loading : State() data class OnReady(val cats: List) : State() data class Error(val reason: Throwable) : State() } 135 状態ごとにUIを切り替える 状態管理用の State を定義する
Copyright 2023 m.coder All Rights Reserved. class CatListScreen : Screen { @Composable override fun Content() { val screenModel = rememberScreenModel { CatListScreenModel() } val state by screenModel.state.collectAsState() when (val result = state) { is State.Initial, is State.Loading -> { LoadingScreen() } is State.OnReady -> { ListView( items = result.cats, onItemClicked = { navigator.push(CatDetailScreen(it)) } ) } is State.Error -> { ErrorScreen( onRetryClicked = screenModel::fetch ) } } } } 141 状態ごとにUIを切り替える 状態管理用の State を定義する ScreenModel に API へのアクセス処理を書く Screen クラス側で状態を監視する
Copyright 2023 m.coder All Rights Reserved. class CatListScreen : Screen { @Composable override fun Content() { val screenModel = rememberScreenModel { CatListScreenModel() } val state by screenModel.state.collectAsState() when (val result = state) { is State.Initial, is State.Loading -> { LoadingScreen() } is State.OnReady -> { ListView( items = result.cats, onItemClicked = { navigator.push(CatDetailScreen(it)) } ) } is State.Error -> { ErrorScreen( onRetryClicked = screenModel::fetch ) } } } } 142 状態ごとにUIを切り替える 状態管理用の State を定義する ScreenModel に API へのアクセス処理を書く Screen クラス側で状態を監視する
m_coder
daipresents
shimabox
loic425
jmatsu
ivargrimstad
lhespanha
devoc
ogiwarat
hschwentner
youtalk
garrettdimon
scottboms
jponch
andyhume
smashingmag
phodgson
iamctodd
swwweet
mza
hatefulcrawdad
skipperchong
chrislema