การสร้าง React Native App ที่สนับสนุนโดย AWS Lambda และ Serverless Redis

ในโพสต์นี้ เราจะใช้ React Native, Serverless framework และ Upstash เพื่อพัฒนาแอปพลิเคชันมือถือสำหรับการดูและอัปเดตลีดเดอร์บอร์ด

เราจะใช้ React Native เพื่อพัฒนาแอปพลิเคชันมือถือที่สนับสนุนโดยเฟรมเวิร์ก Serverless ซึ่งประกอบด้วยฟังก์ชัน Python ที่ทำงานบน AWS Lambda

1 - การใช้ Upstash Redis

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

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

ชุดที่จัดเรียงเป็นสิ่งที่จำเป็นสำหรับการจัดเก็บ อัปเดต และแสดงลีดเดอร์บอร์ดที่จัดเรียงแล้ว

1.1 - การเริ่มต้นใช้งาน Upstash

Upstash จัดเตรียมฐานข้อมูลแบบไร้เซิร์ฟเวอร์สำหรับ Redis สำหรับข้อมูลโดยละเอียดเพิ่มเติมเกี่ยวกับวิธีการทำงานของ Redis โปรดตรวจสอบเอกสารประกอบของ Redis

นี่คือข้อดีบางประการที่ทำให้เราใช้ Upstash Redis ในตัวอย่างของเรา:

ระบบกำหนดราคาแบบจ่ายตามการใช้งาน การตั้งราคา
ระดับฟรีสำหรับการจัดเก็บและการดำเนินงาน
ใช้งานง่ายมาก
ไม่จำเป็นต้องมีการกำหนดค่าโดยละเอียด

ในกรณีของเรา ขั้นตอนแรกคือการสร้างคอนโซลบัญชี Upstash ประการที่สอง สร้างฐานข้อมูล Upstash ตามที่คุณต้องการ ก็พร้อมลุย!

เพื่อทำความคุ้นเคย เราสามารถดำเนินการบางอย่างใน CLI ซึ่งมีให้ในคอนโซล Upstash

ขั้นแรก เราสามารถเริ่มฐานข้อมูลของเราโดยเพิ่มผู้ใช้ใหม่ที่มีคะแนนไปยังชุดที่จัดเรียง ซึ่งเราตั้งชื่อเป็นลีดเดอร์บอร์ด

ZADD Leaderboard <Score> <User>

จากนั้นเราสามารถแสดงข้อมูลผู้ใช้ทั้งหมดพร้อมคะแนน

ZRANGE Leaderboard 0 -1 WITHSCORES

เราดำเนินการเหล่านี้ได้บนฟังก์ชัน AWS Lambda ด้วย Serverless Framework เพื่อเชื่อมต่อ Redis กับแบ็กเอนด์ของแอป

2 - สร้างฟังก์ชันด้วย Serverless Framework

Serverless เป็นเฟรมเวิร์กที่ช่วยให้เราทำงานกับฟังก์ชันแบบไร้เซิร์ฟเวอร์ของผู้ให้บริการระบบคลาวด์ เช่น AWS, Azure, Google Cloud เป็นต้น เป็นเครื่องมือที่ทรงพลังมากในการปรับใช้และจัดการฟังก์ชันแบบไร้เซิร์ฟเวอร์จากฝั่งผู้ใช้

เริ่มต้นด้วยการติดตั้งและกำหนดค่า Serverless Framework สำหรับ AWS เยี่ยมชมและทำตามขั้นตอนเริ่มต้นอย่างรวดเร็วแบบไร้เซิร์ฟเวอร์

หลังการติดตั้ง เรามี handler.py และ serverless.yml

serverless.yml

ในไฟล์นี้ เราจะกำหนดฟังก์ชันที่เราจะนำไปใช้ ในกรณีของเรา เราจะต้องเพิ่มผู้ใช้ใหม่และให้กระดานผู้นำแสดงเท่านั้น ดังนั้น การกำหนดฟังก์ชัน “addScore” และ “getLeaderboard” ก็น่าจะเพียงพอแล้ว

	functions:
		addScore:
			handler: handler.addScore
			events:
				- httpApi: 'POST /add'
		getLeaderboard:
			handler: handler.getLeaderboard
			events:
				- httpApi: 'GET /getLeaderboard'

handler.py

ในไฟล์นี้ เราจะใช้ฟังก์ชันต่างๆ ซึ่งเป็นรหัสที่จะดำเนินการในส่วนหลังเมื่อมีการส่งคำขอ HTTP โดยแอปมือถือตามที่กำหนดไว้ในไฟล์ serverless.yml

