Python уроки. Пишем генератра QR-кодов с помощью Django и Bootstrap

Введение

В этом руководстве мы рассмотрим, как создать генератор QR-кодов с помощью Django и Bootstrap. QR-коды становятся все более популярными для различных применений, таких как обмен ссылками, контактной информацией или деталями продукта. К концу этого урока у вас будет полнофункциональное веб-приложение, которое позволит пользователям генерировать QR-коды из текста или ссылок.

https://t.me/data_analysis_ml – Дата-саенс на Python наш телеграм канал!

Чтобы следовать этому руководству, вы должны обладать базовыми знаниями Python, Django и HTML/CSS. Убедитесь, что на вашей машине установлены Python и Django.

Начните с создания нового проекта Django под названием “qrgen”: django-admin startproject qrgen.
Создайте новое приложение Django с именем “qr”: python manage.py startapp qr.
Откройте файл settings.py в директории проекта и добавьте приложение “qr” в список INSTALLED_APPS.

Создание генератора QR-кодов

1) В файле views.py внутри приложения “qr” определите функцию index. Эта функция будет обрабатывать рендеринг страницы генератора QR-кода и саму генерацию QR-кода.

2) Внутри функции index обработайте HTTP POST запрос, проверив, была ли отправлена форма. Получите текст ввода из формы и сгенерируйте соответствующий QR-код с помощью библиотеки qrcode.

from django.shortcuts import render import qrcode from PIL import Image from io import BytesIO import base64 def index(request): context = {} if request.method == "POST": qr_text = request.POST.get("qr_text", "") qr_image = qrcode.make(qr_text, box_size=15) qr_image_pil = qr_image.get_image() stream = BytesIO() qr_image_pil.save(stream, format='PNG') qr_image_data = stream.getvalue() qr_image_base64 = base64.b64encode(qr_image_data).decode('utf-8') context['qr_image_base64'] = qr_image_base64 context['variable'] = qr_text return render(request, 'index.html', context=context)

3) Преобразуйте сгенерированное изображение QR-кода в base64-кодированную строку и передайте ее в качестве контекстной переменной в шаблон.

4) Создайте новый HTML-шаблон с именем index.html в каталоге templates. Этот шаблон будет определять структуру и расположение страницы генератора QR-кодов.

5) Настройте шаблон, добавив заголовок, форму ввода и секцию отображения QR-кода на основе Bootstrap. Примените соответствующие стили, чтобы сделать страницу визуально привлекательной.

6) Добавьте функции JavaScript для обработки функций загрузки и обмена QR-кодами. Функция downloadQR создает ссылку для загрузки изображения QR-кода, а функция shareQR делится QR-кодом с помощью Web Share API, если поддерживается, или открывает его в новом окне в противном случае.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>QR Code Generator</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> <style> body { background-color: #4800a3; } .container { background-color: #1a0247; color: white; border-radius: 5%; padding: 3em; } .header { color: white; text-align: center; margin-top: 1em; margin-bottom: 1em; font-size: 34px; font-weight: bold; } .download-share-buttons { display: flex; justify-content: center; margin-top: 1em; } .download-share-buttons button { margin-right: 0.5em; } .py-2 { background-color: #1a0247; } </style> </head> <body> <header class="py-2"> <h1 class="header">QR Code Generator</h1> </header> <div class="container shadow" style="width: 800px; margin-top: 5em; padding: 3em"> <form method="post"> {% csrf_token %} <h3><center>Enter text/link to generate a QR code</center></h3> </br> <div class="input-group mb-3"> <span class="input-group-text" id="inputGroup-sizing-default">Text/Link:</span> <input type="text" class="form-control" aria-describedby="inputGroup-sizing-default" name="qr_text" autofocus> </div> <div class="input-group mb-3"> <input type="submit" style="max-width: 200px; margin: auto" class="form-control"> </div> </form> {% if qr_image_base64 %} <h4><center>QR for {{ variable }} is:</center></h4></br> {% endif %} <div class="input-group mb-3"> <div style="margin: auto"> {% if qr_image_base64 %} <img src="data:image/png;base64,{{ qr_image_base64 }}" alt="QR Code"> <div class="download-share-buttons"> <button class="btn btn-primary" onclick="downloadQR()">Download</button> <button class="btn btn-primary" onclick="shareQR()">Share</button> </div> {% endif %} </div> </div> </div> <script> function downloadQR() { const link = document.createElement('a'); link.href = 'data:image/png;base64,{{ qr_image_base64 }}'; link.download = 'qr_code.png'; link.click(); } function shareQR() { const dataUrl = 'data:image/png;base64,{{ qr_image_base64 }}'; if (navigator.share) { navigator.share({ title: 'QR Code', text: 'Check out this QR Code', url: dataUrl }) .then(() => console.log('Shared successfully')) .catch((error) => console.log('Error sharing:', error)); } else { const newWindow = window.open(dataUrl); if (!newWindow) { alert('Pop-up blocked. Please allow pop-ups for this website and try again.'); } } } </script> </body> </html>

7) Наконец, определите шаблон URL для представления index в файле urls.py в каталоге проекта.

#qr\urls.py from django.urls import path from qr import views urlpatterns = [ path('', views.index) ]

Поздравляем! Вы успешно создали генератор QR-кодов с помощью Django и Bootstrap. Теперь пользователи могут генерировать QR-коды, вводя текст или ссылки, а сгенерированные QR-коды можно скачивать или передавать. Этот проект может быть усовершенствован путем добавления дополнительных функций, таких как настройка дизайна QR-кода или интеграция его в более крупное веб-приложение.

Следующие шаги:

Реализуйте функцию сканирования QR-кодов с помощью библиотеки JavaScript, например QuaggaJS.
Добавьте обработку ошибок и валидацию формы ввода для улучшения пользовательского опыта.
Разверните генератор QR-кодов на платформе хостинга, например Heroku или AWS, для публичного доступа.

Python уроки. Пишем генератра QR-кодов с помощью Django и Bootstrap

Предварительные условия

Настройка проекта Django

Заключение