Начало работы с Kotlin/Wasm и Compose Multiplatform

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

1. Настройте среду для разработки на Kotlin Multiplatform.

2. В IntelliJ IDEA выберите File | New | Project.

3. В списке шаблонов проектов выберите Kotlin Multiplatform.

4. Укажите следующие значения в окне New Project:

   • Name: WasmDemo

   • Project ID: wasm.project.demo

5. Выберите целевую платформу Web и вкладку Share UI. Убедитесь, что другие параметры не выбраны.

6. Нажмите Create.

   

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

1. После загрузки проекта выберите webApp [wasmJs] в списке конфигураций запуска и нажмите Run.

   

   Веб-приложение автоматически откроется в браузере. Также после завершения сборки можно вручную открыть следующий URL-адрес:

      http://localhost:8080/
   

   Номер порта может отличаться, если порт 8080 уже используется. Фактический номер порта можно найти в выводе сборки Gradle.

2. Нажмите кнопку Click me!. Появится логотип Compose Multiplatform:

   

Создание артефактов

Создайте артефакты проекта для публикации на веб-сайте:

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

2. В разделе WasmDemo | Tasks | kotlin browser выберите задачу wasmJsBrowserDistribution и запустите её.

   

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

   ./gradlew wasmJsBrowserDistribution
   

После завершения задачи созданные артефакты можно найти в каталоге webApp/build/dist/wasmJs/productionExecutable:

Публикация приложения

Используйте созданные артефакты для развертывания приложения Kotlin/Wasm. Выберите подходящий вариант публикации и следуйте инструкциям:

• GitHub Pages

• Cloudflare

• Apache HTTP Server

После создания сайта откройте браузер и перейдите по доменному имени страницы вашей платформы. Например, для GitHub Pages:

Поздравляем! Вы опубликовали свои артефакты.

Что дальше?

• Узнайте, как совместно использовать интерфейсы iOS и Android с помощью Compose Multiplatform

• Попробуйте другие примеры Kotlin/Wasm:

  • Приложение KotlinConf

  • Просмотрщик изображений Compose

  • Пример для Node.js

  • Пример для WASI

  • Пример Compose

• Присоединяйтесь к сообществу Kotlin/Wasm в Kotlin Slack:

  Присоединиться к сообществу Kotlin/Wasm