ওয়েব 3.জেএস এর মাধ্যমে আপনার প্রথম অ্যাপটি কীভাবে তৈরি করবেন
App হ'ল বিকেন্দ্রীভূত অ্যাপ্লিকেশনটির সংক্ষেপিত রূপ, যার ব্যাকএন্ড কোড পি 2 পি নেটওয়ার্কে কার্যকর করা হয় (পিয়ার-টু-পিয়ার)। এই নিবন্ধে, আমরা ইথেরিয়াম নেটওয়ার্কে চলমান অ্যাপটিতে ফোকাস করব (আপনি যদি ইথেরিয়াম সম্পর্কে আরও জানতে চান তবে আগের পোস্টটি পড়ুন)। একটি অ্যাপ্লিকেশন দুটি অংশ নিয়ে গঠিত:
সামঞ্জস্য একটি ব্যবহারকারী ইন্টারফেস প্রস্তাব
ব্যাকএন্ড গণনা এবং স্টোরেজ সম্পাদন করে।

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

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

উল্কা একটি সম্পূর্ণ স্ট্যাক জাভাস্ক্রিপ্ট পরিবেশ যা বিকাশকারীরা ওয়েব অ্যাপ্লিকেশন তৈরি করতে ব্যবহার করতে পারেন। এটি বিকাশকারীদের সমস্ত পরিবেশে একটি ভাষায় জাভাস্ক্রিপ্ট বিকাশ করতে সক্ষম করে: অ্যাপ্লিকেশন সার্ভার, ওয়েব ব্রাউজার এবং মোবাইল ডিভাইস। আপনি এটি আপনার কমান্ড লাইন (লিনাক্স বা ওএসএক্স) থেকে ডাউনলোড করতে পারেন:
$ কার্ল https://install.meteor.com/ | এসইচ
তবে উল্কাটি এমন একটি পরিবেশ যা সীমান্ত এবং ব্যাকএন্ডটি পরিচালনা করার জন্য একটি সহজ উপায় সরবরাহ করে। আপনি যদি jQuery, AngularJS ইত্যাদির মতো অন্যান্য পরিবেশের সাথে পরিচিত হন তবে এগুলি আপনার অ্যাপ তৈরির জন্য ভাল সরঞ্জাম।
3. বিল্ড-অ্যাপ
$ উল্কাপিঠান ডেপডেমো $ সিডি ডেপডেমো উল্কার
তারপরে লোকালহোস্টে যান: 3000. আপনি উল্কাপের একটি মানক ডেমো দেখতে পারেন। কনসোল এবং আপনার ব্রাউজারের প্রকারটি খোলার মাধ্যমে আপনার উল্কায় ওয়েব 3.js ফাইল ইনস্টল করা আছে কিনা তা আপনি পরীক্ষা করতে পারেন You
web3.eth.accounts
ওয়েব 3.js ফাইলটি ইনস্টল না করা থাকলে আপনি নিজে প্যাকেজটি যুক্ত করতে পারেন
$ উল্কা যোগ করুন ইথেরিয়াম: ওয়েব 3
আপনার অ্যাপ তৈরির পরে, আপনার ড্যাপডেমো ফোল্ডারটি দেখতে এমন হওয়া উচিত

