# Guia del professor — Sessió 3

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

> **Surt del navegador: GitHub, Codespaces i el mètode del context.** Avui fem el salt d'eines més gran del curs. Deixem (en part) l'editor d'Apps Script i obrim un **VS Code de programador de debò**, però **sense instal·lar res**: dins de **GitHub Codespaces**, al navegador. Cada alumne es crea el seu **compte de GitHub** i el seu **primer repositori**, aprèn què és un **commit / push / pull**, i descobreix el secret dels bons resultats amb IA: **un bon CONTEXT**. I publiquem **com sempre**: copiant el codi a Apps Script. La sessió s'obre amb les **presentacions de 5 min** de la Sessió 2.

---

## 1. Fitxa de la sessió

| Camp | Detall |
|---|---|
| **Sessió** | 3 — Surt del navegador: GitHub, Codespaces i el mètode del context |
| **Format** | **Presencial** amb tu. És un salt d'eines: ves amb temps i molta paciència |
| **Durada total** | **150 min** (2 h 30 min), amb una pausa curta |
| **Objectiu** | Que cada alumne (1) **tingui compte i primer repositori de GitHub**, (2) **entengui repo + local/remot + commit/push/pull**, (3) **treballi dins d'un Codespace** amb el seu agent, (4) **apliqui el mètode del context** (carpeta `context/` amb dos `.md`) i (5) construeixi i **publiqui com sempre** (copiar a Apps Script → `/exec`) |
| **Material de l'alumne** | Portàtil (**avui sí, recomanat de debò**; el mòbil no serveix per a Codespaces), compte **personal** de Google, **la seva app de la S1/S2 publicada**, i el correu a mà per **verificar** el compte de GitHub |
| **Material teu** | Projector/pantalla, **el teu compte i repo de prova** ja fets, un **Codespace obert** amb l'agent localitzat, els **dos documents de context d'exemple** a punt, i bona connexió (Codespaces va pel núvol) |

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

- Un **compte de GitHub** propi i el seu **primer repositori**.
- Entendre què és un **repositori**, la diferència entre la **còpia LOCAL** (al Codespace) i la **REMOTA** (a GitHub.com), i el cicle **commit → push → pull**.
- Saber **obrir i moure's per un Codespace** (el VS Code al navegador) i parlar amb el seu **agent** (Copilot, Claude, ChatGPT/Codex, Antigravity… o el free tier), sempre amb el flux **copiar-enganxar**.
- El **mètode del context**: crear `context/que-ha-de-fer.md` (el producte) i `context/arquitectura.md` (el tècnic), i demanar a l'agent **«llegeix la carpeta context/ i construeix»**.
- Reforçar que **es publica com sempre**: el codi (`Codi.gs` + `Index.html`) es **copia a Apps Script** i es publica amb **Implementar → Aplicació web** (`/exec`).

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

1. **App de la Sessió 1/2 publicada**, amb el seu `/exec` viu. Avui podem fer-ne una de nova o reescriure'n una d'existent amb el nou flux.
2. **Compte PERSONAL de Google** (`@gmail.com` o personal). El de sempre.
3. **Portàtil amb navegador modern** i **accés al seu correu** (el necessitaran per **verificar** el compte de GitHub).

>  **El compte de GitHub es crea AVUI.** No el donis per fet. Si pots, demana per endavant qui ja en té un (algun alumne potser sí) i qui no, per anar més de pressa al Bloc A.

>  **Avui el portàtil no és opcional.** Codespaces és un editor: amb el mòbil no es treballa bé. Qui només porti mòbil, **aparella'l** amb un company (Pla B).

---

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

Dedica-hi **40–50 min**. Avui hi ha eines noves (GitHub, Codespaces) i punts que s'encallen sí o sí: si no ho has fet tu abans, no ho ensenyis en directe.

