SlideShare a Scribd company logo
1 of 64
Download to read offline
http://nextflow.in.th/mean-stack-training-workshop/
Node JS กันสบายๆ
โค้ชพล
www.nextflow.in.th
http://nextflow.in.th/mean-stack-training-workshop/
วันนี้
• จุดประสงค์ของเทคโนโลยี Node JS
• การใช้งาน Node JS ในรูปแบบต่างๆ
• การติดตั้ง และเผยแพร่ Node Module
http://nextflow.in.th/mean-stack-training-workshop/
จุดประสงค์ของ
Node JS
http://nextflow.in.th/mean-stack-training-workshop/
http://nextflow.in.th/mean-stack-training-workshop/
2 ขีดจำกัดของ
Javascript
http://nextflow.in.th/mean-stack-training-workshop/
1. ขอบเขตของ
Javascript
http://nextflow.in.th/mean-stack-training-workshop/
HTML Javascript
http://nextflow.in.th/mean-stack-training-workshop/
getElementById(“menu”)
<div id=“menu”>
http://nextflow.in.th/mean-stack-training-workshop/
JQuery
Angular JS
http://nextflow.in.th/mean-stack-training-workshop/
Client Server
http://nextflow.in.th/mean-stack-training-workshop/
Javascript
ทำงานได้บนเว็บเบราเซอร์
เท่านั้น!
http://nextflow.in.th/mean-stack-training-workshop/
2. การนำ Javascript ไปใช้งาน
http://nextflow.in.th/mean-stack-training-workshop/
// a.js
var name = “Pon”;
// b.js
var name = “Peter”;
console.log(name);
http://nextflow.in.th/mean-stack-training-workshop/
Javascript
ก็เป็นแค่ Script!
http://nextflow.in.th/mean-stack-training-workshop/
2 ขีดจำกัดของ Javascript
• ทำงานได้แค่บน Web Browser
• เป็นภาษาพื้นๆ ไม่มีโครงสร้างเพื่อใช้งานแบบจริงจัง
http://nextflow.in.th/mean-stack-training-workshop/
http://nextflow.in.th/mean-stack-training-workshop/
1. Javascript
ที่ทำงานนอก
Web browser
http://nextflow.in.th/mean-stack-training-workshop/
http://nextflow.in.th/mean-stack-training-workshop/
Let’s do it!
Node CLI & Chrome Browser
http://nextflow.in.th/mean-stack-training-workshop/
2. Javascript as a module
http://nextflow.in.th/mean-stack-training-workshop/
ModuleApp
Module
Module
http://nextflow.in.th/mean-stack-training-workshop/
Node Module
http://nextflow.in.th/mean-stack-training-workshop/
Node Module
• วิธีการเรียกใช้ Module
• วิธีการสร้าง Module
• วิธีติดตั้ง และเผยแพร่ Module
http://nextflow.in.th/mean-stack-training-workshop/
วิธีการเรียกใช้ Node CLI
http://nextflow.in.th/mean-stack-training-workshop/
วิธีการเรียกใช้ Module
node <javascript file>
http://nextflow.in.th/mean-stack-training-workshop/
Let’s do it!
Invoke a javascript file in node CLI
http://nextflow.in.th/mean-stack-training-workshop/
วิธีการเรียกใช้ Module
http://nextflow.in.th/mean-stack-training-workshop/
วิธีการเรียกใช้ Module
var module = require(…);
http://nextflow.in.th/mean-stack-training-workshop/
วิธีการเรียกใช้ Module
// manU.js
= require(‘./manU’);
http://nextflow.in.th/mean-stack-training-workshop/
Let’s do it!
Require JS file as module
http://nextflow.in.th/mean-stack-training-workshop/
วิธีการเรียกใช้ Module
// team/liverpool.js
= require(‘./team/liverpool’);
http://nextflow.in.th/mean-stack-training-workshop/
Let’s do it!
Require JS file in sub folder
http://nextflow.in.th/mean-stack-training-workshop/
วิธีการเรียกใช้ Module
// team/index.js
= require(‘./team’);
http://nextflow.in.th/mean-stack-training-workshop/
Let’s do it!
Require folder as module
http://nextflow.in.th/mean-stack-training-workshop/
วิธีการเรียกใช้ Module
// ‘os’ module
= require(‘os’);
http://nextflow.in.th/mean-stack-training-workshop/
Let’s do it!
Require core module
http://nextflow.in.th/mean-stack-training-workshop/
วิธีการสร้าง Module
http://nextflow.in.th/mean-stack-training-workshop/
.property
.function()
App Require(…)
http://nextflow.in.th/mean-stack-training-workshop/
exports
http://nextflow.in.th/mean-stack-training-workshop/
exports
exports.name = “Pon”;
http://nextflow.in.th/mean-stack-training-workshop/
exports
exports.name = “Pon”;
exports.yeah = function(){
…
}
http://nextflow.in.th/mean-stack-training-workshop/
module
exports.p
exports.f()App Require(…)
http://nextflow.in.th/mean-stack-training-workshop/
Let’s do it!
Exports in Javascript module (x2)
http://nextflow.in.th/mean-stack-training-workshop/
folderindex.jsApp Require(‘/folder’)
http://nextflow.in.th/mean-stack-training-workshop/
Let’s do it!
index.js in a folder
http://nextflow.in.th/mean-stack-training-workshop/
moduleApp Require(…)
http://nextflow.in.th/mean-stack-training-workshop/
moduleApp
Require(…)
{Object}
http://nextflow.in.th/mean-stack-training-workshop/
สร้าง Node Module
แบบที่ไม่ใช่ Object
http://nextflow.in.th/mean-stack-training-workshop/
require(…);
http://nextflow.in.th/mean-stack-training-workshop/
require(…)(‘server’);
http://nextflow.in.th/mean-stack-training-workshop/
require(…)(‘server);
var a = WalkingDead(‘Rick’);
http://nextflow.in.th/mean-stack-training-workshop/
module.exports = …
http://nextflow.in.th/mean-stack-training-workshop/
module.exports =
function(){ }
http://nextflow.in.th/mean-stack-training-workshop/
module.exports = []
http://nextflow.in.th/mean-stack-training-workshop/
module.exports = {…}
http://nextflow.in.th/mean-stack-training-workshop/
3. วิธีติดตั้ง และเผยแพร่
Module
http://nextflow.in.th/mean-stack-training-workshop/
วิธีติดตั้ง และเผยแพร่ Module
• คำสั่งสร้าง npm init
• คำสั่งติดตั้ง npm install
• คำสั่งเผยแพร่ npm publish
http://nextflow.in.th/mean-stack-training-workshop/
คำสั่งสร้าง npm init
http://nextflow.in.th/mean-stack-training-workshop/
package.json
http://nextflow.in.th/mean-stack-training-workshop/
package.json
• name, version, description
• ชื่อ, เวอร์ชั่น module, และรายละเอียด
• main
• ไฟล์เริ่มต้นเมื่อเกิดการเรียก module
• author
• รายละเอียดผู้สร้าง
• dependencies
• รายชื่อ Module ที่ถูกเรียกใช้
http://nextflow.in.th/mean-stack-training-workshop/
dependencies
http://nextflow.in.th/mean-stack-training-workshop/
คำสั่งติดตั้ง npm install
http://nextflow.in.th/mean-stack-training-workshop/
คำสั่งเผยแพร่ npm publish
http://nextflow.in.th/mean-stack-training-workshop/
Node JS กันสบายๆ
โค้ชพล
www.nextflow.in.th

