[译] 写给 JavaScript 开发者的 Crypto 简介

• 原文地址：The JavaScript Developer’s Intro to Crypto
• 原文做者：Eric Elliott
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：Xuyuey
• 校对者：portandbridge, Fengziyin

如何在价值互联网（the Internet of Value）上构建 App

在接下来的 2-4 年中，软件开发的世界将会发生很大变化。用户苦恼于我的隐私被侵犯和对其数据管控的的无力。与此同时，许多行业都受到低效流程的阻碍，这都是权力、金钱以及控制集中化的结果。

2009 年比特币出现了，在此后的 10 年里，新的互联网基础已经造成：价值互联网。如今能够经过互联网购买、出售、贷款和交易货币，中间没有银行或者中央公司，其费用比以往任何公司都要低。

价值的数字化存储和转移开辟了之前没法实现的新经济模式，例如 Theta Network，它经过向愿意分享视频带宽的观众付费，来构建高性能、分散的视频流平台。目前 Theta 正在用一种名为 TFUEL 的加密货币来奖励观众，这种货币能够用来捐赠给游戏主播，或者在 Sliver.tv 的商店里购买物品。最终，TFUEL 或相似的货币可能会被用于购买游戏内的物品：这已经成为了一个价值数十亿美圆的行业。

智能合约（Smart Contract） —— 取代中间人

智能合约是一种在分散式架构（例如像 Ethereum 这样的 blockchain）上运行的程序，它可以对数字化资产进行加锁、解锁、发行以及传输。例如，能够在像 Ethereum 这样的网络上发布本身的加密货币。当你这样作时，智能合约会管理这些代币（token）（译者注：可流通的数字权益证实），定义代币的数量，如何发行代币或限制新的供应，以及如何控制代币的转移。

你还能够建立一份表示某幢建筑物的部分全部权，或者一份表明承诺提供计算服务（例如信息存储、带宽或运算能力）的智能合约。后者可用于为那些给 AWS、Google Cloud Platform 或 Microsoft Azure 提供分散版本的人进行经济奖励。有关示例，请参见 Storj.io和 iExec。

智能合约如今开始取代中间人。例如，若是你有一些 ETH（Ethereum 的本地加密货币），你就能够在今天借钱给本身，而且当你使用贷款买车或解决临时现金流问题时，你还能够保持你的 ETH 在市场中流通。

构建加密应用程序（DApps）

“Crypto” 是 “cryptography” 的缩写，它已经成为“处理区块链、加密货币、分散式应用和分散式分类帐技术的行业”的简称。

若是你想构建一个不依赖 Amazon 进行托管，或者 Facebook 的社交图谱，或者 Google 进行用户身份验证的的应用程序，只要有社区成员愿意运行（和维护），它就能够成为开源的而且能够持续运行下去，（想一想 BitTorrent）你来对了地方。

咱们将从 Ethereum 开始，尽管现在，Ethereum 不是惟一的选择。Ethereum 是一种区块链，旨在托管可以支持 DApps（分散式应用）的图灵完备智能合约。

若是你想构建 DApps，但又是第一次接触，那我建议你先学习 HTML、CSS 和 JavaScript。Ethereum 使用虚拟机，而 Ethereum 虚拟机（EVM）最流行的编程语言是 Solidity。

我建议不要从 Solidity 或者 EVM 能作些什么开始考虑你的应用。相反，试着想象一下，当数字资产转移给其余人而无需中间的银行或经纪人时，你能够作些什么。试着想象一下如何在应用中以对用户友好的方式表示这些功能。

若是不在应用中构建钱包，那么和钱包 API 进行交互将会很难处理。例如，在 Ethereum 上，你必须使用 Web3 API 来触发须要用户交互的钱包交易。到目前为止，好像一直都是坏消息，由于它要求用户下载 Metamask 扩展 ，或者支持 Ethereum 的浏览器，如 Trust Wallet 或 Coinbase Wallet。Trust Wallet 和Coinbase Wallet 都仅仅只是具备内置钱包和交易批准 UI 的 Web3 感知浏览器。

让用户安装和使用扩展程序或是全新的浏览器很是困难，几乎没有潜在用户会这样作。到目前为止，这已经严重影响了 DApp 行业，并严重限制了 Web3 的用户群体。

最近，一些最受欢迎的 DApps（如 Sliver.tv）在 DApp 内部内置了钱包。在这些状况下，你不须要第三方钱包集成。你能够在 Chrome 中使用本身的应用。缺点是它更集中化：用户须要更加信任你的 DApp —— 这使得 DApp 开发人员必须肩负更多的安全责任。

若是每个 DApp 都想要以原生的方式在 Chrome 中构建本身的集成钱包的话，会很疯狂的。幸运的是，新的解决方案正在兴起。Fortmatic 是一个 JavaScript 软件开发工具包（SDK），它在 Chrome 中提供 Web3 功能。你的用户将无需下载扩展程序或者特殊浏览器。

让咱们来构建一个无需任何扩展或单独下载，能够在 Chrome 中运行的简易 DApp。

项目设置

注意：这样的小细节每每会更新得很快。若是它们不工做了，请在下面留言。也许有人能够帮你搞清楚。

1. 打开一个 终端。确保安装了 Node（我喜欢用 nvm 安装 Node）。

2. 建立项目目录并安装一些项目依赖：

mkdir hello-eth

cd hello-eth

npm init -y

npm install --save react react-dom next fortmatic web3

npm install --save-dev @babel/core @babel/register \
  @babel/polyfill @babel/preset-env @babel/preset-react \
  @babel/register eslint-config-prettier \
  eslint eslint-plugin-prettier eslint-plugin-react \
  eslint-plugin-react-hooks prettier riteway watch tap-nirvana