- [ ] **Crea't un compte de GitHub de prova** (o fes servir el teu) i un **repositori nou** des de zero, perquè recordis cada pantalla i el pas de la **verificació de correu**.
- [ ] **Obre un Codespace** des d'aquell repo (el botó verd **Code → pestanya Codespaces → crear**) i **cronometra quant triga** a obrir-se el primer cop. Així podràs avisar la classe: «trigarà un parell de minuts, és normal».
- [ ] **Localitza el xat de l'agent** que faràs servir a la demo dins del Codespace (la icona del xat al lateral). Comprova **amb quin compte/subscripció** entra i si et demana iniciar sessió. Si no tens cap agent de pagament, **prova el free tier** o el pla B d'enganxar a Gemini en una pestanya.
- [ ] **Tingues a punt els DOS documents de context d'exemple** (`que-ha-de-fer.md` i `arquitectura.md`) en fitxers de text, per enganxar-los ràpid si algú es perd. Vegeu el contingut model a l'Annex B.
- [ ] **Practica el flux sencer una vegada**: repo → Codespace → crear `context/` amb els dos `.md` → demanar a l'agent «llegeix la carpeta context/ i construeix» → rebre `Codi.gs` i `Index.html` → **commit + push** → copiar el codi a **Apps Script** → publicar `/exec`. Si ho fas en ~20 min, ho faràs bé en directe.
- [ ] **Localitza el panell de Source Control** del Codespace (la icona de les «branques»/control de versions al lateral esquerre): és on faran **commit** i **push**. És el lloc que més costa de trobar.
- [ ] **Comprova projector, zoom (125–150 %) i CONNEXIÓ.** Codespaces va pel núvol: si la connexió de l'aula és justa, ves al Pla B (editor de github.com) abans que t'enxampi en directe.
- [ ] **Prepara el missatge del dia**: «Avui canviem d'eines, no de manera de treballar. Seguim **copiant i enganxant** i **publicant com sempre**. El que canvia és que ara tenim una **casa per al nostre projecte** (GitHub) i un **mètode** per explicar bé què volem (el context).»

---

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

> Porta el rellotge a la mà. La clau d'avui és **l'ordre**: primer **munta** (compte → repositori → Codespace) i comprova que **tothom el té obert**; **després** fes les presentacions —i, mentre presenten, ves **ordinador per ordinador** acabant de quadrar Codespaces i subscripcions—; i només llavors entra al **mètode del context**. Així no perds temps mort: el suport tècnic individual el fas mentre la resta presenta. El **cor conceptual** és **repo + local/remot + commit/push/pull** (Bloc D) i el **mètode del context** (Bloc E). Si has de sacrificar res, sacrifica **publicar avui mateix**.

| # | Bloc | Min | Acumulat |
|---|---|---:|---:|
| A | Obertura + **crear compte de GitHub i primer repositori** (amb repo/branca) | 25 | 25 |
| B | **Obrir el Codespace**, conèixer l'entorn i l'agent, i comprovar que tothom el té obert | 20 | 45 |
| C | **Presentacions dels alumnes** (i tu vas quadrant Codespaces/subscripcions un per un) | 30 | 75 |
| — | Pausa curta | 5 | 80 |
| D | Com funciona GitHub: **local vs remot + commit/push/pull** | 15 | 95 |
| E | **El mètode del context** (els dos `.md`) | 20 | 115 |
| F | Construir amb l'agent + **commit/push** | 20 | 135 |
| G | Publicar a la manera de sempre (copiar a Apps Script → `/exec`) | 10 | 145 |
| H | Tancament i pont a la Fase 4 | 5 | 150 |

**Total: 150 minuts.**

>  **Per què muntar abans de presentar:** així, durant les **presentacions (Bloc C)**, pots anar ordinador per ordinador resolent els Codespaces que no obren i les subscripcions de l'agent, sense aturar la classe. 30 min de presentacions dona per a uns **5–6 alumnes** (5 min + preguntes); si en tens més, fes-ne una **selecció** o **redueix a 3–4 min**.

---

### Bloc A — Obertura + crear compte de GitHub i primer repositori (25 min)

> Avui **muntem primer i presentem després**: així, mentre la classe presenta (Bloc C), tu pots anar resolent Codespaces i subscripcions **un per un** sense aturar ningú. Comença amb energia i ves de pressa cap a «tothom amb el repositori creat».

