3.1「Dfinity前端」Front-end概览

3.1「Dfinity前端」Front-end概览

Internet Computer区块链允许您通过使用他们的 JavaScript 代理(agent),为您的 dapps托管 Web 3.0前端。通过使用 dfx 提供的asset canister将静态文件上传到 Internet Computer,您将能够在去中心化技术上运行您的整个应用程序。

这里有一些教程的快速链接,其中包含开发前端 dapp 的不同阶段的示例代码:

  • A tutorial on building a React dapp Customize the front-end:构建 React dapp 的教程自定义前端
  • Using Candid as a bare-bones interface to expose and test the functions in a canister:使用 Candid 作为一个简单的界面来暴露和测试罐中的功能。
  • Using raw HTML and JavaScript to display a simple HTML entry page:使用原始 HTML 和 JavaScript 显示一个简单的 HTML 条目页面。
  • Using React and compiled JavaScript to embed HTML attributes and elements directly in a page:使用 React 和编译的 JavaScript 将 HTML 属性和元素直接嵌入到页面中。
  • Using React and TypeScript to import CSS properties from an external file:使用 React 和 TypeScript 从外部文件导入 CSS 属性。

如何使用默认模板(templates)?

你可能已经注意到了,项目包括样板文件index.jswebpack.config.js

默认情况下,index.js文件导入位于src/declarations文件夹中的“代理”(可以看做一个对象,前端通过与代理交互实现和后端的交互)。当您运行dfx deploy时,该目录将由dfx生成,无论是本地部署还是部署到IC。

生成的代码如下所示:

import { Actor, HttpAgent } from "@dfinity/agent";

// Imports candid interface
import { idlFactory } from './hello.did.js';
// CANISTER_ID is replaced by webpack based on node enviroment
export const canisterId = process.env.HELLO_CANISTER_ID;

/**
 *
 * @param {string | Principal} canisterId Canister ID of Agent
 * @param {{agentOptions?: import("@dfinity/agent").HttpAgentOptions; actorOptions?: import("@dfinity/agent").ActorConfig}} [options]
 * @return {import("@dfinity/agent").ActorSubclass<import("./hello.did.js")._SERVICE>}
 */
export const createActor = (canisterId, options) => {
  const agent = new HttpAgent({ ...options?.agentOptions });

  // Fetch root key for certificate validation during development
  if(process.env.NODE_ENV !== "production") agent.fetchRootKey();

  // Creates an actor with using the candid interface and the HttpAgent
  return Actor.createActor(idlFactory, {
    agent,
    canisterId,
    ...options?.actorOptions,
  });
};

/**
 * A ready-to-use agent for the hello canister
 * @type {import("@dfinity/agent").ActorSubclass<import("./hello.did.js")._SERVICE>}
 */
export const hello = createActor(canisterId);

然后,如果返回到index.js,可以看到它接受生成的 actor,并使用它调用 hello canister 的 greet 方法:

import { hello } from "../../declarations/hello";

document.getElementById("clickMeBtn").addEventListener("click", async () => {
  const name = document.getElementById("name").value.toString();
  // Interact with hello actor, calling the greet method
  const greeting = await hello.greet(name);

  document.getElementById("greeting").innerText = greeting;
});

在许多项目中,您可以使用在declarations下的代码而不需要做任何更改,并且可以在 hello_assets/src 中进行一些改动。但是,如果您的项目有其他需求,请阅读Add frontend assets