789 งานเร่งกับ React Native (007)

สำหรับบทความนี้จะเป็นการcode ส่วนที่ใช้ติดต่อกับService เพื่อตรวจสอบการ Login ครับ

Service

เริ่มต้นด้วยการมาดูโครงสร้างเบื้องต้นของService กันก่อนนะครับ

ตัวServiceนี้จะเป็นการทำServiceแบบง่ายๆ โดยจะรองรับทั้ง Get และPost และทำการ Return Json กลับไปให้กับMobile

สิ่งที่ใช้

  1. Node.js ใช้สำหรับทำ Server
  2. expressjs ใช้สำหรับช่วยจัดการเรื่อง get,post และresponse ต่างๆ
  3. babel ใช้สำหรับจัดการเรื่องการแปลง รูปแบบของJavaScript เนื่องจากเราเขียนบางส่วนด้วย es6
  4. body-parser ใช้สำหรับจัดการเรื่องการรับค่าจากการ post ต่างๆ

Code

สำหรับตัวcode ของService จะมีสองfunction ใหญ่ได้แก่

  • function login แบบ get โดยในfunctionมีการรับค่ามาสองตัวคือ user และ pass หลังจานั้นนำค่ามาตรวจสอบถ้าทั้งสองค่าไม่เป็นค่าว่างจะ response status:true แบบjsonกลับไป
app.get(‘/login/:user/:pass’, function (req, res) {
 let user = req.params.user ? req.params.user : ‘’
 let pass = req.params.pass ? req.params.pass : ‘’
 console.log(‘GET User:’+user+’ Pass:’+pass)
 let statusReturn = (user.length > 0 && pass.length > 0) ? true : false
 let json = { status: statusReturn };
 res.json(json);
});
  • function login แบบ post โดยในfunctionมีการรับค่ามาสองตัวคือ username และ password หลังจานั้นนำค่ามาตรวจสอบถ้าทั้งสองค่าไม่เป็นค่าว่างจะ response status:true แบบjsonกลับไป
app.post(‘/login’, function (req, res) {
 let user = req.body.username ? req.body.username : ‘’
 let pass = req.body.password ? req.body.password : ‘’
 console.log(‘POST User:’+user+’ Pass:’+pass)
 let statusReturn = (user.length > 0 && pass.length > 0) ? true : false
 let json = { status: statusReturn };
 res.json(json);
});

Codeฉบับเต็ม

var app = require(‘express’)();
var port = process.env.PORT || 7777;
var bodyParser = require(‘body-parser’);
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
 extended: true
}));
app.get(‘/login/:user/:pass’, function (req, res) {
 let user = req.params.user ? req.params.user : ‘’
 let pass = req.params.pass ? req.params.pass : ‘’
 console.log(‘GET User:’+user+’ Pass:’+pass)
 let statusReturn = (user.length > 0 && pass.length > 0) ? true : false
 let json = { status: statusReturn };
 res.json(json);
});
app.post(‘/login’, function (req, res) {
 let user = req.body.username ? req.body.username : ‘’
 let pass = req.body.password ? req.body.password : ‘’
 console.log(‘POST User:’+user+’ Pass:’+pass)
 let statusReturn = (user.length > 0 && pass.length > 0) ? true : false
 let json = { status: statusReturn };
 res.json(json);
});
app.listen(port, function () {
 console.log(‘Starting node.js on port ‘ + port);
});

Call Service

ส่วนต่อมาที่จะทำเป็นส่วนของการเรียกใช้งาน Service ที่สร้างไว้แล้ว

โดยจากบทความที่แล้วเราได้ทำการสร้างfunction LoginCheck เพื่อเรียก Model User เพื่อเก็บค่า Username กับ Password ดังนั้นวันนี้เราจะมาเพิ่มfunctionที่ส่งค่าทั้งสองค่าไปServiceเพื่อตรวจสอบกัน

View Login(Login.js)

เริ่มต้นเปิดไฟล์ login.js จะเจอกับfunction LoginCheck ประมาณนี้

เราจะเพิ่มfunctionใหม่ที่จะส่งค่า user กับ pass ไปตรวจที่ service และถ้าผ่านจะทำการเก็บค่าในmodel

function Login_Post

สำหรับการติดต่อ service จะเรียกใช้งานผ่าน Fetch_API ซึ่งประกอบไปด้วย 5 ส่วน

  • ส่วนแรก เป็นการเรียกใช้งาน fetch โดยจะติดต่อไปที่ Url http://localhost:7777/login
  • ส่วนสอง เป็นการกำหนด method ในการติดต่อครั้งนี้ ซึ่งตรงนี้คือPOST
  • ส่วนที่สาม เป็นส่วนกำหนดว่าในการติดต่อครั้งนี้จะคุยกันแบบไหน ซึ่งตรงนี้คือกำหนดว่า ติดต่อกันแบบ json
  • ส่วนที่สี่ เป็นส่วนbody คือส่วนที่ใล้สำหรับส่งค่าต่างๆไปที่ service ในกรณีส่งแบบ post ส่วน JSON.stringify คือ function แปลงค่าเป็น json format
  • ส่วนสุดท้าย เป็นส่วนที่ใช้รอรับค่ากลับจาก service ซึ่งตรงนี้เรามีสามส่วนย่อยๆคือ

