Web3 অ্যাপে ব্যবহারকারীর পছন্দ সংরক্ষণ: Metamask-চালিত Next.js সমাধান

DAO এবং DApp-এর মতো Web3 অ্যাপ্লিকেশনগুলি ngàyে দিনে জনপ্রিয় হচ্ছে। Web3-এর ধারণা অনুযায়ী, এই প্ল্যাটফর্মগুলি তাদের ব্যবহারকারীদের জন্য আরও ব্যক্তিগত এবং কাস্টমাইজড অভিজ্ঞতা প্রদান করার কথা, একই সাথে তাদের পরিচয় অন্যদের কাছে গোপন বা নিজেদের জন্যও অজানা রাখতে হবে।

এই প্রজেক্টে, আমরা এই ক্ষেত্রে ব্যবহারকারীর অভিজ্ঞতা কীভাবে উন্নত করা যায় তা অন্বেষণ করব।

ওয়ালেটের মাধ্যমে প্রমাণীকরণ / পরিচয় যাচাই

অনেক অ্যাপ্লিকেশনের জন্য, Metamask-এর মতো ব্লকচেন ওয়ালেট ETH-এর মতো ক্রিপ্টো সম্পদ পরিচালনা করতে ব্যবহৃত হয়। এই ওয়ালেটগুলো ব্যবহারকারীদের বিভিন্ন চেইনে অ্যাকাউন্ট তৈরি করতে দেয়। এই অ্যাকাউন্টগুলো প্রাইভেট কী দিয়ে তৈরি হয়, তবে প্রতিটি অ্যাকাউন্টের একটি পাবলিক ঠিকানা থাকে যা তাদের প্রতিনিধিত্ব করে।

যেহেতু পাবলিক কী কেউই দেখাতে পারে কিন্তু এর সাথে সম্পর্কিত ট্রানজ্যাকশন শুধু মালিক ही পরিচালনা করতে পারে। ওয়ালেট কানেকশন এমন অ্যাপ্লিকেশনগুলির জন্য একটি ठोस প্রমাণীকরণ مکانیজম প্রদান করে।

প্রজেক্ট

এই প্রজেক্টে, আমরা Next.js ব্যবহার করে একটি পছন্দ সংরক্ষণ সিস্টেম বাস্তবায়ন করব, যেখানে ব্যবহারকারীরা তাদের প্রদত্ত ইন্টারফেস কাস্টমাইজ করবে। অর্থাৎ, যতবার তারা সাইটে ফিরে আসবে, তারা UI-কে ঠিক যেমন চেয়েছিল তেমনই দেখবে।

একadon আরও শক্তিশালী ধারণা হতে পারে কোম্পানিগুলির সাব এবং ক্রস-প্ল্যাটফর্ম জুড়ে ব্যবহারকারী ইন্টারফেস нормаলাইজ করা। এইভাবে, যখন কোনো ব্যবহারকারী অন্য সাইটে সেট করা পছন্দ সমর্থনকারী কোনো সাইটে নেভিগেট করবে, তারা একই অভিজ্ঞতা পাবে।

এছাড়া, এই প্রজেক্টটি কাস্টমাইজেশনের প্যারামিটার সংখ্যা পরিবর্তন করে আপনার মনে থাকা যেকোনো কাঠামোতে রূপান্তরিত করা যায়।

এই স্যাম্পল প্রজেক্টের জন্য শুধু ২টি প্যারামিটার আছে। যথা:

• ওয়েবসাইটের থিম
• ব্যবহারকারীর জন্য অভিবাদন নাম

শুরু করুন

Upstash Redis এনভায়রনমেন্ট ভেরিয়েবল কনফিগার করুন

• Upstash-এ একটি ফ্রি Redis ডাটাবেস তৈরি করুন
• .env.local.example ফাইলটি .env.local-এ কপি করুন (যেটি Git দ্বারা উপেক্ষা করা হবে):
• UPSTASH_REDIS_REST_URL এবং UPSTASH_REDIS_REST_TOKEN Upstash Console-এ ডাটাবেস ডিটেইলস পেজে পাওয়া যাবে।

নির্ভরতা

নির্ভরতা ইনস্টল করুন: npm i @upstash/redis @metamask/detect-provider @mui/material @emotion/react @emotion/styled

