ลองพัฒนา Web application ด้วยภาษา Kotlin หน่อยสิ

ภาษา 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 ขึ้นมา

[gist id="9a1ef6293af18fc9c67670b1223b591b" file="package.json"]

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

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

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

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

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

สามารถเขียนได้ดังนี้ [gist id="9a1ef6293af18fc9c67670b1223b591b" file="hello.kt"] คำอธิบาย สิ่งที่เพิ่มมานิดหน่อยคือ @JsName สำหรับการระบุชื่อของ method ไปเลย เพื่อไม่ให้ kotlin compiler ทำการแปลงไปเป็นชื่อที่ต่อด้วย random number ทำให้เราสามารถเรียกใช้งานผ่านชื่อ method say() ได้เลย สุดท้ายก็ทำการ run ด้วยคำสั่ง [code] $grunt [/code] จะทำการแปลง code จากภาษา Kotlin ไปเป็นภาษา Javascript และ copy ไฟล์ต่าง ๆ ที่เราต้องการไปยัง folder dist ให้ จากนั้นทำการ run ดูผ่าน web จะแสดงผลดังนี้ start server ด้วยคำสั่ง [code] $grunt connect [/code] แสดงผลการทำงานดังนี้ เพียงเท่านี้ก็สามารถพัฒนา Frontend application ด้วยภาษา Kotlin ได้แล้วนะ สามารถดูตัวอย่าง code ได้ที่ Github::Up1::Kotlin for fronted developer