Kotlin JS: непокоренная вершина VK
После окончания нативного Android приложения от заказчика последовало предложение написать мини-приложение VK. Так как я имел опыт написания кода только для нативных приложений, то для меня это был интересный челенж. Немного погуглив пришел к тому, что добрые разработчики из Jet Brains разработали Kotlin JS — оболочку над React (а Kotlin мой основной язык). Вдохновившись статьей https://habr.com/ru/companies/vk/articles/521192/ я приступил к написанию кода.
Итак, чем хорош Kotlin для разработки такого рода приложений — использование всех фишек (экстеншены, дата классы, корутины, конструкции и пр.) языка и в то же время возможность реализации компонентов и хуков React. Поэтому, сомнений у меня не было.
Несмотря на то, что в статьях указывается как легко имплементируются в проект библиотеки, действительность оказалось другой. Gradle сыпал ошибками несовместимости библиотек между собой. При этом, при одинаковых номерах версий дружба никак не зарождалась. В итоге, поэкспериментировав с различными версиями пришлось перейти к изучению списка оберток в https://github.com/JetBrains/kotlin-wrappers/. Здесь меня ожидало решение проблемы совместимости — https://github.com/JetBrains/kotlin-wrappers/tree/master/kotlin-wrappers-bom. Добавление имплементации этой библиотеки позволяет не заморачиваться и передать это заботу этой библиотеке:
val kotlinWrappersBomVersion = "1.0.0-pre.339-compat"
kotlin {
sourceSets {
dependencies {
implementation(kotlin("stdlib-js"))
implementation(platform("org.jetbrains.kotlin-wrappers:kotlin-wrappers-bom:$kotlinWrappersBomVersion"))
implementation("org.jetbrains.kotlin-wrappers:kotlin-react")
implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom")
implementation("org.jetbrains.kotlin-wrappers:kotlin-css")
implementation("org.jetbrains.kotlin-wrappers:kotlin-mui")
}
}
}
Впрочем не смотря на составленные списки дружественных зависимостей, все равно не все библиотеки устанавливались без ошибок. Но мне повезло и основные необходимые для моего проекта заработали.
Следующей задачей стало установка библиотек vk-bridge и vk-tunnel. К сожалению для них Jet Brains не создал обертки и их пришлось устанавливать через следующий синтаксис зависимостей:
implementation(npm("@vkontakte/vk-bridge", "2.14.1"))
implementation(npm("@vkontakte/vk-tunnel", "0.2.0"))
implementation(npm("@vkontakte/vk-miniapps-deploy", "0.1.7"))К сожалению, в документации vk нет ничего об использовании кода на Kotlin и меня ожидала череда экспериментов по внедрению этих библиотек в код.
Первой задачей было запустить vk-bridge. Для этого необходимо создать отдельный файл для импорта который я назвал VkBridge.kt и написать в нем следующий код:
@JsModule("@vkontakte/vk-bridge")
@JsNonModule
external object VkBridge{
@JsName("default")
object Default {
fun send(method: String): dynamic
}
}Данный код создает объект с необходимыми нам методами для последующего использования данной библиотеки. Объект содержит вложенный объект с уникальным именем, которое мы даем в аннотации. В результате в классах использующих vk-bridge открывается возможность обращаться к методам данной библиотеки. В частности, запуск библиотеки:
VkBridge.Default.send("VKWebAppInit")Следующей библиотекой которую необходимо было запустить являлся vk-tunnel (впрочем для разработки можно обойтись и без него, но если хотим наблюдать за изменениями работы кода непосредственно из вк, то он нужен).
Так как vk-tunnel запускается из терминала, то необходимости создавать класс для импорта нет. Но данная библиотека для работы требует некоторых параметров. В Intellij IDEA при работе с Kotlin JS не создается файл package.json, а именно он нужен для выполнения команды терминала. На самом деле данный файл создается при сборке проекта и находится в …build\js\ и непосредственно мы туда напрямую не можем добавить то что нужно. Для терминала же требуется чтобы он был непосредственно в папке проекта. Как решить эту проблему? Для этого был предусмотрен следующий механизм Gradle.
kotlin {
js(IR) {
binaries.executable()
browser {
commonWebpackConfig {
cssSupport.enabled = true
}
}
compilations["main"].packageJson {
customField("scripts",mapOf(
"tunnel" to "vk-tunnel --insecure=1 --http-protocol=https --ws-protocol=wss --host=localhost --port=8080 --timeout=5000 --app_id=5------1",
"start" to "cross-env PORT=8080 HTTPS=true react-scripts start",
"deploy" to "vk-miniapps-deploy --app_id=5------1"
))
}
}
}
Когда мы откроем файл из папки …build\js\ то мы увидим, что теперь параметры vk-tunnel, vk-miniapps-deploy и др. находятся там где нужно. Вышенаписанный код является образцом добавления записей в json и может быть использован для других ситуаций. Но, добавление необходимых библиотек и записей не позволило запускать vk-tunnel без ошибок. Потребовалось скопировать package.json в папку приложения.
В итоге, после предварительной настройки и создания пары компонентов настала пора попробовать сделать deploy приложения. И вот здесь меня ждала неудача. Код компилировался, пытался залиться на хостинг, но я неизменно получал unknown_error (что в итоге послужило основой для заголовка статьи). Возможно, мне оставалось совсем чуть чуть до достижения положительного результата (вершины), но я не смог найти причину такой ошибки, а время не терпело и мне все же пришлось перейти на Rect.
К сожалению, у меня не получилась полная рекомендация как разрабатывать в vk на Kotlin JS, но надеюсь отдельные решения задач будут полезны, тем кто решится на использование Kotlin JS в своих проектах.
