Web3.0 が来ていますが、フロントエンドフレンドリーですか?

最近、web3.0を求める声が本当に大きくなり、ますますクレイジーになってきています。フロントエンドにはどのようなテクノロジーが必要ですか?フロントエンドフレンドリーですか?次の記事でそれについて説明しますので、お役に立てれば幸いです。

まず、web3.0 がどのように派生したのかをご紹介します。

インターネット

最初にウェブとは何かについて話しましょう. 1989 年、CERN (欧州素粒子物理学研究所) のティム バーナーズ リー率いる技術グループは、インターネット用の新しいプロトコルとそのプロトコルを使用したドキュメント システムを提出しました。 World Wide Web は WWW (World Wide Web) と呼ばれ、現在では「インターネット」として知られています。その目的は、世界中の科学者がインターネットを使用して研究文書を交換できるようにすることです。使用するテクノロジーは主に HTML、URI、URL、HTTP などで、Web コンテンツを静的に表示できます。それが私たちの

Web1.0

一般に、Web1.0 とは 1990 年代から 21 世紀初頭のインターネットを指します。端的に言えば、ブログ、掲示板、そして AOL や CompuServe などの初期のポータルから構成されるインターネットであり、中国で有名な Sina、Sohu、NetEase などの Web サイトは当時の製品です。 Web1.0 では、静的な Web ページは基本的に受動的に読み取られ、Web ページ構築プロトコルには HTTP や FTP などが使用されます。 Web1.0 の場合、Web ページのコンテンツは雑誌と同様に読み取り専用で静的であり、表示することはできますが、変更したり操作したりすることはできません。 Web1.0 では、ユーザーは情報 (Web ページ) の消費者にすぎず、情報 (Web ページ) と対話することはできません。 Web1.0 では、平均帯域幅 50k のダイヤルアップ インターネット アクセスも使用します。

一般に、Web1.0 は読み取り専用であり、分散化されています。

Web2.0

そしてWeb2.0が台頭してきたのはおそらく2005年頃でしょう。 Web2.0 の一般的な意味は、ユーザーが Web ページ上で独自のコンテンツを作成および公開でき、インターネットに積極的に参加でき、単に Web ページを受動的に読むだけではなくなることです。最終的な資金と Web ページ全体の管理は依然として Web ページの所有者によって占められています。 Facebook、Twitter、YouTube などのソーシャル メディアもこの時代の産物です。もちろん、このようにユーザー生成コンテンツが急増すると、自然独占も生まれ、次のようないくつかの問題が発生します: 1. ユーザー データは集中化される; 2. ユーザー データは移植できない; 3. ユーザー データは販売される

つまり、Web2.0 は読み取りと書き込みの共存です。

Web3.0

Web3.0 は、電力とデータを統合する分散型ネットワークです。 1 つの企業に独占されるのではなく、ユーザーの手に集中化されます。分散型ブロックチェーン技術を使用してデータをネットワークに配信します。 Web3.0 は何年も前から使われている用語ですが、一般的になり始めたのはここ 1 年です。 Web3 ではネットワークが分散化されているため、ネットワークを制御する権限はなく、ネットワーク上に構築された分散型アプリケーション (dapps) はオープンです。分散型ネットワークのオープンな性質は、どの当事者もデータを制御したりアクセスを制限したりできないことを意味します。中央企業の許可なしに、誰でもさまざまな dapp を構築して接続できます。

Web3.0 の主な機能は次のとおりです。

• セマンティック Web - Web3.0 の鍵であり、マシンによるデータ処理を容易にします。

• AI - AI は、Web3.0 テクノロジーの人気に影響を与える主な要素の 1 つです。ユーザーのニーズを満たすために、大量の Web データを通じてマシンがより賢くなることを可能にします。

• 3D グラフィックス - Web3.0 は、2D よりも現実的な 3 次元のオンライン世界を提供する 3 次元テクノロジーにより、従来のインターネットを超えました。

• ユビキティ – 同時にどこにでも存在するという概念。モバイル デバイスの普及により、多くの人がいつでもどこでもインターネットに簡単にアクセスできるようになりました。

