Tutorial - [Proyecto] Aprende a elaborar un sistema de lector de códigos de barras para un local con el stack MERN (MongoDB, Expressjs, Reactjs, Nodej

Tecnología
  
Programación Web
  
Nodejs
  
Javascript
  
Bootstrap
  
Express Js
  
Desarrollo Web
  
Api Rest
  
React
    04 Febrero, 2021   Regresar el blog
Compartir:

Hoy he decidido hacer un proyecto que constara de varias partes, el proyecto es crear un lector de precios como los que consigues en cadena de alimentos o locales para saber el precio escaneando un código de barras que posee el producto en su etiqueta, la misma será desarrollada bajo el stack MERN que comprenden las siguientes tecnologías:
  • MongoDB: nuestro gestor de base de datos.
  • Expressjs: nuestro framework del backend encargado de crear el servidor.
  • Reactjs: nuestro frontend donde se visualizará el formulario de consulta de precios y solicitara al backend data.
  • Nodejs: nuestro lenguaje del backend encargado de proveer al frontend la data solicitada.

Pero antes de empezar, para este proyecto es necesario contar con un lector de códigos de barras, yo he comprado una en Ebay en 26 usd$ que servirá para este ejemplo




Es hora de empezar, nos vamos al escritorio y abrimos la consola y escribimos lo siguiente:

npx create-react-app app-barcode

Una vez termino de instalar abrimos el proyecto con nuestro editor de código favorito en mi caso Visual Studio Code, y editamos el archivo App.js con el siguiente contenido:

App.js
import { useState } from "react";
import "./App.css";
const data = [
  {
    id: "9788466301244",
    costo: "120.00 $usd",
    desc: "Producto 1",
  },
  {
    id: "6970392255002",
    costo: "10.00 $usd",
    desc: "Producto 2"
  },{
    id: "7896090082087",
    costo: "2.00 $usd",
    desc: "Producto 3"
  },{
    id: "8690828630507",
    costo: "1.00 $usd",
    desc: "Producto 4"
  }
  ,{
    id: "8993286421978",
    costo: ".70 $usd",
    desc: "Producto 5"
  }
  ,{
    id: "6921345898333",
    costo: ".30 $usd",
    desc: "Producto 6"
  }
];
function App() {
  const [id, setId] = useState("");
  const [message, setMessage] = useState("Escanea el producto");
  function search(e) {
    const result = data.find((i) => i.id === id);
    if (result) {
      setMessage(`${result.desc} <=> ${result.costo}`);
      e.target.select();
    } else {
      setMessage(id === "" ? "Escanea el producto" : "No existe");
    }
  }
  return (
    <>
      <div className="app">
        <div>
          <h1>Consulta el Precio</h1>
        </div>
        <input
          type="text"
          name="id"
          value={id}
          onChange={(e)=>setId(e.target.value)}
          onKeyUp={search}
          autocomplete="off"
          autofocus="on"
        />
          <code
            className={
              message === "Escanea el producto"
                ? null
                : message === "No existe"
                ? "rojo"
                : "verde"
            }
          >
            {message}
          </code>
      </div>
    </>
  );
}
export default App;

Ahora editaremos el archivo App.css para darle estilo

App.css
.app {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  height:100vh;
  font-size:1.7em
}
code{
  margin-top:20px
}
.verde {
  color:#72c02c;
  font-weight:900
}
.rojo {
  color:#C00;
  font-weight:900
}
input[type=text]{
    font-size:20px;
    padding:5px;
    border-radius:5px;
    width:500px
}


Es momento de probar nuestro formulario con el lector de código de barras, solo basta con escanear un producto y colocarlo en el arreglo de productos data = [{id:´´}] para saber que numero es solo tienes que escanear el código y pegarlo dentro del objeto de nuestro arreglo


Hasta acá la primera parte de nuestro tutorial en posteriores tutoriales abordaremos nuestro backend con data real conectados a nuestra bd mongoDB

Aquí pueden ver el ejemplo en vivo






Y con esa amigos llegamos al final del tutorial, espero que lo hayan disfrutado y hasta la próxima!


Visita mi sitio web oficial

tupaginaonline.net

224 vistas
Compartir:


Autor
Jose Fuentes

- Web Developer -

 


0 COMENTARIO(S)
Contesta
Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *
Comentario *
Nombre *
Correo electrónico *
Sitio web

Articulos Relacionados
Articulos recientes

Desarrollos en venta

$ usd dólar 600