【IPFS相关】可自行编辑Web页面的应用程序

本文由IPFS原力区收集译制,版权所属原作者

可自行编辑Web页面的应用程序

【IPFS相关】可自行编辑Web页面的应用程序

我们将在本教程中构建的……是一个分布式、可编辑的配置文件应用程序。

【IPFS相关】可自行编辑Web页面的应用程序

js-ipfs中IPNS支持的出现

【IPFS相关】可自行编辑Web页面的应用程序

       官方的IPFS Javascript库最近进行了几次重大更新,使其更适合构建分散的web应用程序和DWeb站点。随着js-ipfs中IPNS支持的出现,应用程序开发人员现在可以支持“可变”IPFS内容和近乎实时的更新。

这意味着我们可以开始构建与DWeb技术的交互,这些交互提供用户从大多数Web2.0技术中所期望的相同(或更好)的体验!正如您可能已经知道的,积极的Dweb用户体验是我们开发工作重点的一个重要部分,所以每当我们看到有机会测试能够帮助我们实现这一点的新工具时,我们都会感到兴奋。

 为了体验浏览器中的IPNS可以带来什么,我们认为构建一个简单的配置文件应用程序(类似于about)可能会很有趣。我的网页或类似的在构建此应用程序时,我们将使用Knockout使用模型-视图-视图-模型(model-view – view-model, MVVM)模式简化用户界面。对于那些想要跳到最后的人,你可以克隆并立即使用完整的工作应用程序,对于其余的人。

【IPFS相关】可自行编辑Web页面的应用程序

开始吧

【IPFS相关】可自行编辑Web页面的应用程序

像我们以前的许多帖子一样,我们将从克隆Textile的灵巧的、时髦的ipfs应用程序模板开始。

git clone https://github.com/textileio/dapp-template.git profile-app

cd profile-app

在此过程中,请继续使用这个IPFS getter模块,这使得在浏览器中创建新的IPFS对等/节点时更容易使用promise。您可以将其保存在projects src目录中,并将其称为类似于ipfs-promise.js的东西。

好了,克隆了项目,我们的新文件准备好了,您要做的另一件事就是安装必需的模块,然后纱线观察您的代码,以便我们可以开始构建和测试我们的应用程序。

yarn install

yarn watch

一旦构建了项目,watch命令将“监视”更改并根据需要更新已编译的包(我们使用browserify)。因此,您应该在浏览器中启动http://localhost:8000,并在每次更改代码时刷新该页面。您还可以查看上一篇教程,其中介绍了我们将在今天的文章中使用的一些必需的模块和开发工具。好了,准备好了,我们开始…

【IPFS相关】可自行编辑Web页面的应用程序

一起创建

【IPFS相关】可自行编辑Web页面的应用程序

我们将从最基本的开始,只添加最基本的功能。所以我们的主。js文件得到了一些小更新:

【IPFS相关】可自行编辑Web页面的应用程序

这实际上就是在浏览器中启动一个IPFS对等点,查询对等点的id,并将其与来自url查询字符串的用户id(这就是我们通过用户参数查看其他人的配置文件的方式)和控制台进行比较。记录一些信息。一件容易的事。应用程序页面本身看起来几乎是空的,如果你留下了一些“品牌”的部分。这很棒,希望你能在浏览器的Javascript控制台看到这样的东西:

Viewing profile for Qm… from peer with id Qm…

Viewing own profile, editing will be enabled!

现在,让我们开始设计我们的个人资料应用

【IPFS相关】可自行编辑Web页面的应用程序

视图展示

【IPFS相关】可自行编辑Web页面的应用程序

我们将从定义视图开始。因为我们使用Knockout开发web应用程序,所以视图是通过索引定义的.html文件。基本结构是这样的:

【IPFS相关】可自行编辑Web页面的应用程序

【IPFS相关】可自行编辑Web页面的应用程序

