Banc de prompts

Tots els prompts del curs, reunits en un sol lloc perquè els puguis reutilitzar sempre que vulguis, a qualsevol sessió i amb qualsevol IA (Gemini, ChatGPT, Claude…). Són els mateixos textos que generen les sessions: si allà tries les teves dades, aquí hi ha els forats.

El mètode és sempre el mateix: copiar i enganxar. Allà on vegis <...>, posa-hi el que toqui.

Com fer un bon prompt (la regla de les 4 peces)

Un bon prompt per fer apps sol tenir aquestes quatre peces:

  1. ** Què ha de fer** — la funció, clara i concreta.
  2. ** Com ha de quedar** — l'aspecte (colors, mòbil, to).
  3. ** Amb què** — l'arquitectura (Apps Script, dos fitxers, sense frameworks).
  4. ** Què vull de tu** — el format de la resposta (els dos fitxers sencers, comentaris en català).

Com més clares les quatre peces, millor surt. Un prompt escàs dona una app escassa.

1. Crear el full (la base de dades) — Sessió 1

Actua com un ajudant que prepara fulls de càlcul de Google i respon en català.

Estic fent una aplicació i necessito crear el seu full de base de dades. Mostra'm una taula que tindrà EXACTAMENT aquestes columnes a la primera fila (els títols han de ser aquests, sense canviar-los ni afegir-ne cap altre): <COLUMNA 1>, <COLUMNA 2>, <COLUMNA 3>….

Detalls:
• Posa-hi només UNA fila d'exemple, amb dades inventades realistes, perquè vegi el format (ja l'esborraré).
• No afegeixis text ni columnes de més.
• Quan me la mostris, recorda'm que la puc passar a Google Sheets fent clic a «Exporta a Sheets» (al menú ⋯ de sota la taula).

2. Construir l'app sencera — Sessió 1

Aquest és el prompt que genera la Sessió 1 amb les teves tries. Omple els forats amb les teves dades i el teu estil.

Actua com un professor de Google Apps Script per a principiants absoluts. Parla'm sempre en català, de manera senzilla i pas a pas, sense donar res per sabut.

OBJECTIU: vull una APLICACIÓ WEB completa (una pàgina amb el seu propi enllaç) connectada a un full de Google que JA tinc. El codi anirà enganxat a l'Apps Script d'aquest mateix full, així que ha de fer servir el full actiu amb SpreadsheetApp.getActiveSpreadsheet() i NO crear cap full nou.

 LA BASE DE DADES (el meu full)
Columnes a la primera fila: <COLUMNES DEL FULL>.

 QUÈ HA DE FER
• Títol visible de la pàgina: «<TÍTOL DE L'APP>».
• Un formulari amb aquests camps: <CAMPS DEL FORMULARI, p. ex. Hores dormides (un número)>.
• Un botó que digui «<TEXT DEL BOTÓ>».
• En prémer el botó: comprova que els camps no estiguin buits, desa una fila nova al full (amb google.script.run) i tot seguit <QUÈ HA DE CALCULAR O MOSTRAR, p. ex. la mitjana dels últims 7 dies i la llista de registres>.
• Després de desar: mostra un missatge de confirmació, buida el formulari i actualitza el que es veu, tot sense recarregar la pàgina.
• Si encara no hi ha dades, que no peti: mostra un missatge amable tipus «Encara no hi ha res; comença a afegir!».

 ESTIL VISUAL (molt important: fes que es vegi així)
• Color principal: <COLOR PRINCIPAL>, aproximadament <CODI DEL COLOR, p. ex. #bf5a32>; fes-lo servir al botó i als detalls.
• Fons: <clar, amb el text fosc / fosc (mode nit), amb el text clar>.
• Cantonades dels botons i els camps: <arrodonides / quadrades> (radi <p. ex. 12px>).
• Personalitat: <minimal / alegre / seriosa> — <UNA FRASE SOBRE LA PERSONALITAT>.
• Tipografia: <TIPOGRAFIA, p. ex. la del sistema, neta i llegible>.
• Sigui com sigui: bon contrast, botons grossos i que es vegi molt bé al mòbil.

 EM CALEN DOS FITXERS
