एडब्ल्यूएस लैम्ब्डा और सर्वरलेस रेडिस द्वारा समर्थित रिएक्ट नेटिव ऐप्स का निर्माण

इस पोस्ट में, हम लीडरबोर्ड देखने और अपडेट करने के लिए मोबाइल एप्लिकेशन विकसित करने के लिए रिएक्ट नेटिव, सर्वरलेस फ्रेमवर्क और अपस्टैश का उपयोग करेंगे।

हम सर्वर रहित ढांचे द्वारा समर्थित मोबाइल एप्लिकेशन को विकसित करने के लिए रिएक्ट नेटिव का उपयोग करेंगे, जिसमें एडब्ल्यूएस लैम्ब्डा पर चलने वाले पायथन फ़ंक्शन शामिल हैं।

1 - Upstash Redis का उपयोग करना

एक विशिष्ट लीडरबोर्ड ऐप में, उपयोगकर्ता की जानकारी और उपयोगकर्ताओं से संबंधित स्कोर को संग्रहीत करने की आवश्यकता होती है। चूंकि इन सभी डेटा को स्कोर के आधार पर क्रमबद्ध किया जाना चाहिए, इसलिए रेडिस का उपयोग करना सर्वोत्तम संभव समाधानों में से एक है।

"सॉर्टेड सेट", जो रेडिस द्वारा समर्थित है, एक सॉर्ट किया गया डेटा प्रकार है जो उपयोगकर्ताओं को बहुत तेज़ तरीके से श्रेणी संचालन द्वारा भंडारण, जोड़ने, हटाने और क्वेरी करने में सक्षम बनाता है।

सॉर्ट किया गया सेट ठीक वही चीज़ है जो सॉर्ट किए गए लीडरबोर्ड को संग्रहीत करने, अपडेट करने और प्रदर्शित करने के लिए आवश्यक है।

1.1 - Upstash के साथ शुरुआत करना

Upstash Redis के लिए एक सर्वर रहित डेटाबेस प्रदान करता है। Redis कैसे काम करता है, इसके बारे में अधिक विस्तृत जानकारी के लिए, कृपया Redis दस्तावेज़ीकरण देखें।

यहां कुछ फायदे दिए गए हैं जिनके कारण हमें अपने उदाहरण में Upstash Redis का उपयोग करना पड़ा:

• मूल्य निर्धारण प्रणाली के अनुसार भुगतान करें, मूल्य निर्धारण

• भंडारण और संचालन के लिए नि:शुल्क स्तर

• बहुत आसान कार्यान्वयन

• विस्तृत कॉन्फ़िगरेशन की कोई आवश्यकता नहीं है

हमारे मामले में, पहला कदम एक Upstash अकाउंट कंसोल बना रहा है। दूसरे, अपनी इच्छानुसार एक Upstash डेटाबेस बनाएँ। फिर, यह जाने के लिए तैयार है!

<मजबूत>

परिचित होने के लिए, हम CLI में कुछ ऑपरेशन कर सकते हैं, जो Upstash कंसोल में प्रदान किया जाता है।

सबसे पहले, हम सॉर्ट किए गए सेट में स्कोर के साथ एक नया उपयोगकर्ता जोड़कर अपना डेटाबेस शुरू कर सकते हैं, जिसे हमने लीडरबोर्ड के रूप में नाम दिया है।

ZADD Leaderboard <Score> <User>

तब हम सभी उपयोगकर्ता जानकारी को उसके स्कोर के साथ प्रदर्शित कर सकते हैं।

ZRANGE Leaderboard 0 -1 WITHSCORES

<मजबूत> Redis को ऐप के बैकएंड से जोड़ने के लिए हम सर्वरलेस फ्रेमवर्क के साथ AWS लैम्ब्डा फंक्शन पर ये ऑपरेशन कर सकते हैं।

2 - सर्वर रहित फ्रेमवर्क के साथ फंक्शन बनाएं

सर्वर रहित एक ढांचा है जो हमें AWS, Azure, Google क्लाउड आदि जैसे क्लाउड प्रदाताओं के सर्वर रहित कार्यों के साथ काम करने की अनुमति देता है। यह उपयोगकर्ता की ओर से सर्वर रहित कार्यों को लागू करने और प्रबंधित करने के लिए एक बहुत ही शक्तिशाली उपकरण है।

आइए AWS के लिए सर्वर रहित फ्रेमवर्क को स्थापित और कॉन्फ़िगर करके शुरू करें। सर्वर रहित त्वरित प्रारंभ पर जाएं और चरणों का पालन करें।

इंस्टालेशन के बाद, हमारे पास हैंडलर.py और serverless.yml है।

• serverless.yml

  इस फ़ाइल में, हम उन कार्यों को परिभाषित करेंगे जिन्हें हम लागू करेंगे। हमारे मामले में, हमें केवल नए उपयोगकर्ता जोड़ने और लीडरबोर्ड प्रदर्शित करने की आवश्यकता होगी। इसलिए, "addScore" और "getLeaderboard" फ़ंक्शन को परिभाषित करना पर्याप्त होना चाहिए।

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

