译文出自:登链翻译计划[1] 译者:翻译小组[2] 校对:Tiny 熊[3]
这个是一份适合初学者的开发者指南,我们将为你提供将Ceramic Network[4]集成到你的 Web 3 DApps[5]所需的所有工具和知识。
如果你喜欢看视频可以点击Ceramic 版本 V2.0.0 On Youtube[6]
Ceramic 网络是一个去中心化的数据网络,旨在为 Web 3 应用程序带来可组合的数据。Ceramic 可以处理很多类型的数据,但在本指南中,我们可以把 Ceramic 当作一个去中心化的 NOSQL 文档数据库。
本指南的目的是让你跟着一起实践,因为本文中会有图表和代码示例。
除了这个书面指南,我还提供了一个GitHub[7]仓库,其中包含我参考的所有代码。
如果你喜欢视频指南,而不是书面指南,你可以在Ceramic Youtube Channel[8]上观看视频演练。
在你开始之前,需要你已经具备了下面列出一般 web 开发技能。
本指南中使用的技能有
可选的技能
必要的工具(在继续之前需要安装)
在开始之前,我将介绍一些将在本指南中使用的关键术语。
去中心化的身份[16]
通常被称为DID[17]。
一个DID[18]是一个独特的身份标识符,包含关于你的元数据。诸如你的公钥[19],一些验证信息,以及被你允许访问哪些服务点和其他一些东西。
简单地说,DID[20]被用来作为 Ceramic 账户的身份标识。
使用此功能的依赖库是
dids
DID 解析器[21]
DID 解析器接受一个 DID 作为输入并返回一个DID 文档[22]。
这个解析过程将 DID 从一般的东西变成一个文件,准确地描述一个身份以及该身份允许执行的方法和能力。
简单地说,解析者将一个 DID 与它能够执行的行动结合起来。
使用此功能的依赖库是:
key-did-resolver
@glazed/did-datastore
以太坊 Providers[23]
如果你想让你的应用程序能够访问区块链,你需要使用一个提供者。
本指南将连接到以太坊区块链,因此使用了一个以太坊提供者。
提供者是用来代替自己运行区块链节点的。提供者有两个主要任务:
Metamask 是最流行的区块链提供者之一,它是将用于将我们的应用程序连接到以太坊区块链
简单地说,提供者认证用户在区块链上执行操作。
使用此功能的依赖库是:
key-did-provider-ed25519
@glazed/did-session
@ceramicnetwork/blockchain-utils-link
**数据的流类型(StreamTypes[24] **)
当我说到数据流的时候,我不是在说从消费的角度来看的流数据[25]。流是 Ceramic 对其数据结构的称呼。请随意阅读更多关于流[26]的信息。
StreamType[27]只是一个流的可能数据结构之一。在本指南中,我们将间接地使用 TileDocument
流类型[28],你可以把它看作是一个JSON Object[29]。这些 StreamTypes 是处理与数据有关的所有事情,它们在Ceramic nodes[30]上运行。
简单地说,StreamTypes 定义了数据结构和数据的状态被允许改变的方式。
使用此功能的依赖库是:
@glazed/did-datastore
数据模型[31]
数据模型通常用于表示一个应用程序的功能:比如笔记、用户资料、博客文章,甚至是社交图谱。
数据模型是可组合数据的核心。一个应用程序使用多个数据模型是很常见的,而一个数据模型在多个应用程序中使用也是很常见的!
这样做的可组合性也使开发者的体验更好。在 Ceramic 上构建一个应用程序看起来就像浏览一个数据模型的市场,将它们插入你的应用程序,并自动获得网络上存储在这些模型中的所有数据。
简单地说,数据模型是在一个应用程序中实现数据可组合性的东西。
你将建立一个简单的网络应用,对 Ceramic 网络上的数据进行简单的读写操作。为了使这个应用程序正常工作,它需要按照以下罗列的顺序完成步骤:
TileDocument
流。我在关键术语[32]一节中提到了一些依赖关系,但在你进一步了解之前,还有一些其他的依赖关系需要了解:
Ceramic 客户端[33]
这是一个 Web 客户端,它允许你的应用程序连接到作为网络一部分的Ceramic 节点[34]。
用于此功能的依赖是:
@ceramicnetwork/http-client
Webpack[35]
你将编写的 JavaScript 使用 Node 包,使其成为服务器端的代码。然而,Web 浏览器则需要客户端的代码。
Webpack 是一个很好的模块,它将把你将要编写的服务器端 JavaScript 转换成浏览器可以理解的客户端 JavaScript。
为了达到这个目的,我们需要一些依赖库。
用于此功能的依赖库是:
webpack
webpack-cli
buffer
。我将引导你通过使用简单的 HTML 和 CSS 来构建这个应用程序前端的主要步骤
md getting-started-with-ceramic
MacOS/Linux
mkdir getting-started-with-ceramic
index.html
的文件。index.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.0">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="/favicon.ico">
<title>Getting Started</title>
</head>
<body>
<!-- create header with connect button -->
<header class="SiteHeader">
<div class="HeaderContainer">
<h1 id="pageTitle">Getting Start With Ceramic</h1>
</div>
<div class="HeaderContainer">
<button id="walletBtn"></button>
</div>
</header>
<div class="MainCont">
<div class="DataBlocks">
<div class="DataBlock">
<div id="basicProfile">
<div class="BodyContainer">
<h2>Basic Profile</h2>
<p>Read from Ceramic Datamodel</p>
<br>
<p class="ProfileData" id="profileName"></p>
<p class="ProfileData" id="profileGender"></p>
<p class="ProfileData" id="profileCountry"></p>
</div>
</div>
</div>
</div>
<div class="ProfileForm">
<div class="BodyContainer">
<h2>Update Basic Profile on Ceramic</h2>
<br>
<form id="profileForm">
<div class="formfield">
<label class="formLabel" for="name">Name:</label>
<input class="forminput" type="text" id="name" placeholder="John Doe">
</div>
<div class="formfield">
<label class="formLabel" for="country">Country:</label>
<input class="forminput" type="text" id="country" placeholder="USA">
</div>
<div class="formfield">
<label class="formLabel" for="gender">Gender:</label>
<select class="forminput" id="gender">
<option value="female">Female</option>
<option value="male">Male</option>
<option value="non-binary">Non-Binary</option>
<option value="other">Other</option>
</select>
</div>
<div class="formfield">
<input class="forminput" type="submit" id="submitBtn" value="Submit">
</div>
</form>
</div>
</div>
</div>
<!-- <button id="setBasicProf">Set Profile</button>
<button id="getBasicProf">Get Profile</button> -->
<script src="dist/bundle.js" type="module"></script>
</body>
</html>
getting-started-with-ceramic
目录下创建一个名为style.css
的文件。这个文件应该包含以下内容:* {
margin: 0;
padding: 0;
}
.SiteHeader {
display: flex;
justify-content: space-between;
padding: 10px;
background-color: orange;
}
.HeaderContainer {
display: flex;
align-items: center;
}
.MainCont {
display: flex;
justify-content: space-around;
padding: 10px;
}
.DataBlock {
margin-bottom: 10px;
}
.BodyContainer {
background-color: lightsalmon;
border: 1px solid black;
border-radius: 30px;
padding: 20px;
min-width: 250px;
}
.ProfileForm {
min-width: 400px;
}
.formfield {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.forminput {
min-width: 150px;
}
#submitBtn {
display: block;
margin: auto;
width: auto;
}
.ProfileData {
font-weight: bold;
}
现在,如果你在浏览器中打开index.html
文件,或使用LiveShare[36]这样的工具,你应该看到这样的内容:
现在应用程序还没有实际功能,它没有内置的逻辑,它只是一个有一些内容和一些样式的静态页面。
在这一步,我将向你展示如何使用提供者、解析器和 Ceramic 将这个应用程序从一个静态网站转变为一个 web 3 dapp!
npm init -y
Yarn
yarn init -y
npm install -D buffer dids key-did-provider-ed25519 key-did-resolver webpack webpack-cli
常规依赖项
npm install @ceramicnetwork/blockchain-utils-linking @ceramicnetwork/http-client @glazed/did-datastore @glazed/did-session
Yarn
开发依赖项
yarn add -D buffer dids key-did-provider-ed25519 key-did-resolver webpack webpack-cli
常规依赖项
yarn add @ceramicnetwork/blockchain-utils-linking @ceramicnetwork/http-client @glazed/did-datastore @glazed/did-session
getting-started-with-ceramic
目录下创建一个名为main.js
的文件。//main.js
import { CeramicClient } from '@ceramicnetwork/http-client'
import { EthereumAuthProvider } from '@ceramicnetwork/blockchain-utils-linking'
import { DIDDataStore } from '@glazed/did-datastore'
import { DIDSession } from '@glazed/did-session'
你是否注意到,有些软件包来自
@ceramicnetwork
,有些来自@glazed
? 来自@ceramicnetwork 的包是 Ceramic 核心协议的一部分。它们帮助应用程序连接到 Ceramic 节点。 来自@glazed 的软件包不是核心 Ceramic 协议的一部分,它们被称为中间件
,为开发者提供一些额外的功能和便利。
main.js
中添加以下内容:import { CeramicClient } from '@ceramicnetwork/http-client'
import { EthereumAuthProvider } from '@ceramicnetwork/blockchain-utils-linking'
import { DIDDataStore } from '@glazed/did-datastore'
import { DIDSession } from '@glazed/did-session'
const profileForm = document.getElementById('profileForm')
const walletBtn = document.getElementById('walletBtn')
const profileName = document.getElementById('profileName')
const profileGender = document.getElementById('profileGender')
const profileCountry = document.getElementById('profileCountry')
const submitBtn = document.getElementById('submitBtn')
CeramiClient
,通过在main.js
文件中添加以下代码,创建一个新的 Ceramic 客户端实例://main.js
import { CeramicClient } from '@ceramicnetwork/http-client'
import { EthereumAuthProvider } from '@ceramicnetwork/blockchain-utils-linking'
import { DIDDataStore } from '@glazed/did-datastore'
import { DIDSession } from '@glazed/did-session'
const profileForm = document.getElementById('profileForm')
const walletBtn = document.getElementById('walletBtn')
const profileName = document.getElementById('profileName')
const profileGender = document.getElementById('profileGender')
const profileCountry = document.getElementById('profileCountry')
const submitBtn = document.getElementById('submitBtn')
const ceramic = new CeramicClient("https://ceramic-clay.3boxlabs.com")
目前有 4 种可能的网络来供 Ceramic HTTP 客户端连接。你可以点击每个链接来了解更多关于网络的信息。
aliases
的变量,它将保存BasicProfile
数据模型的引用://main.js
import { CeramicClient } from '@ceramicnetwork/http-client'
import { EthereumAuthProvider } from '@ceramicnetwork/blockchain-utils-linking'
import { DIDDataStore } from '@glazed/did-datastore'
import { DIDSession } from '@glazed/did-session'
const profileForm = document.getElementById('profileForm')
const walletBtn = document.getElementById('walletBtn')
const profileName = document.getElementById('profileName')
const profileGender = document.getElementById('profileGender')
const profileCountry = document.getElementById('profileCountry')
const submitBtn = document.getElementById('submitBtn')
const ceramic = new CeramicClient("https://ceramic-clay.3boxlabs.com")
const aliases = {
schemas: {
basicProfile: 'ceramic://k3y52l7qbv1frxt706gqfzmq6cbqdkptzk8uudaryhlkf6ly9vx21hqu4r6k1jqio',
},
definitions: {
BasicProfile: 'kjzl6cwe1jw145cjbeko9kil8g9bxszjhyde21ob8epxuxkaon1izyqsu8wgcic',
},
tiles: {},
}
数据模型的各个部分:
schemas
:定义数据模型的 JSON schemadefinitions
: 将一个用户友好的模型名称和描述链接到一个特定的 schema。tiles
: 在 schema 内参数集的各条数据记录。
DIDDataStore
允许应用程序从 Ceramic 写入和读取数据。DIDDataStore
是基于数据模型的。在main.js
中添加以下代码,以配置DIDDataStore
,它使用到上面定义的aliases
和ceramic instance
。//main.js
import { CeramicClient } from '@ceramicnetwork/http-client'
import { EthereumAuthProvider } from '@ceramicnetwork/blockchain-utils-linking'
import { DIDDataStore } from '@glazed/did-datastore'
import { DIDSession } from '@glazed/did-session'
const profileForm = document.getElementById('profileForm')
const walletBtn = document.getElementById('walletBtn')
const profileName = document.getElementById('profileName')
const profileGender = document.getElementById('profileGender')
const profileCountry = document.getElementById('profileCountry')
const submitBtn = document.getElementById('submitBtn')
const ceramic = new CeramicClient("https://ceramic-clay.3boxlabs.com")
const aliases = {
schemas: {
basicProfile: 'ceramic://k3y52l7qbv1frxt706gqfzmq6cbqdkptzk8uudaryhlkf6ly9vx21hqu4r6k1jqio',
},
definitions: {
BasicProfile: 'kjzl6cwe1jw145cjbeko9kil8g9bxszjhyde21ob8epxuxkaon1izyqsu8wgcic',
},
tiles: {},
}
const datastore = new DIDDataStore({ ceramic, model: aliases })
如果你的应用程序需要,你可以通过添加必要的
schema
、definition
和tiles
向aliases
变量添加更多的数据模型!
你现在有了启动和运行这个应用程序所需的基本基础。Ceramic 客户端和数据模型的所有配置已经完成。
接下来的部分将指导你使用以太坊 Provider, Metamask[44],用以太坊区块链来验证用户。
正在使用的认证流程被称为Sign-In With Ethereum[45],以下简称为 SIWE。
请看这篇很棒的文章以了解更多。为什么用以太坊登录是一个游戏规则改变者[46]。
让我们把 SIWE 添加到这个应用中吧!
authenticateWithEthereum
,它使用提供者,然后使用 Resovler,最后把 DID 分配给你之前创建的 Ceramic Client。在main.js
中添加这段代码来完成这些任务://main.js
async function authenticateWithEthereum(ethereumProvider) {
const accounts = await ethereumProvider.request({
method: 'eth_requestAccounts',
})
const authProvider = new EthereumAuthProvider(ethereumProvider, accounts[0])
const session = new DIDSession({ authProvider })
const did = await session.authorize()
ceramic.did = did
}
DIDSession
是它在这个代码片断中为你处理 SIWE 认证流程的。
window
对象中注入自己作为提供者。它可以通过window.ethereum
引用。如果应用程序的最终用户没有安装Metamask[49],或其他提供者,我们的应用程序将无法连接到区块链上。让我们把这些知识应用于一个新的异步函数[50],称为auth
。将下面的代码添加到main.js
中://main.js
async function authenticateWithEthereum(ethereumProvider) {
const accounts = await ethereumProvider.request({
method: 'eth_requestAccounts',
})
const authProvider = new EthereumAuthProvider(ethereumProvider, accounts[0])
const session = new DIDSession({ authProvider })
const did = await session.authorize()
ceramic.did = did
}
// newly added auth function here:
async function auth() {
if (window.ethereum == null) {
throw new Error('No injected Ethereum provider found')
}
await authenticateWithEthereum(window.ethereum)
}
auth()
首先检查window.ethereum
是否存在,然后再尝试调用authenticateWithEthereum()
。这可以防止应用程序在没有注入提供者的情况下挂起!
完整的main.js
文件目前看起来应该是这样的:
//main.js
// import all dependencies:
import { CeramicClient } from '@ceramicnetwork/http-client'
import { EthereumAuthProvider } from '@ceramicnetwork/blockchain-utils-linking'
import { DIDDataStore } from '@glazed/did-datastore'
import { DIDSession } from '@glazed/did-session'
//cache a reference to the DOM Elements
const profileForm = document.getElementById('profileForm')
const walletBtn = document.getElementById('walletBtn')
const profileName = document.getElementById('profileName')
const profileGender = document.getElementById('profileGender')
const profileCountry = document.getElementById('profileCountry')
const submitBtn = document.getElementById('submitBtn')
// create a new CeramicClient instance:
const ceramic = new CeramicClient("https://ceramic-clay.3boxlabs.com")
// reference the data models this application will use:
const aliases = {
schemas: {
basicProfile: 'ceramic://k3y52l7qbv1frxt706gqfzmq6cbqdkptzk8uudaryhlkf6ly9vx21hqu4r6k1jqio',
},
definitions: {
BasicProfile: 'kjzl6cwe1jw145cjbeko9kil8g9bxszjhyde21ob8epxuxkaon1izyqsu8wgcic',
},
tiles: {},
}
// configure the datastore to use the ceramic instance and data models referenced above:
const datastore = new DIDDataStore({ ceramic, model: aliases })
// this function authenticates the user using SIWE
async function authenticateWithEthereum(ethereumProvider) {
const accounts = await ethereumProvider.request({
method: 'eth_requestAccounts',
})
const authProvider = new EthereumAuthProvider(ethereumProvider, accounts[0])
const session = new DIDSession({ authProvider })
const did = await session.authorize()
ceramic.did = did
}
// check for a provider, then authenticate if the user has one injected:
async function auth() {
if (window.ethereum == null) {
throw new Error('No injected Ethereum provider found')
}
await authenticateWithEthereum(window.ethereum)
}
接下来的函数将使用DIDDatastore
来从 Ceramic 网络中获取数据。我将称它为getProfileFromCeramic
,它也是一个异步函数[51]。
函数将在main.js
文件中声明。
main.js
中添加getProfileFromCeramic
函数://main.js
async function getProfileFromCeramic() {
try {
//use the DIDDatastore to get profile data from Ceramic
const profile = await datastore.get('BasicProfile')
//render profile data to the DOM (not written yet)
renderProfileData(profile)
} catch (error) {
console.error(error)
}
}
正如你所看到的,通过调用datastore.get()
方法,你可以引用希望读取数据模型的定义
。
DIDDatastore 使用分配给 Ceramic 客户端的 DID 来进行这个调用。它返回的 profile 对象存储在profile
变量中。
renderProfileData
函数来提取这些资料数据并在浏览器窗口中显示。由于这不是一个网页开发的指南,我将不详细介绍这个函数的作用。在你的main.js
文件中加入以下内容:function renderProfileData(data) {
if (!data) return
data.name ? profileName.innerHTML = "Name: " + data.name : profileName.innerHTML = "Name: "
data.gender ? profileGender.innerHTML = "Gender: " + data.gender : profileGender.innerHTML = "Gender: "
data.country ? profileCountry.innerHTML = "Country: " + data.country : profileCountry.innerHTML = "Country: "
}
我想指出的是,
data
是datastore.get()
调用返回的profile
对象。数据的属性在 "BasicProfile "数据模型中定义。查看Ceramic 数据模型仓库[52]中的数据模型,可以查看完整的属性列表[53]。
这就是使用 DIDDataStore
从 Ceramic 网络中读取数据的全部内容!
main.js
完整代码如下:
//main.js
// import all dependencies:
import { CeramicClient } from '@ceramicnetwork/http-client'
import { EthereumAuthProvider } from '@ceramicnetwork/blockchain-utils-linking'
import { DIDDataStore } from '@glazed/did-datastore'
import { DIDSession } from '@glazed/did-session'
//cache a reference to the DOM Elements
const profileForm = document.getElementById('profileForm')
const walletBtn = document.getElementById('walletBtn')
const profileName = document.getElementById('profileName')
const profileGender = document.getElementById('profileGender')
const profileCountry = document.getElementById('profileCountry')
const submitBtn = document.getElementById('submitBtn')
// create a new CeramicClient instance:
const ceramic = new CeramicClient("https://ceramic-clay.3boxlabs.com")
// reference the data models this application will use:
const aliases = {
schemas: {
basicProfile: 'ceramic://k3y52l7qbv1frxt706gqfzmq6cbqdkptzk8uudaryhlkf6ly9vx21hqu4r6k1jqio',
},
definitions: {
BasicProfile: 'kjzl6cwe1jw145cjbeko9kil8g9bxszjhyde21ob8epxuxkaon1izyqsu8wgcic',
},
tiles: {},
}
// configure the datastore to use the ceramic instance and data models referenced above:
const datastore = new DIDDataStore({ ceramic, model: aliases })
// this function authenticates the user using SIWE
async function authenticateWithEthereum(ethereumProvider) {
const accounts = await ethereumProvider.request({
method: 'eth_requestAccounts',
})
const authProvider = new EthereumAuthProvider(ethereumProvider, accounts[0])
const session = new DIDSession({ authProvider })
const did = await session.authorize()
ceramic.did = did
}
// check for a provider, then authenticate if the user has one injected:
async function auth() {
if (window.ethereum == null) {
throw new Error('No injected Ethereum provider found')
}
await authenticateWithEthereum(window.ethereum)
}
//retrieve BasicProfile data from ceramic using the DIDDatastore
async function getProfileFromCeramic() {
try {
//use the DIDDatastore to get profile data from Ceramic
const profile = await datastore.get('BasicProfile')
//render profile data to the DOM (not written yet)
renderProfileData(profile)
} catch (error) {
console.error(error)
}
}
//Do some fun web dev stuff to present the BasicProfile in the DOM
function renderProfileData(data) {
if (!data) return
data.name ? profileName.innerHTML = "Name: " + data.name : profileName.innerHTML = "Name: "
data.gender ? profileGender.innerHTML = "Gender: " + data.gender : profileGender.innerHTML = "Gender: "
data.country ? profileCountry.innerHTML = "Country: " + data.country : profileCountry.innerHTML = "Country: "
}
接下来要实现的是使用 DIDDatastore
向 Ceramic 网络写数据。
updateProfileOnCeramic
函数应该是一个异步函数[54]。在main.js
中添加以下内容:async function updateProfileOnCeramic() {
try {
const updatedProfile = getFormProfile()
submitBtn.value = "Updating..."
//use the DIDDatastore to merge profile data to Ceramic
await datastore.merge('BasicProfile', updatedProfile)
//use the DIDDatastore to get profile data from Ceramic
const profile = await datastore.get('BasicProfile')
renderProfileData(profile)
submitBtn.value = "Submit"
} catch (error) {
console.error(error)
}
}
在继续前进之前,有两件重要的事情要了解: 首先:
DIDDatastore
有两个方法允许向数据模型写入:
merge()
:只写已经改变的字段。set()
:覆盖所有字段,包括那些没有改变的字段。这可能导致数据以不需要的方式被删除。由于这个原因,我们建议使用 merge 而不是 set。其次:在本案例下,从 DIDDatastore 中读取数据并使用renderProfileData()
将其渲染到 DOM 中并不是优秀的方式。在这个阶段没有真正的必要从 Ceramic 读取数据。这样做是为了向你展示读和写是多么简单,因为在使用 DIDDatastore 时,每一个都只需要一行代码。
getFormProfile()
的调用。这个函数目前并不存在。现在让我们把它添加到main.js
中。在main.js
中加入以下代码:function getFormProfile() {
const name = document.getElementById('name').value
const country = document.getElementById('country').value
const gender = document.getElementById('gender').value
return {
name,
country,
gender
}
}
如果你想知道如何想出
name
、country
和gender
这些对象属性的,它们都可以在BasicProfile[55]数据模型中找到。BasicProfile 还有一些额外的属性,在这个项目中没有被引用。你应该在自己的项目中探索这些属性的使用!
你成功了! 这就是你开始使用 Ceramic 所需要的一切。你现在知道的足够多了,足够去创造惊人的 dapp。
不过你还没有完全完成。有一些小东西必须建立起来才能使这个应用程序完全工作。
本节以及下一节配置 Webpack[56],与 Ceramic 没有必然联系。这些部分涵盖了一些必要的操作,例如在应用程序的按钮上的操作,以及将服务器端转换成浏览器可以理解的代码。
按钮是如何工作的
应用程序的按钮元素将使用Event Listeners[57]来让它们被点击时执行功能。
以下所有的代码都需要放在main.js
中:
连接钱包
按钮时,事件监听器可以调用这个函数:async function connectWallet(authFunction, callback) {
try {
walletBtn.innerHTML = "Connecting..."
await authFunction()
await callback()
walletBtn.innerHTML = "Wallet Connected"
} catch (error) {
console.error(error)
}
}
innerHTML
,所以在继续之前,让我们先解决这个问题。在之前发生在main.js
的 DOM 缓存下,添加以下一行:walletBtn.innerHTML = "Connect Wallet"
walletBtn.innerHTML
行下添加这段代码来设置该占位符文本:walletBtn.innerHTML = "Connect Wallet"
profileName.innerHTML = "Name: "
profileGender.innerHTML = "Gender: "
profileCountry.innerHTML = "Country: "
connectWallet
函数。另一个将放在作为profileForm
元素一部分的按钮上。在main.js
中添加这些代码:walletBtn.addEventListener('click', async () => await connectWallet(auth, getProfileFromCeramic))
profileForm.addEventListener('submit', async (e) => {
e.preventDefault()
await updateProfileOnCeramic()
})
好了!这就是应用程序需要的所有 JavaScript:
//main.js
// import all dependencies:
import { CeramicClient } from '@ceramicnetwork/http-client'
import { EthereumAuthProvider } from '@ceramicnetwork/blockchain-utils-linking'
import { DIDDataStore } from '@glazed/did-datastore'
import { DIDSession } from '@glazed/did-session'
//cache a reference to the DOM Elements
const profileForm = document.getElementById('profileForm')
const walletBtn = document.getElementById('walletBtn')
const profileName = document.getElementById('profileName')
const profileGender = document.getElementById('profileGender')
const profileCountry = document.getElementById('profileCountry')
const submitBtn = document.getElementById('submitBtn')
// give the wallet button an initial value to display
walletBtn.innerHTML = "Connect Wallet"
// setup placeholder text where profile should render
walletBtn.innerHTML = "Connect Wallet"
profileName.innerHTML = "Name: "
profileGender.innerHTML = "Gender: "
profileCountry.innerHTML = "Country: "
// create a new CeramicClient instance:
const ceramic = new CeramicClient("https://ceramic-clay.3boxlabs.com")
// reference the data models this application will use:
const aliases = {
schemas: {
basicProfile: 'ceramic://k3y52l7qbv1frxt706gqfzmq6cbqdkptzk8uudaryhlkf6ly9vx21hqu4r6k1jqio',
},
definitions: {
BasicProfile: 'kjzl6cwe1jw145cjbeko9kil8g9bxszjhyde21ob8epxuxkaon1izyqsu8wgcic',
},
tiles: {},
}
// configure the datastore to use the ceramic instance and data models referenced above:
const datastore = new DIDDataStore({ ceramic, model: aliases })
// this function authenticates the user using SIWE
async function authenticateWithEthereum(ethereumProvider) {
const accounts = await ethereumProvider.request({
method: 'eth_requestAccounts',
})
const authProvider = new EthereumAuthProvider(ethereumProvider, accounts[0])
const session = new DIDSession({ authProvider })
const did = await session.authorize()
ceramic.did = did
}
// check for a provider, then authenticate if the user has one injected:
async function auth() {
if (window.ethereum == null) {
throw new Error('No injected Ethereum provider found')
}
await authenticateWithEthereum(window.ethereum)
}
//retrieve BasicProfile data from ceramic using the DIDDatastore
async function getProfileFromCeramic() {
try {
//use the DIDDatastore to get profile data from Ceramic
const profile = await datastore.get('BasicProfile')
//render profile data to the DOM (not written yet)
renderProfileData(profile)
} catch (error) {
console.error(error)
}
}
//Do some fun web dev stuff to present the BasicProfile in the DOM
function renderProfileData(data) {
if (!data) return
data.name ? profileName.innerHTML = "Name: " + data.name : profileName.innerHTML = "Name: "
data.gender ? profileGender.innerHTML = "Gender: " + data.gender : profileGender.innerHTML = "Gender: "
data.country ? profileCountry.innerHTML = "Country: " + data.country : profileCountry.innerHTML = "Country: "
}
//this function uses the datastore to write data to the Ceramic Network as well as read data back before populating the changes in the DOM
async function updateProfileOnCeramic() {
try {
const updatedProfile = getFormProfile()
submitBtn.value = "Updating..."
//use the DIDDatastore to merge profile data to Ceramic
await datastore.merge('BasicProfile', updatedProfile)
//use the DIDDatastore to get profile data from Ceramic
const profile = await datastore.get('BasicProfile')
renderProfileData(profile)
submitBtn.value = "Submit"
} catch (error) {
console.error(error)
}
}
// Parse the form and return the values so the BasicProfile can be updated
function getFormProfile() {
const name = document.getElementById('name').value
const country = document.getElementById('country').value
const gender = document.getElementById('gender').value
// object needs to conform to the datamodel
// name -> exists
// hair-color -> DOES NOT EXIST
return {
name,
country,
gender
}
}
//a simple utility funciton that will get called from the event listener attached to the connect wallet button
async function connectWallet(authFunction, callback) {
try {
walletBtn.innerHTML = "Connecting..."
await authFunction()
await callback()
walletBtn.innerHTML = "Wallet Connected"
} catch (error) {
console.error(error)
}
}
//add both event listeners to that the buttons work when they are clicked
walletBtn.addEventListener('click', async () => await connectWallet(auth, getProfileFromCeramic))
profileForm.addEventListener('submit', async (e) => {
e.preventDefault()
await updateProfileOnCeramic()
})
下面的部分将为这个应用程序配置Webpack[58]。
getting-started-with-ceramic
目录下创建一个名为webpack.config.js
的新文件,并在其中放置以下内容。const path = require('path');
module.exports = {
entry: './main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
mode: 'development',
resolve: {
fallback: { buffer: require.resolve('buffer') }
}
}
如果你想知道这段代码的作用,请务必查看Webpack[59]。
package.json
文件。你将只修改这个文件的scripts
。对package.json
做如下修改:"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
}
为了清楚起见,这里的改动是增加了一个脚本,名为 build,用来调用 webpack。
完整的package.json
可以在下面找到:
{
"name": "getting-started-ceramic",
"version": "1.0.0",
"description": "",
"main": "utils.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"buffer": "^6.0.3",
"dids": "^3.1.0",
"key-did-provider-ed25519": "^2.0.0",
"key-did-resolver": "^2.0.4",
"webpack": "^5.72.1",
"webpack-cli": "^4.9.2"
},
"dependencies": {
"@ceramicnetwork/blockchain-utils-linking": "^2.0.4",
"@ceramicnetwork/http-client": "^2.0.4",
"@glazed/did-datastore": "^0.3.1",
"@glazed/did-session": "^0.0.1"
}
}
根据你完成本指南的时间,文件上可能有小的版本差异。这是正常的,没有什么可担心的。
NPM
npm run build
Yarn
yarn run build
恭喜你! 你现在可以在浏览器中重新打开index.html
文件,或者通过使用LiveShare[60]。
使用你的Metamask[61]钱包,你将能够用 Ethereum 登录[62],从 Ceramic 检索你的BasicProfile
,并对该配置文件的一组有限属性进行修改!
如果你从未在Ceramic Network[63]上配置过
BasicProfile
,你最初将不会收到数据。你需要使用选择的钱包账户,通过Self.id[64]应用程序或使用本应用程序所包含的表格来创建一个配置文件!
本翻译由 Duet Protocol[65] 赞助支持。
原文:https://blog.ceramic.network/getting-started-with-ceramic/
[1]
登链翻译计划: https://github.com/lbc-team/Pioneer
[2]
翻译小组: https://learnblockchain.cn/people/412
[3]
Tiny 熊: https://learnblockchain.cn/people/15
[4]
Ceramic Network: https://developers.ceramic.network/
[5]
DApps: https://learnblockchain.cn/tags/DApp
[6]
Ceramic版本V2.0.0 On Youtube: https://www.youtube.com/watch?v=rpyokDPnyUs
[7]
GitHub: https://www.github.com/ceramicstudio/guide-getting-started-with-ceramic
[8]
Ceramic Youtube Channel: https://www.youtube.com/channel/UCgCLq5dx7sX-yUrrEbtYqVw
[9]
基础JavaScript: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics
[10]
客户端JS与服务器端JS: https://computersciencewiki.org/index.php/Client-side_scripting_and_server-side_scripting
[11]
Webpack: https://webpack.js.org/
[12]
Git: https://git-scm.com/
[13]
NodeJS: https://www.nodejs.org/
[14]
NPM: https://www.npmjs.com/
[15]
Yarn: https://yarnpkg.com/
[16]
去中心化的身份: https://www.w3.org/TR/did-core/
[17]
DID: https://www.w3.org/TR/did-core/#dfn-decentralized-identifiers
[18]
DID: https://www.w3.org/TR/did-core/#dfn-decentralized-identifiers
[19]
公钥: https://en.wikipedia.org/wiki/Public-key_cryptography
[20]
DID: https://www.w3.org/TR/did-core/#dfn-decentralized-identifiers
[21]
DID解析器: https://www.w3.org/TR/did-core/#dfn-did-resolvers
[22]
DID文档: https://www.w3.org/TR/did-core/#dfn-did-documents
[23]
以太坊 Providers: https://docs.ethers.io/v4/api-providers.html#providers
[24]
StreamTypes: https://developers.ceramic.network/learn/glossary/#streamtypes
[25]
流数据: https://en.wikipedia.org/wiki/Streaming_data
[26]
流: https://developers.ceramic.network/learn/glossary/#streams
[27]
StreamType: https://developers.ceramic.network/learn/glossary/#streamtypes
[28]
流类型: https://developers.ceramic.network/learn/glossary/#streamtypes
[29]
JSON Object: https://www.json.org/json-en.html
[30]
Ceramic nodes: https://developers.ceramic.network/learn/glossary/#nodes
[31]
数据模型: https://developers.ceramic.network/docs/advanced/standards/data-models/#data-models
[32]
关键术语: #明确关键术语
[33]
Ceramic客户端: https://developers.ceramic.network/reference/core-clients/ceramic-http/
[34]
Ceramic节点: https://developers.ceramic.network/learn/glossary/#nodes
[35]
Webpack: https://webpack.js.org/
[36]
LiveShare: https://visualstudio.microsoft.com/services/live-share/
[37]
NPM: https://www.npmjs.com/
[38]
Yarn: https://yarnpkg.com/
[39]
NodeJS: https://www.nodejs.org/
[40]
主网: https://developers.ceramic.network/learn/networks/#mainnet
[41]
Clay Testnet: https://developers.ceramic.network/learn/networks/#clay-testnet
[42]
Dev Unstable: https://developers.ceramic.network/learn/networks/#dev-unstable
[43]
本地网络: https://developers.ceramic.network/learn/networks/#local
[44]
Metamask: https://metamask.io/
[45]
Sign-In With Ethereum: https://login.xyz/
[46]
为什么用以太坊登录是一个游戏规则改变者: https://blog.spruceid.com/sign-in-with-ethereum-is-a-game-changer-part-1/
[47]
异步函数: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
[48]
Metamask: https://metamask.io/
[49]
Metamask: https://metamask.io/
[50]
异步函数: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
[51]
异步函数: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
[52]
Ceramic 数据模型仓库: https://github.com/ceramicstudio/datamodels
[53]
完整的属性列表: https://github.com/ceramicstudio/datamodels/tree/main/models/identity-profile-basic
[54]
异步函数: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
[55]
BasicProfile: https://github.com/ceramicstudio/datamodels/tree/main/models/identity-profile-basic
[56]
配置Webpack: https://blog.ceramic.network/getting-started-with-ceramic/#configuring-webpack
[57]
Event Listeners: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
[58]
Webpack: https://webpack.js.org/
[59]
Webpack: https://webpack.js.org/
[60]
LiveShare: https://visualstudio.microsoft.com/services/live-share/
[61]
Metamask: https://metamask.io/
[62]
用Ethereum登录: https://login.xyz/
[63]
Ceramic Network: https://developers.ceramic.network/
[64]
Self.id: https://clay.self.id/
[65]
Duet Protocol: https://duet.finance/?utm_souce=learnblockchain