ในการพัฒนา web site หรือไม่ก็ web application บน ide ต่างๆ กระบวนการ run project ถือเป็นขั้นตอนที่สำคัญมากเพื่อที่จะดูผลของการเขียนโปรแกรมนั้นๆ ซึ่งถ้า run ได้โดยไม่ error ก็ถือเป็นข่าวดีมากของการทำงานนั้นๆ ในบทความนี้จะอธิบายถึงเครื่องมือใหม่ ที่มีใน NetBeans version ล่าสุด สำหรับการ run project ที่เป็น html5 project บน Chrome

ซึ่ง project ที่จะทำการ run แบบนี้ได้ต้องสร้างแบบ HTML5 Application ตั้งแต่แรกครับ ดังรูป

null

โดยเมื่อได้สร้างเสร็จแล้วจะปรากฏชื่อ project ทางด้านซ้ายของ NetBeans และมีสัญลักษณ์เป็น html5 ดังรูป

null

เมื่อทำการเขียน code เรียบร้อยและต้องการจะทดสอบผล ต้องทำการ run ผ่าน NetBeans ให้ไปที่ toolbar ด้านบน หาปุ่มที่คล้ายปุ่ม play สีเขียว ดังรูป

null

ขั้นตอนแรกเราต้องทำการเชื่อมต่อ NetBeans กับ Chrome Browser เสียก่อน โดยกดตรงลูกศรข้างๆ รูป Chrome ตรงปุ่มแรกครับ จะปรากฏหน้าจอดังรูป

null

ให้ไปที่ช่อง Browser กรอบสีเทา ที่เป็นส่วน With NetBeans Connector ให้เลือก Chrome ครับ เพื่อบอกว่าให้ใช้ NetBeans Connector บน Chrome

หลังจากนั้นไปตรวจสอบอีกจุดที่ properties ของ project โดยไป click ขวาที่ project ของเรา ตรงด้านซ้ายของโปรแกรม ดังรูป

null

เลือก Properties จะปรากฏหน้าจอดังรูป

null

ไปที่เมนู Run ให้ตรวจสอบว่า Browser ต้องเป็น Chrome with NetBeans Connector ส่วน Auto-refresh ต้องถูกเลือก Web Server จะเป็น Embedded Lightweight ครับ

เมื่อกำหนดค่าเรียบร้อยก็จะถึงกระบวนการ run ครับ ก็ไปกดปุ่ม play สีเขียวที่ toolbar ได้เลย NetBeans ก็จะไปใช้ Chrome Connector ในการทำงานครับ โดยครั้งแรกเรายังไม่ทำการติดตั้งตัว extension ของ Chrome ตัวนี้ โปรแกรมจะขึ้นหน้าจอดังรูปมาเพื่อถามครับ

null

ให้กด Go to Chrome Web Store เพื่อไปติดตั้ง extension ครับ ซึ่งระบบจะไปเปิด web browser Chrome โดยอัตโนมัติ แล้วไปหน้า Web Store ที่มี NetBeans Connector ให้ทันทีครับ ดังรูป

null

ให้กดปุ่ม null เพื่อทำการติดตั้ง

Chrome ก็จะถามว่าต้องการติดตั้งหรือไม่ ดังรูป

null

ให้ทำการ Add ลงไป ก็จะทำการติดตั้ง extension นี้ไปใน Chrome ซึ่งตรง Address bar ของ Chrome ตรงด้านขวาจะมีรูป logo NetBeans ปรากฏครับ ดังรูป

null

เดี๋ยวเราไปตรวจสอบอีกที่ครับ โดยไปที่หน้าจัดการ extension ของ Chrome ครับ ก็จะปรากฏ NetBeans Connector ติดตั้งอยู่ครับ ดังรูป

null

ตอนนี้เราติดตั้ง NetBeans Connector with Chrome เสร็จแล้ว ก็กลับไปที่ NetBeans ครับ ก็จะพบว่ามีหน้าต่างเพื่อบอกให้เรา run project ใหม่อีกครั้ง เพื่อไปเริ่มทำงานกับ Chrome ครับ ดังรูป

null

ดังนั้นให้กด Re-Run Project ครับ ก็จะไปเปิด Chrome ขึ้นมาให้เอง และ run project นั้นได้ครับ ดังรูป

null

โดยตรง url จะมี port เป็น 8383 ครับ ซึ่งตรงนี้อย่าไป cancel การ debug ของ NetBeans นะครับ ซึ่งถ้าเรามีแก้ไข code ใดๆ แล้ว save หน้าจอนี้จะ refresh โดยอัตโนมัติครับ ทำให้สะดวกมากขึ้นในการพัฒนา web project ครับ

Comments are closed.