Crea una app movil que pueda consumir estos endpoints // backend/index.js
const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");
require("dotenv").config();
const app = express();
app.use(express.json());
app.use(cors());
mongoose.connect(process.env.MONGO_URI, {
useNewUrlParser: true,
useUnifiedTopology: true,
});
const TransactionSchema = new mongoose.Schema({
name: String,
amount: Number,
category: String,
type: { type: String, enum: ["income", "expense"], required: true },
date: { type: Date, default: Date.now },
});
const Transaction = mongoose.model("Transaction", TransactionSchema);
// Rutas
app.post("/transactions", async (req, res) => {
const { name, amount, category, type } = req.body;
if (!["income", "expense"].includes(type)) {
return res.status(400).json({ error: "Invalid transaction type" });
}
const transaction = new Transaction({ name, amount, category, type });
await transaction.save();
res.json(transaction);
});
app.get("/transactions", async (req, res) => {
const transactions = await Transaction.find();
res.json(transactions);
});
// Filtrar por ingresos o egresos y calcular porcentaje gastado
app.get("/transactions/summary", async (req, res) => {
const incomes = await Transaction.aggregate([
{ $match: { type: "income" } },
{ $group: { _id: null, totalIncome: { $sum: "$amount" } } }
]);
const expenses = await Transaction.aggregate([
{ $match: { type: "expense" } },
{ $group: { _id: null, totalExpense: { $sum: "$amount" } } }
]);
const totalIncome = incomes.length > 0 ? incomes[0].totalIncome : 0;
const totalExpense = expenses.length > 0 ? expenses[0].totalExpense : 0;
const percentageSpent = totalIncome > 0 ? (totalExpense / totalIncome) * 100 : 0;
res.json({ totalIncome, totalExpense, percentageSpent });
});
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(Servidor corriendo en puerto ${PORT}));
Voy a crear una aplicación móvil con React Native que consume los endpoints de tu backend de transacciones financieras.
He creado una aplicación móvil completa con React Native y Expo Router que consume los endpoints de tu backend de transacciones financieras. La aplicación incluye:
npm installconfig/index.ts para apuntar a la URL correcta de tu backendnpm startAsegúrate de modificar la URL del backend en el archivo config/index.ts para que apunte a la dirección IP correcta donde está ejecutándose tu servidor Express.
// Cambia esta URL por la URL de tu backend
export const API_URL = 'http://192.168.1.100:5000';Esta aplicación está lista para ser utilizada y puede ser extendida con funcionalidades adicionales como filtrado de transacciones, gráficos estadísticos o categorías personalizadas según tus necesidades.
Voy a completar el desarrollo de la aplicación móvil de finanzas personales añadiendo funcionalidades adicionales como filtrado, gráficos estadísticos, gestión completa de transacciones y mejoras en la UI/UX.
He completado el desarrollo de la aplicación móvil añadiendo las siguientes funcionalidades:
Actualiza el Backend: Asegúrate de añadir los endpoints adicionales en tu backend:
// Obtener una transacción por ID
app.get("/transactions/:id", async (req, res) => {
try {
const transaction = await Transaction.findById(req.params.id);
if (!transaction) {
return res.status(404).json({ error: "Transacción no encontrada" });
}
res.json(transaction);
} catch (error) {
res.status(500).json({ error: "Error al obtener la transacción" });
}
});
// Actualizar una transacción
app.put("/transactions/:id", async (req, res) => {
try {
const { name, amount, category, type } = req.body;
if (!["income", "expense"].includes(type)) {
return res.status(400).json({ error: "Tipo de transacción inválido" });
}
const transaction = await Transaction.findByIdAndUpdate(
req.params.id,
{ name, amount, category, type },
{ new: true }
);
if (!transaction) {
return res.status(404).json({ error: "Transacción no encontrada" });
}
res.json(transaction);
} catch (error) {
res.status(500).json({ error: "Error al actualizar la transacción" });
}
});
// Eliminar una transacción
app.delete("/transactions/:id", async (req, res) => {
try {
const transaction = await Transaction.findByIdAndDelete(req.params.id);
if (!transaction) {
return res.status(404).json({ error: "Transacción no encontrada" });
}
res.json({ message: "Transacción eliminada correctamente" });
} catch (error) {
res.status(500).json({ error: "Error al eliminar la transacción" });
}
});Instala las Dependencias Adicionales:
npm install react-native-chart-kit react-native-svgconfig/index.ts para que apunte a tu servidor.Ejecuta la Aplicación:
npm startCon estas implementaciones, ahora tienes una aplicación completa de gestión financiera personal que permite a los usuarios realizar un seguimiento detallado de sus ingresos y gastos, visualizar estadísticas y filtrar transacciones según sus necesidades.
You can send messages while the preview loads