如何构建无服务器动态支持ugc的web3应用
传统web服务中必须有一个中心化服务器托管所有数据,那么是否可以在无服务器的情况下构建 web 应用。
web1.0 和 web2.0 的一个重要区别是是否支持用户创建内容(英语:User-generated content,缩写:UGC),web3.0 一个重要区别就是去中心化(decentralisation)。
事实上已经有无服务器的静态 web 服务,例如 ipfs ,用户可以把 html 网页制作完成后,上传到 ipfs 供人浏览。但是这个技术有几个问题,第一个就是门槛高,大部分用户无法掌握制作html 网页并上传这套复杂的流程。实际上对于用户来讲,所谓的web3使用体验更像web1.0时代,只能浏览少量的页面,连 web2.0 时代的ugc 都无法实现。当然有很多伪web3,把服务器托管在aws,然后使用一个钱包登录。
那么如何适合去中心化的同时支持ugc呢?
技术实现
目前的基于 ipfs 的 web3 主要技术障碍就是内容创建、部署的技术难度太大,例如你在九十年代想有一个个人博客,你需要会制作html,有自己的服务器,有自己的域名。在21世纪的现在,你想在web3建一个个人博客,技术难度不亚于当年。
web2.0 的开创最重要的标志就是,用户使用浏览器,点击就能发布内容,别告诉用户学习html、js、css,还要上传托管这些复杂的概念。这里可以通过一些技术手段,把在 web3 发布内容的体验接近web2.0。
我们制作一个页面,页面用户可以输入任意内容,支持文本、图片、视频等格式,然后用户点击提交后,在网页前端上传到 ipfs ,返回用户一个 ipfs 上的地址,如同在百度贴吧发帖一样简单的流程。
实现流程
先在页面添加一个可视化富文本编辑器,可视化富文本编辑器技术已经非常非常成熟了,用户使用门槛也非常低,这里就不具体怎么实现累述了。
然后用户点击发布的时候,获取富文本编辑器生成的html,加入到模板中,把html提交到ipfs上。
const formData = new FormData();
formData.append('file', file);
let api = '/api/v0/add';
$.ajax({
url: api,
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(res) {
if (res.Hash) {
conslog.log(res)
} else {
console.error('上传失败');
}
},
error: function() {
console.error('请求失败');
}
});
这里拿一张图片的返回类型举例。 返回结果
{
"Name": "wallhaven-x65vld.jpg",
"Hash": "QmU7AKibF1M1182v1Y7ec7LKuLQ39cnguYhAqAkPEfJbQo",
"Size": "14738098",
"Url": "https://cdn.img2ipfs.com/ipfs/QmU7AKibF1M1182v1Y7ec7LKuLQ39cnguYhAqAkPEfJbQo/?filename=wallhaven-x65vld.jpg"
}
ipfs访问地址: ipfs网关 + “/ipfs/” + Hash + “/?filename=” + Name
ipfs网关可以切换任意一个 ipfs 网关地址,用户也可以自行部署。
然后就给用户跳转到新的页面,一个 ugc 的 web3 应用就构建完成了。
基于这个简单的实现,就可以构建更复杂的 web3 应用了,毕竟最开始 web 就是支持文字链接的网页构成。
本实现开源链接:https://github.com/chenjia404/ipfs-telegra.ph
你可以在下列地址进行尝试,在web3上写一篇文章
本文在web3的链接为:https://eth.sucks/ipfs/QmPop46rv7m8LkxJK2Ar75Awy8gWBdkwrrkoEguMbGcPmo