87 lines
4.9 KiB
Markdown
87 lines
4.9 KiB
Markdown
# Flutter Frontend - User Guide
|
||
|
||
This README describes how to use the Flutter frontend for Recipe App from a user and operator perspective.
|
||
|
||
## Senaste ändringar (2026-04-25)
|
||
|
||
**Arkitektur- och UX-förbättringar:**
|
||
- Grid-vy för recept: Kolumnval (2/4/6/8) via ikon i AppShell, med Riverpod-provider och SharedPreferences.
|
||
- RecipesScreen är nu body-only, ingen egen Scaffold/AppBar.
|
||
- AppShell visar grid-ikon endast på /recipes.
|
||
- Buggfix: Produktväljaren i pantry/inventarie (ProductPickerField) — bottenark implementeras.
|
||
- Kodkvalitet: Inga absoluta Windows-sökvägar.
|
||
|
||
**Nyheter och förbättringar:**
|
||
- **Fas 5: Matplan parity** — Veckovy, portionsjustering per dag, inköpslista och inventariejämförelse mot användarens pantry är nu fullt migrerade och user-scopade.
|
||
- **Fas 6a: Receptimport** — Importflöde för recept (fil/URL) är nu robust, med stöd för PDF, bild och ICA-länkar. Prefill av markdown och bild-url fungerar i Flutter.
|
||
- **Bildimport** — Backend och Flutter har förbättrats med robust bildhantering, normalisering av URL:er, fallback och diagnostikloggning.
|
||
- **User-scope för pantry och matplan** — Alla baslager- och matplansdata är nu per användare (inte globala).
|
||
- **UI/UX-förbättringar** — Produktval med bottenark (ProductPickerField), swipe-för-±1 på inventarielistan (SwipeableInventoryTile), och förbättrad felhantering.
|
||
|
||
## Relaterade dokument
|
||
- [next_steps_flutter.md](next_steps_flutter.md)
|
||
- [teknisk_beskrivning_flutter.md](teknisk_beskrivning_flutter.md)
|
||
|
||
## Vad appen är
|
||
|
||
Detta är en Flutter Web frontend för Recipe App, som körs i Docker och exponeras via Caddy. Den är avsedd att bete sig som den befintliga webbfrontenden, men är byggd i Flutter för att stödja framtida Android- och iOS-klienter.
|
||
|
||
## Aktuella användarflöden
|
||
- Inloggning med användarnamn och lösenord.
|
||
- Receptlista efter inloggning.
|
||
- Profil-sida (grundversion).
|
||
- Utloggning från recept- och profil-sidor.
|
||
|
||
## Var man kommer åt appen
|
||
- Testmiljö: `https://test.gynther.se`
|
||
|
||
## Inloggningsdetaljer
|
||
- Inloggning förväntar sig användarnamn, inte e-post.
|
||
- Exempel på seedad admin-användare i backend: `Nadmin`.
|
||
- Lösenordet kontrolleras av servermiljövariabeln (`ADMIN_NADMIN_PASSWORD`).
|
||
|
||
## Kända begränsningar
|
||
- Kvittoimport (Fas 6b) är påbörjad men granskningssteg och bulk-spara återstår.
|
||
- Bildimport kräver att containrar är uppdaterade med senaste kod — kontrollera att diagnostikloggar syns vid felsökning.
|
||
- Vissa adminfunktioner och avancerad AI-integration är planerade men ej migrerade.
|
||
|
||
## Felsökning (användarnivå)
|
||
1. Om sidan visar gammalt beteende efter deployment: hård uppdatering eller öppna i inkognitoläge.
|
||
2. Om inloggning misslyckas: verifiera användarnamn/lösenord (inte e-post).
|
||
3. Om recept inte laddas: rapportera fel i webbläsarkonsolen/nätverksfelen till utvecklingsteamet.
|
||
|
||
## Förväntningar vid release
|
||
|
||
Denna frontend är tillgänglig för iterativ testning. Funktionell parity med den nuvarande produktionsfrontenden levereras stegvis.
|
||
|
||
## Konverteringsvägen och Onboarding
|
||
- **CTA (Call-to-Action):** Tydliga och lockande CTAs som "Se vad du kan laga med det du har hemma."
|
||
- **Förenkla onboarding:** Gästinloggning eller demo-läge, sociala inloggningar, välkomstguide, och pop-up-tips.
|
||
- **Snabb start med exempeldata:** Förifyllt exempeldata och "Snabbstart"-knapp.
|
||
- **Fokusera på "Aha!"-momentet:** Omedelbara receptförslag och automatiska inköpslistor.
|
||
- **Tydliga instruktioner och feedback:** Instruktioner för varje steg och omedelbar feedback.
|
||
- **Användarvänlig design:** Fokus på kärnfunktioner och enkelhet.
|
||
- **Möjlighet att hoppa över onboarding:** Knapp för att hoppa över onboarding.
|
||
|
||
## Testa och iterera
|
||
- Gå igenom appen som en ny användare för att identifiera eventuella problem.
|
||
- A/B-testa olika CTAs och onboarding-flöden.
|
||
- Implementera analytik för att spåra var användare hoppar av och varför.
|
||
|
||
## Anpassa till målgruppen
|
||
- Anpassa marknadsföring och CTAs till målgruppen (t.ex. familjer, matintresserade, meal preppers).
|
||
- Var tydlig med appens värdeproposition, t.ex. "Slipp slösa mat – vi visar vad du kan laga med det du har hemma."
|
||
|
||
---
|
||
|
||
## Nyheter och förbättringar (2026-04-24)
|
||
|
||
- **Navigations- och UX-förbättringar:**
|
||
- Tydliga navigationslänkar mellan recept, inventarie, baslager och matplan för att förenkla användarflödet.
|
||
- Efter att ett recept redigerats, navigeras användaren nu automatiskt till receptdetaljer.
|
||
- Efter konsumtion av inventariepost navigeras användaren automatiskt tillbaka till inventarielistan.
|
||
- Efter import av recept navigeras användaren automatiskt till receptlistan.
|
||
- Mjukare scrollning i receptdetaljvyn och förbättrad bakgrundsbildshantering.
|
||
- **Kodkvalitet:**
|
||
- Säkerställt att inga absoluta Windows-sökvägar används i koden, för att stödja bygg och drift på Linux/Ubuntu.
|