$QJXOD-6 1RGH-6 $3, 0RQJR'% ´ %HJLQQHU · PDF fileดาวโหลด Nginx (Image)...

AngulaJS2 + NodeJS (API) + MongoDB ฉบบ Beginnerเอกบณ ใจแกวมา (Max) | DRIVESOFT TECHNOLOGY CO., LTD.


ANGULARJS2 + NODEJS (API) + MONGODB ฉบบ BEGINNERANGULAJS2 + NODEJS (API) + MONGODB FOR BEGINNER

เรยบเรยงโดย เอกบณ ใจแกวมา (Eakkabin Jaikeawma)

พมพครงท 28 กรกฏาคม 2559

ขอมลหนงสอ

เนอหา : ฉบบผเรมตน (Beginner) หรอ ผทสนใจ Angular2 + NodeJs ข นพนฐาน

ค�าอธบาย : ตดตง Oracle VM VirtualBox, Ubuntu Server 14.04, Docker, Nginx, NodeJS, MongoDB

เรยนรค�าส งพนฐาน Angular2, NodeJs, MongoDB ตวอยางระบบ RESTful API (NodeJS + ExpressJS +

JWT), ระบบ Signin, Signup, Signout ดวย Facebook JS SDK, ระบบ POST, COMMENT, UPLOAD

เหมอน Facebook ปดทายดวยเตรยมความพรอมและทดสอบระบบ AngularJS 2 กอนการใชงานจรง

จ�านวน : 250 หนา

สงวนลขสทธตามพระราชบญญตลขสทธ พ.ศ. 2537

หามลอกเลยนไมวาสวนใดสวนหนงของหนงสอเลมน ไมวารปแบบใด ๆ

เวนแตไดรบอนญาตเปนลายลกษณอกษรจากผเรยบเรยงเทานน

จดพมพและจดจ�ำหนำยโดย

บรษท ไดรฟซอฟต เทคโนโลย จ�ากด

122 หม 2 ต�าบลเสรมซาย อ�าเภอเสรมงาม

จงหวดล �าปาง รหสไปรษณย 52210

ขอมลตดตอ

E-Mail : [email protected]

Facebook : https://www.facebook.com/drivesofttechnology/

Facebook Group : https://www.facebook.com/groups/drivesofttechnology/

Website : https://drivesoftcenter.net, https://drivesoft.co

ราคา 350 บาท


ค�ำน�ำ

เอกบณ ใจแกวมำ

ผเขยน

ก

หนงสอ AngulaJs2 + NodeJs (API) + MongoDB ฉบบ Beginner คอ หนงสอ JavaScript เลมแรก

ทใชเวลาสะสมประสบการณการใชงาน JavaScript Library หรอ NodeJS มากวา 2 ปเตม และ ประสบกาณ

การใชงาน AngularJS 2 สะสมประมาณ 6 เดอนเตม ประกอบกบประสบการณเรยบเรยงหนงสอมามากกวา 6

เลมดวยกน สามารถรบประกนไดวาเนอหา ภายในหนงสอ เนอหาแบบจดเตม เนน ๆ เขมขน แนนอน

สงทจะไดจากหนงสอ AngulaJs2 + NodeJs (API) + MongoDB ฉบบ Beginner เลมน ประกอบไป

ดวยเนอหาทเกยวกบ Oracle VM VirtualBox, Ubuntu Server x64 14.04, Docker, Nginx, NodeJS,

MongoDB เรยนรค�าส งพนฐาน Angular2, NodeJs, MongoDB ตามมาดวยระบบตวอยาง RESTful API

(Node + Express + JWT), ระบบ Sign In, Sign Up, Sign Out ดวย Facebook SDK, และ ระบบ Post,

Comment, Upload Photo เหมอน Facebook ปดทายดวยเตรยมความพรอมระบบ AngularJS 2 กอนน�า

ระบบไปใชงานจรง เพอประสทธภาพการท�างานทดทสดตอไป


สารบญ

หวเรอง หนา

ค�ำน�ำ

สำรบญ

บทน�ำ

Chapter 01 ตดตง Ubuntu 14.04, Docker, Nginx, Node, MongoDB