• オープン性と相互運用性。アプリケーション プログラミング インターフェイス、データ形式、プロトコル、およびデバイスとプラットフォーム間の相互運用性に関するオープン性を指します。

• グローバル データ リポジトリ、プログラムやネットワーク全体で情報にアクセスする機能。

つまり、Web3.0 はインターネットの読み取り、書き込み、所有に関するすべてです。

はじめに

私たちフロントエンド開発者にとって、どのようなテクノロジーを習得し、何を知っておくべきでしょうか?簡単に言えば、Web3 開発者は、ブロックチェーン上に存在し、ブロックチェーンと対話する分散型フルスタック アプリケーションを作成します。以下で簡単に説明しましょう。

まず専門用語が何であるかを理解しましょう:

• Web3: これは、イーサリアム ブロックチェーンとスマート コントラクト Smart Contract の間の接続です。
• イーサリアム イーサリアム: ユーザーがスマート コントラクトを作成することでネットワークと対話できるようにする分散型オープンソース ブロックチェーン。そのネイティブ暗号通貨はイーサリアムです。イーサリアムは、時価総額の点でビットコインに次いで2番目に価値のある仮想通貨です。 2013 年にヴィタリック ブテリンによって作成されました。
• スマート コントラクト スマート コントラクト: ブロックチェーン上に保存され、所定の条件が満たされたときに実行されるコンピューター プログラムです。スマート コントラクトは Solidity 言語で書かれています。
• 分散型: データのステータスは中央エンティティ、プラットフォーム プラットフォーム、または個人によって収集されません。
• ブロックチェーン: ブロックチェーン ネットワークは、情報が複数の共有ネットワークに保存されるポイントツーポイント接続です。デバイス間ではハッキングはほぼ不可能です。ネットワーク上に保存された情報の変更を困難または不可能にする方法で情報を記録するシステムです。
• Solidity: スマート コントラクトを作成するためのオブジェクト指向プログラミング言語。これは、さまざまなブロックチェーン プラットフォーム、特にイーサリアムにスマート コントラクトを実装するために使用されます。 Solidity の構文は JavaScript に似ています。 Solidity を理解するには、JavaScript などのプログラミング言語の知識があることが最適です。 Solidity に直接ジャンプするのは悪い考えです
• Dapp: Decentralized App の略です。これらは、分散型ネットワークまたはブロックチェーン上でバックエンド コード (主に Solidity で記述されたスマート コントラクト) を実行するアプリケーションです。 Dapps は、react、vue、Angular などのフロントエンド フレームワークを使用して構築できます。
• ビットコイン ビットコイン: 世界で初めて広く使用された暗号通貨。
• 暗号: 暗号通貨、暗号通貨、分散型デジタル通貨とも呼ばれます。
• NFT: Non-Fungible Token、チェーン上に記録された所有権を持つデジタル資産。
• DAO: 分散型自律組織、分散型自律組織。
• メタバース: 技術的手段によって作成された仮想世界の概念。
• DeFi 分散型金融: 分散型金融システム。
• トークントークン: 暗号通貨やNFTなどのデジタル資産の総称として理解できます。
• GameFi: ゲーム DeFi、中国版ブロックチェーン ゲーム、ゲーム内の金融システムは、暗号通貨と NFT を通じて現実にマッピングできます。

上記を紹介した後、開発者向けのブロックチェーンの分類について話しましょう。主にコアブロックチェーン開発（コアブロックチェーンエンジニアはブロックチェーンシステムのアーキテクチャとセキュリティプロトコルを担当します）とブロックチェーンソフトウェア開発（これらのブロックチェーン開発者はコアブロックチェーン開発者が提供する設計アーキテクチャを使用してDappsを作成します）。

開始

それでは、実際的なことに取り掛かりましょう。フロントエンド開発では、ブロックチェーンに常駐し、ブロックチェーンと対話する分散型アプリケーションを開発したいと考えています。 web3.js ライブラリと Ethers.js ライブラリ。

web3.js

web3.js は JavaScript API ライブラリです。 Ethereum 上で DApp を実行するには、web3.js ライブラリによって提供される web3 オブジェクトを使用できます。 web3.js は RPC 呼び出しを通じてローカル ノードと通信し、RPC レイヤーを公開する任意の Ethereum ノードで使用できます。 web3 には、eth オブジェクト - web3.eth (特に Ethereum ブロックチェーンとの対話用) と shh オブジェクト - web3.shh (Whisper との対話用) が含まれています。

#Add web3

web3 をプロジェクトに導入することは、既存の参照メソッドと基本的に同じです

npm: npm install web3
• bower: bower install web3
metor: meteor add ethereum:web3
• vanilla: dist./web3.min.js

#Use

次に、必要がありますweb3 のインスタンスを作成し、プロバイダーを設定します。 Mist 使用時の組み込みプロバイダーなど、既存のプロバイダーを上書きしないようにするには、最初に web3 インスタンスが既に存在するかどうかを確認する必要があります。

if (!web3) {
  web3 = new Web3(web3.currentProvider);
} else {
  web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
}

この API はローカルと対話するように設計されているため、 RPC ノード、すべて この関数はデフォルトで同期 HTTP リクエストを使用します。非同期リクエストを行う場合。ほとんどの関数では、非同期をサポートするためにパラメータ リストに続いてオプションのコールバック関数を渡すことができます。

web3.eth.getBlock(48, function(error, result){
  if(!error)
      console.log(result)
  else
      console.error(error);
})

API の特定のディレクトリは、

クリックして Ethers を表示できます。 js

イーサリアム ブロックチェーンとそのエコシステム用の小さいながらも完全な JavaScript API ライブラリを提供します。これはもともと ethers.io で使用されていましたが、現在はより一般的なライブラリに拡張されています。機能は基本的にweb3.jsと似ています。

機能は次のとおりです:

• 安全かつ信頼できる秘密キーをクライアント上に保持します
• インポートおよびエクスポートされた JSON ウォレット ファイル (Geth、Parity、クラウドセール) をサポート
• 任意のコントラクト ABI JavaScript メタクラスから作成ABIv2 や人間が判読できる ABI
• などのオブジェクトは、JSON-RPC、INFURA、Etherscan、または MetaMask を介した Ethereum ノードへの接続をサポートします。
• ライブラリは非常に小さいです (圧縮時約 88kb、非圧縮時 284kb)

ツール

もちろん、上記に加えて、私たちもそれを使用します 開発を改善するための多くのツール

#Truffle: プロジェクトのビルド依存関係として使用される、イーサリアム仮想マシンを使用してスマート コントラクトをコンパイルおよびテストするための開発環境を提供します
• Remix IDE: スマート コントラクトの作成と使用に最適な環境。これを使用して、ブラウザから直接スマート コントラクトを作成、変更、実行できます。どちらかというとエディタに似ています
• MetaMask: ブラウザからイーサリアム ブロックチェーン ネットワークに接続できるようにする Chrome 拡張機能
• Ganache: ローカル ブロックチェーン環境を提供しますスマート コントラクトをテストするには

Build

フルスタックを構築したい

Dapp プロジェクトにユーザー インターフェイスを追加したい場合は、react.js、vue .js または angular.js は、ethers.js または web3.js を使用してブロックチェーン ネットワークと簡単に統合できるため、優れた JavaScript フロントエンド フレームワークです。コードを記述せずに完全な Dapp を作成できるさまざまなプラットフォームがあります。Bunz、Dapp builder、Atra io、Bubble io

結論

一般的に、Web3.0 はテクノロジーではなくコンセプトです。私たちフロントエンド開発者はパニックになる必要はありません。テクノロジーがどのように発展しても、私たちは常にフロントエンドを使用します。私たちは、react.js、vue.js、または angular.js を使用して、独自に開発した Dapp アプリケーション用の独自のプラットフォームを構築することも、nodejs を使用して、イーサリアムが提供するツールキットである web3.js を使用してプラットフォームを完成させることもできます。コントラクトのコンパイル、リリース、およびコントラクト メソッドの呼び出し。

(学習ビデオ共有:

Web フロントエンドの紹介、基本プログラミング ビデオ)

以上がWeb3.0 が来ていますが、フロントエンドフレンドリーですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。