Cómo integrar un escáner de códigos de barras en una aplicación web

En la era digital actual, la perfecta convergencia de los mundos físico y virtual es cada vez más importante para optimizar diversos procesos. Un ejemplo de integración que ejemplifica esta tendencia es la incorporación de un escáner de códigos de barras a las aplicaciones web. Al tender un puente entre los productos tangibles y las funcionalidades en línea, tanto las empresas como los particulares pueden abrir un abanico de posibilidades, desde la gestión de inventarios sin esfuerzo y la mejora de la experiencia del usuario hasta la agilización de la introducción de datos, la eficacia de los sistemas de seguimiento y el escaneado de códigos QR. Esta integración no sólo mejora la funcionalidad general de las aplicaciones en línea, sino que también allana el camino hacia un ecosistema digital más interconectado y eficiente.

En este artículo utilizaremos IronBarcode para añadir un escáner de código de barras a una aplicación web. Con la incorporación de un escáner de códigos de barras a una aplicación basada en web, las imágenes podrían escanearse y cargarse desde cualquier dispositivo equipado con cámara, maximizando la movilidad del ecosistema digital.

Cómo integrar un escáner de códigos de barras en una aplicación web

1. Descargar The C# IronBarcode Library.
2. Cree un nuevo proyecto de aplicación web ASP.NET en Visual Studio.
3. Diseñar el Front-End utilizando HTML5 y CSS.
4. Escribir métodos backend que tomen el código QR cargado y lo conviertan en texto.
5. Mostrar el resultado mediante una etiqueta.

IronBarcode

IronBarcode se erige como una potente solución en la intersección de la tecnología y la comodidad, ofreciendo a los desarrolladores un sólido conjunto de herramientas para integrar sin problemas el escaneado y la generación de códigos de barras en sus aplicaciones. Con sus completas funciones y su diseño intuitivo, IronBarcode permite a empresas y programadores descodificar, codificar y manipular códigos de barras sin esfuerzo en sus entornos de software. Ya sea con el objetivo de optimizar la gestión de inventarios, facilitar el intercambio de datos o mejorar la experiencia del usuario, IronBarcode abre un abanico de posibilidades, simplificando el complejo mundo del procesamiento de códigos de barras y permitiendo que las aplicaciones interactúen con el mundo físico de forma digital a través del navegador. IronBarcode soporta todos los formatos y simbologías de códigos de barras.

Creación de una aplicación web de escaneado de códigos de barras

En esta sección, demostraremos cómo utilizar IronBarcode para crear una aplicación web que escanee códigos de barras y muestre los resultados.

1. Comience por crear un nuevo proyecto de aplicación web ASP.NET en Visual Studio como se muestra en las imágenes de abajo.

   

   

2. Instale IronBarcode mediante la consola del gestor de paquetes NuGet.

    Para ello, abra la consola del gestor de paquetes NuGet y ejecute el siguiente comando, que instalará IronBarcode en pocos segundos.

    :ProductInstall

También puede descargar el paquete directamente desde Sitio web de NuGet.

3. Una vez finalizada la instalación, abra el archivo Default.aspx y sustitúyalo por su código frontend. Esto creará un botón de carga de archivos, un botón con el texto "Escanear código de barras" y una etiqueta para mostrar los resultados.

    <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication6._Default" %>

    <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
            <div><br /><br /><br />
            <asp:FileUpload ID="fileUpload" runat="server" />
                <br />
                <asp:Button ID="btnScan" runat="server" Text="Scan Barcode" OnClick="btnScan_Click" />
                <br />
                <asp:Label ID="lblResult" runat="server"></asp:Label>
            </div>
    </asp:Content>

    <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication6._Default" %>

    <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
            <div><br /><br /><br />
            <asp:FileUpload ID="fileUpload" runat="server" />
                <br />
                <asp:Button ID="btnScan" runat="server" Text="Scan Barcode" OnClick="btnScan_Click" />
                <br />
                <asp:Label ID="lblResult" runat="server"></asp:Label>
            </div>
    </asp:Content>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" @Inherits="WebApplication6._Default" %> <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> <div><br /><br /><br /> <asp:FileUpload ID="fileUpload" runat="server" /> <br /> <asp:Button ID="btnScan" runat="server" Text="Scan Barcode" OnClick="btnScan_Click" /> <br /> <asp:Label ID="lblResult" runat="server"></asp:Label> </div> </asp:Content>

