در دنیای ارتباطات دیجیتال امروزی، نیاز به ابزارهای تعاملی، شخصیسازیشده و قابل توسعه، بیشتر از هر زمان دیگری احساس میشود. پلتفرم راکت چت با رویکرد متنباز و قابلیتهای گستردهٔ خود، بستری مناسب برای توسعهٔ اپلیکیشنهایی فراهم کرده که میتوانند تجربهٔ کاربری را بهطور چشمگیری بهبود دهند.
در این مقاله، با فرایند کامل ساخت یک اپلیکیشن بهنام MemeBuddy آشنا خواهید شد. این آموزش، علاوه بر جنبههای فنی توسعه اپلیکیشن در Rocket.Chat، نحوهٔ کار با رابطهای کاربری تعاملی، اتصال به API های خارجی و تطبیق عملکرد اپلیکیشن در محیطهای مختلف را گامبهگام و دقیق شرح میدهد.
اگر به دنبال ساخت اپلیکیشنهای کاربردی در پلتفرم راکت چت هستید یا میخواهید قابلیتهای آن را در پروژههای واقعی به کار ببرید، این راهنما نقطهٔ شروعی جامع و عملی برای شما خواهد بود.
راهاندازی محیط توسعه راکت چت (Rocket.Chat)
در ابتدا، نیاز به یک سرور برای تست اپلیکیشن خواهید داشت. گزینههای متعدد و متنوعی برای راهاندازی سرور وجود دارند. روی دستگاه خود که برای برنامه نویسی استفاده می شود، باید راکت چت Apps-Engine CLI را نصب نمایید. برای این کار، مستندات مربوطه را دنبال کنید.
ایجاد اپلیکیشن MemeBuddy
ابتدا با استفاده از CLI (رابط خط فرمان)، starter اپلیکیشن را تولید کنید:
تصویر(۱)
طراحی دستورات Slash
برای کدنویسی دستور slash، یک پوشه به نام commands ایجاد کنید و درون آن، فایلی با نام meme.ts قرار دهید. این فایل، شامل تابعی با نام executor خواهد بود که به اپلیکیشن میگوید زمانی که کاربری دستور /meme را در یک کانال ارسال میکند، چه اقدامی انجام دهد:
public async executor(
context: SlashCommandContext,
read: IRead,
modify: IModify,
http: IHttp,
persistence: IPersistence
): Promise<void> {
console.log("A small step for man, a giant leap for mankind");
}
ثبت دستور MemeCommand
دستور MemeCommand را درون فایل MemeBuddyApp.ts که در مرحلهٔ تولید ایجاد شده است، ثبت نمایید. این کار را درون متد extendConfiguration و با استفاده از کد زیر انجام دهید:
await configuration.slashCommands.provideSlashCommand(new MemeCommand(this));
با انجام اقدامات بالا، اولین اپلیکیشن راکت چت (Rocket.Chat) شما ایجاد خواهد شد.
بارگذاری اپلیکیشن روی سرور
برای قرار دادن اپلیکیشن روی سرور خود، فرمان زیر را اجرا نمایید:
rc-apps deploy --url http://localhost:3000 --username <username> --password <password>
پس از آن، عملکرد اپلیکیشن را مشاهده خواهید کرد. کافی است دستور /meme را در کانال موردنظرتان اجرا نمایید تا پیام زیر را از نیل آرمسترانگ مشاهده کنید:
A small step for man, a giant leap for mankind.
(یک گام کوچک هر انسان، جهشی بزرگ برای بشریت.)
فراخوانی API های سیستمهای خارجی در راکت چت
اپلیکیشنهای Rocket.Chat اغلب به سیستمهای خارجی بزرگ متصل میشوند تا دادهای دریافت کرده یا عملیاتی انجام دهند. این ارتباط معمولاً از طریق API های RESTful صورت میگیرد. اپلیکیشن MemeBuddy از API مربوط به D3vd برای دریافت Meme ها (تصویر با متن طنز) استفاده میکند.
در MemeBuddy، از تابع ()http.get استفاده میشود و پارامترهای REST نظیر subreddit (زیرمجموعهٔ Reddit) و تعداد Meme ها به یک سرور میزبان ارسال میگردد:
https://meme-api.com/gimme
نتیجهٔ این درخواست:
تصویر(۲)
افزودن اجزای تعاملی رابط کاربری در جریان چت
برنامههای راکت چت از UIKit برای ساخت بلوکهای پیام غنی (Rich Message Blocks) استفاده میکنند. اگر با BlockKit در Slack آشنایی دارید، باید بدانید که تمام فرآیندها در رابط IModify انجام میشود. فایلی با نام initiatorMessage.ts در پوشه lib ایجاد کنید. درون آن، تابع initiatorMessage را به شکل زیر تعریف نمایید:
export async function initiatorMessage({
data, read, persistence, modify, http
}: {
data; read: IRead; persistence: IPersistence; modify: IModify; http: IHttp;
}) {
// بدنه تابع
}
برای ارسال یک پیام متنی ساده به یک کانال، تنها دو خط کد نیاز است:
const greetBuilder = await modify
.getCreator()
.startMessage()
.setRoom(data.room)
.setText(`Hey _${data.sender.username}_ !`);
await modify.getCreator().finish(greetBuilder);
واسط IModify امکان ارسال پیامهایی با جزئیات کامل را فراهم میکند که میتوانند شامل اجزای تعاملی رابط کاربری باشند. برای استفاده از این قابلیت، متد ()getBlockBuilder جهت دریافت کلاس BlockBuilder استفاده شده و اجزای بلوک در پیامها درج می گردند.
در نمونهٔ زیر، سه دکمه برای دستهبندیهای مختلف Meme ها ایجاد میشود:
block.addActionsBlock({
blockId: "subreddits",
elements: [ block.newButtonElement({
actionId: "memeSelect",
text: block.newPlainTextObject("Programmer"),
value: "programmerhumor",
style: ButtonStyle.PRIMARY,
}), block.newButtonElement({
// سایر کلیدها مشابه مورد بالا هستند
value: "dankmemes",
}), block.newButtonElement({
// سایر کلیدها مشابه مورد بالا هستند
value: "wholesomememes",
}), ],
});
نمایش پیامهای تعاملی فقط برای فرستنده
هدف این است که در یک کانال عمومی، تنها کاربری که با MemeBuddy تعامل برقرار میکند پیام حاوی دکمهها را ببیند. بدین منظور از متدهای getNotifier و notifyUser استفاده میشود:
await modify
.getNotifier()
.notifyUser(data.sender, builder.getMessage());
این پیام صرفاً در طول سشن کاربر باقی میماند. اجرای دستور /meme اکنون خروجی زیر را به همراه خواهد داشت:
تصویر(۳)
اتصال عملکرد دکمهها برای فراخوانی REST API
کلیک روی هر دکمه باید باعث شود که میمِ مربوط به همان دستهبندی از Reddit از طریق REST API دریافت گردد. این اتصال با متد ()executeBlockActionHandler در کلاس MemeBuddyApp انجام میشود.
با فراخوانی ()context.getInteractionData جزئیات تعامل (Interaction) دریافت میگردد. اگر actionId برابر memeSelect باشد، به این معنا است که یکی از سه دکمه کلیک شده است. مقدار data.value توسط دکمه در هنگام کلیک برگشت داده میشود. از این مقدار برای درخواست Meme ها از طریق REST API استفاده کنید:
public async executeBlockActionHandler(
context: UIKitBlockInteractionContext,
http: IHttp, // ... پارامترهای دیگر
) {
const data = context.getInteractionData();
const { actionId } = data; switch (actionId) {
case "memeSelect": {
try {
const memeResponse = await http.get(
`https://meme-api.herokuapp.com/gimme/${data.value}/1`,
); // ارسال memeResponse در یک پیام return {
success: true,
};
} catch (err) {
// مدیریت خطا
}
} // پایان بلوک case
} // پایان بلوک switch
} // پایان تابع
ارسال تصاویر از طریق ضمیمه پیام (Message Attachment)
Meme ها بهصورت Attachment درون کانال ارسال میشوند. کلاسی با نام MemeAsImageAttachment در پوشهٔ lib ایجاد کنید که واسط IMessageAttachment را پیادهسازی کند:
import { IMessageAttachment } from "@rocket.chat/apps-engine/definition/messages";
export class MemeAsImageAttachment implements IMessageAttachment {
imageUrl?: string;
constructor(imgUrl: string) {
this.imageUrl = imgUrl;
}
}
اکنون میتوان با استفاده از ()IMesssageExtender::addAttachment یک ضمیمه به پیام افزود:
const memeSender = await modify
.getCreator()
.startLivechatMessage()
.setVisitor(data.visitor)
.setText(`*${memeResponse.data.memes[0].title}*`)
.addAttachment(
new MemeAsImageAttachment(`${memeResponse.data.memes[0].url}`),
);
با انجام مراحل فوق، MemeBuddy تکمیل شده و آمادهٔ استفاده در هر کانال گفتگوی تیمی در راکت چت است.
سازگاری اپلیکیشن با LiveChat
Rocket.Chat یک پلتفرم قدرتمند برای ساخت وبسایتهای خدمات مشتری آنلاین (real-time)، پورتالهای تعاملی و مراکز پشتیبانی چند کاناله است. ویجت LiveChat آن روزانه توسط میلیونها کاربر مورد استفاده قرار میگیرد.
تصویر(۴)
سازگار کردن MemeBuddy برای کار با ویجت LiveChat فرایندی ساده است. در محیط LiveChat دستور اسلش (Slash Command) وجود ندارد اما میتوان از کلمات محرک (trigger words) در پیامها به عنوان جایگزین استفاده کرد.
تجزیه کلمات محرک در پیامهای LiveChat
برای دسترسی به تمام پیامهای ارسالی، کلاس MemeBuddyApp باید واسط IPostMessageSent را پیادهسازی کرده و متد ()executePostMessageSent را فراخوانی نماید. در ادامه، بررسی میشود که آیا پیام شامل کلمه محرک :meme: است یا خیر:
if (message.room.type !== "l") {
return;
}
if (message.text === ":meme:") {
const data = {
room: message.room,
sender: message.sender,
};
await initiatorMessage({ data, read, persistence, modify, http });
}
جمع بندی: اپلیکیشن خود را منتشر کنید
راکت چت دارای فروشگاهی به نام Rocket.Chat Apps Marketplace است که از طریق آن میتوانید اپلیکیشن خود را به صورت رایگان یا پولی در اختیار کاربران Rocket.Chat سراسر دنیا قرار دهید.