การใช้งาน Node.JS - การติดตั้ง express และสร้าง Project แรก

ในส่วนนี้จะเป็นการติดตั้ง library ชื่อ express เพื่อใช้สร้าง Web App ขึ้นมา โดยขั้นตอนคือ

1. สร้าง Folder Project  ขึ้นมา 1 Folder และเปิด Folder ขึ้นมาจากนั้นกด Shift ค้าง และ Click Mouse ขวา เพื่อเข้าสู่หน้า Command Line
2.  เมื่อเข้าหน้า Command แล้วให้พิมพ์ว่า  npm install -g express-generator
   เพื่อติดตั้ง Library Express เข้าแบบ ไปใน Project หากพิมพ์ถูกต้อง NPM ก็จะติดตั้ง Library express ดังรูป
   
   
3. พิมพ์  express เพื่อให้ nodeJS สร้าง Folder และ copy file ที่จำเป็นต้องใช้เข้ามา ดังรูป
   
   หากไม่มีข้อผิดพลาด ใน Folder Project  ของเราจะมี Folder และ File ตามในรูป
   
4. พิมพ์ npm install   เพื่อ download File ที่เกี่ยวข้องเข้ามาใน Project ของเรา ดังรูป
   
   
   
5. เมื่อติดตั้งสำเร็จให้พิมพ์ npm start เพื่อทดสอบว่าใช้ๆด้หรือไม่  หากไม่มีปัญหาจะขึ้นมาดังรูป
   
6. ลองเปิดหน้า Browser ขึ้นมาแล้วพิมพ์ URL ว่า http://127.0.0.1:3000 จะขึ้มมาดังรูป
   
   
   
   
7. หากต้องการจะเปี่ยน Port นั้น สามารถเข้าไปเปลี่ยนได้โดยเข้าไปที่ Folder bin จะมี file ชื่อ www ที่ไม่มีนามสกุลอยู่  ลองเปิดดูและสามารถเปลี่ยน Port ได้ตามรูป
   
   
8. Folder ต่างๆใน Project นั้นจะมีหน้าที่มต่างๆกันไปคือ
   ==>Folder - bin ทำหน้าที่ เก็บค่า config ต่างๆ
   ==>Folder - node_modules ทำหน้าที่ เก็บ File Library Modules ต่างๆที่ได้จาก npm install
   ==>Folder - public ทำหน้าที่ เก็บ resource ของ Project เช่น พวก Images หรือ javascript Client
   ==>Folder - routes ทำหน้าที่ เก็บ File JS
   ==>Folder - views ทำหน้าที่ เก็บ Template HTML ต่างๆของระบบ (นามสกุล .ejs)
   ==>Files - app.js ทำหน้าที่ เป็น File เริ่มต้นของระบบ
   ==>Files - package.json ทำหน้าที่ เก็บรายละเอียดต่างๆของ Project
   
   
9. เนื่องจากเราใช้ File .ejs เป็น HTML Template ในการแสดงผลของ Project จึงต้องมีการแก้ค่า Config บางอย่างเพิ่มเติมคือ
   แก้ File package.json โดยการเปิดบน Notepad แล้วแก้ส่วนที่เป็น
   "jade": "~1.11.0", เป็น  "ejs":"*", ดังรูป
   
   แก้เป็น
   
10. จากนั้นเข้า command line พิมพ์ npm install ejs เพื่อติดตั้ง ejs viewer module
    
11. เพื่อเป็นการลดขนาดของ File ที่อยู่ใร Project เรา  ให้ uninstall module jade ออก โดยพิมพ์
    npm uninstall jade ดังรูป
    
    
12. จากนั้นเข้าไปที่ File app.js เพื่อ Config ให้ใช้ File ejs ได้โดยลบบรรทัดที่เป็น
    app.set('view engine', 'jade');
    และเพิ่ม
    app.set('view engine', 'html');
    app.engine("html",require("ejs").renderFile);
    ดังรูป
    
    
13. จากนั้นลอง start project ขึ้นมาอีกครั้งโดยใช้คำสั่ง npm start  และลองเข้า Browser และเรียก URL นี้ดู จะขึ้น Error ดังรูป
    
    
14. สาเหตุที่ Error นั้นเนื่องจาก เรายังไม่มี file html template ในการแสดงผล  โดยเราจะสร้าง file .html เพื่อใช้ในการแสดงผล ซึ่ง File html เหล่านี้จะอยู่ใน Folder views ใน Project ของเรา ลองสร้าง file ชื่อ error.html โดยใน File ดังกล่าวจะมี Code ดังนี้
    
15. ส่วนของ Tag Body ตามที่วงกลมไว้จะเป็นส่วนที่รับค่ามาแสดงบน Template
    
    โดยค่านั้นจะมาจาก File app.js ในการส่งค่า Error มา
    
16. สร้างขึ้นมาอีก 1 file และให้ใช้ชื่อว่า index.html  โดยข้างใน File มี code ดังนี้
    
    ลองเรียกใหม่จะขึ้นหน้า Web Page แล้วมาดังรูป