• El fitxer del MOTOR (ja existeix per defecte; es diu «Codi.gs» — fes servir el que ja hi ha, no en creïs cap altre): hi va la funció doGet() que mostri la pàgina amb HtmlService a partir del fitxer «Index.html», i les funcions per desar i llegir al full actiu.
• «Index.html» (la cara): el formulari, el botó i la zona de resultats, amb el CSS inclòs, que cridi el motor amb google.script.run.

 QUÈ VULL DE TU
1) El codi COMPLET dels dos fitxers, sencer i amb comentaris en català que expliquin cada part.
2) Una fila d'exemple realista que pugui afegir per provar-ho de seguida, i com comprovar que la fila apareix al full.
3) Després, les instruccions pas a pas: com creo el fitxer «Index.html» dins d'Apps Script, on enganxo cada cosa, com ho deso i com publico l'app (Implementar → Nova implementació → Aplicació web → Qui hi té accés: <Qualsevol / Només jo>) perquè tingui un enllaç.
4) IMPORTANT: si la resposta se't fa llarga i es talla, no la resumeixis ni l'escurcis. Dona'm primer el fitxer del motor SENCER i, quan et digui «continua», l'Index.html sencer.

3. Millorar una app — Sessions 1–2

La IA no edita el teu codi: en crea de nou. Per això li has de donar el teu codi actual i exigir-li els fitxers sencers.

Actua com un professor de Google Apps Script per a principiants. Parla'm en català, senzill i pas a pas.

Tinc una APLICACIÓ WEB ja feta i publicada amb Apps Script. Té dos fitxers: «Codi.gs» (el motor) i «Index.html» (la cara), i fa servir el meu full de Google amb SpreadsheetApp.getActiveSpreadsheet().

CONTEXT DE L'APP (perquè entenguis què tinc):
• Què fa: <QUÈ FA L'APP, EN UNA FRASE>
• Títol: «<TÍTOL>». Botó principal: «<TEXT DEL BOTÓ>».
• Columnes del full: <COLUMNES DEL FULL>.
• Color principal: <COLOR> (<CODI DEL COLOR>); fons <clar / fosc>.

EL MEU CODI ACTUAL (treballa a partir d'aquí; l'enganxo on indiques):

— Codi.gs —
[ENGANXA AQUÍ tot el teu Codi.gs]

— Index.html —
[ENGANXA AQUÍ tot el teu Index.html]

LA MILLORA QUE VULL:
«<DESCRIU LA MILLORA: p. ex. un cercador, editar i esborrar files, un gràfic…>»

MOLT IMPORTANT (soc principiant i no sé editar codi a mà):
• NO em diguis «afegeix aquesta línia aquí» ni em donis trossos solts de codi.
• Torna'm els DOS fitxers SENCERS i complets, llestos perquè els copiï i substitueixi del tot els que ja tinc.
• Mantén tot el que ja funciona i el mateix disseny; només afegeix o canvia el que et demano.
• Faré servir el MATEIX full i el MATEIX projecte d'Apps Script (no me'n creïs cap de nou).
• Si la millora necessita una columna NOVA al full, digue-m'ho ben clar al principi (l'afegiré jo a mà) i fes que el codi funcioni amb aquesta columna.
• Codi comentat en català.

4. Depurar (quan l'app peta) — Sessió 2

Primer llegeix l'error. Després enganxa'l amb el codi.

Actua com un professor de Google Apps Script per a principiants. Parla'm en català, senzill i pas a pas.

Tinc una APLICACIÓ WEB feta amb Apps Script (un full de Google + el fitxer del motor «Codi.gs» + «Index.html») i NO em funciona. Soc principiant i no sé llegir codi.

EL QUE PASSA / L'ERROR QUE VEIG:
[ESCRIU AQUÍ què veus: pantalla en blanc, un missatge d'error, no es desa res… i enganxa el text de l'error si n'hi ha]

EL MEU CODI ACTUAL:
— El motor (Codi.gs) —
[ENGANXA AQUÍ tot el codi del motor]

— Index.html —
[ENGANXA AQUÍ tot l'Index.html]

Dades: la meva app es diu «<TÍTOL DE L'APP>» i el full té les columnes <COLUMNES DEL FULL>.

Digue'm en paraules senzilles QUÈ passava i per què, i torna'm els DOS fitxers SENCERS ja corregits (no em diguis «canvia aquesta línia»; jo substitueixo tot el fitxer). Comentaris en català.

5. Revisar la seguretat d'una app — Sessió 2

Actua com un professor de seguretat per a principiants. Parla'm en català, clar i sense espantar-me.

Tinc una APLICACIÓ WEB feta amb Apps Script (un full de Google + «Codi.gs» + «Index.html»). Es diu «<TÍTOL DE L'APP>» i el full té les columnes <COLUMNES DEL FULL>.

EL MEU CODI:
— Codi.gs —
[ENGANXA AQUÍ tot el teu Codi.gs]

— Index.html —
[ENGANXA AQUÍ tot l'Index.html]

Revisa-la i digue'm, en llenguatge senzill, si té algun d'aquests problemes i com es soluciona:
1) Mostra a tothom dades d'altres persones (noms, correus…) quan potser no caldria?
2) Hi ha cap contrasenya, clau o dada personal escrita DINS el codi?
3) Valida les dades abans de desar-les (camps buits o coses estranyes)?
4) Què hauria de mirar respecte a qui pot obrir l'app («Només jo» o «Qualsevol»)?