- **Obre amb orgull:** «Veníeu d'una Sessió 2 on heu après a **fer créixer i arreglar** la vostra app. Avui us donem una **casa de programador** per endreçar-les: **GitHub**. I un secret: les bones apps surten d'un **bon context**, no de la màgia.»
- **Dues paraules abans de crear res** (sense entretenir-t'hi):
  - **Repositori (repo):** «la **carpeta del teu projecte**, però amb **memòria** i una **còpia segura al núvol**.» Una app = un repo (com «una app, un full nou», ara «una app, un repo nou»).
  - **Branca:** una sola frase: «una **línia de treball**; **avui treballem tots a la principal, `main`**. Les branques de debò són de la Fase 4.»
- **Crear el compte (tots junts, tu a la pantalla):**
  1. **github.com → Sign up.** Demanarà **correu, contrasenya i nom d'usuari** (recomana'l senzill i sense dades sensibles; el veu tothom).
  2. **Verificació de correu** — el **primer encallament del dia**: «Obriu una altra pestanya, mireu el correu, copieu el codi.» Dona temps i circula.
  3. Sobre el **pla**: «el **gratuït** ja ens serveix per a tot el d'avui.» **No prometis** detalls de plans (Copilot, hores de Codespaces): canvien; ja ho comprovareu quan toqui.
- **Crear el primer repositori:** botó **New** → **nom** (p. ex. `la-meva-app`) → marcar **«Add a README»** → **Create**. «Aquesta pàgina de github.com és la **còpia oficial (remota)**; ara hi entrarem a treballar amb el Codespace.»

>  Si algú **ja té compte**, perfecte: que vagi directe a **crear el repositori** i ajudi un company amb el registre.

### Bloc B — Obrir el Codespace, conèixer l'entorn i l'agent (20 min)

> El segon punt que s'encalla: el Codespace **triga a obrir-se** el primer cop. Avisa'n: «carrega un parell de minuts; és **normal**, no toqueu res.» **L'objectiu del bloc és que TOTHOM tingui el Codespace obert** abans de les presentacions.

1. Al repo, botó verd **Code → Codespaces → Crear codespace** (a `main`). S'obre el **VS Code al navegador**. Si demana confirmació, accepta les opcions per defecte.
2. **Tour ràpid** (sense aclaparar): l'**explorador de fitxers** a l'esquerra; la icona de **Source Control** («aquí farem commit i push, recordeu on és»); i la icona del **xat / agent** («aquí parlem amb la IA des de dins de l'editor»).
3. **Conèixer l'agent (clau i AGNÒSTIC d'eina):** que cadascú obri el seu xat segons el que tingui (**Copilot, Claude, ChatGPT/Codex, Antigravity…** o el **free tier**). Pot demanar **iniciar sessió**: que ho facin.
4. **Missatge central:** «Cadascú té un agent diferent, i **tant és**. El que farem és **sempre el mateix: COPIAR I ENGANXAR**. L'eina canvia; el **mètode** no.»
5. **Passa llista:** «Qui té el Codespace obert amb el xat funcionant?» **Apunta qui té problemes** — els resoldràs durant les presentacions.

> Si a algú no li va l'agent o no té cap subscripció, **no bloquegis la classe**: free tier, o enganxar els prompts a **Gemini en una pestanya** i copiar el resultat al Codespace (Pla B).

### Bloc C — Presentacions dels alumnes (i tu quadres Codespaces) (30 min)

> **Doble objectiu:** que **gaudeixin ensenyant** la seva app **i** que tu **acabis de quadrar** els Codespaces i subscripcions que han quedat coixos al Bloc B, **un per un, sense aturar la classe**.

- Cada alumne presenta **la seva millor app de la Sessió 2** en ~5 min, amb el guió que ja coneixen: **què fa · ensenyar-la funcionant · com la van fer amb la IA · què va petar i com ho van arreglar · què hi afegirien.** 1–2 min de preguntes.
- **El teu rol (mentre presenten):** cronometra amb suavitat i celebra cada app, però **circula** pels ordinadors de qui tenia problemes i deixa'ls el Codespace/agent a punt. Quan acabin les presentacions, **tothom ha d'estar preparat** per continuar.
- **Connecta** alguna presentació amb el tema d'avui: «en Joan ja té tres apps; ara aprendrem a tenir-les **endreçades** i a construir-les amb un **bon context**.»
- **Pont cap a la segona meitat:** «Ja tenim la casa (GitHub) i l'editor (Codespace) a punt. Ara entenem com es parla amb GitHub i descobrim el **mètode del context**.»

*(Pausa curta de 5 min després de les presentacions.)*

