زمان استراحت: کپسول زمان دیجیتال با پیناتا

Summarize this content to 400 words in Persian Lang
این ارسالی برای چالش پیناتا است

لینک های سریع

چیزی که من ساختم

بخش زیادی از ردپایی که در این دنیا باقی می گذاریم به طور فزاینده ای دیجیتالی می شود. من بحث نمی‌کنم که این چیز بد یا خوب است، اما می‌گویم که ردپای ما، خاطرات‌مان، چیزی که به جا می‌گذاریم مهم است صرف نظر از دیجیتالی یا فیزیکی بودن.

به همین دلیل تصمیم گرفتم بسازم زمان استراحت. Break Time یک برنامه وب است که در آن می‌توانید کپسول‌های دیجیتالی زمان بسازید، خاطرات دیجیتال خود را ذخیره کنید، و سپس آنها را در تاریخ دیگری باز کنید تا به خاطرات دوست‌داشتنی نگاه کنید تا گم نشوند.

من به کپسول زمان زنگ می زنم پیناتاس، به نام سرویس مورد استفاده برای ایجاد این برنامه (Pinata) نامگذاری شده است. اما من نیز با این اصطلاح تصمیم گرفتم زیرا برای چیزی که نشان می دهد مناسب است، ظرفی با اشیاء با ارزش و چیزهای خوب (خاطرات) که می توانید با باز کردن ظرف مذکور به داخل آن دسترسی پیدا کنید.

مثال استفاده

در اینجا من یک نمای کلی از نحوه استفاده شما از این برنامه ارائه خواهم کرد (در بخش بعدی به جزئیات خواهم پرداخت).

فرض کنید بهترین دوست شما، جان، و دوست صمیمی دیگر شما، جیل، قرار است تا چند هفته دیگر ازدواج کنند. شما این ایده عالی را به دست می آورید تا خاطرات مراسم ازدواج آینده را تا 5 سالگی آنها ذخیره کنید (مطمئن هستید که آنها عمیقاً یکدیگر را دوست دارند و برای همیشه ماندگار خواهند بود).

شما شروع به ایجاد یک کپسول زمان برای ذخیره آن خاطرات می کنید و سپس به آنها اجازه می دهید در شروع پنجمین سالگرد خود آن را باز کنند تا به خاطرات دوست داشتنی خود نگاه کنند.

با این حال، متوجه می شوید که حتی در حال حاضر بیشتر خاطرات شما با آنها دیجیتال است (فیلم، عکس، PDF، SVG و غیره). و با توجه به اینکه سال 2024 است، مشکوک هستید که ازدواج آنها نیز همینطور باشد.

بنابراین شما تصمیم به استفاده دارید زمان استراحت. شما یک حساب کاربری ایجاد می کنید، حلقه دوستان خود، از جمله خود جیل و جان را تشویق می کنید تا حساب های خود را ایجاد کنند. شما آنها را دعوت می کنید تا در برنامه دوستان شما باشند.

سپس، یک پیناتا (کپسول زمان) ایجاد می کنید. شما نام آن را “پنجمین سالگرد جان و جیل” می گذارید، توضیحاتی ایجاد می کنید، مانند “سلام دوستان! 🌸 بیایید عشقی را که جان و جیل در پنج سال آینده ایجاد خواهند کرد، با ثبت خاطرات، آرزوهای خوب و امیدهایشان جشن بگیریم. زمانی که بعداً قفل این کپسول را باز کنیم، به گذشته نگاه می کنیم، می خندیم، پیام ها، عکس ها یا ویدیوهای خود را ترک می کنیم و کمک می کنیم تا این سالگرد واقعاً فراموش نشدنی شود. حتی ممکن است یک تصویر کوچک از اولین قرار ملاقات آنها اضافه کنید.

