Node + React Native + Login
Node.js | React | Reactnative | JavaScript | Java | LPMuseum | Login-main | JSLibrary
รอ start react-native นานมากกว่า 30 นาที
วันนี้นั่งฟังนิสิตเล่าเรื่องการพัฒนา mobile app พูดถึงการเชื่อมโยงกับระบบฐานข้อมูล MySQL ก็รู้สึกสนใจ ค้นดูจาก google พบบทความของ Agustin Fernandez หัวข้อ Build a react native login app with node.js backend เค้าเขียนเล่าได้ไว้อย่างละเอียด และมีรหัสต้นฉบับชุดเต็มที่ใช้งานได้จริง เผยแพร่ผ่าน github.com ที่สามารถ clone ผลงานออกมาใช้ได้
ค้ดชุดนี้ ถ้าสั่ง start บน android จะได้ผลงานดังภาพตัวอย่างทั้ง 7 ภาพ ซึ่งอยากเล่าเรื่องภาพผลงาน (album) ให้นิสิตฟังในประเด็น reduce image size และ SEO และ Content is king แต่กว่าจะได้ภาพนี้มาทำอัลบั้ม ก็ใช้เวลาลองผิดไป 2 เรื่องใหญ่ สำหรับการติดตั้ง รอบแรก บนเครื่องคอมพิวเตอร์ตั้งโต๊ะที่มีทรัพยากรที่เพียงพอ คือ 1) สร้างตารางตามภาพในบล็อก แต่ที่ถูกต้อง คือ ให้สร้างเฉพาะดาต้าเบสก็พอ เดี๋ยวโปรแกรมสร้างตารางให้อัตโนมัติ 2) อย่าคัดลอกทุกแฟ้มที่เค้าให้มา ต้องเลือกเฉพาะโค้ดที่คิดว่าจำเป็น ส่วน config file ข้ามไปก่อนได้เลย มิเช่นนั้นเจอข้อผิดพลาดเรื่องความเข้ากันของรุ่น ส่วนเรื่อง 30 นาที เป็นเครื่องคอมพิวเตอร์เก่าที่บ้านที่ใช้โค้ดเป็น รอบที่สอง ซึ่งไม่ติดขัดเรื่องโค้ดหรือขั้นตอน งานนี้เพียงติดตั้งตามลำดับ คัดลอกไปวางให้ถูกที่ แก้โค้ดให้ถูกจุด รีบูทให้ถูกเวลาก็ใช้ได้แล้ว ได้ระบบ login ที่ sign up ได้ และตรวจสอบการ login สำเร็จ
รอบที่สาม - นำ .apk เข้า Bluestacks
ดสอบบน Android emulator ไม่พบปัญหา จึงเพิ่มการทดสอบบน Bluestacks เริ่มจากเข้าไปเปลี่ยน ip address ในแฟ้ม AuthScreen.js ใน mobile project จากเดิมใช้ ip จำลองคือ 10.0.2.2 เป็น const API_URL = Platform.OS === 'ios' ? 'http://localhost:5000' : 'http://12.13.14.15:5000'; แล้วใช้ C:\mobile\android> gradlew assembleRelease สร้าง app-release.apk (24.8 MB) หลังสร้างเสร็จจะเก็บไว้ใน C:\mobile \android \app \build \outputs \apk \release แล้วส่ง apk เข้าไปติดตั้งบน Bluestacks พบว่า application ติดต่อกับ ip address และ port นี้ได้ และสามารถ insert หรือ select ผ่าน sign up / login ได้ตามปกติ ก่อนดำเนินการใด ๆ เริ่มต้นจากทดสอบว่า service ทำงานได้ปกติหรือไม่ โดยเปิด http://12.13.14.15:5000 บน chrome ส่วนหมายเลข ip ให้เปลี่ยนเป็นเลขที่ได้จากเครือข่ายของเรา ถ้าเป็น intranet ip ก็จะใช้ได้เฉพาะในเครือข่ายนั้น ถ้าทุกอย่างผ่าน ก็เพิ่มการทดสอบไปบน smart phone ของเพื่อน ก็คาดว่าจะ sign up / login ได้ตามปกติ
รอบสี่ - ใช้ Bluestacks เป็น Android emulator Emulator หรือ Android Virtual Device(AVD) บน Android Studio จะถูก detect อัตโนมัติว่าในเครื่องคอมพิวเตอร์ มีการติดตั้ง Virtual device เพิ่มมาให้เลือกใช้หรือไม่ เช่น Bluestacks เป็นหนึ่งในอุปกรณ์เสมือนที่จำลองการทำงานของ Android device มาใช้งานบน Windows การผูกเข้ากับ Android studio จะต้องเข้าไปเปิดตัวเลือก การตั้งค่า , ขั้นสูง , Android debug bridge = check จึงจะไปปรากฎเป็นตัวเลือกบน Android Studio หากไม่เปลี่ยนแปลงเป็นอุปกรณ์อื่นก็จะถูกเรียกใช้ตามภาพ การสั่งงานทำโดย npx react-native run-android จะส่งผลงานรุ่น debug ไปประมวลผลบน Bluestacks (emulator - 5554)
Node.js เป็นส่วน Back-end C:\> mkdir loginApp
C:\> cd loginApp
C:\loginApp> npm init
สั่ง init เป็นการเริ่มต้นด้วยการสร้างแฟ้ม package.json เมื่อมีคำถาม ครั้งนี้ให้กด enter ไปทุกคำถาม
C:\loginApp> yarn add bcryptjs (2.4.3 Hashes and compares user passwords)
C:\loginApp> yarn add express (4.17.1 Minimal and flexible framework to be used)
C:\loginApp> yarn add jsonwebtoken (8.5.1 Generates and verifies request tokens)
C:\loginApp> yarn add mysql2 (2.2.5 Allows you to interact with the MySQL database)
C:\loginApp> yarn add nodemon (2.0.7 Automatically restarts the application when file changes in the directory are detected)
C:\loginApp> yarn add sequelize (6.6.2 ORM to be used)
ติดตั้ง package เพื่อ 6 ตัว และพบรายการที่ add ในแฟ้ม package.json
C:\loginApp> npm install --save
ติดตั้ง package เพื่อ 6 ตัว และพบรายการที่ add ในแฟ้ม package.json
copy folder [controllers, models, routes, utils] ไปไว้ใน loginApp
download แฟ้มทั้งหมดจาก https://github.com/agustinfece/login
แล้วเลือกคัดลอก 4 folder ไปวางใน project
และคัดลอก app.js ไปวางใน project อีกแฟ้มหนึ่ง
edit - package.json
"type": "module", ก่อน scripts block
แล้วเพิ่ม ,"start": "nodemon app.js" ใน scripts block
เช่น { "name": "loginapp", "version": "1.0.0", "description": "", "main": "index.js", "type": "module", "scripts": { "test": "echo \"Error: no test specified\" && exit 1","start": "nodemon app.js" }, "author": "", "license": "ISC", "dependencies": { "bcryptjs": "^2.4.3", "express": "^4.17.1", "jsonwebtoken": "^8.5.1", "mysql2": "^2.3.0", "nodemon": "^2.0.12", "sequelize": "^6.6.5" } }
C:\xampp\mysql\bin> mysql -u root -p
ถ้าในเครื่องมี mysql อยู่แล้ว ก็เข้าไปสร้างฐานข้อมูลชื่อ loginDB;
create database loginDB;
ถ้าไม่สร้างจะพบ sqlMessage: "Unknown database 'logindb'", เมื่อสั่ง npm start
จากนั้นเข้าไปเปลี่ยน user และ password ใน /utils/database.js เช่น เปลี่ยน YOUR_PASSWORD
C:\loginApp> npm start
Executing (default): CREATE TABLE IF NOT EXISTS `users` (`id` INTEGER NOT NULL a uto_increment , `email` VARCHAR(255) NOT NULL, `name` VARCHAR(255), `password` V ARCHAR(255) NOT NULL, `createdAt` DATETIME NOT NULL, `updatedAt` DATETIME NOT NU LL, PRIMARY KEY (`id`)) ENGINE=InnoDB; Executing (default): SHOW INDEX FROM `users`
React native เป็นส่วน Front-end C:\> yarn global add create-react-native-app
C:\> create-react-native-app mobile
C:\> cd mobile
ทำการคัดลอกแฟ้ม app.js และห้อง screen กับ public ไปวางใน project
C:\mobile> yarn android
ถ้าติดตั้ง Android SDK และกำหนด Path เรียบร้อย ก็จะพบกับ emulator
ซึ่งผมใช้เครื่องเก่า cpu ช้า และ ram น้อย รู้สึกช้ามาก รอมากกว่า 30 นาที
แล้วหน้าจอควบคุมก็ปิดไป ต้องเปิดใหม่ด้วย C:\mobile> npm start แล้วกด r = reload
rspsocial
Thaiall.com