More Related Content

More from Teerasej Jiraphatchandej

Azure DevOps with Power Automate - Guideline
Azure DevOps with Power Automate - GuidelineAzure DevOps with Power Automate - Guideline
Azure DevOps with Power Automate - GuidelineTeerasej Jiraphatchandej
 
Getting Started Azure Cognitive Service Container
Getting Started Azure Cognitive Service ContainerGetting Started Azure Cognitive Service Container
Getting Started Azure Cognitive Service ContainerTeerasej Jiraphatchandej
 
Software developer: Prepare for the real world
Software developer: Prepare for the real worldSoftware developer: Prepare for the real world
Software developer: Prepare for the real worldTeerasej Jiraphatchandej
 
.NET Bangkok Meetup #42 - Extract information from your document with Azure F...
.NET Bangkok Meetup #42 - Extract information from your document with Azure F....NET Bangkok Meetup #42 - Extract information from your document with Azure F...
.NET Bangkok Meetup #42 - Extract information from your document with Azure F...Teerasej Jiraphatchandej
 
.NET Conference 2020 - Introduction to Azure Form Recognizer
.NET Conference 2020 - Introduction to Azure Form Recognizer.NET Conference 2020 - Introduction to Azure Form Recognizer
.NET Conference 2020 - Introduction to Azure Form RecognizerTeerasej Jiraphatchandej
 
What da Frontend? - How to start learning Front-end technology without pain.
What da Frontend? - How to start learning Front-end technology without pain.What da Frontend? - How to start learning Front-end technology without pain.
What da Frontend? - How to start learning Front-end technology without pain.Teerasej Jiraphatchandej
 