1 .then((response) => response.json()) คือหลังจากserviceตอบกลับมาให้นำค่ามาใส่ response หลังจากนั้น ให้ทำการแปลง เป็น json

2. เมื่อแปลง json เสร็จให้นำค่ามาเก็บใส่ responseJson หลังจากนั้นมาตรวจสอบว่า ค่า status ที่เก็บใน responseJson เป็นจริงหรือไม่ ถ้าเป็นจริงจะทำการเรียกใช้function SetDataเพื่อเก็บค่า user และ pass ในmodel และเรียกfunction LoginOK ถ้าไม่เป็นจริงจะเรียก function LoginError

3. เมื่อเกิด error ขึ้นไม่ว่ากระบวนการไหน ในการทำงาน fetchนี้ จะมาทำงานในส่วนนี้

code ฉบับเต็ม

Login_Post(user, pass) {
 const that = this
 const data = { ‘username’: user, ‘password’: pass };
 fetch(‘http://localhost:7777/login', {
 method: ‘POST’,
 headers: {
 ‘Accept’: ‘application/json’,
 ‘Content-Type’: ‘application/json’
 },
 body: JSON.stringify(data)
 })
 .then((response) => response.json())
 .then((responseJson) => {
 console.log(responseJson)
 if (responseJson.status) {
 this.props.userstore.SetData(user, pass)
 this.LoginOK()
 } else {
 this.LoginError()
 }
})
 .catch((error) => {
 console.error(error);
 })
 }
})
 .catch((error) => {
 console.error(error);
 })
 }

function Login_Get

จะคล้ายกับ Login_Post จะมีความแตกต่างกันตรงที่

  • fetch(‘http://localhost:7777/login/'+user+'/'+pass, { ส่วนUrl จะมีการส่งค่าผ่านทางUrl เองได้เลย
  • method: ‘GET’, เปลี่ยน method เป็น Get
  • body: ‘’ ส่วนbodyมีจำเป็นต้องส่งค่าอะไร

code ฉบับเต็ม

Login_Get(user, pass) {
 const that = this
 fetch(‘http://localhost:7777/login/' + user + ‘/’ + pass, {
 method: ‘GET’,
 headers: {
 ‘Accept’: ‘application/json’,
 ‘Content-Type’: ‘application/json’
 },
 body: ‘’
 })
 .then((response) => response.json())
 .then((responseJson) => {
 console.log(responseJson)
 if (responseJson.status) {
 this.props.userstore.SetData(user, pass)
 this.LoginOK()
 } else {
 this.LoginError()
 }
 })
 .catch((error) => {
 console.error(error);
 })
 }

function LoginOK

สำหรับส่วนนี้จะทำงานเมื่อLoginสำเร็จ และจะทำการกลับสู่หน้าก่อนหน้า

LoginOK() {
 Actions.pop()
 }

function LoginError

สำหรับส่วนนี้เมื่อทำการLoginไม่สำเร็จ จะมีการแจ้งเตือนบอกผู้ใช้งานให้ทำการลองLoginใหม่

โดยให้ทำการ Import Alert จาก react-native

หลังจากนั้นทำการตั้งค่าAlertในfunction LoginError

Alert.alert(
 ‘ผิดพลาด’,
 ‘Username หรือ Password ไม่ถูกต้องกรุณาลองใหม่’,
 [
 {text: ‘ตกลง’, onPress: () => {
 this.refs[“Username”].focus()
 }},
 ]
 )

Alert นี้มีส่วนประกอบหลักๆ สามส่วนคือ

  1. ‘ผิดพลาด’, คือ Title ของ Alert
  2. ‘Username หรือ Password ไม่ถูกต้องกรุณาลองใหม่’, คือส่วนของข้อความAlert
  3. [{text: ‘ตกลง’, onPress: () => {this.refs[“Username”].focus()}},] คือListของปุ่มที่จะให้แสดงบนAlert ซึ่งตรงนี้มีเพียงปุ่มเดียวโดยมีรายละเอียดดังนี้
  • text: ‘ตกลง’ มีชื่อปุ่ม ตกลง
  • onPress: () => {this.refs[“Username”].focus()}} เมื่อกดปุ่มจะไปเรียกใช้ this.refs[“Username”].focus() ซึ่งคือให้ไป focus refs[“Username”] ค่าของ refsจะต้องเป็นค่าเดียวกันกับ refs ที่อยู่บนInput ดังภาพ

function LoginCheck

ของเดิมจะมีการเรียกใช้งาน SetData ของModel โดยตรง

ซึ่งตอนนี้เราจะให้ไปเรียกใช้งาน function Login_Post หรือ Login_Get แทน

Run

หลังจากนั้นลองRun ดูจะได้ดังด้ายล่าง

function Login_Post

function Login_Get