কিভাবে ব্লকচেইন অ্যাপ তৈরি করবেন - Ethereum Todo List 2019

লিখেছেন মোঃ সাইফুল ইসলাম · জুলাই 1, 2022

আরে সবাই, এটা ড্যাপ ইউনিভার্সিটির সাইফুল ইসলাম !

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

উপরের 90 মিনিটের ভিডিওতে আপনি আমাকে সম্পূর্ণ ব্লকচেইন অ্যাপ্লিকেশন তৈরি করতে দেখতে পারেন। আমি এই টিউটোরিয়ালে ধাপে ধাপে নির্দেশাবলীর মাধ্যমেও আপনাকে গাইড করব। আমরা আমাদের dApp তৈরি করা শুরু করার আগে, আমি প্রথমে ব্যাখ্যা করি কিভাবে একটি ব্লকচেইন অ্যাপ্লিকেশন কাজ করে। আপনি যদি প্রোগ্রামিং শুরু করতে আগ্রহী হন, তাহলে আপনি টিউটোরিয়ালের পরবর্তী অংশে যেতে পারেন। 😀

সুচিপত্র

ভূমিকা

• একটি ব্লকচেইন অ্যাপ্লিকেশন কিভাবে কাজ করে?
• নির্ভরতা ইনস্টল করা

টিউটোরিয়াল পদক্ষেপ

• প্রকল্প সেটআপ
• তালিকা টাস্ক
• টাস্ক তৈরি করুন
• সম্পূর্ণ কাজ

একটি ব্লকচেইন অ্যাপ্লিকেশন কিভাবে কাজ করে?

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

একটি ব্লকচেইন অ্যাপ্লিকেশন কীভাবে কাজ করে তা বোঝার জন্য, প্রথমে একটি করণীয় তালিকা একটি ওয়েব অ্যাপ্লিকেশন হিসাবে কীভাবে কাজ করতে পারে তা দেখা যাক। করণীয় তালিকা অ্যাক্সেস করতে, আপনি একটি ওয়েব ব্রাউজার ব্যবহার করবেন যা ইন্টারনেটের মাধ্যমে একটি ওয়েব সার্ভারের সাথে যোগাযোগ করবে। সার্ভারে করণীয় তালিকার সমস্ত কোড এবং ডেটা থাকে।

আপনি সার্ভারে যা পাবেন তার একটি তালিকা এখানে রয়েছে:

• HTML, CSS, এবং JavaScript-এ ক্লায়েন্ট সাইড ফাইল
• ব্যাক এন্ড কোড অ্যাপ্লিকেশনের ব্যবসায়িক যুক্তির জন্য দায়ী
• ডাটাবেস যা করণীয় তালিকায় কাজ সংরক্ষণ করে

এই সার্ভারটি একটি কেন্দ্রীভূত সত্তা যা অ্যাপ্লিকেশনের প্রতিটি দিকের উপর সম্পূর্ণ নিয়ন্ত্রণ করে। সার্ভারে সম্পূর্ণ অ্যাক্সেস সহ যে কেউ কোডের যেকোনো অংশ বা ডেটা যেকোনো সময় পরিবর্তন করতে পারে। একটি ব্লকচেইন অ্যাপ্লিকেশন বেশ ভিন্নভাবে কাজ করে। টোডো তালিকার সমস্ত কোড এবং ডেটা একটি কেন্দ্রীভূত সার্ভারে থাকে না। পরিবর্তে, এটি ব্লকচেইন জুড়ে বিতরণ করা হয়। সমস্ত কোড এবং ডেটা ব্লকচেইনে শেয়ার করা এবং অপরিবর্তনীয়।

এটি ব্যাখ্যা করার জন্য, আমাদের ব্লকচেইন-ভিত্তিক টোডো তালিকা কীভাবে কাজ করবে তা পরীক্ষা করা যাক।

ব্লকচেইন টোডো তালিকা অ্যাক্সেস করতে, আমরা ক্লায়েন্ট সাইড অ্যাপ্লিকেশনের সাথে কথা বলার জন্য একটি ওয়েব ব্রাউজার ব্যবহার করব, যা HTML, CSS এবং JavaScript-এ লেখা হবে। ব্যাক এন্ড ওয়েব সার্ভারের সাথে কথা বলার পরিবর্তে, ক্লায়েন্ট সাইড অ্যাপ্লিকেশন সরাসরি ব্লকচেইনের সাথে কথা বলবে।

একটি ব্লকচেইন কি?

একটি ব্লকচেইন হল কম্পিউটারের একটি পিয়ার-টু-পিয়ার নেটওয়ার্ক, বা নোড, যা একে অপরের সাথে কথা বলে। এটি একটি বিতরণ করা নেটওয়ার্ক যেখানে সমস্ত অংশগ্রহণকারী নেটওয়ার্ক চালানোর দায়িত্ব ভাগ করে নেয়। প্রতিটি নেটওয়ার্ক অংশগ্রহণকারী কোডের একটি অনুলিপি এবং ব্লকচেইনের ডেটা বজায় রাখে। এই সমস্ত ডেটা "ব্লক" নামক রেকর্ডের বান্ডিলে রয়েছে যা ব্লকচেইন তৈরি করতে "একসাথে বেঁধে" থাকে। নেটওয়ার্কের সমস্ত নোড নিশ্চিত করে যে এই ডেটা সুরক্ষিত এবং অপরিবর্তনীয়, একটি কেন্দ্রীভূত অ্যাপ্লিকেশনের বিপরীতে যেখানে কোড এবং ডেটা যেকোনো সময় পরিবর্তন করা যেতে পারে। এটাই ব্লকচেইনকে এত শক্তিশালী করে তোলে! কারণ ব্লকচেইন ডেটা সংরক্ষণের জন্য দায়ী, এটি মূলত একটি ডাটাবেস। এবং যেহেতু এটি কম্পিউটারের একটি নেটওয়ার্ক যা একে অপরের সাথে কথা বলে, এটি একটি নেটওয়ার্ক। আপনি এটিকে একটি নেটওয়ার্ক এবং একটি ডাটাবেস হিসাবে ভাবতে পারেন।

প্রথাগত ওয়েব অ্যাপ্লিকেশন এবং ব্লকচেইন অ্যাপ্লিকেশনগুলির মধ্যে আমার আরেকটি মৌলিক পার্থক্যও তুলে ধরা উচিত: অ্যাপ্লিকেশনের ব্যবহারকারী হওয়ার পরিবর্তে, আপনি ব্লকহেন নেটওয়ার্কের একজন ব্যবহারকারী। অ্যাপ্লিকেশন কোনো ব্যবহারকারীর ডেটা পরিচালনা করে না। ব্লকচেইন এর দায়!

একটি স্মার্ট চুক্তি কি

ব্লকচেইনের সমস্ত কোড স্মার্ট কন্ট্রাক্টের মধ্যে থাকে, যা ব্লকচেইনে চলে এমন প্রোগ্রাম। তারা ব্লকচেইন অ্যাপ্লিকেশনের বিল্ডিং ব্লক। আমাদের করণীয় তালিকাকে শক্তিশালী করতে আমরা এই টিউটোরিয়ালে একটি স্মার্ট চুক্তি লিখব। ব্লকচেইন থেকে আমাদের করণীয় তালিকার সমস্ত কাজগুলি আনা, নতুন কাজ যোগ করা এবং কাজগুলি সম্পূর্ণ করার জন্য এটি দায়ী।

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

ব্লকচেইন টোডো তালিকা কীভাবে কাজ করে

আসুন আমরা এই টিউটোরিয়ালে যে অ্যাপ্লিকেশনটি তৈরি করব তা কীভাবে কাজ করবে তা বোঝার জন্য সংক্ষেপে দেখি। আমরা টোডো তালিকার জন্য একটি ক্লায়েন্ট সাইড অ্যাপ্লিকেশন তৈরি করব যা সরাসরি ব্লকচেইনের সাথে কথা বলবে। আমরা এই টিউটোরিয়ালে ইথেরিয়াম ব্লকচেইন ব্যবহার করব, যা আমরা আমাদের ক্লায়েন্ট সাইড অ্যাপ্লিকেশনটিকে একটি একক ইথেরিয়াম নোডে সংযুক্ত করে অ্যাক্সেস করতে পারি। আমরা সলিডিটিতে একটি স্মার্ট চুক্তি লিখব যা করণীয় তালিকাকে ক্ষমতা দেয় এবং আমরা এটিকে ইথেরিয়াম ব্লকচেইনে স্থাপন করব। টোডো তালিকা অ্যাপ্লিকেশনের সাথে ইন্টারঅ্যাক্ট করার জন্য আমরা একটি Ethereum ওয়ালেট ব্যবহার করে আমাদের ব্যক্তিগত অ্যাকাউন্টের সাথে ব্লকচেইন নেটওয়ার্কের সাথে সংযোগ করব।

অ্যাপ্লিকেশন প্রিভিউ

আমরা এই টিউটোরিয়ালে তৈরি করব এমন করণীয় তালিকা অ্যাপ্লিকেশনটির একটি পূর্বরূপ এখানে রয়েছে। আমরা করণীয় তালিকার সমস্ত কাজ তালিকাভুক্ত করতে, নতুন তৈরি করতে এবং সেগুলি সম্পূর্ণ করতে সক্ষম হব।

নির্ভরতা ইনস্টল করা

এখন আমাদের প্রজেক্ট তৈরি করার জন্য প্রয়োজনীয় সমস্ত নির্ভরতা ইনস্টল করা যাক। প্রথমে, আমরা স্থানীয়ভাবে অ্যাপ্লিকেশনটি বিকাশের জন্য একজন ব্যক্তির ব্লকচেইন সেট আপ করব।

গণচেন ব্যক্তিগত ব্লকচেইন

নির্ভরতা হল একটি ব্যক্তিগত ব্লকচেইন, যা একটি স্থানীয় উন্নয়ন ব্লকচেইন যা একটি পাবলিক ব্লকচেইনের আচরণ অনুকরণ করতে ব্যবহার করা যেতে পারে। আমি Ethereum বিকাশের জন্য আপনার ব্যক্তিগত ব্লকচেইন হিসাবে Ganache ব্যবহার করার পরামর্শ দিই। এটি আপনাকে স্মার্ট চুক্তি স্থাপন, অ্যাপ্লিকেশন বিকাশ এবং পরীক্ষা চালানোর অনুমতি দেবে। এটি উইন্ডোজ, ম্যাক এবং লিনাক্সে একটি ডেস্কটপ অ্যাপ্লিকেশন এবং একটি কমান্ড লাইন টুল হিসাবে উপলব্ধ!

আমি এই টিউটোরিয়ালে আপনাকে ডেস্কটপ অ্যাপ্লিকেশন সেট আপ করার মাধ্যমে নিয়ে যাব। আপনি এখানে আপনার অপারেটিং সিস্টেমের জন্য সর্বশেষ প্রকাশ পেতে পারেন। একবার আপনি সংরক্ষণাগারভুক্ত প্যাকেজটি ডাউনলোড করার পরে, ইনস্টলারটি বের করুন এবং সেটআপ পদক্ষেপগুলি চালান। একবার আপনি এটি ইনস্টল করার পরে, আপনি যখনই এটি খুলবেন তখন আপনার একটি এই স্ক্রীনটি দেখতে হবে:

হ্যাঁ! 🎉 এখন আপনার একটি ব্যক্তিগত ব্লকচেইন নেটওয়ার্ক চলছে! আপনি নেটওয়ার্কের সাথে সংযুক্ত অ্যাকাউন্টগুলির একটি তালিকা সহ সার্ভার Ganache চালু আছে সে সম্পর্কে কিছু বিবরণ দেখতে পারেন। প্রতিটি অ্যাকাউন্টে 100 ইথার জমা হয়েছে। এটি একটি বিশাল সময় সাশ্রয়কারী! আপনি যদি স্ক্র্যাচ থেকে নিজের ব্যক্তিগত ব্লকচেইন নেটওয়ার্ক তৈরি করতে চান, বা একটি পরীক্ষামূলক নেটওয়ার্কে আপনার অ্যাপ্লিকেশন বিকাশ করতে চান তবে আপনাকে 10টি অ্যাকাউন্ট ম্যানুয়ালি তৈরি করতে হবে এবং প্রতিটি অ্যাকাউন্ট ইথার দিয়ে ক্রেডিট করতে হবে। ধন্যবাদ, গানচে ইতিমধ্যে আমাদের জন্য এটি করেছে যাতে আমাদের এটি নিয়ে চিন্তা করতে না হয়।

Node.JS

এখন যেহেতু আপনার একটি ব্যক্তিগত ব্লকচেইন চলছে, আপনাকে স্মার্ট চুক্তির বিকাশের জন্য আপনার পরিবেশ কনফিগার করতে হবে। আপনার প্রয়োজন হবে প্রথম নির্ভরতা নোড প্যাকেজ ম্যানেজার, বা NPM, যা Node.js এর সাথে আসে। আপনি আপনার টার্মিনালে গিয়ে টাইপ করে দেখতে পারেন যে আপনার ইতিমধ্যেই নোড ইনস্টল করা আছে কিনা:

$ node -v

আপনার যদি ইতিমধ্যেই নোড ইনস্টল না থাকে তবে আপনি এটি ডাউনলোড করতে Node.js ওয়েবসাইটে যেতে পারেন।

ট্রাফল ফ্রেমওয়ার্ক

এখন আসুন ট্রফল ফ্রেমওয়ার্ক ইনস্টল করি, যা সলিডিটি প্রোগ্রামিং ভাষার সাথে ইথেরিয়াম স্মার্ট পরিচিতিগুলি বিকাশের জন্য সরঞ্জামগুলির একটি স্যুট সরবরাহ করে।

ট্রাফল ফ্রেমওয়ার্কের সাথে আমরা যে সমস্ত কার্যকারিতা পাব তার একটি ওভারভিউ এখানে রয়েছে:

• স্মার্ট কন্ট্রাক্ট ম্যানেজমেন্ট - সলিডিটি প্রোগ্রামিং ল্যাঙ্গুয়েজ দিয়ে স্মার্ট কন্ট্রাক্ট লিখুন এবং ইথেরিয়াম ভার্টাল মেশিনে (EVM) চালানো বাইটকোডে সেগুলি কম্পাইল করুন।
• স্বয়ংক্রিয় পরীক্ষা - আপনার স্মার্ট চুক্তিগুলির বিরুদ্ধে পরীক্ষাগুলি লিখুন যাতে আপনি যেভাবে চান সেভাবে তারা আচরণ করে। এই পরীক্ষাগুলি জাভাস্ক্রিপ্ট বা সলিডিটিতে লেখা হতে পারে এবং পাবলিক ব্লকচেইন নেটওয়ার্ক সহ ট্রাফল দ্বারা কনফিগার করা যেকোনো নেটওয়ার্কের বিরুদ্ধে চালানো যেতে পারে।
• স্থাপনা এবং স্থানান্তর - স্থানান্তর করার জন্য স্ক্রিপ্ট লিখুন এবং যেকোনো পাবলিক ইথেরিয়াম ব্লকচেইন নেটওয়ার্কে স্মার্ট চুক্তি স্থাপন করুন।
• নেটওয়ার্ক ম্যানেজমেন্ট - যেকোনো পাবলিক ইথেরিয়াম ব্লকচেইন নেটওয়ার্কের সাথে সংযোগ করুন, সেইসাথে যেকোন ব্যক্তিগত ব্লকচেইন নেটওয়ার্ক যা আপনি উন্নয়নের উদ্দেশ্যে ব্যবহার করতে পারেন।
• ডেভেলপমেন্ট কনসোল - ট্রাফল কনসোলের সাথে জাভাস্ক্রিপ্ট রানটাইম পরিবেশের মধ্যে স্মার্ট চুক্তির সাথে ইন্টারঅ্যাক্ট করুন। এটি করার জন্য আপনি আপনার নেটওয়ার্ক কনফিগারেশনের মধ্যে নির্দিষ্ট করেছেন এমন যেকোনো ব্লকচেইন নেটওয়ার্কের সাথে সংযোগ করতে পারেন।
• স্ক্রিপ্ট রানার - কাস্টম স্ক্রিপ্ট লিখুন যা জাভাস্ক্রিপ্ট সহ একটি পাবলিক ব্লকচেইন নেটওয়ার্কের বিরুদ্ধে চলতে পারে। আপনি এই ফাইলের ভিতরে যেকোনো ইচ্ছাকৃত কোড লিখতে পারেন এবং আপনার প্রকল্পের মধ্যে এটি চালাতে পারেন।
• ক্লায়েন্ট সাইড ডেভেলপমেন্ট - ক্লায়েন্ট সাইড অ্যাপ্লিকেশন হোস্ট করতে আপনার ট্রাফল প্রজেক্ট কনফিগার করুন যা ব্লকচেইনে নিয়োজিত আপনার স্মার্ট চুক্তির সাথে কথা বলে।

