教程 | 你的第一个Truffle分布式app (3)
当我这周坐下来继续介绍用Truffle开发一个分布式APP的时候，我意识到了一些问题。自从我准备这个系列之后，我基本上是鲁莽地做出了这个决定，现在我意识到，我们需要写一个Dapp才能继续讲下去。
实话实说，这个并不是最能改变世界的Dapp，所以你必须原谅我。这样说吧，我们需要创建一个简单的程序，但是还需要能够让我们探索truffle提供的功能选项以及solidity的编程语言。
我认为，初学者常犯的一个错误就是在没有了解他们要完成的任务的情况下试图跨越大范围的界限，而且真的不清楚他们在试图构建什么。这就像一场没有设定目的地的旅行，你虽然会到达某一个地方，但你不确定你是否到达了正确的地方。一开始你不需要知道所有的答案，但是你至少要知道你最终的目的是什么样的。
说了这么多，我想我们建立一个记分牌Dapp吧。
我们的Dapp项目
就像我说的，这个app没什么新奇的，但功能足够我们用了。我已经完成了应用程序的概念部分，这意味着你现在不用担心css和html这些东西。这就让我们可以专注于truffle和solidity。
为了让你们拿到样板程序，我创建了一个GitHub repo，包括初始文件，以及将来要做的改变。Repo中也有安装说明，可以在下面这个连接上下载它：https://github.com/3of5of7/scoreboard
让我们来看一些简单的功能：
你有一个名字的列表，每一个名字都有一个ID，目前是json的格式，但是我们接下来会用truffle架构把它改成solidity格式的。
每位玩家都有一个起始分数。
你可以通过一个ID选择一个玩家，并将它们的分数加5。我们也将用truffle+solidity来编程这个增量。
我们将创建其他功能，并在系列中稍后将其更新。
创建我们的项目
要创建我们的第一个Dapp，我们需要初始化我们的第一个项目。项目只是一个自成一体的文件集，它们构成了项目的基础。
每个Dapp都不一样，但通常会包含以下文件：
HTML和JavaScript文件来创建和交互界面。
CSS文件，用于设计的Dapp的样式。
Solidity文件，用于定义应用程序逻辑并与以太坊区块链交互。
文件夹，用于保持它们好整齐排序。
当然你也可以存储其他文件类型，比如图像等。但我们会尝试尽可能简单的操作，并尝试仅使用我们需要的功能。
目前，truffle有几种创建项目的方法。其中一个是“truffle init”，它将下载创建Dapp需要的一些默认文件，包括实例合约、迁移和测试。另一种是使用truffle一个新的命令：truffle unbox [name of box]。这将下载要用到的样板文件，让你可以尽快的创建Dapp并运行。
在本系列进行时，只有几个可以下载的truffle box，现在开发人员还不可能创建自己的box让他人下载。所以如上所述，我只是把一个样板放在GitHub repo中，就是下面这个连接：https：//github.com/3of5of7/scoreboard
因为我们用的是Windows，我们点击链接并下载记分板的zip文件。
用命令提示符，创建一个文件夹，来存储这些文件。命令如下：
mkdir scoreboard
然后我们将然后我们将git repo文件的内容提取到我们的文件夹中。记住，如果你用的是Windows，那么将“truffle”文件更改为“truffle-config”。
你的文件夹结构应该如下图所示：
从命令提示符中，跳转到你刚刚建好的文件夹下：
cd scoreboard
本地开发服务器
不是所有的Dapps都是平等的，并不是打开任何dApp的“index.html”文件，就能看到你所带来的动态信息。
为了让Dapp按照我们设计的进行工作，我们需要有自己的本地服务器。我们可以在自己的计算机上运行这个本地服务器。我知道这可能听起来有些可怕，但不用担心，我们有我们的命令提示和NPM。
我们将要用一个名为lite-server的npm软件包，它只是一个轻量级开发服务器，可以让我们在不需要重型Web服务器的情况下在本地查看我们的更改和Dapp。
在我们的记分板目录中运行以下命令：
npm install lite-server --save-dev
现在让我们继续启动lite-server，输入以下命令：
npm run dev
如果无法自动打开浏览器，你可以自己打开喜欢的浏览器并导航到：http：// localhost：3000，应该可以看到我们的记分牌Dapp。现在我们不再使用静态文件，我们对Dapp所做的任何更改都将自动更新到浏览器中，我们称之为“实时重新加载”。那么我们现在可以去试一试，使用鼠标打开“src”文件夹，用你习惯的代码编辑器打开users.json”文件（我用的是sublime text），并更改其中一个名称。保存它，然后切换回浏览器，你会注意到这个名称是自动更新的。这是非常棒，意味着我们找到了正确的方向。
为了不断地看到我们未来变化的结果，我们需要让本地服务器一直运行。这只是意味着保持命令提示符打开的状态。然而，你还需要打开另一个命令提示符来运行将来的命令。这样我们一共就用到了3个命令提示符了对吧？
如果你确实需要停止服务器，只需在本地服务器终端窗口的键盘上按CTRL + C即可。你可能需要按两次才能完全停止服务器。然后，当您准备再次启动本地服务器时，只需运行与以前相同的命令：
npm run dev
一定要确保你在scoreboard目录中运行命令。
Dapp的默认样板
就像你看到的，默认应用程序没有什么特别之处。有个名字列表，其中包含id，name和points。然后有个输入框，右边有个按钮。 Dapp背后的真正代码尚未创建，但这正是我们开始的地方。
最后一些话
我们学到了什么？
我们以样板项目文件为起点。
命令提示符可用于快速实现任务。
我们可以通过运行“truffle init”或者通过运行“truffle unbox [name of file]”下载样板box来初始化一个空的文件夹。
如何下载本地开发服务器。
我们可以通过npm run dev命令，在本地查看我们的Dapp。
我们现在可能要做一些调整，如果你用的是Windows，那么请跟我一起进行吧。
如果你想得到更深入的了解：
如果你还没有准备好，那就用你的代码编辑器浏览一下记分牌的Dapp文件。它现在内容还不多，也不需要做太多。但并不意味着你不去理解它。
关闭本地服务器命令提示符窗口，然后尝试重新进入scoreboard目录，并启动本地服务器：npm run dev
创建第二个Dapp文件夹，并尝试运行“truffle init”，查看下载的默认文件。
加入我们的讨论，并在Twitter上关注我们： @Tap_Coin, Reddit, 或者与我们进行电话聊天 https://t.co/eIP47QmZ1ETap来讨论 Project。
原文链接: https://medium.com/@tapdev/your-first-truffle-dapp-an-attempt-at-a-beginners-guide-to-the-truffle-framework-part-3-2c77b9feb97d
作者: Hugh Knight
翻译&校对: 刘艳安 & Elisa
更多文章：