RN Lez 36: Build APK e Presentazione

Docs: Publishing to App Store, Signed APK

Obiettivi

• Configurare app.json con icon e splash
• Compilare APK con EAS Build
• Presentare il progetto alla classe

---

1. Configurare app.json

{
    "expo": {
        "name": "Mia App",
        "slug": "mia-app",
        "version": "1.0.0",
        "orientation": "portrait",
        "icon": "./assets/icon.png",
        "userInterfaceStyle": "light",
        "splash": {
            "image": "./assets/splash.png",
            "resizeMode": "contain",
            "backgroundColor": "#ffffff"
        },
        "android": {
            "package": "com.tuaclasse.miaapp",
            "adaptiveIcon": {
                "foregroundImage": "./assets/adaptive-icon.png",
                "backgroundColor": "#ffffff"
            }
        }
    }
}

Campi importanti

Campo	Descrizione
name	Nome visibile dell’app
slug	Identificatore URL
version	”1.0.0”
icon	1024×1024 PNG
splash	Schermata caricamento
android.package	com.nome.app (unico)

---

2. Icone e Splash

Preparare i file in assets/:

assets/
├── icon.png            ← 1024×1024
├── adaptive-icon.png   ← 1024×1024
├── splash.png          ← 1284×2778
└── favicon.png         ← 48×48

Genera icone con icon.kitchen o appicon.co.

---

3. EAS Build — APK

# 1. Installare EAS CLI
npm install -g eas-cli

# 2. Login (account Expo gratuito)
eas login

# 3. Configurare build
eas build:configure    # crea eas.json

# 4. Build APK per Android
eas build -p android --profile preview

La build richiede 5-15 minuti (cloud). Ricevi un link per scaricare l’APK.

eas.json

{
    "build": {
        "preview": {
            "android": { "buildType": "apk" }
        },
        "production": {}
    }
}

---

4. Installare l’APK

1. Scarica l’APK dal link
2. Trasferisci sul telefono (download diretto o USB)
3. Aprilo → potrebbe chiedere “Installa da fonti sconosciute”
4. L’app è installata! 🎉

---

5. Struttura presentazione (3-5 min)

Sezione	Durata
Cos’è l’app (nome, scopo)	30s
Demo live sul telefono	2min
Codice/componenti usati	1min
Difficoltà incontrate	30s
Miglioramenti futuri	30s

Checklist demo

• Telefono carico
• App funzionante (nessun crash)
• CRUD completo
• Persistenza (chiudi/riapri app)
• Navigazione funzionante

---

6. README.md nel progetto

# Nome App

## Descrizione
App per [funzionalità principale].

## Funzionalità
- [x] Aggiungere elementi
- [x] Visualizzare lista
- [x] Persistenza dati
- [x] Navigazione

## Tecnologie
- React Native + Expo
- React Navigation
- AsyncStorage

## Screenshot
[immagine app]

---

7. Checklist consegna finale

• Codice su GitHub/chiavetta
• APK funzionante
• README.md
• Screenshot
• Breve relazione
• Demo pronta

---

8. 🎉 Congratulazioni

Cosa hai imparato in 72 ore?

Blocco	Competenze
JS Bridge	Arrow functions, map/filter, destrutturazione
React	Componenti, props, useState, useEffect
Core Components	View, Text, StyleSheet, Image, ScrollView
Flexbox	Layout, griglie, posizionamento
Liste	FlatList, SectionList, RefreshControl
Navigation	Stack, Tab, Drawer
API	fetch GET/POST, WebSocket
Persistenza	AsyncStorage
Animazioni	Animated, LayoutAnimation
TypeScript	Tipi, props, navigazione
Build	EAS Build, APK

Ora sai creare app mobili vere con React Native! 📱