สร้าง Custom block ใน Snap!

Snap! (http://snap.berkeley.edu/) เป็นภาษาโปรแกรมที่มีการเขียนแบบลากวางเป็นบล็อคๆ ซึ่งเหมาะกับการใช้สอนการเขียนโปรแกรมเบื้องต้น เนื่องจากผู้เรียนแทบจะไม่ต้องจำว่าไวยากรณ์ของภาษาเป็นอย่างไร และแทบจะลดโอกาสความผิดพลาดเนื่องจากการพิมพ์ผิดหรือตกหล่น ซึ่งเป็นปัญหาสำคัญของผู้เริ่มเรียนเขียนโปรแกรม

Snap! พัฒนาต่อยอดมากจาก Scratch (https://scratch.mit.edu/) แต่มีข้อที่แตกต่างหลักๆก็คือ Snap! ถูกพัฒนาบนแพลตฟอร์ม HTML5 ในขณะที่ Scratch ทำงานบน Adobe Flash ซึ่งถ้าเครื่องไม่ได้ติดตั้งไว้ก็จะใช้งาน Scratch ไม่ได้

ข้อแตกต่างที่สำคัญอีกประการหนึ่งคือ Snap! สนับสนุนการสร้าง custom block ซึ่งก็คือชุดคำสั่งใหม่ จากคำสั่งที่มีอยู่แล้วได้ (จริงๆแล้ว Scratch ในปัจจุบันก็สนับสนุนแล้วบางส่วน)

สมมติว่าเราจะเอา Snap! ไปสอนจาวาเรื่อง loop ก็จะมีความสับสนกันบ้าง เพราะไวยากรณ์ของสองภาษาต่างกัน ตัวอย่างเช่น ถ้าเราต้องการวนลูปห้ารอบ
Snap!


Java
for(int i=1; i<=5; i++) {    
}

ซึ่งไวยากรณ์คนละแบบ สำหรับคนที่เริ่มเขียนโปรแกรมก็อาจจะแปลงไปมาได้ลำบาก

เราลองมาสร้าง custom block ของ Snap! ให้คล้ายๆจาวากัน

1. ใน Snap! คลิกเลือกแท็บ Variables (สีส้ม) แล้วเลือกปุ่ม Make a block ด้านล่าง
2. ตั้งชื่อและหมวดของ block เช่นตามรูป แล้วเลือก OK


3. คลิกเครื่องหมาย + ด้านขวาของ for


4. เลือกหัวข้อ Title text เพื่อเพิ่มข้อความ เช่น "i="
 

 5. คลิก + หลังคำว่า i= คราวนี้เลือก Input name ลองพิมพ์ชื่อกล่องที่จะเป็นตัวแปรของลูปไว้ เช่น start
 

6. ทำต่อเนื่องไปเรื่อยๆให้ครบพารามิเตอร์ของลูปคือ start, stop, step ก็จะได้รูปแบบนี้


7. ต่อไปเราจะเพิ่มส่วนที่เป็นเนื้อหาของลูป ซึ่งเมื่อกด + ต่อแล้ว พิมพ์ชื่อสมมติว่าเป็น content และคลิกลูกศรเล็กๆสีดำที่อยู่ทางขวามือ แล้วเลือกตามรูป


8. ต่อไปก็จะใช้ block ที่มีอยู่แล้วคือ repeat until เข้ามาช่วยให้ได้รูปตามนี้


9. สุดท้ายก็จะเกิด custom block ในหมวด Control ที่เราเลือกไว้ ลองลากมาใช้ได้ครับ


10. เราสามารถ export block นี้ แล้วไป import ใช้ภายหลังได้ครับ


ดูแล้วก็ไม่ยากเกินไป ลองไปเล่นดูกันได้ครับ

NativeScript ตอนที่ 5 การอ่านค่าจาก TextField และนำไปแสดงผลใน Label

ตอนนี้ก็ยังเป็นการยุ่งเกี่ยวกับ event แต่เพิ่มการรับค่าจาก TextField และ การอัพเดท Label ครับ

เป้าหมายที่เราต้องการคือ


และเมื่อป้อนข้อความและกดปุ่ม OK ค่าใน Label จะเปลี่ยนตามดังนี้


อันดับแรกเราก็จะแก้ไขไฟล์ hello.xml ใหม่เป็น

<Page loaded="pageLoad">
     <StackLayout>
        <Label id="lblHello" text="Hello World" class="title"/>
        <TextField id="tfName" hint="Your Name" />
        <Button text="OK" tap="showName" />
    </StackLayout> 
</Page>

และแก้ไขไฟล์ hello.js เป็น

//include module "view"
var viewModule = require("ui/core/view");
//variables for label and TextField
var lblHello, tfName;

//when page is loaded
exports.pageLoad = function(args) {
    //get current page
    var page = args.object;
    //get the view by ID
    lblHello = viewModule.getViewById(page, "lblHello"); 
    tfName = viewModule.getViewById(page, "tfName");
    //console.log(tfName.text);
}

//whent button is tapped
exports.showName = function() {
 //get value from TextField
    var name = tfName.text;
    if(name.length!=0) {
        lblHello.text = "Hello "+name;
    }
    else {
        lblHello.text = "Hello anonymous";
    }
}

เท่านี้ก็จะได้ผลลัพธ์ตามต้องการครับ

NativeScript ตอนที่ 4 Event เบื้องต้น

ตอนที่แล้วเราลองทำแค่ interface ง่ายๆ คราวนี้เราจะลองเพิ่ม event ง่ายๆกันดูครับ

เริ่มต้นด้วยในโปรเจคเดิม เราสร้างไฟล์ interface ใหม่ชื่อ hello.xml เพื่อแสดงข้อความบนหน้าจอ

คราวนี้เราจะลองเพิ่มโค้ดที่เป็น event เข้าไป โดยเริ่มจาก event ง่ายๆคือ "loaded" สำหรับ Page

ดังนั้น ในไฟล์ hello.xml เราก็จะเพิ่ม event "loaded" สำหรับ Page เข้าไปเป็น

<Page loaded="onLoad">
    <Label text="Hello World" class="title"/>
</Page>

หลังจากนั้น เราก็จะสร้างไฟล์โค้ดที่คู่กับหน้านี้ ชื่อ hello.js แล้วเพิ่มโค้ดง่ายๆดังนี้

function hello() {
    alert("Hello world");
}
exports.onLoad = hello;

ซึ่งเมื่อรันโปรแกรม ก็จะแสดง alert dialog ขึ้นมาแบบนี้ครับ


ต่อไป เราจะลองเพิ่มปุ่มกดดูบ้าง ก็จะกลับไปแก้ไขไฟล์ hello.xml ใหม่ให้เป็น

<Page>
 <StackLayout>
  <Label text="Hello World" class="title"/>
  <Button text="OK" tap="sayHello"/>
 </StackLayout>
</Page>

สังเกตว่ามีการใช้ StackLayout ซึ่งเป็น LayOut ประเภทหนึ่งที่จัดเรียง widget ที่อยู่ภายในแบบบนลงล่างหรือซ้ายไปขวา

ในที่นี้เราสร้าง Label และ ปุ่มกดไว้ใน StackLayout นี้ และเอา Page Load event ออก แต่เพิ่ม "tap" event ให้กับปุ่ม ซึ่งเมื่อเรากดก็จะไปเรียกใช้ฟังก์ชัน sayHello ในไฟล์ hello.js อีกที

และปรับแก้ไฟล์ hello.js ดังนี้

function hello() {
    alert("Hello world");
}
exports.sayHello = hello;

คราวนี้เมื่อเรากดปุ่ม ก็จะเกิด alert dialog ตามรูปครับ



ตอนต่อไป เราจะลองรับค่าจาก Text box คลิกปุ่มแล้วนำค่าที่ได้ไปแสดงผลใน Label กันครับ

NativeScript ตอนที่ 3 เริ่มต้นจากศูนย์

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

แอพที่เราจะทำจะมีหน้าตาง่ายๆแบบนี้

เริ่มต้นจากการสร้างโปรเจคกันก่อน สมมติว่าเราอยู่ในโฟเดอร์ที่ต้องการแล้ว เช่น D:\codes\nativescript

รัน Command prompt แล้วย้ายไปยังโฟลเดอร์ดังกล่าว แล้วใช้คำสั่ง
tns create MyApp
เพื่อสร้างโปรเจคชื่อ MyApp

ย้ายเข้าไปในโฟลเดอร์โปรเจคโดย
cd MyApp

ต่อจากนั้น เราจะกำหนดแพลตฟอร์มให้เป็น Android
tns platform add android

ในโฟลเดอร์โปรเจค เข้าไปแก้ไขไฟล์ app.js โดยเปลี่ยนไฟล์ที่จะเป็นหน้าหลักเป็น hello

var application = require("application");
application.start({ moduleName: "hello" });

จากนั้นก็สร้างไฟล์เปล่าเพิ่มอีกสองไฟล์ คือ hello.xml และ hello.js

ใน hello.xml ซึ่งจะเป็นหน้า interface หลัก เราจะลองเขียนแค่

<Page>
    <Label text="Hello World" class="title" />
</Page>

เราจะลองรันแอพนี้ ให้เชื่อต่อกับ Android device (หรือ emulator) แล้วทดสอบว่ามองเห็นอุปกรณ์นั้นหรือไม่ด้วยคำสั่ง
tns device

อย่าลืมยืนยันการเชื่อมต่อกับอุปกรณ์ในกรณีที่มีการถาม

สมมติว่าตอนนี้การเชื่อมต่อกับอุปกรณ์สำเร็จ เราจะลองรันแอพโดยใช้คำสั่ง
tns run android
แล้วก็รอกันไป

ก็น่าจะเห็นผลลัพธ์เป็นคำว่า Hello World กลางหน้าจอ



ใน command prompt ให้กด CTRL+C แล้วเลือก y เพื่อสิ้นสุดการทำงานของคำสั่ง

จากนั้น เราจะลองรันแอพแบบ livesync นั่นคือ เมื่อเราแก้ไขโค้ด ตัว nativescript จะ build และ patch เข้ากับโปรแกรมที่รันอยู่บนอุปกรณ์ ซึ่งจะทำให้การรันรวดเร็วขึนมาก ไม่ต้อง build ใหม่ทั้งหมดและติดตั้ง

พิมพ์คำสั่ง
tns livesync android --watch

เมื่อผลลัพธ์แสดงในอุปกรณ์แล้ว ให้ลองกลับมาแก้โค้ดในไฟล์ hello.xml เป็น

<Page>
    <Label text="My First Mobile App" class="title" />
</Page>

ทันทีที่เรากด save ไฟล์นี้ ผลลัพธ์ในอุปกรณ์จะเปลี่ยนไปทันที สะดวกมากๆเลยครับ



ตอนนี้เราคงทดสอบกันแค่นี้ก่อน ตอนต่อไปเราจะลองมาเขียนโค้ดเพิ่มปุ่มกันครับ

NativeScript ตอนที่ 2 องค์ประกอบของแอพ

หลังจากที่เราทดลองติดตั้งและสร้างแอพโดยใช้ template ที่เป็นตัวตั้งต้นแล้ว เราลองมาดูองค์ประกอบของไฟล์ที่ถูกสร้างขึ้นกับครับ

ถ้าเข้าไปดูในโฟลเดอร์ของโปรเจคที่ถูกสร้างขึ้น จะเห็นว่ามันมีองค์ประกอบคือ
Project
--app
--node_modules
--platform
package.json

ซึ่งตัวโค้ดหลักๆ จะอยู่ในโฟลเดอร์ app
เมื่อเข้าไปดู จะพบว่ามีไฟล์ที่สำคัญคือ

• app.js เป็นไฟล์เริ่มต้น จะบอกว่าให้โปรแกรมไปเรียกโมดูลและหน้าไหนมาทำงานเป็นหน้าแรก
• app.css เอาไว้กำหนดรูปแบบ สไตล์การแสดงผลโดยรวมของแอพ
• main-page.xml หน้าอินเตอร์เฟสหลัก
• main-page.js โค้ดที่สัมพันธ์กับ main-page.xml

ถ้าดูรายละเอียดของ app.js จะพบดังนี้

var application = require("application");
application.start({ moduleName: "main-page" }); 

นั่นคือบรรทัดแรกจะมีการ include โมดูลชื่อ application
บรรทัดที่สองจะสั่งให้ start module โดยที่ไปเริ่มที่หน้าซึ่งมีชื่อว่า main-page (ตรงกับไฟล์ main-page.xml และ main-page.js)

ต่อไป เราจะลองเปิดไฟล์ main-page.xml ซึ่งเป็นส่วนของ interface

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
  <StackLayout>
    <Label text="Tap the button" class="title"/>
    <Button text="TAP" tap="{{ onTap }}" />
    <Label text="{{ message }}" class="message" textWrap="true"/>
  </StackLayout>
</Page>

 ซึ่งจะมีหลายองค์ประกอบ ในที่นี้ถ้าเราแยกส่วนดู จะพบว่าประกอบไปด้วย

• Page คือ หน้านั้น
• StackLayout คือโครงของหน้านั้นว่าจะมีการเรียงอินเตอร์เฟสอย่างไร ในที่นี้เป็นแบบ Stack คือเรียงจากบนลงล่าง หรือ ซ้ายไปขวา
• Label ก็คือข้อความที่เอาไว้แสดงผล
• Button คือปุ่มกด

 ซึ่งจะสังเกตว่ามีการอ้างถึง event ที่จะใช้กับปุ่ม คือ tap = {{ onTap }} เป็นต้น ซึ่งรายละเอียดจะอยู่ในไฟล์ main-view-model.js อีกที

เนื่องจากโค้ดตัวอย่างนี้ เป็นลักษณะการเขียนโค้ดแบบ Model-View-View-Model ซึ่งอาจจะเข้าใจยาก ในตอนต่อไปเราจะลองเริ่มเขียนแอพแบบโครงสร้างธรรมดาง่ายๆกันดูครับ

Processing กับ Kinect ตอนที่ 1

บทความนี้จะพูดถึงการประยุกต์ใช้งานโปรแกรม Processing กับกล้อง Kinect ซึ่งถือได้ว่าเป็นซอฟต์แวร์และฮาร์ดแวร์ที่ทำงานร่วมกันได้อย่างดีคู่หนึ่ง

ในตอนนี้ เราจะลองติดตั้งโปรแกรมที่เกี่ยวข้อง รวมถึงเริ่มต้นเขียนโค้ดเพื่อแสดงผลตำแหน่งมือขวาของเรา

ผลลัพธ์ที่ได้น่าจะประมาณนี้ครับ โดยวงกลมสีเหลืองก็คือตำแหน่งของมือขวาของเรา ที่ตรวจจับโดย Kinect และวงกลมนี้จะเคลื่อนตามมือของเราครับ



การติดตั้งซอฟต์แวร์ที่เกี่ยวข้อง

1. Processing (https://processing.org/)
2. Kinect SDK (https://www.microsoft.com/en-us/download/details.aspx?id=40278)
3. Kinect4WinSDK หลังจากติดตั้ง Processing แล้ว สามารถเลือกเมนู Sketch/Import Library.../Add Library... แล้วเลือก Kinect4WindSDK

โค้ด

/*
  Hand detection and display
*/
import kinect4WinSDK.Kinect;
import kinect4WinSDK.SkeletonData;
//ref: http://www.magicandlove.com/blog/research/kinect-for-processing-library/

Kinect kinect;
ArrayList <SkeletonData> bodies;

//Set initial graphic properties
void setup()
{
  //set window's size
  size(640, 480);
  //set black background
  background(0);
  //create an instance of Kinect
  kinect = new Kinect(this);
  smooth();
  //arraylist of skeletons
  bodies = new ArrayList<SkeletonData>();
}

//Method to draw graphics, auto refresh
void draw()
{
  background(0);
  //assume only one tracked skeleton
  //right hand detection
  if(bodies.size() != 0) {
    showRightHand(bodies.get(0), Kinect.NUI_SKELETON_POSITION_HAND_RIGHT); 
  }
}

//Method to draw a circle at right hand
void showRightHand(SkeletonData _s, int hand) 
{
  //if hand is tracked
  if (_s.skeletonPositionTrackingState[hand] != Kinect.NUI_SKELETON_POSITION_NOT_TRACKED) 
  {
      //get x and y positions of right hand
      float x = _s.skeletonPositions[hand].x * width;
      float y = _s.skeletonPositions[hand].y * height;
      //draw a yellow circle at hand position
      fill(255,255,0);
      ellipse(x, y, 30, 30);     
   }
}  

//*********************** DO NOT MODIFY ANYTHING BELOW THIS PART ************************
void appearEvent(SkeletonData _s) 
{
  if (_s.trackingState == Kinect.NUI_SKELETON_NOT_TRACKED) 
  {
    return;
  }
  synchronized(bodies) {
    bodies.add(_s);
  }
}

void disappearEvent(SkeletonData _s) 
{
  synchronized(bodies) {
    for (int i=bodies.size ()-1; i>=0; i--) 
    {
      if (_s.dwTrackingID == bodies.get(i).dwTrackingID) 
      {
        bodies.remove(i);
      }
    }
  }
}

void moveEvent(SkeletonData _b, SkeletonData _a) 
{
  if (_a.trackingState == Kinect.NUI_SKELETON_NOT_TRACKED) 
  {
    return;
  }
  synchronized(bodies) {
    for (int i=bodies.size ()-1; i>=0; i--) 
    {
      if (_b.dwTrackingID == bodies.get(i).dwTrackingID) 
      {
        bodies.get(i).copy(_a);
        break;
      }
    }
  }
}

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 ครับ