Dona'm consells concrets i fàcils. Si cal canviar codi, torna'm els DOS fitxers SENCERS. No m'espantis: explica-m'ho com a un principiant.

6. El mètode del context: què ha de fer — Sessió 3

context/que-ha-de-fer.md (el producte). La Sessió 3 te'l genera a partir de quatre preguntes; aquest és el resultat:

# Què ha de fer: <NOM DE L'APP>

## Qui la farà servir
<QUI L'OBRIRÀ I PER A QUÈ>

## Què ha de poder fer
- <UNA COSA QUE HA DE PODER FER>
- <UNA ALTRA>

## Com ha de ser
<COM HA DE SER: senzilla, bonica, fàcil al mòbil…>

## Què NO ha de fer (per ara)
<QUÈ NO HA DE FER, PER ARA>

7. El mètode del context: arquitectura — Sessió 3

context/arquitectura.md (el tècnic):

# Arquitectura tècnica

Aquesta app és una **aplicació web de Google Apps Script** (les que ja sé fer):

- **Dos fitxers:** `Codi.gs` (el motor / backend) i `Index.html` (la cara / frontend).
- **Base de dades:** un full de Google Sheets, fent servir `SpreadsheetApp.getActiveSpreadsheet()` (no crear cap full nou).
- **Com es publica:** copiant el codi a l'editor d'Apps Script (Extensions → Apps Script) i fent Implementar → Aplicació web (enllaç /exec). (Encara NO fem servir clasp ni desplegament automàtic.)
- **Convencions:** codi i comentaris **en català**, senzill i pensat per a principiants; bon contrast i que es vegi molt bé al mòbil.
- **Què NO fer servir:** cap framework ni llibreria externa; només HTML, CSS i JavaScript senzills, i Apps Script.
- **Importa:** torna sempre els DOS fitxers SENCERS, llestos per copiar.

8. El mètode del context: la instrucció per a l'agent — Sessió 3

Si l'agent no «veu» la carpeta context/, enganxa-li el text dels dos .md directament al xat.

Llegeix tota la carpeta `context/` d'aquest projecte (els fitxers `que-ha-de-fer.md` i `arquitectura.md`) i construeix l'aplicació seguint-los al peu de la lletra.

Torna'm els DOS fitxers SENCERS i complets — `Codi.gs` i `Index.html` — comentats en català i llestos per copiar.

Si alguna cosa del context no et queda clara, pregunta-m'ho abans de començar. Si la resposta es talla, dona-me'n una part i continua quan et digui «continua».

9. Demanar una millora a l'agent (en una branca) — Sessió 4

Vull fer una millora a la meva app (un projecte de Google Apps Script amb dos fitxers: Codi.gs i Index.html, que segueix el que diu la carpeta context/).

LA MILLORA QUE VULL:
<LA MILLORA QUE VOLS>

Mantén TOT el que ja funciona i el mateix disseny; només afegeix o canvia el que et demano. Torna'm els DOS fitxers SENCERS (Codi.gs i Index.html), complets i comentats en català, llestos per copiar. Si la resposta es talla, continua quan et digui «continua».

10. Revisar un canvi amb IA — Sessió 4

Enganxa a sota el diff del PR (pestanya Files changed) o els fitxers nous sencers.

Ets un revisor de codi per a principiants. Parla'm en català, clar i sense espantar-me.

Vull fusionar aquest canvi a la versió bona (main) de la meva app, que és un projecte de Google Apps Script (Codi.gs + Index.html). El canvi és: <LA MILLORA QUE VOLS FUSIONAR>.

