Google Apps Script: Как создать веб-приложение для сканирования или отправки QR-кодов?

  
    
    
    
    
    
      #video-container {
        position: relative;
        width: 100%;
        max-width: 500px;
        margin: 10px auto;
      }
      #video {
        width: 100%;
        height: auto;
        border: 1px solid #ccc;
      }
      #output {
        margin-top: 10px;
        font-weight: bold;
      }
    
  
  
    

      
Сканер QR-кодов
      

        
      
      Начать сканирование
      

        
Отсканированные данные:
        
      
       
       

          
          Данные QR
        
        Отправить данные
    

    
    
    
      // Код для сканирования будет здесь
    
     
  

// Client-side JavaScript (внутри  в Index.html)
const video = document.getElementById('video');
const scanButton = document.getElementById('scanButton');
const sendButton = document.getElementById('sendButton');
const resultSpan = document.getElementById('result');
const manualDataInput = document.getElementById('manual_data');
let stream = null;
let animationFrameId = null;

/**
 * Запрашивает доступ к камере и начинает трансляцию видео.
 */
async function startScan() {
  try {
    stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });
    video.srcObject = stream;
    video.setAttribute('playsinline', true); // Необходимо для iOS
    video.play();
    resultSpan.textContent = 'Наведите камеру на QR-код...';
    scanButton.textContent = 'Остановить сканирование';
    scanButton.onclick = stopScan;
    requestAnimationFrame(tick);
  } catch (err) {
    console.error('Ошибка доступа к камере:', err);
    resultSpan.textContent = 'Ошибка доступа к камере.';
  }
}

/**
 * Останавливает сканирование и освобождает камеру.
 */
function stopScan() {
  if (stream) {
    stream.getTracks().forEach(track => track.stop());
  }
  if (animationFrameId) {
    cancelAnimationFrame(animationFrameId);
    animationFrameId = null;
  }
  video.srcObject = null;
  scanButton.textContent = 'Начать сканирование';
  scanButton.onclick = startScan;
  // resultSpan.textContent = ''; // Опционально: очистить результат
}

/**
 * Функция, вызываемая в каждом кадре анимации для сканирования QR-кода.
 */
function tick() {
  if (video.readyState === video.HAVE_ENOUGH_DATA) {
    const canvasElement = document.createElement('canvas');
    const canvas = canvasElement.getContext('2d');
    canvasElement.height = video.videoHeight;
    canvasElement.width = video.videoWidth;
    canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
    const imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);

    try {
        const code = jsQR(imageData.data, imageData.width, imageData.height, {
            inversionAttempts: 'dontInvert',
        });

        if (code) {
            drawLine(canvas, code.location.topLeftCorner, code.location.topRightCorner, '#FF3B58');
            // ... (нарисовать остальные линии рамки)
            resultSpan.textContent = code.data;
            manualDataInput.value = code.data; // Заполняем поле ввода
            M.updateTextFields(); // Обновляем Materialize input
            stopScan(); // Останавливаем сканирование после успешного обнаружения
            return; // Выход из цикла tick
        } else {
            resultSpan.textContent = 'QR-код не найден...';
        }
    } catch (e) {
        console.error('Ошибка при декодировании QR:', e);
        resultSpan.textContent = 'Ошибка декодирования.';
    }
  }
  animationFrameId = requestAnimationFrame(tick);
}

/**
 * Вспомогательная функция для отрисовки линии (рамки QR-кода).
 * @param {CanvasRenderingContext2D} canvas Контекст canvas.
 * @param {object} begin Начальная точка { x, y }.
 * @param {object} end Конечная точка { x, y }.
 * @param {string} color Цвет линии.
 */
function drawLine(canvas, begin, end, color) {
  canvas.beginPath();
  canvas.moveTo(begin.x, begin.y);
  canvas.lineTo(end.x, end.y);
  canvas.lineWidth = 4;
  canvas.strokeStyle = color;
  canvas.stroke();
}

/**
 * Отправляет данные (из сканера или ручного ввода) на сервер GAS.
 */
function sendDataToServer() {
  const dataToSend = manualDataInput.value || resultSpan.textContent;
  if (!dataToSend || dataToSend === 'QR-код не найден...' || dataToSend === 'Наведите камеру на QR-код...') {
      M.toast({html: 'Нет данных для отправки!'})
      return;
  }
  
  sendButton.disabled = true; // Блокируем кнопку на время отправки
  M.toast({html: 'Отправка данных...'}) 

  google.script.run
    .withSuccessHandler(response => {
      M.toast({html: response});
      // Очистка полей после успешной отправки
      resultSpan.textContent = '';
      manualDataInput.value = '';
      M.updateTextFields();
      sendButton.disabled = false;
    })
    .withFailureHandler(error => {
      M.toast({html: `Ошибка: ${error.message}`});
      console.error('Ошибка отправки:', error);
      sendButton.disabled = false;
    })
    .processQrData(dataToSend);
}

// Назначение обработчиков
scanButton.onclick = startScan;
sendButton.onclick = sendDataToServer;

document.addEventListener('DOMContentLoaded', function() {
    M.updateTextFields(); // Инициализация полей Materialize
});

// Code.gs (Server-side Google Apps Script)

/**
 * @typedef {GoogleAppsScript.Events.DoGet} DoGetEvent
 */

/**
 * Обслуживает GET-запросы, отображая HTML-интерфейс.
 * @param {DoGetEvent} e Объект события.
 * @returns {GoogleAppsScript.HTML.HtmlOutput} HTML-вывод.
 */
function doGet(e) {
  Logger.log('Запрос GET получен: %s', JSON.stringify(e.parameter));
  return HtmlService.createHtmlOutputFromFile('Index')
      .setTitle('QR Code Scanner/Sender')
      .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

/**
 * Обрабатывает данные, полученные от клиента (сканированный или введенный QR-код).
 * @param {string} qrData Данные из QR-кода.
 * @returns {string} Сообщение о результате операции.
 */
function processQrData(qrData) {
  if (!qrData) {
    Logger.log('Ошибка: Пустые данные получены.');
    throw new Error('Получены пустые данные.');
  }

  // --- Валидация данных (пример) ---
  // Например, проверяем, является ли строка URL-адресом
  let dataType = 'Текст';
  if (isValidUrl(qrData)) {
    dataType = 'URL';
    // Дополнительная логика для URL, например, проверка доступности
  }
  Logger.log('Получены данные: [%s], Тип: %s', qrData, dataType);

  try {
    // --- Сохранение данных в Google Sheets ---
    const sheetId = 'YOUR_SHEET_ID'; // Замените на ID вашей таблицы
    const sheetName = 'QR_Data';
    const ss = SpreadsheetApp.openById(sheetId);
    let sheet = ss.getSheetByName(sheetName);
    if (!sheet) {
      sheet = ss.insertSheet(sheetName);
      sheet.appendRow(['Timestamp', 'QR Data', 'Data Type', 'User Email']); // Заголовки
    }

    const timestamp = new Date();
    const userEmail = Session.getActiveUser().getEmail() || Session.getEffectiveUser().getEmail() || 'anonymous'; // Получаем email пользователя

    sheet.appendRow([timestamp, qrData, dataType, userEmail]);
    Logger.log('Данные успешно записаны в таблицу: %s', sheet.getName());

    // --- Отправка уведомления (опционально) ---
    // sendEmailNotification(userEmail, qrData);

    return `Данные "${qrData.substring(0, 20)}..." успешно обработаны и сохранены.`;

  } catch (error) {
    Logger.log('Ошибка при обработке данных: %s', error.message);
    Logger.log('Стек ошибки: %s', error.stack);
    // Вместо простой ошибки можно возвращать более детальное сообщение
    throw new Error(`Ошибка сервера при сохранении данных: ${error.message}`);
  }
}

/**
 * Вспомогательная функция для валидации URL.
 * @param {string} urlString Строка для проверки.
 * @returns {boolean} True, если строка является валидным URL.
 */
function isValidUrl(urlString) {
  try {
    new URL(urlString);
    return true;
  } catch (_) {
    return false;
  }
}

/**
 * Отправляет уведомление по электронной почте.
 * @param {string} recipientEmail Email получателя.
 * @param {string} data Данные QR-кода.
 */
function sendEmailNotification(recipientEmail, data) {
  const subject = 'Новые данные QR-кода обработаны';
  const body = `Получены и сохранены новые данные из QR-кода:\n\n${data}\n\nВремя: ${new Date()}`;
  try {
      if(recipientEmail !== 'anonymous') { // Не отправляем анонимным
          MailApp.sendEmail(recipientEmail, subject, body);
          Logger.log('Уведомление отправлено на %s', recipientEmail);
      } else {
          Logger.log('Пользователь анонимный, уведомление не отправлено.');
      }
  } catch (e) {
      Logger.log('Ошибка отправки email: %s', e.message);
  }
}