# Guia del professor — Sessió 1

## «Crear apps amb IA, des de zero»

> **La primera classe pràctica.** Avui cada alumne construeix i **publica a internet** una app web real (cara + motor + rebost), tot 100 % des del navegador i amb l'ajuda de la IA. Cap instal·lació, cap codi escrit a mà.

---

## 1. Fitxa de la sessió

| Camp | Detall |
|---|---|
| **Sessió** | 1 — Primera app web amb IA |
| **Format** | Presencial amb tu, amb l'HTML interactiu projectat i a la pantalla de cada alumne |
| **Durada total** | **150 min** (2 h 30 min), amb una pausa curta opcional |
| **Objectiu** | Que **cada alumne surti amb una app web pròpia publicada** (enllaç acabat en `/exec`) que funciona al navegador i al mòbil |
| **Material de l'alumne** | Portàtil (ideal) o mòbil, compte **personal** de Google, l'HTML interactiu de la Sessió 1 obert |
| **Material teu** | Projector/pantalla compartida, una **app de demo ja publicada**, Gemini obert en català, l'HTML interactiu |

### Què s'enduen (resultats d'aprenentatge)

- Una **app web real, publicada i compartible** (la seva, triada per ells).
- Entendre el **flux** d'una app: la **cara** (Index.html) parla amb el **motor** (Codi.gs), que desa al **rebost** (un full de Google).
- Saber **demanar codi a la IA** i **enganxar-lo** al lloc correcte sense saber programar.
- Saber **publicar** i, sobretot, **actualitzar mantenint el mateix enllaç**.
- Interioritzar la regla d'or: **«una app, un full nou»**.

### Requisits previs (comprova'ls a l'inici)

1. **Sessió 0 llegida** (l'HTML d'autoestudi): internet, client/servidor, frontend/backend, base de dades vs. fitxers, els 4 pilars i l'analogia del restaurant.
2. **Compte PERSONAL de Google** (acabat en `@gmail.com` o personal). **No** un compte d'empresa/Workspace: solen bloquejar Apps Script i la publicació.
3. **Carpeta del curs al Drive** ja creada (on hi aniran els fulls de cada app).

>  Si algú arriba només amb compte d'empresa, **no avancis** sense resoldre-ho: vegeu el Pla B (secció 5).

---

## 2. Preparació prèvia del professor (el dia abans)

Dedica-hi 20–30 min. Si el dia D va fluix, sol ser per algun d'aquests punts.

