1. IPFS点滴资讯首页
  2. 观点碰撞

从零到行星际英雄

IPFS上开始使用基于浏览器的ĐApps的有趣指南

从零到行星际英雄
“如果您能阅读此内容,恭喜您 – 您正在使用的档案仍然知道鼠标悬停文本”!

ĐApps或分散式应用程序现在风​​靡一时,特别是在Etherium区块链上。但是你知道ĐApps也可以在Interplanatary文件系统(IPFS)上运行吗?你敢打赌,这比你想象的要容易得快。

在这篇文章中,我们将通过快速,轻松地完成基于IPFS的ĐApp所需的步骤。我们将利用一些很酷的新IPFS浏览器工具和我最喜欢的在线漫画。在这样做的过程中,我们将帮助为未来的访问者存档宝贵的资源(xkcd!)。所以这篇文章有这一切:激情,兴奋和对网络未来的承诺!

存档网络的宝石

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

我们可能想要做这样的事情有几个原因。一,我喜欢xkcd漫画,我总是在寻找借口与他们玩耍。其中两个,xkcd,以及其他几个归档资源,可以通过IPFS档案获得,这使它们成为一个方便的例子。三,这一点很重要,在IPFS之上构建基于内容的ĐApp可以帮助归档网络!

那是什么意思?嗯,趋势发生变化,利益集中,互联网也是一个变幻莫测的地方。将此与维护服务器,更新基础架构和跟上最新趋势的成本不断增加相结合,并且您已经获得了死链接的配方。IPFS和分布式网络是帮助对抗链接腐烂的好方法。

以我们的xkcdĐApp为例。片刻之后,我们将编写一些非常简单的JavaScript,每次访问我们的ĐApp时都会加载一个随机的xkcd漫画。因此,每当有人访问ĐApp时,在浏览器中运行的对等体就会获取该漫画,并临时缓存该项目,使其他人也可以检索它。事实上,我们使用ĐApp越多,它就能越好地分发和归档xkcd。

我们越是通过IPFS访问和使用分布式网络上的东西,他们越有可能长期坚持下去 -  推特

这是一个非常强大的想法:我们通过IPFS访问和使用分布式Web上的内容越多,他们就越有可能长期坚持下去。那些重要但不太受欢迎的东西(如历史文件)呢?这就是像Filecoin这样的东西有助于弥补这个问题。在filecoin世界中,您可以支付网络费用来存储这些东西,而不是依靠流行度来保存文档和文件。这是一个非常酷的主意。

入门

对于那些等不及的人,可以从Textile GitHub回购中获得完整的ĐApp 。随意克隆它,并按照代码使开始更容易。既然你已经节省了一些时间,为什么不继续观看 Juan Benet关于IPFS愿景的这个精彩视频,然后继续前进。您还可以在这里查看“实时”版本

对于那些想要一步一步的方法的人来说,这里有一些设置步骤可以帮助您入门。

首先,克隆我们的vanilla IPFS Dapp模板,然后切换到新目录:

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

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

首先,首先README.md从repo中查看文件。您会注意到它说这个应用程序效果最好window.ipfs,并且您可以通过单击其中一个链接来安装IPFS Companion Web扩展。

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

但是,在能够使用我们的ĐApp之前,我们不能指望我们的ĐApp用户安装浏览器扩展。因此,有一个很好的JavaScript模块被调用window.ipfs-fallback,它将检测存在window.ipfs并自动回退到从CDN 下载最新版本的IPFS(如果它不可用)。因此,在构建ĐApp时,包含此内容始终是个好主意 – window.ipfs如果可用,您可以免费获得。太好了!

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

纱线安装
纱线打造
纱线开始

你应该看到一个非常小的(空白页)ĐApp与页脚,而不是其他。现在继续打开你的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。

恭喜,您在分散的网络上成功运行了ĐApp!现在让我们做一些有趣的事情……

获取分布式Web上的数据

好的,我们为ĐApp添加一些功能。我们首先简单地获取一个随机的xkcd漫画并将其显示在空白页面上。够简单吧?首先,不要使用yarn start我们的应用程序,让yarn watch我们在刷新浏览器窗口时自动反映我们对JavaScript所做的任何更改。

现在,您可以继续使用以下代码修改setup函数src/main.js

