蜗牛星际最大加到多少内存

by Carson Farmer

通过卡森·法默

从零到星际英雄 (From Zero to Interplanetary Hero)

有趣的入门指南，介绍了基于浏览器的IPFSĐApps (A fun guide to getting started with browser-based ĐApps on IPFS)

ĐApps, or decentralized apps, are all the rage right now, particularly over on the Etherium blockchain. But did you know that ĐApps can also run on the Interplanatary File System (IPFS)? You bet, and it’s a lot easier than you might think to get one up and going quickly.

ĐApps或去中心化应用程序现在风​​行一时，尤其是在Etherium区块链上 。 但是您是否知道ĐApps也可以在Interplanatary File System(IPFS)上运行 ？ 您敢打赌，这比您想像的要容易得多，而且起步Swift。

In this post, we’re going to go through the steps required to get an IPFS-based ĐApp going quickly, and easily. We’re going to take advantage of some cool new IPFS browser tools, and my favorite online comic. In doing so, we’re going to help archive a precious resource (xkcd!) for future visitors. So this post has it all: intrigue, excitement, and a commitment to the future of the web!

在本文中，我们将逐步完成使基于IPFS的ĐApp快速且轻松运行的步骤。 我们将利用一些很酷的新IPFS浏览器工具以及我最喜欢的在线漫画。 这样，我们将帮助为以后的访问者归档宝贵的资源( xkcd ！)。 因此，这篇文章包含了所有内容：好奇心，兴奋以及对网络未来的承诺！

存档网络上的宝石 (Archiving the gems of the web)

The goal for this tutorial is to create a distributed web ‘clone’ of the xkcd website. We’re going to use IPFS to fetch images from an archive of xkcd comics, and display them in a form familiar to fans of xkcd.

本教程的目标是创建xkcd网站的分布式Web“克隆”。 我们将使用IPFS从xkcd漫画的存档中获取图像，并以xkcd爱好者熟悉的形式显示它们。

There are several reasons why we might want to do something like this. One, I like xkcd comics, and am always looking for an excuse to play around with them. Two, xkcd, along with several other archived resources, are available via the IPFS archives, which make them a handy example. Three, and this one is important, building content-based ĐApp on top of IPFS can help to archive the web!

我们可能想做这样的事情有几个原因。 第一，我喜欢xkcd漫画，并且一直在寻找借口与它们一起玩耍。 可以通过IPFS归档文件获得两个xkcd以及其他几个归档的资源，这使它们成为一个方便的示例。 第三，这一点很重要，在IPFS之上构建基于内容的ĐApp可以帮助存档Web！

What do I mean by that? Well, trends change, interests wain, and the Internet is a fickle place. Couple this with the increasing costs of maintaining servers, updating infrastructure, and keeping up with the latest trends, and you’ve got a recipe for dead links. IPFS and the distributed web is a great way to help combat link rot.

那是什么意思 好吧，趋势在变化，兴趣在消逝，互联网是一个多变的地方。 再加上维护服务器，更新基础架构以及跟上最新趋势的不断增加的成本，您就可以解决无效链接的问题。 IPFS和分布式Web是帮助消除链接腐烂的好方法。

Take our xkcd ĐApp for example. In a moment, we’re going to write some very simple JavaScript that will load a random xkcd comic each time our ĐApp is accessed. And so every time someone visits the ĐApp, the peer running in their browser fetches that comic, and temporarily caches that item, making it possible for others to retrieve it as well. In fact, the more we use the ĐApp, the better it is able to distribute and archive xkcd.

以我们的xkcdĐApp为例。 稍后，我们将编写一些非常简单JavaScript，该JavaScript将在每次访问ĐApp时加载随机的xkcd漫画。 因此，每次有人访问ĐApp时，运行在其浏览器中的对等体都会获取该漫画，并临时缓存该漫画，从而使其他人也可以检索该漫画。 实际上，我们使用ĐApp的次数越多，它能够更好地分发和存档xkcd。