আপনি এইভাবে আপনার কমান্ড লাইনে NPM দিয়ে Truffle ইনস্টল করতে পারেন। দ্রষ্টব্য: এই টিউটোরিয়ালটি অনুসরণ করার জন্য নীচে নির্দিষ্ট করা ট্রাফলের এই সঠিক সংস্করণটি ব্যবহার করা গুরুত্বপূর্ণ।

$ npm install -g truffle@5.0.2

মেটামাস্ক ইথেরিয়াম ওয়ালেট

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

আমি গুগল ক্রোমের জন্য মেটামাস্ক এক্সটেনশন করব। মেটামাস্ক ইনস্টল করতে, এই লিঙ্কে যান বা গুগল ক্রোম ওয়েব স্টোরে মেটামাস্ক ক্রোম প্লাগইন অনুসন্ধান করুন। একবার আপনি এটি ইনস্টল করার পরে, এটি আপনার এক্সটেনশনের তালিকায় চেক করা হয়েছে তা নিশ্চিত করুন। আপনার ক্রোম ব্রাউজার ইন্সটল হয়ে গেলে আপনি তার উপরের ডানদিকে ফক্স আইকনটি দেখতে পাবেন। যদি আটকে যান তাহলে ভিডিওটি দেখে নিন!

মেটামাস্ক আমাদেরকে আমাদের ব্যক্তিগত অ্যাকাউন্ট পরিচালনা করার অনুমতি দেবে যখন আমরা ব্লকচেইনের সাথে সংযোগ করি, সেইসাথে আমাদের ইথার তহবিলগুলি পরিচালনা করতে যা আমাদের লেনদেনের জন্য অর্থ প্রদান করতে হবে।

প্রকল্প সেটআপ

টিউটোরিয়ালের এই অংশের জন্য সহগামী ভিডিও ফুটেজ 9:26 এ শুরু হয়।

এখন প্রকল্প তৈরি করা যাক! আমি প্রথমে একটি প্রজেক্ট ডিরেক্টরি তৈরি করব এবং এটিতে এভাবে প্রবেশ করব:

$ mkdir eth-todo-list

$ cd eth-todo-list

এখন আমরা আমাদের প্রকল্পটি এভাবে বিকাশ করতে একটি নতুন ট্রাফল প্রকল্প শুরু করি:

$ truffle init

দারুণ! আপনার টার্মিনাল আউটপুট দেখানো উচিত যে প্রকল্পটি সফলভাবে তৈরি করা হয়েছে। আপনি আপনার টেক্সট এডিটর খুলতে পারেন এবং দেখতে পারেন যে আপনি সেই কমান্ডটি চালানোর পরে কিছু নতুন ফাইল এবং ডিরেক্টরি তৈরি হয়েছে। এখন কিছু ডেভেলপমেন্ট নির্ভরতা ইনস্টল করার জন্য একটি package.json ফাইল তৈরি করা যাক যা প্রকল্পের জন্য প্রয়োজন হবে। আপনি কমান্ড লাইন থেকে এটি করতে পারেন:

$ touch package.json

আপনি নীচের কোডটি আপনার package.json ফাইলে কপি-এন্ড-পেস্ট করে আপনার প্রকল্পের জন্য সমস্ত নির্ভরতা বুটস্ট্র্যাপ করতে পারেন:

{
  "name": "eth-todo-list",
  "version": "1.0.0",
  "description": "Blockchain Todo List Powered By Ethereum",
  "main": "truffle-config.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "dev": "lite-server",
    "test": "echo \"Error: no test specified\" && sexit 1"
  },
  "author": "gregory@dappuniversity.com",
  "license": "ISC",
  "devDependencies": {
    "bootstrap": "4.1.3",
    "chai": "^4.1.2",
    "chai-as-promised": "^7.1.1",
    "chai-bignumber": "^2.0.2",
    "lite-server": "^2.3.0",
    "nodemon": "^1.17.3",
    "truffle": "5.0.2",
    "truffle-contract": "3.0.6"
  }
}

এখন আপনি এইভাবে কমান্ড লাইন থেকে নির্ভরতা ইনস্টল করতে পারেন:

$ npm install

এখন নির্ভরতাগুলি ইনস্টল করা হয়েছে, আসুন আমরা এইমাত্র তৈরি করা প্রকল্প ডিরেক্টরি কাঠামোটি পরীক্ষা করি:

• চুক্তি ডিরেক্টরি: এখানেই সমস্ত স্মার্ট পরিচিতি বাস করে। আমাদের ইতিমধ্যেই একটি মাইগ্রেশন চুক্তি আছে যা ব্লকচেইনে আমাদের মাইগ্রেশন পরিচালনা করে।
• মাইগ্রেশন ডিরেক্টরি: এখানেই সমস্ত মাইগ্রেশন ফাইল থাকে। এই মাইগ্রেশনগুলি অন্যান্য ওয়েব ডেভেলপমেন্ট ফ্রেমওয়ার্কের মতো যা একটি ডাটাবেসের অবস্থা পরিবর্তন করতে মাইগ্রেশনের প্রয়োজন হয়। যখনই আমরা ব্লকচেইনে স্মার্ট কন্ট্রাক্ট স্থাপন করি, তখনই আমরা ব্লকচেইনের অবস্থা আপডেট করি, এবং তাই একটি মাইগ্রেশন প্রয়োজন।
• node_modules ডিরেক্টরি: এটি আমাদের সমস্ত নোড নির্ভরতার হোম যা আমরা এইমাত্র ইনস্টল করেছি।
• টেস্ট ডিরেক্টরি: এখানে আমরা আমাদের স্মার্ট চুক্তির জন্য আমাদের পরীক্ষা লিখব।
• truffle-config.js ফাইল: এটি আমাদের ট্রাফল প্রকল্পের প্রধান কনফিগারেশন ফাইল, যেখানে আমরা নেটওয়ার্ক কনফিগারেশনের মতো জিনিসগুলি পরিচালনা করব।

এখন আসুন স্মার্ট চুক্তির বিকাশ শুরু করি যা আমাদের করণীয় তালিকা পরিচালনা করবে। আমরা এই মত চুক্তি ডিরেক্টরিতে একটি নতুন ফাইল তৈরি করে এটি করতে পারি:

$ touch ./contracts/TodoList.sol

এখানে, আসুন আমাদের করণীয় তালিকার স্মার্ট চুক্তি বিকাশ করি। প্রথমে, আমরা এই মত সংস্করণ নির্দিষ্ট করে শুরু করব:

pragma solidity ^0.5.0;

এখন আমরা এইভাবে স্মার্ট চুক্তি ঘোষণা করতে পারি:

pragma solidity ^0.5.0;

contract TodoList {

    // Code goes here...

}

আমরা টোডোলিস্ট নামে একটি স্মার্ট চুক্তি তৈরি করি যার পরে কোঁকড়া ধনুর্বন্ধনী। আমরা তাদের ভিতরে স্মার্ট চুক্তির জন্য সমস্ত কোড যোগ করব। আমরা যা করব তা হ'ল করণীয় তালিকার মধ্যে কাজের সংখ্যার উপর নজর রাখা। এটি আমাদের কিছু সহজ কোড লিখতে অনুমতি দেবে যা আমাদের নিশ্চিত করতে সাহায্য করবে যে প্রকল্পটি সঠিকভাবে সেট আপ করা হয়েছে এবং আমাদের কোড ব্লকচেইনে কাজ করছে। এই ধরনের কাজের সংখ্যা ট্র্যাক করতে আমরা টাস্ককাউন্ট নামে একটি স্টেট ভেরিয়েবল তৈরি করব:

