# 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ó | Camp | Detall | |---|---| | **Sessió** | 2 — Fes créixer la teva app (i sàpigues arreglar-la) | | **Format** | **Autònoma (online)** — cada alumne la fa al seu ritme amb l'HTML interactiu durant els dies entre presencials. La pròxima trobada presencial s'obre amb les **presentacions de 5 min** de cada alumne | | **Durada total** | **~150 min** de feina de l'alumne (orientatiu; al seu ritme), repartits en una o diverses estones | | **Objectiu** | (1) Que **interioritzin el bucle de depuració** (trencar i arreglar una app a propòsit) i (2) que **afegeixin com a mínim una millora real** a la seva app, republicada amb el **mateix enllaç** | | **Material de l'alumne** | Portàtil (ideal) o mòbil, compte **personal** de Google, **la seva app de la Sessió 1 publicada**, l'HTML interactiu de la Sessió 2 obert | | **Material teu** | Projector/pantalla, **la teva app de demo ja publicada** (amb un parell de files), Gemini obert en català, l'HTML interactiu, el flux de la foto/Drive **provat** | ### 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. | # | Bloc | Min | Acumulat | |---|---|---:|---:| | A | Obertura + repàs llampec de la Sessió 1 | 10 | 10 | | B | Pas 0: «Quina app fas créixer?» (triar/importar i personalitzar) | 10 | 20 | | C | **DEMO en directe: «Trenca i arregla»** (el moment estrella) | 20 | 40 | | D | **Pràctica del bucle: cadascú trenca i arregla la SEVA app** | 30 | 70 | | — | Pausa curta | 5 | 75 | | E | Millora 1 (recomanada): **Editar i esborrar** o **Cercar/filtrar** | 25 | 100 | | F | Millora 2 (a triar): **Resum/gràfic**, **Foto a Drive** o **Disseny** | 30 | 130 | | G | **Republica i comparteix** (enllaç `/exec`, mòbil, accés) | 12 | 142 | | H | Tancament, checklist i pont a la Sessió 3 | 8 | 150 | **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 | Símptoma | Causa | Solució ràpida | |---|---|---| | En publicar la foto, salta un **avís de permisos nou** i s'espanten | La millora usa **`DriveApp`** → demana un **PERMÍS EXTRA** d'accés al Drive | **Configuració avançada → Permet.** Avisa'ls **abans** de publicar: «Surt una pantalla nova, és normal, accepta.» | | La foto «no es desa» o dona error | **No han afegit la columna «Foto»** al full | Afegir **a mà** la capçalera **«Foto»** a la fila 1, exactament com diu el prompt, i republicar. | | Esperen veure la imatge dins el full i no hi és | La foto va al **Drive**; al full només hi ha **l'enllaç** | És correcte: «La imatge viu al **rebost de fitxers** (Drive); el full en guarda **l'adreça**.» El pilar d'emmagatzematge. | | L'app peta després d'aplicar codi | Han enganxat **només un** dels dos fitxers | Enganxar **els DOS** (motor i cara), sencers. Comprovar la barra de fitxers: Codi.gs **i** Index.html. | | L'enllaç ha canviat / l'antic ja no va | Han fet **«Nova implementació»** en comptes d'actualitzar | Per millorar: **Gestionar implementacions → llapis → Versió nova.** Mateix enllaç. | | La resposta de Gemini sembla **tallada / a mitges** | Resposta llarga truncada | Demanar **«continua»** o **«torna'm el fitxer sencer»**. Verificar que cada fitxer és **complet** (té el final). | | Apliquen el codi i no canvia res | S'han equivocat de **projecte o de full** (en tenen diversos de la Sessió 1) | Comprovar que editen **el projecte de l'app correcta** i el seu full. «Una app, un full nou»: no els barregis. | | Després de trencar-la, no saben per on començar | Salten a enganxar sense **llegir l'error** | Aturar-los: **llegir l'error primer**, després copiar-lo al prompt de depuració amb el codi. | | «Google no ha verificat aquesta app» en republicar | Flux normal d'apps pròpies | **Configuració avançada → Ves al projecte (no verificat) → Permet.** «El codi és teu, és segur.» | > **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 | Prioritat | Bloc | Decisió | |---|---|---| | **Innegociable** | El **bucle de depuració** (Blocs C i D): que **tothom** trenqui i arregli la seva app | És l'objectiu central del dia. No tanquis sense això. | | **Innegociable** | **Una** millora funcionant i republicada (Bloc E) | Editar/esborrar o cercar, la més senzilla. | | Sacrificable | **Segona millora** (Bloc F): resum/gràfic i disseny | Que la facin a casa amb l'HTML interactiu. | | Retallable | ** Foto a Drive** | És la més potent però la més delicada: si vas just, **deixa-la per a casa o per a voluntaris**. | > 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)