検索
ホームページウェブフロントエンドフロントエンドQ&AWeb3.0 が来ていますが、フロントエンドフレンドリーですか?
Web3.0 が来ていますが、フロントエンドフレンドリーですか?Mar 15, 2023 pm 08:09 PM
フロントエンドweb3フロントエンドフレームワーク

最近、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 を作成できるさまざまなプラットフォームがあります。BunzDapp builderAtra ioBubble io

結論

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

(学習ビデオ共有:

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

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

声明
この記事は掘金社区で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
巧用CSS实现各种奇形怪状按钮(附代码)巧用CSS实现各种奇形怪状按钮(附代码)Jul 19, 2022 am 11:28 AM

本篇文章带大家看看怎么使用 CSS 轻松实现高频出现的各类奇形怪状按钮,希望对大家有所帮助!

5个常见的JavaScript内存错误5个常见的JavaScript内存错误Aug 25, 2022 am 10:27 AM

JavaScript 不提供任何内存管理操作。相反,内存由 JavaScript VM 通过内存回收过程管理,该过程称为垃圾收集。

Node.js 19正式发布,聊聊它的 6 大特性!Node.js 19正式发布,聊聊它的 6 大特性!Nov 16, 2022 pm 08:34 PM

Node 19已正式发布,下面本篇文章就来带大家详解了解一下Node.js 19的 6 大特性,希望对大家有所帮助!

实战:vscode中开发一个支持vue文件跳转到定义的插件实战:vscode中开发一个支持vue文件跳转到定义的插件Nov 16, 2022 pm 08:43 PM

vscode自身是支持vue文件组件跳转到定义的,但是支持的力度是非常弱的。我们在vue-cli的配置的下,可以写很多灵活的用法,这样可以提升我们的生产效率。但是正是这些灵活的写法,导致了vscode自身提供的功能无法支持跳转到文件定义。为了兼容这些灵活的写法,提高工作效率,所以写了一个vscode支持vue文件跳转到定义的插件。

浅析Vue3动态组件怎么进行异常处理浅析Vue3动态组件怎么进行异常处理Dec 02, 2022 pm 09:11 PM

Vue3动态组件怎么进行异常处理?下面本篇文章带大家聊聊Vue3 动态组件异常处理的方法,希望对大家有所帮助!

聊聊如何选择一个最好的Node.js Docker镜像?聊聊如何选择一个最好的Node.js Docker镜像?Dec 13, 2022 pm 08:00 PM

选择一个Node​的Docker镜像看起来像是一件小事,但是镜像的大小和潜在漏洞可能会对你的CI/CD流程和安全造成重大的影响。那我们如何选择一个最好Node.js Docker镜像呢?

聊聊Node.js中的 GC (垃圾回收)机制聊聊Node.js中的 GC (垃圾回收)机制Nov 29, 2022 pm 08:44 PM

Node.js 是如何做 GC (垃圾回收)的?下面本篇文章就来带大家了解一下。

【6大类】实用的前端处理文件的工具库,快来收藏吧!【6大类】实用的前端处理文件的工具库,快来收藏吧!Jul 15, 2022 pm 02:58 PM

本篇文章给大家整理和分享几个前端文件处理相关的实用工具库,共分成6大类一一介绍给大家,希望对大家有所帮助。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール