29、基于 IPFS 实现去中心化视频分享应用-优快云博客

本文链接：https://blog.youkuaiyun.com/open4/article/details/149856057

基于 IPFS 实现去中心化视频分享应用

1. 初始化实例

首先，创建 VideosSharing 类的实例，以便后续导入使用：

videos_sharing = VideosSharing()

这里选择导入类的实例，而非类本身，因此进行了类实例的初始化。

2. 创建模板

接下来，开始编写模板。具体步骤如下：
1. 创建模板目录 ：

(videos-venv) $ cd decentralized_videos
(videos-venv) $ mkdir -p videos/templates/videos

创建基础布局模板 ：
使用以下 HTML 代码创建基础布局模板，该模板将被所有其他模板使用，文件路径为 videos/templates/videos/base.html 。完整代码可参考 GitLab 链接。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Decentralized Videos Sharing Application</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
    ...
    ...
    </section>
    {% block content %}
    {% endblock %}
  </body>
</html>

在头部，导入了 Bulma CSS 框架和 Font Awesome JavaScript 文件。基础布局中设置了导航栏，包含主页链接和视频上传链接。 {% block content %} 和 {% endblock %} 之间的部分将由具体模板内容填充。

创建首页模板 ：
在 videos/templates/videos/index.html 创建首页模板，使用以下代码：

{% extends "videos/base.html" %}
{% block content %}
<section class="section">
  <div class="container">
    {% for video in videos %}
      {% cycle '<div class="columns">' '' '' '' %}
        <div class="column">
          <div class="card">
            <div class="card-image">
              <figure class="image is-4by3">
                <img src="{{ video.thumbnail }}" />
              </figure>
            </div>
            <p class="card-footer-item">
              <span><a href="{% url 'video' video_user=video.user index=video.index %}">{{ video.title }}</a></span>
            </p>
          </div>
        </div>
      {% cycle '' '' '' '</div>' %}
    {% endfor %}
  </div>
</section>
{% endblock %}

此模板继承自基础布局，用于展示视频列表。使用 card 类的 div 展示视频， cycle 方法用于生成包含四个 column 类 div 的 columns 类 div ，并在最后关闭该 div 。在卡片底部创建了播放视频页面的链接， url 方法接受 URL 名称和参数。

创建视频播放模板 ：
在 videos/templates/videos/video.html 创建视频播放模板，完整代码可参考 GitLab 链接。

{% extends "videos/base.html" %}
{% block content %}
<section class="section">
  <div class="container">
    <nav class="breadcrumb" aria-label="breadcrumbs">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/channel/{{ video.user }}">Channel</a></li>
        <li class="is-active"><a href="#" aria-current="page">{{ video.title }}</a></li>
      </ul>
    </nav>
    ...
    ...
  </div>
</section>
{% endblock %}

该模板继承基础布局后，创建了面包屑导航，方便用户返回视频上传者的频道页面。使用 HTML 的 video 标签展示视频，下方显示点赞总数，页面底部创建了点赞表单，接受点赞者的地址和密码输入，同时包含隐藏输入用于发送视频上传者的地址和视频索引。表单中包含 {% csrf_token %} 以避免 CSRF 漏洞。

创建频道模板 ：
在 videos/templates/videos/channel.html 创建频道模板，完整代码可参考 GitLab 链接。

{% extends "videos/base.html" %}
{% block content %}
<section class="section">
  <div class="container">
    <nav class="breadcrumb" aria-label="breadcrumbs">
      <ul>
        <li><a href="/">Home</a></li>
        <li class="is-active"><a href="#">{{ video_user }}</a>
        ...
        ...
            </p>
          </div>
        </div>
      {% cycle '' '' '' '</div>' %}
    {% endfor %}
  </div>
</section>
{% endblock %}

此模板与首页模板类似，只是在视频列表顶部添加了面包屑导航。

创建视频上传模板 ：
在 videos/templates/videos/upload.html 创建视频上传模板，完整代码可参考 GitLab 链接。