pragma solidity ^0.5.0;

contract TodoList {

  uint taskCount;

}

এখানে taskCount হল একটি বিশেষ ধরনের ভেরিয়েবল যাকে "state variable" বলা হয়। এই স্টেট ভেরিয়েবলের মধ্যে আমরা যে কোনো ডেটা সঞ্চয় করি তা ব্লকচেইনের স্টোরেজের জন্য লেখা হয়। এটি স্মার্ট কন্ট্রাক্টের অবস্থা পরিবর্তন করে এবং স্থানীয় ভেরিয়েবলের বিপরীতে সমগ্র স্মার্ট কন্ট্রাক্টের মধ্যেই এর সুযোগ রয়েছে যা শুধুমাত্র ফাংশনের ভিতরেই সুযোগ রয়েছে। আমরা এই স্টেট ভেরিয়েবলের জন্য 0 এর একটি ডিফল্ট মান সেট করতে পারি:

pragma solidity ^0.5.0;

contract TodoList {

  uint taskCount = 0;

}

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

এখন স্মার্ট কন্ট্রাক্ট কম্পাইল করি এবং নিশ্চিত করি যে কোন ত্রুটি নেই:

$ truffle compile

হ্যাঁ! 🎉 আপনি এইমাত্র আপনার প্রথম Ethereum স্মার্ট চুক্তি লিখেছেন৷ আপনার লক্ষ্য করা উচিত যে আপনি যখনই নিম্নলিখিত পথে স্মার্ট চুক্তি কম্পাইল করেন তখনই একটি নতুন ফাইল তৈরি হয়েছিল: `./build/contracts/TodoList.json`। এই ফাইলটি হল স্মার্ট কন্ট্রাক্ট ABI ফাইল, যার অর্থ হল "বিমূর্ত বাইনারি ইন্টারফেস"। এই ফাইলটির অনেক দায়িত্ব রয়েছে, তবে দুটি আমি এখানে হাইলাইট করব:

• এতে সলিডিটি স্মার্ট কন্ট্রাক্ট কোডের সংকলিত বাইটকোড সংস্করণ রয়েছে যা একটি ইথেরিয়াম ভার্চুয়াল মেশিন (ইভিএম), অর্থাৎ একটি ইথেরিয়াম নোডে চালানো যেতে পারে।
• এটিতে স্মার্ট কন্ট্রাক্ট ফাংশনগুলির একটি JSON উপস্থাপনা রয়েছে যা ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট অ্যাপ্লিকেশনগুলির মতো বহিরাগত ক্লায়েন্টদের কাছে প্রকাশ করা যেতে পারে।

আমাদের পরবর্তী লক্ষ্য ট্রাফল কনসোলের ভিতরে স্মার্ট চুক্তি অ্যাক্সেস করা। যাইহোক, আমরা Truffle কনসোল চালাতে পারি না কারণ আমাদের অ্যাপ্লিকেশনটি এখনও নির্ভরশীল বিভাগে সেট আপ করা Ganache ব্যক্তিগত ব্লকচেইন নেটওয়ার্কের সাথে সংযুক্ত নয়। Truffle কনসোলের ভিতরে ব্যক্তিগত ব্লকচেইন নেটওয়ার্কে স্মার্ট চুক্তির সাথে কথা বলতে, আমাদের কিছু জিনিস করতে হবে:

• আমরা যে ব্যক্তিগত ব্লকচেইন নেটওয়ার্কে সংযোগ করতে চাই তা নির্দিষ্ট করতে আমাদের প্রকল্পের কনফিগারেশন ফাইল আপডেট করুন (Ganache)।
• একটি মাইগ্রেশন স্ক্রিপ্ট তৈরি করুন যা ট্রাফলকে বলে যে কীভাবে ব্যক্তিগত ব্লকচেইন নেটওয়ার্কে স্মার্ট চুক্তি স্থাপন করতে হয়।
• ব্যক্তিগত ব্লকচেইন নেটওয়ার্কে স্মার্ট চুক্তি স্থাপন করে নতুন তৈরি মাইগ্রেশন স্ক্রিপ্ট চালান।

প্রথমে, আমরা প্রথম বিভাগে যে ব্যক্তিগত ব্লকচেইন নেটওয়ার্ক সেট আপ করতে চাই তা নির্দিষ্ট করতে আমরা প্রকল্প কনফিগারেশন ফাইলটি আপডেট করব। truffle-config.js ফাইলটি খুঁজুন এবং নিম্নলিখিত কোড পেস্ট করুন:

module.exports = {

  networks: {

    development: {

      host: "127.0.0.1",

      port: 7545,

      network_id: "*" // Match any network id

    }

  },

  solc: {

    optimizer: {

      enabled: true,

      runs: 200

    }

  }

}

দ্রষ্টব্য: এগুলি Ganache ব্যক্তিগত ব্লকচেইন নেটওয়ার্ক দ্বারা প্রদত্ত ডিফল্ট সেটিংসের সাথে মেলে। আপনি যদি Ganache সেটিংস পৃষ্ঠার ভিতরে কোনো সেটিংস পরিবর্তন করেন, যেমন পোর্ট, সেগুলি এখানে প্রতিফলিত হওয়া উচিত।

এরপর, আমরা ব্যক্তিগত ব্লকচেইন নেটওয়ার্কে স্মার্ট চুক্তি স্থাপন করতে মাইগ্রেশন ডিরেক্টরির ভিতরে একটি মাইগ্রেশন স্ক্রিপ্ট তৈরি করব। আপনার প্রজেক্ট রুট থেকে, কমান্ড লাইন থেকে এইভাবে একটি নতুন ফাইল তৈরি করুন:

$ touch migrations/2_deploy_contracts.js

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

লক্ষ্য করুন যে আমরা মাইগ্রেশন ডিরেক্টরির ভিতরে আমাদের সমস্ত ফাইলকে সংখ্যা সহ সংখ্যা করি যাতে ট্রাফল জানতে পারে কোন অর্ডারে সেগুলি চালাতে হবে৷ এই নতুন তৈরি মাইগ্রেশন ফাইলের ভিতরে, আপনি স্মার্ট চুক্তিটি স্থাপন করতে এই কোডটি ব্যবহার করতে পারেন:

var TodoList = artifacts.require("./TodoList.sol");

module.exports = function(deployer) {

  deployer.deploy(TodoList);

};

প্রথমত, আমাদের তৈরি করা চুক্তির প্রয়োজন, এবং এটিকে "TodoList" নামক একটি ভেরিয়েবলে বরাদ্দ করি। এর পরে, আমরা যখন মাইগ্রেশন চালাই তখন এটি স্থাপন করা হয় তা নিশ্চিত করতে আমরা এটিকে স্থাপন করা চুক্তির ম্যানিফেস্টে যোগ করি। এখন কমান্ড লাইন থেকে এই মাইগ্রেশন স্ক্রিপ্টটি এভাবে রান করা যাক:

$ truffle migrate

এখন যেহেতু আমরা সফলভাবে স্মার্ট চুক্তিটি ব্যক্তিগত ব্লকচেইন নেটওয়ার্কে স্থানান্তরিত করেছি, আসুন স্মার্ট চুক্তির সাথে যোগাযোগ করতে কনসোলটি খুলি। আপনি এইভাবে কমান্ড লাইন থেকে truffle কনসোল খুলতে পারেন:

$ truffle console

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

todoList = await TodoList.deployed()

