Clonando el rastreador de pizzas de Domino’s con Firebase y Express
Los rastreadores de pedidos son un gran ejemplo de AJAX-ness: Una página web que se actualiza de manera fluida en segundo plano (aunque los clientes actualizan como si no hubiera mañana)
Trabajando de nuevo, comenzamos con una base de datos en tiempo real de Firebase.
Aquí estamos definiendo cinco etapas en las que puede estar un pedido y también estamos rastreando la hora en que se creó la instancia de seguimiento de pedidos para el registro futuro.
Los únicos paquetes que necesitamos para este ejemplo serán Express y la API de Firebase. Usaremos variables de entorno para poder probar nuestra aplicación sin utilizar la base de datos de producción.
Hay solo tres rutas cortas que crean una API con la que nosotros (la empresa) y los navegadores de nuestros usuarios podemos comunicarnos. Tengamos en cuenta que la autenticación para rutas públicas/privadas se han dejado como un ejercicio para el lector. Como veremos más adelante, todo el contenido de la página web está alojado estáticamente.
// Create a tracking instance
app.get('/private/orders', (req, res) => {
const orderId = uuidv4();
db.ref(`orders/${orderId}`).set({
started: Date.now(),
// Integer: 1-5 inclusive
stage: 1
})
.then(() => {
return res.send(orderId);
})
.catch((err) => {
console.error(`Error creating tracking instance: ${err}`);
return res.status(500).send('Server error');
})
});// Set a tracking instance's state
app.post('/private/orders', (req, res) => {
db.ref('orders').child(req.body.orderId).set({
// Clamp stage
stage: Math.max(1, Math.min(5, req.body.stage))
})
.then(() => {
return res.send('OK');
})
.catch((err) => {
console.error(`Error setting tracking instance state: ${err}`);
return res.status(500).send('Server error');
})
});// Client access to a tracking insance
app.get('/public/orders/:orderId', (req, res) => {
const orderId = req.params.orderId;
db.ref(`orders/${orderId}`)
.once('value')
.then(data => {
order = data.val();
if (order !== null) {
return res.send(order);
} else {
console.error(`Unknown tracking instance requested: ${orderId}.`);
return res.status(500).send('Server error');
}
})
.catch((err) => console.error(`Order: ${orderId} errored: ${err}`));
});
En la parte del frontend, tomamos algunos iconos de Font Awesome, los colocamos en algunas cajas rojas/azules con clases que podremos alternar, y casi hemos terminado. Para mantener el scope lo más mínimo posible, vamos a leer el parámetro de query con JavaScript. De esta manera, nuestro microservicio puede alojar una página estática, un archivo JS y un archivo CSS.
// The query parameter `orderId` lets us provide order tracking
window.orderId = new URLSearchParams(window.location.search).get('orderId');// If delivery in progress, check for new information every X seconds
window.localStage = null; // Integer: 1-5 inclusive
const checkStage = () => {
fetch(`/public/orders/${window.orderId}`)
.then(res => res.json())
.then(data => {
applyStage(data.stage);
})
.catch(err => console.error(`Error connecting to server: ${err}`))
if (window.localStage < 5) {
setTimeout(checkStage, 10000);
}
}
Agregamos una pizca de CSS media queries para nuestros amigos en móviles. Tan simple como voltear el flex grid y agregar un poco de relleno.
Ahora vamos a asegurarnos de que nuestro proyecto está en las mejores condiciones y que no tiene bugs. Para esta aplicación usamos SuperTest (que viene con Mocha).
Acá comprobamos que todo el código funciona correctamente.
¡Eso es todo! Tenemos una forma de mostrar a nuestros usuarios el estado de su pedido y así evitamos llamadas estresantes a nuestra oficina.
Artículo traducido originalmente de Dev.to — Andrew Healey