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

Копошилка

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

В этом туториале по знакомству с плейграундом Kotlin вы узнаете, как использовать этот онлайн-инструмент для написания, запуска и публикации кода для различных таргетов, таких как JVM, JS и JUNIT.

Плейграунд (песочница)- это онлайн-редактор кода, который позволяет вам писать, создавать, запускать и делиться своим кодом с другими. Он позволяет вам экспериментировать с кодом и тестировать идеи. Это особенно полезно, если вы новичок в языке программирования, потому что вам не нужно устанавливать инструменты, такие как компилятор или IDE. В этом руководстве вы узнаете, как использовать JetBrains Kotlin Playground.
Вы научитесь:

  • Запускать код в плейграунде, используя таргеты JVM, JS, CANVAS и JUNIT.
  • Делиться своим плейграундом с другими.
  • Встраивать плейграунд в веб-сайты.

Заметка

В этом туториале предполагается, что у вас есть опыт разработки на Kotlin. Если вы не знакомы с языком, сначала просмотрите наш туториал по Kotlin для Android.

Приступим

Чтобы открыть плейграунд, перейдите по ссылке https://play.kotlinlang.org/, где увидите следующее:

Обратите внимание, что для вас уже написана программа Hello World.

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

 

Вы увидите следующее:

Поскольку это консольное приложение, оно будет выводить Hello, world!!! в выводе консоли.

Изменение настроек

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

Нажмите на Settings справа:

Вы увидите следующее:

Вот что означают эти настройки:

  • Kotlin Version: выберите версию для сборки вашей программы.
  • Program arguments: установите входные аргументы для вашей основной функции.
  • Target Platform: выберите JVM, JS, CANVAS или JUNIT в качестве таргета для написанного кода.

Вы начнете с передачи аргументов в ваше приложение.

Установка аргументов программы

Один из способов протестировать код Kotlin - передать аргументы в ваш плейграунд.
Введите имена, разделенные пробелами:

Теперь измените main, чтобы получить эти аргументы:

fun main(args: Array) {
  println("Hello " + args)
}

Запустите программу, и вы увидите следующее:

Лучше показывать имена через запятую, правда? Сделайте это, добавив точку справа от параметра args, и вы увидите следующее:

В плейграунде есть автозаполнение кода. Выберите или введите joinToString(), чтобы получить желаемый результат:

Ваш код должен выглядеть так:

fun main(args: Array) {
  println("Hello " + args.joinToString())
}

Снова запустите плейграунд и увидите следующий результат:

 

Отлично! Теперь, когда вы можете передавать аргументы в свой плейграунд, вы можете поиграться с изменением рантайма виртуалки.

Использование JVM в качестве целевой платформы

Котлин обладает волшебной способностью работать на разных платформах. В этом разделе вы узнаете, что означает для вашего кода на Kotlin изменение целевой платформы.

Снова нажмите Settings:

 

Обратите внимание, что целевая платформа JVM уже выбрана.

Это дефолтная целевая платформа. Он используется для запуска программ JVM, таких как измененное вами консольное приложение Hello World.
В следующих разделах вы измените целевую платформу, чтобы запускать JavaScript, рисовать в Canvas и даже запускать юнит тесты.

Использование JS в качестве целевой платформы

Можно вызывать JavaScript из Kotlin и наоборот.
Kotlin/JS обеспечивает веб-разработку на стороне сервера, например Node.js, и разработку на стороне клиента, например jQuery и React. В проектах такого типа вы захотите попробовать что-то, основанное на связи и взаимодействие Kotlin и JavaScript. В этом вам может помочь плейграунд Kotlin.

В этом разделе вы измените целевую платформу на JS для запуска JavaScript из Kotlin.

Выберите JS в качестве целевой платформы:

 

Замените ваш код следующим:

fun main(args: Array) {
  console.log("Hello " + args.joinToString())
    
  js("alert(\"This is an alert\")")
}

Запустите ваш код, и вы увидите фразу This is an alert (Это предупреждение) в вашем браузере в результате выполнения второй строки:

Откройте JS console. Если вы используете Chrome, нажмите Option-Command-J на macOS или Shift-Control-J на Windows/Linux, и вы увидите свой список имен в результате выполнения первой строки:

Заметка

Если вы попытаетесь запустить этот код, используя таргет JVM, вы получите ошибки компиляции, потому что console и js, как неразрешенные ссылки, работают только при использовании таргета JS.

Использование CANVAS в качестве целевой платформы

HTML5 представил новый элемент под названием Canvas, рисующий графику с помощью JavaScript. Он позволяет создавать простую статическую графику и анимацию и даже рендерить видео в реальном времени. Вы можете использовать Kotlin для взаимодействия с Canvas.
Плейграунд позволяет рисовать в Canvas. Зайдите в Settings и выберите CANVAS в качестве целевой платформы. Удалите аргументы программы:

Замените код следующим:

import org.w3c.dom.CanvasRenderingContext2D
import org.w3c.dom.HTMLCanvasElement
import kotlin.browser.document
import kotlin.browser.window

// 1
val canvas = initalizeCanvas()
fun initalizeCanvas(): HTMLCanvasElement {
  val canvas = document.createElement("canvas") as HTMLCanvasElement
  val context = canvas.getContext("2d") as CanvasRenderingContext2D
  context.canvas.width  = window.innerWidth.toInt();
  context.canvas.height = window.innerHeight.toInt();
  document.body!!.appendChild(canvas)
  return canvas
}

