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

Введение

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

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

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

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

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

Настройка проекта 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, для публичного доступа.