Creare un'app di gestione finanziaria completa in React o React Native richiede una pianificazione dettagliata e una buona organizzazione del codice. Di seguito, ti fornirò una struttura di base per un'app di gestione finanziaria in React, che include le funzionalità richieste. Tieni presente che il codice fornito è un esempio semplificato e potrebbe richiedere ulteriori ottimizzazioni e test.
Struttura del Progetto
financial-manager/
├── public/
│ ├── index.html
├── src/
│ ├── components/
│ │ ├── AccountForm.js
│ │ ├── TransactionForm.js
│ │ ├── Login.js
│ │ ├── Dashboard.js
│ │ ├── Chart.js
│ │ ├── Settings.js
│ ├── App.js
│ ├── index.js
│ ├── utils/
│ │ ├── localStorage.js
│ │ ├── encryption.js
│ ├── styles/
│ │ ├── App.css
├── package.json
1. Installazione delle Dipendenze
Assicurati di avere Node.js installato. Crea un nuovo progetto React:
npx create-react-app financial-manager
cd financial-manager
Installa le librerie necessarie:
npm install chart.js react-chartjs-2 crypto-js
2. File di Configurazione
src/utils/localStorage.js
export const saveToLocalStorage = (key, value) => {
localStorage.setItem(key, JSON.stringify(value));
};
export const getFromLocalStorage = (key) => {
const data = localStorage.getItem(key);
return data ? JSON.parse(data) : null;
};
src/utils/encryption.js
import CryptoJS from 'crypto-js';
const SECRET_KEY = 'your-secret-key';
export const encrypt = (text) => {
return CryptoJS.AES.encrypt(text, SECRET_KEY).toString();
};
export const decrypt = (ciphertext) => {
const bytes = CryptoJS.AES.decrypt(ciphertext, SECRET_KEY);
return bytes.toString(CryptoJS.enc.Utf8);
};
3. Componenti Principali
src/components/Login.js
import React, { useState } from 'react';
import { saveToLocalStorage, getFromLocalStorage } from '../utils/localStorage';
import { encrypt } from '../utils/encryption';
const Login = ({ onLogin }) => {
const [pin, setPin] = useState('');
const handleLogin = () => {
const storedPin = getFromLocalStorage('pin');
if (storedPin && storedPin === encrypt(pin)) {
onLogin();
} else {
alert('PIN errato');
}
};
return (
<div>
<h2>Login</h2>
<input
type="password"
value={pin}
onChange={(e) => setPin(e.target.value)}
placeholder="Inserisci il tuo PIN"
/>
<button onClick={handleLogin}>Accedi</button>
</div>
);
};
export default Login;
src/components/Dashboard.js
import React, { useState, useEffect } from 'react';
import { getFromLocalStorage, saveToLocalStorage } from '../utils/localStorage';
import AccountForm from './AccountForm';
import TransactionForm from './TransactionForm';
import Chart from './Chart';
const Dashboard = () => {
const [accounts, setAccounts] = useState([]);
const [transactions, setTransactions] = useState([]);
useEffect(() => {
const storedAccounts = getFromLocalStorage('accounts');
const storedTransactions = getFromLocalStorage('transactions');
if (storedAccounts) setAccounts(storedAccounts);
if (storedTransactions) setTransactions(storedTransactions);
}, []);
const addAccount = (account) => {
const updatedAccounts = [...accounts, account];
setAccounts(updatedAccounts);
saveToLocalStorage('accounts', updatedAccounts);
};
const addTransaction = (transaction) => {
const updatedTransactions = [...transactions, transaction];
setTransactions(updatedTransactions);
saveToLocalStorage('transactions', updatedTransactions);
};
return (
<div>
<h1>Dashboard</h1>
<AccountForm onAddAccount={addAccount} />
<TransactionForm onAddTransaction={addTransaction} />
<Chart transactions={transactions} />
</div>
);
};
export default Dashboard;
src/components/AccountForm.js
import React, { useState } from 'react';
const AccountForm = ({ onAddAccount }) => {
const [name, setName] = useState('');
const [balance, setBalance] = useState(0);
const [color, setColor] = useState('#ffffff');
const handleSubmit = (e) => {
e.preventDefault();
onAddAccount({ name, balance, color });
setName('');
setBalance(0);
setColor('#ffffff');
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Nome Account"
required
/>
<input
type="number"
value={balance}
onChange={(e) => setBalance(e.target.value)}
placeholder="Saldo"
required
/>
<input
type="color"
value={color}
onChange={(e) => setColor(e.target.value)}
/>
<button type="submit">Aggiungi Account</button>
</form>
);
};
export default AccountForm;
src/components/TransactionForm.js
import React, { useState } from 'react';
const TransactionForm = ({ onAddTransaction }) => {
const [amount, setAmount] = useState(0);
const [date, setDate] = useState('');
const [description, setDescription] = useState('');
const [category, setCategory] = useState('');
const [account, setAccount] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
onAddTransaction({ amount, date, description, category, account });
setAmount(0);
setDate('');
setDescription('');
setCategory('');
setAccount('');
};
return (
<form onSubmit={handleSubmit}>
<input
type="number"
value={amount}
onChange={(e) => setAmount(e.target.value)}
placeholder="Importo"
required
/>
<input
type="date"
value={date}
onChange={(e) => setDate(e.target.value)}
required
/>
<input
type="text"
value={description}
onChange={(e) => setDescription(e.target.value)}
placeholder="Descrizione"
required
/>
<input
type="text"
value={category}
onChange={(e) => setCategory(e.target.value)}
placeholder="Categoria"
required
/>
<select value={account} onChange={(e) => setAccount(e.target.value)} required>
<option value="">Seleziona Account</option>
{/* Mappa gli account qui */}
</select>
<button type="submit">Aggiungi Transazione</button>
</form>
);
};
export default TransactionForm;
src/components/Chart.js
import React from 'react';
import { Bar, Pie } from 'react-chartjs-2';
const Chart = ({ transactions }) => {
// Logica per calcolare i dati per i grafici
const data = {
labels: ['Entrate', 'Uscite'],
datasets: [
{
label: 'Bilancio',
data: [/* dati delle entrate e uscite */],
backgroundColor: ['#36A2EB', '#FF6384'],
},
],
};
return (
<div>
<h2>Grafico Bilancio</h2>
<Bar data={data} />
<h2>Distribuzione Spese</h2>
<Pie data={data} />
</div>
);
};
export default Chart;
4. Componente Principale
src/App.js
import React, { useState } from 'react';
import Login from './components/Login';
import Dashboard from './components/Dashboard';
const App = () => {
const [isLoggedIn, setIsLoggedIn] = useState(false);
return (
<div>
{isLoggedIn ? (
<Dashboard />
) : (
<Login onLogin={() => setIsLoggedIn(true)} />
)}
</div>
);
};
export default App;
5. Stile
src/styles/App.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
h1, h2 {
color: #333;
}
6. Avvio dell'App
Esegui l'app con:
npm start
Considerazioni Finali
Questo è un esempio di base per un'app di gestione finanziaria in React. Dovrai implementare ulteriori funzionalità come la modifica e l'eliminazione delle transazioni, la gestione delle notifiche, l'esportazione dei dati e la personalizzazione del tema. Inoltre, considera di gestire gli errori e migliorare l'interfaccia utente per un'esperienza più fluida.
Se desideri sviluppare un'app mobile, puoi seguire una struttura simile utilizzando React Native e librerie come React Navigation per la navigazione.