এখানে TodoList হল ভেরিয়েবলের নাম যা আমরা মাইগ্রেশন ফাইলে তৈরি করেছি। আমরা deployed() ফাংশনের সাথে চুক্তির একটি নিয়োজিত উদাহরণ পুনরুদ্ধার করেছি এবং এটি একটি todoList এ বরাদ্দ করেছি। এছাড়াও, await কীওয়ার্ডের ব্যবহার নোট করুন। আমাদের অবশ্যই একটি অ্যাসিঙ্ক্রোনাস ফ্যাশনে ব্লকচেইনের সাথে যোগাযোগ করতে হবে। সুতরাং, ব্লকচেইন স্মার্ট কন্ট্রাক্টের সাথে ক্লায়েন্ট-সাইড ইন্টারঅ্যাকশনের জন্য জাভাস্ক্রিপ্ট একটি চমৎকার পছন্দ। জাভাস্ক্রিপ্টে অ্যাসিঙ্ক্রোনাস অ্যাকশন পরিচালনা করার জন্য বেশ কিছু কৌশল রয়েছে। সবচেয়ে জনপ্রিয় উপায়গুলির মধ্যে একটি হল async/await প্যাটার্ন যা আমি এখানে বেছে নিয়েছি। Truffle সম্প্রতি Truffle কনসোলের ভিতরে এটির জন্য সমর্থন প্রকাশ করেছে। আপনি এখানে async/ওয়েট প্যাটার্ন সম্পর্কে আরও পড়তে পারেন।

প্রথমত, আমরা স্মার্ট চুক্তির ঠিকানা পেতে পারি যেটি ব্লকচেইনে স্থাপন করা হয়েছিল এইভাবে:

todoList.address

// => '0xABC123...'

এখন আমরা স্টোরেজ থেকে টাস্ককাউন্টের মান এভাবে পড়তে পারি:

takCount = await app.taskCount()

// => 0

হ্যাঁ! 🎉 আপনি সফলভাবে এই টিউটোরেলের প্রথম বিভাগটি সম্পূর্ণ করেছেন। আপনি নিম্নলিখিত সব করেছেন:

• ব্লকচেইন উন্নয়নের জন্য আপনার মেশিন সেট আপ করুন
• একটি নতুন ট্রাফল প্রকল্প তৈরি করা হয়েছে
• আপনার প্রথম স্মার্ট চুক্তি তৈরি
• একটি লাইভ ব্লকচেইনে আপনার সদ্য তৈরি স্মার্ট চুক্তির সাথে ইন্টারঅ্যাক্ট করেছে

আপনি যদি কোনও ধাপে আটকে থাকেন তবে গিথুব থেকে এই বিভাগের জন্য প্রকল্প কোডটি নির্দ্বিধায় ক্লোন করুন। আপনি এখানে শুরু হওয়া এই বিভাগের ভিডিও টিউটোরিয়ালটিও উল্লেখ করতে পারেন।

তালিকা টাস্ক

টিউটোরিয়ালের এই অংশের জন্য সহগামী ভিডিও ফুটেজ 22:47 এ শুরু হয়।

এখন করণীয় তালিকায় কাজগুলি তালিকাভুক্ত করা শুরু করা যাক। এই বিভাগে আমরা যে সমস্ত ধাপগুলি সম্পূর্ণ করব তা এখানে রয়েছে:

1. স্মার্ট চুক্তিতে কাজ তালিকাভুক্ত করতে কোড লিখুন
2. Truffle কনসোলের ভিতরে স্মার্ট চুক্তি থেকে কাজগুলি তালিকাভুক্ত করুন
3. ক্লায়েন্ট সাইড অ্যাপ্লিকেশনে কাজের তালিকা করুন
4. তালিকাভুক্ত কাজের জন্য একটি পরীক্ষা লিখুন

স্মার্ট চুক্তির অভ্যন্তরে কাজগুলি তালিকাভুক্ত করার জন্য, আমাদের দৃঢ়তার সাথে একটি টাস্ক মডেল করার একটি উপায় প্রয়োজন। সলিডিটি আপনাকে স্ট্রাকট দিয়ে আপনার নিজস্ব ডেটা টাইপ সংজ্ঞায়িত করতে দেয়। আমরা এই শক্তিশালী বৈশিষ্ট্যের সাথে যেকোন নির্বিচারে ডেটা মডেল করতে পারি। আমরা আমাদের করণীয় তালিকার জন্য টাস্ক মডেল করার জন্য একটি স্ট্রাকট ব্যবহার করব:

pragma solidity ^0.5.0;

contract TodoList {

  uint public taskCount = 0;

  struct Task {

    uint id;

    string content;

    bool completed;

  }

}

প্রথমে আমরা নতুন struct টাস্কের নাম অনুসরণ করে struct কীওয়ার্ড দিয়ে টাস্কটিকে মডেল করি। দ্রষ্টব্য, এটি একটি টাস্কের একটি উদাহরণকে প্রতিনিধিত্ব করে না, তবে কেবলমাত্র একটি Taskকাঠামোর সংজ্ঞা। কোঁকড়া ধনুর্বন্ধনীতে থাকা লাইনগুলিTask কাঠামোর বৈশিষ্ট্যগুলিকে সংজ্ঞায়িত করে:

• uint id - এটি struct-এর অনন্য শনাক্তকারী। এটির একটি id থাকবে, যেমন একটি ঐতিহ্যগত ডাটাবেস রেকর্ড। দ্রষ্টব্য, আমরা এই শনাক্তকারীর জন্য ডেটা টাইপকে একটি uint হিসাবে ঘোষণা করি, যা "আনসাইনড ইন্টিজার" এর জন্য দাঁড়ায়। এর সহজ অর্থ হল এটি একটি অ-নেতিবাচক পূর্ণসংখ্যা। এটির কোন "চিহ্ন" নেই, যেমন a - বা + চিহ্ন, এটির সামনে, বোঝায় যে এটি সর্বদা ইতিবাচক।
• string content - এটি একটি স্ট্রিং এর মধ্যে থাকা করণীয় তালিকার টাস্কের পাঠ্য।
• bool completed - এটি করণীয় তালিকার চেকবক্সের অবস্থা, যা true/false। যদি এটি true হয়, টাস্কটি "সম্পূর্ণ" হবে বা করণীয় তালিকা থেকে চেক বন্ধ করা হবে।

 এখন যেহেতু আমরা একটি টাস্ক মডেল করেছি, আমাদের করণীয় তালিকায় সমস্ত কাজ রাখার জন্য একটি জায়গা দরকার! আমরা সেগুলিকে ব্লকচেইনে স্টোরেজে রাখতে চাই যাতে স্মার্ট চুক্তির অবস্থা স্থায়ী হয়। আমরা একটি স্টেট ভেরিয়েবলের সাহায্যে ব্লকচেইনের স্টোরেজ অ্যাক্সেস করতে পারি, ঠিক যেমন আমরা taskCount সাথে করেছি। আমরা একটি task স্টেট ভেরিয়েবল তৈরি করব। এটি একটি বিশেষ ধরনের সলিডিটি ডেটা স্ট্রাকচার ব্যবহার করবে যাকে ম্যাপিং বলা হয়:

pragma solidity ^0.5.0;

contract TodoList {

  uint public taskCount = 0;

  struct Task {

    uint id;

    string content;

    bool completed;

  }

  mapping(uint => Task) public tasks;

}

সলিডিটিতে ম্যাপিং অনেকটা অ্যাসোসিয়েটিভ অ্যারে বা অন্যান্য প্রোগ্রামিং ভাষায় হ্যাশের মতো। এটি কী-মানের জোড়া তৈরি করে যা ব্লকচেইনে সংরক্ষণ করা হয়। আমরা কী হিসাবে একটি অনন্য আইডি ব্যবহার করব। মান টাস্ক এটা নিজেই হবে. এটি আমাদের id দ্বারা যেকোনো কাজ সন্ধান করার অনুমতি দেবে!

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

pragma solidity ^0.5.0;

contract TodoList {

  uint public taskCount = 0;

  struct Task {

    uint id;

    string content;

    bool completed;

  }

  mapping(uint => Task) public tasks;

  function createTask(string memory _content) public {

    taskCount ++;

    tasks[taskCount] = Task(taskCount, _content, false);

  }

}

আমি এই ফাংশন ব্যাখ্যা করব:

