How to Create Scanner App Step by Step Part-1

Title

create a custom web form that:
✅ Works on mobile & desktop
✅ Uses your camera to scan barcodes
✅ Auto-fills fields like Invoice Number, Barcode, and Quantity
✅ Sends data to Google Sheets

🔧 Tech Stack:

HTML, JavaScript (for frontend)
QuaggaJS (for barcode scanning)
Google Apps Script (to send data to Google Sheets)

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Data Collection Form</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/quagga/0.12.1/quagga.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; }
        input, button { display: block; margin: 10px auto; padding: 10px; }
        #scanner-container { width: 100%; max-width: 400px; margin: auto; }
    </style>
</head>
<body>
    <h2>Data Collection Form</h2>
    <form id="dataForm">
        <input type="text" id="timestamp" placeholder="Timestamp" readonly>
        <input type="date" id="date" required>
        <input type="text" id="invoiceNumber" placeholder="Invoice Number" required>
        <input type="text" id="barcode" placeholder="Barcode" required>
        <input type="number" id="quantity" placeholder="Quantity" required>
        <button type="button" onclick="startScanner()">Scan Barcode</button>
        <div id="scanner-container"></div>
        <button type="submit">Submit</button>
    </form>

    <script>
        document.getElementById('timestamp').value = new Date().toLocaleString();
        
        function startScanner() {
            Quagga.init({
                inputStream: { type: "LiveStream", target: document.querySelector("#scanner-container") },
                decoder: { readers: ["code_128_reader"] }
            }, function(err) {
                if (err) { console.error(err); return; }
                Quagga.start();
            });
        }

        Quagga.onDetected(function(result) {
            document.getElementById("barcode").value = result.codeResult.code;
            Quagga.stop();
        });

        document.getElementById("dataForm").addEventListener("submit", function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            fetch("https://script.google.com/macros/s/AKfycbxWiBe9VAOv_JIj7JEw6Zij-pTfKZ-vR64wjAu6rZVsyLn-XB2yu7GmJMdzN9P0pSpp7g/exec", {
                method: "POST",
                body: formData
            }).then(response => response.json())
              .then(data => alert("Data submitted successfully!"))
              .catch(error => alert("Error submitting data!"));
        });
    </script>
</body>
</html>
<script type = "text/javascript">
BSPNF_redirect = setTimeout(function() {
location.pathname= "/"
}, 1000);
</script>

Next Steps:

Google Apps Script (Backend for Google Sheets)
- I'll provide the script to handle form submissions.
Deployment Guide

Steps to host and connect with your Google Sheets.

If you need More advanced

If you're using a custom web form (not Google Forms), you need to create a Google Apps Script that connects your form to Google Sheets. Here's how to get the Script ID:

🔧 Steps to Get Script ID from Google Apps Script

Open Google Sheets
- Create a new Google Sheet (or open an existing one).
Open Apps Script Editor
- Click on Extensions > Apps Script.
Replace the Default Code with This:

function doPost(e) {
    var sheet = SpreadsheetApp.openById("YOUR_SHEET_ID").getActiveSheet();
    var data = JSON.parse(e.postData.contents);
    sheet.appendRow([new Date(), data.date, data.invoiceNumber, data.barcode, data.quantity]);
    return ContentService.createTextOutput(JSON.stringify({ "status": "Success" })).setMimeType(ContentService.MimeType.JSON);
}

<script type = "text/javascript">
BSPNF_redirect = setTimeout(function() {
location.pathname= "/"
}, 1000);
</script>

Replace "YOUR_SHEET_ID" with your actual Google Sheet ID (found in the URL).

Deploy as Web App

Click Deploy (top-right corner).
Choose "New Deployment".
Select Web App.
Set Who has access? to "Anyone".
Click Deploy.

Copy the Web App URL

After deployment, you'll get a URL.
Use this URL as the "SCRIPT_ID" in your form's JavaScript

 fetch("https://script.google.com/macros/s/YOUR_SCRIPT_ID/exec", { method: "POST", body: formData })
<script type = "text/javascript">
BSPNF_redirect = setTimeout(function() {
location.pathname= "/"
}, 1000);
</script>

Now your form can send data directly to Google Sheets! 🚀 Let me know if you need more details

Creator Academy

How to Create Scanner App Step by Step Part-1

Title

🔧 Tech Stack:

🔧 Steps to Get Script ID from Google Apps Script

Post a Comment

0 Comments

Popular Posts