دليلك العملي لدخول عالم الويب 3 (Web3) والتعامل مع المحافظ الإلكترونية باستخدام Ethers.js

أهلاً بك يا صديقي المبرمج. لو أنت مطور ويب (Web Developer) وبتسمع كتير الفترة دي عن مصطلحات زي اللامركزية (Decentralization) والـ بلوكشين (Blockchain)، أكيد جالك شعور الفضول إنك تربط موقعك بمحفظة المستخدم زي ميتا ماسك (MetaMask). الحقيقة إن الموضوع في الأول يبان معقد كأنك بتدخل متاهة، لكن صدقني، بمجرد ما تفهم الخيط، هتلاقي الموضوع ممتع جداً وأبسط مما تتخيل.

في المقال ده، هنشيل الغموض عن بناء بوابات الويب 3 (Web3 Gateways) وهنتعلم سوا إزاي نخلي موقعنا "يسمع" ويقرأ بيانات من شبكة الإيثيريوم (Ethereum) باستخدام مكتبة Ethers.js العظيمة.

إيه هي الـ Web3 وليه محتاجين Ethers.js؟

ببساطة، الويب 3 هو الجيل الجديد من الإنترنت اللي بيعتمد على تقنية البلوكشين عشان المستخدم هو اللي يمتلك بياناته وهويته. في الويب التقليدي، السيرفر بتاعك هو اللي بيمتلك الداتا، لكن هنا، المتصفح بيتعامل مباشرة مع العقد (Nodes) الموزعة.

مكتبة Ethers.js هي الأداة اللي بتعمل "ترجمة" بين كود الجافا سكريبت (JavaScript) بتاعك وبين لغة الآلة اللي بيفهمها البلوكشين. هي البديل الأسرع والأخف لمكتبة web3.js، وعشان كده هي الاختيار الأول لأي مطور محترف.

الخطوة الأولى: ربط محفظة MetaMask بموقعك

أول حاجة لازم تعملها هي إنك تخلي الموقع يطلب "إذن" من المستخدم عشان يربط محفظته. الميتا ماسك بتضيف كائن (Object) اسمه window.ethereum للمتصفح. ده هو البوابة السحرية بتاعتنا.

async function connectWallet() {
  if (window.ethereum) {
    try {
      const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
      console.log("تم الاتصال بالحساب:", accounts[0]);
    } catch (error) {
      console.error("المستخدم رفض الاتصال");
    }
  } else {
    alert("يا ريت تحمل محفظة MetaMask الأول!");
  }
}

الخطوة الثانية: قراءة البيانات من البلوكشين

بعد ما ربطنا المحفظة، عايزين نقرأ رصيد المستخدم أو أي معلومة من العقد الذكية (Smart Contracts). هنا بييجي دور ethers.providers.

import { ethers } from "ethers";

async function getBalance() {
  const provider = new ethers.providers.Web3Provider(window.ethereum);
  const signer = provider.getSigner();
  const address = await signer.getAddress();
  
  const balance = await provider.getBalance(address);
  console.log("رصيدك هو:", ethers.utils.formatEther(balance));
}

نصيحة من أخ لمبرمج زميل

عالم الويب 3 بيتحرك بسرعة البرق، ومجال العمل فيه مطلوب جداً ورواتبه مغرية، لكنه بيحتاج دقة عالية لأن أي خطأ في الكود بتاعك ممكن يكلف الناس فلوس حقيقية. نصيحتي ليك: ابدأ بمشاريع صغيرة، اتعلم إزاي تكتب عقد ذكية بسيطة باستخدام Solidity، ودايماً جرب الكود بتاعك على شبكات تجريبية (Testnets) قبل ما تطلعه للجمهور.

المجال ده لسه في بدايته، وأنت دلوقتي عندك الأساس اللي يخليك تبني بوابتك الخاصة. استمر في التجربة، وما تخافش من الأخطاء، فكل "إيرور" بتقابله هو درس بيعلمك حاجة جديدة.