En el día de hoy vamos a continuar con el proyecto iniciado hace unos días https://hive.blog/hive-154226/@jfdesousa7/tutorial-proyecto-aprende-a-elaborar-un-sistema-de-lector-de-codigos-de-barras-para-un-local-con-el-stack-mern-mongodb-expressjs que se trata de crear un lector de precios para una tienda mediante un lector de códigos de barras, en esta parte 2 crearemos el crud de productos en Nodejs y Mongodb como gestor de database, para posterior consumirla con React en el front.
Empezaremos creando una carpeta en nuestro escritorio /backend-app-barcode y activando la consola de nuestro editor de código favorito, e instalaremos las siguientes dependencias:
BackEnd (Node.js)
npm init --yes
npm i express cors dotenv mongoose
npm i nodemon @babel/core @babel/cli @babel/preset-env @babel/node dotenv -D
configuramos el archivo package.json con lo siguiente:
"dev": "nodemon src/index.js --exec babel-node"
"start": "babel-node src/index.js"
Crearemos un archivo llamado .env que contendra nuestras variables confidenciales (URI_MOONGODB):
URI_MOONGODB=mongodb://localhost/app_barcode
Con eso configurado es momento de codificar nuestra api:
Nuestra api tendrá la siguiente estructura: la carpeta principal será src/
routes/
models/
controllers/
index.js
app.js
database.js
import 'dotenv/config'
import app from './app'
app.listen(app.get('PORT'), () => {
console.log('Server on port: ',app.get('PORT') )
})
import express from 'express'
import morgan from 'morgan'
import cors from 'cors'
import routesProducts from './routes/products.routes'
import pkg from '../package.json'
const app = express()
import './database'
app.set('pkg', pkg)
app.set('PORT', process.env.PORT || 3000)
app.use(cors())
app.use(morgan('dev'))
app.use(express.json())
app.use(express.urlencoded({extended: false}))
app.get('/', (req, res) => {
res.json({
'Name':app.get('pkg').name,
'Description': app.get('pkg').description,
"Version" : app.get('pkg').version,
"Author" : app.get('pkg').author
})
})
app.use('/products', routesProducts)
export default app
import mongoose from 'mongoose'
mongoose.connect(process.env.URI_MONGODB, {
useNewUrlParser: true,
useUnifiedTopology: true
}).then( db => console.log('Database is connected...'))
.catch(e => console.log(e))
import { Schema, model } from 'mongoose'
const ProductsSchema = new Schema({
title: String,
price: Number,
codebar: String
},{
timestamps:true,
versionKey :false
}
)
export default model('Products', ProductsSchema)
import {Router} from 'express'
const router = Router()
import * as productsCtrl from '../controllers/products.controller'
router.get('/', productsCtrl.getProducts)
router.post('/', productsCtrl.createProduct)
router.get('/:idProduct', productsCtrl.getProductByID)
router.put('/:idProduct', productsCtrl.updateProductByID)
router.delete('/:idProduct', productsCtrl.deleteProductByID)
export default router
import Products from '../models/Products'
export const getProducts = async (req, res) => {
try{
const products = await Products.find()
res.status(200).json(products)
}catch(e){
console.log(`Error JF ${e}`) }
}
export const createProduct = async (req, res) => {
const { title, price, codebar } = req.body
const newProduct = await new Products({title, price, codebar})
await newProduct.save()
res.status(201).json('The product have been created successfully')
}
export const getProductByID = async (req, res) => {
const { idProduct } = req.params
const productInfo = await Products.findById(idProduct)
res.json(productInfo)
}
export const updateProductByID = async (req, res) => {
const { idProduct } = req.params
const { title, price, codebar } = req.body
const updatedProduct = await Products.findByIdAndUpdate(idProduct, {title, price, codebar },{new : true})
res.status(200).json(updatedProduct)
}
export const deleteProductByID = async (req, res) => {
const {idProduct} = req.params
try{
await Products.findByIdAndDelete(idProduct)
res.status(204)
}
catch(e){console.log(e)}
}
Con el código escrito ya es posible proveer esa información al frontend en este caso React
Nos vamos a nuestro primero código el de la primera parte y lo editamos de la siguiente manera
FrontEnd (React.js)
import { useState, useEffect } from "react";
import "./App.css";
function App() {
const [id, setId] = useState("");
const [message, setMessage] = useState("Escanea el producto");
const[products, setProducts] = useState([])
useEffect(() => {
fetch('https://localhost:3000/products/')
.then(response => response.json())
.then(json => { console.log(json);setProducts(json) })
},[])
function search(e) {
const result = products.find((i) => i.codebar === id);
if (result) {
setMessage(`${result.title}= ${result.price} $usd`);
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
/>
<code
className={
message === "Escanea el producto"
? null
: message === "No existe"
? "rojo"
: "verde"
}
>
{message}
</code>
<div>Elaborado por: <a href="https://hive.blog/@jfdesousa7" target="_blank">jfdesousa7</a> || <a href="https://tupaginaonline.net" target="_blank">TupaginaOnline.net</a></div>
</div>
</>
);
}
export default App;
Con eso ultimo hemos consumido nuestra app del backend proveyéndole de productos, en la siguiente parte vamos a proteger/validar las rutas ya que cualquiera no puede ver la api de nuestra App sino quienes tengan un token que validaremos con JsonWebToken jwt.
Podemos ver un ejemplo en vivo haciendo click en el siguiente enlace
Y con esa amigos llegamos al final del tutorial, espero que lo hayan disfrutado y hasta la próxima!
Visita mi sitio web oficial para presupuestos y mucho más
¡Felicidades! Esta publicación obtuvo upvote y fue compartido por @la-colmena, un proyecto de Curación Manual para la comunidad hispana de Hive que cuenta con el respaldo de @curie.
Si te gusta el trabajo que hacemos, te invitamos a darle tu voto a este comentario y a votar como testigo por Curie.
Si quieres saber más sobre nuestro proyecto, acompáñanos en Discord: La Colmena.
Congratulations @jfdesousa7! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s) :
Your next target is to reach 2250 upvotes.
You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word
STOPCheck out the last post from @hivebuzz:
Su post ha sido valorado por @ramonycajal