আমরা ব্যবহারকারী ইন্টারফেস তৈরি করার আগে, আমাদের প্রথমে স্মার্ট চুক্তি তৈরি করতে হবে। এই নিবন্ধে, আমরা বেসিক স্মার্ট চুক্তি তৈরি করব যা প্রেরকের কাছ থেকে ইথার গ্রহণ করবে এবং এটি প্রাপকের কাছে প্রেরণ করবে। এটি খুব সহজ, তবে এটিথেরিয়াম চুক্তির কাঠামোটি আমাদের জানতে সহায়তা করে। আমরা চুক্তিটি ট্রফল বা অনলাইন সংকলক রিমিক্সে প্রোগ্রাম করতে পারি। দৃity়তা কোড
প্রাগমা সলিডিটি ^ 0.4.0;
চুক্তি প্রদানের সময় {চুক্তি করার কর্তৃপক্ষের ঠিকানা; ঠিকানা বেসরকারী বোর্ড; uint মান;
/ * কেবলমাত্র মালিক এই ফাংশনটি ব্যবহার করতে পারেন * / সংশোধক কেবলমাত্র ওনার () {যদি (msg.sender! = রেমিটার) নিক্ষেপ করেন; _; }
/ * মালিককে আরম্ভ করুন * / ফাংশন পেওনটাইম (ঠিকানা প্রাপক) প্রদেয় {
মান = msg.value; প্রত্যাখ্যান = প্রাপক; remittee.transfer (মান); }
/ * কমিটি পান * / ফাংশন getRemitee () পাবলিক ओনলাইনার রিটার্ন (ঠিকানা) {বিবেচনা; }}
প্রাগমা সলিডিটি ^ 0.4.0 কম্পাইলার সংস্করণ 0.4.0 এর আগে ঘোষণা করে এবং 0.5.o তে কাজ করে না (এই দ্বিতীয় শর্তটি using ব্যবহার করে যুক্ত করা হয়)। পেওনটাইম হল চুক্তির নাম। এবং সলিডিতে বেশ কয়েকটি ধরণের বেসিক ডেটা রয়েছে।
ঠিকানা: 160-বিট মান, পাটিগণিতের ক্রিয়াকলাপ অনুমোদিত নয়
uint / int: বিভিন্ন আকারের স্বাক্ষরযুক্ত এবং স্বাক্ষরিত পূর্ণসংখ্যার
uint8: স্বাক্ষরবিহীন পূর্ণসংখ্যা, আকার 8 বিট। Uint256 এর জন্যও ইউিন্ট একটি উপনাম।
বুলিয়ান: সত্য, মিথ্যা
বাইট / বাইট 32: একটি নির্দিষ্ট আকারের বাইট অ্যারে
বাইটস: গতিময়ভাবে বড় বাইট অ্যারে ar
স্ট্রিং: গতিশীল বড় অক্ষরের অ্যারে
কেবলমাত্র ওয়ান্ডার () কেবলমাত্র চুক্তির মালিককে সীমাবদ্ধ করে যারা এই ফাংশনটি ব্যবহার করতে পারে। ফাংশনগুলির আচরণটি সহজেই পরিবর্তকের মাধ্যমে পরিবর্তন করা যায়। এটি আমরা getRemittee ফাংশনে কীভাবে ব্যবহৃত হয় তা দেখতে পাচ্ছি।
আপনি প্রতিটি ফাংশনের জন্য প্যারামিটার সেট করতে পারেন, যেমন আমাদের মূল ফাংশন পেওটাইম। যেহেতু এটি পেওনটাইম ফাংশনে ইথার সংক্রমণ সম্পর্কিত, তাই কোন ফাংশন প্রদান করতে ব্যবহৃত হয় তা সংকলককে অবহিত করতে আমাদের ফাংশনের শিরোনামে প্রদানযোগ্য যুক্ত করতে হবে।
দ্রষ্টব্য: আমি ওয়্যার ট্রান্সফারটি এখানে কমিটিতে অর্থ প্রেরণের জন্য ব্যবহার করছি কারণ এটি আবার চালু হবে এবং বর্তমান চুক্তিটি যদি একরকম ব্যর্থ হয়ে গ্যাসের বাইরে চলে যায় বা কোনওভাবে ব্যর্থ হয় তবে এক ব্যতিক্রমের সাথে বর্তমান চুক্তিটি বাতিল করা হবে। যাইহোক, যখন আমরা প্রেরণটি ব্যবহার করি কেবল তখন কার্যকর হয় যদি কার্যকর হয় না। সুতরাং, চুক্তিটি সঠিকভাবে কাজ করছে কিনা তা নিশ্চিত করার জন্য ডিজাইনারদের প্রেরণ থেকে ফেরতের মূল্য পরীক্ষা করা উচিত। দুর্ভাগ্যক্রমে স্থানান্তর ফাংশনটি কেবল 4.0.10 এর পরে সংস্করণটিকে সমর্থন করে। ট্রফল বর্তমানে 4.0.10 সমর্থন করে না। আপনি যদি ফাংশনটি ব্যবহার করতে চান তবে আপনাকে অন্য সংকলকগুলি ব্যবহার করতে হবে।

আমাদের স্মার্ট কন্ট্রাক্ট কোড শেষ করার পরে, আমাদের বাইকোড এবং এবিআই দরকার। রিমিক্সের মাধ্যমে সেগুলি পাওয়ার সহজ উপায় রয়েছে। এরপরে, ইন্টারফেসটি সংরক্ষণ করার জন্য পেওনটাইম.জসন নামে একটি ফাইল তৈরি করুন।
ডেমো কোডটি ক্লায়েন্ট / মেইন এইচটিএমএল এবং ক্লায়েন্ট / মেইন.জেজে পরিবর্তন করুন
ইথার প্রেরণ করুন শিরোনাম মাথা> ইথার প্রেরণ h1> {{> সেন্ডইথর}}
body>