4. Ahora escribiremos el código backend que tomará una imagen cargada y la escaneará en busca de un código QR o Código de Barras y mostrará los resultados.

    Abra el archivo **Default.aspx.cs** sustituya el código presente por el código siguiente.

    using IronBarCode;
    using System;
    using System.IO;

    public partial class _Default : System.Web.UI.Page
    {    
        protected void btnScan_Click(object sender, EventArgs e)
        {
            try
            {
                if (fileUpload.HasFile)
                {
                    Stream stream = fileUpload.PostedFile.InputStream;
                    var barcodeResults = BarcodeReader.Read(stream);

                    lblResult.Text = "Scanned Barcode: " + barcodeResults;
                }
                else
                {
                    lblResult.Text = "Please upload an image.";
                }
            }
            catch (Exception ex)
            {
                lblResult.Text = "Error: " + ex.Message;
            }
        }
    }

    using IronBarCode;
    using System;
    using System.IO;

    public partial class _Default : System.Web.UI.Page
    {    
        protected void btnScan_Click(object sender, EventArgs e)
        {
            try
            {
                if (fileUpload.HasFile)
                {
                    Stream stream = fileUpload.PostedFile.InputStream;
                    var barcodeResults = BarcodeReader.Read(stream);

                    lblResult.Text = "Scanned Barcode: " + barcodeResults;
                }
                else
                {
                    lblResult.Text = "Please upload an image.";
                }
            }
            catch (Exception ex)
            {
                lblResult.Text = "Error: " + ex.Message;
            }
        }
    }

Imports IronBarCode
	Imports System
	Imports System.IO

	Partial Public Class _Default
		Inherits System.Web.UI.Page

		Protected Sub btnScan_Click(ByVal sender As Object, ByVal e As EventArgs)
			Try
				If fileUpload.HasFile Then
					Dim stream As Stream = fileUpload.PostedFile.InputStream
					Dim barcodeResults = BarcodeReader.Read(stream)

					lblResult.Text = "Scanned Barcode: " & barcodeResults
				Else
					lblResult.Text = "Please upload an image."
				End If
			Catch ex As Exception
				lblResult.Text = "Error: " & ex.Message
			End Try
		End Sub
	End Class

5. Ahora nuestro proyecto está completo, podemos ejecutarlo y abrir una página web en la siguiente URL "https://localhost:44335/Default".

   

6. Haga clic en el botón Elegir archivo y cargue la imagen que contiene el código QR.

   

7. Al final haga clic en el botón Escanear código de barras y se mostrará el resultado debajo del botón.

   

   Arriba están todos los pasos para crear una página web que tiene capacidades de escaneo de código de barras ahora usted será capaz de leer códigos de barras en línea, y se integra fácilmente con sus aplicaciones web utilizando IronBarcode.

Conclusión

La incorporación de un escáner de códigos de barras a las aplicaciones web a través de herramientas y soluciones como IronBarcode representa una convergencia transformadora de los ámbitos físico y digital, que facilita las interacciones fluidas entre los productos tangibles y las funcionalidades en línea. Esta integración permite a empresas y particulares mejorar los procesos, desde la gestión racionalizada de inventarios hasta la introducción eficiente de datos, al tiempo que simplifica el complejo procesamiento de códigos de barras, fomentando así un ecosistema digital más interconectado y optimizado. La guía paso a paso que aquí se presenta ofrece un plan exhaustivo para añadir sin esfuerzo funciones de escaneado de códigos de barras a las aplicaciones web, lo que demuestra el potencial de la tecnología para revolucionar las experiencias de los usuarios y redefinir los límites entre los mundos virtual y físico.

Para obtener un tutorial detallado sobre cómo leer códigos de barras con ejemplos de códigos utilizando IronBarcode Visite aquí. Para saber cómo puede utilizar IronBarcode con la aplicación Blazor Visite esto enlace.