{% extends "videos/base.html" %}
{% block content %}
<section class="section">
  <div class="container">
    <nav class="breadcrumb" aria-label="breadcrumbs">
      <ul>
        <li><a href="/">Home</a></li>
        <li class="is-active"><a href="#" aria-current="page">Uploading Video</a></li>
      </ul>
    </nav>
    <div class="content">
      ...
      ...
</section>
<script type="text/javascript">
var file = document.getElementById("video_file");
file.onchange = function() {
  if(file.files.length > 0) {
    document.getElementById('video_filename').innerHTML = file.files[0].name;
  }
};
</script>
{% endblock %}

该模板继承基础布局后，创建了面包屑导航和视频上传表单。表单包含四个输入项：视频标题、视频文件、视频上传者的地址和密码。模板底部的 JavaScript 代码用于在选择文件后设置文件上传字段标签上的文件名。由于要上传文件，表单的 enctype 属性需设置为 multipart/form-data 。

3. 配置 URL

URL 文件是 Django 中的路由机制，具体操作如下：
1. 编辑应用的 URL 文件 ：
打开 decentralized_videos/videos/urls.py ，删除原有内容，替换为以下代码：

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
    path('channel/<str:video_user>', views.channel, name='channel'),
    path('video/<str:video_user>/<int:index>', views.video, name='video'),
    path('upload-video', views.upload, name='upload'),
    path('like-video', views.like, name='like'),
]

这里将之前创建的视图映射到路由。例如，通过 http://localhost:8000/video/0x0000000000000000000000000000000000000000/1 访问视频播放页面，参数将映射到 video_user 变量和 index 变量。 path 方法的第一个参数是在浏览器中调用的方式，第二个参数是使用的视图，第三个参数是模板中使用的路由名称。

注册 URL 到项目 URL 文件 ：
编辑 decentralized_videos/decentralized_videos/urls.py ，添加 videos.urls 路径，使 Web 应用知道如何将 URL 路由到视频视图：

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('', include('videos.urls')),
    path('admin/', admin.site.urls)
]

4. 运行演示

现在可以运行应用进行演示，步骤如下：
1. 确保在 decentralized_videos 目录下，先运行私有区块链和 IPFS 守护进程，然后启动服务器：

(videos-venv) $ cd decentralized_videos
(videos-venv) $ python manage.py runserver

打开 http://localhost:8000 ，将看到最近的视频列表。如果对部分视频有缩略图感到困惑，可前往视频播放页面生成缩略图。
点击某个视频，可在该页面播放视频。播放 HTML5 视频可使用 Chrome 浏览器，若使用 Firefox 浏览器，需按照此链接的步骤进行额外设置。
可以使用表单对视频点赞。点击面包屑导航中的“Channel”链接，可查看特定视频上传者的视频列表。
点击导航菜单中的“Upload”链接，可进入视频上传页面进行视频上传。

以下是创建模板和配置 URL 的流程图：

graph LR
    A[创建模板目录] --> B[创建基础布局模板]
    B --> C[创建首页模板]
    B --> D[创建视频播放模板]
    B --> E[创建频道模板]
    B --> F[创建视频上传模板]
    G[编辑应用 URL 文件] --> H[注册 URL 到项目文件]
    C --> I[配置 URL]
    D --> I
    E --> I
    F --> I

通过以上步骤，我们完成了一个基于 IPFS 的去中心化视频分享应用的搭建，包括实例初始化、模板创建、URL 配置和演示运行。后续还可以对应用进行优化和扩展，如添加测试、处理异常情况等。

基于 IPFS 实现去中心化视频分享应用

5. 应用优化与扩展建议

为了让这个去中心化视频分享应用在现实世界中表现得更好，有许多方面需要进一步完善。以下是一些具体的优化和扩展建议：
- 添加测试 ：
- 模型测试 ：对数据模型进行全面测试，确保数据的存储和读取逻辑正确。
- 视图测试 ：测试视图函数，保证页面的渲染和交互功能正常。
- 模板测试 ：检查模板文件，确保页面的显示效果符合预期。
- 集成测试 ：进行整体的集成测试，验证各个组件之间的协作是否顺畅。
- 处理后台任务 ：
- 对于一些耗时的操作，如调用智能合约、与 IPFS 进行文件的添加和获取等，建议使用 Celery 和 RabbitMQ 或 Redis 等工具将这些任务放在后台执行。
- 可以添加 JavaScript 文件，通过轮询机制来监控后台任务的完成情况，也可以使用 Django 通道来实现相同的功能。
- 优化数据访问 ：
- 避免在模型中直接访问智能合约的方法，可以通过定时任务（如 cron）将区块链上的信息存储到数据库中，然后让模型从数据库中获取所需信息。
- 用户体验优化 ：
- 目前每次上传和点赞视频都需要输入地址和密码，为了提高用户体验，可以考虑将地址和密码临时保存，例如存储在会话、cookie 或 web3 对象中。
- 异常处理 ：
- 无效文件处理 ：当前应用假设用户上传的都是有效的视频文件，实际情况中需要处理用户上传无效视频文件或无效 IPFS 路径的情况。可以在前端进行初步验证，也可以在智能合约中进行更严格的验证，但在智能合约中验证会消耗更多的 gas。
- 添加分页和搜索功能 ：为了方便用户浏览和查找视频，需要添加分页和搜索功能。可以考虑对区块链上的事件进行爬取，搜索范围可以不仅限于视频标题，还可以从视频文件中提取信息。

以下是优化和扩展的任务列表：
| 优化方向 | 具体任务 |
| ---- | ---- |
| 测试 | 模型测试、视图测试、模板测试、集成测试 |
| 后台任务 | 使用 Celery 和 RabbitMQ 或 Redis 处理耗时操作，添加 JavaScript 监控任务状态 |
| 数据访问 | 通过定时任务将区块链信息存入数据库 |
| 用户体验 | 临时保存地址和密码 |
| 异常处理 | 处理无效文件和 IPFS 路径，添加分页和搜索功能 |

6. 总结与展望

通过一系列的操作，我们成功地将 IPFS 技术和智能合约技术结合起来，构建了一个去中心化视频分享应用。具体步骤包括：
1. 编写智能合约来存储视频信息和标题，同时引入了加密经济机制，使得点赞视频需要消耗 ERC20 代币。
2. 使用 Django 库构建了一个 Web 应用，包括创建项目、应用、视图、模型、模板和 URL。
3. 在模型中，将视频文件存储在 IPFS 中，并将 IPFS 路径存储在区块链上。
4. 使用 Bulma CSS 框架美化模板，最后启动应用并验证其功能。

在这个过程中，我们掌握了区块链、智能合约、Vyper 编程语言、web3 库等知识，还学会了使用 PySide2 库构建 GUI 前端和使用 Django 库构建 Web 前端。此外，我们还了解了 IPFS 这一去中心化存储技术，它可以作为区块链应用的存储解决方案。

然而，以太坊仍然是一项新兴技术，如分片、权益证明和隐私等技术仍在研究和开发中。这些新技术可能会对我们所学的 Vyper 和 web3 等技术产生影响，因此需要密切关注以太坊平台的最新动态。可以通过此链接了解以太坊即将到来的变化。

以下是整个应用开发流程的总结流程图：

graph LR
    A[编写智能合约] --> B[构建 Web 应用]
    B --> C[创建视图、模型、模板和 URL]
    C --> D[存储视频到 IPFS 和区块链]
    D --> E[美化模板]
    E --> F[启动应用]
    F --> G[优化和扩展]
    G --> H[关注以太坊新技术]

通过掌握这些技能，我们具备了在以太坊平台上构建各种有趣应用的能力。但要持续关注技术的发展，以便在不断变化的技术环境中保持竞争力。