สร้างหน้า Login ด้วย React Native

สารจากผู้เขียน

สำหรับมือใหม่อยากทำ Mobile Application ที่เลือก Framework เป็น React Native วันนี้เราจะพาไปลงมือทำส่วนแรกที่หลาย ๆ จำเป็นต้องมีนั่นก็คือหน้า Login นั่นเอง ซึ่งขั้นตอนจะยากง่ายขนาดไหนไปดูกัน !!!

⭐ สิ่งที่ต้องเตรียม⭐

1. Visual Studio code : https://code.visualstudio.com/download
2. React-Native : https://reactnative.dev/docs/environment-setup

เริ่มขั้นตอนแรกกัน 🔥

1. หากเราได้ทำการสร้างโปรเจกต์ด้วยคำสั่ง npx expo init หรือ npx create-expo-app จากนั้นให้ตั้งชื่อ แอปพลิเคชัน ของเราเมื่อระบบถามกลับมาและรอติดตั้ง

2. เมื่อเราได้ทำการสร้างโปรเจกต์ขึั้นมาแล้วให้ทำการเปิด Visaul Studio Code โดยเปิดโฟลเดอร์โปรเจกต์ขึ้นมาจะพบกับโครงสร้างของโปรเจกต์

loginapp
├── asserts
├── node_modules
├── .gitignore
├── App.js
├── app.json
├── babel.config.js
├── package-lock.json
└── package.json

• โฟลเดอร์ asserts : เอาไว้เก็บพวก Static ไฟล์ต่าง ๆ เช่น ภาพ เสียง อื่น ๆ
• โฟลเดอร์ node_modules : สาย node.js น่าจะรู้กันอยู่แล้วว่ามันเอาไว้เก็บพวก dependency ที่เราติดตั้งในโปรเจกต์
• .gitignore : เอาไว้บอกว่าไฟล์ หรือ โฟลเดอร์ไหน git ไม่ต้องสนใจ มองข้ามไปได้เลย
• App.js : ไฟล์เริ่มต้นหลักของแอปที่มีรูทเริ่มต้นของแอป
• app.json : เอาไว้ Config ค่าต่าง ๆ ของแอป
• babel.config.js : สำหรับ Config Babel transpiler เวลาที่จะใช้ฟีเจอร์ JavaScript ใหม่ ๆ แต่แพลตฟอร์มที่เอาแอปไปลงมันไม่รองรับ
• package-lock.json : ไฟล์ที่เก็บรายละเอียดของ dependency
• package.json : ไฟล์ข้อมูลเกี่ยวกับโปรเจกต์นี้

3. เมื่อสร้างโปรเจกต์รู้จักกับโครงสร้างของโปรเจกต์เรียบร้อยให้ใช้คำสั่ง npx expo start ในโฟลเดอร์ที่โปรเจกต์เราติดตั้งไว้ และระบบจะทำการสร้าง QR code ขึ้นมาเราสามารถตรวจสอบได้โดยการ Scan เพื่อเช็คผลลัพธ์ในมือถือได้เลยครับ

4. แต่ ๆ ตอนที่เราสแกนจะต้องสแกนผ่านแอปชื่อว่า “Expo Go” นะ

5. เมื่อสแกนแล้วจะพบกับหน้าตาแบบนี้เลย

6. ต่อมาเราจะมาเริ่มเขียนโค้ดแก้ไขแอปของเราจะไฟล์ App.js ซึ่งโค้ดที่เราได้ทำการแก้ไขจะมีหน้าตาดังนี้

import React from 'react';
import { AppRegistry } from 'react-native';
import LoginScreen from './src/LoginScreen';

function App() {
return <LoginScreen />;
}

AppRegistry.registerComponent('LoginApp', () => App);

export default App;

โค้ดนี้แต่ละส่วนหมายถึงอะไร

โดยส่วนแรกเราจะทำการ Import สิ่งที่เราจะใช้มาก่อน นั่นก็คือ react , react-native และ LoginScreen

แล้วในฟังก์ชันแอปมันจะทำการ Return หน้าล็อกอินก่อนเสมอ เมื่อเราได้ทำการแก้ไขไฟล์ App.js เรียบร้อยแล้ว ต่อไปเราจะไปสร้าง Component ของหน้าล็อกอินกัน

7. โดยเริ่มจากการสร้างโฟลเดอร์ขึ้นมาตั้งชื่อว่า “src” จากนั้นสร้างไฟล์ LoginScreen.js ขึ้นมาไว้ใน โฟลเดอร์นี้

import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, ImageBackground, StyleSheet } from 'react-native';

const LoginScreen = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');

const handleLogin = () => {


if (username.length >= 8 && /^[A-Z]/.test(username) && password.length >= 8) {

console.log('Login successful');
alert('Login สำเร็จ');
} else {

console.log('Invalid credentials');
alert('Login ผิดพลาด');
}
};

อย่างแรกเราก็ต้องทำการ Import ของที่เราจำเป็นต้องใช้เข้ามาโดยโค้ดส่วนนี้เราจะมีการใช้ useState สำหรับการจัดการสถานะของ Component และ Component อื่น ๆ สำหรับการสร้างส่วนของ UI ต่าง ๆ เช่น View, Text, TextInput, TouchableOpacity, ImageBackground และ StyleSheet

แล้วมาทำการสร้าง LoginScreen Component โดยในที่นี้ผมจะเขียนในรูปแบบของ Arrow ฟังก์ชัน แล้วทำการกำหนดค่าเริ่มต้นของของผู้ใช้และรหัสผ่านโดยใช้ useState

ต่อมามากำหนดการทำงานของฟังก์ชัน handleLogin โดยฟังก์ชันจะทำงานก็ต่อเมื่อผู้ใช้พยายามเข้าสู่ระบบ

