RN Lezione 13: Progetto — Setup, Idee e Wireframe

Obiettivi

• Scegliere un’idea progetto tra quelle proposte
• Progettare wireframe su carta
• Impostare il progetto Expo con navigazione
• Creare schermate vuote

---

1. Idee progetto

🟢 Base (48h completa)

Progetto	Cosa fa	Feature tecniche
Todo List	Aggiungi, completa, elimina task	FlatList, AsyncStorage, Alert
Rubrica	Contatti con telefono e email	FlatList, navigazione, form
Diario	Post con titolo, testo, data	AsyncStorage, FlatList, form

🟡 Intermedio

Progetto	Feature tecniche
App Meteo	API, ricerca città, FlatList, AsyncStorage preferiti
Gestore Spese	Transazioni, categorie, calcolo totale, AsyncStorage
Raccolta Ricette	Categorie, dettaglio, ricerca, immagini

🔴 Avanzato

Progetto	Feature tecniche
Flashcard Quiz	Timer, punteggio, navigazione, animazioni
Social Wall	Post, like, commenti, FlatList, form
Catalogo Prodotti	Lista, dettaglio, carrello (AsyncStorage), ricerca

---

2. Criteri di valutazione

Criterio	Punti	Cosa valuta
Funzionalità	30	L’app fa ciò che promette?
Codice	25	Componenti, stato, organizzazione?
UI/UX	20	Layout pulito, stili coerenti?
Persistenza	10	AsyncStorage funziona?
Navigazione	10	Stack/Tab funzionanti?
Extra	5	Oltre il minimo richiesto?
Totale	100

---

3. Template progetto

npx create-expo-app@latest MioProgetto
cd MioProgetto
npx expo start

Struttura consigliata

MioProgetto/
├── app/
│   ├── _layout.js           ← Configurazione navigazione
│   ├── index.js             ← Home / lista
│   ├── aggiungi.js          ← Form aggiunta
│   └── dettaglio.js         ← Dettaglio elemento
├── components/
│   ├── Card.js              ← Card riutilizzabile
│   ├── FormInput.js         ← Input con label
│   └── Loading.js           ← ActivityIndicator
├── utils/
│   └── storage.js           ← Funzioni AsyncStorage
└── data/
    └── iniziali.js          ← Dati di esempio

---

4. Template storage.js

import AsyncStorage from '@react-native-async-storage/async-storage';

const CHIAVE = '@app_dati';

export const caricaDati = async () => {
    try {
        const json = await AsyncStorage.getItem(CHIAVE);
        return json ? JSON.parse(json) : [];
    } catch {
        return [];
    }
};

export const salvaDati = async (dati) => {
    try {
        await AsyncStorage.setItem(CHIAVE, JSON.stringify(dati));
        return true;
    } catch {
        return false;
    }
};

export const resettaDati = async () => {
    await AsyncStorage.removeItem(CHIAVE);
};

---

5. Template navigazione (app/_layout.js)

import { Stack } from 'expo-router';

export default function Layout() {
    return (
        <Stack
            screenOptions={{
                headerStyle: { backgroundColor: '#3498db' },
                headerTintColor: 'white',
                headerTitleStyle: { fontWeight: 'bold' },
            }}
        >
            <Stack.Screen name="index" options={{ title: 'Home' }} />
            <Stack.Screen name="aggiungi" options={{ title: 'Aggiungi' }} />
            <Stack.Screen name="dettaglio" options={{ title: 'Dettaglio' }} />
        </Stack>
    );
}

---

6. Checklist setup

• Idea scelta e descritta in una frase
• Wireframe di almeno 2 schermate su carta
• Progetto Expo creato e funzionante
• @react-native-async-storage/async-storage installato
• Navigazione (Stack) configurata con schermate vuote
• Dati di esempio definiti
• storage.js creato con funzioni salva/carica
• Test su Expo Go: navigazione funziona