یک راه حل گرد برای مدیریت تصویر در داشبورد OpenSauced

این پست درباره سفری است که ما برای بهبود داشبورد OpenSauced انجام دادیم، که بینش های ارزشمندی در مورد مشارکت های منبع باز ارائه می دهد.

اکتبر گذشته، داشبورد جدید OpenSauced Insights را راه اندازی آلفا داشتیم. این راه اندازی همزمان با بزرگترین هکاتون منبع باز، Hacktoberfest بود. هدف ما ارائه اطلاعات بینش و گزارش در مورد تعداد مشارکت های پذیرفته شده، ادغام شده و حتی هرزنامه بود. از آن زمان، داشبورد فراتر از داده‌های Hacktoberfest تکامل یافته است و اکنون شامل آواتارهای GitHub است که درخواست‌های کشش فعال و باز GitHub را در 30 روز گذشته نشان می‌دهند.

اگر می‌خواهید مشارکت‌های منبع باز خود را ببینید، حساب GitHub خود را به OpenSauced متصل کنید.

چالش های پیش رو

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

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

راه حل: استفاده از nivo و کلودینری

برای غلبه بر این چالش‌ها، تیم به کتابخانه نمودار nivo برای تجسم و ابری برای دستکاری تصویر و ذخیره 271 هزار تصویر. ما نمودارهای nivo را با موفقیت در داشبورد خود ادغام کردیم، به لطف مجموعه غنی از اجزای تجسم داده که در بالای d3 و React ساخته شده است.

با استفاده از قابلیت‌های دستکاری تصویر و استراتژی ذخیره‌سازی Clodinary، توانستیم آواتارها را گرد کنیم و به‌طور یکپارچه آنها را در داشبورد ادغام کنیم.

امروزه این به لطف nivo و کلودیناری کار می‌کند، اما این سفر شامل آزمایش‌ها و آزمایش‌های زیادی برای راه‌حل عالی بود.

Nivo یک کتابخانه منبع باز است که مجموعه ای غنی از اجزای تجسم داده را ارائه می دهد که بر روی کتابخانه های عالی d3 و React ساخته شده اند.

yarn add @nivo/core @nivo/bar

Cloudinary یک راه حل میزبان برای دستکاری و ذخیره سازی تصاویر برای استفاده مجدد است.

مدیریت پردازش تصویر با نمودارهای الکترونیکی آپاچی

قبل از استفاده از nivo و Cloudinary، ما در ابتدا از نمودارهای الکترونیکی Apache (مخصوصاً یک پوشش React به نام echarts-for-react) برای پردازش و بارگذاری تصویر استفاده می‌کردیم. این رویکرد بسیار کند بود، و در حالی که ما یک محدودیت زمان واقعی داشتیم، کاملاً فرآیند یافتن راه حل بهتر بود.

سفر به یافتن راه حل

ما با چالشی روبرو شدیم که بتوانیم تصاویری را در صفحه ارائه کنیم که مستقیماً از GitHub تهیه شده است. آواتارهای مورد نیاز را می‌توان در کش و دستکاری کرد تا با طراحی تصویر گرد ما مطابقت داشته باشد. تعداد کل مشارکت کنندگان نمایش داده شده در طول رویداد حدود 150 هزار نفر بود و امروز نزدیک به 300 هزار مشارکت کننده به عنوان مشارکت در محبوب ترین مخازن منبع باز در OpenSauced نشان داده می شوند.

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

زمانی در حرفه هر توسعه دهنده ای فرا می رسد که طرحی به شما ارائه می شود که ممکن است دور از دسترس یا خارج از محدوده باشد. ساده‌ترین درخواست در اطراف تصاویر نمودارهای ما را شکست و کل تیم را ملزم کرد که راه‌حل‌ها را طوفان فکری کنند.

شما می توانید آن طوفان فکری را در شماره های بسته شده ما ببینید.

راه حل 1: رویکرد جاوا اسکریپت

اولین تلاش ما گرد کردن دستی تصاویر با استفاده از یک تابع lib سریع بود که من با هم ریختم.

function applyBorderRadius(imageElement) {
  imageElement.style.borderRadius = '50%';
}

// Get the image element
var image = document.getElementById('myImage');

// Apply the 50% border radius
applyBorderRadius(image);

همیشه خوب است که با یک رویکرد شروع کنید، حتی اگر اشتباه باشد.

این راه حل اول نیاز به اصلاح داشت و کار نمی کرد زیرا تصاویر نمودار الکترونیکی را با تصاویر روی نمودار پراکنده محدود می کردند. ما نتوانستیم مستقیماً به عناصر دستکاری کنیم تا بعد از این واقعیت دستکاری کنیم.

ما به راهی برای دستکاری تصاویر قبل از ارسال به نمودار نیاز داشتیم.

راه حل 2: Imagemagick برای گرد کردن تصاویر

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

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

https://images.weserv.nl/?url=https://www.github.com/bdougie.png?size=60?v=4&h=300&w=300&fit=cover&mask=circle&maxage=7d

لینک این راه حل