อันดับแรก เราต้องนำเข้าและกำหนดค่า redis ซึ่งเป็นการพึ่งพาเพียงอย่างเดียวที่เรามี ในการเพิ่มการพึ่งพา redis ให้กับเฟรมเวิร์กแบบไร้เซิร์ฟเวอร์ เราจำเป็นต้องเพิ่มปลั๊กอิน "Serverless Python Requirements" เรียกใช้คำสั่ง
```
serverless plugin install -n serverless-python-requirements
```
จากนั้นตรวจสอบให้แน่ใจว่าได้เพิ่มปลั๊กอินลงใน serverless.yml ดังนี้
```
plugins:
- serverless-python-requirements
```
สำหรับรายละเอียดเพิ่มเติม โปรดไปที่ serverless-python-requirements

ในขั้นตอนสุดท้าย เราต้องสร้างไฟล์ requirements.txt ในไดเร็กทอรีเดียวกันกับ serverless.yml เพิ่มการพึ่งพา redis ให้กับไฟล์ requirements.txt ดังนี้
```
redis==4.0.2
```
ตอนนี้เราสามารถกำหนดค่า Upstash Redis ของเราใน handler.py
```
import json
import redis

r = redis.Redis(
host= 'YOUR_REDIS_ENDPOINT',
port= 'YOUR_REDIS_PORT',
password= 'YOUR_REDIS_PASSWORD',
charset="utf-8",
decode_responses=True)
```
หลังจากที่เรากำหนดค่า Redis เสร็จแล้ว เราสามารถเตรียมฟังก์ชันที่ผู้ใช้จะเรียกใช้ได้

เรามีสองฟังก์ชัน

อันดับแรกคือการเพิ่มผู้ใช้ใหม่และคะแนนในกระดานผู้นำ นี่คือคำขอ POST ผู้ใช้จะส่งข้อมูลภายในเนื้อหาของคำขอ HTTP
```
{"score": 15,"firstname": "Jack","lastname": "Thang"}
```
สามารถใช้งานได้ดังนี้
```
def addScore(event, context):
info = json.loads(event["body"])
leaderboard = "Leaderboard"
score = info["score"]
player_name = info["firstname"] + "_" + info["lastname"]
r.zadd(leaderboard, {player_name: score})
body = {
"message": "Score added successfully!",
}
response = {"statusCode": 200, "body": json.dumps(body)}
return response
```
เราสามารถแยกวิเคราะห์คะแนนและข้อมูลผู้ใช้จากพารามิเตอร์เหตุการณ์ซึ่งจัดหาโดย AWS Lambda

ด้วยการใช้ฟังก์ชัน zadd ของ redis เราสามารถเพิ่มผู้ใช้และให้คะแนนไปยังชุดที่จัดเรียง "ลีดเดอร์บอร์ด" ตัวอย่าง:
```
Request body: {"score": 15,"firstname": "Jack","lastname": "Thang"}

Response body: {"message": "Score added successfully!"}
```
ฟังก์ชันที่สองของเราคือ getLeaderboard ฟังก์ชันนี้ยอมรับคำขอ GET จากผู้ใช้และส่งคืนกระดานผู้นำในลำดับจากมากไปน้อย ซึ่งอ่านจาก Redis
```
def getLeaderboard(event, context):
leaderboard = "Leaderboard"
score_list = r.zrange(leaderboard, 0, -1, withscores=True, desc=True)
body = {
"message": "Leaderboard returned successfully!",
"leaderboard": score_list
}
response = {"statusCode": 200, "body": json.dumps(body)}
return response
```
ตัวอย่าง:
```
Response body: {"message": "Leaderboard returned successfully!", "leaderboard": [["Jack_Thang", 15.0], ["Omer_Aytac", 12.0]]}
```
สุดท้ายนี้ เราสามารถปรับใช้ฟังก์ชันของเราได้ด้วยการเรียกใช้
```
serverless deploy -v
```
คุณจะเห็นข้อมูลบริการขณะปรับใช้ บันทึกปลายทางไปที่อื่นเพื่อใช้อีกครั้งในภายหลัง

ปลายทาง:
```
POST - https://f571j8y8s1.execute-api.us-east-1.amazonaws.com/add

GET - https://f571j8y8s1.execute-api.us-east-1.amazonaws.com/getLeaderboard
```
ตอนนี้แบ็กเอนด์แบบไร้เซิร์ฟเวอร์พร้อมแล้ว

3 - การพัฒนาแอปบนอุปกรณ์เคลื่อนที่ด้วย React Native

React Native เป็นเฟรมเวิร์กที่ช่วยให้เราพัฒนาแอปพลิเคชั่นมือถือสำหรับหลายแพลตฟอร์มโดยการเขียนโค้ดใน Javascript

ในการพัฒนาแอปพลิเคชั่นมือถือด้วย React Native เราต้องตั้งค่าสภาพแวดล้อมของเราและสร้างโครงการ โปรดทำตามขั้นตอนเพื่อสร้างการตั้งค่าสภาพแวดล้อมแอปพลิเคชันมือถือครั้งแรกของคุณ