The more we access and use things on the distributed web via IPFS, the more likely they are to stick around long-term — tweet it

我们通过IPFS访问和使用分布式Web上的事物的次数越多，它们长期坚持下去的可能性就越大— 鸣叫

This is a really powerful idea: the more we access and use things on the distributed web via IPFS, the more likely they are to stick around long-term. And what about things that are important but less popular (like historical documents)? This is where things like Filecoin will help to pick up the slack. In the filecoin world, rather than relying on popularity to preserve documents and files, you can pay the network to store these things for you. It’s a very cool idea.

这是一个非常有力的想法：我们通过IPFS访问和使用分布式Web上的事物的次数越多，它们长期存在的可能性就越大。 那么重要但不受欢迎的事物(例如历史文献)呢？ 这就是Filecoin之类的东西将有助于弥补这一不足的地方。 在Filecoin世界中 ，您无需付费就可以保存文档和文件，而可以通过网络来为您存储这些东西。 这是一个很酷的主意。

入门 (Getting started)

For those of you who can’t wait, the full ĐApp is available from the Textile GitHub repo. Feel free to clone that, and follow along with the code to make getting started easier. And since you’ve just saved yourself some time, why not watch this great video on the IPFS vision by Juan Benet before moving on. You can also check out a ‘live’ version here.

对于那些迫不及待的人，完整的ĐApp可从Textile GitHub存储库中获得 。 随时克隆它，并按照代码进行操作，使入门变得更加容易。 而且，由于您已经节省了一些时间，因此在继续之前，为什么不观看 Juan Juan撰写的有关IPFS愿景的精彩视频 。 您也可以在此处查看“实时”版本 。

For those of you who want a step-by-step approach, here are a few setup steps to get you started.

对于那些想要循序渐进的方法的人，这里有一些设置步骤可帮助您入门。

First, clone our vanilla IPFS Dapp Template, and change into the new directory:

首先，克隆我们的原始IPFS Dapp模板 ，然后切换到新目录：

git clone https://github.com/textileio/dapp-template.git xkcd-dappcd xkcd-dapp

This template is pretty simple, and has fairly minimal dependencies. Most of the dev dependencies are just for transpiling JavaScript so that we can run our ĐApp in the browser. For details on all those packages, refer to their respective GitHub repos, or get in touch to ask a question or two.

这个模板非常简单，并且具有最小的依赖关系 。 大多数开发依赖项仅用于转译JavaScript，以便我们可以在浏览器中运行ĐApp。 有关所有这些软件包的详细信息，请参阅其各自的GitHub存储库，或联系提出一个或两个问题。

So first things first, check out the README.md file from the repo. You’ll notice it says this app works best with window.ipfs, and that you can install the IPFS Companion web extension by clicking on one of the links.

因此，首先，请从README.md库中签出README.md文件。 您会注意到它说此应用程序最适合window.ipfs ，并且您可以通过单击其中一个链接来安装IPFS Companion Web扩展。

The IPFS Companion is a browser extension that simplifies access to IPFS resources by running a JavaScript IPFS peer in your browser. Even better than this, it can expose an embedded IPFS node as window.ipfs on every webpage! This makes it possible for our ĐApp to detect if window.ipfs exists and opt-in to use it instead of creating our own one-off js-ipfs node. It is not required for running ĐApps, but it does make them run better (faster), and I highly recommend installing it.

IPFS Companion是一个浏览器扩展，通过在浏览器中运行JavaScript IPFS对等端来简化对IPFS资源的访问。 甚至比这更好的是，它可以在每个网页上将嵌入式IPFS节点公开为window.ipfs ！ 这使我们的ĐApp可以检测window.ipfs存在并选择使用它，而不用创建自己的一次性js-ipfs节点。 运行ĐApps并不是必需的，但是它确实使它们运行得更好(更快)，我强烈建议安装它。