api/store.js ফাইল তৈরি করুন

Redis SDK কনফিগার করুন এবং হ্যান্ডলার ফাংশন এক্সপোর্ট করুন।

import { Redis } from "@upstash/redis" const redis = Redis.fromEnv() export default async function handler(req, res) { const accountID = await JSON.parse(req.body).accountID const body = req.body const setResult = await redis.set(accountID, body); res.status(200).json({ result: setResult }) }

api/[accountAddress].js ফাইল তৈরি করুন

একইভাবে, Redis SDK কনফিগার করুন এবং হ্যান্ডলার এক্সপোর্ট করুন।

import { Redis } from "@upstash/redis" const redis = Redis.fromEnv() export default async function handler(req, res) { const accountID = req.query.accountAddress const getResult = await redis.get(accountID) res.status(200).json({ result: getResult }) }

index.js ফাইল কনফিগার করুন

প্রজেক্টের জন্য আপনার ভেরিয়েবল সেট করুন

const [accountAddress, setAccountAddress] = useState(null) const [themePreference, setThemePreference] = useState("light") const [greetingMessage, setGreetingMessage] = useState("Anonymous Person") const [userSettings, setUserSettings] = useState(null) // চেক করুন কানেকশন ইতিমধ্যে স্থাপিত আছে কিনা। যদি থাকে, ডেটা ফেচ করুন। useEffect(() => { checkConnection() getPreferences() }, [accountAddress])

Metamask সংযোগ করা

async function connect() { const provider = await detectEthereumProvider() console.log("provider:", provider) if (provider) { console.log('Ethereum successfully detected!') provider.request({ method: "eth_requestAccounts" }).then((accounts) => { if (!accountAddress) { setAccountAddress(accounts[0]) } }).catch((err) => console.log(err)) console.log("window.ethereum:", window.ethereum) getPreferences() } else { alert('Please install MetaMask!') } }

রিফ্রেশ বা কিছুক্ষণ পর নেভিগেট করলে কানেকশন চেক করা

async function checkConnection() { const provider = await detectEthereumProvider() if (provider) { provider.request({ method: 'eth_accounts' }).then(accounts => { setAccountAddress(accounts[0]) }).catch(console.log) } else { console.log("Not connected, window.ethereum not found") } }

পছন্দ সেট করতে

async function setPreferences(themePreference, greetingMessage) { if (accountAddress) { const res = await fetch(`/api/store`, { method: "POST", body: JSON.stringify({ accountID: accountAddress, themePreference: themePreference, greetingMessage: greetingMessage, }) }) const data = await res.json() } else { alert("No account address detected") } }

পছন্দ পেতে

async function getPreferences(e) { if (accountAddress) { console.log("Fetching user preferences...") const res = await fetch(`/api/${accountAddress}`, { method: "GET" }) const data = await res.json() setUserSettings(data.result) if (data.result) { setThemePreference(data.result.themePreference) setGreetingMessage(data.result.greetingMessage) } } else { console.log("No account connected yet!") } }

ভেরিয়েবলগুলির স্টেট পরিবর্তন করুন

নিচের ফাংশনগুলিকে ইনপुट ফিল্ড/বাটন ইত্যাদির সাথে বাইন্ড করুন।