โปรแกรม Oracle VM VirtualBox (VM

ดาวโหลดโปรแกรม Oracle VM VirtualBox (VM)

ตดต งโปรแกรม Oracle VM VirtualBox (VM)

แกไข LOCAL IP Address ตามทเราตองการ

Ubuntu Server เวอรช น 14.04.04

ดาวโหลด Ubuntu Server เวอรช น 14.04.04

ปรบเปลยนโหมด Virtualization (Hyper-VT-x)

ตดต ง Ubuntu Server เวอรช น 14.04.4

ต งคา IP Address เพอ Remote ไดจากภายนอก

ตดตง SSH Package เพอ Remote ไดจากภายนอกได

ดาวโหลดโปรแกรม PuTTY ส�าหรบ SSH Remote

Connect SSH ไปยงเครอง Virtual Machine

ตดต ง Docker Engine บน Ubuntu Server

ตรวจสอบขอมล Docker Engine ท งหมด

ก

ข

ง

1

2

3

3

8

10

10

11

14

23

25

26

27

28

29

ข


ตดตง Nginx, NodeJS, MongoDB บน Docker Engine

ดาวโหลด Nginx (Image) เขามาเกบไวใน Docker Image

ดาวโหลด Node.js (Image) เขามาเกบไวใน Docker Image

ดาวโหลด MongoDB (Image) เขามาเกบไวใน Docker Image

ค�าส ง Docker Engine บน Ubuntu Server

Docker Engine: ค�าส งเกยวกบ Command

Docker Engine: ค�าส งเกยวกบ Image

Docker Engine: ค�าส งเกยวกบ Container

ต งคา Docker เชอมตอ Nginx v1.11.1

สราง Directory จดเกบไฟล Web ท งหมด

การใชงาน Nginx Image (192.168.56.2)

ต งคา Docker เชอมตอ NodeJS v6.3.0

สราง Directory จดเกบขอมล NodeJS ท งหมด

สรางไฟล Dockerfile ส�าหรบ Build

การใชงาน NodeJS Image (192.168.56.2:8080)

ต งคา Docker เชอมตอ MongoDB v3.3.9

สราง Directory จดเกบขอมล Mongo ท งหมด

สราง Database MongoDB ใหม

สราง Username, Password เขาใชงาน Database MongoDB

เชอมโยง Image Docker ท งหมด (เขาดวยกน)

ตวอยาง: ค�าส ง Shell Script

การใชงาน Image Docker (192.168.56.2)

การใชงาน Image Docker (192.168.56.2/api)

Chapter 02 ค�ำสงพนฐำน AngularJS เวอรชน 2.0.0 (RC) เบองตน

ตงคา Node Image ทดสอบค�าส ง AngularJS เวอรช น 2.0.0 (RC)

29

30

30

31

32

32

32

33

34

36

37

38

38

39

42

43

44

45

45

47

49

50

50

51

52

ค


สรางไฟล JSON ตงคา SystemJS (ใหม)

สรางไฟล JSON ตงคา TypeScript Compiler (ใหม)

สรางไฟล JSON ตงคา TypeScript Definition (ใหม)

สรางโฟลเดอร app ส�าหรบ Web Application

สรางไฟล TypeScript ส�าหรบ App Component

สรางไฟล HTML หนาแรก (index.html)


สรางไฟล Image ใหม จาก NodeJS Image

สราง Container ใหม จาก Nginx Image

เรมตนใชงาน AngularJS เวอรช น 2.0.0 (RC)

โครงสรางไฟล AngularJS เวอรช น 2.0.0 (RC)

สรางหนา Hello World เบองตน

สรางไฟล TypeScript ส�าหรบ Main Application




Chapter 03 ค�ำสงพนฐำน MongoDB (Mongoose) เบองตน

ตงคา Node Image ทดสอบค�าส ง Mongo (Mongoose)

สราง Directory จดเกบไฟล Application ท งหมด

สรางไฟล JSON ตงคา Node Package ใหม

สรางไฟล server.js (เชอมตอ Mongo)



สราง Node MongoDB Image ใหม

สรางไฟล Shell Script (mongo.sh)

54

55

55

56

56

57

58

59

61

62

62

63

63

63

64

64

65

66

66

67

68

69

69

70

70

ฅ


รนไฟล Shell Script (mongo.sh)

ตรวจสอบการเชอมตอ MongoDB ผาน NodeJS

วธการสรางไฟล Model บน Mongoose (NodeJS)

ตวอยาง: ค�าส งก�าหนด Option ในแบบตาง ๆ

ตวอยาง: ค�าส งก�าหนด SchemaTypes ในแบบตาง ๆ

สราง Method เพมเตมลงใน Model

ก�าหนด Method | Before Saving

Create: เพมขอมล

Update: อพเดทขอมล

Delete: ลบขอมล

Find All: คนหาขอมลท งหมด

Find One: คนหาขอมล 1 รายการ

Find By ID: คนหาขอมลจาก ID

Find: คนหาขอมล แบบก�าหนดเงอนไข

ตวอยาง: เครองหมาย เปรยบเทยบ

ตวอยาง: เครองหมาย เชงตรรกะ

Find: คนหาขอมล แบบเรยงล �าดบ

ตวอยาง: เครองหมาย เรยงล �าดบ

Find: คนหาขอมล จ�านวนสงสด

สรางไฟล User Model ชอวา user.js

Create: เพมขอมล User ใหม

Update: แกไขขอมล User เดม

Delete: ลบขอมล User ทตองการ

Find One: คนหาขอมล User ทเราตองการ

Find ALL: คนหาขอมล User ท งหมด

71

72

72

74

75

76

76

77

78

79

80

80

80

81

81

81

82

82

82

85

86

88

90

92

93

ฆ


Chapter 04 ค�ำสง NodeJS & Node Package พนฐำน

Node.js คออะไร

Node Package คออะไร

สรางไฟลต งคา package.json ( Node Package)

คนหา Node Package ทตองการ

การตดต ง Node Package ผานไฟล package.json

การตดต ง Node Package ผาน Command Line

การใชงาน NodeJS (192.168.56.2:8080)

ตวอยาง: การเรยก Node Package เขามาใชงาน

ตวอยาง: การเรยก File JavaScript (NodeJS) เขามาใชงาน

ตวอยาง: การเขยนและอานไฟล

ตวอยาง: การใชงาน Router ของ ExpressJS

Chapter 05 จดเตรยมโครงสรำงและตดตง Node Package ทงหมด

โครงสรางและตดต ง Node Package ท งหมด

จดเตรยม โครงสรางส�าหรบ AngularJS2

สรางไฟล JSON ตงคา SystemJS

สรางไฟล TypeScript ส�าหรบ Main Application

สรางไฟล TypeScript ส�าหรบ Routes Application


สรางไฟล TypeScript ส�าหรบ Main Component



จดเตรยมโครงสรางส�าหรบ Node RESTful API

สรางไฟล server.js (เชอมตอ Mongo)

สรางไฟล Test Model (test.js)

95

96

96

97

98

98

99

100

101

101

102

102

103

104

105

107

109

109

109

109

110

111

112

113

115

ง


สรางไฟล Authentication Model (authentication.js)

สรางไฟล Test Router (test.js)

สรางไฟล Authentication Router (authentication.js)

สรางไฟล Setting ส�าหรบ Mongo

สรางไฟล Setting ส�าหรบ Service



การใชงาน Image Docker (192.168.56.2/api)

จดเตรยม ฐานขอมล ส�าหรบ MongoDB

สราง Database MongoDB ใหม

สราง Username, Password เขาใชงาน Database MongoDB

Chapter 06 ระบบ RESTful API (Node + Express + JWT)

ระบบ RESTful API

สราง RESTful Web API ดวย Node + Mongo

สรางไฟล User Model (user.js)

สรางไฟล Profile Model (profile.js)

สรางไฟล User Router (user.js)

สรางไฟล Profile Router (user.js)

แกไขไฟล Dockerfile ส�าหรบ Build


วธทดสอบการใชงาน RESTful API (Node + Mongo)

แสดงผลการใชงาน RESTful API (Node + Mongo)

Postman (Google Chrome Application)

การใชงาน Postman (Google Chrome Application)

เรมตนใชงาน RESTful API Server (Node + Mongo)

116

116

117

118

119

119

120

120

121

121

122

123

124

125

127

127

128

129

129

130

130

131

131

132

133

จ


ลงทะเบยน User เพอขอรบ JSON Web Tokens

การใชงาน JSON Web Tokens

เพมขอมล User ใหม

ดงขอมล User ลาสด

แกไขขอมล User เดม

แกไขขอมล Facebook ของ User

แกไขขอมล Status ของ User

ลบขอมล User ทตองการ

เพมขอมล Profile ใหม

แกไขขอมล Profile เดม

ดงขอมล Profile ออกมา

ลบขอมล Profileทตองการ

Chapter 07 ระบบ Signin, Signup, Signout ดวย Facebook

ระบบ Signin, Signup, Signout ดวย Facebook SDK

วธใชงาน Facebook JavaScript SDK

Facebook Application

ข นตอนการสราง Facebook Application

การเชอมตอ Facebook Application ทสรางไว

สรางระบบ Signin, Signup, Signout ดวย Facebook SDK

สรางโครงสรางระบบ facebook-ang2 ใหม

เขยนค�าส งลงบน Constructor() Method

เขยนค�าส งลงบน btnSignin() Method

เขยนค�าส งลงบน btnSignout() Method


ทดสอบ: ระบบ Signin, Signup, Signout ดวย Facebook SDK

134

135

136

137

138

140

142

144

146

147

148

149

151

152

152

153

154

156

157

157

160

161

163

164

166

ฉ


Chapter 08 ระบบเขยนและแสดงบทควำมดวย AngularJS 2

ระบบเขยนและแสดงบทความ

สรางระบบเขยนและแสดงบทความดวย AngularJS 2

สรางโครงสรางระบบ article-ang2 ใหม

สรางโฟลเดอร Views ส�าหรบจดเกบไฟล HTML

เขยนค�าส ง TypeScript ส�าหรบ แสดงขอมล

เขยนค�าส ง TypeScript ส�าหรบ บนทกขอมล

เขยนค�าส ง TypeScript ส�าหรบ แกไขขอมล

เขยนค�าส ง TypeScript ส�าหรบ อพเดทขอมล

เขยนค�าส ง TypeScript ส�าหรบ ลบขอมล


สราง RESTful API ระบบเขยนและแสดงบทความ

สรางโครงสรางระบบ article-api ใหม

สรางไฟล Article Model (articlejs)

สรางไฟล Article Router (article.js)

ตวอยาง: เพมขอมล Article ใหม

ตวอยาง: ดงขอมล Article ท งหมด

ตวอยาง: อพเดทขอมล Article เดม

ตวอยาง: ลบขอมล Article ทตองการ


ทดสอบ: การใชงาน Angular2 + RESTful API

การใชงาน RESTful API

ทดสอบ: เพมบทความ

ทดสอบ: แกไขบทความ

ทดสอบ: ลบบทความ

167

168

169

169

173

177

178

179

180

181

182

183

183

184

184

185

186

186

187

188

189

190

191

192

192

ช


Chapter 09 ระบบ POST & COMMENT & UPLOAD

การพฒนาระบบ POST, COMMENT UPLOAD

สรางระบบ POST & COMMENT & UPLOAD ดวย AngularJS 2

สรางโครงสรางระบบ social-ang2 ใหม

แกไขไฟล TypeScript ส�าหรบ Main Component

สรางไฟล TypeScript ส�าหรบ Comment Component

สรางโฟลเดอร Views ส�าหรบจดเกบไฟล HTML

สรางไฟล HTML ส�าหรบ Main Component

ค�าส ง: สวนทแสดง FORM ส�าหรบ POST, UPLOAD

ค�าส ง: สวนทแสดง POST ท งหมด

สรางไฟล HTML ส�าหรบ Comment Component

เขยนค�าส ง TypeScript ส�าหรบ POST ขอมล

เขยนค�าส ง TypeScript ส�าหรบ UPLOAD รปภาพ

เขยนค�าส ง TypeScript ส�าหรบ ลบ POST

เขยนค�าส ง TypeScript ส�าหรบ COMMENT

เขยนค�าส ง TypeScript ส�าหรบ ลบ COMMENT


สราง RESTful API ระบบ POST & COMMENT & UPLOAD

สรางโครงสรางระบบ social-api ใหม

สรางไฟล Post Model (post.js)

สรางไฟล Post Router (post.js)

สรางไฟล CommentModel (comment.js)

สรางไฟล Comment Router (comment.js)

ตวอยาง: เพม POST ใหม

ตวอยาง: ลบ POST

193

194

195

195

198

199

201

202

203

204

204

205

207

208

209

210

211

212

212

213

213

214

214

215

215

ซ


ตวอยาง: ดงขอมล POST ท งหมด

ตวอยาง: Upload รปภาพ

ตวอยาง: ดงขอมล COMMENT ของ POST ท งหมด

ตวอยาง: เพม COMMENT ใหม

ตวอยาง: ลบ COMMENT


ทดสอบ: การใชงาน Angular2 + RESTful API

ทดสอบ: การใชงาน Angular 2 + Nginx

ทดสอบ: POST ขอความ

ตวอยาง: ลบ POST ขอความ

ทดสอบ: Upload รปภาพ

ทดสอบ: Comment ขอความ

ทดสอบ: ลบขอมล Comment ขอความ

Chapter 10 เตรยมควำมพรอม AngularJS 2 กอนกำรใชงำนจรง

เตรยมความพรอม Angular 2 กอนการใชงานจรง

การตงคา AngularJS 2 ส�าหรบใชงานจรง

ต งคา TypeScript Compiler เพมเตม

ต งคา Node Package เพมเตม

Gulp (Node Package)

ตดต ง Gulp (Node Package)

ตดต ง Gulp เสรมทจ �าเปน (Node Package)

สรางไฟล gulpfile.js ส�าหรบต งคา Gulp

การรนไฟล gulpfile.js ต งคา Gulp

เตรยมความพรอม AngularJS 2 กอนการใชงานจรง

ต งคากอนน�า AngularJS 2 การใชงานจรง

216

216

217

217

217

219

220

221

221

221

222

222

222

223

224

225

226

226

227

227

228

228

230

231

232

ฌ


บทน�ำ

ปจจบนน นกพฒนำซอฟแวรในประเทศไทยเรำ ยงขำดทกษะควำมรในดำนกำรบรหำรจดกำร

เครอง Server ทเปน Hardware ทอยคกบนกพฒนำซอฟแวรมำโดยตลอด หนงสอเลมน จะชวยเตมเตม

ควำมรในดำนบรหำรจดกำรเครอง Server ไดเปนอยำงด และ มำพรอมกบเทคโนโลยในกำรบรหำร

จดกำร Linux Package ดวยเทคโนโลยสมยใหมทก�ำลงเปนทนยมกนมำก คอ Docker นนเอง

ใครเหมาะทจะอานหนงสอเลมน

เหมำะส�ำหรบ นกพฒนำเวบแอพพลเคชนรนใหมทก�ำลงสนใจเรยนรกำรพฒนำเวบแอพพลเคชน

ดวยภำษำ JavaScript ทฮตอยำง NodeJS และ AngularJS 2 พรอมกบใชงำนฐำนขอมลประเภท NoSQL

อยำง MongoDB ทเหมำะส�ำหรบระบบ RESTful API ทใชขอมลประเภท JSON ไดอยำงลงไป

จ


เนอหาทหนงสอเลมนครอบคลม

ตอไปจะเปนเนอหำทมทงหมดในหนงสอเลมน

Chapter 01 ตดตง Ubuntu 14.04, Docker, Nginx, Node, MongoDB

ดำวโหลดและตดตง Ubuntu Server 14.04, Docker และ Nginx, NodeJS, MongoDB Image

Chapter 02 ค�าสงพนฐาน AngularJS เวอรชน 2.0.0 (RC) เบองตน

เรยนรค�ำสงกำรใชงำน AngularJS เวอรชน 2.0.0 (RC) รวมกบ Node Image v6.3.0

Chapter 03 ค�าสงพนฐาน MongoDB (Mongoose) เบองตน

เรยนรค�ำสงกำรใชงำน Mongoose ส�ำหรบเชอมตอฐำนขอมลของ MongoDB เบองตน

Chapter 04 ค�าสง NodeJS & Node Package พนฐาน

เรยนรกำรใชงำนค�ำสง Node และ กำรตดตง Node Package ผำน NPM (Node Package Manager)

Chapter 05 จดเตรยมโครงสรางและตดตง Node Package ทงหมด

จดเตรยมโครงสรำงโฟลเดอรและไฟล พรอมดวยตดตง Node Package ทจ�ำเปนส�ำหรบระบบ

Chapter 06 ระบบ RESTful API (Node + Express + JWT)

เรยนรกำรสรำงและกำรใชงำนระบบ RESTful API Server ดวย NodeJS + MongoDB แบบงำย ๆ

Chapter 07 ระบบ Signin, Signup, Signout ดวย Facebook

เรยนรกำรสรำงระบบ User Manager ดวย Signup / Signin, Signout ผำน Facebook SDK

Chapter 08 ระบบเขยนและแสดงบทความดวย AngularJS 2

เรยนรกำรสรำงระบบเขยนและแสดงบทควำมดวย AngularJS 2 + RESTful API Server

Chapter 09 ระบบ POST & COMMENT & UPLOAD

เรยนรกำรสรำงระบบ POST & COMMENT & UPLOAD แบบใชงำนใน FACEBOOK

Chapter 10 เตรยมความพรอม AngularJS 2 กอนการใชงานจรง

เตรยมควำมพรอมระบบทพฒนำดวย AngularJS 2 กอนน�ำระบบไปใชกบ Hosting จรง

ฉ

$QJXOD-6 1RGH-6 $3, 0RQJR'% ´ %HJLQQHU · PDF fileดาวโหลด Nginx (Image)...

Documents

Transcript of $QJXOD-6 1RGH-6 $3, 0RQJR'% ´ %HJLQQHU · PDF fileดาวโหลด Nginx (Image)...