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ó

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.

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

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

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È)

# 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)

# 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.»

Font editable: sessio_3/guia_professor_sessio3.md · aquesta pàgina web es genera automàticament des del Markdown.