چطور اولین مینی‌اپ تلگرام خود را بسازید: راهنمای گام‌به‌گام

تلگرام در برابر WeChat: نبرد سوپراپ‌ها

WeChat سال‌هاست که بی‌رقیب، پیشتاز دنیای سوپراپ‌هاست. این اپلیکیشن که در سال ۲۰۱۱ راه‌اندازی شد، با کنار هم آوردن پیام‌رسانی، شبکه‌های اجتماعی، پرداخت و خرید آنلاین در یک پلتفرم، به بخشی جدایی‌ناپذیر از زندگی روزمره در چین تبدیل شد. تلگرام که در سال ۲۰۱۳ وارد این عرصه شد، خیلی زود جایگاه خود را پیدا کرد و حالا یکی از رقبای جدی سوپراپ‌ها در سطح جهان است. امروزه توسعه‌دهندگان می‌توانند سرویس‌های نوآورانه بسازند و حتی راهکارهای کوچک تلگرامی را مستقیماً در محیط این پلتفرم توسعه دهند. با مستندات مناسب برای مینی‌اپ‌های تلگرام، هر کسی که بخواهد یک ربات جدید تلگرام بسازد یا با فناوری‌های رایج وب مینی‌اپ طراحی کند، می‌تواند راحت‌تر از همیشه وارد دنیای توسعه اپلیکیشن شود.

تفاوت‌های اصلی تلگرام و WeChat:

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

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

مینی‌اپ‌های تلگرام چیستند و چرا این‌قدر محبوب‌اند؟

مینی‌اپ‌های تلگرام (TMA) درواقع اپلیکیشن‌های وبی هستند که در پلتفرم تلگرام اجرا می‌شوند. آن‌ها را مثل وب‌سایت‌های معمولی در نظر بگیرید که با HTML، CSS و JavaScript ساخته شده‌اند، با این تفاوت که از طریق SDK به قابلیت‌های منحصربه‌فرد تلگرام دسترسی دارند. این اپلیکیشن‌ها مستقیماً در تلگرام باز می‌شوند و تجربه‌ای یکپارچه، امکان اتصال داده‌ها و سیستم‌های پرداخت داخلی را فراهم می‌کنند. برای استفاده مؤثر از تلگرام در ساخت مینی‌اپ، توسعه‌دهندگان معمولاً با BotFather یک ربات تلگرام می‌سازند، برایش نام کاربری انتخاب می‌کنند و تنظیمات لازم را انجام می‌دهند تا ربات به اپلیکیشنشان وصل شود. پس از راه‌اندازی، می‌توان مینی‌اپ‌ها را در گروه‌های تلگرام یا مستقیماً برای کاربران فرستاد و از آن‌ها به‌عنوان بخشی قدرتمند از اکوسیستم استفاده کرد. اگر می‌خواهید از این پلتفرم بهره ببرید، آشنایی با نحوه کار مینی‌اپ‌های تلگرام ضروری است.

چرا توسعه‌دهندگان عاشق TMAها هستند:

نمونه‌هایی از مینی‌اپ‌های موفق تلگرام

بیایید چند نمونه واقعی را ببینیم تا با امکانات این پلتفرم آشنا شویم:

• Wallet – نمونه‌ای از خدمات کیف‌پول که از طریق تلگرام در دسترس‌اند؛ قابلیت‌ها بسته به کیف‌پول و منطقه متفاوت است.
• Hamster Kombat – بازی کلیکی‌ای که توجه و مشارکت گسترده کاربران را به خود جلب کرد.
• DurgerKing – مینی‌اپ نمونه تلگرام برای آزمایش روند سفارش غذا و پرداخت.

چطور کار با مینی‌اپ‌های تلگرام را شروع کنیم؟

به چه چیزهایی نیاز دارید:

• یک ویرایشگر کد (VS Code یا WebStorm کاملاً مناسب‌اند).
• آشنایی مقدماتی با HTML، CSS و JavaScript.
• تلگرام را روی تلفن و رایانه‌تان نصب کنید.
• اشتیاق به کشف چیزهای تازه.

مرحلهٔ ۱: ساخت ربات کمکی

شروع کار با ساخت یک ربات تلگرام است. این ربات نقطهٔ ورود کاربران به اپلیکیشن شما خواهد بود. برای ساختنش این مراحل را دنبال کنید:

1. در تلگرام، @BotFather را جست‌وجو کنید.
2. دستور /newbot را ارسال کنید.
3. برای رباتتان نامی انتخاب کنید.
4. توکنی را که BotFather در اختیارتان می‌گذارد، با امنیت روی سرورتان ذخیره کنید؛ برای استفاده از Bot API به آن نیاز دارید. هرگز آن را در کد مرورگر یا مخزن عمومی قرار ندهید.

در ادامه کد Node.js برای اجرا روی سرور آمده است. node-telegram-bot-api را نصب کنید، توکن را از یک متغیر محیطی سمت سرور بخوانید و پیش از اجرا، https://your-domain.com/app را با نشانی HTTPS اپلیکیشن منتشرشده‌تان جایگزین کنید. دکمهٔ درون‌خطی web_app برای گفت‌وگوی خصوصی با ربات در نظر گرفته شده است:

javascript
const TelegramBot = require('node-telegram-bot-api');
const bot = new TelegramBot(token, { polling: true });

