এই পোস্টে, আমরা লিডারবোর্ড দেখার এবং আপডেট করার জন্য একটি মোবাইল অ্যাপ্লিকেশন তৈরি করতে রিঅ্যাক্ট নেটিভ, সার্ভারলেস ফ্রেমওয়ার্ক এবং আপস্ট্যাশ ব্যবহার করব।
আমরা সার্ভারলেস ফ্রেমওয়ার্ক দ্বারা সমর্থিত মোবাইল অ্যাপ্লিকেশন ডেভেলপ করতে রিঅ্যাক্ট নেটিভ ব্যবহার করব, যেটিতে AWS Lambda-তে চলমান পাইথন ফাংশন রয়েছে।
1 - Upstash Redis ব্যবহার করা
একটি সাধারণ লিডারবোর্ড অ্যাপে, ব্যবহারকারীর তথ্য এবং ব্যবহারকারীদের স্কোর সংরক্ষণ করা প্রয়োজন। যেহেতু এই সমস্ত ডেটা স্কোর অনুসারে বাছাই করা উচিত, তাই Redis ব্যবহার করা হল অন্যতম সেরা সম্ভাব্য সমাধান৷
"সর্টেড সেট", যা রেডিস দ্বারা সমর্থিত একটি সাজানো ডেটা টাইপ যা ব্যবহারকারীদের খুব দ্রুত পরিসরের ক্রিয়াকলাপগুলির দ্বারা সঞ্চয়, যোগ, অপসারণ এবং অনুসন্ধান করতে সক্ষম করে৷
সাজানো লিডারবোর্ড সঞ্চয়, আপডেট এবং প্রদর্শনের জন্য বাছাই করা সেট হল ঠিক সেই জিনিসটি।
1.1 - Upstash দিয়ে শুরু করা
Upstash Redis এর জন্য একটি সার্ভারহীন ডাটাবেস প্রদান করে। রেডিস কীভাবে কাজ করে সে সম্পর্কে আরও বিস্তারিত তথ্যের জন্য, অনুগ্রহ করে রেডিস ডকুমেন্টেশন চেক করুন।
এখানে কিছু সুবিধা রয়েছে যা আমাদের উদাহরণে Upstash Redis ব্যবহার করতে পরিচালিত করেছে:
-
প্রাইসিং সিস্টেম, প্রাইসিং
যাওয়ার সাথে সাথে অর্থ প্রদান করুন -
সঞ্চয় এবং অপারেশনের জন্য বিনামূল্যে স্তর
-
খুব সহজ বাস্তবায়ন
-
বিস্তারিত কনফিগারেশনের প্রয়োজন নেই
আমাদের ক্ষেত্রে, প্রথম ধাপ হল একটি Upstash অ্যাকাউন্ট কনসোল তৈরি করা। দ্বিতীয়ত, আপনার ইচ্ছামত একটি Upstash ডাটাবেস তৈরি করুন। তারপর, এটি যেতে প্রস্তুত!
পরিচিত হওয়ার জন্য, আমরা CLI-তে কিছু অপারেশন করতে পারি, যা Upstash কনসোলে দেওয়া হয়।
প্রথমে, আমরা সাজানো সেটে একটি স্কোর সহ একটি নতুন ব্যবহারকারী যোগ করে আমাদের ডাটাবেস শুরু করতে পারি, যেটির নাম আমরা লিডারবোর্ড হিসাবে সেট করি৷
ZADD Leaderboard <Score> <User>
তারপর আমরা তার স্কোর সহ সমস্ত ব্যবহারকারীর তথ্য প্রদর্শন করতে পারি।
ZRANGE Leaderboard 0 -1 WITHSCORES
আমরা অ্যাপের ব্যাকএন্ডে Redis সংযোগ করতে সার্ভারলেস ফ্রেমওয়ার্কের সাথে AWS Lambda ফাংশনে এই ক্রিয়াকলাপগুলি করতে পারি৷
2 - সার্ভারহীন ফ্রেমওয়ার্ক দিয়ে ফাংশন তৈরি করুন
সার্ভারলেস হল একটি ফ্রেমওয়ার্ক যা আমাদেরকে AWS, Azure, Google ক্লাউড ইত্যাদির মতো ক্লাউড প্রদানকারীদের সার্ভারহীন ফাংশনগুলির সাথে কাজ করার অনুমতি দেয়৷ এটি ব্যবহারকারীর দিক থেকে সার্ভারবিহীন ফাংশনগুলি বাস্তবায়ন এবং পরিচালনা করার জন্য একটি অত্যন্ত শক্তিশালী টুল৷
আসুন 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 আমদানি এবং কনফিগার করতে হবে, যা আমাদের একমাত্র নির্ভরতা। সার্ভারহীন ফ্রেমওয়ার্কে রিডিস নির্ভরতা যোগ করতে, আমাদের "সার্ভারলেস পাইথন প্রয়োজনীয়তা" প্লাগইন যোগ করতে হবে। কমান্ড চালান,
serverless plugin install -n serverless-python-requirementsতারপর নিশ্চিত করুন যে প্লাগইনটি নিচের মত serverless.yml এ যোগ করা হয়েছে।
plugins: - serverless-python-requirementsআরও বিস্তারিত জানার জন্য, অনুগ্রহ করে সার্ভারহীন-পাইথন-প্রয়োজনীয়তা দেখুন।
শেষ ধাপ হিসেবে, আমাদেরকে serverless.yml-এর মতো একই ডিরেক্টরিতে requirements.txt ফাইল তৈরি করতে হবে। নিচের মত Redis নির্ভরতা Requiments.txt ফাইলে যোগ করুন
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 কনফিগারেশন শেষ করার পরে, আমরা আমাদের ফাংশনগুলি প্রস্তুত করতে পারি যা ব্যবহারকারীদের দ্বারা কল করা হবে৷
আমাদের দুটি কার্যকারিতা রয়েছে৷
প্রথমটি লিডারবোর্ডে নতুন ব্যবহারকারী এবং স্কোর যোগ করছে। এটি একটি পোস্ট অনুরোধ. ব্যবহারকারীরা 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 ফাংশন ব্যবহার করে, আমরা ব্যবহারকারীদের যোগ করতে পারি এবং সাজানো সেট "লিডারবোর্ড"-এ স্কোর করতে পারি। উদাহরণ:
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
উপলব্ধউপসংহার
এই পোস্টে, আমরা লিডারবোর্ডের জন্য একটি মোবাইল অ্যাপ্লিকেশন তৈরি করেছি যা সার্ভারহীন ফ্রেমওয়ার্কের মাধ্যমে AWS Lambda-তে চলমান পাইথন ফাংশন দ্বারা সমর্থিত। আমরা আপস্ট্যাশ রেডিসের মধ্যে আমাদের লিডারবোর্ড সংরক্ষণ করেছি।
Upstash দিয়ে অনেক কিছু করা যায়। Redis ব্যবহার করে একটি লিডারবোর্ড অ্যাপ্লিকেশন তৈরি করা তাদের মধ্যে একটি।
আমি আশা করি এই পোস্টটি আপনাকে সাহায্য করবে!