این کار می کرد، اما هنوز باید مشکل ذخیره سازی را حل کنیم.

من واقعاً می‌خواستم یک سرویس بسازم تا از ImageMagick + ذخیره‌سازی جدید Supabase برای انجام این کار استفاده کنم، اما مایل به حفظ آن راه‌حل نبودم و فقط زمان کمی برای کشف ابزارهای منحصر به فرد بیشتر داشتیم.

(اگر می خواهید چنین سرویسی بسازید، من را پیدا کنید، و من دوست دارم یک آزمایش کننده بتا باشم.)

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

راه حل 3: استفاده از کلودیناری برای دستکاری و ذخیره سازی تصویر

برای حل مشکل حافظه پنهان و بهینه سازی پردازش تصویر، ابزارها و خدمات مختلفی را بررسی کردیم.

Cloudinary دستکاری تصویر و استراتژی ذخیره سازی را ارائه می دهد. آنها همچنین یک ردیف رایگان سخاوتمندانه دارند – اما برای شفافیت کامل، به این نکته اشاره می‌کنم که مقدار اولیه داده‌های ما برای Hacktoberfest بلافاصله به سطح پرداختی افزایش یافت.

https://res.cloudinary.com/colbycloud/image/fetch/f_auto,q_auto/w_400,h_400,c_crop,r_400,g_auto/v1/https://avatars.githubusercontent.com/u/5713670

پیوند به راه حل ابری

شما می توانید روابط عمومی با راه حل را نیز به صورت زنده مشاهده کنید.

راه حل این بود که با استفاده از آواتار GitHub به عنوان یک لفاف بسته بندی کنید imageUrl.

// lib/utils/roundedImages

const roundedImage = (imageUrl: string, cloudName: string | undefined) => {
  return cloudName
    ? `https://res.cloudinary.com/${cloudName}/image/fetch/c_fill,g_face,h_300,w_300,bo_20px_solid_white,r_max/f_auto,e_shadow/${imageUrl}`
    : imageUrl;
};

// components/organisms/Dashboard/dashboard.tsx

import roundedImage from "lib/utils/roundedImages";

scatterChartData = prs.map(({ updated_at, linesCount, author_login }) => {
      const author_image = author_login.includes("[bot]") ? "octocat" : author_login;

      const data = {
        x: calcDaysFromToday(new Date(updated_at)),
        y: linesCount,
        contributor: author_login,
        image: roundedImage(`https://www.github.com/${author_image}.png?size=60`, process.env.NEXT_PUBLIC_CLOUD_NAME)
      };
      return data;
    });
  }

پیوند به کد

تعامل با Cloudinary تماماً مبتنی بر URL است و به ما امکان می‌دهد شناسه کاربری GitHub را به عنوان یک گزینه در پرواز ارسال کنیم. از همان شناسه برای یادآوری تصویر ذخیره شده نیز استفاده می شود، به این معنی که ما به طور پیش فرض کش داشته ایم. همچنین نیازی به ایجاد زیرساخت جدیدی برای این کار نداشتیم.

با ذخیره 150 هزار نمایه کاربر اولیه، ما بلافاصله نیاز به پرداخت 90 دلار در ماه برای سطح حرفه ای داشتیم، که احساس می کردیم برای ما منطقی و قابل پیش بینی است.

ما امروز همچنان در همان طرح کلودیناری هستیم، عمدتاً به دلیل اینرسی و این واقعیت که هنوز باید آماده ساخت و نگهداری چیزی باشیم که در محصول ما نیست. تاکنون، کلودینری در حال ذخیره 271 هزار تبدیل تصویر برای ما است.

این سناریو یک سناریوی ساخت در مقابل خرید کلاسیک است که در آن می‌توانیم حافظه پنهان و ذخیره‌سازی تصویر خود را در S3 بسازیم، اما بدهی‌های فناوری تحمیل‌شده به راه‌حلی مانند آن اولویت ما نبود. 90 دلار نیز ما را به بدهی نمی‌اندازد.

مهاجرت به نمودارهای nivo

در ماه دسامبر، به دلیل ویژگی‌های مدرن و جامعه فعال، از نمودارهای الکترونیکی آپاچی به نمودارهای nivo تغییر مکان دادیم. این تصمیم به دلیل وضعیت منسوخ شده نمودارهای الکترونیکی و مشارکت های محدودی بود که دریافت کرد. ما قصد داریم برای بهبود ادغام و تعامل آن با تصاویر در بالادست به nivo کمک کنیم.

ما یک گفتگوی فعال در بحث های nivo در مورد این بهبود ویژگی و دیگر ویژگی ها داریم. نگهدارنده واقعاً پاسخگو بوده است و ما مشتاقانه منتظر مشارکت در بالادست برای پشتیبانی از پروژه هستیم.

اگر نظر یا نظری در مورد رویکرد ما دارید یا راه حل های جایگزینی برای به اشتراک گذاشتن دارید، از نظرات شما استقبال می کنیم. بیایید به یادگیری از یکدیگر و تقویت پروژه های منبع باز خود ادامه دهیم.