基于以太网的建筑:第1部分-决策


在本系列中,我将讨论一个项目的各个阶段,包括一组非常重要的以太网智能契约和与之通信的反应/还原应用程序。这个项目叫做In-App Pro Shop,旨在帮助以太网开发人员轻松支持应用内购买,它是在2018年下半年编写的,作为了解以太网开发生态系统的一种方式。这个项目揭示了以太网的力量和约束的许多方面及其编程语言的可靠性。我希望在这个系列中尽可能多地把这些传递给你。

当你看完这篇文章后,看看Part 2

目标

我想创建一个系统,在这个系统中,基于以太网的应用程序或应用程序内购买的游戏的开发者可以铸造他们出售的物品ERC-721代币(如CryptoKitties)。它将处理大部分繁重的工作,这样那些开发人员就可以继续写一个非常棒的产品。

一开始,我只知道这可能需要一个或多个smart contracts,以及一个用户界面,允许任何人创建一个商店并在其中填充要出售的东西。

六个月后,我已经实现了。接下来是我如何到达那里,以及我一路上遇到的一些障碍。

决定,决定

开始一个新的项目,尤其是一个和你以前的经历不太匹配的项目,总是令人兴奋的,但是有点令人畏惧。我花了一些时间回答的几个问题是:

  1. 我应该使用什么语言?
  2. 我需要什么样的区块链技术堆栈才能开始?
  3. 我将使用什么框架来构建用户界面?
  4. 项目结构应该是什么样的?

在本文的范围内,我将把这些问题分解开来,找到一个我们可以继续前进并开始解决实际问题的地方。

1.语言决策

如果您要为以太网编写智能合同,您需要一种能够编译成可由以太网虚拟机执行的语言(EVM)。

目前,您可以选择:

在我开始我的项目时,实实在在是最,嗯…固体解决方案。其他的选择要么还在进行中,要么还不存在,要么还没有被很好地记录下来并得到社区的支持。

至于用户界面,我们将继续使用浏览器执行的JavaScript。这可能看起来很武断,但这几乎描述了生活中的一切,不是吗?

2.区块链技术堆栈决策

这个有点微妙。

我已经决定与以太网博物馆合作,因为它的智能合同和像密码猫这样的非接触式终端是我当初建造这个东西的动机。这个选择是不言自明的。

我们需要验证我们的用户,并授权他们在应用程序中采取某些行动。此外,我们需要代表他们向区块链进行交易,并应对来自区块链的事件。当然,我们需要向用户展示一个界面,让他们能够发起所有这些活动。

2a .我如何认证和授权用户?

Image title

连接到元掩码

我习惯于实现一个基于密码的身份验证方案,也许可以选择提供OAuth,这样用户就可以选择一个可信的身份验证提供者,比如脸书或推特。

但是在这种情况下,唯一重要的是用户必须是区块链地址的验证所有者,该地址可以发送和接收以太网,以太网区块链的货币。他们不会与其他用户互动,只是开店并从销售中转移余额。因此,用户配置文件和传统的身份验证过程是完全不必要的。

但是我们如何验证用户拥有一个给定的地址呢?幸运的是,我们不需要:有MetaMask浏览器插件。用户登录它,它充当我们的应用程序和他们的以太网地址之间的中介。太好了。

还有Mist浏览器/钱包,但我当时对它的调查并没有得到社区的支持。我确信从那以后会出现其他的选择,但是我一直在关注GitHub上的元掩码项目,并且它得到了很好的维护。我们实际上不需要编写任何代码来与元掩码接口,所以我们不必太担心这一层。

2b .我将如何与区块链互动?

从浏览器的角度来看,您需要熟悉的最低级别库是Web3。我相信你绝对可以用JS和Web3构建一切。元掩码提供了Web3的一个实例,一旦应用程序被初始化,它就可以使用,这样你就可以代表用户自动执行传输和其他操作。Mist也是如此,任何其他基于浏览器的问题2a的解决方案也是如此。

问题是,我们还需要测试、部署和调试这些契约,而不仅仅是在我们的应用程序中与它们对话。当然,我们希望运行一个本地区块链节点,这样我们就不必把所有这些东西放在一个公共的“测试网”(例如,Ropsten或者Rinkeby)随着我们的发展。

本地节点本身就是一个决定。

  • Geth是一个用Go语言构建的以太网节点,在连接到公共测试网时非常有用。
  • Ganache-CLI (以前的TestRPC)是轻量级的,友好的,非常适合开始。
  • Ganache是基于图形用户界面的TestRPC版本。可爱,但对日常开发工作没用。

Ganache-CLI具有确定性模式的优势,每次重新启动它时都会生成相同的测试地址集。说到测试,这将是非常有益的,尽管我开始的时候并没有意识到这一点。

至于所有其他的东西,有块菌框架,甘纳切和甘纳切-CLI都是其中的一部分。块菌允许我们编译我们的可靠性契约,部署它们,执行测试,调试事务,等等。它被很好地记录和维护。

块菌框架的另一部分是毛毛雨,它提供了一个你可以在JS中与之交互的坚实的契约抽象。它还处理自动连接到Web3(通过元掩码或其他浏览器中介,或者如果不存在,通过创建一个新的Web3实例)。

2c .我如何确保实施智能合同最佳实践?

