Web3 ऐप्स में यूजर प्रेफरेंस स्टोर करना: Metamask-संचालित Next.js समाधान

DAO और DApps जैसे Web3 एप्लिकेशन अधिक से अधिक लोकप्रिय हो रहे हैं। Web3 के आधार के अनुसार, ये प्लेटफॉर्म अपने उपयोगकर्ताओं के लिए अधिक व्यक्तिगत और अनुकूलित अनुभव प्रदान करने वाले हैं जबकि उनकी पहचान दूसरों के लिए निजी या यहां तक कि स्वयं के लिए भी अज्ञात रखते हैं।

इस परियोजना में, हम पता लगाते हैं कि हम ऐसे मामलों के लिए उपयोगकर्ता अनुभव को कैसे बढ़ा सकते हैं।

वॉलेट के माध्यम से प्रमाणीकरण / पहचान जांच

कई एप्लिकेशन के लिए, Metamask जैसे ब्लॉकचेन वॉलेट का उपयोग ETH जैसी क्रिप्टो संपत्ति को प्रबंधित करने के लिए किया जाता है। ऐसे वॉलेट उपयोगकर्ताओं को विभिन्न चेन्स पर अकाउंट बनाने देते हैं। ये अकाउंट प्राइवेट कीज़ के साथ बनाए जाते हैं, हालांकि प्रत्येक अकाउंट का एक पब्लिक एड्रेस होता है जो उनका प्रतिनिधित्व करता है।

चूंकि पब्लिक कीज़ किसी के द्वारा दिखाई जा सकती हैं लेकिन इससे संबंधित ट्रांजैक्शन केवल मालिक द्वारा प्रबंधित किए जा सकते हैं। वॉलेट कनेक्शन ऐसे एप्लिकेशन के लिए एक ठोस प्रमाणीकरण तंत्र प्रदान करते हैं।

परियोजना

इस परियोजना में, हम Next.js का उपयोग करके एक प्रेफरेंस स्टोरेज सिस्टम लागू करेंगे, जहां उपयोगकर्ता उन्हें प्रदान किए गए इंटरफेस को अनुकूलित करते हैं। अर्थात्, जब भी वे उस साइट पर वापस आते हैं, तो वे UI को वैसा ही देखेंगे जैसा उन्होंने इरादा किया था।

और भी शक्तिशाली विचार कंपनियों के सब और क्रॉस-प्लेटफॉर्म पर यूजर इंटरफेस को सामान्यीकृत करना हो सकता है। इस तरह, जब भी कोई उपयोगकर्ता किसी ऐसी साइट पर नेविगेट करता है जो अन्य साइटों पर उनके द्वारा सेट की गई प्राथमिकताओं का समर्थन करती है, तो उन्हें एक समान अनुभव होगा।

또한, इस परियोजना को कस्टमाइज़ेशन के लिए पैरामीटर्स की संख्या बदलने के लिए संशोधित किया जा सकता है, जिससे आप इसे अपने मन में जो भी संरचना है, उसमें ढाल सकते हैं।

इस नमूना परियोजना के लिए, केवल 2 पैरामीटर्स हैं। अर्थात्:

• वेबसाइट की थीम
• उपयोगकर्ता के लिए अभिवादन नाम

शुरू करना

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 के माध्यम से हमसे संपर्क कर सकते हैं।