Создайте приложение Compose Multiplatform

Создание проекта

1. В кратком руководстве выполните инструкции по настройке среды для разработки Kotlin Multiplatform.

2. В IntelliJ IDEA выберите Файл | Создать | Проект.

3. На панели слева выберите Kotlin Multiplatform.

4. Укажите следующие данные в окне Новый проект:

   • Имя: ComposeDemo

   • Идентификатор проекта (используется как имя пакета): compose.project.demo

5. Выберите целевые платформы Android, iOS, Desktop и Web. Убедитесь, что для iOS и веба выбран параметр Общий UI.

6. Заполнив все поля и выбрав целевые платформы, нажмите Создать (Скачать в веб-мастере).

   

Изучение структуры проекта

В IntelliJ IDEA перейдите в папку ComposeDemo. Если вы не выбрали iOS в мастере, у вас не будет папок, названия которых начинаются с «ios» или «apple».

Проект содержит следующие модули:

• shared — это модуль Kotlin Multiplatform, содержащий общую логику приложений для Android, настольных компьютеров, iOS и веба — код, используемый на всех платформах. Для автоматизации процесса сборки в нем используется система сборки Gradle.

• androidApp — модуль, который собирается в приложение для Android.

• iosApp — проект Xcode, который собирается в приложение для iOS. Он зависит от общего модуля и использует его как фреймворк iOS.

• desktopApp — модуль, который собирается в настольное приложение для JVM. Он зависит от модуля shared.

• webApp — модуль, который собирается в веб-приложения для Kotlin/JS и Kotlin/Wasm.

Модуль shared содержит следующие наборы исходников: androidMain, commonMain, iosMain, jsMain, jvmMain и wasmJsMain (а также соответствующие наборы исходников -Test, если вы решили добавить тесты).

Набор исходников — это понятие Gradle, обозначающее логически сгруппированные файлы, у каждой такой группы есть собственные зависимости. В Kotlin Multiplatform разные наборы исходников обычно предназначены для разных платформ.

Набор исходников commonMain использует общий код Kotlin, а наборы исходников для платформ содержат код Kotlin, предназначенный для каждой целевой платформы:

• jvmMain содержит исходные файлы для настольной платформы, использующей Kotlin/JVM.

• androidMain содержит исходные файлы Android и предназначен для Kotlin/JVM.

• iosMain содержит код Kotlin для iOS и предназначен для Kotlin/Native.

• jsMain содержит код Kotlin для JavaScript и предназначен для Kotlin/JS.

• wasmJsMain содержит код Kotlin для Wasm и предназначен для Kotlin/Wasm.

Таким образом, при сборке модуля shared в библиотеку Android общий код Kotlin обрабатывается как Kotlin/JVM, а при сборке в фреймворк iOS — как Kotlin/Native. При сборке общего модуля в веб-приложение общий код Kotlin при необходимости обрабатывается как Kotlin/Wasm или Kotlin/JS.

По возможности реализуйте функциональность в общем коде, чтобы написать ее один раз и обеспечить одинаковую работу на всех платформах. В идеале наборы исходников для платформ должны содержать только вызовы платформенных API и сценарии взаимодействия с пользователем, специфичные для платформы.

В каталоге shared/src/commonMain/kotlin откройте файл App.kt. В нем находится функция App(), реализующая минималистичный, но полноценный пользовательский интерфейс Compose Multiplatform:

@Composable
@Preview
fun App() {
    MaterialTheme {
        var showContent by remember { mutableStateOf(false) }
        Column(
            modifier = Modifier
                .background(MaterialTheme.colorScheme.primaryContainer)
                .safeContentPadding()
                .fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            Button(onClick = { showContent = !showContent }) {
                Text("Click me!")
            }
            AnimatedVisibility(showContent) {
                val greeting = remember { Greeting().greet() }
                Column(
                    modifier = Modifier.fillMaxWidth(),
                    horizontalAlignment = Alignment.CenterHorizontally,
                ) {
                    Image(painterResource(Res.drawable.compose_multiplatform), null)
                    Text("Compose: $greeting")
                }
            }
        }
    }
}

Запустим приложение на всех поддерживаемых платформах.

Запуск приложения

Приложение можно запустить на Android, iOS, настольном компьютере и в вебе. Запускать приложения в каком-либо определенном порядке не нужно — начните с той платформы, с которой вы лучше знакомы.

Запуск приложения на Android

1. В списке конфигураций запуска выберите androidApp.

