Trong bài đăng này, chúng tôi sẽ sử dụng React Native, Serverless framework và Upstash để phát triển ứng dụng di động để xem và cập nhật bảng xếp hạng.
Chúng tôi sẽ sử dụng React Native để phát triển ứng dụng di động được hỗ trợ bởi khung Serverless, bao gồm các hàm Python chạy trên AWS Lambda.
1 - Sử dụng Upstash Redis
Trong một ứng dụng bảng xếp hạng điển hình, thông tin người dùng và điểm số của người dùng cần được lưu trữ. Vì tất cả dữ liệu này phải được sắp xếp theo điểm số, sử dụng Redis là một trong những giải pháp tốt nhất có thể.
“Tập hợp được sắp xếp”, được hỗ trợ bởi Redis là kiểu dữ liệu được sắp xếp cho phép người dùng thực hiện các thao tác lưu trữ, thêm, xóa và truy vấn theo phạm vi một cách rất nhanh chóng.
Tập hợp được sắp xếp chính xác là thứ cần thiết để lưu trữ, cập nhật và hiển thị bảng thành tích đã sắp xếp.
1.1 - Bắt đầu với Upstash
Upstash cung cấp cơ sở dữ liệu không máy chủ cho Redis. Để biết thêm thông tin chi tiết về cách hoạt động của Redis, vui lòng xem tài liệu của Redis.
Dưới đây là một số lợi thế khiến chúng tôi sử dụng Upstash Redis trong ví dụ của mình:
-
Thanh toán khi bạn sử dụng hệ thống định giá, Định giá
-
Bậc miễn phí để lưu trữ và vận hành
-
Thực hiện rất dễ dàng
-
Không cần cấu hình chi tiết
Trong trường hợp của chúng tôi, bước đầu tiên là tạo Bảng điều khiển tài khoản Upstash. Thứ hai, tạo một cơ sở dữ liệu Upstash như bạn muốn. Sau đó, nó đã sẵn sàng hoạt động!
Để làm quen, chúng ta có thể thực hiện một số thao tác trong CLI, được cung cấp trong bảng điều khiển Upstash.
Trước tiên, chúng tôi có thể bắt đầu cơ sở dữ liệu của mình bằng cách thêm một người dùng mới có điểm vào nhóm đã sắp xếp, mà chúng tôi đặt tên là Bảng xếp hạng.
ZADD Leaderboard <Score> <User>
Sau đó, chúng tôi có thể hiển thị tất cả thông tin người dùng với điểm của nó.
ZRANGE Leaderboard 0 -1 WITHSCORES
Chúng tôi có thể thực hiện các thao tác này trên các chức năng AWS Lambda với Serverless Framework để kết nối Redis với phần phụ trợ của ứng dụng.
2 - Tạo chức năng với Serverless Framework
Serverless là một khuôn khổ cho phép chúng tôi làm việc với các chức năng serverless của các nhà cung cấp đám mây như AWS, Azure, Google Cloud, v.v. Đây là một công cụ rất mạnh để triển khai và quản lý các chức năng serverless từ phía người dùng.
Hãy bắt đầu bằng cách cài đặt và định cấu hình Serverless Framework cho AWS. Truy cập và làm theo các bước Khởi động nhanh không cần máy chủ.
Sau khi cài đặt, chúng tôi có handler.py và serverless.yml.
-
serverless.yml
Trong tệp này, chúng tôi sẽ xác định các chức năng mà chúng tôi sẽ thực hiện. Trong trường hợp của chúng tôi, chúng tôi sẽ chỉ cần thêm người dùng mới và hiển thị bảng thành tích. Do đó, chỉ cần xác định các hàm “addScore” và “getLeaderboard” là đủ.
functions:
addScore:
handler: handler.addScore
events:
- httpApi: 'POST /add'
getLeaderboard:
handler: handler.getLeaderboard
events:
- httpApi: 'GET /getLeaderboard'
-
handler.py
Trong tệp này, chúng tôi sẽ triển khai các hàm, là các mã sẽ được thực thi trong phần phụ trợ khi một yêu cầu http được gửi bởi một ứng dụng dành cho thiết bị di động như được xác định trong tệp serverless.yml.
Đầu tiên, chúng ta cần nhập và cấu hình redis, đây là phần phụ thuộc duy nhất mà chúng ta có. Để thêm sự phụ thuộc của redis vào khung công tác không máy chủ, chúng ta cần thêm plugin "Yêu cầu Python không máy chủ". Chạy lệnh,
serverless plugin install -n serverless-python-requirementsSau đó, đảm bảo rằng plugin được thêm vào serverless.yml như bên dưới.
Các pluginplugins: - serverless-python-requirementsĐể biết thêm chi tiết, vui lòng truy cập serverless-python-architects.
Bước cuối cùng, chúng ta cần tạo tệp tin request.txt trong cùng thư mục với serverless.yml. Thêm phần phụ thuộc redis vào tệp tin request.txt như bên dưới
redis==4.0.2Bây giờ chúng ta có thể định cấu hình Upstash Redis của mình trong 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)Sau khi hoàn thành cấu hình Redis, chúng tôi có thể chuẩn bị các chức năng của mình sẽ được người dùng gọi.
Chúng tôi có hai chức năng.
Đầu tiên là thêm người dùng mới và điểm số vào bảng xếp hạng. Đây là một yêu cầu ĐĂNG. Người dùng sẽ gửi thông tin của họ bên trong phần nội dung của yêu cầu HTTP.
{"score": 15,"firstname": "Jack","lastname": "Thang"}Chức năng này có thể được thực hiện như bên dưới.
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 responseChúng tôi có thể phân tích cú pháp điểm số và thông tin người dùng từ thông số sự kiện do AWS Lambda cung cấp.
Bằng cách sử dụng hàm zadd của redis, chúng tôi có thể thêm người dùng và điểm số vào tập hợp đã sắp xếp “Bảng xếp hạng”. Ví dụ:
Request body: {"score": 15,"firstname": "Jack","lastname": "Thang"} Response body: {"message": "Score added successfully!"}Chức năng thứ hai của chúng tôi là getLeaderboard. Hàm này chấp nhận các yêu cầu GET từ người dùng và trả về bảng xếp hạng theo thứ tự giảm dần, được đọc từ 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 responseVí dụ:
Response body: {"message": "Leaderboard returned successfully!", "leaderboard": [["Jack_Thang", 15.0], ["Omer_Aytac", 12.0]]}Cuối cùng, chúng tôi có thể triển khai các chức năng của mình bằng cách chạy
serverless deploy -vBạn sẽ thấy Thông tin dịch vụ trong khi triển khai. Lưu các điểm cuối vào một nơi nào đó để sử dụng lại sau.
điểm cuối:
POST - https://f571j8y8s1.execute-api.us-east-1.amazonaws.com/add GET - https://f571j8y8s1.execute-api.us-east-1.amazonaws.com/getLeaderboardGiờ đây, chương trình phụ trợ không máy chủ đã sẵn sàng.
3 - Phát triển ứng dụng dành cho thiết bị di động với React Native
React Native là một khuôn khổ cho phép chúng tôi phát triển các ứng dụng di động cho nhiều nền tảng bằng cách viết mã bằng Javascript.
Để phát triển các ứng dụng di động với React Native, chúng tôi phải thiết lập môi trường và tạo dự án. Vui lòng làm theo các bước để tạo thiết lập môi trường ứng dụng di động đầu tiên của bạn.
Trong ứng dụng di động của chúng tôi, sẽ có hai màn hình. Màn hình đầu tiên là màn hình nơi người dùng thêm điểm mới với thông tin người dùng.
Vì đơn giản, chúng tôi sẽ chỉ yêu cầu họ, tên và điểm số từ người dùng.
Màn hình mà người dùng gửi điểm trông giống như bên dưới.
Trong màn hình này, khi người dùng nhập điểm, ứng dụng sẽ gửi một yêu cầu HTTP đến điểm cuối không máy chủ của chúng tôi
https://f571j8y8s1.execute-api.us-east-1.amazonaws.com/add
mà chúng tôi đã lưu trong khi triển khai các chức năng không có máy chủ. Hàm được sử dụng trong ví dụ này là
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.");
});
}
Như bạn có thể thấy, nội dung yêu cầu ĐĂNG chứa các khóa "tên", "họ", "điểm" và các giá trị tương ứng mà chúng tôi nhận được từ người dùng.
Nếu phản hồi được gửi từ chương trình phụ trợ có chứa "Điểm đã được thêm thành công!", Thì điều này có nghĩa là yêu cầu mà chúng tôi đã gửi đã được nhận và điểm được thêm thành công.
Bây giờ, chúng ta sẽ thiết kế một màn hình bảng dẫn rất đơn giản. Người dùng có thể được điều hướng đến màn hình bảng xếp hạng bằng cách nhấp vào nút “Chuyển đến bảng xếp hạng”.
Màn hình bảng xếp hạng sẽ trông như thế này.
Gửi một yêu cầu HTTP POST đến điểm cuối sau là điều quan trọng nhất trên màn hình này.
https://f571j8y8s1.execute-api.us-east-1.amazonaws.com/getLeaderboard
khi màn hình mở ở đầu. Vì mục đích này, chúng tôi có thể gửi yêu cầu này trong hàm componentDidMount được gọi ngay sau khi một thành phần được gắn kết như sau.
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));
}
Mã nguồn hoàn chỉnh của ứng dụng có sẵn theo dự án mới nổi
Kết luận
Trong bài đăng này, chúng tôi đã phát triển một ứng dụng di động cho bảng xếp hạng được hỗ trợ bởi các hàm Python chạy trên AWS Lambda thông qua Serverless Framework. Chúng tôi đã lưu trữ bảng thành tích của mình bên trong Upstash Redis.
Có rất nhiều thứ có thể được thực hiện với Upstash. Xây dựng ứng dụng bảng xếp hạng bằng Redis chỉ là một trong số đó.
Tôi hy vọng bài viết này sẽ giúp ích cho tất cả các bạn!