آموزش کامل ساخت و کدنویسی پاوراپ در ترلو (Trello Power-Up)
در این ویدئو آموزشی، من احسان قسیمی از تیم دیجیتال مارکتینگ وبینیو، نحوه ساخت و کدنویسی یک پاوراپ (Power-Up) در ترلو را به شما آموزش می‌دهم. پاوراپ‌ها ابزارهایی هستند که به شما امکان می‌دهند ویژگی‌های جدیدی را به ترلو اضافه کنید و کارهای خاصی را به‌صورت خودکار انجام دهید. با استفاده از پاوراپ‌ها میتوانید ترلو را به ابزاری بسیار کارآمدتر برای مدیریت پروژه‌ها و تیم‌های خود تبدیل کنید.
پاوراپ‌ها چیستند؟
پاوراپ‌ها افزونه‌های کاربردی برای ترلو هستند که به شما این امکان را می‌دهند تا ویژگی‌های جدید به ترلو اضافه کنید. این ویژگی‌ها می‌توانند شامل قابلیت‌های مدیریت زمان، نظارت بر کارها و یا اضافه کردن ویجت‌های اختصاصی باشند. در این آموزش، قصد داریم یک پاوراپ ساده بسازیم که به شما کمک کند مدت زمان حضور هر کارت در یک لیست خاص را شبیه‌سازی کنید.
مراحل ساخت پاوراپ در ترلو
-
ورود به صفحه ترلو پاوراپ
ابتدا وارد آدرس “Trello Power-Up” شوید. اینجا محلی است که میتوانید پاوراپ‌های خود را مدیریت کنید. در اینجا میتوانید یک پاوراپ جدید بسازید و به ورک‌اسپیس‌های خود اضافه کنید. -
ایجاد و تنظیمات اولیه پاوراپ
در این مرحله، باید اسم پاوراپ خود را انتخاب کنید و مشخص کنید که کجا و برای کدام ورک‌اسپیس‌ها فعال باشد. بعد از این، برای نوشتن کد نیاز به ایجاد یک فایل با نام‌های “index.html” و “popup.html” دارید. -
-
کدنویسی فایل‌ها
حالا نوبت به نوشتن کد می‌رسد. در این مرحله، کدهای HTML و JavaScript را در فایل‌های مربوطه می‌نویسید. این کدها باید مشخص کنند که چه زمانی کارت‌ها به‌روز می‌شوند و چه اطلاعاتی باید نمایش داده شود. -
آپلود کدها و استفاده از سرویس‌های آنلاین
برای آپلود کدهای خود، از سرویس‌هایی مانند “Netlify” استفاده کنید. این سرویس‌ها به شما امکان می‌دهند که فایل‌های HTML و JavaScript خود را آنلاین بارگذاری کنید. پس از آپلود، لینک مربوطه به شما داده می‌شود که میتوانید آن را در ترلو وارد کنید. -
اتصال به ترلو
پس از آپلود کدها، وارد ترلو شوید و در بخش “Power-Up” گزینه “Add Power-Up” را انتخاب کنید. حالا پاوراپ شما در لیست Power-Upها نمایش داده می‌شود. روی گزینه “Add” کلیک کنید تا به بورد ترلو اضافه شود. -
فعال‌سازی و استفاده از پاوراپ
بعد از اضافه کردن پاوراپ، آن را فعال کنید و تنظیمات دلخواه خود را اعمال کنید. مثلاً میتوانید مشاهده کنید که کارت‌ها چه مدت زمانی در یک لیست خاص بوده‌اند. این اطلاعات می‌تواند به شما کمک کند تا زمان‌بندی و مدیریت پروژه‌های خود را بهبود ببخشید.
کدهای لازم برای این پاور آپ :
<!DOCTYPE html>
<html lang="fa">
<headtest>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<titletest>مدت زمان کارت</titletest>
<script src="https://p.trellocdn.com/power-up.min.js"></script>
</headtest>
<bodytest>
<script>
var TrelloPowerUp = window.TrelloPowerUp;
TrelloPowerUp.initialize({
'card-buttons': function(t, options) {
return [{
icon: 'https://cdn-icons-png.flaticon.com/512/747/747376.png',
text: 'مدت زمان کارت',
callback: function(t) {
return t.popup({
title: "مدت زمان کارت",
url: "popup.html",
height: 250
});
}
}];
},
'board-buttons': function(t, options) {
console.log("📌 دکمه بروزرسانی ثبت شد!");
return [{
icon: 'https://cdn-icons-png.flaticon.com/512/860/860790.png',
text: 'بروزرسانی مدت‌زمان کارت‌ها',
callback: function(t) {
return t.cards('id', 'name', 'idList').then(function(cards) {
return t.lists('id', 'name').then(function(lists) {
var now = Date.now();
var listMap = {};
lists.forEach(list => {
listMap[list.id] = list.name; // ذخیره نام لیست بر اساس ID
});
var updates = cards.map(function(card) {
return t.get(card.id, 'shared', 'webinewTracking').then(function(data) {
if (!data) {
data = {};
}
if (data.lastListId && data.lastMove) {
var timeSpent = now - data.lastMove;
var lastListName = listMap[data.lastListId] || "لیست نامشخص";
if (!data[lastListName]) {
data[lastListName] = 0;
}
data[lastListName] += timeSpent;
}
data.lastListId = card.idList;
data.lastMove = now;
return t.set(card.id, 'shared', 'webinewTracking', data);
});
});
return Promise.all(updates).then(function() {
console.log("✅ اطلاعات مدت‌زمان کارت‌ها به‌روزرسانی شد!");
t.alert({ message: "✅ اطلاعات مدت‌زمان کارت‌ها به‌روزرسانی شد!" });
});
});
});
}
}];
}
});
</script>
</bodytest>
</html>
نتیجه‌گیری
ساخت و استفاده از پاوراپ‌ها در ترلو می‌تواند تجربه کاربری شما را بسیار بهبود دهد. با استفاده از این روش، شما میتوانید قابلیت‌های سفارشی‌سازی شده‌ای را برای تیم و پروژه‌های خود ایجاد کنید. ساخت پاوراپ‌ها به‌سادگی امکان‌پذیر است و به شما این امکان را می‌دهد تا ترلو را به ابزاری بسیار کارآمدتر تبدیل کنید.
- اشتراک‌گذاری پاوراپ‌ها: اگر این ویدئو برای شما مفید بود، لطفاً آن را با دوستان و همکارانتان به اشتراک بگذارید.
امیدوارم این آموزش برای شما مفید واقع شده باشد. اگر سوالی دارید یا نیاز به کمک بیشتر دارید، میتوانید در قسمت نظرات با من در ارتباط باشید.
اگر برای کسب و کار خود نیاز به طراحی سایت دارید میتوانید در صفحه طراحی سایت در مشهد درخواست خودتان را ثبت بفرمایید.
