เขียน HTML5 ด้วย NetBean IDE

จากที่มีคนถามกันมาเยอะว่าผมใช้อะไรเขียนแอพมือถือ ผมก็บอกใช้ HTML5 + JQuery Mobile กับ PhoneGap แล้วก็มีคนถามต่อไปอีกว่าตัวเครื่องมือที่ใช้เขียนใช้อะไร คำตอบคือ NetBean IDE ครับ จากที่เคยใช้เครื่องมือเขียน HTML5 มา ตัวนี้ใช้ง่ายที่สุดแล้ว มันมีดีอะไรบ้างตามมาดูกันครับ

**  หมายเหตุ : การเขียนในลักษณะของผมคือการเขียนแบบ HTML5 + MVC คือการแยกส่วนการทำงานของ HTML5 เป็นส่วนของข้อมูล (Model)  , JavaScript เป็นส่วนควบคุมการทำงาน (Controller) ,  และ CSS3 เป็นส่วนจัดรูปแบบการแสดงผล (View) ซึ่งเป็นแนวทางการเขียน HTML5 ในปัจจุบัน รวมถึงการเขียนพวก Hybrid Mobile Application ด้วย ใครชอบแนวลากวางลองไปใช้ Dream Weaver ดูครับ แต่บอกไว้ก่อนว่าถ้ามาแนวผม สุดท้ายคุณจะหลงรักวิธีเขียนแบบนี้เลยทีเดียว ^_^ **

ก่อนอื่นก็ต้องติดตั้งโปรแกรมก่อน

Netbean IDE แต่เดิมเป็นเครื่องมือสำหรับนักพัฒนา Java Applicaion แต่ก็มีการปรับปรุง รองรับภาษาโปรแกรมอื่นๆ อย่างต่าเนื่อง เช่นเอามาเขียน PHP, Python, Ruby และ HTML5 รองรับทั้งบน Windows, Linux , และ Mac OSX ว่าแล้วก็ดาวน์โหลดกันเลยที่ http://www.netbean.org/download

nb01nb02

ถ้าใครอยากเล่นพวก Web Service ด้วยให้เลือกตัว 205MB ครับ

nb03

ถ้าอยากได้  Server ทั้ง GlassFish และ Tomcat ก็สามารถเลือกแบบ Customize ได้

 

เริ่มเขียน HTML5 กัน

เริ่มโดยการสร้าง Project แบบ HTML5 Project แล้วตั้งชื่อ [MyFirstApp] และกำหนด folder ที่จะเก็บ นอกจากนั้นยังสามารถเลือก Java Script Framework ที่เราต้องใช้เข้ามาใน Project ได้เลยเช่น jQuery Mobile, Bootstrap แต่ของตอนนี้เราจะสร้างแบบง่ายๆก่อน สามารถกด [Fisnish] ได้เลย

nb03-1

คลิกที่ไอค่อนกลาง หรือกด Ctrl+Shift+N เพื่อสร้าง Project ใหม่

nb04

เมื่อ Project ถูกสร้างเสร็จแล้ว เราสามารถเริ่มเขียนที่ไฟล์ index.html ได้เลย

nb05

ให้ลองเปลี่ยนข้อมูลใน <body> </body> โดยเพิ่มโค้ด

 <H1> AjBee.Me </H1>

nb11

หล้งจากนั้นเราสามารถเลือก Browser ที่ต้องการทดสอบ (ถ้าเป็น Chrome ให้เลือกตัวล่างก็ได้ครับ ถ้าเป็นตัวบนจะต้องลง Plug-in ก่อน) แล้วกดปุ่ม Run (สีเขียวๆ) และทดสอบหน้าเว็บได้เลย โดย NetBean มี Sever ในตัวอยู่แล้วไม่จำเป็นต้องลงเพิ่ม ซึ่งปกติจะเรียกผ่าน URL
http://localhost:8383/MyFirstApp/index.html

nb6-1

เชื่อม HTML กับ CSS และ Java Script

กลับมาที่ NetBean IDE และสร้างโฟล์เดอร์  app (คลิกขวา New -> Folder) ใต้ Site Root พร้อมกับสร้างไฟล์  app.js (คลิกขวา New -> Java Script File…) และ app.css (คลิกขวา New -> Cascade Style Sheet …) แล้วใช้เมาส์ ลากไฟล์ทั้ง 2 มาไว้ก่อนแทก </head> ของไฟล์ index.html

nb10

การเชื่อม CSS และ Java Script เข้ามาใน HTML ด้วยการลากวาง

 

แก้ไขโค้ดของแต่ละไฟล์ตามด้านล่างครับ (พยายามพิมพ์เองดีกว่านะครับ จะได้รู้ syntax และเขียนคล่องขึ้นด้วย ถ้า copy เฉยๆ จะไม่ค่อยได้อะไร) เคล็ดลับในการเขียน HTML คือ เมื่อใส่ Tag เปิดแล้ว มันจะขึ้น Tag ปิด ให้เลย  เช่นเราพิมพ์  <div> แล้วโปรแกรมจะขึ้น </div> มาให้เลือกเราแค่กด Enter มันจะเติมโค้ดให้เลยครับ  ส่วนปุ่มคีย์ลัดที่ควรรู้จักคือ

  • Ctrl + Shift + I      ใช้ในการ import ไฟล์ library ที่ยังขาดไป (ส่วนใหญ่ใช้กับโค้ด Java)
  • Ctrl + Space           ใช้เรียกโค้ดแบบ Auto complete คือมันจะเติมโค้ดที่รู้จักให้เลย
  • Ctrl + /                    สำหรับการคอมเมนต์
  • Ctrl + S                    ใช้บันทึกข้อมูล
  • Ctrl + C, Ctrl +V    คือการ copy กับ past (วาง)
  • Alt  + Shift + F       ใช้ในการจัดโค้ดให้สวยงาม

 

<!--index.html-->
<html>
 <head>
     <title>AjBee.Me</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="app/app.css" rel="stylesheet" type="text/css"/>
     <script src="app/app.js" type="text/javascript"></script>
 </head>
 <body>
     <h1>AjBee.Me</h1>
     <!-- สร้างปุ่มโดยกำหนด id เป็น bt1, bt2, และ bt3  -->
     <button id="bt1">Button1</button> | 
        <button id="bt2">Button2</button> | 
        <button id="bt3">Button3</button> <br/>
     <div id="content"></div>
 </body>
</html>

 

// app.js
function changeContent(){
 // นำข้อมูลใน <button> (ในที่นี้คือ this) ตัวที่โดนคลิกมาเก็บไว้ในตัวแปร txt
 var txt = this.innerHTML;
 // อ้างถืง <div id="content"> มาเก็บไว้ในตัวแปร ct
 var ct = document.getElementById("content");
 // เปลี่ยนข้อความภายใน <div id="content">  </div>
 ct.innerHTML = "<h1>" + txt + "</h1>";
}

// ถูกเรียกเมื่อมีการเรียกไฟล์ index.html ในหน้าบราวเซอร์
function init(){
 //ติดตั้งฟังก์ชัน changeContent ให้กับทั้ง 3 ปุ่ม โดยจะทำงานเมื่อมีการคลิก
 //โดยห้ามมี "( )" นะครับเพราะนี่คือการโยนฟังก์ชัน ไม่ได้ให้มันคำนวณแล้ว return ค่ามาให้ 
 document.getElementById("bt1").onclick=changeContent;
 document.getElementById("bt2").onclick=changeContent;
 document.getElementById("bt3").onclick=changeContent;
}

// เมื่อเอกสารโหลดเสร็จจะทำการเรียก init() โดยอัตโนมัติ
window.onload=init;

 

/* app.css */
#bt1{
   /* เซ็ตสีพื้นหลังของปุ่ม */
   background-color: red;
}
#bt2{
   background-color: yellow;
}
#bt3{
   background-color: green;
}
#content{
   /* ใส่เงาให้ข้อความใน <div id="content"></div> */
   text-shadow: 2px 2px 5px blue;
}

ทดลองรันโดยอยู่ที่ไฟล์ index.html แล้วกด F6 เพื่อดูผล ลองคลิกแต่ละปุ่มแล้วดูผล nb12

จุดเด่นของ Netbean IDE

อย่างที่บอกผมใช้เครื่องมือมาหลายตัว ทั้ง Sublime, EditPlus, Notepad++, DreamWeaver, Eclipse, Android Studio, และ XCode แล้วก็พบว่าถ้าเป็นการเขียน App ในลักษณะ Hybrid (HTML+CSS3+Java Script) ตัวนี้ใช้ง่ายสุด (ความชอบส่วนตัวนะ ใครรักชอบตัวไหนก็ใช้ตัวนั้นครับ) เนื่องด้วยเหตุผลหลายๆประการดังนี้:

  • การเติมโค้ดอัตโนมัติ ทำได้ง่าย พิมพ์เสร็จมันขึ้นให้เลย หรือกด Ctrl + Space ซึ่งในเครื่องมือหลายๆตัวก็มีเหมือนกัน
  • การทำงานเป็นระบบ Project ทำให้สามารถ copy ไปทำเครื่องอื่น หรือจับโยนเข้า GitHub ทำได้ง่าย
  • การเชื่อมต่อไฟล์ โดยการลากวาง แล้วมันทำโค้ดให้เลย อันนี้ช่วยได้เยอะเลย
  • เครื่องมือในการจัดการกับโค้ด ทั้ง Navigator Panel และการกด Ctrl ค้างไว้แล้วคลิกไปยังชื่อฟังก์ชัน หรือตัวแปรมันจะกระโดดไปให้เลย สะดวกในการไล่โค้ด
  • การรันแบบ Debug Mode สามารถสร้าง Break Point แล้วเลือก debug ได้
  • มี Server มาให้ในตัวทำให้ไม่จำเป็นต้องลงอะไรเพิ่ม ตัวเดียวอยู่เลย
  • รองรับการเขียนในฝั่ง Server กรณีที่เราจะทำพวก SOAP หรือ RESTful Web Service สามารถทำได้โดยง่าย (เดี๋ยวมีสอนครับ)
  • จริงๆ มันมีส่วนของการเชื่อมต่อกับ Cordova ในการสั่งรันบน Android ได้เลยครับ แต่ทำงานช้ากว่าเราจับโยนโดยตรง

น่าจะเป็นจุดเริ่มต้นที่ดีสำหรับใครที่ยังไม่เคยใช้งานเครื่องมือตัวนี้ และเนื้อหาตอนต่อๆไป ผมจะใช้ NetBean IDE เป็นหลัก…ดังนั้นถ้าใครจะตามไปเรื่อยๆ ก็ลงติดเครื่องไว้เลยครับ ที่สำคัญคืออย่าดูแค่โค้ดที่ให้ไป ให้ทดลองเขียนโค้ดอื่นๆ ที่เราสนใจด้วยจะดูจาก ตอนก่อนหน้าที่ผมเขียนไว้ [Link] หรือดูจาก tutorial ของ w3school ก่อนก็ได้ครับ [Link]

วิดีโอของตอนนี้ใน YouTube ครับ : เขียน HTML5 ด้วย Netbean IDE

ไฟล์ Project ของตอนนี้ครับ:  MyFirstApp.zip

 

AjBee.Me : การจะทำสิ่งใดให้ประสบผลสำเร็จ ควรต้องใช้ความเพียรพยายามและเรียนรู้อย่างที่สุด จึงจักสมดังหวัง ^_^

ติดตามข้อมูลผ่าน FanPage เข้าไปกด Like ที่: https://www.facebook.com/AjBeeMePage