const setup = async()=> {
//我们的xkcd存档的根IPFS CID
const xkcdRoot = / ipfs / QmS74HhZt3ZekqUDqdttSgMsHwYQ6miDLwGUHy6pp4qLyD
//在1和2003之间挑选和随机漫画(这是档案中的最新版本)
const comicNumber = 数学地板数学随机()* 2003+ 1
尝试 {
//创建IPFS对等体
const ipfs = await getIpfs()
//连接到公共对等点固定xkcd漫画(可能不需要)
等待 ipfs蜂拥而至连接
/dns4/ipfs.carsonfarmer.com/tcp/4002/wss/ipfs/Qmf6Wp6McAKm5oRYUPndLaAs5tnADASyJJZ3HkhzPmJJvY
//现在,获取文件……
const files = await ipfs文件get` $ { xkcdRoot } / $ { comicNumber } `
forlet file of files){
如果文件名称的endsWith巴纽)){ //我们有我们的形象!
//提取二进制文件内容
const content = StringfromCharCode申请文件内容
//转换为base64编码的字符串
const 编码 = btoa(内容)
//创建新的图像标记元素
const image = documentcreateElement img
图像setAttribute id image
//从图像数据中将图像源设置为数据uri
图像setAttribute src ` data:image / png; base64,$ { encoded } `
//将图像添加到’main’div
文件getElementById main )。appendChild(图片)
打破 //我们有我们想要的东西,在这里突破
}
}
} catch(err){
控制台log(错误)
}
}
查看GitHub 用❤托管的rawmain.js

 

那里有很多解析,但基本上发生的是:

  • 线3号和5号定义获取随机的漫画(从我们的档案
  • 第8行和第10行正在初始化IPFS对等节点,并连接到已知固定xkcd存档的对等体(第二步并不总是必需,但我在此处添加它以帮助引导ĐApp)
  • 第14行确实是IPFS’魔术’…它是在给定的CID处获取文件并返回一个承诺,我们等待,然后在第15到27行中做一些工作……
  • 第15行和第16行简单地循环遍历从上一步返回的二进制对象,并查找实际的png图像
  • 第18行和第20行将二进制图像数据转换为base64编码字符串
  • 最后,第22行到第27行创建一个图像元素并将其添加到“主”div中进行显示。

完成!

清理东西

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

我不会在这篇文章中详细介绍,但你可以看看xkcd-dapp-demo repo中的完整代码示例。在那里,我添加了xkcd网站上的导航按钮和样式,以及一些正确归属许可证信息和其他好东西的链接。我们甚至有乐趣悬停评论!它几乎都是普通的ES6 JavaScript,我充分利用了异步/等待模式来使代码更好和可读。

从零到行星际英雄

正如您所看到的,开始在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命令中的一个输出)。

包起来

我们希望我们的模板能够提供快速简便的方法来引导其他ĐApps,并且基于IPFS的ĐApps社区将继续增长。在Textile,我们非常希望在IPFS周围支持ĐApps社区,所以如果您决定使用我们的模板,请告诉我们,我们很乐意为我们的模板回购添加链接。我们也会密切关注叉子,并尽可能地尽力推广它们。

我们希望您喜欢我们在IPFS上快速介绍ĐApps。如果您喜欢这个,请来看看我们,了解我们的最新动态。当你在它的时候,跳上纺织照片等候名单,要求尽早获得控制照片的全新方式,这也可以在IPFS和永久网络上运行。

点对点科技简介

点对点科技深耘IPFS与Filecoin技术,坚持区块链技术改变未来的信念。点对点 IPFS 数据中心是目前国内技术领先,性价比高、保障优的投资标的。自建杭州数据中心,合作数据中心分布于上海、宁波、河北、香港、斯德哥尔摩(瑞典)等地。点对点数据中心具有优秀的硬件配置与目前国内优质的网络节点资源。点对点科技力求将IPFS爱好者升级为IPFS领军者与受益者,让IPFS颠覆传统互联网,共同开启 WEB 3.0时代。

想了解更多区块链知识吗?关注我吧!

Filecoin测试网二阶段昨日重启,点对点出块第一! | 点滴资讯

原创文章,作者:Redwinam,如若转载,请注明出处:http://ipfsdrop.com/view/conglingdaoxingxingjiyingxiong/

发表评论

电子邮件地址不会被公开。 必填项已用*标注