[譯] 寫給 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、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。