去中心化、人人平等的网络世界,更多的可能等你来开拓

点击加入mixlab社区

15000+跨学科人群,机器学习、机器视觉、自然语言处理、知识图谱、量化交易、物联网、区块链、产品经理、交互设计、建筑设计、服装设计、珠宝设计、平面设计、音乐、艺术等。

上一期介绍了分布式社交协议solid,solid把应用跟数据分开了:

数据是一种分布式的服务POD,有点像我们会碰到非常多的网盘产品,有些网盘存用户的照片,有些网盘存用户的文章,有些存用户的歌单,有些存用户的运动数据,有些存用户的社交好友关系,有些存用户的知识等等,只要值得存储的数据,都可以有一种网盘的形式去存储;

应用也是一种独立的存在,它本身不存储用户的数据,它是整合用户数据的地方,也是处理用户数据的地方,比如我们可以开发一款图片社交产品,用户可以在上面发图片,发的图片会保存在用户选定的网盘上,此款社交app只是把用户的照片跟用户的个人信息汇总在一起,按照某个逻辑来呈现。就算此款app,只提供了几个月的服务就被关闭了,用户的照片数据还是存在于用户选定的网盘上;当有另一款app也需要用户提供照片数据时,可以直接调用用户之前发布的照片数据。

整个网络世界,变成了应用跟数据两种基本服务。

非常灵活,我们可以开发各种的创新应用。因为不需要面临数据冷启动的问题。

下面用代码的方式,帮助大家深度了解技术原理,有几个知识点,我们需要提前理解:

什么是POD?

webID是什么?

阅读难度:★★★☆☆

技能要求:JS基础、HTML基础

字数:900字

阅读时长:4分钟

STEP1

获取一个 solid pod