ในแอปพลิเคชันมือถือของเราจะมีสองหน้าจอ อันแรกคือหน้าจอที่ผู้ใช้เพิ่มคะแนนใหม่พร้อมข้อมูลผู้ใช้

เพื่อความง่าย เราจะขอเฉพาะชื่อ นามสกุล และคะแนนจากผู้ใช้เท่านั้น

หน้าจอที่ผู้ใช้ส่งคะแนนมีลักษณะดังนี้

ในหน้าจอนี้ เมื่อผู้ใช้ป้อนคะแนน แอปพลิเคชันจะส่งคำขอ HTTP ไปยังปลายทางแบบไร้เซิร์ฟเวอร์ของเรา

https://f571j8y8s1.execute-api.us-east-1.amazonaws.com/add

ซึ่งเราบันทึกไว้ขณะปรับใช้ฟังก์ชันแบบไร้เซิร์ฟเวอร์ ฟังก์ชันที่ใช้ในตัวอย่างนี้คือ

async addScore(){
	if(isNaN(this.state.score)){
		Alert.alert("Error", "Please enter a valid score.");
		return;
	}
	if(this.state.firstname == "" || this.state.lastname == "" || this.state.score == null){
		Alert.alert("Error", "Please fill in the blanks.");
		return;
	}
	await fetch('https://f571j8y8s1.execute-api.us-east-1.amazonaws.com/add', {
		method: 'POST',
		headers: {
			Accept: 'application/json',
			'Content-Type': 'application/json',
		},
		body: JSON.stringify({
			firstname: this.state.firstname,
			lastname: this.state.lastname,
			score: parseInt(this.state.score)
		}),
	})
	.then(response => response.json())
	.then(data => {
		if(data.message == "Score added successfully!"){
			Alert.alert("Done!", "Score added successfully!");
		}
		else{
			Alert.alert("Error", "Please try again later.");
		}
	})
	.catch(err => {
		console.error(err)
		Alert.alert("Error", "Please try again later.");
	});
}

อย่างที่คุณเห็น เนื้อหาคำขอ POST ประกอบด้วยคีย์ "ชื่อ" "นามสกุล" "คะแนน" และค่าที่เกี่ยวข้องที่เราได้รับจากผู้ใช้

หากการตอบกลับที่ส่งจากแบ็กเอนด์มี "เพิ่มคะแนนเรียบร้อยแล้ว!" แสดงว่าได้รับคำขอที่เราส่งและคะแนนได้รับการเพิ่มเรียบร้อยแล้ว

ตอนนี้ เราจะออกแบบหน้าจอลีดเดอร์บอร์ดที่ง่ายมาก ผู้ใช้สามารถนำทางไปยังหน้าจอลีดเดอร์บอร์ดได้โดยคลิกปุ่ม “ไปที่ลีดเดอร์บอร์ด”

หน้าจอลีดเดอร์บอร์ดจะเป็นแบบนี้

การสร้าง React Native App ที่สนับสนุนโดย AWS Lambda และ Serverless Redis

การส่งคำขอ HTTP POST ไปยังปลายทางต่อไปนี้เป็นสิ่งสำคัญที่สุดในหน้าจอนี้

https://f571j8y8s1.execute-api.us-east-1.amazonaws.com/getLeaderboard

เมื่อหน้าจอเปิดขึ้นในตอนเริ่มต้น เพื่อจุดประสงค์นี้ เราสามารถส่งคำขอนี้ในฟังก์ชัน componentDidMount ซึ่งถูกเรียกใช้ทันทีหลังจากติดตั้งส่วนประกอบดังนี้

async componentDidMount() {
	await fetch('https://f571j8y8s1.execute-api.us-east-1.amazonaws.com/getLeaderboard',{
		method: 'GET',
		headers: {
			Accept: 'application/json',
			'Content-Type': 'application/json'
		}
	})
	.then(response => response.json())
	.then(data => {
		console.log(data);
		userlist = data.leaderboard;
		this.setState({reRender: !this.state.reRender});
	})
	.catch(err => console.error(err));
}

ซอร์สโค้ดที่สมบูรณ์ของแอปพลิเคชันพร้อมใช้งาน upstash-react-native-project

สรุป

ในโพสต์นี้ เราได้พัฒนาแอปพลิเคชันมือถือสำหรับกระดานผู้นำซึ่งสนับสนุนโดยฟังก์ชัน Python ที่ทำงานบน AWS Lambda ผ่าน Serverless Framework เราจัดเก็บลีดเดอร์บอร์ดของเราไว้ใน Upstash Redis

มีหลายสิ่งที่สามารถทำได้ด้วย Upstash การสร้างแอปพลิเคชันลีดเดอร์บอร์ดโดยใช้ Redis เป็นเพียงหนึ่งในนั้น

ฉันหวังว่าโพสต์นี้จะช่วยคุณได้ทั้งหมด!