But, we can’t expect the users of our ĐApp to install a browser extension before being able to use our ĐApp. So there is a nice JavaScript module called window.ipfs-fallback, which will detect the presence of window.ipfs and automatically fall back to downloading the latest version of IPFS from the CDN if it’s unavailable. So when building a ĐApp, it’s always a good idea to include this — and you get window.ipfs for free if available. Nice!

但是，我们不能期望ĐApp的用户能够使用ĐApp之前安装浏览器扩展。 因此，有一个不错JavaScript模块，称为window.ipfs-fallback ，它将检测window.ipfs的存在，并自动退回以从CDN下载最新版本的IPFS (如果不可用)。 因此，在构建ĐApp时，最好包括这个应用程序—如果有的话，您可以免费获得window.ipfs 。 真好！

Ok, so just to make sure things are working nicely, let’s go ahead and install our required dependencies, and build and run our ĐApp locally. Enter the following into your terminal:

好的，为了确保一切正常，让我们继续安装所需的依赖项，并在本地构建和运行ĐApp。 在您的终端中输入以下内容：

yarn installyarn buildyarn start

You should see a pretty minimal (blank page) ĐApp with a footer and not much else. Now go ahead and open your Javascript developer console (Chrome:Ctl+Shift+J(Command+Option+Jon Mac), Firefox: Ctrl+Shift+K(Command+Option+Kon Mac), Safari: Command+Option+I). You should see something like running js-ipfs/0.29.2 with ID Qm{hash} where Qm{hash} is a long alphanumeric hash that represents your peer id.

您应该会看到一个很小的(空白页)Đ带有页脚的应用程序，而没有其他内容。 现在继续打开Javascript开发者控制台(Chrome：Ctl + Shift + J(Command + Option + Jon Mac)，Firefox：Ctrl + Shift + K(Command + Option + Kon Mac)，Safari：Command + Option + I) 。 您应该看到running js-ipfs/0.29.2 with ID Qm{hash}其中Qm{hash}是一个长字母数字哈希，表示您的对等ID。

Congrats, you are successfully running a ĐApp on the decentralized web! Now let’s make it do something interesting…

恭喜，您已成功在分散式网络上运行ĐApp！ 现在，让它做一些有趣的事情……

在分布式Web上获取数据 (Fetching data on the distributed web)

Ok, let’s add some functionality to our ĐApp. We’ll start by simply fetching a random xkcd comic and displaying it on a blank page. Simple enough right? First, rather than yarn starting our app, let’s yarn watch it so that any changes we make to the JavaScript will automatically be reflected when we refresh our browser window.

好的，让我们向ĐApp添加一些功能。 我们将从简单地获取随机xkcd漫画并将其显示在空白页开始。 很简单吧？ 首先，让我们yarn watch一下它，而不是yarn start我们的应用程序，以便在刷新浏览器窗口时自动反映我们对JavaScript所做的任何更改。

Now, you can go ahead and modify the setup function in src/main.js with the following code:

现在，您可以继续使用以下代码在src/main.js修改setup功能：

There’s a lot to parse there, but basically what is happening is:

那里有很多要解析的东西，但是基本上发生的是：

• Lines 3 & 5 are defining which random comic to fetch (from our archive)

  行3和5的定义要取的随机漫画( 从我们的档案 )

• Lines 8 & 10 are initializing an IPFS peer node, and connecting to a peer known to be pinning the xkcd archive (this second step isn’t always required, but I added it here to help bootstrap the ĐApp)

  第8行和第10行正在初始化一个IPFS对等节点，并连接到一个已知要固定xkcd存档的对等节点(此第二步并非总是必需的，但我在此处添加了它以帮助引导ĐApp)

• Line 14 is really the IPFS ‘magic’…it is fetching the files at the given CID and returning a promise, which we await and then do some work with in lines 15 to 27…

  第14行确实是IPFS的“魔术”……它正在以给定的CID提取文件并返回承诺，我们等待，然后在第15至27行进行一些工作……

• Lines 15 & 16 simply loop through the binary objects returned from the previous step, and look for the actual png image

  第15和16行只是循环遍历上一步返回的二进制对象，并查找实际的png图像

