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

搜索电影。组织您的收藏。并与您的朋友分享。Movify 通过创建一个类似社交媒体的平台，打开了令人兴奋的电影体验之门，在这个平台上，互动完全基于电影。在这里，您可以查看网络中其他人的活动，并查看他们正在观看、喜欢和分享的电影。 

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

让我们更详细地了解一下这个应用程序是如何制作的。但在我们继续之前，我们想强调一下，我们在Redis Launchpad. 上有各种各样的创新应用程序供您发现 

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

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

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

1. 你将构建什么？

你将构建一个社交平台，允许人们根据电影偏好在全球范围内建立联系。这包括管理你自己的电影收藏，喜欢其他人的电影活动，以及创建一个有趣且简单的方式来发现那些隐藏在主流聚光灯之外的电影。 

下面我们将重点介绍你需要哪些组件才能将此应用程序变为现实，并引导你完成实施过程的每一步。 

准备好开始了吗？

好的，让我们直接进入主题。 

你需要什么？

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

3. 架构

• 前端由应用引擎提供服务，该应用引擎由 NGINX 和 React 应用组成
• 在 Google Kubernetes 引擎上，我们有后端和 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 不在此 repo 上。 由于我们依赖 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 来请求关于电影的信息。另一次调用用于收集关于剧组和演员的信息。

 结论：构建一个电影爱好者可以发现新电影并连接的平台

任何电影迷都能体会到最令人沮丧的事情之一就是试图发现那些隐藏在聚光灯下的迷人电影。这些隐藏的瑰宝很难找到，而且往往需要投入大量时间才能将它们从主流表面下挖掘出来。

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

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

如果您想了解更多关于此应用程序的制作过程，请在此观看 YouTube 视频。但这还不是全部。我们还在 Redis Launchpad 上为您准备了一系列创新应用程序供您查看。

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

快来吧。 受到启发。 并尽情享受 Redis。

谁创建了这个应用程序？

Matthias Hasler

尽管还是一名学生，Matthias 在编程、人工智能、机器学习等方面拥有丰富的经验。要随时了解他参与的所有项目，请在此处查看他的 GitHub 页面。