val context: CanvasRenderingContext2D
  get() {
    return canvas.getContext("2d") as CanvasRenderingContext2D
  }
    
fun main() {
  // 2
  context.font = "30px Arial";
  context.fillText("Hello Canvas", 10.0, 50.0);
  
  // 3  
  context.fillStyle = "#FF0000";
  context.fillRect(200.0, 15.0, 50.0, 50.0);
}

Вот что вы только что сделали:

  1. Инициализировали холст HTML и добавили его в тело райнтайма body.
  2. Установили шрифт и написали «Hello Canvas» на HTML Canvas.
  3. Нарисовали красный прямоугольник на холсте HTML.

Запустите, и вы получите следующее:

Вы только слегка прикоснулись к тому, что можно делать с HTML Canvas. Если вам интересно узнать больше, ознакомьтесь с официальной документацией. Далее вы узнаете, как запускать тесты Kotlin в плейграунде.

Использование JUNIT в качестве целевой платформы

У вас также есть возможность писать юнит тесты, запускать их и видеть, какие из них прошли, а какие нет. Зайдите в Settings и выберите JUNIT в качестве целевой платформы.

Удалите весь код и замените его следующим:

data class Family(val name: String, val people: Array)
data class Person(val lastname: String) {
  operator fun plus(person: Person): Family {
    return Family(
      lastname + " " + person.lastname, 
      arrayOf(this, this)
    )
  }
}

Выше вы закодировали Family и Person с операторной функцией plus, которая создает Family, когда вы добавляете два объекта Person.

Чтобы протестировать эти классы, добавьте вверху следующий код:

import org.junit.Assert
import org.junit.Test

class PersonTest {
  // 1
  @Test
  fun `Person + Person should create Family containing each Person`() {
    val personOne = Person("Cortazzo")
    val personTwo = Person("Sproviero")
        
    val family = personOne + personTwo
        
    Assert.assertEquals(arrayOf(personOne, personTwo), family.people)
  }

  // 2
  @Test
  fun `Person + Person should create Family concatenating lastnames`() {
    val personOne = Person("Cortazzo")
    val personTwo = Person("Sproviero")
        
    val family = personOne + personTwo
        
    Assert.assertEquals("Cortazzo Sproviero", family.name)
  }
}

Вот что вы только что сделали:

  1. Первый тест проверяет, что Family содержит каждый объект Person.
  2. Второй тест подтверждает, что фамилия соответствует правильно, путем конкатенации каждой фамилии Person.

Запустите  тесты, и вы получите следующее:

Один из них фейлится. Изучив функцию plus, вы обнаружите, что проблема в том, что функция дважды добавляет себя в массив вместо добавления другого человека. Исправьте это, заменив функцию следующим кодом:

operator fun plus(person: Person): Family {
  return Family(
    lastname + " " + person.lastname, 
    arrayOf(this, person)
  )
}

Снова запустите плейграунд. На этот раз пройдут оба теста.

Делимся ссылкой на плейграунд

Эта мощная функция позволяет вам поделиться кодом, который вы написали в плейграунде с другими. Это полезно:

  • Когда вы просматриваете код пулл реквеста, вы можете использовать эту функцию, чтобы прокомментировать и объяснить что-то тому, у кого есть работоспособный код.
  • Другие могут попробовать ваш код, не устанавливая инструменты, чтобы посмотреть, как он работает.

Чтобы поделиться кодом плейграунда, нажмите Share:

Вы увидите следующее:

Вы можете поделиться этой ссылкой с кем-нибудь еще, кто сможет запустить и проверить ваш код.

Встраиваем плейграунд

Эта функция позволяет вам встраивать исполняемый код прямо в свой блог или веб-сайт.
Выберите Share ▸ Embed, чтобы получить iframe, который можно вставить на свой веб-сайт:

Вместо этого выберите Share ▸ Medium и вы получите ссылку для встраивания в Medium.

Заметка

На момент написания статьи iframe, ссылка в Medium и переход по этому URL-адресу в браузере не всегда работают. Проблема, направленная на решение этой проблемы, открыта в репозитории.

Встраивание с помощью JS-скрипта

Альтернативный способ встроить плейграунд - это  включить JS-скрипт в HTML.
Откройте веб-плейграунд, например https://codepen.io/pen/, и вставьте следующее:

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

Затем вставьте следующий код:
fun main() {
  println("Hello Embedded World!!!")
}

И вы получите следующее:

 

Нажмите зеленую кнопку Play, чтобы запустить его.

У вас есть возможность настроить версию компилятора, аргументы, таргет и другие функции. Для получения дополнительной информации перейдите к документации Kotlin Playground.

Имейте в виду, что, поскольку вы пишете HTML, вам нужно избегать сущностей HTML, включая символы «меньше» и «больше».
Например, чтобы получить аргументы, добавьте в main следующее:

fun main(args: Array<String>) {
  println("Hello Embedded World!!! " + args.joinToString())
}

Вы получите следующее:

Поздравляю! Теперь вы знаете, как использовать плейграунд Kotlin!

Комментарии

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: