ภาษา Kotlin นั้นสามารถพัฒนาระบบงานได้ทั้ง
Mobile app, Backend system และ Frontend application
ซึ่งมีความน่าสนใจทั้งสามส่วน
แต่ในบทความนี้จะเน้นไปที่ Front-end application

เนื่องจากไปอ่านเอกสารใน web ของ Kotlin แล้ว
มีแต่การสอนใช้งานผ่าน IDE, Apache maven, Gradle

ทำไมไม่สอนการพัฒนาตามแนวทางของ Front-end developer/Javascript developer บ้างนะ ?

ดังนั้นจึงลองมาสร้างระบบงานง่าย ๆ ด้วย NPM หรือ Yarn หรือ Grunt กันดีกว่า

สิ่งที่ต้องติดตั้งก่อนคือ

  • Kotlin
  • NPM

1. ทำการสร้าง Javascript project ขึ้นมา

2. จากนั้นลองทำการติดตั้ง Grunt cli เพื่อมาช่วยให้ระบบการ build ดูดีขึ้น

ซึ่งเราจะต้องสร้าง Gruntfile.js ขึ้นมา
เพื่อกำหนดการทำงานตามใจเราดังนี้
1. ทำการแปลง code จาก Kotlin ให้มาอยู่ในภาษา Javascript ด้วยคำสั่ง kotlinc-js
2. จากตัวอย่างนี้ผลการทำงานจะอยู่ในไฟล์ชื่อว่า hello.js
3. ทำการ copy ไฟล์ต่าง ๆ เช่น HTML, CSS และ Javascript ไปไว้ใน folder ชื่อว่า dist

3. ทำการสร้างระบบที่เราต้องการนิดหน่อย

ตามธรรมเนียมก็ต้อง Hello world สินะ
สิ่งที่ต้องการเป็นดังนี้

  • ใน method ที่เราต้องการจะพัฒนาด้วยภาษา Kotlin
  • method ชื่อว่า say() รับค่า 1 ตัวคือชื่อ
  • ผลการทำงานของ method say() คือ กล่าวคำทักทายว่า Hello + ชื่อที่ส่งเข้ามา

สามารถเขียนได้ดังนี้

คำอธิบาย
สิ่งที่เพิ่มมานิดหน่อยคือ @JsName สำหรับการระบุชื่อของ method ไปเลย
เพื่อไม่ให้ kotlin compiler ทำการแปลงไปเป็นชื่อที่ต่อด้วย random number
ทำให้เราสามารถเรียกใช้งานผ่านชื่อ method say() ได้เลย

สุดท้ายก็ทำการ run ด้วยคำสั่ง

$grunt

จะทำการแปลง code จากภาษา Kotlin ไปเป็นภาษา Javascript
และ copy ไฟล์ต่าง ๆ ที่เราต้องการไปยัง folder dist ให้

จากนั้นทำการ run ดูผ่าน web จะแสดงผลดังนี้
start server ด้วยคำสั่ง

$grunt connect

แสดงผลการทำงานดังนี้

เพียงเท่านี้ก็สามารถพัฒนา Frontend application ด้วยภาษา Kotlin ได้แล้วนะ
สามารถดูตัวอย่าง code ได้ที่ Github::Up1::Kotlin for fronted developer