workshopreact

WorkShop WebApplication ด้วย React : 101
8. แกไ้ ขไฟล์ package.json โดยบรรทดั “scripts” ใหเ้ พิ่มค�ำสั่ง start เขา้ ไปดงั โค้ดด้านลา่ งน้ี

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start" : "nodemon server.js"
},

9. ท่ี terminal สงั่ รัน server ของเราโดยพมิ พ์ npm start แลว้ กด enter

10. เปดิ browser แล้วพิมพ์ url: http://localhost:3009/graphiql คณุ จะพอกับ GraphiQL เอาไวท้ ดสอบ
การ query แต่ถา้ คุณชอบแบบดิบๆ เถือ่ นๆ ใชง้ านยากๆ ก็เขา้ ไดด้ ว้ ย url: http://localhost:3009/api/graphql (แตม่ ัน
จะแสดงข้อความวา่ GET query missing. แตผ่ มแนะน�ำอยา่ ใชเ้ ลยครบั มันเถ่ือนและดบิ )

คลิกเพือ่ แสดงผลลพั ธ์ คลกิ เพอื่ แสดงค�ำอธบิ าย Schema ทเ่ี ราสรา้ ง
ช่องสำ� หรับกรอก query docs นี้มันจะสรา้ งใหเ้ ราเอง ผมวา่ เจ๋งดี

เพื่อทดสอบ ชอ่ งส�ำหรบั แสดงผลลัพธ์

101

WorkShop WebApplication ดว้ ย React : 102
11. ทดสอบ query โดยผมจะเทยี บโคด้ กับสิ่งท่ี GraphiQL มันแสดงผลนะครับ

ดูจากภาพแลว้ น่าจะพอเขา้ ใจนะครบั QueryType ก็เปลย่ี นเสมือน DB ใน mysql ส่วน user นีม้ นั ก็เปรยี บเสมอื
field หรอื talbe ใน mysql ครับ ทว่ี า่ เป็น 2 อยา่ งก็เพราะวา่ มันตอ้ งดูท่ี type จากโคด้ มนั เป็น GraphQLString มนั เลย
เปรยี บเสมือน filed ใน mysql แตถ่ า้ มนั เป็น type ชอ่ื ตวั แปรอ่ืนท่เี ราสรา้ งข้นึ เช่น member, customer แบบนีก้ ใ็ ห้
จนิ ตนาการวา่ มันเปน็ table ครับ (ผมอธิบายเชงิ เปรยี บเทยี บเพอื่ ใหเ้ ข้าใจภาพนะครับ มันไม่ใชห่ ลักทางวิชาการ)



12. เรามาลองสร้าง schema เพ่ิมเตมิ เพื่อให้เห็นการเชอ่ื มโยงกนั อกี แบบนะครับ โดยแกไ้ ขไฟล์ schema.js

const graphql = require('graphql') A
const { B

GraphQLList, มโี คด้ ตอ่ ด้านล่าง
GraphQLObjectType,
GraphQLSchema,
GraphQLString,
} = graphql
getUser = () => ({
email: '[email protected]',
name: 'john',
nickname: 'jj'
})
const User = new GraphQLObjectType({
name: 'User',
fields: () => ({

email: { type: GraphQLString },
name: { type: GraphQLString },
nickname: {type: GraphQLString}
})
})

102

WorkShop WebApplication ดว้ ย React : 103

const QueryType = new GraphQLObjectType({ โค้ดต่อจากดา้ นบน
name: 'Query',
fields: () => ({ C
user: {
type: User, D
resolve: () => {
return getUser()
}
}
})

})

const schema = new GraphQLSchema({
query: QueryType,

})

module.exports = schema

อธิบายโค้ด
A. เป็น function ทค่ี ือ object เป็นข้อมูลเพอ่ื ใชท้ ดสอบเฉยๆ นะครบั
B. สรา้ ง User ทเ่ี ปน็ ประเภท GraphQLObjectType ถา้ จะใหเ้ ข้าใจงา่ ยๆ คือเหมอื นเราสรา้ ง table ใน mysql
ครับ สังเกตุได้วา่ มนั มีชอ่ื ฟลิ ด์ เชน่ email และบอกประเภทด้วยวา่ เป็น string (GraphQLString)
C. จากเดิม type ตรงน้ีมันคือ GraphQLString แต่ตอนนม้ี นั ถูกเปลี่ยนเปน็ object ชอ่ื User ทีเ่ ราสร้างเมอื่ กคี้ รับ
D. เราจะตอ้ ง resolve คา่ ออกไปด้วยนะครบั วา่ ให้คนื ค่าเปน็ อะไร ในโค้ดเป็นการคือคา่ object ท่ไี ด้จาก
getUser()
จากนน้ั ที่ browser ให้ refresh ทหี นงึ่ ครบั (GraphiQL จะไดท้ ำ� การรบั โครงสร้างใหมท่ ีเ่ ราพึ่งแกไ้ ข) แลว้ ช่อง
Query กอรกโค้ดตามรูปด้านลา่ งนี้ครับ

query{
user{
name,
email,
nickname
}
}