• Lines 18 & 20 convert the binary image data to a base64 encode string

  第18和20行将二进制图像数据转换为base64编码字符串

• And finally, lines 22 through 27 create an image element and add it to the ‘main’ div for display.

  最后，第22至27行创建一个图像元素，并将其添加到“主要” div中进行显示。

Done!

做完了！

清理东西 (Cleaning things up)

From here, any additional changes are simply to make the ĐApp look and feel more like the original xkcd comic webpage.

从这里开始，任何其他更改都只是为了使ĐApp的外观和感觉更像原始的xkcd漫画网页。

I won’t go into the details in this post, but you can take a look in the xkcd-dapp-demo repo for the full code example. There, I’ve added the nav buttons and styling from the xkcd website, along with some links to proper attribution, license information, and other goodies. We even have the fun hover comments! It’s almost all vanilla ES6 JavaScript, and I take good advantage of async/await patterns to make the code nice and readable.

我不会在本文中详细介绍，但是您可以在xkcd-dapp-demo存储库中查看完整的代码示例。 在那里，我从xkcd网站添加了导航按钮和样式，以及一些指向正确归因 ， 许可证信息和其他东西的链接。 我们甚至有有趣的悬停评论！ 这几乎是所有原始的ES6 JavaScript，并且我充分利用了异步/等待模式来使代码美观和可读。

So as you can see, it is relatively easy to get started making ĐApps on IPFS. Our xkcd ĐApp works best when run a) locally (via yarn start for example), and b) with the IPFS Companion browser extension enabled. If you want, you can actually fire up a local IPFS daemon, and run ipfs add -r dist/, to add the whole ĐApp to IPFS. Now, you can test it through your local IPFS gateway: http://localhost:5001/ipfs/Qm{hash}/(if your code isn’t identical to mine, your CID hash might differ, use the one output from the above ipfs add command).

如您所见，开始在IPFS上制作ĐApps相对容易。 我们的xkcdĐApp在以下情况下运行效果最佳：a)在本地运行(例如，通过yarn start )，以及b)在启用IPFS Companion浏览器扩展的情况下运行。 如果需要，您实际上可以启动本地IPFS守护程序，然后运行ipfs add -r dist/ ，将整个ĐApp添加到IPFS。 现在，您可以通过本地IPFS网关对其进行测试： http://localhost:5001/ipfs/Qm{hash}/ (如果您的代码与我的代码不同，则您的CID哈希值可能会有所不同，请使用上面的ipfs add命令)。

结语 (Wrapping up)

We hope that our template will provide a quick and easy means to bootstrap additional ĐApps, and that the community of IPFS-based ĐApps will continue to grow. At Textile, we’d really like to support a community of ĐApps around IPFS, so if you decide to use our template, let us know, and we’d be happy to add a link to our template repo. We’ll also keep an eye out for forks and try to promote them as best we can.

我们希望我们的模板将提供一种快速简便的方法来引导其他ĐApp，并且基于IPFS的ĐApp社区将继续增长。 在Textile ，我们真的很想支持围绕IPFS的ĐApps社区，因此，如果您决定使用我们的模板，请告诉我们，我们很乐意为我们的模板库添加一个链接。 我们还将密切注意分叉，并尽我们所能进行推广。

We hope you enjoyed our quick introduction to ĐApps on IPFS. If you enjoyed this, come check us out and learn more about what we’re up to. While you’re at it, jump on the Textile Photos waitlist to request early access to a whole new way to control your photos, that also runs on IPFS and the permanent web.

我们希望您喜欢我们对IPFS上的ĐApps的快速介绍。 如果您喜欢这个，请来我们这里 ，了解有关我们正在做什么的更多信息。 当您使用它时，跳转到“ 纺织品照片”候补列表上，以请求提早使用一种全新的方式来控制照片，该方法也可以在IPFS和永久性网络上运行。

翻译自: https://www.freecodecamp.org/news/from-zero-to-interplanetary-hero-7e62f7d4427/

蜗牛星际最大加到多少内存