Guia del professor — Sessió 2

«Crear apps amb IA, des de zero»

Fes créixer la teva app (i sàpigues arreglar-la). Avui no comencem de zero: partim de l'app que cada alumne ja va publicar a la Sessió 1. L'objectiu doble és que dominin el bucle iterar → verificar → depurar (la destresa central de programar amb IA) i que afegeixin millores reals. Tot 100 % al navegador, amb Gemini, i sempre sobre el mateix projecte i full ja publicats.

1. Fitxa de la sessió

Com funciona aquesta sessió (important: ha canviat)

A diferència de la Sessió 1 (presencial), la Sessió 2 és autònoma: l'alumne la fa sol, online, amb l'HTML interactiu que el guia pas a pas. El teu paper canvia:

• Abans: envia'ls l'HTML i deixa clar el termini (p. ex. «tens fins a la propera classe»). Recorda'ls que necessiten la seva app de la Sessió 1 publicada.
• Durant: dona suport asíncron (xat de classe, correu) per als encallaments típics (taula de la secció 4). El més probable: el permís de Drive de la foto i l'oblit de la columna «Foto».
• El lliurament: cada alumne prepara una explicació de 5 minuts de la seva millor app (l'HTML ja els dona el guió: què fa · ensenyar-la funcionant · com la van fer amb la IA · què va petar i com ho van arreglar · què hi afegirien).
• La pròxima presencial comença amb aquestes presentacions: 5 min per alumne + 1-2 de preguntes. És el reforç social que fixa l'aprenentatge i fa que vegin idees dels altres. Reserva-hi temps abans d'entrar a la Sessió 3.

Nou en aquesta versió del material: un mòdul de Paginació (carregar dades de mica en mica) i una secció de Seguretat (6 hàbits + un prompt de revisió de seguretat per a Gemini), perquè comencin a pensar en privadesa i rendiment.

Què s'enduen (resultats d'aprenentatge)

• Saber trencar i arreglar una app: llegir l'error, enganxar-lo amb el codi al prompt de depuració i aplicar la solució de Gemini.
• Entendre que «trencar i arreglar» és NORMAL: és el cor de fer apps amb IA, no un fracàs.
• Tenir la seva app millorada de veritat: editar/esborrar files, cercar, un resum o gràfic, una foto al Drive, o un disseny nou.
• Reforçar la regla d'or: millorar = mateix projecte + enganxar codi nou + «Versió nova» (mateix enllaç).
• (Els valents) Veure el pilar d'emmagatzematge fet realitat: una foto va al Drive, i el full només en guarda l'enllaç.

Requisits previs (comprova'ls a l'inici)

1. App de la Sessió 1 publicada, amb el seu enllaç /exec que funciona. Sense això, no es pot fer créixer res.
2. Compte PERSONAL de Google (@gmail.com o personal). No un compte d'empresa/Workspace.
3. Carpeta del curs al Drive amb el full d'aquella app a dins.

Si algú no té app de la Sessió 1 (va faltar, no la va acabar), no t'aturis: que faci un exemple ràpid ara (vegeu Pla B, secció 5). Però l'ideal és que avui es treballi sobre la seva app.

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

Dedica-hi 30–40 min. Avui hi ha un pas delicat (la foto/Drive): si no l'has provat tu, no l'ensenyis en directe sense xarxa.

• [ ] Tingues LA TEVA app de la Sessió 1 a punt (recomanat el ** Diari del son), publicada i amb 3–4 files** de dades, perquè la demo del bucle i de les millores es vegi rica.
• [ ] Assaja la demo «trenca i arregla» sencera, cronometrada: canvia el nom del fitxer Index (o esborra una línia) → comprova que l'app peta → copia el prompt de depuració amb l'error + el codi → Gemini torna els dos fitxers → republica amb Versió nova → comprova que torna a funcionar. Si la pots fer en 8 min, la faràs bé en directe.
• [ ] PROVA EL FLUX DE LA FOTO de cap a cap: afegeix la columna «Foto» a mà al full, demana la millora a Gemini, enganxa, publica i accepta el PERMÍS EXTRA d'accés al Drive (Configuració avançada → Permet). Comprova que la foto puja al Drive i que al full s'hi desa l'enllaç, no la imatge. Aquest és el pas que més s'encalla: ves-hi preparat.
• [ ] Obre Gemini en català (https://gemini.google.com/app?hl=ca-ES) i fes una passada als prompts de millora de l'HTML interactiu, perquè sàpigues què sortirà.
• [ ] Deixa l'editor d'Apps Script de la demo obert en una pestanya, amb els dos fitxers a la vista i el menú Implementar localitzat.
• [ ] Comprova el projector i el zoom (125–150 % al navegador). Avui es llegiran missatges d'error: han de veure's bé.
• [ ] Prepara el missatge tranquil·litzador del dia: «Avui trencarem l'app a propòsit. És normal i és bo: així s'aprèn a arreglar-la.»

3. Minutat bloc a bloc (~150 min)

Com que la sessió és autònoma, aquest minutat és el temps orientatiu que hi dedicarà l'alumne (al seu ritme, no un rellotge de classe). El cor de tot és el bloc del bucle «trenca i arregla» (Blocs C–D): si algú va molt just, que faci com a mínim el bucle + una millora + la presentació. La foto/Drive, la paginació i el disseny són els primers a cedir.

Si en algun moment fas la Sessió 2 presencial (no online), aquest mateix minutat et serveix de guió: tu fas la demo en directe dels Blocs C i G i ells repliquen.

Total: 150 minuts.

Bloc A — Obertura + repàs llampec de la Sessió 1 (10 min)

• Comença per l'orgull. Obre la teva app publicada i pregunta: «Qui té encara viu l'enllaç de la Sessió 1?» Que l'obrin al mòbil. Reconnecta'ls amb el que ja tenen.
• Repàs llampec (2 frases, sense teoria nova): «La vostra app és cara (Index.html) → motor (Codi.gs) → rebost (el full). Avui la fem créixer i aprenem a arreglar-la.»
• Recorda la regla d'or de la Sessió 1, que avui és el fil de tota la classe: Gemini no edita fitxers; per millorar enganxem codi nou al MATEIX projecte i tornem a publicar amb «Versió nova» (mateix enllaç).
• Comprova els 3 requisits en veu alta. Detecta ara qui no té app de la Sessió 1 i activa el Pla B per a aquesta persona.

Bloc B — Pas 0: «Quina app fas créixer?» (10 min)

• A l'HTML interactiu, cada alumne tria la seva app: un dels exemples (Diari del son, Despeses, Hàbits, Rebost, Inscripcions, Diari d'ànim), «la meva pròpia», o importa l'app de la Sessió 1.
• Que defineixin títol i columnes tal com els tenen al seu full. Això personalitza tots els prompts de la sessió: si les columnes no coincideixen amb el full real, els prompts sortiran desajustats.
• Insisteix: «Posa exactament les capçaleres del teu full, en el mateix ordre.» Aquest minut estalvia molts errors després.
• Tu, a la pantalla, fes el Pas 0 amb la teva app de demo perquè el segueixin.

Bloc C — DEMO en directe: «Trenca i arregla» (20 min) EL MOMENT ESTRELLA

Aquí ensenyes la destresa central del curs. No vagis ràpid. Pensa en veu alta tota l'estona.

1. Mostra el cicle (l'HTML interactiu té el diagrama): prompt → llegir → provar → arreglar → re-promptejar. «Programar amb IA és donar voltes a aquest cercle. No és escriure-ho bé a la primera.»
2. Trenca-la a propòsit. Tria UNA de les dues, davant d'ells: - Canvia el nom del fitxer Index (per exemple a index o Inici), o - Esborra una línia del motor (Codi.gs). Desa i republica amb Versió nova.
3. Obre l'app i deixa que PETI. Que vegin la pantalla en blanc o el missatge d'error. Digues: «Perfecte. Això havia de passar. Ara l'arreglem.»
4. LLEGEIX L'ERROR EN VEU ALTA abans de tocar res. Aquest hàbit és or: «Què ens diu? On? No cal entendre-ho tot; busquem pistes.»
5. Copia el prompt de depuració de l'HTML interactiu: hi enganxes el missatge d'error + el codi dels dos fitxers. Envia'l a Gemini.
6. Gemini torna els DOS fitxers sencers. Substitueix-los del tot (motor i cara), desa, i republica amb Versió nova (mateix enllaç).
7. Comprova que torna a funcionar. «Acabem de fer el que fa un programador cada dia.»

Missatge per repetir: «Trencar i arreglar és NORMAL. El qui programa amb IA no és el qui no s'equivoca, és el qui sap tornar a arreglar-ho.»

Bloc D — Pràctica del bucle: cadascú trenca i arregla la SEVA app (30 min)

• Ara cadascú fa l'exercici «Trenca-la i arregla-la» sobre la seva app, seguint l'HTML interactiu.
• Passos (a la pantalla tota l'estona): trenca (canvia el nom d'Index o esborra una línia) → republica → comprova que peta → llegeix l'error → copia el prompt de depuració amb error + codi → enganxa els dos fitxers de Gemini → Versió nova → comprova.
• El teu rol: circula, no teclegis tu. Quan algú s'encalli, assenyala'l cap a l'error i pregunta «què hi diu?». Que ho resolguin ells: és l'objectiu del bloc.
• Recorda en veu alta els dos errors típics: enganxar només un dels dos fitxers i crear un projecte/enllaç nou sense voler (s'ha de quedar al MATEIX projecte i fer Versió nova).

Pausa curta (5 min). Bon moment per resoldre cues individuals i comprovar que tothom ha completat el bucle abans de passar a millores.

Bloc E — Millora 1 recomanada: Editar/esborrar o Cercar (25 min)

Recomana TU la primera millora. Les més senzilles i segures són ** Editar i esborrar files i ** Cercar i filtrar: no demanen permisos nous ni columnes noves. Comença per una d'aquestes perquè tothom tingui un èxit ràpid.

Cada millora de l'HTML interactiu té sempre la mateixa estructura de 4 passos; treballa-la així:

1. Què aconseguiràs — llegeix-ho en veu alta perquè sàpiguen el resultat.
2. Demana-ho a Gemini — el botó copia el prompt ja personalitzat amb les seves columnes; enganxar i enviar.
3. Aplica el codi nou — Gemini torna els dos fitxers sencers; substituir-los del tot al mateix projecte; desar.
4. Republica i comprova — Implementar → Gestionar implementacions → llapis → Versió nova → Implementar; obrir el /exec i provar.

• Objectiu mínim del bloc: que tothom tingui una millora funcionant i republicada.

Bloc F — Millora 2 a triar: Resum/gràfic, Foto a Drive o Disseny (30 min)

Que triïn segons el ritme. Orienta'ls:

• ** Resum i gràfic** (HTML/CSS, sense llibreries) — visual i satisfactori, sense permisos nous. Bona segona millora per a la majoria.
• ** Retocar el disseny** (color/lletra/fons) — la més fàcil i divertida; perfecta per als qui van més lents o volen un premi ràpid.
• ** Pujar una foto a Drive — la més potent, però la més DELICADA. Recomana-la només als qui ja tinguin una millora feta i vagin sobrats. Avisa'ls dels 3 punts crítics ABANS de començar: 1. Afegir a mà la columna «Foto» al full (sense ella, no hi ha on desar l'enllaç). 2. En publicar, sortirà un PERMÍS EXTRA d'accés al Drive → Configuració avançada → Permet. És normal i segur. 3. La foto NO va dins el full: va al Drive (amb DriveApp) i al full només s'hi guarda l'enllaç/URL. Aquí és on es veu el pilar d'emmagatzematge** de la Sessió 0 fet realitat.

Si la foto se't complica amb algú, no bloquegis tota la classe: que aquella persona faci Disseny o Resum i deixeu la foto per a casa.

Bloc G — Republica i comparteix (12 min)

• Que tothom faci l'última Versió nova i copiï el seu enllaç /exec.
• Obrir-lo al mòbil i enviar-lo a algú (un company, un familiar). És el moment de més satisfacció: la millora és real i compartible.
• Recorda l'accés segons el tipus d'app: «Només jo» per a diaris personals (son, ànim, despeses, hàbits, rebost); «Qualsevol» per a formularis públics (inscripcions). Que comprovin que el seu és el correcte.

Bloc H — Tancament, checklist i pont (8 min)

• Checklist de l'HTML interactiu, per comprovar en veu alta:
• [ ] He completat el bucle: he trencat i arreglat la meva app.
• [ ] He afegit com a mínim una millora real.
• [ ] He republicat amb «Versió nova»: el mateix enllaç segueix funcionant.
• [ ] L'he provat al mòbil i l'he compartit amb algú.
• Galeria d'enllaços v2: que 2–3 alumnes ensenyin la seva app millorada a la pantalla. Reforça l'orgull.
• Pont cap a la Sessió 3 (secció 7) en una frase.

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

Truc de prevenció: abans de qualsevol publicació, fes que tothom miri la barra lateral i digui «tinc Codi.gs i Index.html» i, si toca foto, «tinc la columna Foto al full». Evita la majoria d'encallades del dia.

5. Pla B de contingències

Si algú NO té app de la Sessió 1

• Que importi/triï un exemple ràpid al Pas 0 i el publiqui en pocs minuts (el Diari del son és el més curt i sense permisos), i a partir d'aquí segueixi la classe normal. No el deixis sense base sobre la qual treballar.
• Si no et dona temps ni a això, aparella'l amb un company que sí que en tingui, perquè faci el bucle i una millora sobre l'app del company.

Si Gemini va lent o cau

• Té a punt en fitxers de text la versió arreglada i una versió amb una millora (per exemple, editar/esborrar) del Diari del son, per repartir i que tothom pugui practicar enganxar + Versió nova encara que Gemini no respongui.
• Anima'ls a reenviar el prompt o esperar; sol ser temporal. En cas extrem, genera tu a la pantalla i que copiïn el resultat.

Si vas curt de temps

Si vas MOLT just: tothom fa el bucle (Blocs C+D) i una millora senzilla (Bloc E), republica i comparteix. Objectiu complert.

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

• No expliquis el codi línia a línia. L'objectiu és el bucle (prompt → llegir → provar → arreglar) i saber demanar, enganxar i republicar, no la sintaxi.
• No tractis l'error com un fracàs. Tot el contrari: normalitza que «trencar i arreglar» és NORMAL i és el cor de programar amb IA. Si tu et poses nerviós amb un error, ells també.
• No deixis que enganxin l'error sense llegir-lo. Insisteix a llegir l'error abans d'enganxar-lo: és l'hàbit més valuós que s'enduen.
• No teclegis tu al seu ordinador. Assenyala l'error i deixa que el corregeixin sols.
• Repeteix «mateix projecte + Versió nova». És on més es confonen (creen projectes i enllaços nous sense voler).
• Avisa SEMPRE abans del permís de Drive. Que la pantalla nova no els agafi per sorpresa.
• Celebra cada app que torna a funcionar després d'arreglar-la i cada millora republicada. El reforç positiu amb públic principiant val més que cap explicació.

7. Ponts amb la resta del curs

D'on venen — Sessió 1 (la primera app)

• Cada alumne ja va construir i publicar una app web: cara (Index.html) → motor (Codi.gs) → rebost (el full), amb el seu enllaç /exec.
• Ja saben la regla d'or: «una app, un full nou» i que Gemini no edita fitxers; per millorar s'enganxa codi nou al mateix projecte i es torna a publicar amb «Versió nova» (mateix enllaç). Avui ho hem convertit en una destresa: iterar i depurar.

Cap a on van — Sessió 3 (sortim del navegador: GitHub + VS Code)

• La pròxima trobada presencial comença amb les presentacions de 5 min de cada alumne (la seva millor app). Reserva-hi temps abans d'entrar en matèria nova.
• Després fem un gran salt: traurem el codi de l'editor d'Apps Script i el portarem a un editor de programador de debò, el VS Code, però sense instal·lar res: el faran servir dins de GitHub amb Codespaces (s'obre el VS Code al navegador). Allà aprendran a fer servir GitHub, les extensions i a parlar amb la IA des de dins de l'editor.
• Idea de fons: hi ha diverses maneres de programar amb IA (Claude, ChatGPT/Codex, Google Antigravity…), però comencem tots pel mateix camí senzill i sense instal·lacions —GitHub + Codespaces— perquè ningú es quedi enrere.
• Deixa'ls amb ganes: «La vostra app ja sap créixer i arreglar-se. La pròxima, sortireu del navegador i treballareu com els programadors de debò.»

Annex — Frases per a la pissarra

• «Trencar i arreglar és NORMAL: és el cor de programar amb IA.»
• «Llegeix l'error ABANS d'enganxar-lo.»
• «El cicle: prompt → llegir → provar → arreglar → re-promptejar.»
• «Mateix projecte + Versió nova = mateix enllaç.»
• «La foto va al Drive; el full només en guarda l'enllaç.»
• «Sempre els DOS fitxers, sencers.»
• «El codi el pots compartir; els secrets, MAI dins el codi.»
• «Si és per a la gent: que ningú vegi les dades dels altres.»
• «Explica la idea i el camí, no el codi.» (per a la presentació de 5 min)

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