เรียนรู้ Node JS แบบสบายๆ...

Post on 14-Apr-2017

10.239 views 1 download

Transcript of เรียนรู้ Node JS แบบสบายๆ...

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/

folder index.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/

module App Require(…)

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

module App

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