- [ ] **Comprova els comptes.** Si tens la llista d'alumnes, pregunta per endavant qui té compte personal. Prepara 1–2 comptes de reserva (o gmails nous) per als qui vinguin sense.
- [ ] **Tingues una app de demo JA publicada.** Recomanat: el ** Diari del son**. Has de tenir-ne l'enllaç `/exec` a punt per ensenyar-lo des del mòbil i des del portàtil. Que es vegi **bonica i acabada**: és el «ganxo» de tota la classe.
- [ ] **Tingues també el projecte de la demo obert** a Apps Script, per ensenyar com és per dins (els dos fitxers, el menú Implementar).
- [ ] **Obre Gemini en català** (https://gemini.google.com/app?hl=ca-ES) i fes una passada al prompt que genera l'HTML interactiu, perquè sàpigues què sortirà.
- [ ] **Prova la teva connexió i el projector.** Comparteix pantalla i comprova que es llegeix el text petit del navegador (zoom al 125–150 % ajuda molt amb públic gran).
- [ ] **Obre l'HTML interactiu de la Sessió 1** i deixa'l a punt al Pas 0.
- [ ] **Tingues a mà la carpeta del curs al Drive** per ensenyar com s'hi mou un full.
- [ ] **Prepara mentalment el missatge tranquil·litzador**: «No cal saber programar. Avui demanem les coses i les entenem.»

---

## 3. Minutat bloc a bloc (~150 min)

> Porta el rellotge a la mà. Els temps de **pràctica autònoma** són els primers a ampliar-se i els darrers a retallar-se.

| # | Bloc | Min | Acumulat |
|---|---|---:|---:|
| A | Obertura i trencaglaç (des d'una app que ja coneixen) | 10 | 10 |
| B | Repàs llampec de la Sessió 0 (4 pilars + restaurant) | 10 | 20 |
| C | Demo d'una app acabada (i com és per dins) | 10 | 30 |
| D | Construcció guiada de la 1a app, TOTS JUNTS (Diari del son) | 55 | 85 |
| — | Pausa curta | 5 | 90 |
| E | Pràctica autònoma: cadascú fa la SEVA app | 40 | 130 |
| F | El bucle de millora (Pas 5) | 12 | 142 |
| G | Tancament i checklist | 8 | 150 |

**Total: 150 minuts.**

---

### Bloc A — Obertura i trencaglaç (10 min)

- **No comencis per la teoria.** Obre la teva **app de demo publicada** al mòbil (projecta el mòbil o ensenya-la físicament) i digues: «Això ho heu fet vosaltres d'aquí a dues hores.»
- Pregunta: «Quantes hores heu dormit aquesta setmana?» → afegeix una nit a la demo en directe → ensenya com es desa i com canvia la mitjana.
- Missatge clau: «És una **web de veritat**, amb el seu enllaç, que funciona al mòbil i a l'ordinador. I no escriurem ni una línia de codi a mà.»
- Comprova en veu alta els 3 requisits (Sessió 0, compte personal, carpeta). Resol els comptes ARA.

### Bloc B — Repàs llampec de la Sessió 0 (10 min)

Ràpid i visual. L'HTML interactiu té el diagrama del flux i l'analogia al **Pas 0**; recolza't-hi.

- **Els 4 pilars**, amb el restaurant:
  - **La cara** (frontend) = la sala i la carta → el que veu el client. → serà **Index.html**.
  - **El motor / la cuina** (backend) = on es cuina la lògica. → serà **Codi.gs**.
  - **El rebost** (base de dades / on es guarda) = la despensa. → serà **un full de Google**.
  - **Internet** = els cambrers que connecten sala i cuina (URLs, client/servidor, el núvol).
- Recorda que **SQL vs NoSQL** el deixem per a una sessió futura (Firestore). Avui el rebost és un **full de càlcul**, i ja està.
- Tanca amb la frase que repetiràs tot el dia: **«una app, un full nou»**.

### Bloc C — Demo d'una app acabada (10 min)

- Ensenya la demo **publicada** (l'enllaç `/exec`): obre-la, fes-la servir, ensenya que les dades es guarden de veritat.
- Obre **el full** d'aquesta app: que vegin les files que s'omplen.
- Obre **el projecte Apps Script** de la demo: ensenya els **dos fitxers** («Codi.gs» i «Index.html») i el menú **Implementar** (sense entrar en detall encara).
- **No expliquis el codi línia a línia.** Només el flux: cara → motor → rebost. «Avui no llegim codi: el demanem, l'enganxem i l'entenem per sobre.»

### Bloc D — Construcció guiada de la 1a app, TOTS JUNTS (55 min)

> Tots fan la **mateixa** app a la vegada: el ** Diari del son** (és el més senzill i sense permisos extra). Ningú es queda enrere perquè tothom va al mateix pas. Tu vas pas a pas amb l'HTML interactiu projectat; ells repliquen a la seva pantalla.

**Pas 0 — «Què construiràs» (5 min)**
- Que triïn **Diari del son** a l'HTML interactiu.
- Que juguin 1 min amb el **selector d'estil** (color, cantonades, to, clar/fosc, tipografia) i vegin el **mockup en viu** canviar. És el moment «uau» i personalitza la seva app.
- Recorda el diagrama: cara ↔ motor ↔ rebost.

**Pas 1 — «Crea el full (la base de dades)» (8 min)**
- Hi ha dues pestanyes; tria'n UNA per a tots. Recomanació per a principiants: **fer-lo a mà** és més controlable en grup.
  - **A mà:** `sheets.new` al navegador (o Drive → Nou → Fulls de càlcul) → **full nou** → posa-li nom → escriu les **capçaleres** a la fila 1 tal com indica la targeta.
  - **Amb Gemini:** prompt → quan mostri la taula, menú **⋯** sota la taula → **«Exporta a Sheets»** → després **mou el full** de l'arrel del Drive a la **carpeta del curs**.
- Insisteix en les **capçaleres a la fila 1**: sense capçaleres, el motor no sap on escriure.

**Pas 2 — «Demana el codi a Gemini» (10 min)**
- El botó **copia el prompt I obre Gemini**. Que enganxin i enviïn.
- Gemini ha de tornar **DOS fitxers**: el motor (`Codi.gs`) i la cara (`Index.html`).
- Mentre Gemini «pensa», explica què està demanant el prompt (doGet, HtmlService, google.script.run) **per sobre**, sense tecnicismes.

**Pas 3 — «Enganxa els dos fitxers» (12 min)**
- Obre l'editor: al full → **Extensions → Apps Script**.
- **Motor:** selecciona-ho tot a «Codi.gs» (Ctrl+A), esborra i **enganxa** el motor. Desa amb .
- **Cara:** al costat de «Fitxers» → **+** → **HTML** → nom **exactament `Index`** (quedarà «Index.html») → enganxa la cara → desa.
- Comprova en veu alta: «Heu de tenir **dos fitxers**: Codi.gs i Index.html.»

**Pas 4 — «Publica-ho i prova-ho» (15 min)** el moment crític
- **Implementar → Nova implementació → Aplicació web.**
- «Executar com»: **Jo**. «Qui hi té accés»: per al Diari del son, **Només jo** (és personal).
- **Implementar.** La 1a vegada demana permisos → apareixerà **«Google no ha verificat aquesta app»** → **Configuració avançada → Ves al projecte (no verificat) → Permet**. Tranquil·litza'ls: «El codi és teu, és segur.»
- **Copia la URL acabada en `/exec`**, obre-la i **prova-la**. Després **prova-la al mòbil**.
- Aquí tothom hauria de tenir la seva primera app viva. **Si algú no hi arriba, atura el grup i resol-ho** abans de continuar.

**Pas 5 — preview del bucle de millora (5 min)**
- Només ensenya'ls que **es pot millorar** (ho faran ells al Bloc F). No t'hi entretinguis ara.

> **Pausa curta (5 min).** Bon moment per resoldre cues individuals.

### Bloc E — Pràctica autònoma: cadascú fa la SEVA app (40 min)

- Ara **cadascú tria un exemple diferent** (o repeteix amb variacions) i el fa **de zero**, seguint els Passos 0–4 ell sol amb l'HTML interactiu.
- Els 7 exemples:
  - **Diari del son** — el ja vist (poden fer-ne una variant).
  - **Control de despeses**.
  - **Seguiment d'hàbits**.
  - **El meu rebost** (col·lecció/llista de coses).
  - **Inscripcions amb correu** — **envia correu (MailApp)** → **permís EXTRA** i accés **«Qualsevol»** (vegeu encallades).
  - **Diari d'ànim**.
  - **La teva pròpia idea** — assistent guiat per a qui s'atreveixi.
- **Regla d'or en pantalla tota l'estona: «una app, un full nou».** Cada app = un full nou + el seu propi Apps Script.
- **El teu rol aquí:** circula, no resolguis tu el teclat; assenyala on és l'error i deixa que ho corregeixin. Anima els ràpids a triar **Inscripcions** (el repte del permís extra).

### Bloc F — El bucle de millora (Pas 5) (12 min)

- Tornem a tots junts. Objectiu: que **una** millora funcioni i entenguin el bucle.
- **Idea clau:** Gemini **no edita** fitxers existents; sempre en crea de nous. Per millorar:
  1. Copia el teu **Codi.gs** i el teu **Index.html** actuals i enganxa'ls al prompt de millora.
  2. Demana a Gemini la millora → torna **els DOS fitxers sencers**.
  3. **Substitueix del tot** el contingut a «Codi.gs» i «Index.html». **No creïs cap projecte nou.** Desa.
- **Re-publicar mantenint el MATEIX enllaç** (no «Nova implementació»):
  - **Implementar → Gestionar implementacions →** el **llapis** (editar) **→ Versió: Versió nova → Implementar.**
  - Resum fàcil per a la pissarra: **«La 1a vegada: Nova implementació. Les altres: Gestionar implementacions → llapis → Versió nova.»**

### Bloc G — Tancament i checklist (8 min)

- Que cadascú comprovi el **checklist** de l'HTML interactiu:
  - [ ] Tinc el **full** (rebost) a la carpeta del curs.
  - [ ] Tinc els **dos fitxers**: «Codi.gs» i «Index.html».
  - [ ] L'he **publicada** i tinc l'enllaç **`/exec`**.
  - [ ] **L'he provat al mòbil.**
- **Volta d'enllaços:** que 2–3 alumnes comparteixin la seva app a la pantalla. Reforça l'orgull.
- **Pont cap a la Sessió 2** (secció 7) en una frase.

---

## 4. On s'encallaran SEMPRE i com desencallar-los

| Símptoma | Causa | Solució ràpida |
|---|---|---|
| No pot crear/obrir Apps Script o publicar | **Compte d'empresa/Workspace** bloquejat | Canviar a **compte personal** (`@gmail.com`). És **innegociable**. |
| Pantalla **«Google no ha verificat aquesta app»** i s'espanten | És el flux normal d'apps pròpies no verificades | **Configuració avançada → Ves al projecte (no verificat) → Permet**. «El codi és teu, és segur.» |
| L'app surt en blanc o error en obrir `/exec` | El fitxer HTML **no es diu `Index`** (o té majúscula/accents canviats) | El nom ha de ser **exactament `Index`** → «Index.html». Comprova també «Codi.gs». |
| Es desa però no apareix res al full / dona error en desar | **Full sense capçaleres** a la fila 1, o capçaleres diferents de les del prompt | Posar les **capçaleres** tal com diu la targeta del Pas 1, a la **fila 1**. |
| El codi de Gemini sembla **incomplet / tallat** | Resposta llarga tallada | Demanar-li **«continua»**, o **«dona'm el fitxer sencer un altre cop»**. Verificar que hi ha els **dos** fitxers complets. |
| A **Inscripcions**, error de permisos en enviar correu | L'app usa **MailApp** → demana un **permís EXTRA** (enviar correu en nom teu) | Acceptar el permís igual: **Configuració avançada → Permet**. Avisa'ls **abans** de publicar. |
| L'app no la veu ningú més (o sí, i no tocava) | Confusió **«Només jo» vs «Qualsevol»** | **Personals** (son, despeses, hàbits, rebost, ànim) → **«Només jo»**. **Inscripcions** (formulari públic) → **«Qualsevol»**. |
| En millorar, l'enllaç canvia | Han fet **«Nova implementació»** en comptes d'actualitzar | Per actualitzar: **Gestionar implementacions → llapis → Versió nova**. El mateix enllaç. |
| Han creat un projecte nou per millorar | No saben que Gemini no edita | **«Una app, un full nou»**, però **les millores van al MATEIX projecte**: substituir el codi, no crear-ne un de nou. |

> **Truc de prevenció:** abans de publicar, fes que tothom miri la barra lateral de fitxers i digui en veu alta «tinc Codi.gs i Index.html». Evita el 80 % dels errors del Pas 4.

---

## 5. Pla B de contingències

### Si un compte no entra
- Canvi a **compte personal**. Si no en té, **crea'n un de nou** allà mateix (5 min) o presta'n un de reserva. **No** deixis que segueixi amb compte d'empresa: no podrà publicar i es frustrarà.

### Si Gemini va lent o cau
- Té a punt **el codi de la demo (Diari del son) en un fitxer de text** per repartir, perquè tothom pugui fer els Passos 3–4 encara que Gemini no respongui.
- Anima'ls a **reenviar el prompt** o esperar; sol ser temporal.
- En cas extrem, fes la generació **tu** a la pantalla i que copiïn el resultat.

### Si vas curt de temps

| Prioritat | Bloc | Decisió |
|---|---|---|
|  **Innegociable** | Que **CADASCÚ surti amb UNA app publicada** (`/exec` que funciona) | No acabis la classe sense això. |
|  Sacrificable | **2a app** a la pràctica autònoma (Bloc E) | Que en facin **només una** de pròpia, sense córrer. |
|  Sacrificable | **Bucle de millora** (Bloc F) | Ensenya'l **només a la pantalla** com a demo; que ho practiquin a casa. |
|  Retallable | Selector d'estil i variants | Estil ràpid i tirar. |

> Si vas MOLT just: tot el grup fa **només el Diari del son** (Bloc D) i tanques. Tothom ha publicat una app: **objectiu complert.**

---

## 6. Errors pedagògics a evitar (tu, professor)

- **No expliquis el codi línia a línia.** L'objectiu és el **flux** (cara → motor → rebost) i saber **demanar i enganxar**, no entendre la sintaxi.
- **No deixis que copiïn sense entendre el flux.** A cada pas, pregunta «això quina part és: cara, motor o rebost?».
- **No teclegis tu al seu ordinador.** Assenyala l'error i deixa que el corregeixin: és l'única manera que aprenguin a desencallar-se sols.
- **Repeteix «una app, un full nou»** fins que els surti a ells. És el concepte que més es confon.
- **Insisteix a provar-ho al MÒBIL.** És on es veu que és una «web de veritat» i és el moment de més satisfacció.
- **Celebra cada `/exec` que funciona.** El reforç positiu amb públic principiant val més que cap explicació.
- **Normalitza els avisos de Google** («no verificat», permisos): són normals i segurs, no errors.

---

## 7. Ponts amb la resta del curs

### D'on venen — Sessió 0 (autoestudi)
- Ja saben **com funciona internet** (client/servidor, núvol, URLs), **frontend vs backend**, **on es guarden les coses** (base de dades vs fitxers/Drive) i **els 4 pilars** amb el **restaurant**.
- Avui hem **convertit aquella teoria en una app real**: la cara = Index.html, el motor/cuina = Codi.gs, el rebost = el full.

### Cap a on van — Sessió 2
- Avui hem demanat el codi sencer i l'hem enganxat. A la **Sessió 2** aprofundirem en la **lògica del motor (backend)**: més funcions, més camps, validacions i **millores** més ambicioses, mantenint sempre el mateix enllaç amb «Versió nova».
- Deixa'ls amb ganes: «La vostra app d'avui és la base. La pròxima sessió la farem **més llesta**.»

---

### Annex — Frases per a la pissarra

- **«Una app, un full nou.»**
- **«Cara (Index.html) → motor (Codi.gs) → rebost (el full).»**
- **«No cal saber programar: cal saber demanar i entendre.»**
- **«1a vegada: Nova implementació. Després: Gestionar implementacions → llapis → Versió nova.»**
- **«Provem-ho al mòbil.»**