परिचय
इस पोस्ट में, हम React Native, Serverless फ्रेमवर्क और Upstash का उपयोग करके लीडरबोर्ड देखने और अपडेट करने के लिए एक मोबाइल एप्लिकेशन विकसित करेंगे।
हम मोबाइल एप्लिकेशन विकसित करने के लिए React Native का उपयोग करेंगे जिसे Serverless फ्रेमवर्क द्वारा समर्थित किया जाता है, जिसमें AWS Lambda पर चलने वाले Python फंक्शन होते हैं।
1 - Upstash Redis का उपयोग करना
एक सामान्य लीडरबोर्ड ऐप में, उपयोगकर्ता जानकारी और उपयोगकर्ताओं से संबंधित स्कोर को संग्रहीत करने की आवश्यकता होती है। चूंकि इन सभी डेटा को स्कोर के अनुसार क्रमबद्ध किया जाना चाहिए, Redis का उपयोग करना सर्वोत्तम संभावित समाधानों में से एक है।
"सॉर्टेड सेट", जो Redis द्वारा समर्थित है, एक क्रमबद्ध डेटा प्रकार है जो उपयोगकर्ताओं को बहुत तेज़ तरीके से स्टोर करने, जोड़ने, हटाने और रेंज द्वारा क्वेरी करने में सक्षम बनाता है।
सॉर्टेड सेट ठीक वही है जो क्रमबद्ध लीडरबोर्ड को स्टोर करने, अपडेट करने और प्रदर्शित करने के लिए आवश्यक है।
1.1 - Upstash के साथ शुरुआत करना
Upstash Redis के लिए एक सर्वरलेस डेटाबेस प्रदान करता है। Redis कैसे काम करता है इसके बारे में अधिक विस्तृत जानकारी के लिए, कृपया Redis डॉक्यूमेंटेशन देखें।
यहां कुछ फायदे हैं जिनके कारण हमने अपने उदाहरण में Upstash Redis का उपयोग किया:
पे-एज़-यू-गो मूल्य निर्धारण प्रणाली, मूल्य निर्धारण
स्टोरेज और ऑपरेशन के लिए फ्री टियर
बहुत आसान कार्यान्वयन
विस्तृत कॉन्फ़िगरेशन की आवश्यकता नहीं
हमारे मामले में, पहला चरण Upstash अकाउंट कंसोल बनाना है। दूसरा, जैसा आप चाहें Upstash डेटाबेस बनाएं। फिर, यह जाने के लिए तैयार है!
परिचित होने के लिए, हम CLI में कुछ ऑपरेशन कर सकते हैं, जो Upstash कंसोल में प्रदान किया जाता है।
सबसे पहले, हम एक नए उपयोगकर्ता को स्कोर के साथ सॉर्टेड सेट में जोड़कर अपना डेटाबेस शुरू कर सकते हैं, जिसका नाम हम Leaderboard के रूप में सेट करते हैं।
ZADD Leaderboard <Score> <User>फिर हम सभी उपयोगकर्ता जानकारी को उनके स्कोर के साथ प्रदर्शित कर सकते हैं।
ZRANGE Leaderboard 0 -1 WITHSCORESहम इन ऑपरेशनों को Serverless Framework के साथ AWS Lambda फंक्शन पर कर सकते हैं ताकि Redis को ऐप के बैकएंड से जोड़ा जा सके।
2 - Serverless Framework के साथ फंक्शन बनाएं
Serverless एक फ्रेमवर्क है जो हमें AWS, Azure, Google Cloud आदि जैसे क्लाउड प्रोवाइडर्स के सर्वरलेस फंक्शन के साथ काम करने की अनुमति देता है। यह यूज़र साइड से सर्वरलेस फंक्शन को लागू और प्रबंधित करने के लिए एक बहुत शक्तिशाली उपकरण है।
आइए AWS के लिए Serverless Framework को इंस्टॉल और कॉन्फ़िगर करके शुरू करें। चरणों का पालन करने के लिए Serverless क्विक स्टार्ट पर जाएं।
इंस्टॉलेशन के बाद, हमारे पास 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
इस फाइल में, हम फंक्शन को लागू करेंगे, जो वे कोड हैं जो बैकएंड में निष्पादित होंगे जब serverless.yml फाइल में परिभाषित अनुसार मोबाइल ऐप द्वारा एक HTTP अनुरोध भेजा जाता है।
सबसे पहले, हमें redis को इम्पोर्ट और कॉन्फ़िगर करने की आवश्यकता है, जो हमारी एकमात्र निर्भरता है। Serverless Framework में redis निर्भरता जोड़ने के लिए, हमें "Serverless Python Requirements" प्लगइन जोड़ने की आवश्यकता है। कमांड चलाएं,
serverless plugin install -n serverless-python-requirementsफिर सुनिश्चित करें कि प्लगइन serverless.yml में नीचे दिए अनुसार जोड़ा गया है।
plugins: - serverless-python-requirementsअधिक विवरण के लिए, कृपया serverless-python-requirements देखें।
अंतिम चरण के रूप में, हमें serverless.yml के समान डायरेक्टरी में requirements.txt फाइल बनाने की आवश्यकता है। नीचे दिए अनुसार requirements.txt फाइल में redis निर्भरता जोड़ें
redis==4.0.2अब हम handler.py में अपने Upstash Redis को कॉन्फ़िगर कर सकते हैं।
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 द्वारा प्रदान किया जाता है।
Redis के zadd फंक्शन का उपयोग करके, हम उपयोगकर्ताओं और स्कोर को सॉर्टेड सेट "Leaderboard" में जोड़ सकते हैं। उदाहरण:
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 एक फ्रेमवर्क है जो हमें जावास्क्रिप्ट में कोड लिखकर कई प्लेटफॉर्म के लिए मोबाइल एप्लिकेशन विकसित करने की अनुमति देता है।
React Native के साथ मोबाइल एप्लिकेशन विकसित करने के लिए, हमें अपना वातावरण सेट अप करना होगा और प्रोजेक्ट बनाना होगा। अपना पहला मोबाइल एप्लिकेशन बनाने के लिए चरणों का पालन करें environment-setup।
हमारे मोबाइल एप्लिकेशन में दो स्क्रीन होंगी। पहली वह स्क्रीन है जहां उपयोगकर्ता उपयोगकर्ता जानकारी के साथ एक नया स्कोर जोड़ते हैं।
सरलता के लिए, हम उपयोगकर्ता से केवल पहला नाम, अंतिम नाम और स्कोर मांगेंगे।
स्क्रीन जहां उपयोगकर्ता स्कोर सबमिट करते हैं वह नीचे जैसी दिखती है।
इस स्क्रीन में, जब कोई उपयोगकर्ता स्कोर दर्ज करता है, तो एप्लिकेशन हमारे सर्वरलेस एंडपॉइंट पर एक 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 अनुरोध बॉडी में "firstname", "lastname", "score" कुंजियां और संबंधित मान होते हैं जो हम उपयोगकर्ताओं से प्राप्त करते हैं।
यदि बैकएंड से भेजी गई प्रतिक्रिया में "Score added successfully!" है, तो इसका मतलब है कि हमारे द्वारा भेजा गया अनुरोध प्राप्त हो गया है और स्कोर सफलतापूर्वक जोड़ा गया है।
अब, हम एक बहुत ही सरल लीडरबोर्ड स्क्रीन डिज़ाइन करेंगे। उपयोगकर्ता "लीडरबोर्ड पर जाएं" बटन पर क्लिक करके लीडरबोर्ड स्क्रीन पर नेविगेट कर सकता है।
लीडरबोर्ड स्क्रीन इस तरह दिखेगी।
इस स्क्रीन पर सबसे महत्वपूर्ण बात निम्नलिखित एंडपॉइंट पर 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 पर उपलब्ध है।
निष्कर्ष
इस पोस्ट में, हमने एक मोबाइल एप्लिकेशन विकसित किया जो लीडरबोर्ड के लिए है जिसे Serverless Framework के माध्यम से AWS Lambda पर चलने वाले Python फंक्शन द्वारा समर्थित किया गया है। हमने अपने लीडरबोर्ड को Upstash Redis के अंदर संग्रहीत किया।
Upstash के साथ बहुत सी चीजें की जा सकती हैं। Redis का उपयोग करके लीडरबोर्ड एप्लिकेशन बनाना उनमें से सिर्फ एक है।
मुझे उम्मीद है कि यह पोस्ट आप सभी की मदद करेगा!
