Kontentga o'tish
Loyihalar

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
Havolalar
SaytKod
  • 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.com deb 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:, oddiy http, havola qisqartiruvchilar, boshqa saytga taqlid qiluvchi nomlar.

To'rttala usul bitta dvigatel orqali render qilinadi, shuning uchun inline yasalgan kod editordagidan farq qilmaydi.

Arxitektura

so'rovlar oqimi
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/qr matnni bezatilgan SVG'ga aylantiradi. Aynan shu funksiya editorning Web Worker'ida, /api/qr da va /api/render da 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/qr esa Cache-Control: immutable bilan 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 .env dan o'qiladi, shuning uchun bitta image istalgan muhitda ishlaydi.
  • Xavfsizlik. Foydalanuvchi nomidan bajariladigan har bir so'rov initData ni 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_app tugmalari faqat shaxsiy chatda ishlaydi. Guruhga tushishi mumkin bo'lgan hamma narsa t.me/<bot>?startapp=… havolasi orqali ochiladi.
  • Inline natijadagi rasmlar JPEG bo'lishi shart.
  • resvg loadSystemFonts: false bilan ishlatiladi: QR SVG'da matn yo'q, shriftlarni yuklash esa bir necha soniya olardi.