2. Выберите виртуальное устройство Android и нажмите Запустить: IDE запустит выбранное виртуальное устройство, если оно выключено, и запустит приложение.

Запуск на другом эмулируемом устройстве Android

Узнайте, как настроить эмулятор Android и запустить приложение на другом эмулируемом устройстве.

Запуск на физическом устройстве Android

Узнайте, как настроить и подключить физическое устройство и запустить на нем приложение.

Запуск приложения на iOS

Если вы не запускали Xcode во время первоначальной настройки, сделайте это перед запуском приложения для iOS.

В IntelliJ IDEA выберите iosApp в списке конфигураций запуска, выберите эмулируемое устройство рядом с конфигурацией запуска и нажмите Запустить.

Запуск на физическом устройстве iOS

Вы можете запустить многоплатформенное приложение на физическом устройстве iOS. Перед началом вам потребуется указать Team ID, связанный с вашим Apple ID.

Настройка Team ID

Чтобы впервые задать Team ID для проекта, откройте проект в Xcode (Файл | Открыть проект в Xcode):

1. В навигаторе проекта слева выберите iosApp.

2. В разделе Цели выберите iosApp и перейдите на вкладку Подписание и возможности.

3. В списке Team выберите свою команду.

   Если вы еще не настроили команду, выберите в списке Team пункт Добавить учетную запись и следуйте инструкциям Xcode.

4. Убедитесь, что Bundle Identifier уникален и сертификат подписи успешно назначен.

После настройки команды в Xcode можно задать или изменить команду в IntelliJ IDEA:

1. Измените конфигурацию запуска для iosApp:

   

2. Перейдите на вкладку Параметры, внесите необходимые изменения в раскрывающийся список Команда разработчиков и нажмите ОК.

Запуск приложения

Подключите iPhone кабелем. Если устройство уже зарегистрировано в Xcode, IntelliJ IDEA должна отобразить его в списке конфигураций запуска. Запустите соответствующую конфигурацию iosApp.

Если вы еще не зарегистрировали iPhone в Xcode, следуйте рекомендациям Apple. Кратко, необходимо:

1. Подключить iPhone кабелем.

2. Включить на iPhone режим разработчика: Настройки | Конфиденциальность и безопасность.

3. В Xcode открыть верхнее меню и выбрать Окно | Устройства и симуляторы.

4. Если iPhone не отображается как подключенный, нажать значок плюса внизу слева и выбрать устройство.

5. Следовать инструкциям на экране, чтобы завершить сопряжение.

После регистрации iPhone в Xcode он появится в списке доступных устройств в IntelliJ IDEA, когда вы выберете конфигурацию запуска iosApp.

Запуск приложения на настольном компьютере

Выберите desktopApp [hot] 🔥 в списке конфигураций запуска и нажмите Запустить. По умолчанию конфигурация запускает настольное приложение в отдельном окне ОС, используя Compose Hot Reload:

Запуск веб-приложения

1. В списке конфигураций запуска выберите:

   • webApp[js]: для запуска приложения Kotlin/JS.

   • webApp[wasmJs]: для запуска приложения Kotlin/Wasm.

2. Нажмите Запустить.

Веб-приложение автоматически откроется в браузере по умолчанию и будет доступно по адресу http://localhost:8080/.

Режим совместимости для веб-платформ

Для веб-приложения можно включить режим совместимости, чтобы оно изначально работало во всех браузерах. В этом режиме современные браузеры используют версию Wasm, а в старых браузерах применяется версия JS. Этот режим обеспечивается кросс-компиляцией для целевых платформ js и wasmJs.

Чтобы включить режим совместимости для веб-приложения:

1. Откройте окно инструментов Gradle, выбрав Вид | Окна инструментов | Gradle.

2. В разделе ComposeDemo | Tasks | compose выберите задачу composeCompatibilityBrowserDistribution и запустите ее.

   

   Также можно выполнить следующую команду в терминале из корневого каталога ComposeDemo:

   ./gradlew composeCompatibilityBrowserDistribution
   

После завершения задачи Gradle в каталоге composeApp/build/dist/composeWebCompatibility/productionExecutable будут созданы совместимые артефакты. Эти артефакты можно использовать, чтобы опубликовать приложение, работающее на целевых платформах js и wasmJs.

Следующий шаг

В следующей части руководства вы узнаете, как реализовать компонуемые функции и запустить приложение на каждой платформе.

Перейти к следующей части

Помощь

• Kotlin Slack. Получите приглашение и присоединитесь к каналу #multiplatform.

• Система отслеживания ошибок Kotlin. Сообщите о новой проблеме.