如果你看看主要的div,你会看到我们的组件配置文件图片,个人信息如姓名、等等。我们还包括部分和一个工作列表,以及部分生物漂白牙齿,甚至社交媒体链接。为了好玩,我们添加了一些指向字体很棒的css资产的外部链接,只是为了混合一些“集中”的部分。当然,如果您愿意,您可以将这些内容包含在应用程序的包中,但代价是包大小稍微大一些。当你在做的时候,你也可以创建一个   .css格式的文件,并把这个东西在里面,使事情看起来很整齐,“像档案一样”。

【IPFS相关】可自行编辑Web页面的应用程序

数据模型

【IPFS相关】可自行编辑Web页面的应用程序

考虑到这一点,我们然后转向我们的数据模型。对于这个示例,我们将使用上一篇教程中的用户配置文件数据模型,该教程介绍如何使用IPFS/IPNS构建一个简单的分散RESTful端点。这只是一个简单的基于json的结构,包含名称、工作、社交媒体等字段。现在,这里是默认结构,我们将提供给我们的应用程序作为一个可导入的对象(import {defaultProfile} from “./default-profile.js “):

【IPFS相关】可自行编辑Web页面的应用程序

在我们的代码中,我们假设用户已经将这个JSON文档发布到他们的IPNS散列中,或者他们将使用我们的应用程序创建一个。

【IPFS相关】可自行编辑Web页面的应用程序

视图模型

【IPFS相关】可自行编辑Web页面的应用程序

这最终把我们带到了视图模型。在这里,我们将用户概要数据模型(default-profile.js)链接到前面定义的概要视图结构(index.html)。我们将利用Knockout和非常漂亮的映射插件,它为我们提供了一种简单的方法,可以将普通的ol ‘ Javascript对象映射到视图模型中,并准备好相应的可观察对象。这非常棒,因为这实际上意味着我们只是在main.js中向init函数的底部添加了几行代码:

// Setup a viewModel based on our JSON structure

const viewModel = ko.mapping.fromJS(defaultProfile)

// Add an ‘extra’ observable for when we’re loading

viewModel.state = {}

viewModel.state.loading = ko.observable(true)

viewModel.state.editing = ko.observable(false)

// Apply the viewModel bindings

ko.applyBindings(viewModel)

但在保存并重新加载页面之前,我们还需要创建视图的绑定,以便视图模型能够为我们更新视图!为此,我们返回到索引。并添加各种数据绑定属性,以便通过视图模型将视图元素绑定到模型。你应该去看看那些优秀的文档来解释这些漂亮的绑定,但是我只想说,这就是我们如何将用户的配置文件信息映射到他们的配置文件页面的。下面是索引中的body div。html现在应该是这样的:

【IPFS相关】可自行编辑Web页面的应用程序

每个视图元素都以某种方式、形状或形式映射到数据模型的一部分。例如,如果加载为真,我们将显示一个加载旋转器(并隐藏其余部分)。相反,对于工作数组中的每个元素,我们将显示职位名称和雇主的文本。只要这些元素被更新,我们的视图模型就会自动为我们处理这些变化…好了,在这一切之后,让我们看看我们手头的工作……

【IPFS相关】可自行编辑Web页面的应用程序

检查一下

【IPFS相关】可自行编辑Web页面的应用程序

这是我们目前所拥有的……

【IPFS相关】可自行编辑Web页面的应用程序

不是那么令人兴奋,所以现在您可以将初始加载bool更改为false,您可能会看到如下内容:

【IPFS相关】可自行编辑Web页面的应用程序

简单的个人资料应用程序…但是缺少了一些东西

 

好了,现在我们有点进展了。但是这样的空配置文件是相当蹩脚的,所以让我们开始添加一些数据……

 

【IPFS相关】可自行编辑Web页面的应用程序

数据IPFS

【IPFS相关】可自行编辑Web页面的应用程序