bot.onText(/\/start/, (msg) => {
const chatId = msg.chat.id;
bot.sendMessage(chatId, 'Welcome! Click the button below to open the app.', {
reply_markup: {
inline_keyboard: [[
{
text: 'Open App',
web_app: { url: 'https://your-domain.com/app' }
}
]]
}
});
});

مرحلهٔ ۲: آماده‌سازی محیط

برای ساخت یک Mini App تلگرام، ساختار اولیهٔ پروژه را ایجاد و محیط آزمایشی را آماده کنید:

ساختار پوشه‌های پروژه (محتوای index.html در مرحلهٔ ۳ آمده است):

text
my-tma/
├── index.html
├── styles/
│ └── main.css
├── scripts/
│ └── app.js
└── assets/
└── images/

مرحلهٔ ۳: ساخت اپلیکیشن

این HTML را با نام index.html ذخیره کنید. این فایل پل ارتباطی Telegram WebApp و اسکریپت scripts/app.js را بارگذاری می‌کند. این فقط نمونه‌ای از رابط کاربری است، نه پیاده‌سازی احراز هویت؛ پیش از اعتماد به هویت کاربر، Telegram initData را در بک‌اند اعتبارسنجی کنید.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First TMA</title>
<link rel="stylesheet" href="styles/main.css">
<script src="https://telegram.org/js/telegram-web-app.js"></script>
</head>
<body>
<div id="app">
<h1>سلام، تلگرام!</h1>
</div>
<script src="scripts/app.js"></script>
</body>
</html>

سفارشی‌سازی ظاهر برنامه

کد JavaScript زیر را در فایل scripts/app.js ذخیره کنید. تابع setupTheme رنگ‌های تم تلگرام را اعمال می‌کند و styles/main.css یک فایل stylesheet جداگانه است که می‌توانید آن را شخصی‌سازی کنید. برنامه را در تلگرام و روی Android و iOS آزمایش کنید. نکته مهم: sendData فقط در Mini Appsهایی کار می‌کند که با دکمه web_app در کیبورد پاسخ اجرا شده‌اند، نه با دکمه inline در مرحله ۱. برای ذخیره داده‌هایی که از آن دکمه inline ارسال می‌شوند، یک endpoint در backend پیاده‌سازی کنید و initData را اعتبارسنجی کنید. این نمونه داده‌ها را ذخیره نمی‌کند و پیام‌های web_app_data ورودی را هم مدیریت نمی‌کند:

javascript
const app = {
data: { count: 0 },

init() {
this.setupTheme();
this.setupCounter();
this.setupMainButton();
},

setupTheme() {
const theme = window.Telegram.WebApp.themeParams;
document.body.style.backgroundColor = theme.bg_color;
document.body.style.color = theme.text_color;
},

setupCounter() {
const counter = document.createElement('div');
counter.innerHTML = `
<h2>شمارنده: <span id="count">0</span></h2>
<button id="increment">+1</button>
<button id="decrement">-1</button>
`;
document.querySelector('#app').appendChild(counter);

document.querySelector('#increment').onclick = () => this.updateCount(1);
document.querySelector('#decrement').onclick = () => this.updateCount(-1);
},

setupMainButton() {
const MainButton = window.Telegram.WebApp.MainButton;
MainButton.setText('ذخیره');
MainButton.onClick(() => this.saveData());
MainButton.show();
},

updateCount(delta) {
this.data.count += delta;
document.querySelector('#count').textContent = this.data.count;
},

saveData() {
window.Telegram.WebApp.sendData(JSON.stringify(this.data));
}
};

window.Telegram.WebApp.ready();
app.init();

افزودن قابلیت‌های بیشتر

بعد از آماده‌کردن پایه‌ها، می‌توانید با قابلیت‌های پیشرفته‌تر مینی‌اپ‌تان را ارتقا دهید:

• در صورت نیاز، قابلیت‌های Web3 مبتنی بر TON را اضافه کنید؛ اما خرید کالاها و خدمات دیجیتال در تلگرام باید با Telegram Stars انجام شود، نه TON.
• برای کالاها و خدمات دیجیتال، پرداخت با Telegram Stars را اضافه کنید و تأیید پرداخت و رسیدگی به بازپرداخت‌ها را هم به‌درستی انجام دهید.
• بعد از اعتبارسنجی initData و بررسی تمام مقادیر ارسالی، اطلاعات کاربر را روی سرور ذخیره کنید.
• انیمیشن‌ها و منطق پیشرفته را اضافه کنید.
• با اجازهٔ لازم از کاربر، اعلان‌های ربات را اضافه کنید؛ مینی‌اپ نمی‌تواند به کاربران دلخواه پیام بدهد.
• برای جابه‌جایی بین بخش‌ها، دکمهٔ منو اضافه کنید.

قدم بعدی چیست؟

1. اپ‌تان را روی یک سرور HTTPS مستقر کنید.
2. اپ‌تان را از طریق @BotFather به Telegram متصل کنید.
3. اپ را در شرایط واقعی اشکال‌زدایی و آزمایش کنید.
4. مینی‌اپ تلگرامی‌تان را راه‌اندازی کنید و بازخوردهای اولیه را جمع‌آوری کنید.
5. کدتان را برای دریافت بازخورد از جامعه در GitHub به اشتراک بگذارید؛ اما توکن‌های ربات، اطلاعات محرمانه و داده‌های شخصی را منتشر نکنید.
6. بازخورد کاربران را جمع‌آوری کنید و اپ را بر اساس آن بهبود دهید.

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