为了读写数据,你需要拥有一个solid pod和账号。访问inrupt网址( https://inrupt.net/ ),注册一下,获取一个webID(账号)。

我的webID:

https://shadowcz.inrupt.net/profile/card#me

STEP2

新建一个HTML文件

新建一个html文件,输入以下代码:

STEP3

添加 Solid auth client 库 及 jQuery 库

为了支持solid,我们需要添加2个组件,一个是JS,一个是登录页面。

• JS库:

https://solid.github.io/solid-auth-client/dist/solid-auth-client.bundle.js

• 登录页面:

https://solid.github.io/solid-auth-client/dist/popup.html

popup是登录页面,在登录页面填入我们自己的webID,然后会跳到webID对应的POD服务提供站点处,登录授权即可。

• jQuery 库:

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js

STEP4

添加登录状态的UI及登录,退出按钮

在html文件里添加标签,如下:

Step 5

为登录按钮添加JS事件,并运行html

在html文件里添加一个script标签,并输入以下js代码:

打开终端,输入:

python -m http.server

打开浏览器,输入:

http://localhost:8000

登录下试试,如下图:

Step 6

为退出登录的按钮添加一个js事件

输入以下代码:

Step 7

把登录用户的webID显示出来

可以把授权的用户webID显示出来,在html中输入input标签,并在script中输入js代码:

Step 8

获取用户存储在POD上的数据

使用RDFlib.js库,操作我们存储在POD上的Linked Data;RDFlib.js已经在html里引用了,我们看一下如何用js获取数据:

使用RDFlib.js获取webID的名字,对应的RDFlib的代码,主要有3步:

Step 9

显示其他字段

由于我们刚创建的webID没有friends关系,可以使用官方示例的一个webID,在

<input id="profile">尝试填入:

https://ruben.verborgh.org/profile/#me

点击view按钮,可以拉取friends关系,js代码:

至此,9步完成了一个简单的solid 应用

去中心化的网络世界,是不是很性感?

有没有兴趣一起研究下solid源码?及探索相关的应用?

——公众号回复留言即可加入社群。

以上为全文。

近期活动推荐

快!TensorFlow、黑客马拉松、DevFest千人大会 ,GDG DevFest 2018在召唤你

--------------------------------------

mixlab 无界社区 是一所面向未来的实验室,它提倡“跨界创新,开放成长”的理念。

——跨界 开放 互助 学习 思维 创新。

目前社区汇集了15000+跨学科人群,主要来自GoogleBrain、微软、华为、阿里鲁班、腾讯、旷视、三角兽、物灵科技、众安保险、美团、360等科技人才、设计师及CEO和投资人;高校分布MIT、Oxford、Cambridge、CMU、UoM、清华、上交大、同济等学生及教师群体;学科跨越机器学习、自然语言处理、量化交易、物联网、区块链、前端、后端、产品经理、UI设计、建筑设计、服装设计、珠宝设计、音乐、艺术等。

社区典型的用户技能为: ML00:小程序开发、AI+设计、区块链技术 ML04: 算法作曲 ML05:AI变脸 ML07:WebGL+Three.js数据可视化 ML14:增长黑客 ML16:机器学习 ML37:AR ML41:人工智能+音乐 ML44:珠宝设计+参数化设计 ML83:量化交易、数字货币交易 ML109:Arduino、processing ML113:人工智能+服装设计 ML206:VR/AR ML245:建筑设计智能化

详细介绍点击以下卡片:

mixlab期待您的加入!

原文发布于微信公众号 - 无界社区mixlab(Design-AI-Lab)

原文发表时间:2018-10-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

Wyn Enterprise 核心功能:行业领先的在线数据报表设计体验

Wyn Enterprise 将 BI 和报表融为一体,创新性的在线报表设计功能,提供类似微软 Office 产品的使用体验,功能丰富却极易上手。对软件公司而言...

19000
来自专栏腾讯社交用户体验设计

再见Metro,Windows 10通用应用设计趋势分析 - 腾讯ISUX

16140
来自专栏ThoughtWorks

弯道超车!后端程序员的Angular快速指南|TW洞见

今日洞见 文章作者、图片来自ThoughtWorks:汪志成。部分图片来自网络。本文版权属ThoughtWorks公司所有,如需转载请在后台留言联系。 友情提示...

323100
来自专栏腾讯社交用户体验设计

见微知著,谈移动缺省页设计 - 腾讯ISUX

24830
来自专栏阮一峰的网络日志

Google日历简易版 2.0

长假期间,我写了一个小程序,现在正式发布。 大家用不用Google日历? ? 它可以用来规划日程、记录事项、甚至写日记,既安全(数据保存在Google的机房)又...

43980
来自专栏Material Design组件

提升用户产品体验的40个产品设计规范

作为一名初级产品狗,原型和prd是基本功。在和竞品需求相同的情况下,产品的很多设计细节让产品产生了不同的差距。从字体颜色位置到核心流程,不同的产品设计方式让用户...

31220
来自专栏互扯程序

设计图都不会画,还想做”架构师“?

什么是系统架构师? 系统架构师是一个既需要掌控整体又需要洞悉局部瓶颈并依据具体的业务场景给出解决方案的团队领导型人物。一个架构师得需要足够的想像力,能把各种目标...

8.2K100
来自专栏守候书阁

个人建议-怎样写出一篇好文章

写文章有几个月了,之前跟几个作者交流写作的方式,有几个作者说自己不知道怎样写好文章,有两个还说,自己写的文章,即使是自己读也是感觉不通顺,但是不知道怎么改!见这...

8410
来自专栏大前端开发

《大前端开发》培训2周小结

经过两周的培训,以及大家的努力,每个人的成长都非常的快。零基础的同学也已开始对HTML、CSS以及JavaScript有了比较形象的认识,开始建立起了编程思维,...

10320
来自专栏互联网杂技

致刚入行的前端工程师

讲真,这篇文章已经憋了好多天了。其实本文可以说是“起于前端,但不止于前端。” 写作的契机是最近在指导一位北京的哥们写前端,有感而发罢了。希望能够给同行一些可行性...

32080

扫码关注云+社区

领取腾讯云代金券