AQUÍ TENS EL CODI NOU (els dos fitxers, o el diff del pull request):
— Codi.gs —
[ENGANXA AQUÍ el Codi.gs nou]

— Index.html —
[ENGANXA AQUÍ l'Index.html nou]

Revisa'l i digue'm, en paraules fàcils:
1) Hi ha algun error que pugui trencar l'app?
2) És segur? (no exposa dades d'altres, no té cap contrasenya ni secret dins el codi)
3) Es pot millorar alguna cosa senzilla?
4) El puc fusionar a main amb tranquil·litat: sí o no?

No m'espantis. Si cal canviar res, torna'm els DOS fitxers SENCERS ja corregits.

11. Muntar el desplegament automàtic (prompt mestre) — Sessió 5

Ets un expert en Google Apps Script i en GitHub Actions, però parla'm en català, senzill i pas a pas, perquè soc principiant i no sé llegir codi.

Aquest repositori té una app de Google Apps Script: els fitxers Codi.gs (el motor) i Index.html (la cara). Ara la publico A MÀ, copiant el codi a l'editor d'Apps Script. Vull AUTOMATITZAR-HO: que CADA COP que es fusioni un canvi a la branca «main», l'app es publiqui sola al seu enllaç /exec.

Munta'm tota la canonada amb clasp DINS d'una GitHub Action:
1) Crea el fitxer «.clasp.json» apuntant al meu projecte d'Apps Script. El meu Script ID és: <ENGANXA AQUÍ EL TEU SCRIPT ID — Apps Script → Configuració del projecte → «ID de l'script»>.
2) Crea el fitxer «.github/workflows/deploy.yml» que, en fer push/merge a «main», instal·li clasp, faci «clasp push» i «clasp deploy» perquè s'actualitzi l'enllaç /exec.
3) Fes servir un SECRET de GitHub per guardar les credencials de clasp (el contingut del «.clasprc.json»). Digue'm exactament com s'ha de dir el secret i com l'he d'afegir (i, si pots, posa'l tu amb el «gh»).
4) MOLT IMPORTANT — fes-me una LLISTA CLARA i numerada dels passos que NOMÉS puc fer JO al meu compte (fer «clasp login» i autoritzar amb el meu Google, activar l'API d'Apps Script, i afegir el secret), i digue'm en quin ordre i on clicar a cada pas.
5) Si pots executar ordres a la terminal del Codespace tu mateix, FES-HO i ves-me dient què fas. Si no, dona'm les ordres exactes perquè les enganxi jo.
6) PROTEGEIX la branca «main»: configura una regla (un «ruleset») perquè NO es pugui pujar codi directament a «main», només a través de pull requests. Si el repo és privat i la protecció clàssica demana un pla de pagament, fes servir un «ruleset» (és gratuït també en repos privats). Si pots, fes-ho amb el «gh»; si no tens permisos, digue'm exactament on clicar a la configuració del repo.

No facis res que requereixi que jo entengui codi: explica-m'ho tot com a un principiant. Quan acabis, digue'm com COMPROVAR que la canonada funciona (incloent-hi que «main» queda protegida).

12. Depurar el desplegament (quan l'Action falla) — Sessió 5

La meva GitHub Action de desplegament ha FALLAT (surt en vermell a la pestanya «Actions»). Soc principiant i no sé llegir logs. Parla'm en català, fàcil.

AQUÍ TENS L'ERROR (la part vermella del registre de l'Action):
[ENGANXA AQUÍ el missatge d'error]

I AQUÍ EL MEU WORKFLOW (.github/workflows/deploy.yml):
[ENGANXA AQUÍ tot el contingut del workflow]

Digue'm en paraules fàcils QUÈ ha passat i com ho arreglo. Si has de canviar el workflow o la configuració, torna'm el fitxer SENCER ja corregit. I digue'm clarament si he de tocar res al meu compte (el secret, l'API d'Apps Script, el clasp login o el Script ID).

13. Aprendre una plataforma nova amb la IA — Sessió 6

Canvia <PLATAFORMA> per la que vulguis (Firebase, Supabase, Vercel, Netlify, Replit…).

Ets un professor de <PLATAFORMA>, però parla'm en català i senzill, com a principiant.
Vinc de Google Apps Script (sé fer apps amb Codi.gs + Index.html + un full de Google) i ara vull aprendre <PLATAFORMA>.

Explica-m'ho així:
1) Què és <PLATAFORMA> i per a què serveix, comparant-ho amb el que ja sé fer.
2) Què necessito per començar (compte, eines) i si és gratuït per provar.
3) Fes-me, PAS A PAS, una primera mini-app molt senzilla a <PLATAFORMA> (la més simple possible), explicant-me cada pas.
4) Digue'm què hauria d'aprendre després, en ordre.

