Web3 & DApp Development Fundamentals · درس

معالجة المعاملات والأحداث

تعلّموا إرسال المعاملات من تطبيق DApp، ومعالجة تأكيداتها، والاستماع إلى أحداث العقود الذكية لتحديث واجهة المستخدم.

الدرس 3 من 311 خطوة

معالجة المعاملات والأحداث درس مجاني في Web3 & DApp Development Fundamentals على CoddyKit. هذا هو الدرس 3 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Web3 & DApp Development Fundamentals، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Web3 & DApp Development Fundamentals 3 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Making DApps Dynamic

So far, you've learned how to connect your DApp to the blockchain and read data. But what if you want to change data or perform actions?

This lesson teaches you how to send transactions from your DApp to modify blockchain state and how to listen for real-time updates using smart contract events.

What is a Blockchain Transaction?

A blockchain transaction is a signed message that changes the state of the blockchain. Every transaction costs a small fee called gas, paid in Ether (ETH).

Common DApp transactions include:

Sending Ether to another address.
Calling a smart contract function that writes or modifies data.
Deploying a new smart contract.

Sending Transactions from Your DApp

To send a transaction that calls a smart contract function, your DApp needs to:

Connect to a blockchain provider (e.g., MetaMask).
Get a signer (the connected user's wallet).
Call the desired contract function, passing any required parameters.

The user's wallet will then prompt them to confirm and sign the transaction.

Calling a Write Function Example

Here's how you might call a simple setValue function on a smart contract using Ethers.js. Remember, contract refers to your instantiated contract object.

// Assuming 'contract' is an Ethers.js Contract instance
// and 'signer' is obtained from the connected wallet.

async function updateValue(newValue) {
  try {
    const tx = await contract.connect(signer).setValue(newValue);
    console.log("Transaction sent: ", tx.hash);
    // Wait for the transaction to be mined
    await tx.wait();
    console.log("Transaction confirmed!");
  } catch (error) {
    console.error("Error sending transaction:", error);
  }
}

Waiting for Transaction Confirmation

After sending a transaction, it's not immediately processed. It goes into a transaction pool and waits to be included in a block by a miner or validator.

The await tx.wait() call is crucial. It pauses your DApp's execution until the transaction is mined and confirmed on the blockchain, ensuring your UI reflects the latest state.

Understanding Transaction Receipts

When tx.wait() resolves, it returns a transaction receipt. This receipt contains important information about the transaction's outcome:

blockHash and blockNumber: Where it was included.
gasUsed: The actual gas consumed.
status: Indicates if the transaction was successful (1) or failed (0).

Always check the status to ensure the contract call executed as expected!

Introducing Smart Contract Events

Smart contract events are a powerful mechanism for your contracts to 'broadcast' information to external applications (like your DApp) when something significant happens.

Think of them as logs or notifications that DApps can listen to. They are a cost-effective way to communicate data from the blockchain without storing it directly on-chain.

Emitting Events in Solidity

In Solidity, you first define an event with its parameters, then use the emit keyword to trigger it within a function. Here's a simple example:

pragma solidity ^0.8.0;

contract MyContract {
  uint public value;

  // Define an event
  event ValueChanged(address indexed user, uint oldValue, uint newValue);

  function setValue(uint _newValue) public {
    uint _oldValue = value;
    value = _newValue;
    // Emit the event
    emit ValueChanged(msg.sender, _oldValue, _newValue);
  }
}

Listening for Events in Your DApp

Your DApp can subscribe to specific events emitted by a contract. When an event occurs, your DApp receives the event data, allowing you to update the UI or trigger other actions in real-time.

This avoids constant 'polling' (repeatedly asking the blockchain for updates), making your DApp more efficient.

// Assuming 'contract' is an Ethers.js Contract instance

contract.on("ValueChanged", (user, oldValue, newValue, event) => {
  console.log(`Value changed by ${user}`);
  console.log(`From ${oldValue} to ${newValue}`);
  // Update your DApp's UI here, e.g., display the new value
  updateDisplay(newValue);
});

console.log("Listening for ValueChanged events...");

Quick Check: Tx & Events

When calling a smart contract function that modifies state from your DApp, what is the primary purpose of using await tx.wait()?

أجب عليها في الدرس التفاعلي

Recap & Next Steps

You've learned how to make your DApps truly interactive!

You can now send transactions to modify blockchain state.
You know how to wait for confirmation and handle transaction receipts.
You understand how smart contract events provide real-time updates to your DApp.

These skills are fundamental for building dynamic and responsive decentralized applications. Keep practicing to master DApp interaction!

البدء مجانًا

تعلم Web3 & DApp Development Fundamentals مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 29
الدروس: 105

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «معالجة المعاملات والأحداث» مجاني؟

نعم — نص درس «معالجة المعاملات والأحداث» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Web3 & DApp Development Fundamentals، انتقل إلى CoddyKit PRO. تتضمن دورة Web3 & DApp Development Fundamentals 3 دروس في المجموع.

ماذا ستتعلم في «معالجة المعاملات والأحداث»؟

تعلّموا إرسال المعاملات من تطبيق DApp، ومعالجة تأكيداتها، والاستماع إلى أحداث العقود الذكية لتحديث واجهة المستخدم. تتمرن على Web3 & DApp Development Fundamentals مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Web3 & DApp Development Fundamentals؟

لا تُشترط خبرة سابقة. Web3 & DApp Development Fundamentals على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 3.

كم من الوقت يستغرق درس «معالجة المعاملات والأحداث»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Web3 & DApp Development Fundamentals هذا؟

نعم. كل درس في Web3 & DApp Development Fundamentals يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

أطر React وWeb3
دمج المحافظ
معالجة المعاملات والأحداث

← العودة إلى Web3 & DApp Development Fundamentals