ภาษา 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
