如何使用 FastAPI 和 React.js 构建一个组织和分享电影收藏的应用程序

搜索电影，整理您的收藏，并与朋友分享。Movify 通过创建一个类似社交媒体的平台，为用户打开了令人兴奋的电影体验的大门，在这个平台上，所有互动都只基于电影。在这里，您可以查看网络中的人员活动，并了解他们正在观看、喜欢和分享的电影。

Redis 的先进功能通过其以闪电般的速度在组件之间传输数据的能力，最大程度地提升了用户体验。持续实现这一点通过保持用户参与度来优化应用程序的功能。这使得平台上的命令和社交互动能够实时执行，反映了现实生活事件的速度。

让我们详细了解一下这个应用程序是如何制作的。但在此之前，我们想强调一下，我们在 Redis Launchpad 上提供各种各样的创新应用程序供您探索。

因此，如果您喜欢这篇文章，请务必浏览一下！

如何构建一个组织和分享电影收藏的应用程序

1. 您将构建什么？
2. 您需要什么？
3. 架构
4. 入门
5. 设置后端
6. 数据如何存储
7. 数据如何访问
8. 工作原理
9. 结论

1. **您将构建什么？**

您将构建一个社交平台，允许人们在全球范围内基于电影偏好进行连接。这涉及管理您自己的电影收藏、点赞其他人的电影活动，以及创建一种有趣且便捷的方式来发现主流之外的隐藏电影。

在下文中，我们将重点介绍您将需要哪些组件才能将此应用程序变为现实，以及带您逐步了解实现过程。

准备开始了吗？

好的，让我们直接开始吧。

您需要什么？

• Nginx: 用于各种任务的开源软件，包括网页服务器、反向代理、缓存负载均衡等。
• React: 用于开源 Javascript 库。
• Fast API 后端: 用于使用 Python 3.6+ 构建 API 的快速、现代的 Web 框架。
• Google App Engine: 用于开发和托管 Web 应用程序的云计算平台。
• Docker: 用于开发人员将应用程序打包到容器的平台。
• Docker Compose: 用于定义和运行多容器 Docker 应用程序。
• JSON: 用于实现 ECMA-404 JSON 数据交换标准作为本机数据类型的 Redis 模块。
• TMDB API: 一个开放的社区 API，用于以编程方式获取和访问数据库（735,597 部电影、126,552 部电视剧和 3,253,968 张图片）。

3. **架构**

• 前端由 App Engine 提供服务，App Engine 由 NGINX 和 React App 组成。
• 在 Google Kubernetes Engine 上，我们拥有后端和 Redis。
• 电影数据库 (TMDB) API 是一个外部 API，提供了一种快速、一致且可靠的方式来获取第三方电影数据。TMDB API 用于搜索和检索隐藏在大量电影收藏中的新电影。结果由服务器使用 LRU 策略进行缓存。用户生成的数据存储在图形和 JSON 集群中。在这里，一切都可以使用 JSON 进行更新。
• 对外部 API 的所有请求都通过后端进行代理。

4. **入门**

在您的本地计算机上安装以下软件

• Git
• Docker
• Docker Compose

步骤 1：克隆存储库

git clone https://github.com/redis-developer/movify

步骤 2：设置本地安装

要本地启动应用程序，您需要一个 docker-compose。出于安全原因，backend/.env 不在此仓库中。由于我们依赖 Google 登录进行身份验证，因此您需要创建一个 Web 客户端 并注册 http://127.0.0.1:8000/api/auth 作为授权重定向 URI。

接下来，您需要为加密生成一个随机字符串 openssl rand -hex 16。最后，您需要创建一个 TMDB 帐户并 获取 API 密钥。

现在您可以按如下方式填写 .env 文件

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
SECRET_KEY=
TMDB=

步骤 3. 定义微服务

Docker compose 文件定义了构成您的应用程序的服务。在本例中，有 3 个服务 - 前端、后端和 Redis。

version: '3.7'
services:
  nginx:
  image: nginx:1.17
  volumes:
     - ./nginx/nginx.conf:/etc/nginx/conf.d/default.conf
  ports:
    - 8000:80
  depends_on:
    - backend
    - frontend
redis:
  image: redislabs/redismod:latest
  command: --loadmodule /usr/lib/redis/modules/redisearch.so --loadmodule /usr/lib/redis/modules/redisgraph.so --loadmodule       
           /usr/lib/redis/modules/rejson.so --dir /data
  #   ports:
    #     - 6379:6379
  volumes:
     - ./redis-data:/data
  frontend:
  image: redis21_frontend
  volumes:
     - ./frontend:/app
  backend:
  image: redis21_backend
  entrypoint: uvicorn main:app --host 0.0.0.0 --port 8000 --root-path /api --reload
  depends_on:
    - redis
  environment:
    - HOST=http://127.0.0.1:8000
  volumes:
     - ./backend:/app

步骤 4. 执行脚本启动应用程序容器

docker build -t redis21_backend backend/
docker build -t redis21_frontend frontend/
docker-compose up

脚本 run.sh 将构建映像并启动容器。

5. **开始使用 Create React App**

此项目使用 Create React App 初始化。

在项目目录中，您可以运行以下命令

npm start

这将在开发模式下运行应用程序。

打开 http://localhost:3000 在浏览器中查看。

如果您进行编辑，页面将重新加载。您还将在控制台中看到任何 lint 错误。

npm test

此命令以交互式观察模式启动测试运行器。您可以访问有关 运行测试 的部分以获取更多信息。

npm run build

将应用程序构建到生产环境中的 build 文件夹中。这会以生产模式正确捆绑 React，并优化构建以实现最佳性能。构建已缩小，文件名包含哈希值。此时，您的应用程序已准备好部署！

有关更多信息，请参阅有关 部署 的部分。

npm run eject

注意：这是一个单向操作。一旦您弹出，您就无法再返回！

如果您对构建工具和配置选择不满意，那么您始终可以在任何时候弹出。此命令将从您的项目中删除单个构建依赖项。相反，它会将所有配置文件和传递依赖项（webpack、Babel、ESLint 等）复制到您的项目中，以便您可以完全控制它们。

除了弹出之外，所有命令仍然有效。但是，它们将指向已复制的脚本，因此您可以对其进行调整。此时，您将独自面对挑战。

同样重要的是要知道，您永远不必使用弹出。经过精心策划的功能集适合小型和中等部署，因此您不必感到有义务使用此功能。

6. **设置后端**

使用 TMDB API 搜索和检索隐藏在大量电影收藏中的新电影。结果由服务器使用 LRU 策略进行缓存。用户生成的数据存储在图形和 JSON 集群中。在这里，一切都可以使用 JSON 进行更新。

数据建模

此数据模型中有三种类型的节点

Users
Collection 
Movie

有三种类型的边

User - [: FOLLOWS]> User
User - [:HAS]> Collection 
Collection - [:CONTAINS]> Movie {time}

为了创建这些类，我们创建了抽象节点和上行边，两者都使 CRUD 操作变得非常简单。

拥有这些集合将为您提供灵活高效的查询。与用户和收藏相关的元数据存储为 JSON。

User {id, picture, name}
Collection {id, name, description}

CRUD 操作和 Cypher 查询

下面是用于 CRUD 操作的抽象类。这使得创建特定类型的节点以及在一行代码中获取所有 CRUD 操作变得非常简单。

但是，对于查询，我们更喜欢使用 Cypher。

所有内容都已加时间戳。当我们想要添加朋友活动视图时，这非常方便，这仅仅是我们在已加时间戳的关系上进行的简单 Cypher 查询的添加。

8. **工作原理**

步骤 1：主页

主页显示朋友的最新活动。在这里，您将有一个分享链接，用于与平台上的其他用户连接。

步骤 2：收藏

电影被组织成收藏，然后与您的朋友分享。

步骤 3：搜索

搜索电影是通过使用外部 API 完成的，响应使用 LRU 驱逐策略进行缓存。

步骤 4：电影详情

要获取有关电影的更多信息，您可能需要进行更多调用。在这里，我们使用 TMDB API 请求有关电影的信息。另一个 API 用于收集有关剧组和演员的信息。

 结论：构建一个平台，让电影爱好者可以发现新电影并建立联系

对于任何电影爱好者来说，最令人沮丧的事情之一就是试图发现隐藏在聚光灯之外的引人入胜的电影。这些隐藏的宝石很难找到，而且通常需要花费大量时间才能从主流表面下挖掘出来。

但有了 Movify，粉丝们可以通过与具有相似观点和电影品味的其他人建立联系，更有效地浏览到他们喜欢的电影，从而使用户能够分享。他们的活动，并查看其他人喜欢、分享和观看的电影。

从性能角度来看，Redis 强大的缓存功能保证了低延迟，使用户能够实时互动。这消除了任何滞后发生的可能性并污染用户体验，使用户能够与其他电影爱好者无缝互动。

如果您想了解更多有关此应用程序是如何制作的，请在此处观看 YouTube 视频。但这还不是全部。我们还有各种创新的应用程序供您在 Redis Launchpad 上查看。

来自世界各地的程序员正在通过使用 Redis 释放他们的创造力，您也可以。

赶快行动吧。获得灵感。享受 Redis 带来的乐趣。

谁创建了这个应用程序？

Matthias Hasler

尽管 Matthias 仍然是学生，但他拥有丰富的编程、人工智能、机器学习等方面的经验。要及时了解他参与的所有项目，请查看他的 GitHub 页面。