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ó

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.

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

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

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

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