现在是IPFS的高级部分。事实上,我们的应用程序每次都会加载一个默认配置文件……我们从来没有尝试加载任何现有数据。我们来修正一下。首先,让我们尝试加载一个配置文件,如果它已经存在,基于用户查询字符串,或者,如果省略了,本地IPFS对等id。

// Async function that fetches custom ipns json data

const getProfileJSON = async (ipfs, ipns) => {

// Resolve IPNS hash (this is a new feature!)

const name = await ipfs.name.resolve(`/ipns/${ipns}`)

// Now, fetch files…

const files = await ipfs.files.get(`${name.path}/json`)

// Extract binary file contents

const string = String.fromCharCode.apply(null, files[0].content)

// Parse/convert the JSON

return JSON.parse(string)

}

代码中的注释应该是非常自洽的。但基本上,我们将尝试解析IPNS哈希,在关联的IPFS哈希中获取json文件,然后将二进制数据转换为Javascript对象并返回它。我们将在init函数的底部调用这个函数,并更新我们的viewModel,假设一切正常(如果需要,还可以更新加载状态以关闭微调器):

    // Get profile information if available

try {

// Grab profile json file via the ipns hash

const data = await getProfileJSON(ipfs, ipns)

// Update our existing viewModel target

ko.mapping.fromJS(data, viewModel)

} catch (err) {

console.log(`${err}: using default profile.`)

}

// Change the loading state to update the view

viewModel.state.loading(false)

【IPFS相关】可自行编辑Web页面的应用程序

编辑配置文件

【IPFS相关】可自行编辑Web页面的应用程序

如果保存并重新加载页面,您可能仍然拥有相同的默认配置文件。所以,如果我们可以用自己的信息更新我们的个人资料不是很好吗?你说的没错现在让我们添加这个功能。

下一节将快速进行,因为它涉及到一些击倒魔术。不要太担心绑定处理程序的细节,一旦开始通过IPFS发布内容,我们将再次放慢速度。与此同时,本文还简要介绍了如何使用Knockout处理可编辑元素。我们需要…

  • 通过将以下内容添加到main的顶部,创建两个新的绑定处理程序(惰性的和可编辑的)。js文件(完整文件参考):

import $ from ‘jQuery’

// Special handler for contenteditable elements

// Comes from:

// https://stackoverflow.com/questions/19370098/knockout-contenteditable-binding

// Don’t worry about this for purposes of this tutorial

ko.bindingHandlers.editable = {

init: function (element, valueAccessor, allBindingsAccessor) {

// const value = ko.unwrap(valueAccessor())

const lazy = allBindingsAccessor().lazy

$(element).on(‘input’, function () {

if (this.isContentEditable && ko.isWriteableObservable(lazy)) {

console.log(this.innerHTML)

lazy(this.innerHTML)

}

})

},

update: function (element, valueAccessor) {

const value = ko.unwrap(valueAccessor())

element.contentEditable = value

if (!element.isContentEditable) {

$(element).trigger(‘input’)

}

}

}

// Don’t update view until after we’ve updated model

ko.bindingHandlers.lazy = {

update: function (element, valueAccessor) {

const value = ko.unwrap(valueAccessor())

if (!element.isContentEditable) {

element.innerHTML = value

}

}

}

  • 更新我们的索引.html文件来使用我们新的绑定处理程序(这里是完整的文件以供参考)。我们将在第一个、最后一个、标题、雇主和bio上使用lazy(我把其他的留给读者练习),另外,我们将确保它们只有在状态时才可编辑。编辑是正确的。
  • 更新我们的索引.html文件与一个漂亮的新编辑配置文件按钮,当点击时,将调用我们的viewModel的handleEdit函数(再次,查看完整文件的细节):
…// Add function to handle edit profile clickviewModel.handleEdit = async function () {this.state.editing(!this.state.editing())}

这些变化,你现在应该可以保存,刷新页面,这样当你单击✏️按钮:

【IPFS相关】可自行编辑Web页面的应用程序