• প্রথমে, আমরা function কীওয়ার্ড দিয়ে ফাংশন তৈরি করি এবং এটিকে CreateTask() নাম দিই।
• আমরা ফাংশনটিকে _content নামক একটি আর্গুমেন্ট গ্রহণ করার অনুমতি দিই, যা টাস্কের জন্য পাঠ্য হবে। আমরা উল্লেখ করি যে এই আর্গুমেন্ট হবে stringডেটা টাইপের, এবং এটিmemory থাকবে
• আমরা ফাংশনটির দৃশ্যমানতা public  জন্য সেট করেছি যাতে এটিকে স্মার্ট চুক্তির বাইরে যেমন কনসোলের মতো বা ক্লায়েন্টের দিক থেকে বলা যেতে পারে
• ফাংশনের ভিতরে, আমরা নতুন Task জন্য একটি id তৈরি করি। আমরা কেবল বিদ্যমান টাস্ককাউন্ট গ্রহণ করি এবং এটি 1 দ্বারা বৃদ্ধি করি।
• এখন আমরা Task(taskCount, _content, false) কল করে একটি নতুন টাস্ক স্ট্রাকট তৈরি করি; এবং নতুন কাজের জন্য মান পাস করা.
• এর পরে, আমরা ব্লকচেইনে নতুন টাস্কটিকে এইভাবে Tasks ম্যাপিংয়ে যুক্ত করে সংরক্ষণ করি: task[taskCount] = ....

যখনই ব্লকচেইনে স্মার্ট কন্ট্রাক্ট স্থাপন করা হয় তখন আমরা টোডো তালিকায় একটি টাস্ক যোগ করতে চাই যাতে এটির একটি ডিফল্ট টাস্ক থাকে যা আমরা কনসোলে পরিদর্শন করতে পারি। আমরা এইভাবে স্মার্ট কন্ট্রাক্টের কনস্ট্রাক্টর ফাংশনের ভিতরে createTask() ফাংশনকে কল করে এটি করতে পারি:

 contract TodoList {

      // ....

      constructor() public {

        createTask("Check out dappuniversity.com");

      }

      // ....

    }

আমরা কনস্ট্রাক্টর কীওয়ার্ড দিয়ে constructorফাংশন তৈরি করি যেমন আপনি উপরে দেখতে পাচ্ছেন। এই ফাংশনটি শুধুমাত্র একবার চালিত হবে, যখনই চুক্তিটি শুরু হবে, অর্থাৎ ব্লকচেইনে স্থাপন করা হবে। এই ফাংশনের ভিতরে, আমরা স্ট্রিং কন্টেন্ট "চেক আউট https://dappuniversitybd.blogspot.com/ সহ একটি নতুন ডিফল্ট টাস্ক তৈরি করেছি।

এখন ব্লকচেইনে এই স্মার্ট চুক্তিটি স্থাপন করা যাক। এটি করার জন্য, আমাদের অবশ্যই আমাদের কোডের একটি নতুন অনুলিপি স্থাপন করতে হবে। মনে রাখবেন, স্মার্ট চুক্তি কোড অপরিবর্তনীয়! এটা পরিবর্তন করা যাবে না. অতএব, আমরা যে কোনো সময় কোড পরিবর্তন করার সময় একটি নতুন স্মার্ট চুক্তি তৈরি করতে হবে। সৌভাগ্যবশত ট্রাফল এটিতে সহায়তা করার জন্য একটি শর্টকাট প্রদান করে। আমরা এইভাবে মাইগ্রেশন পুনরায় চালাতে পারি:

$ truffle migrate --reset

ভায়োলা ! এখন আমাদের ব্লকচেইনে স্মার্ট চুক্তির একটি নতুন কপি আছে। এখন কনসোলে কাজগুলো তালিকা করা যাক।

$ truffle console

কনসোলের ভিতরে, আসুন নতুন স্মার্ট চুক্তির একটি স্থাপন করা অনুলিপি পান।

todoList = await TodoList.deployed()

এখন আমরা tasks() ফাংশন কল করে টোডো তালিকা থেকে tasks পেতে পারি। এটি আমাদের id দ্বারা টাস্ক ম্যাপিং থেকে মান অ্যাক্সেস করার অনুমতি দেবে। যখন আমরা এই ফাংশনটি কল করব তখন আমরা তালিকার প্রথম টাস্কের id পাস করব:

task = await todoList.tasks(1)

হ্যাঁ! 🎉 কিভাবে আপনি কনসোলে এই টাস্কের মান পরিদর্শন করতে পারেন। 😃

এখন যেহেতু আমরা এই স্মার্ট চুক্তিটি ব্লকচেইনে স্থানান্তরিত করেছি, আসুন টোডো তালিকার স্মার্ট চুক্তির সাথে ইন্টারঅ্যাক্ট করার জন্য ক্লায়েন্ট সাইড কোড তৈরি করি। আপনার প্রকল্পের জন্য আপনাকে নিম্নলিখিত ফাইলগুলি তৈরি করতে হবে:

• bs-config.json
• src/index.html
• src/app.js

আমরা এই সমস্ত ফাইলের জন্য এক এক করে কোড পূরণ করব। আমরা ক্লায়েন্ট পক্ষের জন্য সমস্ত প্রকল্প ফাইল পরিবেশন করতে lite-server ব্যবহার করছি। এই সমস্ত ফাইল কোথায় অবস্থিত তা আমাদের লাইট সার্ভারকে বলতে হবে। আমরা bs-config.json ফাইলের ভিতরে লাইট-সার্ভারের জন্য ব্রাউজারসিঙ্ক কনফিগারেশন আপডেট করে এটি করতে পারি। আপনার প্রকল্প ফাইলে এই কনফিগারেশন আটকান:

{

  "server": {

    "baseDir": [

      "./src",

      "./build/contracts"

    ],

    "routes": {

      "/vendor": "./node_modules"

    }

  }

}

এই কনফিগারেশনটি লাইট-সার্ভারকে src-এর সমস্ত ফাইল প্রকাশ করতে বলে এবং আমাদের ওয়েব সার্ভারের রুটে ডিরেক্টরি  build/contracts করে। এটি বিক্রেতা রুটে উপস্থিত হওয়ার জন্য node_modules ডিরেক্টরিতে যেকোনো ফাইলের জন্য একটি উপনাম যোগ করে। এটি আমাদেরকেvendor সাথে ক্লায়েন্ট সাইডেbootstrap মতো যেকোন প্রজেক্ট নির্ভরতা টেনে আনতে দেয়, যা আমরা মুহূর্তের মধ্যে দেখতে পাব।

এখন আমাদের করণীয় তালিকার জন্য HTML কোড পূরণ করা যাক। এই টিউটোরিয়ালটি মূলত ব্লকচেইন প্রযুক্তির উপর ফোকাস করে, তাই আমি HTML এবং CSS অংশে খুব বেশি সময় ব্যয় করতে চাই না। আমি এখানে শুধু HTML কোড পেস্ট করব:

 <!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <title>Dapp University | Todo List</title>

    <!-- Bootstrap -->

    <link href="vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->

    <style>

      main {

        margin-top: 60px;

      }

      #content {

        display: none;

      }

      form {

        width: 350px;

        margin-bottom: 10px;

      }

      ul {

        margin-bottom: 0px;

      }

      #completedTaskList .content {

        color: grey;

        text-decoration: line-through;

      }

    </style>

  </head>

  <body>

    <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">

      <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://www.dappuniversity.com/free-download" target="_blank">Dapp University | Todo List</a>

      <ul class="navbar-nav px-3">

        <li class="nav-item text-nowrap d-none d-sm-none d-sm-block">

          <small><a class="nav-link" href="#"><span id="account"></span></a></small>

        </li>

      </ul>

    </nav>

    <div class="container-fluid">

      <div class="row">

        <main role="main" class="col-lg-12 d-flex justify-content-center">

          <div id="loader" class="text-center">

            <p class="text-center">Loading...</p>

          </div>

          <div id="content">

         <!-- <form onSubmit="App.createTask(); return false;">

              <input id="newTask" type="text" class="form-control" placeholder="Add task..." required>

              <input type="submit" hidden="">

            </form> -->

            <ul id="taskList" class="list-unstyled">

              <div class="taskTemplate" class="checkbox" style="display: none">

                <label>

                  <input type="checkbox" />

                  <span class="content">Task content goes here...</span>

                </label>

              </div>

            </ul>

            <ul id="completedTaskList" class="list-unstyled">

            </ul>

          </div>

        </main>

      </div>

    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>

    <script src="vendor/truffle-contract/dist/truffle-contract.js"></script>

    <script src="app.js"></script>

  </body>

