161 lines
3.2 KiB
Markdown
161 lines
3.2 KiB
Markdown
|
# SOP — BitePlan (Vue 3 + Vite → Capacitor Android)
|
|||
|
|
|
|||
|
|
## Scope
|
|||
|
|
|
|||
|
|
App mobile-first con tre funzionalità:
|
|||
|
|
|
|||
|
|
1. **Meal Planner** — pianificazione settimanale (7 giorni × 3 pasti: colazione, pranzo, cena). Ogni pasto contiene una lista di voci testuali liberamente modificabili.
|
|||
|
|
2. **Conversione crudo/cotto** — calcolo del peso cotto a partire dal peso crudo (e viceversa) tramite coefficienti di resa definiti in un JSON interno.
|
|||
|
|
3. **Lista della spesa** — checklist con aggiunta, spunta e rimozione elementi.
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Stack tecnologico
|
|||
|
|
|
|||
|
|
| Livello | Scelta |
|
|||
|
|
|---|---|
|
|||
|
|
| Frontend | Vue 3 + Vite |
|
|||
|
|
| Stato | Composables (no store) |
|
|||
|
|
| Persistenza | LocalStorage |
|
|||
|
|
| UI | CSS base mobile-first |
|
|||
|
|
| Mobile (fase successiva) | Capacitor Android |
|
|||
|
|
| Build riproducibile (opzionale) | Docker |
|
|||
|
|
|
|||
|
|
Sviluppo iniziale: `npm run dev` + Chrome DevTools modalità mobile.
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Struttura progetto
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
src/
|
|||
|
|
├── pages/
|
|||
|
|
│ ├── MealPlanner.vue
|
|||
|
|
│ ├── Converter.vue
|
|||
|
|
│ └── ShoppingList.vue
|
|||
|
|
├── components/
|
|||
|
|
│ ├── BottomNav.vue
|
|||
|
|
│ ├── MealCard.vue
|
|||
|
|
│ └── CheckboxItem.vue
|
|||
|
|
├── data/
|
|||
|
|
│ └── conversions.json
|
|||
|
|
├── utils/
|
|||
|
|
│ ├── conversion.js
|
|||
|
|
│ └── storage.js
|
|||
|
|
└── App.vue
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Fase 1 — Setup
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm create vue@latest biteplan
|
|||
|
|
cd biteplan
|
|||
|
|
npm install
|
|||
|
|
npm run dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Test mobile: Chrome → F12 → viewport 360×640.
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Fase 2 — Meal Planner
|
|||
|
|
|
|||
|
|
**Struttura dati**
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
{
|
|||
|
|
lunedi: { colazione: [], pranzo: [], cena: [] },
|
|||
|
|
martedi: { ... }
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**Funzionalità**
|
|||
|
|
- Aggiungere/rimuovere voci per ogni pasto
|
|||
|
|
- Visualizzare l'intera settimana
|
|||
|
|
- Salvataggio automatico su LocalStorage
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Fase 3 — Conversione crudo/cotto
|
|||
|
|
|
|||
|
|
**JSON** — `src/data/conversions.json`
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"pollo": { "forno": { "yield": 0.75 }, "padella": { "yield": 0.70 } },
|
|||
|
|
"riso": { "bollito": { "yield": 2.5 } }
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
`yield = peso_cotto / peso_crudo`
|
|||
|
|
|
|||
|
|
**Funzioni** — `src/utils/conversion.js`
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
export const rawToCooked = (food, method, raw, db) => raw * db[food][method].yield
|
|||
|
|
export const cookedToRaw = (food, method, cooked, db) => cooked / db[food][method].yield
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**UX**: ricerca testuale sull'alimento → selezione alimento+metodo → input grammi → risultato in tempo reale.
|
|||
|
|
|
|||
|
|
Esempio: 140 g pollo crudo → 105 g cotti al forno.
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Fase 4 — Lista della spesa
|
|||
|
|
|
|||
|
|
**Struttura dati**
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
[{ id, name, checked }]
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**Funzionalità**: aggiungi, spunta, elimina, svuota lista.
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Fase 5 — UI Mobile
|
|||
|
|
|
|||
|
|
Navigazione bottom bar: Pasti | Converti | Spesa.
|
|||
|
|
|
|||
|
|
Linee guida: bottoni min 44px, input semplici, una funzione per schermata.
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Fase 6 — Android (Capacitor)
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm install @capacitor/core @capacitor/cli
|
|||
|
|
npx cap init
|
|||
|
|
npx cap add android
|
|||
|
|
npm run build && npx cap sync && npx cap run android
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Fase 7 — Docker (opzionale)
|
|||
|
|
|
|||
|
|
Pipeline: install → build frontend → cap sync → gradle build APK.
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Fasi future
|
|||
|
|
|
|||
|
|
- Modifica coefficienti di conversione in-app
|
|||
|
|
- Calcolo kcal
|
|||
|
|
- Generazione automatica lista spesa dai pasti pianificati
|
|||
|
|
- Sync cloud
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Checklist
|
|||
|
|
|
|||
|
|
- [ ] Meal planner funzionante
|
|||
|
|
- [ ] Conversioni corrette
|
|||
|
|
- [ ] JSON alimenti presente (12+ voci)
|
|||
|
|
- [ ] Lista spesa funzionante
|
|||
|
|
- [ ] Persistenza attiva
|
|||
|
|
- [ ] APK testabile
|