就像我们在JavaScript中使用的linters一样,它告诉我们什么时候在代码中进行风格和语法上的错误,对于Solidity来说,有Solhint。您用npm安装它,并用一个简单的JSON文件配置它。它很可爱,让你所有的代码都很整洁,所以其他的实实在在的开发者会觉得很自在。

由于稳健智能合同与实际货币相互作用并持有实际货币,因此我们必须stay abreast of the known vulnerabilities

为了防范这些攻击,我们需要确保,例如,当我们做数学运算时,溢出不会发生。当然,我们希望确保我们正确地实现了我们所使用的标准,比如这个应用程序将铸造的ERC-721非功能性终端。为了帮助完成这一切,我选择在OpenZepplin library

3.用户界面框架决策

构建用户界面引发了另一系列问题。

3a .我将使用哪个应用程序框架?

从长远来看,我们选择的应用程序框架没有什么不同。使用任何你现在感觉到的工具,把那些按钮放到屏幕上,把数据从A点移到b点。就我个人而言,我喜欢反应和还原。你可以很容易地使用角形、椭圆形,甚至(喘息)jQuery。

现在,如果你要使用反应,有TruffleBoxes给你一个关于这个决定的保守答案。看看它们,了解一个完整的项目应该是什么样子,是值得的。就我个人而言,我发现自己从块菌盒子样本中扔出的东西比我保存的还多,所以我最终在深思熟虑后从零开始。

对于所有有棱角的人来说,有一个独立的boilerplate project在GitHub和一个TruffleBox。当然,还有一个TruffleBox for Vue如果你喜欢的话。

是的,有一百万个其他的应用程序框架,其中许多可能有使用块菌框架的样板项目。我会让谷歌帮你的。

3b .我将使用哪个组件框架?

当然你可以设计所有的超文本标记语言按钮和输入,但是如果你的团队中没有一个专门的UX人,那就有点乏味了。如果你像我一样,你宁愿在不花费太多精力的情况下,用一套像样的、可维护的组件来启动和运行。

一些好的选择是自举和材料设计。如果您使用Angular、Vue或React,您可以获得这两个工具包的实现,它们将与您的应用程序框架一起工作。我选择了React-Bootstrap这一次。这并不是因为它比材料设计或其他选项有任何优势,它只是简单,这是一个相当简单的应用。

3c .我将如何设计我的组件?

尽管我选择了Bootstrap作为组件工具包,但我仍然需要为我的应用程序设计一个主题,这样它就不会看起来像标准的现成控件。

在“反应”中,有许多方法可以做到这一点。

  • 标准CSS
  • 更少/更安全
  • JS中的CSS

我在JS中使用了CSS,因为我一直认为HTML和CSS的分离是一种毫无意义的关注点的分离,这是非常麻烦的。随着您的CSS(或SCSS)文件的增长,它们以一种不令人满意的方式增长,这种方式通常充满了重复。我喜欢JS方法中的CSS,为了保持它的整洁,我喜欢styled-components图书馆。在后面的帖子中,我将向您展示我是如何用一些风格化的引导组件创建了一个简单的主题,这些组件完成了我需要的工作,并且不费吹灰之力就给了应用一个内聚的外观。我在这里和那里加入了一点动画,让它看起来更有意思。

4.项目结构决策

如果你从一个样板项目开始,那么你可以继续前进,但是我希望尽可能多地控制结构。所以,就像一只无视逻辑和重力的山羊,我决定走自己的路。但这并不是说我没有继承我之前做出的一系列决定。

首先,我考虑了是否为客户和区块链的东西做单独的项目,因为每个项目都涉及不同的技术。如果我试图把它们混在一起,会不会变成一团难看的乱麻?最后,我决定和一个monorepo,只是为了避免必须在两个Webstorm实例之间来回启动和切换。

当我说我继承了基于以前选择的多个结构决策时,我的意思是:

  • 反应(如果你使用反应脚本或创建反应应用)强加了一些特定的结构publictemplate文件夹,所有源代码必须包含在src文件夹中的绝对要求,以及它的产品输出文件夹被称为构建。
  • 块菌的默认配置查找一个合同文件夹、一个迁移文件夹、一个测试文件夹,并为已编译的合同创建一个构建文件夹,这显然与反应输出文件夹相冲突。
  • 此外,我发现我的反应代码需要加载编译的实度契约,由于反应需要任何导入的文件在src下,我不得不配置块菌输出到src/abi构建。

尽管在项目开始时并不存在所有的需求,但最终,我得到了以下顶级文件夹:

  • 智能合同来源
  • 项目文件
  • 编译合同并将合同部署到区块链的迁移脚本
  • 在区块链上创建模拟数据的脚本,用于手动测试该应用
  • 反应超文本标记语言模板和资产
  • 对应用源做出反应
  • 智能合同测试


Image title


最终项目结构

结果相关性

基于以上所有的决定,这里是项目最终需要的主要包。


Image title

项目依赖关系

(不是)结论

这只是开始,伙计们。我希望我已经充分回答了最初那些令人挠头的宽泛问题,即为了达到起点需要做出什么样的决定。经过大量的研究,我终于有了一个想法,那就是在区块链的一个基本的以太博物馆项目中会有什么。

进来吧Part 2,我将描述我们的前端商店维护应用程序需要的功能,以便我们了解项目的范围。

在那之前,如果你想仔细研究这个项目,甚至想把它拉下来,在本地摆弄它,就去https://in-app-pro-shop.futurescale.com