async function handleDarkMode(e) { console.log("themePreference:", themePreference) const newPreference = themePreference == "light" ? "dark" : "light" setThemePreference(newPreference) await setPreferences(newPreference, greetingMessage) await getPreferences() } async function takeGreetingMessage(e) { // এন্টার/রিটার্ন কী দিয়ে সাবমিট if (e.keyCode == 13) { const message = e.target.value setGreetingMessage(message) console.log(message) await setPreferences(themePreference, message) await getPreferences() e.target.value = "" } }

উপরোক্ত ফাংশনগুলো ব্যবহার করে একটি সিম্পল UI তৈরি করুন

নিশ্চিত করুন যে আপনি প্রাসঙ্গিক Material-UI ডিপেন্ডেন্সি ইম্পোর্ট করেছেন।

return ( 
 
Web3 Preferences Holder
 Connect Metamask 
 Lets you keep user preferences on cross-websites 
 
 
For example, take a greeter message from user.
  
 
  Switch Dark Mode  
Sample Component/Page:
  
 )

components ডিরেক্টরিতে sampleComponent.jsx তৈরি করুন

এটি আপনার ওয়েব ইন্টারফেস, অ্যাপ্লিকেশন ইত্যাদিকে প্রতিনিধিত্ব করে প্রধান কম্পোনেন্ট। এই কম্পোনেন্টটি কীভাবে সিস্টেমটি কাজ করে এবং মূল লক্ষ্যটি প্রদান করে তা ভিজ্যুয়ালাইজ করবে। এখানে, প্যারামিটারগুলো যেভাবে চান তেভাবে পার্স করুন এবং আপনার স্যাম্পল ইন্টারফেস তৈরি করুন।

এই উদাহরণে, প্রজেক্টটি নিচের মতো কনফিগার করা হয়েছে:

import React from "react"; import { useState } from 'react' import { ThemeProvider, createTheme } from '@mui/material/styles' import { orange, grey } from '@mui/material/colors' const lightTheme = createTheme({ palette: { primary: { main: grey[400], }, } }) const darkTheme = createTheme({ palette: { primary: { main: orange[400], }, } }) export default function Showcase(parameters) { const userSettings = parameters.userSettings const [theme, setTheme] = useState("light") const [greetingMessage, setGreetingMessage] = useState("Anonymous Person") const items = [] if (userSettings) { const obj = userSettings[0] for (const key in userSettings) { items.push(
 {key}: {userSettings[key]} 
) } if (userSettings["themePreference"] != theme) { setTheme(userSettings["themePreference"] == "light" ? "light" : "dark") } if (!greetingMessage || userSettings["greetingMessage"] != greetingMessage) { if (userSettings["greetingMessage"]) { setGreetingMessage(userSettings["greetingMessage"]) } else { setGreetingMessage("not the same message") } } } return ( 
 
  
Hi, {greetingMessage}!
 
User and their preferences:
 {items}  
 
 ); }

ওয়ার্কফ্লো

ব্যবহারকারী এখনও Metamask-এর মাধ্যমে সংযুক্ত হয়নি। ডিফল্ট টেমপ্লেট।

ব্যবহারকারী প্রথমবার Metamask-এর মাধ্যমে সংযুক্ত হল। ডিফল্ট টেমপ্লেট।

• ব্যবহারকারী যে নামটি প্ল্যাটফর্মে অভিবাদনের সময় দেখতে চান সেটি লিখে।
• ব্যবহারকারী থিমের মধ্যে বেছে নেন, যথা: লাইট এবং ডার্ক।

ব্যবহারকারীর পছন্দ সেট আপ হয়েছে। এখন থেকে, পছন্দ ইন্টারফেস সমর্থনকারী যেকোনো প্ল্যাটফর্মে একই ইন্টারফেস দেখানো যাবে। ব্যবহারকারী-কাস্টমাইজড টেমপ্লেট।

কম্পোনেন্টটি টেক্সট ফরম্যাটে ব্যবহারকারীর সেট করা পছন্দগুলো দেখায়, আপনি চাইলে যেভাবে পার্স করতে পারেন।

আপনি এই সিম্পল উদাহরণে দেখতে পাচ্ছেন যে, আপনি ব্যবহারকারীর কাছে দেখানোর যেকোনো কম্পোনেন্টকে প্যারামিটারাইজ করতে পারেন। আপনি ডিজাইন উন্নত করে এবং প্যারামিটার সংখ্যা বাড়িয়ে এই প্রজেক্টে যোগ করতে পারেন; তবে মৌলিক লজিক একই থাকবে।

শেষ কথা

প্রজেক্টের ডেমো দেখতে, এখানে চেক করুন।

সম্পূর্ণ প্রজেক্ট দেখতে, প্রজেক্টের Github Repo-এ যান।

সেখানে, আপনি Vercel ডিপ্লয়মেন্টের জন্য একটি কুইক ডিপ্লো বাটন পাবেন; যা আপনাকে দ্রুত প্রজেক্ট ডিপ্লয় করতে দেবে, স্বয়ংক্রিয়ভাবে Upstash Redis ইন্টিগ্রেশন তৈরি করে।

আমরা আপনার আইডিয়া এবং মতামত শুনতে আগ্রহী। আপনি twitter বা discord-এর মাধ্যমে আমাদের সাথে যোগাযোগ করতে পারেন।