তারপরে আমাদের অ্যাপের প্রাথমিক ইউজার ইন্টারফেসটি থাকবে।
ইউজার ইন্টারফেস শেষ করার পরে, মোডিফায়াপকে কার্যকর করার জন্য আমাদের ক্লায়েন্ট / মেইন.জেগুলি পরিবর্তন করতে হবে।
'উল্কা / টেম্প্লেটিং' থেকে {টেমপ্লেট Import আমদানি করুন; উল্কা / প্রতিক্রিয়াশীল-ভার থেকে আমদানি করুন {ReactiveVar; । আমদানি './main.html';
var payontime = web3.eth.contract (পেওনটাইম_আর্টিফেক্টস); var বাইটকোড = "আপনার_বাইটেকোড";
টেমপ্লেট.সান্ডেথের.অনক্রিয়েটেড (ফাংশন হ্যালোঅনক্র্রেটেড () {this.start_balance = নতুন রিঅ্যাকটিভয়ার (0); এই.অ্যান্ড.বেলেন্স = নতুন রিঅ্যাকটিভভার (0);});
টেমপ্লেট.সান্ডেথের.হেল্পার্স ({স্টার্টবেলেন্স () Template টেম্পলেট.instance ()। স্টার্ট_বেলস.জেট (); end, শেষবেলা () {ফেরত টেম্পলেট.instance ()। শেষ_বেলা.সেট ();},});
টেমপ্লেট.সান্ডেথর.ইভেন্টস ({"# সেন্ড ক্লিক করুন" (ইভেন্ট, উদাহরণ) send প্রেরককে = web3.eth.accounts [0]; আসুন গ্রহীতা = $ ('# রিসিভার') দিন Val ভাল (); এথ_ম্যন্ট = let ('# পরিমাণ')। ভাল (); চলুন পরিমাণ = Web3.toWei (eth_amount, "ইথার");
web3.eth.getBalance (রিসিভার, ফাংশন (ত্রুটি, ফলাফল) {যদি (! ত্রুটি) so কনসোল.লগ ("স্থানান্তরের আগে:" + ফলাফল); উদাহরণস্বরূপ_সামগ্রী.সেট (Web3.fromWei (ফলাফল, "ইথার") ));} অন্য {কনসোল.লগ (ত্রুটি);}});
// একটি নতুন চুক্তি সরবরাহ করুন, কলব্যাক ফাংশন দু'বার সম্পাদিত হবে var newContract = payontime.new (প্রাপক, {ডেটা: বাইটকোড, থেকে: প্রেরক, মান: পরিমাণ}, ফাংশন (ত্রুটি, ফলাফল) {যদি (! এরর) so কনসোল.লগ (নতুন চুক্তি); যদি (! ফলাফল.address) {কনসোল.লগ (ফলাফল.transactionHash); // চুক্তি কার্যকর করে যে লেনদেনের হ্যাশ // দ্বিতীয় কলটিতে ঠিকানাটি পরীক্ষা করুন (চুক্তি প্রয়োগ করা হয়েছে)} অন্যথায় {var অ্যাডার = ফলাফল .এড্রেস; কনসোল.লগ (অ্যাডার); ওয়েব 3.থ.জেট ব্যালেন্স (প্রাপক, ফাংশন (ত্রুটি, ফলাফল) {যদি (! ত্রুটি) {কনসোল.লগ ("স্থানান্তরের পরে:" + ফলাফল); উদাহরণ.end_balance.set ( web3.fromWei (ফলাফল, "ইথার"));} অন্য {কনসোল.লগ (ত্রুটি);}});}} অন্য {কনসোল.লগ (ত্রুটি);}}); }});
payontime.new () হ'ল নেটওয়ার্কে স্মার্ট চুক্তি সরবরাহ করা। মূল চুক্তির ফাংশন পেওনটাইম (অ্যাড্রেস রিসিভার) এ একটি রিসিভার প্যারামিটার প্রয়োজন। অতএব আমরা যখন অ্যাপ স্থাপন করি তখন আমাদের প্যারামিটারটি পাস করতে হবে। এর মধ্যে আমরা নির্ধারণ করি চুক্তিটি কোথা থেকে আসে এবং ক্লায়েন্ট চুক্তিতে কতটা পাঠাতে চায়।
চুক্তিটি উপলব্ধ হওয়ার পরে, আমরা দুটি কলব্যাক পাই receive প্রথমবার এটি 64৪ টি অক্ষরের একটি স্ট্রিং প্রদান করে যা হ'ল লেনদেনের হ্যাশ। চলমান লেনদেনের উপর নজর রাখতে আপনি এটি ব্যবহার করতে পারেন। ইথারস্ক্যানের একটি ওয়েবসাইট রয়েছে যা ব্যবহারকারীকে তার লেনদেনের উপর নজর রাখতে সহায়তা করে। তারপরে স্মার্ট চুক্তির ঠিকানাটি নেটওয়ার্কে ফিরে আসে। পরের বার আপনি চুক্তিটি দেখতে চাইলে ঠিকানাটি সংকলকটিকে বলে যে আপনি কোন চুক্তিটি ব্যবহার করতে চান কারণ নেটওয়ার্কে বেশ কয়েকটি অনুরূপ চুক্তি রয়েছে।


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