Yazılım geliştirme süreçlerinde kullandığımız kod derleyici programlar, eğer bilgisayarınızın donanımı güçlü değilse, yazılımcıyı çok fazla uğraştırabilir. Bu durum ciddi enerji ve zaman kaybına sebep olur. Bazı tool’lar bizi bu gibi sıkıntılardan kurtarıp, kod geliştirmeyi kolaylaştırmıştır.

Bu makalede Kotlin kodunuzu JVM, JS, CANVAS ve JUNIT yapılarını kullanarak çalıştırmanıza ve başkalarıyla paylaşmanıza kolaylık sağlayan online bir kod düzenleyicisi Kotlin Playground tool’u anlatacağım.

Kotlin Playground tool nedir? Ne işe yarar?

Kotlin Playground, kod derleyicisi veya IDE gibi programlar kullanmadan bir web sitesi üzerinden Kotlin kodlarınızı oluşturmanıza, çalıştırmanıza ve başkalarıyla paylaşmanıza olanak tanıyan yardımcı bir araçtır.

Kodlar ve test fikirleriyle denemeler yapmanıza izin verir. Bir programlama dilinde yeniyseniz, derleyici veya IDE gibi araçlar yüklemenize gerek kalmadan size hızlı bir şekilde yardımcı olur.

Bu makalede Kotlin Playground kullanarak şunları öğreneceğiz.

• Playground, kodlarınızı çalıştırdığında JVM, JS, CANVAS ve JUNIT yapılarıyla destelediğini
• Kodlarınızı kolaylıkla başkalarıyla paylaşmayı
• Çalıştırılabilir kodu bir web sitesine yerleştirmenize olanak tanır.

Kotlin Playground tool kullanımı

Bu aracı kullanabilmek için https://play.kotlinlang.org/ linkini açmanız gerekir.

Kodu oluşturmak ve çalıştırmak için sağda bulunan RUN ikonuna  tıklayın. 

Sonuç şu şekilde gözükecektir:

Ayarları Düzenleme

Kotlin Playground aracının farklı farklı özelliklerini kullanmak istiyorsanız, ayarlardaki alanları değiştirmeniz gerekir. Ayarlar bölümüne sağdaki  ikonundan ulaşabilirsiniz. Ayarlar ekranındaki alanlar;

• Kotlin Version: Programınızı oluşturmak için sürümü seçeceğiniz alan
• Program arguments: main fonksiyonunun parametresinden gelecek değeri girdiğimiz alan
• Target Platform: Yazdığınız kodun kullanacağı JVM, JS, CANVAS veya JUNIT yapılarından birini seçme bölümüdür.

Playground ‘da JVM yapısının kullanımı

Kotlin, farklı platformlarda çalışabilecek sihirli bir yeteneğe sahiptir. Bu bölümde, Kotlin kodunuz için target platform alanını değiştirmenin ne anlama geldiğini öğreneceksiniz. Ayarlar bölümünü açalım.

JVM target platform’u varsayılan olarak seçilidir. “Hello, world” örneğindeki gibi kodları JVM programını kullanarak çalıştırır.

Playground ‘da JS yapısının kullanımı

JavaScript’i Kotlin dilinde kullanabiliriz. Kotlin / JS, Node.js gibi sunucu tarafında web geliştirmeye ve jQuery ve React gibi istemci tarafında web geliştirmeye olanak tanır. Bu tür projelerde, Kotlin ve JavaScript’in birlikte çalışabilirliği ile ilgili birkaç şeyi denemek isterseniz, Kotlin Playground yardımcı olabilir.

Bu bölümde, JavaScript’i Kotlin’den çalıştırabilmek için target platform’u JS olarak değiştirmelisiniz.

Kodunuzu aşağıdaki gibi düzenleyin.

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

Bu kodu çalıştırdığınızda ikinci satırdaki kod; tarayıcınızda alert pencerisi açacaktır ve tarayıcınızda aşağıdaki gibi bir görüntü göreceksiniz.

JS console açınız. Eğer Windows işletim sistemi kullanıyorsanız, F12 tuşuna basarak console sekmesini açabilirsiniz. console.log metodu sonucunda aşağıdaki görüntüyü elde edersiniz.

Playground ‘da CANVAS yapısının kullanımı

HTML5, JavaScript’i kullanarak grafikler çizen Canvas adlı yeni bir öğeyi tanıttı. Basit statik grafikler ve animasyonlar oluşturmanıza ve hatta gerçek zamanlı video oluşturmanıza olanak tanır. Canvas ile etkileşim için Kotlin’i kullanabilirsiniz.

Playground, bir Canvas’ta çizim yapmanıza izin verir. Bu işlemi yapabilmek için ayarlardan target platformu CANVAS seçin ve Program arguments alanını silin.

Kodunuzu aşağıdaki kodla değiştirin.

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

// HTML Canvas başlatıp, yükseklik ve genilkli değerlerini body e ekledik
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() {
  //Yazı tipi ve boyutunu belirleyip, HTML Canvas'a Hello Canvas yazdık
  context.font = "30px Arial";
  context.fillText("Hello Canvas", 10.0, 50.0);
  
  //HTML Canvas'a kırmızı bir dikdörtgen çizdik
  context.fillStyle = "#FF0000";
  context.fillRect(200.0, 15.0, 50.0, 50.0);
}

Bu kodu çalıştırdığımızda aşağıdaki gibi bir görüntü elde ederiz.

HTML Canvas’ı Kotlin dilinde nasıl kullanabileceğimizi örneklendirdim. HTML Canvas hakkında daha detaylı bilgiyi bu dokümandan elde edebilirsiniz.

Playground ‘da JUNIT yapısının kullanımı

Kotlin Playground tool’da Kotlin testleri yazma, çalıştırma ve hangilerinin başarılı olup olmadığını görme seçeneğiniz de vardır. Bunu yapabilmek için ayarlardan target platformu JUNIT seçmeniz yeterlidir.

En son yazdığınız kodları silip, aşağıdaki kodu yazınız.

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

Üstteki kodu test edebilmek için, sayfanın en üst bölümüne aşağıdaki kodu ekleyin.

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)
  }
}

Test kodumuz ne gibi işler yapıyor:

1.  yorum tag bölümündeki test: Family sınıfının her bir Person nesnesini içerip içermediğini kontrol eder.

2.  yorum tag bölümündeki test: Person sınıfının lastname değerlerini birleştirip, Family’deki name parametresiyle aynı olup olmadığını kontrol eder.

Kodun çıktısı:

plus fonksiyonunu incelerseniz, problemin diğer person’u eklemek yerine kendisini diziye iki kez eklemesi olduğunu göreceksiniz. İşlevi aşağıdaki kodla değiştirerek düzeltebilirsiniz.

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

Playground ‘daki Kodların Paylaşımı

Kotlin Playground’ da yazmaya devam ettiğiniz kodları, herhangi bir program kullanmadan diğer insanlarla paylaşıp, kod takibi yapmalarını sağlayabilirsiniz. Bu işlemi yapabilmek için sağdaki ikonuna tıklamalısınız. Sonrasında aşağıdaki ekran açılacaktır.

Bu resimde kırmızı ile belirtiğim ikonu tıklayıp, kodun bulunduğu linki kopyalayıp, paylaşmak istediğiniz kişiye gönderebilirsiniz.

JS Script ile Playground ‘daki Kodları Siteye Ekleme

Web sitenizde Playground’ da yazdığınız Kotlin kodunu çalıştırılabilir halini gösterme imkanınız bulunmaktadır.  HTML’ye bir JS komut dosyası ekleyerek bu işlemi yapabilirsiniz. Dilerseniz web site testinizi https://codepen.io/pen/ gibi çalışma alanında yapabilirsiniz. Bir örnek yapalım.

HTML alanına aşağıda anlattığım gibi kodları ekleyelim.

1- İlk önce Playground scriptini ekleyelim.

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

2- Scriptin hemen altına, code tag leri arasına Kotlin kodumuzu ekleyelim.

<code>
fun main() {
  println("Hello Embedded World!!!")
}  
</code>

Bu işlemin çıktısı aşağıdaki resmin sağındaki gibi olacaktır.

Dilerseniz Play butonuna tıklayarak, sitenizde Kotlin kod çıktısını görebilirsiniz.

Kotlin Playground hakkında daha detaylı bir bilgi edinmek isterseniz, dokümantasyon sayfasını inceleyebilirsiniz.

Kaynak

1- https://www.raywenderlich.com/16929465-kotlin-playground-getting-started#toc-anchor-007