简单(几乎)可编辑的概要文件…

 

【IPFS相关】可自行编辑Web页面的应用程序

发布和更新

【IPFS相关】可自行编辑Web页面的应用程序

太酷了!看起来不错。现在让我们在完成编辑后更新配置文件。这其实很简单。我们将简单地添加一些复杂性,我们的简单handleEdit函数:

…// Function to handle edit profile clickviewModel.handleEdit = async function () {const editing = this.state.editing()// Toggle our editing statethis.state.editing(!editing)

if (editing) {

// Export viewModel to JSON

const json = ko.mapping.toJSON(viewModel)

// IPFS add options

const options = {

wrapWithDirectory: true,

onlyHash: false,

pin: true

}

// Create binary buffer from JSON string

const buf = Buffer.from(json)

try {

// Add the new file (same as on desktop)

const res = await ipfs.files.add({

path: ‘json’,

content: buf

}, options)

// Publish new file to peer’s PeerID

const pub = await ipfs.name.publish(res[1].hash)

console.log(`published ‘${pub.value}’ to profile: ${pub.name}`)

window.alert(`published update for profile:n${pub.name}`)

} catch (err) {

console.log(err)

}

}

}

上述函数检查如果我们以前编辑,如果是的,出口我们的更新数据模型JSON,创建一个二进制缓冲区添加到ipf(包装在一个目录,名为JSON),然后将文件发布到我们的施用肥料同行id。可变更新不可变的星际文件系统!

很酷的最后一步,是现在有人看我们的个人资料页面可以查看,然后编辑它并创建自己的版本的概要文件,并发布自己的同伴id。你几乎可以把它像克隆和/或分支在Git中说话,虽然没有全部好版本控制。话虽如此,所有这些东西在js-ipfs中都是超级实验性的。事实上,直到新的/兼容DHT土地,施用肥料的更新只工作在本地节点😫…所以你不太用这个在生产应用程序中,。

考虑到这一点,我们还需要创建一个非常简单的“编辑完整个人资料”按钮,以便通过直接编辑个人资料JSON数据“手动”更新我们的社交媒体链接和背景照片。最后,我们的完整的个人资料应用程序应该看起来像我在这里发布的版本,你可以在GitHub上查看完整的项目:

【IPFS相关】可自行编辑Web页面的应用程序

最终配置文件应用程序与两个编辑模式!

 

【IPFS相关】可自行编辑Web页面的应用程序

一个程序包

【IPFS相关】可自行编辑Web页面的应用程序

 

就是这样!在本教程中,我们用最少的代码和精力构建了一个完全工作的分散配置文件应用程序。我们让事情变得非常简单,但是成功地利用了使应用程序开发变得轻而易举的真实编程模式。所有这些都是为了证明在IPFS及其底层库之上开发真实世界的应用程序是多么容易,这是多么令人惊讶。我们甚至在不可变的web上实现了某种程度的可变性!所以从理论上讲,我们可以通过ipfs网关部署我们的应用ipfs add dist/,然后访问我们的个人资料,或者其他任何人的个人资料,方法是通过ipfs网关访问应用程序并输入他们的对等id……比如:https://ipfs.io/ipfs/Qmapphash/?用户= Qmpeerid😎。

【IPFS相关】由IPFS原力区译制整理,收集外网中各领域人士在使用或开发IPFS及其相关应用时所分享的文章内容。

 

IPFS原力区官网:http://ipfsforce.com

IPFSER社区: http://ipfser.org

微博:http://weibo.com/ipfsforce

【IPFS相关】可自行编辑Web页面的应用程序
点击:“阅读原文”查看英文原版

原创文章,作者:IPFSforce,如若转载,请注明出处:http://ipfser.org/2018/12/04/single-pag-eweb-app/

发表评论

登录后才能评论

联系我们

在线咨询:点击这里给我发消息

邮件:[email protected]

工作时间:周一至周五,9:30-18:30,节假日休息

QR code