[Kotlin Release Notes] Embedding Kotlin Playground

2018년 4월 27일

 

fun main(args : Array<String>) {
    println("Hello Kotliner!")
    println("Click this green button at the top right!")
}

 

네, 이 블로그 글에는 실행 가능한 Kotlin 코드 스니펫이 내장되어 있습니다. 코드를 실행하는 것뿐만 아니라 코드를 변경할 수도 있습니다.

 

// The code below doesn't compile. Add only one char to make it runnable again
fun main(args : Array<String>) {
    val fix = "Kotlin "
    val me = "is great"
    println(fixme)
}

 

멋지죠? 자동 완성도 작동합니다.

 

때로는 스니펫의 모든 코드를 표시하고 싶지 않을 수 있습니다. 대신 가장 흥미로운 부분만 표시하고 싶을 수 있습니다. 이 역시 가능합니다.

 

val hint = "Click the plus button to see the full code"
println (hint.length)

 

테스트도 추가할 수 있습니다.

 

// Implement extension functions Int.r() and Pair.r()
// and make them convert Int and Pair to RationalNumber.

fun Int.r(): RationalNumber = TODO()
fun Pair<Int, Int>.r(): RationalNumber = TODO()

data class RationalNumber(val numerator: Int, val denominator: Int)

 

JavaScript를 대상으로 사용하거나 캔버스에 그림을 그릴 수도 있습니다.

 

val state = CanvasState(canvas).apply {
    addShape(Kotlin)
    addShape(Creature(size * 0.25, this))
    addShape(Creature(size * 0.75, this))
}
window.setTimeout({ state.valid = false }, 1000)
// You can drag this objects

 

실행 가능한 예제가 필요하지 않거나 만들 수 없는 경우 하이라이트 전용 속성을 적용하여 스니펫을 동일한 스타일로 가져올 수 있습니다.

 

val simpleText1 = "It's just an ordinary Kotlin snippet"
...
val simpleText239 = "It doesn't compile actually"

 

내장된 Kotlin 플레이그라운드와 작동 방식

역사적으로 많은 입문자들이 언어를 배우는 대화식 방법으로 try.kotlinlang.org를 사용해왔습니다. 특히 Kotlin Koans 온라인이 매우 인기 있습니다. 더 고급 사용자들은 이 플레이그라운드를 IDE를 열지 않고 작은 스니펫을 시도하기 위해 사용합니다. 예를 들어 StackOverflow에 코드를 붙여넣기 전에 작성해보는 용도로 말이죠.

내장된 Kotlin 플레이그라운드는 동일한 기술을 사용하지만 코드를 작성하고 웹 페이지에서 샘플을 실행할 수 있게 해줍니다. 코드를 백엔드 서버에서 컴파일한 다음 브라우저에서 실행하거나 (대상 플랫폼이 JS인 경우) 또는 서버에서 실행할 수 있습니다 (대상을 JVM으로 설정한 경우).

프론트엔드

내장된 Kotlin 플레이그라운드를 추가하는 것은 페이지 헤더에 단일 라인을 작성하는 것만큼 간단합니다:

 

<script src="https://unpkg.com/kotlin-playground@1" data-selector="code"></script>

이제 페이지의 모든 코드 블록이 실행 가능한 Kotlin 스니펫으로 변환됩니다. 물론 data-selector는 사용자 정의 가능하며, 특정 클래스에만 스크립트를 적용할 수 있습니다. Kotlin 플레이그라운드를 수동으로 구성하는 옵션도 있습니다:

 

<script src="https://unpkg.com/kotlin-playground@1"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
  KotlinPlayground('.code-blocks-selector');
});
</script>

다양한 설치 및 사용자 정의 옵션도 많이 있습니다. 자세한 내용은 문서를 읽어보세요.

백엔드

플레이그라운드의 백엔드 부분은 코드를 컴파일하고 완성 및 하이라이팅 정보를 제공합니다. 일반적으로 백엔드에 대해 걱정할 필요가 없으며, 사용자 정의 JVM 라이브러리를 참조하려는 경우를 제외하고는 우리의 서버와 함께 사용하면 됩니다.

일부 외부 라이브러리를 사용하는 예제를 작성하려면 예를 들어 라이브러리에 대한 대화식 문서를 작성하는 경우 플레이그라운드 백엔드의 인스턴스를 구성하고 실행해야 할 수 있습니다. 이를 수행하는 것은 매우 쉽습니다. 종속성을 추가하고 두 가지 사전 정의된 Gradle 작업을 실행하고 docker-compose up을 실행하기만 하면 서버가 실행됩니다. 자세한 내용은 이 지침을 참조하십시오.

이미 사용 중인 곳

 

이 기술을 이미 공식 웹 사이트의 Kotlin 문서 작성에 사용하고 있습니다. 새로운 문서 조각은 실행 가능한 샘플을 사용하여 작성됩니다(기본 구문, 1.1 및 1.2에서의 새로운 내용, 람다 및 코루틴 참조). 표준 라이브러리의 일부 함수의 경우 라이브 예제도 있습니다(groupBy 참조).

Kotlin By Example은 Kotlin-Playground 라이브 샘플을 사용하여 작성되었습니다.

또한 WordPress용 플러그인을 출시했습니다. [kotlin] 단축 코드를 추가하여 인터랙티브한 Kotlin 플레이그라운드를 게시물에 임베딩할 수 있습니다. 이 페이지의 모든 샘플은 이 플러그인을 사용하여 작성되었습니다.

 

Kotlin 포럼에서는 markdown 구문으로 run-kotlin 언어를 사용하여 질문에 답할 수 있습니다. 완전한 정확성이 보장됩니다.

 

어디에 사용될 수 있는가

Kotlin Playground은 코드 예제의 독서 경험을 향상시키고 표현력을 높입니다. 독자들은 코드를 보기만 하는 것뿐만 아니라 실행하고 변경하고 놀아보고 다시 실행할 수 있습니다. 우리는 모든 작성자들에게 실행 가능한 Kotlin 스니펫을 사용할 것을 권장합니다. 특히 다음과 같은 경우:

• 학습 과정
• 슬라이드 및 책의 보충 자료
• 라이브러리 및 프레임워크의 문서
• 블로그 글의 예시

 

나중에는 Kotlin Playground에서 스크립팅도 지원할 예정입니다.

 

원문

 

https://blog.jetbrains.com/kotlin/2018/04/embedding-kotlin-playground/