Memory Lane：使用Pinata FILE API打造动态时间胶囊应用

这是提交给The Pinata Challenge的提交

我创建了一个名为MemoryLane的应用程序，它是一个数字时光胶囊，允许用户将时刻和想法保存成文件，并在未来重新发现这些保存的内容。该项目结合了传统时光胶囊的怀旧情怀与现代云存储技术，利用Pinata提供的文件API实现安全高效的文件管理。

MemoryLane 这个软件的主要特点有：

• 数字记忆保存功能
• 基于用户设定日期的未来揭示
• 灵活的时间胶囊开启时间
• 多媒体体验（支持各种文件类型）
• 个人及协作选项
• 安全与隐私
• 云端可靠性

这个应用是使用以下工具或技术开发的：

• Next.js（TypeScript版本）
• Pinata SDK 用于文件上传和管理
• React-dropzone 用于处理文件上传
• Axios 用于网络请求
• Date-fns 用于日期处理

技术实现的亮点：

1. 使用NextJS进行项目搭建，包括必要的依赖
2. 使用环境变量集成Pinata以进行API密钥管理
3. 用于文件上传和时光胶囊展示的自定义组件
4. 处理文件上传至Pinata的服务器端API路由
5. 使用React Hook进行时光胶囊的客户端状态管理
6. 为时光胶囊在会话之间持久化进行本地存储集成
7. 在Vercel上部署应用程序

该项目展示了Pinata的各项功能，包括：

• 使用Pinata SDK进行文件上传
• 创建用于安全文件访问的签名URL
• 与NextJS API路由集成，以在服务器端处理文件

这个项目展示了Pinata在Web2应用程序中如何被有效利用，突显了它在Web3和dApp开发之外的广泛适用性。

链接：记忆小径 MemoryLane

：课程简介

MemoryLane GitHub 页面

在MemoryLane项目中，Pinata的作用在存储和检索时间胶囊文件的核心功能中起着至关重要的作用。下面是一些具体的例子。

1. Pinata SDK 的集成：项目使用 Pinata SDK 来实现与 Pinata 服务的无缝交互。这在 utils/config.ts 文件中进行配置。

       import { PinataSDK } from "pinata"

       // 导入PinataSDK
       export const pinata = new PinataSDK({
         pinataJwt: `${process.env.PINATA_JWT}`,
         pinataGateway: `${process.env.NEXT_PUBLIC_PINATA_GATEWAY_URL}`
       })

进入全屏模式，退出全屏模式

此设置让应用程序能够在整个服务器端的代码里利用Pinata提供的服务。

我们在api/files/route.ts文件中使用Pinata的SDK工具来处理文件上传的过程。

import { NextResponse, NextRequest } from "next/server";
import { pinata } from "@/utils/config";

export async function POST(req: NextRequest) {
  try {
    const data = await req.formData();
    const file: File | null = data.get("file") as unknown as File;
    const uploadData = await pinata.upload.file(file);
    const url = await pinata.gateways.createSignedURL({
      cid: uploadData.cid,
      expires: 360000,
    });
    return NextResponse.json({ url }, { status: 200 });
  } catch (e) {
    console.error(e);
    return NextResponse.json(
      { error: "错误：服务器内部错误" },
      { status: 500 }
    );
  }
}

全屏显示；退出全屏

这段代码展示了我们如何使用Pinata直接从用户输入上传文件内容。

1. 生成签名URL：上传文件后，生成签名URL以确保安全访问：

       const url = await 点对点.gateways.createSignedURL({
         cid: 上传数据.cid,
         expires: 360000,
       });

全屏开启 和 退出全屏

这个签名的URL确保只有授权用户能访问上传文件，提高了我们时间胶囊的安全性。

1. 前端集成：在前端，我们使用这些带签名的URL来安全显示图片。

       import Image from "next/image";
    import { format } from "date-fns";

    import InfoIcon from "@/assets/icons/info-icon";
    import LockIcon from "@/assets/icons/lock-icon";
    import { TimeCapsuleStateType } from "@/types";

    export default function TimeCapsule({
      url,
      openDate,
      created_at,
    }: TimeCapsuleStateType) {
      return (
        <div className="flex flex-col gap-y-2 max-w-[240px]">
          <div className="relative">
            <Image
              src={url}
              width={240}
              height={240}
              alt="胶囊时光"
              className="object-cover aspect-square"
            />
            {new Date() < new Date(openDate) && (
              <div className="absolute bg-black/85 inset-0 flex items-center justify-center">
                <LockIcon />
              </div>
            )}
          </div>
          <p className="text-sm font-medium text-gray-700">
            将在 {format(openDate, "MM月dd日")} 开启
          </p>
          <div className="bg-gray-200 flex space-x-1.5 p-2 rounded-xl">
            <InfoIcon />
            <p className="text-xs text-gray-500">
              创建于 {format(created_at, "MM月dd日")}
            </p>
          </div>
        </div>
      );
    }

进入全屏，退出全屏

这里的 url 是 Pinata 返回的经过签名的 URL，允许我们显示时光胶囊的图片而不暴露原始文件路径。

1. 配置 Pinata 网关：为了确保 NextJS 可以正确地处理来自 Pinata 网关的图像，我们对 next.config.mjs 文件进行了配置：

       const 定义 nextConfig = {
         图片: {
           远程模式: [
             {
               协议: "https",
               主机名: "your-gateway-url.mypinata.cloud", // 你的网关URL
             },
           ],
         },
       };

全屏模式 退出全屏

这样的配置允许 NextJS 从 Pinata 的网关高效地优化并提供图片。

通过Pinata的这些功能，MemoryLane可以实现：

• 安全文件存储：文件存储在Pinata的去中心化网络上，确保持久性和可用性。
• 受控存取：签名的URL提供安全的文件访问方式，非常适合数字时光胶囊的按时间释放性质。
• 快速检索：Pinata的网关确保在“打开”时光胶囊时迅速访问文件。

点击这里查看完整文章，这篇文章详细介绍了整个实现过程。

封面图片由ChatGPT生成