โดยจะสร้างเงื่อนไขไว้ว่า ถ้าความยาวตัวอักษรของ username มากกว่าหรือเท่ากับ 8 และมีตัวพิมพ์ใหญ่ตามด้วยความยาวของ password ต้องมากกว่าหรือเท่ากับ 8 ให้ทำการแสดง “Login สำเร็จ” แต่ถ้าไม่ตรงตามเงื่อนไขให้แสดง Login ผิดพลาด

โอเคครับเมื่อส่วนลอจิก Login แบบง่าย ๆ ของเราเสร็จเรียบร้อย เราก็มาทำในส่วนของหน้าตา UI ของแอปกันต่อ โดยโค้ดที่เราจะเขียนจะเป็นรูปแบบของ JSX ที่ทำการ Return LoginScreen Component ที่มีการกำหนดส่วนของ UI สำหรับทำหน้าจอเข้าสู่ระบบนั่นเอง

return (
<ImageBackground
source={{ uri: 'เลือกรูปที่จะใช้เป็นพื้นหลังได้เลยครับ' }}
style={styles.container}
>
<View style={styles.overlay} />

<View style={styles.content}>
<Text style={styles.title}>Login</Text>

<View style={styles.inputContainer}>
<Text style={styles.label}>Username</Text>
<TextInput
style={styles.input}
onChangeText={(text) => setUsername(text)}
/>
</View>

<View style={styles.inputContainer}>
<Text style={styles.label}>Password</Text>
<TextInput
style={styles.input}
secureTextEntry
onChangeText={(text) => setPassword(text)}
/>
</View>

<TouchableOpacity style={styles.button} onPress={handleLogin}>
<Text style={styles.buttonText}>Login</Text>
</TouchableOpacity>
</View>
</ImageBackground>
);
};

1. ภายใน return จะรวมโค้ด JSX ไว้ในวงเล็บและ Return ไปเป็น LoginScreen Component
2. ImageBackground เป็นการกำหนดภาพพื้นหลังสำหรับหน้าจอเข้าสู่ระบบ เราสามารถใส่ด้วย URL หรือ Path ไปยังรูปภาพของเราได้
3. View ช่วยในการจัดวางและจัดรูปแบบ
4. styles.overlay ใช้เพื่อสร้างเอฟเฟกต์ซ้อนทับที่ด้านบนของภาพพื้นหลัง
5. styles.content มันแสดงถึงพื้นที่เนื้อหาหลักของหน้าเข้าสู่ระบบ
6. Text ที่มีข้อความ “เข้าสู่ระบบ”
7. styles.inputContainer แต่ละชุดจะแทน Label และ ช่องใส่ชื่อผู้ใช้และรหัสผ่านตามลำดับ
8. TextInput สำหรับช่องป้อนข้อมูลที่เกี่ยวข้อง
9. onChangeText ใช้เพื่ออัปเดต ‘ชื่อผู้ใช้’ และ ‘รหัสผ่าน’ เมื่อผู้ใช้พิมพ์มาใน TextInput
10. TextInput มี prop secureTextEntry ในส่วนของช่องรหัสผ่าน และ ตั้งค่าเป็น true ซึ่งจะซ่อนข้อความที่ป้อนเพื่อความปลอดภัย
11. TouchableOpacity แทนปุ่มเข้าสู่ระบบ มันทริกเกอร์ฟังก์ชัน handleLogin เมื่อกด
12. สไตล์ต่างๆ ที่ใช้สำหรับ styles.container, styles.title, styles.input ถูกกำหนดไว้ในโค้ดโดยใช้โมดูล StyleSheet

ส่วนนี้เป็นโค้ด CSS ที่ใช้ตกแต่งหน้าแอป ใครจะตกแต่งอย่างไรก็สามารถทำได้อิสระเลยครับขึ้นอยู่กับ Design ของแต่ละคนได้เลยยย

onst styles = StyleSheet.create({
container: {
flex: 1,
resizeMode: 'cover',
},
overlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'rgba(0, 0, 0, 0.6)',
},
content: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 30,
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 20,
color: '#fff',
},
inputContainer: {
width: '100%',
marginBottom: 20,
},
label: {
fontSize: 16,
marginBottom: 8,
color: '#fff',
},
input: {
height: 40,
borderColor: '#ccc',
borderWidth: 1,
borderRadius: 5,
paddingHorizontal: 10,
color: '#fff',
},
button: {
backgroundColor: '#007AFF',
borderRadius: 5,
paddingVertical: 12,
paddingHorizontal: 20,
},
buttonText: {
color: '#fff',
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});

export default LoginScreen;

เท่านี้ก็จะได้ระบบ Login มาใช้กับแอปพลิเคชันของเรากันแล้ว

เป็นยังไงกันบ้างครับ สำหรับการทำหน้า Login โดยใช้ React Native ไม่ยากเลยใช่มั้ยครับ ก่อนจากกันไปถ้าใครอยากได้โค้ด LoginScreen.js แบบเต็ม ๆ ฉบับนักกอล์ฟปี้ & แพลส โค้ดจะอยู่ในลิงก์นี้นครับ https://pastebin.com/SwpkcEnP

สำหรับเพื่อน ๆ คนไหนที่ติดปัญหาอะไรหรือใครที่ทำได้แล้วอยากนำไปปรับปรุงต่อให้ดีขึ้นก็สามารถแสดงความคิดเห็นกันได้นะครับแต่ท้ายที่สุดก็อยากจะบอกเลยว่าระบบ Login เป็นสิ่งที่สำคัญมากในองค์ประกอบของแอปพลิเคชันการที่เรามีระบบ Login ก็จะช่วยให้ผู้ใช้มอบความไว้วางใจให้กับเราได้นะครับ📱🙏