Vue.js ? Kotlin ??? ??? Android ?????? ??? ?? ? ?? ?

??? ??????? ??? ??? ??? ???? ??? ?? Android ?????? ??? ??????? ?? ? ?? ??? ?? ????. Android ?? ??? ? ??? ?? ??? ???? ?? ?????. ?? ? ? ?? Vue.js? Kotlin ??? ?? Android ?????? ??? ?? ???? ??? ?????. ? ????? Vue.js ? Kotlin ??? ???? Android ??????? ???? ? ?? ??? ???? ?? ?? ??? ?????.

1. ?? ?? ??

Android ?????? ??? ???? ?? ?? ?? ??? ???? ???. ?? ??? Android ?????? ?? ? ??? ??? ???? ??? ?? ?? ??? Android Studio? ???? ???. ??, Node.js? npm? ???? ???. Node.js? Chrome V8 ??? ???? ?? JavaScript ?? ????, ?? ?? ?? ???? ?? JavaScript ??? ?? ????? ??? ? ????. npm? JavaScript ?????? ???? ???? ? ???? Node.js? ??? ?? ?????. ????? Vue.js ???? ?? vue-cli? ???? ???.

??? ???? vue-cli? ???? ? Vue.js ????? ?? ? ????. ??? ??? ?? ?? ??? ?????.

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

2. Vue.js? Kotlin ??

1. Vue ???? ??

Kotlin ????? ?? Vue.js? ?? ???? ???? ???. ????? build.gradle ??? ?? ???? ??? ? ????.

implementation 'org.jetbrains.kotlinx:kotlinx-vuejs:0.2.2'
implementation 'org.jetbrains.kotlinx:kotlinx-html-js:0.2.2'
implementation 'org.jetbrains.kotlinx:kotlinx-metadata-jvm:0.2.2'

?? ?? Kotlin ???? Vue ????? ???? ?? ??? ??? ?????.

import kotlin.browser.document
import vue.Vue
import kotlin.js.Math

fun main(args: Array<String>) {
    Vue({
        el: "#app",
        data: {
            message: "Hello Vue.js!"
        }
    })
}

2. HTML? Vue ???? ??

HTML? file ?? Vue ????? ?? ???? app ID? ?? div ??? ???? ???.

<div id="app">
    {{ message }}
</div>

3. Android ??????? ?? ??

?? Android ?????? ????? ?? Android ??? ?? ???? ?? ??? ????. ??? ????? ???? ? ?? ?? ?? ?????.

1. Android ???? ??? ??

Kotlin ???? Android ???? ???? @JsName ??? ?? ??? ? ????. ??? ?????.

import kotlin.js.JsName

@JsName("callNativeMethod")
external fun callNativeMethod(): Unit

JavaScript ????? ? ??? ?? Android ???? ???? ??? ? ????.

window.callNativeMethod()

2. Android ???? ?? ??

Kotlin ????? Promise? ?? Android ???? ???? JavaScript ??? ??? ? ????. ?? ??:

import kotlin.js.Promise

@JsName("fetchData")
external fun fetchData(url: String): Promise<dynamic>

JavaScript ????? async/await ??? ???? Android ???? ??? ??? ? ????.

async function fetchData() {
    try {
        const data = await window.fetchData(url)
        console.log(data)
    } catch (error) {
        console.error(error)
    }
}

4. ?????? ??? ? ??

?????? ??? ??? ??? ??? ????? ???? ???. ??????. ?? Vue.js? ??? ??? vue-cli? ???? ???? ? ????. ???? ?? ??? ?????.

$ npm run build

???? ???? ??? dist ??? ?? ??? Android ????? ?? ????? ?????.

?? ?? Android Studio? ???? Android ????? ?? ??? ????? ??????. ????? ??? apk ??? ????? ????? ?? ??? ? ????.

??

? ?? ??? ?? ??? Vue.js? Kotlin ??? ???? Android ??????? ???? ? ?? ??? ??? ?? ?? ??? ??????. Vue.js ? Kotlin ??? ???? Android ??????? ?? ????? ???? ?? Android ??? ?? ??? ? ????. ? ??? Vue.js? Kotlin? ???? ???? ? ?? ?????? ?? ??? ???? ????? ??? ??? ????.

?? ??:

• Vue.js ?? ??: https://vuejs.org/
• Kotlin ?? ??: https://kotlinlang.org/
• Android Studio ?? ??: https://developer.android .com/studio/

? ??? Vue.js ? Kotlin ??? ???? Android ??????? ???? ?? ? ?? ?? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!