NativeScript ตอน 1 ลองติดตั้งและทดสอบ

เร็วๆนี้ได้รู้ข่าวเครื่องมือในการพัฒนา Mobile app ตัวใหม่ ชื่อ NativeScript ที่อ้างว่าเป็น multi-platform แต่สามารถสร้าง app แบบ native ได้ ซึ่งปกติแล้วไม่เคยเจอมาก่อน ที่ผ่านมาเคยใช้แต่ Apache Cordova และกำลังจะลอง ionic framework ซึ่งทั้งสองอันก็อาศัยหลักการคล้ายๆกันคือรันผ่าน WebViews และมักจะถูกมองว่าช้ากว่า native app ดังนั้น เมื่อมีเทคโนโลยีใหม่มาล่อตาล่อใจก็คงต้องลองดูกันหน่อย

ว่าแล้วก็ไปที่เว็บไซต์ของ NativeScript กันก่อน แล้วไปลองอ่านดูรายละเอียดเบื้องต้น

อืม Cross-platform, Native and Fast, เขียนด้วย xml + JavaScript และ Open source มันจะดีงามอะไรขนาดนั้น มีข้อจำกัดหลักๆก็คือ ใช้ได้กับ Android platform ที่ 4.0 เป็นต้นไป ก็ยังโอเคอยู่ ลองเลยดีกว่า

สมมติว่าเราจะติดตั้งบน Windows และเน้นไปที่ Android platform ก็แล้วกันนะครับ ลองดูคู่มือที่นี่ได้

ขั้นตอนการติดตั้ง (ต้องต่อเน็ตอยู่ด้วยนะครับ)
1. ถ้ายังไม่มี JDK ก็ติดตั้งซะ

2. ดาวน์โหลด Android SDK มาติดตั้ง สมมติว่าของผมอยู่ที่ D:\android\android-sdk-windows

3. ติดตั้ง node.js ตอนลงอย่าลืมให้มันกำหนด path ให้อัตโนมัติด้วย

4. กำหนด Environment variables ให้เครื่องเราได้แก่
JAVA_HOME เช่น C:\Program Files\Java\jdk1.8.0_20
ANDROID_HOME เช่น D:\android\android-sdk-windows

และ ถ้าต้องการ ก็เพิ่ม path ของ Android ไปด้วยเลย
%ANDROID_HOME%\tools; %ANDROID_HOME%\platform-tools

5. ติดตั้ง NativeScript CLI (Command line interface) โดยเรียก command prompt แล้วใช้คำสั่ง
npm install -g nativescript
ซึ่งตัว -g ก็คือให้ติดตั้งแบบ global ซึ่งใครๆก็เรียกใช้ได้
แล้วก็รอๆๆๆ ระหว่างทางอาจมีการถามว่าจะส่งข้อมูลให้ผู้พัฒนาไหม ก็เลือกตามใจชอบ ถ้าไม่คิดอะไรมากก็กด n ไป จนเรียบร้อย

6. ทดสอบการติดตั้ง โดยพิมพ์คำสั่งที่ command prompt ว่า
tns doctor
ถ้ามีคำเตือนต่างๆ ก็ลองทำตามที่เค้าบอกดู ตัวอย่างเช่นโปรแกรมอาจจะบอกว่า Android Build Tools มันเวอร์ชันต่ำไป ต้องการเวอร์ชันนี้ บลาๆๆๆ ก็ไปอัพเดทซะ

หลังจากนั้น  ปิดและเปิด command prompt ใหม่ แล้วลองเรียก tns doctor อีก ถ้าไม่มีคำเตือนอะไร น่าจะขึ้นข้อความว่า
"No issues were detected"

ทดสอบสร้างแอพ
ลองมาสร้างแอพโดยใช้ default template กันครับ
1. เปิด command prompt แล้วย้ายไปยังโฟลเดอร์ที่เราต้องการเก็บ source code เช่น D:\Codes\nativescript ด้วยคำสั่ง cd

2. สร้างโปรเจคชื่อ HelloWorld ด้วยคำสั่ง
tns create HelloWorld

ถ้าสำเร็จ ก็จะเกิดโฟลเดอร์ชื่อตามโปรเจคนี้

3. เพิ่ม Android platform เนื่องจากเราจะทดสอบบนระบบนี้ (ตอนนี้ต่อเน็ตด้วยนะครับ)
cd HelloWorld
tns platform add android