Front-end อะไรเนี้ย? - เริ่มต้นเรียนรู้ และเข้าใจโลกของ Front-end Development...
Front-end อะไรเนี้ย? - เริ่มต้นเรียนรู้ และเข้าใจโลกของ Front-end Development...Front-end อะไรเนี้ย? - เริ่มต้นเรียนรู้ และเข้าใจโลกของ Front-end Development...
Front-end อะไรเนี้ย? - เริ่มต้นเรียนรู้ และเข้าใจโลกของ Front-end Development...Teerasej Jiraphatchandej
 
สร้าง Facebook Fan Page อย่างไร ให้ยั่งยืน [บรรยายในงาน LINE Creator Meeting 3]
สร้าง Facebook Fan Page อย่างไร ให้ยั่งยืน [บรรยายในงาน LINE Creator Meeting 3]สร้าง Facebook Fan Page อย่างไร ให้ยั่งยืน [บรรยายในงาน LINE Creator Meeting 3]
สร้าง Facebook Fan Page อย่างไร ให้ยั่งยืน [บรรยายในงาน LINE Creator Meeting 3]Teerasej Jiraphatchandej
 
Current state of Adobe PhoneGap & Cordova (yes, iOS 8 too)
Current state of Adobe PhoneGap & Cordova (yes, iOS 8 too)Current state of Adobe PhoneGap & Cordova (yes, iOS 8 too)
Current state of Adobe PhoneGap & Cordova (yes, iOS 8 too)Teerasej Jiraphatchandej
 
PhoneGap/Cordova: Push notification on Android
PhoneGap/Cordova: Push notification on AndroidPhoneGap/Cordova: Push notification on Android
PhoneGap/Cordova: Push notification on AndroidTeerasej Jiraphatchandej
 
Responsive Image: ปัญหา แนวคิด และวิธีใช้งานในปัจจุบัน (กันยา 2014)
Responsive Image: ปัญหา แนวคิด และวิธีใช้งานในปัจจุบัน (กันยา 2014)Responsive Image: ปัญหา แนวคิด และวิธีใช้งานในปัจจุบัน (กันยา 2014)
Responsive Image: ปัญหา แนวคิด และวิธีใช้งานในปัจจุบัน (กันยา 2014)Teerasej Jiraphatchandej
 
เร่ิมต้นสร้าง Facebook page สำหรับ line creator
เร่ิมต้นสร้าง Facebook page สำหรับ line creatorเร่ิมต้นสร้าง Facebook page สำหรับ line creator
เร่ิมต้นสร้าง Facebook page สำหรับ line creatorTeerasej Jiraphatchandej
 
เริ่มต้นสร้างแอพ Android Wear โดยโค้ชพล
เริ่มต้นสร้างแอพ Android Wear โดยโค้ชพลเริ่มต้นสร้างแอพ Android Wear โดยโค้ชพล
เริ่มต้นสร้างแอพ Android Wear โดยโค้ชพลTeerasej Jiraphatchandej
 
LINE Creator Meeting Thailand #1: เริ่มต้นเรียนรู้การสร้าง LINE Sticker
LINE Creator Meeting Thailand #1: เริ่มต้นเรียนรู้การสร้าง LINE StickerLINE Creator Meeting Thailand #1: เริ่มต้นเรียนรู้การสร้าง LINE Sticker
LINE Creator Meeting Thailand #1: เริ่มต้นเรียนรู้การสร้าง LINE StickerTeerasej Jiraphatchandej
 
เริ่มต้นกับ Google Analytic และวิธีตีความหมายข้อมูลที่ถูกต้อง
เริ่มต้นกับ Google Analytic และวิธีตีความหมายข้อมูลที่ถูกต้องเริ่มต้นกับ Google Analytic และวิธีตีความหมายข้อมูลที่ถูกต้อง
เริ่มต้นกับ Google Analytic และวิธีตีความหมายข้อมูลที่ถูกต้องTeerasej Jiraphatchandej
 

More from Teerasej Jiraphatchandej (20)

Azure DevOps with Power Automate - Guideline
Azure DevOps with Power Automate - GuidelineAzure DevOps with Power Automate - Guideline
Azure DevOps with Power Automate - Guideline
 
Getting Started Azure Cognitive Service Container
Getting Started Azure Cognitive Service ContainerGetting Started Azure Cognitive Service Container
Getting Started Azure Cognitive Service Container
 
Power App - Wrap Sneak peek
Power App - Wrap Sneak peekPower App - Wrap Sneak peek
Power App - Wrap Sneak peek
 
Software developer: Prepare for the real world
Software developer: Prepare for the real worldSoftware developer: Prepare for the real world
Software developer: Prepare for the real world
 
.NET Bangkok Meetup #42 - Extract information from your document with Azure F...
.NET Bangkok Meetup #42 - Extract information from your document with Azure F....NET Bangkok Meetup #42 - Extract information from your document with Azure F...
.NET Bangkok Meetup #42 - Extract information from your document with Azure F...
 