IMPORTANT:
- Si hi ha capa gratuïta, avisa'm que ho he de verificar a la web oficial (els plans canvien sovint).
- Recorda'm que NO posi mai claus ni contrasenyes dins del codi (i menys si és públic): van a les variables o secrets de la plataforma.

Si em quedo encallat, ajuda'm a depurar-ho com he fet sempre: jo t'enganxo l'error i tu m'expliques què passa i com ho arreglo.

14. L'app en un sol fitxer HTML, al teu ordinador — Sessió 6

Sense servidor ni compte de Google: l'app sencera en un fitxer que s'obre al navegador. Les dades queden en aquell ordinador.

Vull una versió de la meva app que funcioni AL MEU ORDINADOR, sense cap servidor ni compte de Google. Parla'm en català, senzill i pas a pas; soc principiant.

LA MEVA APP: es diu «<TÍTOL DE L'APP>» i guarda registres amb aquestes dades: <COLUMNES DEL FULL>.

FES-ME:
1) UN SOL fitxer «index.html» amb tot a dins (HTML, CSS i JavaScript), sense llibreries externes ni connexió a internet.
2) Que guardi les dades al mateix navegador (localStorage), i que en tornar a obrir el fitxer hi siguin.
3) El mateix formulari i la mateixa llista que tenia, amb un botó «Exporta» que baixi les dades en un fitxer CSV, i un botó «Importa» per carregar-les.
4) Disseny net, que es vegi bé al mòbil i a l'ordinador.

DESPRÉS, digue'm exactament: on deso el fitxer, com l'obro (doble clic), i què passa amb les dades si canvio d'ordinador o de navegador (vull entendre la contrapartida).

Torna'm el fitxer SENCER, comentat en català. Si es talla, continua quan et digui «continua».

15. App instal·lable (PWA) al mòbil i a l'escriptori — Sessió 6

El punt fort del bloc «en local»: icona pròpia i funcionament sense connexió, sense signatures ni botigues d'apps. Parteix del fitxer del prompt anterior.

Tinc una app web en un sol fitxer «index.html» (es diu «<TÍTOL DE L'APP>», guarda registres amb: <COLUMNES DEL FULL>) i la vull convertir en una APP INSTAL·LABLE (PWA): amb icona pròpia al mòbil i a l'escriptori, a pantalla completa i que funcioni SENSE connexió. Parla'm en català, senzill i pas a pas; soc principiant.

CONTEXT: tinc un repositori a GitHub i sé publicar-lo amb GitHub Pages (la web surt a https://EL-MEU-USUARI.github.io/EL-MEU-REPO/).

FES-ME:
1) El fitxer «manifest.json» (nom, nom curt, color, icones) i digue'm quines icones necessito i com fer-les (mides).
2) Un «service worker» senzill (sw.js) que guardi l'app a la memòria cau perquè funcioni sense connexió.
3) Els canvis exactes a l'«index.html» per enllaçar-los (tingues en compte que la web és en una subcarpeta del domini, no a l'arrel).
4) Els passos per publicar-ho a GitHub Pages i, després, com s'instal·la: al mòbil (Android i iPhone) i a l'ordinador (Chrome i Edge).

IMPORTANT:
- Res de frameworks ni llibreries: HTML, CSS i JavaScript senzills.
- Digue'm com comprovar que funciona sense connexió (mode avió) i què he de fer quan canviï el codi perquè l'app instal·lada s'actualitzi.
- No em facis instal·lar res a l'ordinador.

Torna'm cada fitxer SENCER, comentat en català.

Per a qui manté el curs: aquest fitxer es genera des de assets/prompts.json (la font única dels prompts, la mateixa que fan servir les sessions). Edita el .json i executa python3 tools/build_recursos.py; no editis aquest .md a mà.

Pàgina generada automàticament des de recursos/banc-de-prompts.md · revisat el 2026-09-07. Edita el .md, no aquest fitxer.