Jetpack Compose pour iOS. Démarrage, étape par étape | de Marko Novakovic | janvier 2023

Démarrage, étape par étape

Jetpack Compose est sans doute la plus grande et la meilleure chose qui soit arrivée au développement d’Android depuis le début d’Android lui-même ; c’est juste là-haut avec l’adoption de Kotlin – un marbre d’ingénierie et une joie absolue à utiliser.

Grâce aux efforts de Jetbrains pour porter Compose vers Multiplatform, nous voyons des utilisations intéressantes pour créer des applications Android et de bureau à partir d’une seule base de code. Mais qu’en est-il d’iOS ? Il s’avère que cela aussi est possible… avec un peu d’effort et de sueur. Maintenant, je vais vous montrer comment le faire, étape par étape.

Conditions préalables

• C’est évident mais à noter. Vous ne pouvez le faire qu’à partir de MacOS. Oui, c’est Compose, mais vous avez toujours besoin de choses comme un simulateur.
• Vous ne pourrez peut-être pas utiliser toutes les bibliothèques auxquelles vous êtes habitué depuis votre développement Android : composants d’architecture, bibliothèques d’accompagnement, etc., car celles-ci ne sont pas (encore ?) multiplateformes, mais pour la plupart, Compose fonctionnera comme vous l’attendez. à parce que Le support iOS est encore expérimental.

Vous avez besoin d’un module pour votre application Compose iOS. Il peut s’agir d’une application autonome, l’application iOS étant le seul module du projet (comme vous le faites pour le développement Android natif), ou vous pouvez ajouter un module supplémentaire à votre projet KMM.

Si vous souhaitez créer un nouveau projet pour cela, choisissez Compose Multiplatform dans le nouvel assistant de projet d’IntelliJ IDEA.

Dans le module/projet nouvellement créé, copiez et collez cet essentiel pour build.gradle.kts et utilise cet essentiel pour settings.gradle.kts.

Quelques choses à expliquer à propos de build.gradle.kts.

id("ord.jetbrains.compose") version "1.3.0-rc01ligne 7, et maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")ligne 16, indique comment ajouter Compose Multiplatform à l’application.

Nous définissons des cibles comme suit :

iosX64("uikitX64") {
binaries {
executable {
entryPoint = "main"
freeCompilerArgs += listOf(
"-linker-option", "-framework", "-linker-option", "Metal",
"-linker-option", "-framework", "-linker-option", "CoreText",
"-linker-option", "-framework", "-linker-option", "CoreGraphics"
)
}
}
}
iosArm64("uikitArm64") {
binaries {
executable {
entryPoint = "main"
freeCompilerArgs += listOf(
"-linker-option", "-framework", "-linker-option", "Metal",
"-linker-option", "-framework", "-linker-option", "CoreText",
"-linker-option", "-framework", "-linker-option", "CoreGraphics"
)
freeCompilerArgs += "-Xdisable-phases=VerifyBitcode"
}
}
}

Rien de spécial, non ?

Maintenant, regardons le compose.experimental bloc, ce qui nécessite un peu plus d’explications. uikit.application vous permet de configurer votre application iOS. Vous voyez des choses comme bundleIdPrefix et projectName. bundleIdPrefix est comme applicationId pour nous les développeurs Android et projectName est assez explicite.

Maintenant, passons à deployConfiguration. Vous déployez/exécutez votre application iOS avec des tâches Gradle ; vous pouvez les voir dans les commentaires. Ce sont iosDeployIPhone13ProDebug et iosDeployIPadDebug. Nous définissons également l’appareil sur lequel nous voulons que cette tâche exécute notre application. Le nom que vous spécifiez à l’intérieur simulator("xxx") déterminera votre tâche Gradle pour cette configuration, et elle sera nommée avec xxx. La tâche Gradle sera iosDeployxxxDebug.

Vous vous demandez peut-être déjà ce que teamId est. Pour être honnête, je ne suis pas tout à fait sûr, mais je pense que vous en avez besoin pour créer la version finale de votre application. le débogage fonctionnera très bien sans cela. Pour cela, vous avez besoin d’un abonnement Apple Developer. Tu auras teamId De là.

C’est tout pour la configuration de Gradle. Passons à la structure des fichiers. À l’intérieur module/src vous devez créer uikitMain/kotlin et à l’intérieur de celui-ci, vous avez besoin main.uikit.kt dossier. Ça devrait ressembler à ça:

iosCompose est le nom que j’ai choisi. Vous pouvez choisir quelque chose de différent.

À l’intérieur main.uikit.ktcollez le code suivant :

window!!.rootViewController = Application("Your Application") {
Text("Helo World, from Compose iOS app!!!")
}