এই পোস্টে, আমরা React Native, Serverless framework এবং Upstash ব্যবহার করে একটি মোবাইল অ্যাপ্লিকেশন তৈরি করব লিডারবোর্ড দেখতে এবং আপডেট করার জন্য।
আমরা React Native ব্যবহার করব মোবাইল অ্যাপ্লিকেশন ডেভেলপ করার জন্য যেটি Serverless framework দ্বারা বেক করা থাকবে, যেটি Python ফাংশনগুলোর সাথে AWS Lambda-এ রান করে।
১ - Upstash Redis ব্যবহার
একটি সাধারণ লিডারবোর্ড অ্যাপে, ইউজার ইনফরমেশন এবং ইউজাররা রক্ষা করতে হবে। যেহেতু এই সব ডেটা স্কোর অনুযায়ী সর্টেড থাকতে হবে, Redis ব্যবহার করা সেরা সম্ভাব্য সমাধানগুলির একটি।
"Sorted Set", যা Redis দ্বারা সাপোর্ট করা হয়, একটি সর্টেড ডেটা টাইপ যা ব্যবহারকারীদের স্টোরিং, অ্যাডিং, রিমুভিং এবং রেঞ্জ অনুসারে কোয়েরি করার অপারেশন খুব দ্রুত করতে দেয়।
Sorted set ঠিক সেই জিনিস যা একটি সর্টেড লিডারবোর্ড স্টোর, আপডেট এবং ডিসপ্লে করার জন্য দরকার।
১.১ - Upstash-এ শুরু করা
Upstash রেডিসের জন্য একটি সার্ভারলেস ডেটাবেস প্রদান করে। রেডিস কীভাবে কাজ করে তার জন্য আরও বিস্তারিত জানতে Redis ডকুমেন্টেশন চেক করুন।
এখানে কিছু সুবিধা যা আমাদের Upstash Redis ব্যবহার করতে প্রভাবিত করেছে:
পে-অ্যাজ-ইউ-গো প্রাইসিং সিস্টেম, Pricing
স্টোরিং এবং অপারেশনের জন্য ফ্রি টিয়ার
খুব সহজ ইমপ্লিমেন্টেশন
বিস্তারিত কনফিগারেশনের প্রয়োজন নেই
আমাদের কেসে, প্রথম ধাপ হল Console-এ Upstash অ্যাকাউন্ট তৈরি করা। দ্বিতীয়, আপনার ইচ্ছামতো Upstash ডেটাবেস তৈরি করুন। তারপর, এটি ব্যবহার করার জন্য প্রস্তুত!
익숙해지기 위해, আমরা Upstash কনসোলে প্রদত্ত CLI-তে কিছু অপারেশন করতে পারি।
প্রথমে, আমরা একটি নতুন ইউজারকে স্কোরসহ Sorted set-এ যোগ করে আমাদের ডেটাবেস শুরু করতে পারি, যেটির নাম আমরা Leaderboard সেট করেছি।
ZADD Leaderboard <Score> <User>তারপর আমরা সব ইউজার ইনফরমেশন স্কোরসহ দেখাতে পারি।
ZRANGE Leaderboard 0 -1 WITHSCORES
আমরা এই অপারেশনগুলো AWS Lambda ফাংশনসে Serverless Framework-এ রান করে রেডিসকে অ্যাপের ব্যাকএন্ডের সাথে কানেক্ট করতে পারি।
২ - Serverless Framework-এ ফাংশন তৈরি
Serverless একটি ফ্রেমওয়ার্ক যা আমাদের ক্লাউড প্রোভাইডাররা যেন AWS, Azure, Google Cloud ইত্যাদির সার্ভারলেস ফাংশনসহ কাজ করতে দেয়। এটি ইউজার সাইড থেকে সার্ভারলেস ফাংশন ইমপ্লিমেন্ট এবং ম্যানেজ করার জন্য একটি শক্তিশালী টুল।
AWS-এ Serverless Framework ইনস্টল এবং কনফিগার করা শুরু করুন। Serverless quick start-এ ভিজিট করুন এবং ধাপগুলো ফলো করুন।
ইনস্টলেশনের পর, আমাদের 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 ফাইলে ডিফাইন করা অনুযায়ী।
প্রথমে, আমাদের রেডিস ইমপোর্ট এবং কনফিগার করতে হবে, যা আমাদের একমাত্র ডিপেন্ডেন্সি। Serverless framework-এ রেডিস ডিপেন্ডেন্সি যোগ করার জন্য, আমাদের "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==4.0.2এখন আমরা handler.py-এ আমাদের Upstash রেডিস কনফিগার করতে পারি।
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)রেডিস কনফিগারেশন শেষ হলে, আমরা আমাদের ফাংশনগুলো প্রস্তুত করতে পারি যেগুলো ইউজাররা কল করবে।
আমাদের দুটি ফাংশনালিটি আছে।
প্রথমটি হল লিডারবোর্ডে নতুন ইউজার এবং স্কোর যোগ করা। এটি একটি 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আমরা event প্যারামিটার থেকে স্কোর এবং ইউজার ইনফরমেশন পার্স করতে পারি, যা AWS Lambda দ্বারা প্রদান করা হয়।
রেডিসের zadd ফাংশন ব্যবহার করে আমরা ইউজার এবং স্কোর "Leaderboard" নামক Sorted set-এ যোগ করতে পারি। উদাহরণ:
Request body: {"score": 15,"firstname": "Jack","lastname": "Thang"} Response body: {"message": "Score added successfully!"}আমাদের দ্বিতীয় ফাংশন হল getLeaderboard। এই ফাংশন ইউজারদের GET রিকোয়েস্ট একসেপ্ট করে এবং রেডিস থেকে পড়ে লিডারবোর্ড ডিসেন্ডিং অর্ডারে রিটার্ন করে।
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ডিপ্লয় করার সময় Service Information দেখবেন। এন্ডপয়েন্টগুলো কোথাও সেভ করে রাখুন পরে ব্যবহার করার জন্য।
এন্ডপয়েন্ট:
POST - https://f571j8y8s1.execute-api.us-east-1.amazonaws.com/add GET - https://f571j8y8s1.execute-api.us-east-1.amazonaws.com/getLeaderboardএখন সার্ভারলেস ব্যাকএন্ড প্রস্তুত।
৩ - React Native-এ মোবাইল অ্যাপ ডেভেলপমেন্ট
React Native একটি ফ্রেমওয়ার্ক যা আমাদের Javascript-এ কোড লিখে একাধিক প্ল্যাটফর্মের জন্য মোবাইল অ্যাপ্লিকেশন ডেভেলপ করতে দেয়।
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" কি এবং 그에 ứng সংশ্লিষ্ট ভ্যালু থাকে যা আমরা ইউজার থেকে পাই।
যদি ব্যাকএন্ড থেকে পাঠানো রেসপন্সে "Score added successfully!" থাকে, তাহলে এর মানে আমরা যে রিকোয়েস্টটি পাঠিয়েছি সেটি রিসিভ হয়েছে এবং স্কোর সফলভাবে যোগ হয়েছে।
এখন, আমরা একটি খুব সিম্পল লিডারবোর্ড স্ক্রিন ডিজাইন করব। ইউজার "Go to Leaderboard" বাটনে ক্লিক করে লিডারবোর্ড স্ক্রিনে নেভিগেট করতে পারবে।
লিডারবোর্ড স্ক্রিনটি এখানে দেখানো হলো।
এই স্ক্রিনে সবচেয়ে গুরুত্বপূর্ণ জিনিস হল নিচের এন্ডপয়েন্টে 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)); }এই সিম্পল অ্যাপ্লিকেশনের সম্পূর্ণ সোর্স কোড এখানে উপলব্ধ।
উপসংহার
এই পোস্টে, আমরা একটি মোবাইল অ্যাপ্লিকেশন ডেভেলপ করেছি লিডারবোর্ডের জন্য যা Python ফাংশন দ্বারা বেক করা যায় AWS Lambda-এ Serverless Framework-এর মাধ্যমে। আমরা আমাদের লিডারবোর্ড Upstash রেডিসে স্টোর করেছি।
Upstash-এ অনেক কিছু করা যায়। রেডিস ব্যবহার করে একটি লিডারবোর্ড অ্যাপ্লিকেশন বিল্ড করা সেগুলোর মাত্র একটি।
আশা করি এই পোস্ট আপনাদের সবার সাহায্য করবে!