بعد شما تصمیم می گیرید که چه کسی باید بتواند در این پیناتا (کپسول زمان) مشارکت کند. شما همه دوستان خود را به عنوان مشارکت کننده در نظر می گیرید. و جان و جیل را به عنوان تنها بازکننده‌های پیناتا تعیین می‌کنید، بنابراین فقط آنها می‌توانند تصمیم بگیرند آن را باز کنند. شما حداقل زمان را برای پنج سال آینده تعیین می کنید، بنابراین خود را مجبور می کنید، از جمله جان و جیل، صبر کنید و خاطرات را قبل از پنجمین سالگرد خراب نکنید.

و در نهایت، پس از پنج سال، پس از اینکه کوهی از خاطرات را ساختید، در نهایت می توانید از جان و جیل بخواهید که پیناتا را باز کنند. سپس می توانید دانلود کنید و با لبخند به تمام آن خاطرات نگاه کنید.

سایر موارد استفاده

البته جدول زمانی لزوماً نباید 5 سال باشد. شما حتی می توانید برای ذخیره خاطرات یک سفر کمپینگ 1 هفته ای پیناتاس ایجاد کنید. این به شما بستگی دارد!

نسخه ی نمایشی

ویدئو

ویدئوی نمایشی در یوتیوب

جریان برنامه

صفحه اصلی

صفحات احراز هویت

داشبورد

این جایی است که بیشتر داده های شما لیست می شود. در بالا پیناتاس هایی را که ایجاد کرده اید می بینید. در سمت راست پایین، لیستی از کاربرانی را که به عنوان دوستان اضافه کرده‌اید، مشاهده خواهید کرد. در همان مکان، فرمی نیز وجود دارد که در آن می توانید کاربران را با نام کاربری خود به عنوان دوستان خود اضافه کنید.

در پایین سمت چپ، فهرستی از Pinatas را می‌بینید که دیگران در آن ایجاد کرده‌اند اما به نوعی شما را درگیر کرده‌اند، یا به عنوان مشارکت‌کننده، بازکننده یا هر دو اضافه شده‌اید.

پیناتا را ایجاد کنید

اینجا جایی است که شما پیناتا خود را ایجاد می کنید. می توانید عنوان، توضیحات و تصویر کوچک آن را تنظیم کنید.

همچنین می‌توانید تعیین کنید که چه کسی می‌تواند در پیناتا مشارکت داشته باشد، و همچنین زمانی که کاربران دعوت‌شده می‌توانند در Pinata مشارکت داشته باشند، محدود کنید. می‌توانید تعیین کنید چه زمانی مشارکت‌کنندگان مجاز می‌توانند مشارکت را شروع کنند و همچنین زمانی که Pinata از پذیرش مشارکت خودداری کند.

سپس، می توانید ویژگی های مربوط به باز کردن پیناتا را تنظیم کنید. می‌توانید حداقل زمان باز را تعیین کنید، که اولین تاریخ و زمانی را که می‌توان پیناتا را باز کرد، مشخص می‌کند. شما همچنین می توانید تعیین کنید که چه کسی برای باز کردن این پیناتا لازم است. شما همچنین می توانید یکی از این مقادیر را حذف کنید. به عنوان مثال، می توانید حداقل زمان باز را تنظیم کنید و “بازکننده ها” را حذف کنید، به این ترتیب، وقتی زمان برسد، Pinatas به طور خودکار باز می شود. یا فقط می‌توانید «بازکننده‌های» مجاز را وارد کنید. به این ترتیب، زمانی که همه درب‌ها پیناتا را باز کردند، پیناتا باز می‌شود. یا می‌توانید هر دو این مقادیر را ترکیب کنید، بنابراین «بازکننده‌ها» فقط می‌توانند پیناتا را بعد از زمان تعیین‌شده باز کنند.

می توانید خود را از مشارکت یا باز کردن کنار بگذارید.

مشاهده پیناتا

پیناتای باز نشده

این همان چیزی است که وقتی روی پیناتای باز نشده کلیک می کنید، خواهید دید. جزئیات آن را خواهید دید. اینجا همچنین جایی است که شما خاطرات/فایل های دیجیتال خود را به Pinata (اگر بخشی از مشارکت کنندگان هستید) کمک می کنید.

در این حالت نمی‌توانید فایل‌هایی را که مشارکت داده‌اید مشاهده کنید (باید آن را باز کنید).

شما همچنین پیناتا را در این نما باز خواهید کرد. این در زمان واقعی است، بنابراین وقتی همه کاربران پیناتا را باز می کنند، یا فقط زمان باز شدن پیناتا فرا رسیده است، پیناتا را در حالت باز خواهید دید. زیر را ببینید.

پیناتا را باز کنید

این پیناتا در حالت باز است. دیگر نمی‌توانید فایل‌ها را مشارکت دهید، اما اکنون می‌توانید تمام آن خاطراتی را که ایجاد کرده‌اید و آپلود کرده‌اید ببینید.

صفحه نمایه

کد من

کد کامل را می توان در Github من یافت

لینک های سریع

چیزی که من ساختم

زمان استراحت یک برنامه وب برای ایجاد است کپسول های زمان دیجیتال (به نام پیناتاس) برای ذخیره و گرامی داشتن خاطرات. پیناتاها در تاریخ آینده باز می شوند تا آن خاطرات را دوباره زنده کنید و مطمئن شوید که ردپای دیجیتال شما معنادار باقی می ماند.

مثال استفاده

شما می توانید یک پیناتا به نام ایجاد کنید “پنجمین سالگرد جان و جیل”، جایی که دوستان پیام‌ها، عکس‌ها یا ویدیوهای منتهی به 5 سالگی خود را ذخیره می‌کنند. فقط جان و جیل می توانند بعد از پنج سال آن را باز کنند و تمام خاطرات داخل آن را باز کنند.
این برنامه به مشارکت کنندگان اجازه می دهد تا با تنظیمات قابل تنظیم برای جدول زمانی مشارکت و افرادی که می توانند پیناتا را باز کنند، خاطرات اضافه کنند.

نسخه ی نمایشی

ویدئوی نمایشی در یوتیوب

اسکرین شات ها

صفحه اصلی

داشبورد

پیناتا را ایجاد کنید

پشته فناوری

Next.js برای گردانندگان مسیر جلو و ایمن

Appwrite برای احراز هویت و ذخیره سازی ابرداده

پیناتا برای ذخیره فایل در IPFS

کد مثال برای Route Handlers

export async function…

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

جزئیات بیشتر

پشته فناوری

Next.js

من از Ol' Reliable Next.js به عنوان قسمت جلویی خود و همچنین برای ایجاد چند کنترل کننده مسیر امن برای مدیریت آپلود فایل در سمت مشتری، همانطور که توسط Pinata توصیه شده است، استفاده می کنم.

