İlk Telegram Mini App’inizi Nasıl Oluşturursunuz? Adım Adım Rehber

Telegram ve WeChat: Süper Uygulamaların Rekabeti

WeChat, yıllardır süper uygulamalar arasında tartışmasız lider konumunda. 2011’de kullanıma sunulan uygulama; mesajlaşma, sosyal medya, ödemeler ve e-ticareti tek bir platformda buluşturarak Çin’de günlük yaşamın vazgeçilmez bir parçası hâline geldi. Telegram ise 2013’te sahneye çıkmasına rağmen hızla arayı kapattı ve küresel süper uygulama pazarında güçlü bir rakip olarak öne çıkıyor. Bugün geliştiriciler yenilikçi hizmetler geliştirmeye, hatta Telegram ortamında doğrudan mini çözümler oluşturmaya başlayabiliyor. Doğru Mini App belgeleriyle, yeni bir Telegram botu oluşturmak ya da tanıdık web teknolojilerini kullanarak bir Telegram Mini App tasarlamak isteyen herkes uygulama geliştirmeye her zamankinden kolay başlayabilir.

Telegram ve WeChat Arasındaki Temel Farklar:

WeChat, hepsi bir arada uygulama olarak Çin pazarına uzun süredir hâkim. Ancak Telegram, küresel ölçekte ona meydan okumak için önemli adımlar atıyor. Gizliliğe, yenilikçi özelliklere ve geliştirici araçlarına odaklanan Telegram, kendine özgü bir alan yaratıyor. Telegram Mini Apps (TMA), geliştiricilerin artık platforma sorunsuzca entegre olan web uygulamaları oluşturmasına olanak tanıyor. Böylece Telegram arayı hızla kapatırken dünya çapındaki kullanıcı kitlesini de genişletiyor.

Şimdi, kendi Telegram Mini App’inizi nasıl oluşturabileceğinize ve Telegram’ın potansiyelinden yararlanan geliştiricilere nasıl katılabileceğinize bakalım.

Telegram Mini Apps Nedir, Neden Bu Kadar Popüler?

Telegram Mini Apps (TMA) aslında Telegram platformu içinde çalışan web uygulamalarıdır. Bunları HTML, CSS ve JavaScript ile oluşturulmuş standart web siteleri gibi düşünebilirsiniz; tek fark, SDK aracılığıyla Telegram’ın kendine özgü özelliklerine erişebilmeleridir. Bu uygulamalar Telegram içinden açılır; kullanıcıya sorunsuz bir deneyim, veri entegrasyonu ve yerleşik ödeme sistemleri sunar. Mini Apps için Telegram’dan verimli şekilde yararlanmak isteyen geliştiriciler genellikle BotFather üzerinden bir Telegram botu oluşturur, bota kullanıcı adı verir ve botu uygulamaya bağlayacak ayarları yapar. Kurulum tamamlandığında Mini Apps, Telegram gruplarında veya doğrudan kullanıcılara paylaşılabilir ve ekosistemin güçlü bir uzantısı hâline gelir. Bu platformdan yararlanmak isteyen geliştiricilerin Telegram Mini Apps’in nasıl çalıştığını anlaması önemlidir.

Geliştiriciler TMA’ları Neden Seviyor?

Başarılı Telegram Mini App Örnekleri

Neler yapılabileceğini görmek için gerçek hayattan birkaç örneğe göz atalım:

• Wallet – Telegram üzerinden erişilebilen cüzdan hizmetlerine bir örnek; özellikler kullanılan cüzdana ve bölgeye göre değişir.
• Hamster Kombat – Yoğun ilgi gören bir tıklama oyunu.
• DurgerKing – Yemek siparişi ve ödeme akışını denemek için Telegram’ın sunduğu örnek Mini App.

Telegram Mini Apps Kullanmaya Nasıl Başlanır?

Gerekenler:

• Bir kod editörü (VS Code veya WebStorm işinizi görür).
• Temel HTML, CSS ve JavaScript bilgisi.
• Telefonunuzda ve bilgisayarınızda Telegram yüklü olmalı.
• Yeni bir şeyler keşfetme isteği.

1. Adım: Yardımcı bot oluşturun

İlk olarak bir Telegram botu oluşturun. Botunuz, uygulamanıza giriş noktası olacak. Şöyle oluşturabilirsiniz:

1. Telegram’da @BotFather’ı arayın.
2. /newbot komutunu gönderin.
3. Botunuza bir ad verin.
4. BotFather’ın verdiği token’ı sunucunuzda güvenli bir yerde saklayın; Bot API için bu tokene ihtiyacınız olacak. Token’ı asla tarayıcı koduna veya herkese açık bir depoya koymayın.

Aşağıda sunucunuzda çalıştıracağınız Node.js kodu yer alıyor. node-telegram-bot-api paketini yükleyin, token’ı sunucu tarafındaki bir ortam değişkeninden alın ve çalıştırmadan önce https://your-domain.com/app değerini yayına aldığınız HTTPS URL’siyle değiştirin. Bu web_app butonu, botla yapılan özel bir sohbette kullanılmak üzere tasarlanmıştır:

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, 'Hoş geldiniz! Uygulamayı açmak için aşağıdaki düğmeye tıklayın.', {
reply_markup: {
inline_keyboard: [[
{
text: 'Uygulamayı Aç',
web_app: { url: 'https://your-domain.com/app' }
}
]]
}
});
});

2. Adım: Geliştirme ortamınızı hazırlayın

Bir Telegram Mini App geliştirmek ve test ortamınızı kurmak için temel bir proje yapısı oluşturun:

Proje klasör yapısı (index.html dosyasının içeriği 3. Adım’da):

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

3. Adım: Uygulamanızı oluşturun

Bu HTML kodunu index.html adıyla kaydedin. Kod, Telegram WebApp köprüsünü ve scripts/app.js dosyasını yükler. Bu yalnızca bir arayüz örneğidir, kimlik doğrulama uygulaması değildir: Kullanıcının kimliğine güvenmeden önce Telegram initData’yı backend’inizde doğrulayın.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>İlk Mini App'im</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>Merhaba, Telegram!</h1>
</div>
<script src="scripts/app.js"></script>
</body>
</html>

Uygulamanızı biçimlendirme

Aşağıdaki JavaScript kodunu scripts/app.js dosyasına kaydedin; setupTheme Telegram’ın tema renklerini uygular, styles/main.css ise özelleştirebileceğiniz ayrı bir stil dosyasıdır. Uygulamayı Telegram’da Android ve iOS’ta test edin. Önemli: sendData yalnızca yanıt klavyesindeki web_app düğmesiyle açılan Mini Apps’lerde çalışır; 1. adımdaki satır içi düğmeyle açılanlarda çalışmaz. Bu şekilde açıldığında verileri kaydetmek için bir backend endpoint’i oluşturup initData’yı doğrulayın. Bu örnek verileri kalıcı olarak saklamaz ve gelen web_app_data mesajlarını işlemez:

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>Sayaç: <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('Kaydet');
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();

İşlevselliği genişletme

Temel özellikleri oluşturduktan sonra gelişmiş özelliklerle Mini App'inizi daha da geliştirebilirsiniz:

• Uygun durumlarda TON tabanlı Web3 özellikleri ekleyin. Ancak Telegram'da dijital ürün ve hizmet satın alırken TON değil, Telegram Stars kullanılmalıdır.
• Dijital ürün ve hizmetler için Telegram Stars ödemelerini ekleyin; ödeme onaylarını ve para iadelerini doğru şekilde yönetin.
• initData'yı doğruladıktan ve gönderilen tüm değerleri kontrol ettikten sonra kullanıcı verilerini sunucuda saklayın.
• Animasyonlar ve gelişmiş işlevler ekleyin.
• Gerekli kullanıcı iznini alarak bot bildirimleri ekleyin. Mini App, herhangi bir kullanıcıya kendiliğinden mesaj gönderemez.
• Gezinme için menü düğmesi ekleyin.

Sırada ne var?

1. Uygulamanızı HTTPS destekli bir sunucuda yayınlayın.
2. Uygulamanızı @BotFather üzerinden Telegram'a bağlayın.
3. Gerçek kullanım koşullarında hata ayıklayın ve test edin.
4. Telegram Mini App'inizi kullanıma açın ve ilk geri bildirimleri toplayın.
5. Bot token'larını, gizli bilgileri ve kişisel verileri paylaşmadan kodunuzu GitHub'da paylaşarak topluluktan geri bildirim alın.
6. Kullanıcı geri bildirimlerini toplayın ve uygulamanızı geliştirmeye devam edin.

Bu adımları izleyerek Telegram'ın büyüyen ekosisteminden sonuna kadar yararlanan başarılı bir Mini App oluşturma yolunda emin adımlarla ilerleyebilirsiniz.