### Bloc D — Com funciona GitHub: local vs remot + commit/push/pull (15 min)

> **El cor conceptual del dia, i ara té tot el sentit:** ja tenen el Codespace obert (la còpia **local**) i d'aquí a un moment hauran de **pujar** el codi. No el corris.

- **Local vs remot — la idea clau.** Fes el dibuix a la pissarra:
  - **LOCAL** = la còpia on **treballes** (el **Codespace**).
  - **REMOT** = la còpia **oficial** a **GitHub.com**, segura i compartible.
  - «Treballes a la local; quan vols, **l'envies** a la remota.»
- **El cicle de tres paraules** (escriu-les grosses):
  - **COMMIT** = «**desar** un punt amb una nota» («he afegit la pantalla d'inici»). És **local**.
  - **PUSH** = «**pujar** els commits a GitHub» (local → remot).
  - **PULL** = «**baixar** el que hi ha a GitHub» (remot → local). Avui gairebé no el faran servir, però han de saber què és per quan treballin en més d'un lloc o amb algú.

>  **Analogia útil:** commit = fer una foto del teu treball amb un títol; push = enviar-la a l'àlbum compartit del núvol; pull = descarregar-te l'àlbum per tenir-lo igual. La còpia local és el teu telèfon; la remota, l'àlbum al núvol.

### Bloc E — El mètode del context (els dos `.md`) (20 min)

> **El segon cor del dia, i el missatge més valuós del curs:** els bons resultats no surten d'una eina màgica, surten d'un **bon context**. Aquí ho fan tangible.

- **La idea:** «Quan comencem un projecte de zero, **abans de demanar res**, escrivim **dos documents** que expliquen què volem. L'agent els llegeix i construeix molt millor.»
- Que creïn al repo (dins el Codespace) una **carpeta `context/`** amb dos fitxers:
  1. **`que-ha-de-fer.md` — el producte (el QUÈ).** Què ha de fer l'app, per a qui, quines dades guarda, quines pantalles té. **Recomanació:** que el preparin amb **Gemini** (descrivint la seva idea en català) i enganxin el resultat aquí. És el document de **negoci**, sense tecnicismes.
  2. **`arquitectura.md` — el tècnic (el COM).** Aquí fixem les **regles de casa** perquè l'agent no es desviï:
     - Segueix sent una app d'**Apps Script** amb **dos fitxers** (`Codi.gs` = motor, `Index.html` = cara) **+ un full de Google** com a rebost.
     - **Comentaris en català.**
     - **Sense frameworks** (res de React, Angular, llibreries externes): HTML, CSS i JavaScript senzills.
     - (Recordatori) Es publica copiant a Apps Script, no des de GitHub.
- **Per què dos fitxers i no un:** «El **QUÈ** el pot escriure qualsevol (és la teva idea). El **COM** són les regles tècniques que fan que surti com el sap fer aquest curs. Separats, es mantenen i es reutilitzen.»
- Tu, a la pantalla, ensenya els **teus dos `.md` d'exemple** (Annex B) perquè copiïn l'estructura i adaptin el contingut a la **seva** app.

>  **Frase per repetir:** «El secret no és l'eina, és el **context**. Una IA amb bon context fa una bona app; sense context, endevina.»

### Bloc F — Construir amb l'agent + commit/push (20 min)

1. **La instrucció màgica.** Al xat de l'agent, escriure: **«Llegeix la carpeta `context/` i construeix l'app que s'hi descriu. Torna'm els dos fitxers: `Codi.gs` i `Index.html`.»**
2. **L'agent torna els dos fitxers.** Que els **desin al repo** (creant `Codi.gs` i `Index.html` a l'explorador, o deixant que l'agent els creï). Comprova en veu alta: «Heu de veure els **dos fitxers** a l'esquerra.»
   - Si l'agent **no "veu"** la carpeta `context/`, **enganxa-li el context directament** al xat (el contingut dels dos `.md`). «A vegades l'agent no llegeix els fitxers sols; llavors li enganxem el text. Recordeu: el mètode és **copiar i enganxar**.»
   - Si la resposta **es talla a mitges**, demanar **«continua»** o **«torna'm el fitxer sencer»**.
3. **Desar a GitHub — commit + push** (el moment que connecta amb el Bloc D):
   - Obrir el **panell de Source Control** (la icona del lateral).
   - Escriure un **missatge de commit** curt (p. ex. «Primera versió de l'app») i fer **Commit**.
   - Després **Sync / Push** (pujar) per enviar-ho a **GitHub.com**.
   - **Comprovació d'or:** «Aneu a github.com, recarregueu el repo: **els vostres fitxers hi són**. Acabeu de passar de la còpia **local** a la **remota**.»  Aquí es fa visible tot el Bloc D.

> Si el panell de commit els marca «branca `main`», perfecte: és on han de ser. **No** els facis crear branques.

### Bloc G — Publicar a la manera de sempre (10 min)

> **Recordatori important:** avui **NO** publiquem des de GitHub. **NO** fem servir GitHub Pages ni clasp (això és la Fase 5). Publiquem **exactament com sempre**.

1. Obrir el **full de Google** de la seva app → **Extensions → Apps Script**.
2. **Copiar** el contingut de `Codi.gs` del Codespace i enganxar-lo al fitxer `Codi.gs` d'Apps Script (substituir-ho tot). Igual amb **`Index.html`** (recordar: el fitxer HTML s'ha de dir **exactament `Index`**).
3. **Publicar:** **Implementar → Aplicació web** (la 1a vegada, **Nova implementació**; si és una app que ja existia, **Gestionar implementacions → llapis → Versió nova**). Copiar el **`/exec`** i provar-lo.
4. **Tanca la idea:** «El codi viu **endreçat a GitHub**; per **publicar**, de moment encara el **copiem a Apps Script**. A la Fase 5 farem que es publiqui **sol** des de GitHub.»

> Si vas just de temps, aquest bloc és el **sacrificable**: que la publicació la facin a casa. El que **no** pot faltar és que el codi estigui **commitejat i pujat** a GitHub.

### Bloc H — Tancament i pont a la Fase 4 (5 min)

- **Checklist en veu alta:**
  - [ ] Tinc **compte de GitHub** i **un repositori**.
  - [ ] Sé què és **local vs remot** i he fet **commit + push** (els fitxers són a github.com).
  - [ ] Tinc la carpeta **`context/`** amb **`que-ha-de-fer.md`** i **`arquitectura.md`**.
  - [ ] L'agent ha **construït** a partir del context i tinc els **dos fitxers**.
  - [ ] (Si ha donat temps) He **publicat com sempre** a Apps Script (`/exec`).
- **Pont a la Fase 4** (secció 7) en una frase il·lusionant.
- «A partir d'ara, aquest flux —**context → agent → commit/push → publicar**— és el vostre flux per a **apps noves i per a les que ja teniu**.»

---

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

| Símptoma | Causa | Solució ràpida |
|---|---|---|
| No poden acabar el registre de GitHub | **Verificació de correu** (codi) o test anti-robots pendent | Obrir el **correu** en una pestanya, copiar el **codi**, completar el test. Dona temps; és el coll d'ampolla del Bloc A. |
| El Codespace **triga molt** o sembla penjat | Primera obertura: està preparant l'entorn al núvol | **Esperar 1–2 min sense tocar res.** Avisa'n abans. Si no obre, vegeu Pla B (editor de github.com). |
| El Codespace **demana confirmació**/opcions en obrir | Diàleg inicial de configuració | **Accepta les opcions per defecte** i continua. |
| No troben on fer **commit/push** | No localitzen el **panell de Source Control** | Assenyalar la **icona de control de versions** al lateral esquerre. Recorda-la al Bloc B abans de necessitar-la. |
| Fan commit però «no apareix a GitHub» | Han fet **commit** (local) però **no push** | Després del commit, **Sync / Push** per pujar a la remota. Recarregar github.com per comprovar-ho. |
| Confonen **LOCAL i REMOT** («ho he desat, on és?») | Idea encara fràgil | Tornar al dibuix: local = Codespace (on treballes); remot = github.com (oficial). **Push** porta de l'un a l'altre. |
| L'agent **no "veu"** els fitxers del `context/` | Algunes eines no llegeixen el repo soles | **Enganxar-li el context** (el text dels dos `.md`) directament al xat. El mètode és copiar-enganxar. |
| La resposta de l'agent **es talla a mitges** | Resposta llarga truncada | Demanar **«continua»** o **«torna'm el fitxer sencer»**. Verificar que cada fitxer té el **final**. |
| L'app no es publica / no canvia res | Esperen publicar **des de GitHub** | **Es publica com sempre:** copiar el codi a **Apps Script** i **Implementar → Aplicació web** (`/exec`). GitHub és per **desar el codi**, no per publicar (encara). |
| L'HTML peta en publicar a Apps Script | El fitxer HTML **no es diu `Index`** | A Apps Script, el fitxer HTML ha de dir-se **exactament `Index`**. |
| No té cap agent / cap subscripció | Sense pla de pagament | Provar el **free tier**, o enganxar els prompts a **Gemini** en una pestanya i copiar el resultat al Codespace. |

> **Truc de prevenció:** abans del Bloc F, fes que tothom localitzi en veu alta **dues coses**: la **icona del xat de l'agent** i la **icona de Source Control**. Estalvia la meitat dels encallaments del dia.

---

## 5. Pla B de contingències

### Si Codespaces va lent o no obre
- **Treballa a l'editor de fitxers de github.com directament:** des del repo es poden **crear i editar fitxers** (la carpeta `context/`, `Codi.gs`, `Index.html`) i fer **commit** sense Codespace. Es perd l'agent integrat, però el flux **context → fitxers → commit → publicar a Apps Script** es manté sencer (l'agent es fa servir en una **pestanya a part** i s'enganxa el resultat).
- **Últim recurs, en local:** si algú ja té un editor instal·lat, pot clonar el repo i treballar-hi. **No ho muntis en directe per a tota la classe**: és per a casos puntuals.

### Si algú no té cap subscripció d'agent
- Que faci servir el **free tier** que tingui disponible, o que **enganxi els prompts a Gemini** (que ja domina de les sessions anteriors) en una pestanya i copiï la resposta al Codespace/GitHub. **El context i el commit/push són iguals**; només canvia on parla amb la IA.

### Si vas curt de temps

| Prioritat | Bloc | Decisió |
|---|---|---|
|  **Innegociable** | Entendre **repo + local/remot + commit/push/pull** (Bloc D) i fer-ho una vegada (Bloc F) | És el concepte central del dia. |
|  **Innegociable** | El **mètode del context** (Bloc E): els dos `.md` | El missatge més valuós: bon context = bons resultats. |
|  Sacrificable | **Publicar avui mateix** (Bloc G) | Que la publicació a Apps Script la facin **a casa**; avui n'hi ha prou amb tenir el codi a GitHub. |
|  Sacrificable | **Presentacions** (Bloc C) | Si hi ha molts alumnes, fes-ne una **selecció** o escurça a 3 min. |

> Si vas MOLT just: tothom surt amb **compte + repo + un commit/push fet** i **la carpeta `context/` amb els dos `.md`**. La construcció i la publicació, a casa. **Objectiu mínim complert.**

---

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

- **No el converteixis en una classe de Git avançat.** Res de branques de debò, ni `merge`, ni pull requests, ni resolució de conflictes. **Avui tots a `main`.** Tot això és **Fase 4**. Avui només: **repo, local/remot, commit, push, pull**.
- **No facis del Codespace una classe de VS Code.** Ensenya només **tres punts**: explorador de fitxers, xat de l'agent i Source Control. Prou.
- **No defensis cap eina d'IA concreta.** El flux és **AGNÒSTIC**: «sigui quin sigui el teu agent, el mètode és **copiar i enganxar**.» Ningú s'ha de sentir fora per no tenir tal o tal subscripció.
- **Insisteix que el secret és el CONTEXT, no l'eina.** És el missatge que s'han d'endur. Repeteix-lo.
- **Recorda que es publica COM SEMPRE.** Copiar a Apps Script i `/exec`. **No** GitHub Pages, **no** clasp (Fase 5). Si no ho dius clar, esperaran que GitHub publiqui sol i es frustraran.
- **Fes visible el local → remot.** El moment «recarrega github.com i veuràs els teus fitxers» és el que fixa tot el Bloc D. No te'l saltis.
- **Normalitza les esperes** (verificació de correu, Codespace que carrega). No són errors; són part del procés. Si tu estàs tranquil, ells també.

---

## 7. Ponts amb la resta del curs

### D'on venen — Sessió 2 (apps que saben créixer i arreglar-se)
- Ja **dominen el bucle** iterar → verificar → depurar, i han **fet créixer** la seva app amb millores reals (editar/esborrar, cercar, resum/gràfic, foto a Drive, disseny), seguretat i una presentació.
- Avui **no canviem aquella destresa**: la portem a una **casa millor**. El codi que abans vivia escampat al Drive ara té un **repositori** propi, i la manera de demanar-lo a la IA passa de prompts solts a un **mètode amb context**.

### Cap a on van — Fase 4 i Fase 5
- **Fase 4 (online): treballar amb branques i pull requests.** Deixaran de tocar `main` directament: crearan una **branca** per a cada canvi, obriran un **pull request**, faran que la **IA els revisi** el canvi abans de fusionar-lo, i en tastaran el **treball en equip**. Tot al navegador, sense instal·lar res. El que avui hem deixat en una frase, serà el pa de cada dia.
- **Fase 5 (presencial): automatitzar i col·laborar de debò.** Faran que l'app **es publiqui sola des de GitHub** amb **clasp** (s'acaba el copiar a Apps Script a mà) i treballaran **en equip** sobre un repositori compartit, amb `main` **protegida**.
- Deixa'ls amb ganes: «Avui heu donat una **casa** al vostre codi i un **mètode** per construir-lo. A la propera fase aprendreu a treballar-hi **sense trencar res** (branques i pull requests); i més endavant, la casa **es publicarà sola** i hi treballareu **en equip**.»