// getting a one time use key to use in the front end
export async function GET() {
try {
const uuid = crypto.randomUUID();
const keyData = await pinata.keys.create({
keyName: uuid.toString(),
permissions: {
endpoints: {
pinning: {
pinFileToIPFS: true,
},
},
},
maxUses: 1,
});
return NextResponse.json(keyData, { status: 200 });
} catch (error) {
return NextResponse.json(
{ text: “Error creating API Key:” },
{ status: 500 }
);
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

هر بار که می‌خواهم فایلی را آپلود کنم، این را صدا می‌کنم، زیرا Next.js میزان حجم فایلی را که می‌توانید روی سرور ارسال کنید محدود می‌کند.

به طور مشابه، من با یک route handler دیگر تماس می‌گیرم تا یک URL امن برای یک فایل خاص دریافت کنم:

export async function POST(req: NextRequest) {
try {
const data = await req.json();
const url = await pinata.gateways.createSignedURL({
cid: data.cid,
expires: 30,
});
return NextResponse.json(url, { status: 200 });
} catch (error) {
console.log(error);
return NextResponse.json(
{ text: “Error creating API Key:” },
{ status: 500 }
);
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

Appwrite

من به احراز هویت و همچنین مکانی برای ذخیره برخی فراداده ها برای فایل ها نیاز داشتم، بنابراین از تأیید اعتبار و پایگاه داده Appwrite در ارتباط با Pinata استفاده کردم، بنابراین می توانم جزئیات اضافی را در فایل های آپلود شده در Pinata ذخیره کنم، مانند نام فایل ها، cid و غیره.

بنابراین من یک فراداده فایل را در Appwrite واکشی می کنم (در این مورد، این یک مشارکت برای یک پیناتا خواهد بود)، سپس از ابرداده به دست آمده برای بازیابی یک فایل از Pinata توسط آن استفاده می کنم. CID.

const openFile = async (contribution: Contribution) => {
// getFileURL calls the route handler that returns a signed URL for a particular file by its CID
const fileURL = (await getFileUrl(contribution.cid)) as string;

window.open(fileURL, “_blank”);
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نحوه استفاده از پیناتا

Pinata (سرویس) برای ذخیره فایل اصلی این برنامه استفاده شد. این تصویر کوچک پیناتا (کپسول زمان)، تصویر نمایه کاربر، و مهمتر از همه، مشارکت های دیجیتالی برای پیناتا را ذخیره می کند.

در اینجا یک نسخه ساده از نحوه پیاده‌سازی Pinata برای آپلود/جایگزینی تصویر نمایه یک کاربر آمده است:

// gets set on the onChange prop of an input element of type “file”
const handlePictureChange: React.ChangeEventHandler<
HTMLInputElement
> = async (e) => {
if (file) {
// get the one time key
const keyRequest = await fetch(“/api/key”);
const keyData = await keyRequest.json();

// upload to pinata
const upload = await pinata.upload.file(file).key(keyData.JWT);

// delete the original profile picture (replace) by its file id
if (user.profile.profilePictureFileId) {
const delRes = await fetch(“/api/delete-files”, {
method: “POST”,
headers: {
“Content-Type”: “application/json”,
},
body: JSON.stringify({
fileIds: currentUser.profile.profilePictureFileId,
}),
});
}

// update metadata on appwrite
await databases.updateDocument(
config.dbId,
config.userProfileCollectionId,
currentUser.profile.$id,
{
profilePictureFileId: upload.id,
profilePictureCid: upload.cid,
}
);
}
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

جریان مشابهی برای آپلود مشارکت های فایل و همچنین آپلود تصاویر کوچک Pinata استفاده شد.

export async function

// getting a one time use key to use in the front end
 export async function GET() {
  try {
    const uuid = crypto.randomUUID();
    const keyData = await pinata.keys.create({
      keyName: uuid.toString(),
      permissions: {
        endpoints: {
          pinning: {
            pinFileToIPFS: true,
          },
        },
      },
      maxUses: 1,
    });
    return NextResponse.json(keyData, { status: 200 });
  } catch (error) {
    return NextResponse.json(
      { text: "Error creating API Key:" },
      { status: 500 }
    );
  }
}

export async function POST(req: NextRequest) {
  try {
    const data = await req.json();
    const url = await pinata.gateways.createSignedURL({
      cid: data.cid,
      expires: 30,
    });
    return NextResponse.json(url, { status: 200 });
  } catch (error) {
    console.log(error);
    return NextResponse.json(
      { text: "Error creating API Key:" },
      { status: 500 }
    );
  }
} 

const openFile = async (contribution: Contribution) => {
    // getFileURL calls the route handler that returns a signed URL for a particular file by its CID
    const fileURL = (await getFileUrl(contribution.cid)) as string;

    window.open(fileURL, "_blank");
  };

// gets set on the onChange prop of an input element of type "file"
const handlePictureChange: React.ChangeEventHandler<
    HTMLInputElement
  > = async (e) => {
    if (file) {
      // get the one time key
      const keyRequest = await fetch("/api/key");
      const keyData = await keyRequest.json();

      // upload to pinata
      const upload = await pinata.upload.file(file).key(keyData.JWT);

      // delete the original profile picture (replace) by its file id
      if (user.profile.profilePictureFileId) {
        const delRes = await fetch("/api/delete-files", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            fileIds: currentUser.profile.profilePictureFileId,
          }),
        });
      }

      // update metadata on appwrite
      await databases.updateDocument(
        config.dbId,
        config.userProfileCollectionId,
        currentUser.profile.$id,
        {
          profilePictureFileId: upload.id,
          profilePictureCid: upload.cid,
        }
      );
    }
  };