Loyiha tahlili
kyuar
Telegram ichida yashaydigan QR kodlar: istalgan chatda, bot bilan yozishmada yoki Mini App editorda yaratiladi va o'sha yerning o'zida skanerlanadi.
- Yil
- 2026
- Rol
- Muallif
- Stack
- Next.jsTypeScriptgrammYRedis
29
piksel shakli, har biri dekoder testidan o'tadi
12
tayyor mavzu, kontrast 4.5:1 dan past emas
Muammo
Ko'p QR generatorlar oq fonda qora kvadrat beradi. Chiroyliroq kod yasaydiganlari esa ko'pincha skanerlanmaydigan kod chiqaradi. Buning ustiga, havola baribir oxirida Telegram'ga yuboriladi, kod esa alohida ilovada yasaladi.
Yechim
kyuar Telegram'dan chiqmasdan ishlaydi:
- Istalgan chatda:
@kyuarbot https://example.comdeb yozib, rangni tanlash kifoya. - Bot chatida: istalgan matn, telefon raqami yoki email yuborilsa, kod qaytadi.
- Mini App editorda: kodning har bir qismi alohida bezatiladi: piksellar, burchak ramkalari, burchak nuqtalari, fon, chekka, logo. Har biriga oddiy rang yoki gradient berish mumkin. Halftone rejimida rasm kodning o'zi bilan chiziladi.
- Skaner: Telegram kamerasi orqali, fotodan yoki botga rasm yuborib o'qiladi. Xavfli
havolalar belgilanadi:
javascript:, oddiyhttp, havola qisqartiruvchilar, boshqa saytga taqlid qiluvchi nomlar.
To'rttala usul bitta dvigatel orqali render qilinadi, shuning uchun inline yasalgan kod editordagidan farq qilmaydi.
Arxitektura
Telegram ─┬─ inline / xabar ─→ /api/bot (webhook) ─→ grammY
│ └─ rasm URL → /api/qr
└─ Mini App ─→ editor (Web Worker'da render)
├─ POST /api/share → savePreparedInlineMessage
└─ POST /api/render → Redis (10 daqiqa) → yuklab olish- Bitta renderer hamma joyda.
packages/qrmatnni bezatilgan SVG'ga aylantiradi. Aynan shu funksiya editorning Web Worker'ida,/api/qrda va/api/renderda ishlaydi. - Kesh uchun URL. Uslub URL ichida base64url JSON sifatida uzatiladi, bunda faqat
standartdan farq qiladigan qismlar yoziladi. Shuning uchun bir xil kodning URL'i ham bir xil,
/api/qresaCache-Control: immutablebilan javob beradi. - Bitta deploy. Production'da bot web ilova ichida webhook route bo'lib ishlaydi. Docker
image'da build argument yo'q: sozlamalar ishga tushganda
.envdan o'qiladi, shuning uchun bitta image istalgan muhitda ishlaydi. - Xavfsizlik. Foydalanuvchi nomidan bajariladigan har bir so'rov
initDatani serverda tekshiradi.
Skanerlanishi kafolatlangan
Uch qatlam skanerlanmaydigan kodni ushlab qoladi:
- Biror rang fonga nisbatan 4.5:1 dan past kontrastda bo'lsa, renderer ogohlantiradi.
- «Skan sinovi» dizaynni to'rt holatda dekodlab ko'radi: oddiy, kichik (132 px), xira va qorong'i.
- Testlarda har bir shakl, gradient, logo va halftone render qilinadi va qayta dekodlanadi. Chiroyli, lekin skanerlanmaydigan shakl xato hisoblanadi va chiqarilmaydi.
Halftone rejimi Halftone QR Codes (SIGGRAPH Asia 2013) maqolasi asosida qilingan. Har bir modul 3×3 bo'lakka bo'linadi. Markaziy bo'lak haqiqiy qiymatni saqlaydi, qolganlari rasmdan olinib, Floyd–Steinberg usulida dither qilinadi.
Telegram'ning nozik joylari
web_apptugmalari faqat shaxsiy chatda ishlaydi. Guruhga tushishi mumkin bo'lgan hamma narsat.me/<bot>?startapp=…havolasi orqali ochiladi.- Inline natijadagi rasmlar JPEG bo'lishi shart.
- resvg
loadSystemFonts: falsebilan ishlatiladi: QR SVG'da matn yo'q, shriftlarni yuklash esa bir necha soniya olardi.