• हैंडलर.py

  इस फ़ाइल में, हम फ़ंक्शंस को लागू करेंगे, जो कोड हैं जो बैकएंड में निष्पादित होंगे जब एक मोबाइल ऐप द्वारा http अनुरोध भेजा जाता है जैसा कि serverless.yml फ़ाइल में परिभाषित किया गया है।

  सबसे पहले, हमें रेडिस को आयात और कॉन्फ़िगर करने की आवश्यकता है, जो कि हमारे पास एकमात्र निर्भरता है। सर्वर रहित ढांचे में रेडिस निर्भरता जोड़ने के लिए, हमें "सर्वर रहित पायथन आवश्यकताएँ" प्लगइन जोड़ने की आवश्यकता है। कमांड चलाएँ,

  serverless plugin install -n serverless-python-requirements
  

  फिर सुनिश्चित करें कि प्लगइन को नीचे के रूप में serverless.yml में जोड़ा गया है।

  plugins:
  - serverless-python-requirements
  

  अधिक विवरण के लिए, कृपया सर्वर रहित-पायथन-आवश्यकताओं पर जाएं।

  अंतिम चरण के रूप में, हमें उसी निर्देशिका में आवश्यकताएँ.txt फ़ाइल बनाने की आवश्यकता है जो serverless.yml है। Redis निर्भरता को निम्न के रूप में आवश्यकताओं.txt फ़ाइल में जोड़ें

  redis==4.0.2
  

  अब हम अपने Upstash Redis को हैंडलर.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)
  

  रेडिस कॉन्फ़िगरेशन समाप्त करने के बाद, हम अपने कार्यों को तैयार कर सकते हैं जिन्हें उपयोगकर्ताओं द्वारा बुलाया जाएगा।

  हमारे पास दो कार्य हैं।

  पहला लीडरबोर्ड में नए उपयोगकर्ता और स्कोर जोड़ रहा है। यह एक पोस्ट अनुरोध है। उपयोगकर्ता 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 लैम्ब्डा द्वारा प्रदान किया जाता है।

  रेडिस के zadd फ़ंक्शन का उपयोग करके, हम उपयोगकर्ताओं को जोड़ सकते हैं और सॉर्ट किए गए सेट "लीडरबोर्ड" में स्कोर कर सकते हैं। उदाहरण:

  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 - रिएक्टिव नेटिव के साथ मोबाइल ऐप विकसित करना

रिएक्ट नेटिव एक ढांचा है, जो हमें जावास्क्रिप्ट में कोड लिखकर कई प्लेटफार्मों के लिए मोबाइल एप्लिकेशन विकसित करने की अनुमति देता है।

रिएक्ट नेटिव के साथ मोबाइल एप्लिकेशन विकसित करने के लिए, हमें अपना वातावरण स्थापित करना होगा और प्रोजेक्ट बनाना होगा। कृपया अपना पहला मोबाइल एप्लिकेशन वातावरण-सेटअप बनाने के लिए चरणों का पालन करें।

हमारे मोबाइल एप्लिकेशन में दो स्क्रीन होंगी। पहली स्क्रीन है जहां उपयोगकर्ता उपयोगकर्ता जानकारी के साथ एक नया स्कोर जोड़ते हैं।

सरलता के लिए, हम उपयोगकर्ता से केवल प्रथम नाम, अंतिम नाम और स्कोर का अनुरोध करेंगे।

स्क्रीन जो उपयोगकर्ता स्कोर सबमिट करते हैं वह नीचे की तरह दिखती है।

<मजबूत>

इस स्क्रीन में, जब कोई उपयोगकर्ता स्कोर दर्ज करता है, तो एप्लिकेशन हमारे सर्वर रहित समापन बिंदु पर एक 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 अनुरोध निकाय में "प्रथम नाम", "अंतिम नाम", "स्कोर" कुंजियाँ और संबंधित मान होते हैं जो हमें उपयोगकर्ताओं से प्राप्त होते हैं।

यदि बैकएंड से भेजी गई प्रतिक्रिया में "स्कोर सफलतापूर्वक जोड़ा गया!" है, तो इसका मतलब है कि हमारे द्वारा भेजा गया अनुरोध प्राप्त हो गया है और स्कोर सफलतापूर्वक जोड़ दिया गया है।

<मजबूत>

अब, हम एक बहुत ही सरल लीडरबोर्ड स्क्रीन डिजाइन करेंगे। उपयोगकर्ता को "लीडरबोर्ड पर जाएं" बटन पर क्लिक करके लीडरबोर्ड स्क्रीन पर नेविगेट किया जा सकता है।

लीडरबोर्ड स्क्रीन कुछ इस तरह दिखेगी।

निम्न एंडपॉइंट पर HTTP POST अनुरोध भेजना इस स्क्रीन पर सबसे महत्वपूर्ण बात है।

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

जब स्क्रीन शुरुआत में खुलती है। इस प्रयोजन के लिए, हम इस अनुरोध को कंपोनेंटडिडमाउंट फंक्शन में भेज सकते हैं, जो एक कंपोनेंट के माउंट होने के तुरंत बाद इस प्रकार लागू होता है।

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 पर उपलब्ध है

निष्कर्ष

इस पोस्ट में, हमने लीडरबोर्ड के लिए एक मोबाइल एप्लिकेशन विकसित किया है जो सर्वरलेस फ्रेमवर्क के माध्यम से एडब्ल्यूएस लैम्ब्डा पर चलने वाले पायथन कार्यों द्वारा समर्थित है। हमने अपने लीडरबोर्ड को Upstash Redis में संग्रहित किया है।

Upstash के साथ बहुत सी चीजें की जा सकती हैं। Redis का उपयोग करके लीडरबोर्ड एप्लिकेशन बनाना उनमें से एक है।

मुझे उम्मीद है कि यह पोस्ट आप सभी की मदद करेगी!