.NET Conference 2020 - Introduction to Azure Form Recognizer
.NET Conference 2020 - Introduction to Azure Form Recognizer.NET Conference 2020 - Introduction to Azure Form Recognizer
.NET Conference 2020 - Introduction to Azure Form Recognizer
 
Introduction to Webometrics
Introduction to WebometricsIntroduction to Webometrics
Introduction to Webometrics
 
OK Flutter, Welcome to All platform era
OK Flutter, Welcome to All platform eraOK Flutter, Welcome to All platform era
OK Flutter, Welcome to All platform era
 
What da Frontend? - How to start learning Front-end technology without pain.
What da Frontend? - How to start learning Front-end technology without pain.What da Frontend? - How to start learning Front-end technology without pain.
What da Frontend? - How to start learning Front-end technology without pain.
 
Front-end อะไรเนี้ย? - เริ่มต้นเรียนรู้ และเข้าใจโลกของ Front-end Development...
Front-end อะไรเนี้ย? - เริ่มต้นเรียนรู้ และเข้าใจโลกของ Front-end Development...Front-end อะไรเนี้ย? - เริ่มต้นเรียนรู้ และเข้าใจโลกของ Front-end Development...
Front-end อะไรเนี้ย? - เริ่มต้นเรียนรู้ และเข้าใจโลกของ Front-end Development...
 
React native - What, Why, How?
React native - What, Why, How?React native - What, Why, How?
React native - What, Why, How?
 
สร้าง Facebook Fan Page อย่างไร ให้ยั่งยืน [บรรยายในงาน LINE Creator Meeting 3]
สร้าง Facebook Fan Page อย่างไร ให้ยั่งยืน [บรรยายในงาน LINE Creator Meeting 3]สร้าง Facebook Fan Page อย่างไร ให้ยั่งยืน [บรรยายในงาน LINE Creator Meeting 3]
สร้าง Facebook Fan Page อย่างไร ให้ยั่งยืน [บรรยายในงาน LINE Creator Meeting 3]
 
Ionic framework for web developer
Ionic framework for web developerIonic framework for web developer
Ionic framework for web developer
 
Current state of Adobe PhoneGap & Cordova (yes, iOS 8 too)
Current state of Adobe PhoneGap & Cordova (yes, iOS 8 too)Current state of Adobe PhoneGap & Cordova (yes, iOS 8 too)
Current state of Adobe PhoneGap & Cordova (yes, iOS 8 too)
 
PhoneGap/Cordova: Push notification on Android
PhoneGap/Cordova: Push notification on AndroidPhoneGap/Cordova: Push notification on Android
PhoneGap/Cordova: Push notification on Android
 
Responsive Image: ปัญหา แนวคิด และวิธีใช้งานในปัจจุบัน (กันยา 2014)
Responsive Image: ปัญหา แนวคิด และวิธีใช้งานในปัจจุบัน (กันยา 2014)Responsive Image: ปัญหา แนวคิด และวิธีใช้งานในปัจจุบัน (กันยา 2014)
Responsive Image: ปัญหา แนวคิด และวิธีใช้งานในปัจจุบัน (กันยา 2014)
 
เร่ิมต้นสร้าง Facebook page สำหรับ line creator
เร่ิมต้นสร้าง Facebook page สำหรับ line creatorเร่ิมต้นสร้าง Facebook page สำหรับ line creator
เร่ิมต้นสร้าง Facebook page สำหรับ line creator
 
เริ่มต้นสร้างแอพ Android Wear โดยโค้ชพล
เริ่มต้นสร้างแอพ Android Wear โดยโค้ชพลเริ่มต้นสร้างแอพ Android Wear โดยโค้ชพล
เริ่มต้นสร้างแอพ Android Wear โดยโค้ชพล
 
LINE Creator Meeting Thailand #1: เริ่มต้นเรียนรู้การสร้าง LINE Sticker
LINE Creator Meeting Thailand #1: เริ่มต้นเรียนรู้การสร้าง LINE StickerLINE Creator Meeting Thailand #1: เริ่มต้นเรียนรู้การสร้าง LINE Sticker
LINE Creator Meeting Thailand #1: เริ่มต้นเรียนรู้การสร้าง LINE Sticker
 
เริ่มต้นกับ Google Analytic และวิธีตีความหมายข้อมูลที่ถูกต้อง
เริ่มต้นกับ Google Analytic และวิธีตีความหมายข้อมูลที่ถูกต้องเริ่มต้นกับ Google Analytic และวิธีตีความหมายข้อมูลที่ถูกต้อง
เริ่มต้นกับ Google Analytic และวิธีตีความหมายข้อมูลที่ถูกต้อง
 

เรียนรู้ Node JS แบบสบายๆ สำหรับผู้เริ่มต้น