复制代码

3. 打开 package.json 并按照下面的内容替换 “scripts” 值：

{
  "lint": "eslint --fix . && echo 'Lint complete.'",
  "test": "NODE_ENV=test node -r @babel/register -r @babel/polyfill src/index.test.js",
  "watch": "watch 'clear && npm run -s test | tap-nirvana && npm run -s lint' src",
  "dev": "next",
  "build": "next build",
  "start": "next start"
}
复制代码

4. 建立一些目录：

mkdir pages
mkdir src
mkdir src/views
复制代码

5. 将这些文件添加到项目根目录下：

.babelrc:

{
  "env": {
    "development": {
      "presets": ["next/babel"]
    },
    "production": {
      "presets": ["next/babel"]
    },
    "test": {
      "presets": [
        "@babel/env",
        "@babel/react"
      ],
      "plugins": [
        "styled-jsx/babel"
      ]
    }
  }
}
复制代码

.eslintignore:

node_modules
.next
复制代码

.eslintrc:

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true
  },
  "plugins": [
    "react",
    "react-hooks"
  ],
  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 2018
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "rules": {
    "linebreak-style": ["error", "unix"],
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}
复制代码

Hello, World!

如今建立 src/views/index.js：

import React from 'react';

const Hello = () => <h1>Hello, world!</h1>;

export default Hello;
复制代码

使用 Next.js，你放入 /pages 下的任何文件将在 /<page-name> 下自动建立一个不带 .js 文件扩展名的路由。它还能够作到自动化的服务端渲染、自动化的 bundle 构建和优化，当你使用 Zeit Now 进行部署时，它会作不少很酷的事情来自动优化客户端交付。当你的应用切换到生产模式时，这都是好消息，但咱们使用 Next.js 的真正缘由是由于它是我最喜欢的辅助 React 应用的方法。

Next.js 具备内置的 \<style jsx> CSS 支持，并且你不用知道如何手动链接路由。如今让咱们如今来获取 index 的视图路由。你只需建立一个名为 pages/index.js 的新文件：

import Home from '../src/views';
export default Home;
复制代码

只需导入视图，而后再将它导出，仅此而已。我喜欢将真正的组件定义保存在 src/ 目录树中，这样我就能够轻松地将相关文件放在同一个位置，而不会意外地为它们建立一堆路由。换句话说，/pages 仅用于路由。/src 用于存放真正的源代码。

给我展现一下 Crypto 部分

到目前为止，你刚刚看到的是 JavaScript 和 React 代码。对于 crypto/DApp 开发人员来讲，好消息是至少有 75％ 的项目代码（可能更多）都是用 JavaScript 编写的，而 React 是一个很棒的 UI 代码框架。可是，若是你要在价值互联网上进行交易，你可能须要使用一些 crypto API。

在刚开始进行设置时，咱们使用 npm 安装了 Fortmatic 和 Web3。如今咱们将它们导入咱们的 index 页面，以便咱们能够在代码中使用它们。首先，你须要设置 Fortmatic 账户才能得到你的 API 密钥。

你应该可以使用 GitHub 注册，而后当即就能够获取到你的 testnet 密钥。Fortmatic 会自动在 testnet 上发送新用户的 ETH 进行试验。

Fortmatic 是 Ethereum 区块链 API 服务的监管提供商，还提供了很是友好的用户登陆体验。用户可使用电话号码登陆你的应用。他们将得到一个安全码 SMS，而后用它来验证你的应用。完成后，你就能够得到用户的钱包地址。

Fortmatic 使用由 Fortmatic 硬件安全模块（HSM）保护的加密锚安全架构来存储用户私钥。

做为想要真正黏住用户的 DApp 开发人员来讲，这颇有吸引力，由于做为先决条件，将存储密钥的责任和复杂性推给用户并非一种对用户友好的方式。本身处理它是有风险的。Fortmatic 为咱们提供了一个很好的缓冲区。

经过容许用户将这些资产转移到他们本身的私人托管钱包中，你仍然能够容许用户来声明他本身的 Fortmatic 钱包资产保管权。让咱们为咱们的 src/views/index.js 组件添加 Fortmatic 身份验证：

import React, { useEffect } from 'react';

// 导入 web3
import Fortmatic from 'fortmatic';
import Web3 from 'web3';

const formatic_api_key = '<your test key here>';

const initializeWeb3 = () => {
  const fm = new Fortmatic(formatic_api_key);
  const web3 = new Web3(fm.getProvider());
  window.web3 = web3;

  // 获取当前用户账户地址。
  // 若是须要，验证用户身份。
  web3.eth.getAccounts().then(accounts => {
    // 你可使用钱包地址做为密钥
    // 来存储和检索 DApp 的用户数据。
    console.log(accounts);
  });
};

const Hello = () => {
  // 当组件挂载时，React hook 会被触发；
  useEffect(initializeWeb3, []);

  return <h1>Hello, world!</h1>;
};

export default Hello;
复制代码

一旦用户使用 Fortmatic 登陆，你就可使用 Web3 API。你能够在其上构建钱包 UI，让用户以加密方式签署数据，并在 Ethereum 智能合约上发布调用方法。

扩展 DApps 的技巧

区块链的第一条规则是在区块链你应该尽量少作事。在区块链上存储数据很是昂贵（请参阅 IPFS）。

若是能够的话，尽可能选择批量交易。了解如何使用 Merkle Trees锚定已签名的可验证声明。查看 Graph 协议 来获取有效的区块链查询方法。

你可能须要创建本身的智能合约以实现你的想法。这个会在之后的文章中细说。

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。