</html>

এই ফাইলটি আমাদের প্রজেক্টের জন্য প্রয়োজনীয় সমস্ত এইচটিএমএল স্ক্যাফোল্ড করে। আমি ফর্ম কোডটি মন্তব্য করেছি যা আমরা পরবর্তী বিভাগে সক্ষম করব। ফাইলটি বুটস্ট্র্যাপ টেমপ্লেটিং ফ্রেমওয়ার্কের মতো প্রকল্পের জন্য সমস্ত নির্ভরতাকে টেনে নেয় যা আমাদেরকে খুব বেশি CSS না লিখেই সুন্দর-সুদর্শন UI উপাদান তৈরি করতে দেয়। এটি Truffle Conract লাইব্রেরিও ব্যবহার করে যা আমাদের জাভাস্ক্রিপ্টের সাথে টোডো তালিকার স্মার্ট চুক্তির সাথে ইন্টারঅ্যাক্ট করতে দেয়।

এখন এই বিভাগের জন্য JavaScript কোডটি পূরণ করা যাক। আমরা সদ্য নির্মিত app.js ফাইলে এইভাবে কোড যোগ করব:

App = {

  loading: false,

  contracts: {},

  load: async () => {

    await App.loadWeb3()

    await App.loadAccount()

    await App.loadContract()

    await App.render()

  },

  // https://medium.com/metamask/https-medium-com-metamask-breaking-change-injecting-web3-7722797916a8

  loadWeb3: async () => {

    if (typeof web3 !== 'undefined') {

      App.web3Provider = web3.currentProvider

      web3 = new Web3(web3.currentProvider)

    } else {

      window.alert("Please connect to Metamask.")

    }

    // Modern dapp browsers...

    if (window.ethereum) {

      window.web3 = new Web3(ethereum)

      try {

        // Request account access if needed

        await ethereum.enable()

        // Acccounts now exposed

        web3.eth.sendTransaction({/* ... */})

      } catch (error) {

        // User denied account access...

      }

    }

    // Legacy dapp browsers...

    else if (window.web3) {

      App.web3Provider = web3.currentProvider

      window.web3 = new Web3(web3.currentProvider)

      // Acccounts always exposed

      web3.eth.sendTransaction({/* ... */})

    }

    // Non-dapp browsers...

    else {

      console.log('Non-Ethereum browser detected. You should consider trying MetaMask!')

    }

  },

  loadAccount: async () => {

    // Set the current blockchain account

    App.account = web3.eth.accounts[0]

  },

  loadContract: async () => {

    // Create a JavaScript version of the smart contract

    const todoList = await $.getJSON('TodoList.json')

    App.contracts.TodoList = TruffleContract(todoList)

    App.contracts.TodoList.setProvider(App.web3Provider)

    // Hydrate the smart contract with values from the blockchain

    App.todoList = await App.contracts.TodoList.deployed()

  },

  render: async () => {

    // Prevent double render

    if (App.loading) {

      return

    }

    // Update app loading state

    App.setLoading(true)

    // Render Account

    $('#account').html(App.account)

    // Render Tasks

    await App.renderTasks()

    // Update loading state

    App.setLoading(false)

  },

  renderTasks: async () => {

    // Load the total task count from the blockchain

    const taskCount = await App.todoList.taskCount()

    const $taskTemplate = $('.taskTemplate')

    // Render out each task with a new task template

    for (var i = 1; i <= taskCount; i++) {

      // Fetch the task data from the blockchain

      const task = await App.todoList.tasks(i)

      const taskId = task[0].toNumber()

      const taskContent = task[1]

      const taskCompleted = task[2]

      // Create the html for the task

      const $newTaskTemplate = $taskTemplate.clone()

      $newTaskTemplate.find('.content').html(taskContent)

      $newTaskTemplate.find('input')

                      .prop('name', taskId)

                      .prop('checked', taskCompleted)

                      // .on('click', App.toggleCompleted)

      // Put the task in the correct list

      if (taskCompleted) {

        $('#completedTaskList').append($newTaskTemplate)

      } else {

        $('#taskList').append($newTaskTemplate)

      }

      // Show the task

      $newTaskTemplate.show()

    }

  },

  setLoading: (boolean) => {

    App.loading = boolean

    const loader = $('#loader')

    const content = $('#content')

    if (boolean) {

      loader.show()

      content.hide()

    } else {

      loader.hide()

      content.show()

    }

  }

}

$(() => {

  $(window).load(() => {

    App.load()

  })

})

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

• loadWeb3() web3.js হল একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা আমাদের ক্লায়েন্ট-সাইড অ্যাপ্লিকেশনকে ব্লকচেইনের সাথে কথা বলার অনুমতি দেয়। আমরা এখানে web3 কনফিগার করি। এটি মেটামাস্ক দ্বারা নির্দিষ্ট করা ডিফল্ট ওয়েব3 কনফিগারেশন। আপনি এখানে কি ঘটছে তা সম্পূর্ণরূপে বুঝতে না পারলে চিন্তা করবেন না। এটি একটি কপি-এবং-পেস্ট বাস্তবায়ন যা মেটামাস্ক পরামর্শ দেয়।
• loadContract() এখানেই আমরা ব্লকচেইন থেকে স্মার্ট কন্ট্রাক্ট ডেটা লোড করি। আমরা ট্রাফল কন্ট্রাক্ট লাইব্রেরির সাথে স্মার্ট চুক্তির একটি জাভাস্ক্রিপ্ট উপস্থাপনা তৈরি করি। তারপর আমরা web3 দিয়ে স্মার্ট কন্ট্রাক্ট ডেটা লোড করি। এটি আমাদের করণীয় তালিকায় কাজগুলি তালিকাভুক্ত করার অনুমতি দেবে।
• renderTasks() এখানেই আমরা আসলে করণীয় তালিকায় কাজগুলি তালিকাভুক্ত করি। লক্ষ্য করুন যে আমরা প্রতিটি কাজকে পৃথকভাবে অ্যাক্সেস করার জন্য একটি লুপ তৈরি করি। কারণ আমরা স্মার্ট চুক্তি থেকে সম্পূর্ণ টাস্ক ম্যাপিং আনতে পারি না। আমাদের প্রথমে টাস্ককাউন্ট নির্ধারণ করতে হবে এবং প্রতিটি কাজ একে একে আনতে হবে।

এখন ওয়েব সার্ভার শুরু করা যাক এবং প্রকল্পটি ব্রাউজারে লোড হবে তা নিশ্চিত করি।

$ npm run dev

হ্যাঁ! 🎉 আপনি সফলভাবে ক্লায়েন্ট সাইড অ্যাপ্লিকেশন লোড করেছেন। 😃 লক্ষ্য করুন যে আপনার অ্যাপ্লিকেশনটি বলছে "লোড হচ্ছে..."। কারণ আমরা এখনও ব্লকচেইনে লগ ইন করিনি! ব্লকচেইনের সাথে সংযোগ করার জন্য, আমাদের গণচে থেকে মেটামাস্কে একটি অ্যাকাউন্ট আমদানি করতে হবে। আপনি 43:55 এ ভিডিওতে আমাকে মেটামাস্ক সেট আপ করতে দেখতে পারেন।

একবার আপনি মেটামাস্কের সাথে সংযুক্ত হয়ে গেলে, আপনার সমস্ত চুক্তি এবং অ্যাকাউন্ট ডেটা লোড হওয়া উচিত।

💥 বুম! আপনার করণীয় তালিকা আছে! 😃

পরীক্ষামূলক

টোডো তালিকা স্মার্ট চুক্তি সঠিকভাবে কাজ করে কিনা তা নিশ্চিত করার জন্য এখন একটি প্রাথমিক পরীক্ষা লিখি। প্রথমে, আমাকে ব্যাখ্যা করতে দিন কেন আপনি যখন স্মার্ট কন্ট্রাক্ট তৈরি করছেন তখন পরীক্ষা করা এত গুরুত্বপূর্ণ। আমরা নিশ্চিত করতে চাই যে চুক্তিগুলি কয়েকটি কারণে বাগ-মুক্ত রয়েছে:

• ইথেরিয়াম ব্লকচেইনের সমস্ত কোড অপরিবর্তনীয়; এটা পরিবর্তন করতে পারে না। চুক্তিতে কোনো বাগ থাকলে, আমাদের অবশ্যই এটি নিষ্ক্রিয় করতে হবে এবং একটি নতুন অনুলিপি স্থাপন করতে হবে। এই নতুন অনুলিপিতে পুরানো চুক্তির মতো একই অবস্থা থাকবে না এবং এটির একটি আলাদা ঠিকানা থাকবে৷
• চুক্তি স্থাপনে গ্যাস খরচ হয় কারণ এটি একটি লেনদেন তৈরি করে এবং ব্লকচেইনে ডেটা লেখে। এটি ইথার খরচ করে, এবং আমরা ইথারের পরিমাণ কমিয়ে আনতে চাই যা আমাদের কখনও দিতে হবে।
• ব্লকচেইনে লেখা আমাদের চুক্তির কোনো ফাংশনে যদি বাগ থাকে, তাহলে যে অ্যাকাউন্টটি এই ফাংশনটিকে কল করছে সে সম্ভাব্যভাবে ইথার নষ্ট করতে পারে এবং এটি তাদের প্রত্যাশা অনুযায়ী আচরণ নাও করতে পারে।

এর মত একটি পরীক্ষা ফাইল তৈরি করা যাক:

$ test/TodoList.test.js

আমরা আমাদের সমস্ত পরীক্ষা জাভাস্ক্রিপ্টে লিখব এই ফাইলের ভিতরে Mocha টেস্টিং ফ্রেমওয়ার্ক এবং Chai assertion লাইব্রেরির সাথে। এগুলি ট্রাফল ফ্রেমওয়ার্কের সাথে একত্রিত হয়। আমরা আমাদের স্মার্ট চুক্তির সাথে ক্লায়েন্ট-সাইড ইন্টারঅ্যাকশন অনুকরণ করতে জাভাস্ক্রিপ্টে এই সমস্ত পরীক্ষা লিখব, যেমনটি আমরা কনসোলে করেছি। এখানে পরীক্ষার জন্য সমস্ত কোড আছে:

const TodoList = artifacts.require('./TodoList.sol')

contract('TodoList', (accounts) => {

  before(async () => {

    this.todoList = await TodoList.deployed()

  })

  it('deploys successfully', async () => {

    const address = await this.todoList.address

    assert.notEqual(address, 0x0)

    assert.notEqual(address, '')

    assert.notEqual(address, null)

    assert.notEqual(address, undefined)

  })

  it('lists tasks', async () => {

    const taskCount = await this.todoList.taskCount()

    const task = await this.todoList.tasks(taskCount)

    assert.equal(task.id.toNumber(), taskCount.toNumber())

    assert.equal(task.content, 'Check out dappuniversity.com')

    assert.equal(task.completed, false)

    assert.equal(taskCount.toNumber(), 1)

  })

})

আমাকে এই কোড ব্যাখ্যা করা যাক. প্রথমত, আমাদের প্রয়োজন চুক্তির প্রয়োজন এবং এটিকে একটি ভেরিয়েবলে বরাদ্দ করি, যেমন আমরা মাইগ্রেশন ফাইলে করেছি। এর পরে, আমরা "চুক্তি" ফাংশনকে কল করি এবং কলব্যাক ফাংশনের মধ্যে আমাদের সমস্ত পরীক্ষা লিখি। এই কলব্যাক ফাংশনটি একটি "অ্যাকাউন্ট" ভেরিয়েবল প্রদান করে যা আমাদের ব্লকচেইনের সমস্ত অ্যাকাউন্টের প্রতিনিধিত্ব করে, যা Ganache দ্বারা সরবরাহ করা হয়।

প্রথম পরীক্ষা চেক করে যে চুক্তিটি ব্লকচেইনে সঠিকভাবে স্থাপন করা হয়েছে তার ঠিকানা পরিদর্শন করে।

পরবর্তী পরীক্ষাটি পরীক্ষা করে যে স্মার্ট কন্ট্রাক্ট সঠিকভাবে কাজ তালিকাভুক্ত করে তা আমরা ইনিশিয়ালাইজার ফাংশনে তৈরি ডিফল্ট টাস্ক চেক করে।

এখন কমান্ড লাইন থেকে এইভাবে পরীক্ষা চালানো যাক:

$ truffle test

হ্যাঁ, তারা পাস! 🎉 আপনি যদি আটকে থাকেন তবে আপনি আমাকে অনুসরণ করতে পারেন কারণ আমি আরও ব্যাখ্যার জন্য ভিডিওতে এই পরীক্ষাগুলি লিখছি।

টাস্ক তৈরি করুন

টিউটোরিয়ালের এই অংশের জন্য সহগামী ভিডিও ফুটেজ 1:05:07 এ শুরু হয়।

আমরা ইতিমধ্যে কাজ তৈরি করার জন্য একটি ফাংশন তৈরি করেছি, কিন্তু এটি এখনও সম্পূর্ণ হয়নি। এর কারণ যে কোনো নতুন টাস্ক তৈরি হওয়ার সময় আমি একটি ইভেন্ট ট্রিগার করতে চাই। দৃঢ়তা আমাদের নির্বিচারে ঘটনাগুলিকে ট্রিগার করতে দেয় যা বহিরাগত গ্রাহকরা সদস্যতা নিতে পারে। এটি আমাদের ক্লায়েন্ট সাইড অ্যাপ্লিকেশনের ভিতরে এই ইভেন্টগুলির জন্য শোনার অনুমতি দেবে, ইত্যাদি... চলুন একটি TaskCreated() ইভেন্ট তৈরি করি এবং এটিকে ট্রিগার করি যখনই createTask() ফাংশনে একটি নতুন টাস্ক তৈরি হয়:

pragma solidity ^0.5.0;

contract TodoList {

  // ...

  event TaskCreated(

    uint id,

    string content,

    bool completed

  );

  // ...

  function createTask(string memory _content) public {

    taskCount ++;

    tasks[taskCount] = Task(taskCount, _content, false);

    emit TaskCreated(taskCount, _content, false);

  }

}

এখন এই ইভেন্টটি যে কোনো নতুন টাস্ক তৈরি করার সময় ট্রিগার হয়েছে তা নিশ্চিত করার জন্য একটি পরীক্ষা তৈরি করা যাক। নতুন টাস্ক তৈরি হলে আমরা লেনদেনের রসিদ পরিদর্শন করব। এতে ইভেন্ট ডেটা ধারণ করা সমস্ত লগ তথ্য থাকবে। ইভেন্টটি সঠিকভাবে ট্রিগার হয়েছে কিনা তা নিশ্চিত করতে আমরা আমাদের পরীক্ষার ভিতরে এই ডেটাটি এইভাবে পরিদর্শন করতে পারি:

it('creates tasks', async () => {

  const result = await this.todoList.createTask('A new task')

  const taskCount = await this.todoList.taskCount()

  assert.equal(taskCount, 2)

  const event = result.logs[0].args

  assert.equal(event.id.toNumber(), 2)

  assert.equal(event.content, 'A new task')

  assert.equal(event.completed, false)

})

এখন পরীক্ষা চালানো যাক:

$ truffle test

হ্যাঁ, তারা পাস! 🎉 এখন কোড পরিবর্তিত হওয়ার পর থেকে ব্লকচেইনে স্মার্ট চুক্তির একটি নতুন অনুলিপি স্থাপন করা যাক:

$ truffle migrate --reset

এখন ক্লায়েন্ট সাইড কোড আপডেট করা যাক. আমরা প্রথমে index.html ফাইলে ফর্ম কোডটি আন-কমেন্ট করব:

<form onSubmit="App.createTask(); return false;">

  <input id="newTask" type="text" class="form-control" placeholder="Add task..." required>

  <input type="submit" hidden="">

</form>

এখন আমরা app.js ফাইলে এইভাবে একটি createTask() ফাংশন যোগ করব: