什么是 Moralis ？

Moralis 为构建高性能 dapps 提供了全栈工作流程。与您最喜欢的 web3 工具和服务完全兼容。 自动将您的用户余额同步到数据库中，允许您设置链上警报、观看智能合约事件、构建索引等等。所有功能都通过易于使用的 SDK 访问。Moralis 提供的所有功能默认都是跨链的 🤯。

为什么使用 Moralis ？

Moralis 是在以太坊、BSC、Polygon、Solana 和 Elrond 上构建和部署 dApp 的最快方式（更多内容即将推出）。默认情况下，所有 Moralis dApp 都是跨链的。基于 Moralis 的构建可确保您的 dApp 经得起未来考验。即使发明了新的区块链，您的 dApp 也将立即在任何链上运行。

无论您是在构建您的第一个区块链项目，还是已经是一位经验丰富的开发人员 - Moralis 都将使您的项目更易于构建、维护和改进。

与SDK连接

一旦您启动了 Moralis 服务器，就可以通过 Moralis SDK 连接到它了。本指南将向您展示如何通过几个简单的步骤来做到这一点。

1. 创建 React 应用

要使用 TypeScript 启动一个新的 Create React App 项目，您可以运行：

yarn create react-app my-app --template typescript

2. 安装SDK

确保将react 、react-dom和moralis安装为依赖项。然后安装react-moralis ：

yarn add moralis react-moralis

3.初始化SDK

您将看到以下代码：

src/index.tsx
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

在您的项目中导入 Moralis Provider 并添加组件，如下所示 <MoralisProvider>

src/index.tsx
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { MoralisProvider } from "react-moralis";

ReactDOM.render(
  <React.StrictMode>
    <MoralisProvider serverUrl="https://xxxxx/server" appId="YOUR_APP_ID">
      <App />
    </MoralisProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

您可以从 Moralis Dashboard 获取服务器 (Dapp) URL和APP ID 。 转到您的 Moralis 仪表板，然后单击服务器名称旁边的查看详细信息

4. 验证用户

现在 SDK 已成功连接，我们可以使用 Moralis 的强大功能。让我们登录一个用户并立即从您的 Moralis 数据库中的所有链获取他们的所有代币、交易和 NFT。

src/App.tsx

import React, { useEffect } from 'react';
import logo from './logo.svg';
import './App.css';
import { useMoralis } from "react-moralis";

function App() {

    const { authenticate, isAuthenticated, isAuthenticating, user, account, logout } = useMoralis();

    useEffect(() => {
    if (isAuthenticated) {
      // add your logic here
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isAuthenticated]);

    const login = async () => {
      if (!isAuthenticated) {

        await authenticate({signingMessage: "Log in using Moralis" })
          .then(function (user) {
            console.log("logged in user:", user);
            console.log(user!.get("ethAddress"));
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    }

    const logOut = async () => {
      await logout();
      console.log("logged out");
    }

  return (
    <div>
      <h1>Moralis Hello World!</h1>
      <button onClick={login}>Moralis Metamask Login</button>
      <button onClick={logOut} disabled={isAuthenticating}>Logout</button>
    </div>
  );
}

export default App;

在您的应用程序中调用钩子，输入以下代码：useMoralisApp.tsx

5.从localhost查看页面

在您所在localhost的项目目录中使用以下命令运行您的应用程序package.json

    yarn start

6. 使用 Metamask 登录

访问网页并单击Login。您的 Metamask 将弹出并要求您登录。 要连接 MetaMask 以外的其他钱包，请查看：Web3

7. 查看 Moralis 数据库中的所有用户资产

一旦用户登录 Moralis，就会从所有链中获取有关该用户的所有链上数据，并将其放入Moralis 数据库。要查看 Moralis 数据库，请转到您的服务器并单击仪表板。

单击仪表板后，您将看到该服务器的数据库。Moralis 从用户地址处于活动状态的所有区块链中获取数据，您可以在一个数据库中查看和查询用户的所有代币、NFT 和过去的交易。

随意探索文档的其余部分，以掌握 Moralis 的全部功能。

转至 Moralis 官网 用于学习使用

让我们一起走进去中心化的时代，一起学习web3吧

官方文档：docs.moralis.io/moralis-dap…

moralis/web3：docs.moralis.io/moralis-dap…