텔레그램으로 QR코드를 쉽게 스캔해보세요!
이 저장소에는 QR 코드를 스캔하는 Telegram Mini 앱인 @easyqrscanbot의 코드가 포함되어 있습니다.
Telegram 앱을 업데이트했는지 확인하세요. Telegram API의 최소 필수 버전은 6.9
입니다.
@easyqrscanbot
검색하고 비공개 채팅을 시작하세요.Scan QR
). QR 코드 스캐너는 Telegram API 버전 6.9
이상을 사용하는 Telegram 스마트폰 클라이언트(Android 및 iOS)에서 지원됩니다. 안타깝게도 Telegram 웹 클라이언트에서는 QR 스캔을 사용할 수 없습니다. 그러나 웹 클라이언트의 Mini App에 계속 액세스하여 스캔 기록을 검토할 수 있습니다.
이 프로젝트는 Vue와 같은 최신 JavaScript 프레임워크를 사용하여 Telegram Mini App을 만드는 방법을 보여줍니다. 또한 다음을 포함하여 Telegram API 버전 6.9에 도입된 최신 기능을 활용하는 방법을 보여줍니다.
이 프로젝트는 Telegram Cloud Storage 백엔드를 사용하여 획득한 스캔을 저장하는 순수 Vue 프런트엔드 애플리케이션을 나타냅니다.
배포 프로세스는 GitHub Actions를 사용하여 완전히 자동화됩니다. master
브랜치에 푸시할 때마다 미니 앱이 자동으로 구축되어 관련 GitHub 페이지 사이트에 배포됩니다.
여기에서 미니 앱에 액세스하세요: 미니 앱 링크.
프로젝트를 시작하려면 다음 단계를 따르세요.
git clone https://github.com/MBoretto/easy-qr-scan-bot.git
cd easy-qr-scan-bot
npm install
npm run build
코드 린팅을 실행하려면 다음 명령을 사용하십시오.
npm run lint
즐거운 코딩하세요!
시작하기 전에 Telegram Bot이 있는지 확인하세요. 아직 계정이 없다면 이 텔레그램 가이드를 사용하여 만들 수 있습니다.
자신만의 미니 앱을 배포하려면 다음 단계를 따르세요.
이 저장소를 복제하세요.
Settings
-> Pages
-> GitHub Actions
소스로 선택하여 저장소에 대해 GitHub 페이지를 활성화하세요. GitHub는 저장소와 연결된 GitHub 페이지에 미니 앱을 자동으로 배포합니다.
https://
지원하는 호스팅 서비스를 사용하여 Mini App을 배포하도록 선택할 수도 있습니다.
Telegram Bot 메뉴를 한 번만 구성하면 되므로 Mini App을 시작하는 가장 쉬운 방법입니다. Mini App을 봇 메뉴에 연결하는 단계는 다음과 같습니다.
/mybots
명령을 보냅니다.이제 텔레그램 봇 메뉴에서 미니 앱을 시작할 수 있습니다.
이 방법은 개발 단계에서 유용하며 텔레그램 봇 메뉴를 재구성하지 않고도 미니 앱에 대해 다른 URL을 지정할 수 있습니다. 그러나 실행 중인 Telegram 봇 서비스가 필요합니다. 다음 단계를 따르세요.
pip3 install python-telegram-bot --upgrade
config.py
에서 config-example.py
의 이름을 바꿉니다. mv config-example.py config.py
config.py
파일을 편집하고 Telegram Bot Token TOKEN
(@BotFather에서 얻을 수 있음), URL
및 URL_TEST
링크를 삽입하세요.
web-app-launcher.py
스크립트를 실행합니다.
python3 web-app-launcher.py
/start
(프로덕션 링크의 경우) 또는 /dev
(테스트 링크의 경우) 명령을 봇에 보냅니다.이제 테스트 링크를 사용하여 Mini App을 시작하고 테스트할 수 있습니다.
Telegram Cloud Storage는 모든 Telegram 클라이언트에서 액세스할 수 있는 키-값 데이터베이스입니다. 이를 통해 봇당 사용자당 최대 1024
개의 키를 저장할 수 있으며, 각 값은 4096
자로 제한됩니다. 데이터는 사용자의 텔레그램 계정과 연결되어 있으며 여러 장치에서 지속됩니다. QR 코드를 스캔한 후 타임스탬프를 키로 사용하여 원시 문자열이 저장됩니다.
Mini App은 시작 시 전체 검사 기록을 로드하고 로컬에 저장합니다. 후속 스캔은 Telegram Cloud Storage와 로컬 모두에 저장됩니다.
검색된 원시 데이터를 조작하여 QR 코드의 내용에 따른 정보를 추출합니다. 지원되는 QR 코드 콘텐츠 유형:
기록 탭에서 삭제하려는 QR 코드를 확장한 후 Bin
버튼을 누르세요. 이 작업을 수행하면 Telegram 클라우드 저장소와 로컬 저장소 모두에서 QR 코드가 제거됩니다. Mini App은 다른 데이터를 저장하지 않으며 쿠키도 사용되지 않습니다.
QR 코드 스캐너는 일반적으로 코드를 인식한 후 닫힙니다. 그러나 설정 탭으로 이동하고 Continuous Scan
버튼을 눌러 연속 스캔 모드를 활성화할 수 있습니다. 연속 스캔 모드를 비활성화하려면 버튼을 다시 누르십시오. 왼쪽 상단 화살표를 눌러 연속 모드를 종료할 수 있습니다.
QR 코드를 성공적으로 스캔하면 장치가 진동하여 피드백을 제공합니다.
Mini App의 설정 섹션에는 디버깅 및 개발에 유용한 도구가 있습니다.
Sync Cloud Storage
버튼: 미니 앱의 로컬 스토리지를 텔레그램 클라우드 스토리지와 동기화합니다. 이는 미니 앱을 열고 닫는 것과 동일합니다.Enrich QR codes
버튼: 모든 스캔에 대해 원시 QR 코드 계산을 트리거합니다.Show debug
활성화하면 다음이 표시됩니다.이 프로젝트는 Vue 구성 요소 프레임워크 라이브러리인 Vuetify를 사용합니다.
코드는 MIT 라이선스에 따라 배포됩니다.