อธบิ ายผลลัพธ์
จะเห็นว่าในการ query นนั้ เราจะระบุ user ทมี่ าจาก fields: ()=>({ user: .... แล้วตวั user น้กี ็ไปเรยี กตัวแปร
User ทเ่ี ราสร้างขึ้นโดยมีโครงสรา้ ง name, email และ nickname แลว้ ผลลพั ธท์ ีไ่ ด้ใน browser มันก็แสดงข้อมูลออกมา
ตามฟิลดท์ เี่ ราระบุลงไป ถา้ หากเราไมต่ ้องการใหแ้ สดง nickname ใน browser เรากไ็ ม่ต้องใส่ nickname ตวั graphql ก็จะ
คืนค่าผลลัพธ์มาให้เฉพาะฟิลด์ทรี่ ะบุเท่าน้ัน นี่แหละคอื ความสามารถของ graphql (ใน browser ลงลบ nickname ออกดูสิ
ครับ)

103

WorkShop WebApplication ด้วย React : 104

สร้าง Schema และ fetchdata จาก REST API

ตดิ ตั้ง node-fetch

ก่อนอ่นื การท่ี nodejs จะ fetchdata ได้เราจะตอ้ งติดตั้ง package ทีช่ อื่ วา่ node-fetch กอ่ นนะครบั
1. ที่ terminal ใหก้ ด ctrl+c เพื่อยกเลิกการรนั server
2. พมิ พ์ npm i node-fetch -S แลว้ กด Enter พอตดิ ตงั้ เสรจ็ ก็ส่ังรัน server ได้ โดยพิมพ์ npm start

Schema สำ� หรับ User A



1. แกไ้ ขไฟล์ schema.js โดยแกเ้ ป็นโคด้ ด้านลา่ งนี้คบั

const fetch = require('node-fetch')
const graphql = require('graphql')
const {

GraphQLList,
GraphQLObjectType,
GraphQLSchema,
GraphQLString,
GraphQLInt
} = graphql

const BASE_URL = 'https://jsonplaceholder.typicode.com/' C B
function fetchResponseByURL(relativeURL) {

return fetch(`${BASE_URL}${relativeURL}`).then(res => res.json())
}

function fetchUser() { D
return fetchResponseByURL('users')

}

const UserType = new GraphQLObjectType({ E
name: 'User',
fields: () => ({ มีโคด้ ตอ่ ด้านล่าง
id: { type: GraphQLInt }, 104
name: { type: GraphQLString },
username: { type: GraphQLString },
email: { type: GraphQLString },
})

})

WorkShop WebApplication ดว้ ย React : 105

const QueryType = new GraphQLObjectType({ Fโคด้ ต่อจากด้านบน
name: 'Query',
fields: () => ({
allUser: {
type: new GraphQLList(UserType),
resolve: fetchUser
}
})

})

const schema = new GraphQLSchema({
query: QueryType,

})

module.exports = schema

อธบิ ายโค้ด
A. require node-fetch ทำ� ให้ nodejs (express) สามารถ fetch data ได้
B. สรา้ งตัวแปร BASE_URL เกบ็ url หลกั ทีจ่ ะใช้ fetch data
C. function ส�ำหรบั fetch data จาก url ดงั กลา่ ว โดยรบั ตวั แปร path ของ url ท่ตี อ้ งการมาต่อกนั อกี ที ท�ำแบบ
นี้หากต้องการขอ้ มูล Album หรือ photo จะไดไ้ ม่ตอ้ งเรยี ก url ยาวๆ ครับ
D. ดงึ ขอ้ มลู user จาก url
E. สร้างโครงสร้างท่เี กบ็ ฟลิ ด์ต่างๆ ของ User ตงั้ ช่ือว่า UserType (คล้ายกบั การสร้างโครงสร้างตารางของ mysql
ครับ)
F. เปน็ query หลกั โดยข้างในมี fields ชอื่ allUser โดยจะใชโ้ ครงสรา้ งขอ้ มลู จาก UserType และทำ� การคนื คา่
มาจาก function fetchUser
ท่ี browser ให้ refresh ครั้งหนึ่งกอ่ นครบั แลว้ ป้อนการ query ขอ้ มูลดงั ภาพครับ

query{ ปล. เครอ่ื งหมาย , ไม่จำ� เปน็ ต้องใสก่ ไ็ ด้นะครบั
allUser { เพียงแตผ่ มตดิ การใช้ , มันเลยพมิ พต์ ดิ มือไปเฉยๆ
id,
name, 105
username,
email
}
}

WorkShop WebApplication ด้วย React : 106

Schema สำ� หรับ Album



ในการแสดงขอ้ มลู Album น้นั เราจะแสดงตาม userID ดังนนั้ ใน schema นี้เรามกี ารส่ง query ไปด้วย
1. แกไ้ ขไฟล์ schema.js โดยแก้เปน็ โคด้ ด้านลา่ งน้ีคบั

const fetch = require('node-fetch') A
const graphql = require('graphql') B
const {

GraphQLList,
GraphQLObjectType,
GraphQLSchema,
GraphQLString,
GraphQLInt
} = graphql
const BASE_URL = 'https://jsonplaceholder.typicode.com/'
function fetchResponseByURL(relativeURL) {
return fetch(`${BASE_URL}${relativeURL}`).then(res => res.json())
}
function fetchUser() {
return fetchResponseByURL('users')
}
function fetchAlbum(parent, { userId }) {
return fetchResponseByURL('albums?userId=' + userId)
}
const AlbumType = new GraphQLObjectType({
name: 'Album',
fields: () => ({

userId: { type: GraphQLInt },
id: { type: GraphQLInt },
title: { type: GraphQLString },
})
})
const UserType = new GraphQLObjectType({
name: 'User',
fields: () => ({
id: { type: GraphQLInt },
name: { type: GraphQLString },
username: { type: GraphQLString },
email: { type: GraphQLString }
})
})

มีโคด้ ตอ่ ด้านลา่ ง

106

WorkShop WebApplication ด้วย React : 107

const QueryType = new GraphQLObjectType({ โคด้ ตอ่ จากดา้ นบน
name: 'Query',
fields: () => ({ C
allUser: {
type: new GraphQLList(UserType),
resolve: fetchUser
},
albumsByUser: {
type: new GraphQLList(AlbumType),
args: {
userId: { type: GraphQLInt }
},
resolve: fetchAlbum
}
})

})

const schema = new GraphQLSchema({
query: QueryType,

})

module.exports = schema

อธบิ ายโคด้
A. function ส�ำหรับ fetch ข้อมลู album โดยส่ง userId ไปด้วย ซ่ึงรูปแบบจะเปน็ (parent, {userId}) โดยท่ี
parent เปน็ pattern ท่เี ราต้องสง่ ไปซง่ึ เราไมไ่ ดใ้ ช้งาน
userId คือ query variables ทีต่ อ้ งระบุให้ตรงกับขอ้ C ซ่งึ มีได้หลายตัว
B. โครงสรา้ งฟลิ ์ของ Album ตัง้ ชอื่ ว่า AlbumType
C. สรา้ งฟิล์ใหมช่ ่ือ albumsByUser โดยใชโ้ ครงสร้างของ AlbumType ซ่ึงจะสง่ query variables ไปด้วยโดยจะ
ใช้ args ในการระบุ query แบบ object โดยจะมีตวั แปรได้หลายตัวในที่นม้ี แี ค่ userId แลว้ สดุ ท้ายก็ตอ้ ง resolve ว่าจะคนื ค่า
อะไรออกไปด้วย

A
C

B

107

WorkShop WebApplication ดว้ ย React : 108
อธบิ าย
A. รปู แบบในการเรียกดขู ้อมูลแบบมกี ารสง่ ตัวแปรเข้าไปด้วย

query albums($userId: Int) {
albumsByUser(userId: $userId){
userId
id
title
}

}

โดยหากมีการสง่ ตัวแปรเราจะต้องระบุช่อื ในการ query ตั้งเปน็ อะไรก็ได้ครบั แลว้ กำ� หนดตัวแปรพร้อมระบุ
ชนดิ ของมนั ดว้ ย
ในการเรยี กดฟู ิลด์ albumsByUser เราตอ้ งสง่ ตวั แปรชื่อ userId โดยมคี ่าเท่ากบั $userId เข้าไปครับ ถ้ามี
หลายตัวกค็ น่ั ดว้ ยเคร่อื งหมาย , โดยชอื่ ตวั แปรตอ้ งตรงกบั โครงสรา้ งตวั แปรของ albumsByUser
B. หน้าต่าง QUER VARIABLES ถา้ มนั ไมแ่ สดงมันจะอยูด่ ้านลา่ งนะครับลากมนั ขน้ึ มาครบั โดยเราจะระบตุ ัวแปร
เปน็ object ไปพร้อมระบคุ ่าดงั รูป โดยในรูปตัวแปรชอ่ื userId จะหมายถึงตวั แปร $userId นะครบั
C. อยากให้ลองคลิกดูนะครับมันจะแสดง ฟลิ ด์ใน roottype (QueryType) ให้เราเห็นวา่ มีอะไรและตอ้ งสง่ คา่ อะไร

Schema ส�ำหรบั Photo



ในการแสดงข้อมูล Photo นั้นเราจะแสดงตาม albumId (ซึ่ง Album กจ็ ะแสดงตาม userId มาอกี ทีหน่งึ ...มากนั
เป็นทอดๆ) ดังน้นั ใน schema น้ีเรามีการสง่ query ไปดว้ ย
1. แกไ้ ขไฟล์ schema.js โดยแกเ้ ปน็ โคด้ ดา้ นล่างน้ีคบั

const fetch = require('node-fetch') มโี คด้ ตอ่ ด้านล่าง
const graphql = require('graphql') 108
const {

GraphQLList,
GraphQLObjectType,
GraphQLSchema,
GraphQLString,
GraphQLInt
} = graphql
const BASE_URL = 'https://jsonplaceholder.typicode.com/'
function fetchResponseByURL(relativeURL) {
return fetch(`${BASE_URL}${relativeURL}`).then(res => res.json())
}
function fetchUser() {
return fetchResponseByURL('users')
}
function fetchAlbum(parent, { userId }) {
return fetchResponseByURL('albums?userId=' + userId)
}

WorkShop WebApplication ด้วย React : 109

function fetchPhoto(parent, { albumId }) { โคด้ ต่อจากด้านบน
return fetchResponseByURL('photos?albumId=' + albumId)
A
}

const PhotoType = new GraphQLObjectType({ B
name: 'Photo',
fields: () => ({
albumId: { type: GraphQLInt },
id: { type: GraphQLInt },
title: { type: GraphQLString },
thumbnailUrl: { type: GraphQLString }
})

})

const AlbumType = new GraphQLObjectType({
name: 'Album',
fields: () => ({
userId: { type: GraphQLInt },
id: { type: GraphQLInt },
title: { type: GraphQLString },
})

})

const UserType = new GraphQLObjectType({
name: 'User',
fields: () => ({
id: { type: GraphQLInt },
name: { type: GraphQLString },
username: { type: GraphQLString },
email: { type: GraphQLString }
})

})

const QueryType = new GraphQLObjectType({
name: 'Query',
fields: () => ({
allUser: {
type: new GraphQLList(UserType),
resolve: fetchUser
},
albumsByUser: {
type: new GraphQLList(AlbumType),
args: {
userId: { type: GraphQLInt }
},
resolve: fetchAlbum
},

มโี คด้ ตอ่ ด้านล่าง

109

WorkShop WebApplication ดว้ ย React : 110

photosByAlbum: { โคด้ ต่อจากด้านบน
type: new GraphQLList(PhotoType),
args: { C
albumId: { type: GraphQLInt }
},
resolve: fetchPhoto

}
})
})

const schema = new GraphQLSchema({
query: QueryType,

})

module.exports = schema

อธิบายโค้ด
A. function สำ� หรบั fetch ขอ้ มลู photo โดยสง่ albumId ไปด้วย ซงึ่ รปู แบบจะเป็น (parent, {albumId})
โดยที่
parent เปน็ pattern ท่เี ราตอ้ งส่งไปซ่งึ เราไม่ได้ใชง้ าน
albumId คือ query variables ทตี่ ้องระบใุ ห้ตรงกบั ขอ้ C ซ่ึงมไี ด้หลายตวั
B. โครงสร้างฟิลข์ อง Photo ต้ังชอื่ ว่า PhotoType
C. สรา้ งฟิล์ใหม่ช่อื photosByAlbum โดยใช้โครงสร้างของ PhotoType ซ่งึ จะส่ง query variables ไปด้วยโดย
จะใช้ args ในการระบุ query แบบ object โดยจะมตี ัวแปรไดห้ ลายตวั ในท่ีนมี้ แี ค่ albumId แล้วสุดท้ายกต็ ้อง resolve วา่ จะ
คนื คา่ อะไรออกไปดว้ ย
ที่ GraphiQL กรอกการ Query และ Query Variables ก็จะได้ผลลัพธอ์ อกมาเหมอื นในภาพครบั

{ query photos($albumId: Int){
"albumId":21 photosByAlbum(albumId: $albumId){
} id
title
thumbnailUrl
}
}

110

WorkShop WebApplication ดว้ ย React : 111

React ติดต่อ GraphQL ผา่ น react-apollo

หลงั จากท่เี ราได้สร้าง Server สำ� หรบั จดั การ API ของ GraphQL เป็นทเี่ รียบร้อยแล้วนะครบั การท่ีเราจะท�ำให้ Re-
act สามารถ fetch data จาก GraphQL Server ทีเ่ ราพงึ่ ได้สร้างไปน้นั จะต้องใช้ node package ท่ชี ือ่ react-apollo ใคร
อยากศกึ ษาวิธีใชง้ านเพิม่ เตมิ แบบศึกษาเองสามารถดไู ด้ที่ https://github.com/apollographql/react-apollo

1. เปดิ terminal อีกหน้าต่างหน่งึ หรอื อกี แท็บหนง่ึ ครับ โดยท่ี terminal เดมิ เรายังรัน photoalbum_server
ไว้อยู่นะครับ ไมง่ ้นั เราจะเรยี กขอ้ มลู GraphQL ไม่ไดจ้ ากน้ันใน terminal ใหมใ่ ห้ cd เข้าไปยังโฟลเดอรโ์ ปรเจค photoal-
bum_graphql
2. พมิ พ์ npm i react-apollo@1 -S แลว้ กด Enter (ผมใช้ react-apollo v.1 นะครบั เนอื่ งจาก v.2 เปลี่ยนวธิ ี
การใช้งานซง่ึ อาจจะไม่เหมาะกบั มือใหม่เทา่ ไหรน่ กั ใครสนใจดเู พ่ิมเติมได้ท่ี https://github.com/apollographql/re-
act-apollo) เม่ือตดิ ต้ังเสร็จกร็ นั คำ� ส่งั npm start ไดเ้ ลยนะครับแลว้ ดูการแสดงผลที่ browser

และใน react-apollo v.1 นนั้ เวลาติดต้งั เสร็จจะมแี จง้ วา่ ไม่สามารถตดิ ตงั้ แพคเกจชอื่ enzyme@^3.0.0 ได้ อัน
นก้ี ็ไมต่ ้องตกใจนะครับไมเ่ ปน็ ไรครับ เพราะเราไมไ่ ด้เขียน test ครับ
3. เปิด folder photoalbum_graphql ดว้ ยโปรแกรม visual studio code ใหพ้ รอ้ มไว้สำ� หรับการท�ำงานกัน
โค้ดนะครบั

ความพิเศษของ react-apollo ขอ้ หน่งึ ที่ผมชอบมากๆ กค็ ือ react-apollo มกี ารใช้ redux และมนั มี
Store ในตวั มนั เอง ซึ่งท�ำให้โค้ดของเราทเี่ คยมกี ารใช้ redux ในการ fetch data นนั้ ทำ� ไดส้ ะดวกขึ้นกว่าเดิมมากๆ
ครบั โดยทเ่ี ราไมต่ อ้ งไมส่ ร้าง reducers ไม่ต้องสร้าง actions ไมต่ อ้ ง dispatch ให้มันวนุ่ วายเลยครบั (แต่ถา้ มกี าร
ใชง้ าน data ท่ไี ม่เกีย่ วกับ GraphQL นนั้ ก็ยงั คงตอ้ งใช้อยนู่ ะครับ เชน่ ในหนา้ จอ บวก ลบ อาย)ุ เนอ่ื งจาก react-apol-
lo มนั จะจดั การเร่อื งพวกน้ีใหเ้ ราเองครับ
แนะน�ำให้เปดิ ไฟล์ photoalbum_server/schema.js ไว้ด้วยนะครบั เพ่อื ดวู ่า schema โครงสร้างฟิลด์
ตา่ งๆ มีอะไรบ้าง หรือจะดจู าก GraphiQL ก็ได้นะครับ ผมวา่ สะดวกดี

111

WorkShop WebApplication ดว้ ย React : 112

ปรับหนา้ จอ User ใช้งาน GraphQL

1. แก้ไขไฟล์ src/index.js โดยแกเ้ ป็นโค้ดนี้ครับ

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import registerServiceWorker from './registerServiceWorker'

import { Router, browserHistory } from 'react-router' A
import routes from './routes'
import { createStore } from 'redux'
import reducers from './reducers'

import { ApolloClient, ApolloProvider, createNetworkInterface } from 'react-apollo'

const networkInterface = createNetworkInterface({ B
uri: 'http://localhost:3009/api/graphql'

})

const client = new ApolloClient({ C
networkInterface D

})
const store = createStore(reducers)

ReactDOM.render( E
<ApolloProvider client={client} store={store}>
<Router
history={browserHistory}
routes={routes}
/>
</ApolloProvider>,
document.getElementById('root')

);
registerServiceWorker();

อธบิ ายโคด้
A. นำ� เขา้ ส่ิงท่จี ำ� เปน็ ทต่ี อ้ งใช้งานใน react-apollo โดยถา้ สังเกตจุ ากโปรเจคเดมิ เราจะไมม่ กี ารใช้งาน re-
dux-thunk และ redux-promise-middleware แลว้ นะครบั
B. createNetworkInterface ใชส้ �ำหรบั ระบุ uri ทเี่ ป็น graphql server
C. ApolloClient ตวั นีท้ �ำหนา้ ทเี่ หมือน store ของ reducer แตเ่ ปน็ ของ Apollo ซึ่งเราจะต้องระบุ create-
NetworkInterface ท่ีเราสร้างในข้อ B ลงไปครับ
D. สรา้ ง store สำ� หรบั reducer เหมอื นโปรเจค photoalbum ครับแตไ่ มไ่ ด้ใช้ redux-thunk และ re-
dux-promise-middleware ละ
E. ในโปรเจค photoalbum จุดนเี้ ราจะใช้ Provider ใชม่ ัย้ ครับ แตต่ อนนเี้ ราเปล่ยี นมาใช้ ApolloProvider
แทนละครับโดยส่ง client และ store โดยที่ store ทีเ่ ราส่งไปน้นั เราใช้ reducer ในสว่ นของการบวก ลบ อายุเทา่ นัน้ เองครับ

112

WorkShop WebApplication ด้วย React : 113
2. แก้ไขไฟล์ src/pages/User.js โดยปรบั ใหเ้ ป็นโค้ดด้านลา่ งน้ี

import React, { Component } from 'react' A
import { gql, graphql } from 'react-apollo'
import UserList from '../components/Users/UserList'

class Home extends Component {
render() {
const { data: {allUser, error, loading} }C= this.props B
if (error) {
}
return <div>Error....</div>

return ( DE
<div>
<h1>Users</h1>
{loading && <div>Loading...</div>}
{allUser && <UserList data={allUser} />}
</div>

)
}
}

const GraphQL = graphql(gql` F
query { G

allUser{
id
name
username
email
}
}
`
)(Home)
export default GraphQL

อธบิ ายโคด้
A. gql และ grphql 2 ตัวนีจ้ ะทำ� ให้ component สามารถ query ตัว GraphQL ได้ตาม schema ที่เรา
ต้องการ พูดแบบภาษาชาวบ้านคือ อยากได้ข้อมูลฟลิ ดอ์ ะไรบ้างจาก graphql server ก็ query เอาน่ันเองครบั
B. ใน react-apollo จะสง่ props มาใหเ้ หมอื นการที่เราใช้ connect ใน react-redux น่นั เองครบั โดยจะ
ส่ง data, error และ loading มาให้เสมอโดยทเ่ี ราไม่ตอ้ งไปจัดการเร่ืองพวกน้เี องครับ สุดยอดจริงๆ ครับ สว่ น allUser คือ
ฟิลดท์ ่เี ราต้องการจากการท่เี รา query ในขอ้ F (ถา้ จ�ำไดใ้ นการทดสอบการ query โดยใช้ GraphiQL เรากจ็ ะได้ data
และ ฟิลด์ท่ีเราสง่ เข้าไปครับ)
C. เช็ควา่ ถา้ มี Error กใ็ หแ้ สดงขอ้ ความ Error กอ่ นครับ
D. เชค็ ว่าถา้ มีการ loding ขอ้ มูลอยกู่ ็แสดงข้อความ loading
E. เช็คก่อนวา่ allUser มขี อ้ มูลหรือไม่ ถ้ามคี ่อยส่งให้ component UserList (เพราะ graphql จะสง่ loading
มากอ่ นจากน่นั เมอ่ื loading เสรจ็ ถึงสง่ allUser มาให้ครบั เราเลยต้องเช็คกอ่ น)
F. ใช้ graphql ในการ query ข้อมูลทีต่ อ้ งการ โดยรูปแบบในการ query จะเหมือนกบั ทเ่ี ราใช้งาน GraphiQL
เลยครบั เพยี งแตเ่ ราต้องสง่ gql เข้าไปดว้ ยเพ่อื ให้ graphql เขา้ ใจว่าเราจะใชร้ ปู แบบการ query นะ
G. สุดท้ายก็ export default GraphQL ในขอ้ F เหมอื นการท่ีเราใชต้ วั react-redux ทมี่ ีการ export default
connect นน่ั เองครับ
113

WorkShop WebApplication ด้วย React : 114
3. ลองดูท่ี brower ก็จะเหน็ ว่ารายชอื่ User แสดงเหมอื นสมัยทีเ่ ราใช้ react-redux ครบั และหนา้ จอง Home ก็
สามารถเก็บข้อมูล บวกลบ อายไุ ดเ้ หมือนเดิมครับ

114

WorkShop WebApplication ดว้ ย React : 115

ปรับหน้าจอ Album ใช้งาน GraphQL

1. แกไ้ ขไฟล์ src/pages/Album.js โดยแกเ้ ปน็ โคด้ นค้ี รับ

import React, { Component } from 'react' A
import { gql, graphql } from 'react-apollo'
import AlbumList from '../components/Albums/AlbumList'

class Album extends Component { B
render() { E

cifo(nersertrtou{rrd)na{<tad:iv{a>lEbruromr.s..B.NyUotseLro,aedrroArl,bluomaCd<i/ndgi}v>} = this.props

}

return (
<div>
<h1>Album {this.props.params.title}</h1>
{loading && <div>Loading...</div>} D
{albumsByUser && <AlbumList data={albumsByUser} />}
</div>
)
}
}

const query = gql` F
query album($userId: Int){
albumsByUser(userId: $userId){
userId
id
title
}
}
`
const GraphQL = graphql(query, { G
options(props) {
return {
variables: {
userId: props.params.userID
}
}
}
}
)(Album)
export default GraphQL

อธบิ ายโคด้
A. import gql และ graphql จาก react-apollo เพอ่ื ใหส้ ามารถ query ขอ้ มูลจาก GraphQL ได้
B. destructure ออกจาก props โดย graphql จะสง่ data มาใหเ้ สมอ และใน data จะส่งฟลิ ด์ที่เราไดร้ ะบุซง่ึ
ในทน่ี ค้ี ือ albumByUser รวมถงึ สง่ error และ loading มาใหอ้ ัตโนมตั ิ
C. เช็คก่อนว่ามี error สง่ เข้ามาหรอื เปล่า
D. ถ้ามี loading ก็ให้แสดงขอ้ ความ Loading กอ่ น
115

WorkShop WebApplication ดว้ ย React : 116
E. เช็คกอ่ นว่ามี albumByUser สง่ มาหรือเปล่า ถา้ มีคอ่ ยส่งต่อให้ component AlbumList
F. ผมแยกการ query ออกมาเปน็ อกี สว่ น ซ่ึงจะต่างจากไฟล์ src/pages/User.js เนอ่ื งจากใน query คร้ังน้ี
จะตอ้ งมีการส่งเงอ่ื นไขไปด้วยโดยแสดง Album ตาม userId ถา้ เขยี นรวมกันเลยมันจะ งง ครบั สงั เกตวุ ่ามีการตั้งชือ่ ตอ่
จากการ query ดว้ ยโดยตงั้ ชือ่ ว่า album และมกี ารระบุวา่ ตอ้ งสง่ ตวั แปรเข้ามาด้วย สว่ นการใชฟ้ ลิ ด์ albumByUser กม็ ี
การระบุ variable เข้าไปด้วย ถ้าจ�ำได้รปู แบบน้ีมันจะเหมือนตอนที่เราใช้ GraphiQL เลยใช่มั้ยครับ
G. เป็นการใช้ graphql เหมือนในไฟล์ src/pages/User.js โดยเราเอาตัวแปร query จากข้อ F มาใช้งานครับ
โดยท่ี
options เปน็ การระบตุ ัวแปรของ graphql อกี ตัวโดยจะรับคา่ props ซึ่งคา่ props น้กี ถ็ กู สง่ ต่อมาจาก src/
routes.js ที่มาจากการคลกิ ลิงคอ์ กี ทคี รับ
variables โดยใน options เป็นการ return คา่ เพอื่ เอาไป where นัน่ เองครับโดยในทีน่ ้คี ือ ตัวแปรชือ่
userId โดยมีค่าเท่ากบั props.params.userID โดย userID จะถกู ส่งมาจาก routes ท่ีมผี ลจากการคลกิ รายชือ่ user
ครบั ถา้ จ�ำได้ในโปรเจค photoalbum เราจะเรยี กใช้ค่านไี้ ด้จาก this.props.params.userID แต่ตอนนเี้ ราไม่ไดใ้ ช้ this
นะครับ เน่อื งจากมันไมไ่ ดอ้ ยใู่ น scope ของ class Album
คำ� ถามคือ userId ของ G มนั จะเอาไปใสต่ รงไหนใน userId ของ F ค�ำตอบคอื มันเอาไปใสใ่ น $userId ครับ
จากน้ันก็ลองดูที่ browser ครบั ก็จะได้รายชอื่ album ออกมาตาม id ของ user ครบั เหมือนโปรเจค photoal-
bum เลยครบั แตไ่ ม่ตอ้ งเขยี น reducers ไมต่ ้องมี action และไม่ต้องส่ัง dispatch “โอ้....ว มนั คือสวรรคช์ ัดๆ”

116

WorkShop WebApplication ด้วย React : 117

ปรับหน้าจอ Photo ใช้งาน GraphQL

1. แก้ไขไฟล์ src/pages/Photo.js โดยแก้เปน็ โค้ดนี้ครบั

import React, { Component } from 'react' A
import { graphql, gql } from 'react-apollo'
import PhotoList from '../components/Photos/PhotoList'

class Photo extends Component {

render() { B
const { data: {photosByAlbum, error, loading} } = this.props
if (error) { C
return <div>Error....Not Load Photo</div>
}

return (
<div>
<h1>Photos by {this.props.params.title}</h1>
{loading && <div>Loading...</div>} D E
{photosByAlbum && <PhotoList data={photosByAlbum} />}
</div>
)
}
}

const query = gql` F
query photo($albumId: Int){
photosByAlbum(albumId: $albumId){
albumId
id
title
thumbnailUrl
}
}
`
const GraphQL = graphql(query, { G

options(props) {
return {
variables: {
albumId: props.params.albumID
}
}
}
}
)(Photo)
export default GraphQL

117

WorkShop WebApplication ดว้ ย React : 118
อธิบายโคด้
A. import gql และ graphql จาก react-apollo เพือ่ ให้สามารถ query ข้อมูลจาก GraphQL ได ้
B. destructure ออกจาก props โดย graphql จะส่ง data มาใหเ้ สมอ และใน data จะส่งฟิลดท์ เี่ ราได้ระบซุ ง่ึ
ในที่นีค้ ือ photosByAlbum รวมถึงสง่ error และ loading มาใหอ้ ัตโนมตั ิ
C. เชค็ ก่อนว่ามี error ส่งเขา้ มาหรือเปลา่
D. ถา้ มี loading กใ็ ห้แสดงขอ้ ความ Loading กอ่ น
E. เชค็ ก่อนว่ามี photosByAlbum ส่งมาหรือเปลา่ ถา้ มคี ่อยส่งต่อให้ component PhotoList
F. แยกการ query ออกมาเป็นอกี สว่ นเน่อื งจากใน query ครั้งนจ้ี ะตอ้ งมกี ารส่งเง่อื นไขไปด้วยโดยแสดง
Photo ตาม albumId ถา้ เขยี นรวมกันเลยมนั จะ งง ครับ สงั เกตุวา่ มกี ารตั้งชอ่ื ตอ่ จากการ query ด้วยโดยตัง้ ช่ือว่า photo
และมกี ารระบวุ า่ ตอ้ งสง่ ตวั แปรเขา้ มาด้วย ส่วนการใช้ฟิลด์ photosByAlbum ก็มกี ารระบุ variable เขา้ ไปด้วย ถา้ จ�ำได้รูป
แบบนมี้ นั จะเหมอื นตอนท่เี ราใช้ GraphiQL เลยใชม่ ้ยั ครบั
G. เป็นการใช้ graphql โดยเราเอาตัวแปร query จากขอ้ F มาใชง้ านครับ โดยที่
options เป็นการระบุตัวแปรของ graphql อีกตวั โดยจะรบั คา่ props ซงึ่ คา่ props นีก้ ถ็ กู ส่งตอ่ มาจาก src/
routes.js ทมี่ าจากการคลิกลงิ คอ์ ีกทีครบั
variables โดยใน options เป็นการ return คา่ เพ่อื เอาไป where น่นั เองครบั โดยในที่น้คี อื ตัวแปรช่อื
albumId โดยมีคา่ เทา่ กบั props.params.albumID โดย albumID จะถูกส่งมาจาก routes ที่มผี ลจากการคลกิ รายชื่อ
album ครับ ถา้ จำ� ไดใ้ นโปรเจค photoalbum เราจะเรยี กใชค้ า่ นไี้ ด้จาก this.props.params.albumID แตต่ อนนี้เราไม่ได้
ใช้ this นะครับ เนื่องจากมันไม่ได้อยูใ่ น scope ของ class Photo
ค�ำถามคือ albumId ของ G มนั จะเอาไปใสต่ รงไหนใน albumId ของ F ค�ำตอบคือมันเอาไปใส่ใน
$albumId ครบั จากน้ันกล็ องดผู ลงานท่ี browser ครับ

118

WorkShop WebApplication ดว้ ย React : 119

สรุปส่ิงที่ได้จากโปรเจค

ในโปรเจคนี้ผมได้พาท�ำโปรเจคทเี่ ป็นในสว่ นของการ query ขอ้ มลู มาแสดง แต่ในสว่ นของการ insert, update,
delete นั้นจะเป็นเรื่องของการ mutation ซง่ึ ผมไม่ไดส้ อนทำ� เน่อื งจากไมอ่ ยากให้ผเู้ รยี นสับสนจนเกนิ ไป อยากใหเ้ ขา้ ใจใน
สว่ นของการ query ใหก้ ระจา่ งครบั หากเข้าใจดีแลว้ เม่อื ไปท�ำการ mutation กจ็ ะไมง่ ง ซ่ึงกระบวนการมันก็คล้ายๆ กนั ครับ

ขอ้ ดีทีเ่ ด่นชดั ของการใช้ Apollo



ในการใช้ GraphQL นั้นการท่ี react จะตดิ ตอ่ กับ GraphQL ได้ การใช้ react-apollo กเ็ ปน็ ตวั เลอื กที่มีคนใชง้ าน
อยู่มาก (น่าจะมากทส่ี ุดมั้ง) เน่ืองจากมนั ไมย่ ากเกินไป อกี สิง่ ท่ีเมอื่ ใช้ react-apollo สงั เกตวุ า่ เราไม่จ�ำเป็นต้องใช้งาน
reducers, action และส่งั dispatch ให้ยงุ่ ยากอีกต่อไปครบั

จุดที่ต้องพิจารณา



การใชง้ าน graphql ในเชิงลกึ เพอ่ื ให้ได้ performance ท่ดี ยี ังคงต้องศึกษาอกี พอสมควรครับ (แต่ถา้ ไมค่ ิดไรมากเทา่
น้ีผมว่ากโ็ อเคละ) เทา่ ทผี่ มหาดูตามเน็ต ตามสอ่ื การสอน ก็ยงั ไม่มสี อื่ ไหนทส่ี อนในเชงิ ลกึ ในแบบ งา่ ยๆ นะครบั เรียกได้วา่
Learning Curve สงู อยู่ แตก่ แ็ ลกมาดว้ ยการใช้งานทส่ี ะดวกขนึ้ ในฝง่ั react แต่ฝ่ัง server ผมยังเมือ่ ย...เรียกว่า “เมอ่ื ย” แล้ว
กันครับในการทีจ่ ะต้องสรา้ ง schema เพื่อรองรับ ไหนเวลาท�ำงานจรงกิ ับ DB ถ้าทำ� งานคนเดียวนี้...เหน่อื ยครับ
สุดทา้ ยกต็ ้องฝากให้พจิ ารณาว่า งานท่ีท�ำอยู่ เหมาะสมที่จะใช้ GraphQL หรอื ไม่ อนั นไ้ี มม่ กี รู ูไหนฟันธงไดค้ รับว่า
เหมาะหรอื ไม่ ขึ้นกบั ตัวคณุ เอง
แต่ทา้ ยสดุ เทคโนโลยีต่างๆ ลว้ นท�ำมาเพอ่ื ให้งานดขี ้นึ แตย่ าก หรอื ง่ายข้ึนนนั้ คณุ ต้องพิจารณาเองครับ

119

7 WorkShop WebApplication ด้วย React : 120

#WorkShop

เว็บ ระบบแจง้ ซ่อม v. MySQL

ระบบนผ้ี มจะสอนการใช้งานกับฐานขอ้ มูล MySQL ซึง่ เชอื่ วา่ หลายๆ คนน่าจะรจู้ กั กบั MySQL โดยจะใช้ Node.js
ในการทำ� เปน็ Server รว่ มกับ Express และลง Module ตา่ งๆ ทจี่ �ำเปน็
WorkShop น้ีจะยากขน้ึ มาหนอ่ ยนะครับแต่ก็คุ้มในการเรียนรู้ เพราะชีวิตจริงในการพัฒนา Software เราตอ้ ง
ทำ� งานกบั ฐานขอ้ มลู โดยในสว่ นของ React เราก็จะใชค้ วามรู้ใน WorkShop PhotoAlbum มาใช้งาน เพราะต้องมีการใช้
Redux ตา่ งๆ ด้วย

ภาพรวมระบบ

ผมออกแบบให้ระบบมคี วามซ�ำ้ ซอ้ นน้อยท่สี ดุ จะไดเ้ ข้าใจวิธีการเขียนไดเ้ รว็ ก่อนอ่ืนผมจะให้เหน็ ภาพรวมของระบบ
ว่าเราจะมหี น้าจออะไรกันนะครบั เป็นรปู เม่อื เราท�ำโปรแกรมสำ� เร็จแลว้ ครบั

ภาพหนา้ จอ Login เขา้ สรู่ ะบบ

ภาพหนา้ จอหลกั จะแบง่ การแสดงผลตามประเภทผู้ใชง้ านซ่งึ จะแสดงเมนูตา่ งกัน 2 แบบ

สำ� หรบั ผูใ้ ช้งานท่วั ไป สำ� หรับผู้ดูแลระบบ

120

WorkShop WebApplication ดว้ ย React : 121
ภาพหน้าจอแสดงรายชื่อผใู้ ช้ โดยเมื่อคลิกปุ่มเพ่มิ ขอ้ มลู หรือปมุ่ แก้ไข

จะแสดง Modal สำ� หรับใหก้ รอกขอ้ มลู

ภาพหน้าจอ Modal ส�ำหรบั กรอกข้อมลู ผใู้ ช้

121

WorkShop WebApplication ด้วย React : 122
ภาพหนา้ จอแสดงรายชือ่ สถานที่ โดยเมอ่ื คลิกปมุ่ เพิม่ ขอ้ มูล หรอื ปมุ่ แกไ้ ข

จะแสดง Modal ส�ำหรับให้กรอกข้อมูล

ภาพหน้าจอ Modal ส�ำหรบั กรอกข้อมลู สถานที่

122

WorkShop WebApplication ดว้ ย React : 123
ภาพหนา้ จอรายการซ่อม จะแบ่งการแสดงผลตามประเภทผใู้ ช้งานซงึ่ จะแสดงเมนูต่างกนั 2 แบบ

ส�ำหรบั ผู้ใชง้ านท่วั ไป

สำ� หรับผดู้ ูแลระบบ

123

WorkShop WebApplication ด้วย React : 124
ภาพหน้าจอแจง้ ซอ่ ม จะแบง่ การแสดงผลเป็น 2 แบบ แบบแรกสำ� หรับแจง้ ซอ่ มใหม่ (หรือแก้ไข) แบบที่ 2 กรณีทผี่ ู้รบั ซอ่ ม

ท�ำการซ่อมแล้วจะแสดงหนา้ จอเป็นการแสดงรายละเอยี ดงานซอ่ มแทนอัตโนมัติ

124

WorkShop WebApplication ดว้ ย React : 125
ภาพหนา้ จอบนั ทกึ งานซ่อม จำ� แสดงส�ำหรบั ผใู้ ช้งานประเภทผูด้ ูแลระบบเพ่ือบันทึกงานซอ่ ม

แนวทางการพฒั นา

ใน WorkShop จะมสี ว่ นท่ตี ้องตดิ ต่อกบั ฐานข้อมูล MySQL ดังนน้ั ขน้ั ตอนการพัฒนาจะมอี ยดู่ ้วยกนั 3 Step ครบั
1. สร้าง Server ด้วย ExpressJS สำ� หรบั เรยี กดูขอ้ มูล, เพมิ่ , บันทกึ หรือลบข้อมลู จากฐานข้อมูล MySQL
2. ใช้งานฐานข้อมลู MySQL โดยติดตง้ั โปรแกรม Xampp ซง่ึ เปน็ โปรแกรม Apache web server ไวจ้ ำ� ลอง web
server เพอ่ื จะทำ� ใหเ้ ขา้ ถึงฐานขอ้ มูล MySQL โดยใน Xampp จะติดต้งั MariaDB ให้แทนฐานข้อมลู ที่ชอ่ื MySQL ซง่ึ
MariaDB ก็เป็นฐานขอ้ มลู ท่ถี กู พฒั นาตอ่ มาจาก MySQL สามารถใช้แทนกันได้ 100% ในหนงั สือเลม่ นี้จะเรยี กแต่ชอ่ื ฐาน
ขอ้ มลู MySQL นะครบั เพราะคนเคยได้ยนิ บอ่ ยกวา่ MariaDB
3. สร้างหน้าเวบ็ ดว้ ย React เพอื่ ใช้เรียกดขู ้อมูล เพ่มิ บันทกึ หรอื ลบรายการผา่ นทาง API ของ Server Express ท่ี
เราได้สรา้ งขน้ึ ในข้อ 1 โดยแสดงเปน็ แผนภาพง่ายๆ ดา้ นล่างครบั (เอาแบบมองดงู ่ายๆ ไม่ต้องวชิ าการมากมายนะ)

หน้านีแ้ สดงแผนภาพไมพ่ อ ยา้ ยไปดูหน้าถัดไปนะครา๊ ฟ
125

WorkShop WebApplication ดว้ ย React : 126

สร้างหนา้ เว็บด้วย React เพอ่ื แสดงผลลพั ธต์ ่างๆ ออกมาหนา้ เวบ็

ส่งขอ้ มูลกลบั ให้ตาม API ทข่ี อ ส่ง API เพือ่ ข้อดูข้อมลู , บันทึก
หรือลบข้อมูลทีต่ อ้ งการ

- ท�ำตัวเองเปน็ Server ให้บรกิ าร API และประมวลผล
- สง่ คำ� สัง่ จัดการฐานขอ้ มูล MySQL ท้งั การเรียกดูข้อมลู , บนั ทกึ , แก้ไข, ลบ

สง่ ผลลพั ธข์ ้อมูลกลับ สง่ คำ� สงั่ SQL เพอ่ื ขอดขู ้อมลู ,
บนั ทกึ หรือลบขอ้ มูล

ทำ� ตัวเองเป็นเวบ็ server (Apache) เพอ่ื ให้บรกิ ารฐานข้อมูล MySQL (MariaDB)
มโี ปรแกรมจดั การฐานขอ้ มูลชอ่ื PhpMyAdmin และตวั รนั ภาษา PHP ติดมาดว้ ย
ดูแผนภาพแล้วกน็ า่ จะพอเขา้ ใจนะครบั วา่ เราจะตอ้ งท�ำอะไรบ้าง ซึ่ง React กับ NodeJS นนั้ เราเคยทำ� กนั อย่แู ลว้ ใน
WorkShop ทีผ่ ่านๆ มา แต่ Xampp เรายังไม่ไดท้ ำ� ดงั นัน้ เราจะต้องมาทำ� ให้เคร่อื งเราพร้อมกับการใชง้ านฐานข้อมูล MySQL
กนั ก่อนครบั โดยตดิ ตั้งโปรแกรม Xampp
ปล. ส�ำหรบั เคร่ืองไหนทม่ี ี WebServer ตวั อนื่ อยู่แล้วกไ็ มจ่ �ำเป็นตอ้ งติดตงั้ Xampp ก็ไดน้ ะครับเพราะจุด
ประสงค์เราคือตอ้ งการใหเ้ ครอื่ งเราใช้งานฐานขอ้ มลู MySQL ได้

126

WorkShop WebApplication ด้วย React : 127

ตรวจสอบเครือ่ งก่อนติดตัง้ Xampp

Xampp เป็นโปรแกรมที่ท�ำใหเ้ ครอื่ งเราเปน็ WebServer สามารถใชง้ าน PHP และฐานขอ้ มูล MySQL ได้
(Xampp จะใชฐ้ านข้อมลู ชอ่ื MariaDB แทน MySQL นะครบั แต่ผมจะเรยี กว่าเปน็ MySQL ละกนั เพราะมนั ก็คือ MySQL ที่
ถกู พฒั นาตอ่ และคนจำ� ชื่อ MySQL ไดด้ ีกว่า) ซง่ึ เราต้องเชค็ เครอ่ื งที่ตดิ ต้ังวา่ มีการใชง้ าน Port ดงั ตอ่ ไปนี้อยหู่ รอื ไม่
Apache Web Server ใช้งาน Port 80
MySQL ใช้งาน Port 3306
SSL (อันน้เี ปน็ option เสริมสว่ นใหญจ่ ะไม่ถกู เปิด) ใช้งาน Port 443
ดงั น้ันถ้าเครอ่ื งที่ตดิ ตัง้ มีโปรแกรมอืน่ ๆ ทใ่ี ช้งาน Port ดังกลา่ ว จะท�ำใหโ้ ปรแกรม Xampp ไมส่ ามารถใช้งานไดใ้ ห้
ปดิ การใช้งานโปรแกรมดงั กล่าวก่อนนะครบั ทงั้ บน MacOS และ Windows เพราะถ้า StartService มนั จะ Error ครับ โดย
ข้อความ Error จะแจ้งประมาณนคี้ รับ Port 80 in use by “Unable to open process” ขอ้ ความจะแจง้ แตกตา่ งกนั
เล็กนอ้ ยครบั แต่จะแจ้งประมาณว่า Port 80 ไมว่ า่ ง
สว่ นใหญ่ Port ดังกลา่ วจะเป็นโปรแกรม WebServer ค่ายอนื่ ครบั เช่น MAMP, AppServ ฯลฯ ถ้าไม่อยากใช้
Xampp กใ็ ชโ้ ปรแกรม WebServer ทขี่ องค่ายอน่ื ก็ได้ครบั เพราะหวั ใจหลักของเราคอื ตอ้ งการใช้งานฐานขอ้ มูล MySQL และ
ใช้โปรแกรม phpMyAdmin ในการสรา้ งฐานข้อมูล

ติดตัง้ Xampp ส�ำหรบั MacOS

1. เข้าเว็บไซต์ https://www.apachefriends.org แล้วคลกิ เมนู Download เน่อื งจากเราจะใช้ PHP 5.6 ไมใ่ ช้
PHP 7 เพราะใน Mac ชุดตดิ ตง้ั ส�ำหรบั PHP 7 การเขา้ ไปกำ� หนดรหสั ผ่านของ MySQL (MariaDB) นนั้ ทำ� ไดย้ ากมากๆ ผม
เลยเล่ียงไปใชช้ ดุ ติดตัง้ ของ PHP 5.6 แทนครับ ใชไ้ ด้เหมือนกนั

1

127

WorkShop WebApplication ด้วย React : 128
2. คลิกปุ่ม Download (64 bit) ในบรรทัดทเ่ี ปน็ PHP 5.6

2

3. เขา้ ไป folder ทีโ่ หลดไฟลม์ านะครบั (แล้วแตข่ องใครของมันนะครบั ว่าเกบ็ ไว้ folder ไหน) แล้ว double
click ไฟลท์ ี่ download มาครบั

3

4. Double Click ท่ี XAMPP.app เพอื่ เรมิ่ การติดตั้ง

4

128

WorkShop WebApplication ด้วย React : 129
5. บางเคร่อื งจะขน้ึ ถามเหมือนภาพดา้ นลา่ งให้คลิกปุ่ม Open

5

6. บางเครอ่ื งจะข้นึ ใหก้ รอก Password ให้กรอกแลว้ คลิกปุ่ม OK

6

7. คลิกปุ่ม Next >

7

129

WorkShop WebApplication ดว้ ย React : 130

8. คลกิ ป่มุ Next >

9. คลิกปมุ่ Next > อกี เหมอื นเดมิ 8

9

130

10. คลิกปุ่ม Next > WorkShop WebApplication ดว้ ย React : 131

10

11. คลิกปุ่ม Next >
12. รอจนกว่าจะติดตั้งเสร็จ

11
12

13. คลิกปุ่ม Finish เสรจ็ การตดิ ต้งั

13

131

WorkShop WebApplication ด้วย React : 132
14. หนา้ ต่าง XAMPP จะถูกเปิดขึน้ อัตโนมตั นิ ะครับ (ถ้าไม่เปิดกไ็ ปเปิดเองเดอ้ ชาว Mac) และแถบ Dock จะมี icon
ปรากฏ

14

15. ทำ� การ Start Service ตา่ งๆ โดยคลิกท่ีแทบ็ Manage Servers แล้วคลกิ ปมุ่ Start All

16. รอสักพักนะครบั Service ตา่ งๆ จะ Start แลว้ จะเปลี่ยนเปน็ สเี ขยี วดงั รูปดา้ นลา่ งครับ

132

WorkShop WebApplication ดว้ ย React : 133
17. ทดสอบการทำ� ว่า Apache Web Server ทำ� งานได้หรอื ไม่ โดยเปิด Browser แล้วพิมพ์ http://localhost ถา้
แสดงเป็นหน้าเว็บสวยๆ เหมอื นรูปดา้ นลา่ งแสดงว่า Apache Web Server ใน Xampp ท�ำงานได้ครับ (Web Server จะ re-
direct ไปที่ http://localhost/dashboard/ ใหอ้ ตั โนมตั นิ ะครบั )

กำ� หนดรหสั ผ่าน MySQL สำ� หรับ MacOS

ส�ำหรบั Xampp เวลาติดตง้ั เสรจ็ ตัว Xampp จะไมไ่ ด้กำ� หนดรหสั ผา่ นฐานข้อมลู MySQL ให้ ดงั น้ันเราควรทำ� การ
กำ� หนดรหสั ผ่านโดยเราจะก�ำหนดผ่านทางโปรแกรมจดั การฐานขอ้ มลู ที่ Xampp ติดตงั้ มาใหท้ ่ีช่อื วา่ phpMyAdmin
1. เขา้ ใชง้ านโปรแกรม phpMyAdmin ผ่านทาง browser โดยพมิ พ์ http://localhost/phpmyadmin

1

2. คลิกเมนู User accounts (ถ้าใครไม่เห็นแทบ็ เมนดู งั ภาพใหค้ ลิกที่ Server: localhost กอ่ นนะครับ)
3. บรรทดั user ท่ีชื่อ root บรรทดั สดุ ทา้ ยใหค้ ลกิ Edit privileges

2
3

133

WorkShop WebApplication ด้วย React : 134
4. คลิกป่มุ Change password ระบบจะเปลยี่ นไปยังหนา้ ใหก้ รอกรหสั ผา่ นดงั ภาพ
5. กรอกรหัสผ่านท่ีตอ้ งการและต้องจ�ำให้ได้นะครบั ถ้าลืมไม่ต้องถามผมนะครบั แตใ่ นท่ีนผ้ี มจะตั้งเปน็ 1234
6. คลิกปุ่ม Go เพ่อื บนั ทกึ การเปล่ียนรหัสผ่าน

4
56

7. ระบบแจ้งแสดงขอ้ ความแจ้งการเปลย่ี นรหสั ผา่ นสำ� เรจ็

8. ให้ refresh หนา้ เวบ็ ดนู ะครบั จะเหน็ วา่ มี Error ขึน้ ไม่ตอ้ งตกใจครับ แสดงว่าเรามาถูกทางละ

134

WorkShop WebApplication ด้วย React : 135
9. ใหแ้ ก้ไขไฟล์ config.inc.php ซึ่งไฟล์นีจ้ ะอยู่ folder Applications/XAMPP/xamppfiles/phpmyadmin
ถา้ ใครตดิ ต้งั ไว้ทอ่ี นื่ ก็ไปตามหาเอานะครับแตโ่ ดยคา่ มาตรฐานมนั จะอยู่ folder ดังกล่าวครบั

10. บรรทดั ที่ 29 ใหเ้ ปลี่ยนจาก config เป็น cookie ครับ ดงั รปู ดา้ นล่าง

11. กลับมาท่ี browser แลว้ refresh ใหม่ error ก็จะหายไปแล้วครบั โดยจะแสดงหน้าจอให้ Login เข้าใชง้ าน
phpMyAdmin แทนครบั
โดยที่ user เราจะใช้ root นะครบั สว่ นรหสั ผ่านกต็ ามทไ่ี ดก้ ำ� หนดไวก้ ่อนหนา้ น้ี แต่ในท่นี ้ผี มก�ำหนดเปน็ 1234 แลว้
คลิกปมุ่ GO

135

WorkShop WebApplication ด้วย React : 136

ติดตัง้ Xampp ส�ำหรบั Windows

Windows ทผ่ี มใชต้ ิดตั้งผมจะใช้เปน็ Windows 7 นะครบั ส�ำหรับ Windows 10 กจ็ ะเหมือนๆ กนั ครับ (ทำ� หนงั สือ
เล่มนลี้ �ำบากจรงิ ๆ ครับ ตอ้ งท�ำใหด้ ูทั้ง 2 ค่าย 555)
1. ดาวนโ์ หลดโปรแกรม Xampp ไดท้ ี่เว็บ https://www.apachefriends.org จากนนั้ คลิกท่เี มนู Download
เพราะผมจะใชช้ ุดตดิ ต้งั ท่ีเปน็ PHP 5.6 ครบั จะได้เหมอื นๆ กบั ตวั MacOS อกี อย่างไฟลม์ ันเลก็ กวา่ PHP 7 เยอะเลย

1

2. คลิกปมุ่ Download (32 bit) บรรทดั ท่เี ปน็ PHP 5.6 ครบั

2

3. เปดิ folder ที่เกบ็ ไฟล์ทด่ี าวน์โหลดโปรแกรม (แล้วแต่เครอ่ื งนะครบั ว่าดาวนโ์ หลดไว้ทไ่ี หน) แลว้ Dobule Click
เพอ่ื ตดิ ตง้ั โปรแกรม

3

136

4. คลิกปุ่ม OK (บางเครอื่ งก็ไมข่ นึ้ นะครับ) WorkShop WebApplication ดว้ ย React : 137

4

5. คลิกป่มุ OK (บางเคร่ืองกไ็ ม่ขึน้ นะครับ)
6. คลกิ ปมุ่ Next

6

137

WorkShop WebApplication ดว้ ย React : 138

7. ตกิ๊ เลอื กตามภาพ แล้วคลิกปุ่ม Next

8. คลกิ ป่มุ Next 7

8

138

WorkShop WebApplication ด้วย React : 139

9. คลิกปุม่ Next

9

10. คลิกปมุ่ Next

10

139

WorkShop WebApplication ดว้ ย React : 140
11. รอจนกวา่ จะตดิ ตั้งเสร็จครับ ระหว่างน้กี ็ฟังเพลงเพลนิ ๆ ไปก่อน

12. ตดิ ตั้งเสรจ็ แล้วก็กด Finish ไดเ้ ลยครบั

12

13. โปรแกรม Xampp จะถกู เปดิ อตั โนมตั ิ และในครงั้ แรกโปรแกรมจะใหเ้ ลือกภาษาก่อน แลว้ กด Save

140

WorkShop WebApplication ดว้ ย React : 141
12. หนา้ ตา่ ง Xampp Control Panel จะถูกเปดิ ขน้ึ มาอตั โนมัติ (ถา้ ของใครไมถ่ กู เปดิ ขน้ึ มากใ็ หเ้ ปดิ เองนะครบั หรือ
สงั เกตตุ รง System tray ด้านล่างขวาครบั วา่ ถูกเปิดอยู่หรือปา่ ว ถ้าใช่กค็ ลกิ เปิดจากตรงนั้นได้ครบั )
จากนัน้ ก็คลกิ Start Apache และ MySQL ถ้า Start ไดป้ มุ่ จะเปลย่ี นเป็นค�ำวา่ Stop ดงั รปู ครับ ถ้าไม่
สามารถ Start Apache ได้แสดงว่า Port อาจชนกันให้ย้อนกลบั ไปดวู ิธแี กไ้ ขในหัวขอ้ ตรวจสอบเครือ่ งก่อนติดตั้ง Xampp

13. ทดสอบวา่ Apache สามารถท�ำงานไดโ้ ดยเปดิ browser แล้วพิมพ์ url ว่า http://localhost

141

WorkShop WebApplication ด้วย React : 142

กำ� หนดรหสั ผา่ น MySQL ส�ำหรับ Windows

ส�ำหรับ Xampp เวลาติดตัง้ เสรจ็ ตัว Xampp จะไม่ไดก้ �ำหนดรหสั ผา่ นฐานข้อมูล MySQL ให้ ดังนนั้ เราควรทำ� การ
ก�ำหนดรหสั ผ่านโดยเราจะก�ำหนดผ่านทางโปรแกรมจัดการฐานข้อมลู ท่ี Xampp ตดิ ตัง้ มาให้ทช่ี ื่อวา่ phpMyAdmin
1. เข้าใชง้ านโปรแกรม phpMyAdmin ผา่ นทาง browser โดยพิมพ์ http://localhost/phpmyadmin

1

2. คลิกเมนู User accounts (ถา้ ใครไมเ่ ห็นแท็บเมนูดงั ภาพให้คลกิ ท่ี Server: localhost กอ่ นนะครับ)
3. บรรทดั user ที่ชือ่ root บรรทัดสดุ ท้ายให้คลกิ Edit privileges

2

3

4. คลิกปุ่ม Change password ระบบจะเปล่ียนไปยงั หนา้ ให้กรอกรหสั ผา่ นดงั ภาพ
5. กรอกรหสั ผา่ นที่ตอ้ งการและตอ้ งจำ� ให้ไดน้ ะครบั ถ้าลืมไมต่ อ้ งถามผมนะครบั แตใ่ นทนี่ ้ีผมจะตง้ั เปน็ 1234
6. คลิกปมุ่ Go เพือ่ บันทกึ การเปล่ียนรหสั ผ่าน

4 6
5
142

WorkShop WebApplication ด้วย React : 143
7. ระบบแจ้งแสดงข้อความแจ้งการเปลย่ี นรหสั ผ่านสำ� เร็จ

8. ให้ refresh หน้าเวบ็ ดนู ะครบั จะเห็นว่ามี Error ข้นึ ไมต่ ้องตกใจครบั แสดงวา่ เรามาถกู ทางละ

9. ให้แก้ไขไฟล์ config.inc.php ซง่ึ ไฟล์น้จี ะอยู่ folder c:/xampp/phpMyAdmin ถา้ ใครติดตง้ั ไวท้ ี่อื่นก็ไป
ตามหาเอานะครบั

9

143

WorkShop WebApplication ด้วย React : 144
10. บรรทัดท่เี ขยี นว่า config ให้เปล่ียนเปน็ cookie ครบั ดงั รปู ด้านลา่ ง

10

11. กลบั มาที่ browser แลว้ refresh ใหม่ error ก็จะหายไปแลว้ ครบั โดยจะแสดงหนา้ จอให้ Login เขา้ ใช้งาน
phpMyAdmin แทนครับ
โดยที่ user เราจะใช้ root นะครบั สว่ นรหัสผา่ นกต็ ามท่ไี ดก้ ำ� หนดไว้กอ่ นหน้าน้ี แต่ในที่น้ผี มก�ำหนดเปน็ 1234 แล้ว
คลิกปมุ่ Go

144

WorkShop WebApplication ด้วย React : 145

เริม่ สร้างฐานขอ้ มลู

โครงสรา้ งตาราง



ในการสร้างฐานข้อมูล MySQL เราจะใชโ้ ปรแกรม phpMyAdmin ซึ่งการใชง้ านระหวา่ ง MacOS กบั Windows ก็
จะเหมอื นๆ กันครบั
โดยใน WorkShop นี้ผมจะตงั้ ชือ่ ฐานขอ้ มูลว่า itservice และมตี ารางท้ังหมด 3 ตารางคือ
location ส�ำหรบั เก็บข้อมูลสถานที่
user สำ� หรบั เก็บข้อมูลผ้ใู ช้งาน
work สำ� หรบั เก็บข้อมลู การแจ้งซ่อม
ทั้ง 3 ตารางมโี ครงสร้างดังน้ีครบั (วิธีการสรา้ งดว้ ย phpMyAdmin จะสาธิตให้ดูในหัวข้อถดั ไปครบั )

ตาราง location (ข้อมูลสถานท่ี)

ค�ำอธิบายฟลิ ด์
id = id ของรายการ (รนั อัตโนมัติ เปน็ PrimaryKey)
code = รหสั สถานท่ี
name = ช่อื สถานที่
ตาราง user (ข้อมูลผใู้ ช้)

ค�ำอธิบายฟลิ ด์
id = id ของรายการ (รันอัตโนมัติ เป็น PrimaryKey)
user_type = ประเภทผใู้ ช้ มี 2 สถานะคอื 0=ทว่ั ไป, 1=ผู้ดูแลระบบ
name = ช่อื -สกลุ ผใู้ ชง้ าน
username = ชื่อ login เขา้ สู่ระบบ
password = รหัสผ่านเข้าสรู่ ะบบ

145

WorkShop WebApplication ดว้ ย React : 146

ตาราง work (งานแจง้ ซ่อม)

ค�ำอธิบายฟิลด์
id = id ของรายการ (รันอัตโนมัติ เปน็ PrimaryKey)
doc_date = วันที่แจ้งซ่อม (จะถูกบันทึกอตั โนมัตเิ ม่อื ทำ� การแจ้งซ่อม)
doc_time = เวลาแจ้งซ่อม (จะถูกบนั ทกึ อัตโนมตั เิ มื่อทำ� การแจง้ ซอ่ ม)
location_id = id ของสถานท่ี ท่ตี ้องการให้ไปซ่อม
detail = ปญั หา
phone = โทรศัพท์ตดิ ต่อ
status = สถานะงานซอ่ ม มี 3 สถานะคอื 0=รอซอ่ ม, 1=ก�ำลังด�ำเนนิ การ, 2=ซอ่ มเสร็จ
status_date = วนั ท่ีสถานะ (บนั ทึกอตั โนมตั เิ ม่อื ผซู้ อ่ มทำ� การบันทกึ การรับซอ่ ม) (Default = NULL)
work_detail = ผลการท�ำงานซ่อม (Default = NULL)
work_user_id = id ของผู้ทำ� งานซอ่ ม (บันทกึ อตั โนมัติตาม id ท่ี login) (Default = NULL)
user_id = id ของผแู้ จง้ ซ่อม (บันทกึ อตั โนมตั ติ าม id ที่ login)
** อยา่ งลมื กำ� หนดคา่ Default ให้เปน็ NULL ด้วยส�ำหรับฟิล์ status_date, work_detail, work_user_id
เพราะการบันทกึ รายการแจง้ ซอ่ มจากผแู้ จ้งซอ่ ม 3 ฟลิ ด์น้ีจะยงั ไมถ่ กู บนั ทึก แต่จะถกู บนั ทึกโดยผู้ซ่อม ซ่ึงถ้าไมก่ �ำหนดให้ De-
fault = Null เวลาบันทกึ มนั จะ error ครบั

ตวั อย่างวิธสี ร้างฐานขอ้ มูลและตารางดว้ ย phpMyAdmin

1. เมอ่ื login เข้า phpMyadmin จะถูก fucus ทห่ี น้าจอ Database ดังรูป (ถ้าไมใ่ ช่ใหค้ ลิกท่ี Server: location
ท่อี ยู่ดา้ นบน แลว้ คลกิ เมนู Database)
กรอกชือ่ Database เป็น itservice และเลือก Collation ชนิดเป็น utf8_general_ci แลว้ คลิกปุ่ม Create

146

WorkShop WebApplication ด้วย React : 147
2. คลกิ ชือ่ ฐานข้อมลู ดา้ นซา้ ยมอื (itservice) สว่ น Create tabel กรอกชอ่ื ตารางท่ีตอ้ งการพร้อมจ�ำนวนฟลิ ด์
(จำ� นวนฟลิ ส์ ามารถเพิม่ ได้ในภายหลงั ) โดยในภาพจะเป็นตารางช่อื user และจ�ำนวนฟิลดค์ อื 6 แลว้ คลิกปุม่ GO

3. กรอกชอื่ ฟลิ ด์, ประเภทฟลิ ด,์ ระบคุ วามยาวฟลิ ด์ (Length/Values), ค่า Default และในฟิล์ด์ id ให้ติ๊กถูกเป็น
A_I (AUTO_INCREMENT) ดว้ ย และถ้าต้องการให้ฟิลด์ไหนสามารถเป็นค่าวา่ งได้ (NULL) ให้ต๊กิ ถกู ตรง Null หรอื เลอื ก
Default เปน็ NULL ตามภาพดา้ นล่าง จากนนั้ กดปุ่ม Save

กรณีทต่ี ก๊ิ ถกู A_I ฟลิ ด์นจ้ี ะถกู ก�ำหนดเปน็ PRIMARY Key อัตโนมตั ิและจะแสดง Dialog ขึ้นมาเหมือนภาพดา้ น
ล่าง (phpMyAdmin บางเวอร์ชันจะไม่ขึ้น Dialog นะครับ) ไมต่ อ้ งเปลีย่ นแปลงค่าอะไรใหค้ ลิกปุม่ GO ไดเ้ ลยครับ

พอคลกิ ปุ่ม Save แลว้ ก็จะได้โครงสร้างตารางมา 1 ตารางแลว้ ครับ ส่วนโครงสร้างตารางอ่ืนๆ ก็อิงตามรูปแบบ
กอ่ นหนา้ น้ไี ดเ้ ลยครบั โดยจะเหลือการสร้างอีก 2 ตารางคือ ตาราง location และตาราง work

147

WorkShop WebApplication ดว้ ย React : 148

อา่ นก่อนจะไปตอ่

ในหวั ขอ้ ตอ่ ไปจะเปน็ การสรา้ งในสว่ นของ
1. Server เพอื่ ใชจ้ ดั การกับข้อมลู MySQL โดยใช้ NodeJS + ExpressJS เปน็ หลัก และ
2. การสร้างหนา้ เว็บโดยใช้ React (กแ็ หง่แหละเขียน React กต็ ้องใช้ React สิ)
แตท่ ี่ต้องใหอ้ า่ นหวั ข้อน้กี ่อนเนอ่ื งจากวา่ การน�ำเสนอวธิ ีการดว้ ยตวั อักษร (หนงั สอื น่ันเอง) มนั จะต่างจากการทำ� เปน็
VDO ซงึ่ ถ้าเปน็ VDO สามารถอธิบายสลบั ไปสลบั มาระหวา่ งการท�ำ Server กบั การสร้างหนา้ เวบ็ ได้
แต่ถ้าเป็นหนังสือการท�ำแบบน้ันผมคิดว่าน่าจะ...ทำ� ให้ งง คิดเหมือนผมมั้ยครับคณุ ผูอ้ ่าน...แต่คดิ ตา่ งผมคงท�ำไรไม่
ได้ละ เพราะมนั เปน็ หนังสือออกมาละ 555...ผมเลยตดั สนิ ใจว่าอธบิ ายเปน็ สว่ นๆ ใหเ้ สรจ็ ไปเลยจะดีกวา่ โดยท่ี
1. จะสอนการสรา้ ง Server ดว้ ย NodeJS + ExpressJS ในการจดั การข้อมูล MySQL ให้เสรจ็ ไปเลย
2. สอนการสร้างหนา้ เวบ็ เพจดว้ ย React ในการจดั การขอ้ มลู MySQL ผา่ น API Server ท่ีเราสร้าง

ใครยงั ไมเ่ ข้าใจเรือ่ ง state, props, redux, redux-thunk, react-redux และ react-router ใหย้ ้อนกลับไปทำ�
WorkShop PhotoAlbum ซ�ำ้ อกี จนกว่าจะเขา้ ใจนะครบั เพราะผมรับประกันได้เลยว่าถ้าขนาด WorkShop PhotoAlbum
ยังไมเ่ ข้าใจเร่ืองพวกน้ี รบั รองว่าเร่อื งตอ่ ไปน้ี งง แนน่ อน...ยกเวน้ ว่าคุณจะมีสญั ชาตญิ าณการเป็น Programmer ที่ยอด
เยย่ี ม...#มันกจ็ ะเปน็ การขูห่ น่อยๆ

สร้าง Server ดว้ ย NodeJS + ExpressJS

หลังจากติดต้งั XAMPP เพอ่ื จะใชง้ าน MySQL และเราก็ได้สรา้ งฐานข้อมูล, สร้างตารางต่างๆ โดยใช้ phpMyadmin
เรยี บรอ้ ยแลว้ ใช่มย้ั ครับ ต่อไปเรากจ็ ะมาสร้าง Server โดยใช้ NodJS + ExpressJS เหมือนเดิมครับ
1. สร้าง Folder ชอื่ itservice_server
2. ที่ terminal ให้ cd เข้าไปยงั Folder itservice_server
3. สร้างไฟล์ package.js โดยพมิ พ์ npm init -y แลว้ กด Enter

148

WorkShop WebApplication ดว้ ย React : 149
4. ตดิ ตัง้ module ที่จ�ำเปน็ ในช่วงแรกกอ่ นนะครับโดยท่ี terminal พิมพ์ npm i express body-parser
cors nodemon mysql express-myconnection -S แล้วกด Enter
5. เปิด folder ด้วยโปรแกรม Visual Studio Code เหมือนเดิมครับ
6. สร้างไฟล์ index.js แล้วพมิ พ์โค้ดด้านลา่ ง

อธิบายโค้ด
ผมเอาภาพโคด้ ใหพ้ ิมพเ์ น่อื งจากมันไมเ่ ยอะ (ฝกึ พมิ พ์ครับ) โดยเบื้องตน้ เปน็ การเรียกสร้าง server ดว้ ย ExpressJS
แบบพ้ืนฐานครบั ก�ำหนด PORT ให้รันที่ PORT 3009 ใช้
cors() เพ่อื ใหเ้ ขา้ ถงึ ไดจ้ าก server อื่น (ทำ� เผ่ือไวต้ อนทเ่ี ราจะให้ react ทำ� การ fetch data)
bodyParser เพ่อื ให้ express เขา้ ใจค่าท่สี ง่ มาจาก form เชน่ การ submit ค่าโดยผมดักไวท้ ้งั การส่งแบบ urlen-
coded และแบบ json สดุ ทา้ ยกส็ ั่งให้ server รนั โดยใช้ค�ำส่ัง app.listen
7. แกไ้ ขไฟล์ package.js โดยเพม่ิ scripts ชื่อ start โดยให้ nodemon เป็นตวั จดั การ (nodemon มนั จะ restart
server ใหอ้ ัตโนมัตเิ วลามกี ารแกไ้ ขโค้ดจะได้ไม่ตอ้ งมาสง่ั node index.js)

149

WorkShop WebApplication ด้วย React : 150
8. ท่ี terminal สง่ั start server โดยพิมพ์ npm start แลว้ กด Enter

9. ที่ browser พมิ พ์ url http://localhost:3009 ถ้าแสดงขอ้ ความดังภาพแสดงวา่ server พร้อมแลว้ ครบั

NodeJS ตดิ ตอ่ ฐานข้อมลู MySQL

ในการทำ� ให้ NodeJS ตดิ ตอ่ กบั ฐานขอ้ มูลไดเ้ ราจะตอ้ งติดตง้ั module ที่ชื่อ mysql ซงึ่ ไดต้ ดิ ตงั้ ไปก่อนหนา้ น้แี ล้ว
โดยวธิ ีการใช้คือ ให้แกไ้ ขไฟล์ index.js โดยแกเ้ ป็นโคด้ ด้านล่างน้ีครับ

const express = require('express') A
const app = express()
const cors = require('cors')
const bodyParser = require('body-parser')
const mysql = require('mysql')

const PORT = 3009 B
app.use(cors()) C
app.use(bodyParser.urlencoded({ extended: true }))
app.use(bodyParser.json({ type: '*/*' }))
var con = mysql.createConnection({

host : 'localhost',
user : 'root',
password : '1234',
database : 'itservice'
});
con.connect(function (err) {
if (err) throw err;
console.log("Connected!");
});

app.listen(PORT, () => {
console.log('ready server on http://localhost:' + PORT)

})

150