Scannen Sie QR-Codes ganz einfach mit Telegram!
Dieses Repository enthält den Code von @easyqrscanbot, einer Telegram Mini-App zum Scannen von QR-Codes.
Stellen Sie sicher, dass Sie Ihre Telegram-App aktualisiert haben. Die erforderliche Mindestversion der Telegram-API ist 6.9
.
@easyqrscanbot
und starten Sie einen privaten Chat.Scan QR
). Der QR-Code-Scanner wird auf Telegram-Smartphone-Clients (Android und iOS) mit Telegram-API-Versionen größer als 6.9
unterstützt. Leider ist das QR-Scannen auf Telegram-Webclients nicht verfügbar. Sie können jedoch weiterhin über den Webclient auf die Mini-App zugreifen und Ihren Scanverlauf überprüfen.
Dieses Projekt dient als Veranschaulichung der Erstellung einer Telegram-Mini-App mit einem modernen JavaScript-Framework wie Vue. Außerdem wird gezeigt, wie Sie die neuesten Funktionen nutzen können, die in der Telegram-API-Version 6.9 eingeführt wurden, darunter:
Das Projekt stellt eine reine Vue-Front-End-Anwendung dar, die das Telegram Cloud Storage Back-End zum Speichern der erfassten Scans nutzt.
Der Bereitstellungsprozess ist mithilfe von GitHub Actions vollständig automatisiert. Bei jedem Push an den master
-Zweig wird die Mini-App automatisch erstellt und auf der zugehörigen GitHub Pages-Site bereitgestellt.
Greifen Sie hier auf die Mini-App zu: Mini-App-Link.
Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:
git clone https://github.com/MBoretto/easy-qr-scan-bot.git
cd easy-qr-scan-bot
npm install
npm run build
Um Code-Linting auszuführen, verwenden Sie den folgenden Befehl:
npm run lint
Viel Spaß beim Codieren!
Bevor Sie beginnen, stellen Sie sicher, dass Sie über einen Telegram-Bot verfügen. Wenn Sie noch keins haben, können Sie mithilfe dieser Telegram-Anleitung eines erstellen.
Wenn Sie Ihre eigene Mini-App bereitstellen möchten, gehen Sie folgendermaßen vor:
Klonen Sie dieses Repository.
Aktivieren Sie GitHub-Seiten für Ihr Repository, indem Sie zu Settings
-> Pages
-> GitHub Actions
als Quelle auswählen. GitHub stellt die Mini-App automatisch auf den mit Ihrem Repository verknüpften GitHub-Seiten bereit.
Sie können Ihre Mini-App auch über einen beliebigen Hosting-Dienst bereitstellen, der https://
unterstützt.
Dies ist der einfachste Weg, die Mini-App zu starten, da Sie das Telegram-Bot-Menü nur einmal konfigurieren müssen. Hier sind die Schritte, um die Mini-App mit Ihrem Bot-Menü zu verknüpfen:
/mybots
.Jetzt können Sie Ihre Mini-App über das Telegram-Bot-Menü starten.
Diese Methode ist während der Entwicklungsphase nützlich, da Sie unterschiedliche URLs für die Mini-App angeben können, ohne das Telegram-Bot-Menü neu zu konfigurieren. Es erfordert jedoch einen laufenden Telegram-Bot-Dienst. Befolgen Sie diese Schritte:
pip3 install python-telegram-bot --upgrade
config-example.py
in config.py
: mv config-example.py config.py
Bearbeiten Sie die Datei config.py
und fügen Sie Ihr Telegram Bot Token TOKEN
(Sie können es von @BotFather erhalten), URL
und URL_TEST
Links ein.
Führen Sie das Skript web-app-launcher.py
aus:
python3 web-app-launcher.py
/start
(für den Produktionslink) oder /dev
(für den Testlink) an den Bot.Jetzt können Sie Ihre Mini-App über den Testlink starten und testen.
Telegram Cloud Storage ist eine Schlüsselwertdatenbank, auf die von jedem Telegram-Client aus zugegriffen werden kann. Sie können bis zu 1024
Schlüssel pro Benutzer und Bot speichern, wobei jeder Wert auf 4096
Zeichen begrenzt ist. Die Daten werden mit dem Telegram-Konto des Benutzers verknüpft und bleiben auf allen Geräten bestehen. Nach dem Scannen eines QR-Codes wird die Rohzeichenfolge unter Verwendung des Zeitstempels als Schlüssel gespeichert.
Die Mini-App lädt beim Start den vollständigen Scan-Verlauf und speichert ihn lokal. Nachfolgende Scans werden sowohl im Telegram Cloud Storage als auch lokal gespeichert.
Die abgerufenen Rohdaten werden manipuliert, um Informationen entsprechend dem Inhalt des QR-Codes zu extrahieren. Unterstützte QR-Code-Inhaltstypen:
Erweitern Sie auf der Registerkarte „Verlauf“ den QR-Code, den Sie löschen möchten, und klicken Sie auf die Schaltfläche Bin
. Durch diese Aktion wird der QR-Code sowohl aus dem Telegram Cloud Storage als auch aus dem lokalen Speicher entfernt. Die Mini-App speichert keine weiteren Daten und es werden keine Cookies verwendet.
Der QR-Code-Scanner wird normalerweise geschlossen, nachdem ein Code erkannt wurde. Sie können jedoch den kontinuierlichen Scanmodus aktivieren, indem Sie zur Registerkarte „Einstellungen“ navigieren und auf die Schaltfläche Continuous Scan
klicken. Um den kontinuierlichen Scanmodus zu deaktivieren, drücken Sie die Taste erneut. Sie können den kontinuierlichen Modus verlassen, indem Sie auf den Pfeil oben links drücken.
Nach erfolgreichem Scannen eines QR-Codes vibriert das Gerät, um eine Rückmeldung zu geben.
Im Einstellungsbereich der Mini-App finden Sie nützliche Tools zum Debuggen und Entwickeln:
Sync Cloud Storage
: Dadurch wird der lokale Speicher der Mini-App mit dem Telegram-Cloud-Speicher synchronisiert, was dem Öffnen und Schließen der Mini-App entspricht.Enrich QR codes
: Löst die Berechnung der Roh-QR-Codes für alle Scans aus.Show debug
:Das Projekt nutzt Vuetify, eine Vue Components Framework Library.
Der Code wird unter der MIT-Lizenz vertrieben