---

### Annex A — Frases per a la pissarra

- **«Una app, un repo nou.»** (l'hereu de «una app, un full nou»)
- **«LOCAL = on treballes (Codespace). REMOT = la casa oficial (GitHub).»**
- **«Commit = desar amb nota. Push = pujar. Pull = baixar.»**
- **«Avui tots a `main`. Les branques, a la Fase 4.»**
- **«El secret no és l'eina, és el CONTEXT.»**
- **«Dos documents: què ha de fer (el producte) i arquitectura (el tècnic).»**
- **«Sigui quin sigui el teu agent, el mètode és copiar i enganxar.»**
- **«Es publica COM SEMPRE: copiar a Apps Script → /exec.»**
- **«Recarrega github.com: els teus fitxers hi són. Això és el push.»**

---

### Annex B — Els dos documents de context (model d'exemple)

> Tingues-los a punt en fitxers de text per ensenyar-los i, si cal, enganxar-los. Adapta el contingut a l'app de cada alumne.

**`context/que-ha-de-fer.md` (el producte — el QUÈ)**

```markdown
# Què ha de fer l'app

## Idea
Una app per portar un diari del son: cada nit anoto a quina hora me'n vaig
al llit, a quina hora em llevo i com he dormit, i veig la mitjana de la setmana.

## Per a qui
Per a mi (ús personal). Només jo hi he d'accedir.

## Dades que guarda (columnes del full)
- Data
- Hora de dormir
- Hora de llevar-me
- Hores dormides
- Qualitat (1 a 5)
- Notes

## Pantalles
- Un formulari per afegir la nit d'avui.
- Una llista de les últimes nits.
- Un resum amb la mitjana d'hores i de qualitat de la setmana.
```

**`context/arquitectura.md` (el tècnic — el COM)**

```markdown
# Arquitectura

- App d'Apps Script amb DOS fitxers:
  - `Codi.gs` = el motor (backend).
  - `Index.html` = la cara (frontend).
- El rebost de dades és un FULL de Google (una pestanya, capçaleres a la fila 1).
- Comentaris del codi EN CATALÀ.
- SENSE frameworks ni llibreries externes: HTML, CSS i JavaScript senzills.
- La comunicació cara ↔ motor es fa amb google.script.run.
- NO es publica des de GitHub: el codi es copia a Apps Script i es publica
  amb Implementar → Aplicació web (/exec). El desplegament automàtic és per a la Fase 5.
```

> **Instrucció per a l'agent (per copiar-enganxar):**
> «Llegeix la carpeta `context/` i construeix l'app que s'hi descriu seguint l'arquitectura. Torna'm els dos fitxers sencers: `Codi.gs` i `Index.html`.»