Skip to content

Instantly share code, notes, and snippets.

@shd101wyy
Last active May 23, 2018 21:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shd101wyy/7290e242fd489c86ee4c7e4d2b739bb5 to your computer and use it in GitHub Desktop.
Save shd101wyy/7290e242fd489c86ee4c7e4d2b739bb5 to your computer and use it in GitHub Desktop.
ribbit

ribbit

I hope we didn't unleash a beast.

A decentralized social media web application based on Ethereum platform.
基于以太坊的去中心化社交程序。

demo: http://shd101wyy.github.io/ribbit/

Please read this first:

  • This project is still under development. We would recommend you to try this project on Ethereum Ropsten Test Network instead of Main Ethereum Network, because using Ribbit on Ropsten Test Network is completely free of charge, and we might deploy new smart contract in the future and deprecate the old one. We might also make changes to the smart contract on Ropsten Test Network, so you posts might lose. Please use this project at your own risk.
  • You are responsible for whatever you post, and you have to pay for the free of the speech. Think twice before you make a post because your post will stay on the blockchain forever. It is unchangeable and undeletable. All your posts will stay public on blockchain, so please don't post sensitive data.
  • We do not host media files for you. We only save your text written in markdown to Ethereum blockchain.

Usage

  1. Install MetaMask in your Chrome browser and launch it. Follow the MetaMask instructions and create an account.
  2. Switch to Ropsten Test Network. Visit the faucet website listed below and request test ethers. Don't worry, they are fake ether coins.
  3. Visit http://shd101wyy.github.io/ribbit/ to start using ribbit. The first time you visit ribbit website, it will ask you to finish a signup. Simply finish the form and then click Publish profile to blockchain button to create your account. Wait for a few minutes until the transaction finishes, then refresh your browser.

You may notice the MetaMask window pop up when you click Publish profile to blockchain button, that is because writing data to blockchain isn't free. You would have to pay for the miner to execute the transaction. You only need to change the Gas Price field in the MetaMask window. The higher Gas Price you set, the faster the transaction will finish.

Make a post

Posts in ribbit are writtein in Markdown. There are two types of posts now:

  • Normal post

for example:

This is a normal post written in [markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet).
  • Article post

for example:

![](article/cover/image.png)

# Article title

my content goes here

Post to topic

You can make a post to a topic by writing #{topic}.
For example:

Hello #{world} will post this to `world` topic

Mention a user

You can mention a person in your post by writing @{username}.
For example:

Hi @{ribbit} will notify the user `ribbit` this about post.

What will be saved to blockchain and what will not

Will be on blockchain:

  • Your profile information like your username, bio, avatar url, and cover url.
  • Your posts written in markdown.

Will not be on blockchain:

  • Your media files written in your markdown post, such as images, videos, etc...
  • Your followings, faviorite topics, setttings will be saved locally in your browser.

Developer section

Development

$ npm run frontend:prepare # install necessary node modules for development
                         # on Windows, you might need to run the following in advance:
                         #   $ npm install --global --production windows-build-tools
$ npm run frontend:dev     # start building and watching.
                         # then open a new terminal and run =>
$ npm run server:start     # start a static http server at address http://127.0.0.1:12345.

Deployment

$ npm run frontend:build

then copy ./dist to your server.

References

License

University of Illinois/NCSA Open Source License

ribbit

I hope we didn't unleash a beast.

A decentralized social media web application based on Ethereum platform.
基于以太坊的去中心化社交程序。

示例网站:http://shd101wyy.github.io/ribbit/

在使用 Ribbit 之前,请先阅读一下内容

  • 这个项目依然在开发当中。我们推荐你使用以太坊的 Ropstren 测试网络 而不是 主网络,以为在 Ropsten 测试网络 上面运行 Ribbit 是完全免费的,并且我们可能会在将来发布新的智能合约并且作废掉旧的智能合约。我们也可能会修改 Ropsten 测试网络 上面的智能合约,所以你发布的文字可能会消失。请自己承担使用该项目的风险。
  • 你应该对你发布的文字负责,并且你需要为你的言论有所支付。在你发布文字之前,请多思考一遍。因为你发布的文字将会永久的存留在区块链上。它会是无法更改的,且无法被删除的。所有你发布的文字将会是完全公开的,所以请不要发布敏感信息。
  • 我们不会保存你的媒体文件,我们只会保存你的 markdown 文字到以太坊区块链上。

使用

  1. 在 Chrome 浏览器中安装 MetaMask 插件并启动它。根据提示完成 MetaMask 钱包账号注册。
  2. 切换至 Ropsten 测试网络 (点击左上角 Main Ethereum Network 然后选择 Ropsten Test Network 完成网络切换)。打开一下网站并且请求测试用的以太币。请不必担心,这些都是假的以太币。
  3. 访问 http://shd101wyy.github.io/ribbit/ 开始使用 ribbit。当你第一次访问 ribbit 网站是,它会要求你完成注册。请在语言中选择简体中文,然后填写完表格,接着点击 发布个人信息到区块链 按钮。等候几分钟直到交易结束,然后刷新你的浏览器开始使用。

当你点击 发布个人信息到区块链 按钮后,你会发现 MetaMask 会弹出个支付窗口,那是因为往区块链中写数据不是免费的。你需要支付给矿工费用来执行交易。你只需要改变其中的 Gas Price(油价)。设置的 Gas Price (油价) 越高,交易完成的速度越快。

发布文字

ribbit 中发布的文字是基于 Markdown 格式的。 这里有两种分类:

  • 普通

例如:

这是一段写于 [markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) 的普通文字。
  • 文章

例如:

![](文章/封面/图片.png)

# 文章标题

你的文章内容

发布到话题

你可以发布你的文字到一个话题通过编写 #{话题}
例如:

你好 #{世界} 将会发布这段文字到 `世界` 主题。

提到用户

你可以提到一个用户通过编写 @{用户名}。 例如

你好 @{ribbit} 将会通知用户 `ribbit` 这段文字。

什么会被保存到区块链上,什么不会

将会被保存在区块链上的有:

  • 你的个人信息,例如 用户名,个人简介,头像图片链接,墙图片链接。
  • 你写于 markdown 格式下的文字。

不会被保存到区块链上的有:

  • 你的 markdown 文字下引用的媒体文件,例如图片,视频,等。
  • 你关注的人,关注的话题,程序设置将会被保存在浏览器本地。

开发者部分

开发

$ npm run frontend:prepare # 安装相应的依赖
                           # 如果你使用的是 Windows,请先运行下面的命令:
                           #   $ npm install --global --production windows-build-tools
$ npm run frontend:dev     # 开始 building 以及 watching 前端文件。
                           # 打开一个新的 terminal 终端,然后运行 =>
$ npm run server:start     # 启动 http://127.0.0.1:12345 地址下的服务器。

部署

$ npm run frontend:build

然后复制 ./dist 下的文件到你的服务器。

参考

License

University of Illinois/NCSA Open Source License

Ribbit
avatar https://tinyurl.com/ybhvqmwo
wall https://tinyurl.com/ybmauocm
Joker
avatar https://tinyurl.com/y8l6xcjy
wall https://tinyurl.com/ycbtubnf
<iframe src="https://player.bilibili.com/player.html?aid=23459945&cid=39139016&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment