Top Banner
http://nextflow.in.th/mean-stack-training-workshop/ Node JS นสบายๆ โชพล www.nextflow.in.th
64

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

Apr 14, 2017

Download

Technology

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: เรียนรู้ Node JS แบบสบายๆ สำหรับผู้เริ่มต้น

http://nextflow.in.th/mean-stack-training-workshop/

Node JS กันสบายๆ โค้ชพล

www.nextflow.in.th

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

http://nextflow.in.th/mean-stack-training-workshop/

วันนี้

• จุดประสงค์ของเทคโนโลยี Node JS

• การใช้งาน Node JS ในรูปแบบต่างๆ

• การติดตั้ง และเผยแพร่ Node Module

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

http://nextflow.in.th/mean-stack-training-workshop/

จุดประสงค์ของ Node JS

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

http://nextflow.in.th/mean-stack-training-workshop/

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

http://nextflow.in.th/mean-stack-training-workshop/

2 ขีดจำกัดของ Javascript

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

http://nextflow.in.th/mean-stack-training-workshop/

1. ขอบเขตของ Javascript

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

http://nextflow.in.th/mean-stack-training-workshop/

HTML Javascript

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

http://nextflow.in.th/mean-stack-training-workshop/

getElementById(“menu”)

<div id=“menu”>

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

http://nextflow.in.th/mean-stack-training-workshop/

JQuery Angular JS

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

http://nextflow.in.th/mean-stack-training-workshop/

Client Server

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

http://nextflow.in.th/mean-stack-training-workshop/

Javascript ทำงานได้บนเว็บเบราเซอร์

เท่านั้น!

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

http://nextflow.in.th/mean-stack-training-workshop/

2. การนำ Javascript ไปใช้งาน

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

http://nextflow.in.th/mean-stack-training-workshop/

// a.js var name = “Pon”;

// b.js var name = “Peter”;

console.log(name);

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

http://nextflow.in.th/mean-stack-training-workshop/

Javascript ก็เป็นแค่ Script!

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

http://nextflow.in.th/mean-stack-training-workshop/

2 ขีดจำกัดของ Javascript

• ทำงานได้แค่บน Web Browser

• เป็นภาษาพื้นๆ ไม่มีโครงสร้างเพื่อใช้งานแบบจริงจัง

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

http://nextflow.in.th/mean-stack-training-workshop/

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

http://nextflow.in.th/mean-stack-training-workshop/

1. Javascript ที่ทำงานนอก

Web browser

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

http://nextflow.in.th/mean-stack-training-workshop/

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

http://nextflow.in.th/mean-stack-training-workshop/

Let’s do it!Node CLI & Chrome Browser

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

http://nextflow.in.th/mean-stack-training-workshop/

2. Javascript as a module

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

http://nextflow.in.th/mean-stack-training-workshop/

ModuleApp

Module

Module

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

http://nextflow.in.th/mean-stack-training-workshop/

Node Module

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

http://nextflow.in.th/mean-stack-training-workshop/

Node Module

• วิธีการเรียกใช้ Module

• วิธีการสร้าง Module

• วิธีติดตั้ง และเผยแพร่ Module

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

http://nextflow.in.th/mean-stack-training-workshop/

วิธีการเรียกใช้ Node CLI

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

http://nextflow.in.th/mean-stack-training-workshop/

วิธีการเรียกใช้ Module

node <javascript file>

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

http://nextflow.in.th/mean-stack-training-workshop/

Let’s do it!Invoke a javascript file in node CLI

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

http://nextflow.in.th/mean-stack-training-workshop/

วิธีการเรียกใช้ Module

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

http://nextflow.in.th/mean-stack-training-workshop/

วิธีการเรียกใช้ Module

var module = require(…);

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

http://nextflow.in.th/mean-stack-training-workshop/

วิธีการเรียกใช้ Module

// manU.js

= require(‘./manU’);

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

http://nextflow.in.th/mean-stack-training-workshop/

Let’s do it!Require JS file as module

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

http://nextflow.in.th/mean-stack-training-workshop/

วิธีการเรียกใช้ Module

// team/liverpool.js

= require(‘./team/liverpool’);

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

http://nextflow.in.th/mean-stack-training-workshop/

Let’s do it!Require JS file in sub folder

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

http://nextflow.in.th/mean-stack-training-workshop/

วิธีการเรียกใช้ Module

// team/index.js

= require(‘./team’);

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

http://nextflow.in.th/mean-stack-training-workshop/

Let’s do it!Require folder as module

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

http://nextflow.in.th/mean-stack-training-workshop/

วิธีการเรียกใช้ Module

// ‘os’ module

= require(‘os’);

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

http://nextflow.in.th/mean-stack-training-workshop/

Let’s do it!Require core module

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

http://nextflow.in.th/mean-stack-training-workshop/

วิธีการสร้าง Module

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

http://nextflow.in.th/mean-stack-training-workshop/

.property .function()

App Require(…)

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

http://nextflow.in.th/mean-stack-training-workshop/

exports

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

http://nextflow.in.th/mean-stack-training-workshop/

exports

exports.name = “Pon”;

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

http://nextflow.in.th/mean-stack-training-workshop/

exports

exports.name = “Pon”;

exports.yeah = function(){

}

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

http://nextflow.in.th/mean-stack-training-workshop/

module exports.p exports.f()App Require(…)

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

http://nextflow.in.th/mean-stack-training-workshop/

Let’s do it!Exports in Javascript module (x2)

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

http://nextflow.in.th/mean-stack-training-workshop/

folder index.jsApp Require(‘/folder’)

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

http://nextflow.in.th/mean-stack-training-workshop/

Let’s do it!index.js in a folder

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

http://nextflow.in.th/mean-stack-training-workshop/

module App Require(…)

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

http://nextflow.in.th/mean-stack-training-workshop/

module App

Require(…)

{Object}

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

http://nextflow.in.th/mean-stack-training-workshop/

สร้าง Node Module แบบที่ไม่ใช ่Object

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

http://nextflow.in.th/mean-stack-training-workshop/

require(…);

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

http://nextflow.in.th/mean-stack-training-workshop/

require(…)(‘server’);

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

http://nextflow.in.th/mean-stack-training-workshop/

require(…)(‘server);

var a = WalkingDead(‘Rick’);

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

http://nextflow.in.th/mean-stack-training-workshop/

module.exports = …

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

http://nextflow.in.th/mean-stack-training-workshop/

module.exports = function(){ }

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

http://nextflow.in.th/mean-stack-training-workshop/

module.exports = []

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

http://nextflow.in.th/mean-stack-training-workshop/

module.exports = {…}

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

http://nextflow.in.th/mean-stack-training-workshop/

3. วิธีติดตั้ง และเผยแพร่ Module

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

http://nextflow.in.th/mean-stack-training-workshop/

วิธีติดตั้ง และเผยแพร่ Module

• คำสั่งสร้าง npm init

• คำสั่งติดตั้ง npm install

• คำสั่งเผยแพร่ npm publish

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

http://nextflow.in.th/mean-stack-training-workshop/

คำสั่งสร้าง npm init

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

http://nextflow.in.th/mean-stack-training-workshop/

package.json

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

http://nextflow.in.th/mean-stack-training-workshop/

package.json• name, version, description

• ชื่อ, เวอร์ชั่น module, และรายละเอียด

• main

• ไฟล์เริ่มต้นเมื่อเกิดการเรียก module

• author

• รายละเอียดผู้สร้าง

• dependencies

• รายชื่อ Module ที่ถูกเรียกใช้

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

http://nextflow.in.th/mean-stack-training-workshop/

dependencies

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

http://nextflow.in.th/mean-stack-training-workshop/

คำสั่งติดตั้ง npm install

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

http://nextflow.in.th/mean-stack-training-workshop/

คำสั่งเผยแพร่ npm publish

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

http://nextflow.in.th/mean-stack-training-workshop/

Node JS กันสบายๆ โค้ชพล

www.nextflow.in.th