4. ตรวจสอบดูว่าเราเชื่อมต่อกับ emulator หรือ device แล้วหรือยังโดยใช้คำสั่ง
adb devices
หรือ
tns device
(เรียกใช้ครั้งเดียวตอนแรกสุดก็พอ)
ซึ่งน่าจะมีรายการอุปกรณ์แสดงให้เห็น เช่น


5. รันเพื่อดูผลบน emulator เช่น Genymotion หรือ device (ต้องต่อเน็ตเพื่อโหลด gradle มา build ในครั้งแรกด้วยครับ ใช้เวลานานพอควร)
tns run android

อย่าลืมเปิดเครื่องให้อยู่ใน debug mode และยืนยันถ้ามีคำถามเมื่อเชื่อมต่อกับเครื่องด้วย
(ถ้าต้องการรันบน Android emulator ที่มากับ SDK ก็ใช้คำสั่ง tns run android --emulator แทน)

6. ผลลัพธ์ที่ได้

 

ถ้าต้องการยกเลิกการรัน ให้กด CTRL+ C ที่ command prompt ครับ

จากการทดสอบใช้แอพดังกล่าว ยังไม่เห็นความเร็วที่แตกต่างกับ hybrid platform ตัวอื่นเท่าไหร่ เดี๋ยวลองสร้างแอพที่ซับซ้อนขึ้นคงจะเห็นผลบ้างครับ

การสร้าง Javadoc

Javadoc คืออะไร มีไว้ทำไม
-คือการสร้างเอกสารที่อธิบายรายละเอียดของ source code ของ Java ซึ่งรวมถึงคลาส (คลาส, ตัวแปร และ method ของคลาส) ฯลฯ ซึ่งเมื่อสร้างออกมาแล้วก็จะเป็นไฟล์ html ที่เปิดดูได้ด้วยเว็บบราวเซอร์ทั่วไป

-มีไว้เพื่อสร้างคำอธิบายต่างของโค้ดโดยอัตโนมัติ ทำให้เมื่อเรากลับมาดูโค้ดก็จะเข้าใจง่ายขึ้น

ตัวอย่าง
-ก็เหมือนหน้าตา api หรือ reference ต่างๆในเว็บของ Oracle เช่น Class Math (https://docs.oracle.com/javase/7/docs/api/java/lang/Math.html)

จะสร้างอย่างไร
ใช้เครื่องหมาย
/**
* your explanation here
*/
ใส่ไว้ก่อนโค้ดที่ต้องการอธิบาย

โครงสร้าง
อาจจะแบ่งออกได้เป็น 3 ส่วนคือ
1. ส่วนที่เป็นคำอธิบายโค้ด เช่น คลาส โดยทั่วไป มักจะมีรายละเอียดเช่น คลาสนี้มันมีวัตถุประสงค์เพื่ออะไร ชื่อนักพัฒนา เวอร์ชัน ณ ปัจจุบัน วันที่เริ่มทำ ฯลฯ มีแท็กที่นิยมคือ

@author ชื่อนักพัฒนา
@version เวอร์ชัน ณ ปัจจุบัน
@since วันที่เริ่มทำ
ตัวอย่าง

/**
 * Robot class
 * <p>
 * A class to simulate a robot 
 * <p>
 * @author Surapong
 * @version 1.0
 * @since 2016-03-16
 */

2. คำอธิบายตัวแปร
ตัวอย่าง

/**
* The height of the robot
*/
private double height = 1.90;

3. คำอธิบาย method

ซึ่งจะมีแท็กที่นิยมใช้คือ 

@param สำหรับอธิบายพารามิเตอร์

@return สำหรับอธิบายชนิดของข้อมูลที่ส่งกลับ

ตัวอย่าง

 /**
  * 
  * @return height of the robot
  */
 public double getHeight() {
  return height;
 }
 
 /**
  * 
  * @param height Set the robot's height
  */
 public void setHeight(double height) {
  this.height = height;
 }

การสร้าง Javadoc ใน Eclipse

1. เพิ่มคำอธิบายด้วยเครื่องหมาย /**    */ ใน source code

2. เลือกเมนู Project / Generate Javadoc

3. เลือกรายละเอียดต่างๆ แล้วกด Finish

หมายเหตุ ถ้าอยากสร้าง Javadoc ของทุกตัวแปรทั้งชนิด private, protected และ public ให้เลือกตัวเลือกที่เขียนว่า Create Javadoc for members with visibility... แล้วเลือก private ครับ