Le app GoodBarber sono pronte per iPhone Duo. Scopri come
Blog

Ruba questa idea: la lista dei regali di Natale

Settembre è alle spalle, i buoni propositi di tornare in palestra hanno tenuto (o forse no), e adesso è il momento di organizzare le feste di fine anno. Per aiutarti a vederci più chiaro, ecco una sezione d'app che toglie un po' di stress al compito di riempire il sacco di Babbo Natale: una scheda per persona, idee che cambiano stato per seguire il budget e un conto alla rovescia fino alla Vigilia. Il tutto generato con un'unica descrizione all'AI Extension Builder di GoodBarber.

La serie «Ruba questa idea»: una sezione d'app che descriviamo all'AI Extension Builder, che costruiamo davvero e di cui ti consegniamo il prompt completo alla fine, pronto da incollare. Dopo la sfida dei 30 giorni della ripresa, tocca a una delle stagioni più intense dell'anno!

La sezione, dal lato del cliente

Tutto comincia con una domanda: Who are you shopping for this year? Il cliente aggiunge una persona con il nome che preferisce: un nome di battesimo, «Mamma», «i vicini». Può anche fissare un budget, oppure no.

Sotto ogni persona, le idee regalo. Ogni idea ha un pulsante di stato da toccare per andare avanti: Idea, poi Bought, poi Wrapped. I regali comprati e incartati si sommano nel budget di quella persona (€0 of €50, con una barra sottile) e nel totale della stagione, in cima allo schermo.

L'anello Progress si riempie man mano che ogni persona ha almeno un regalo comprato. Quando la lista si allunga, le schede si chiudono con un tocco sull'intestazione e restano solo i nomi. Una riga ricorda chi non ha ancora nessuna idea (1 person has no gift ideas yet): toccandola, lo schermo scende fino a quella persona.

Maison Lumen, il negozio di queste schermate, è inventato per l'esempio. Tutto ciò che vi si vede è fittizio.

Perché questo formato funziona per un negozio

Il vantaggio sta nel calendario. Da inizio novembre al 24 dicembre, il tuo cliente riapre la sua lista ogni volta che pensa a un regalo, ed è la tua app che apre per farlo. Una vetrina si guarda di sfuggita e una newsletter natalizia si perde tra le altre. Uno strumento che gli serve davvero torna invece nelle sue mani proprio quando decide i suoi acquisti.

Ed è un servizio, non l'ennesima promozione. La sezione non vende nulla, non spinge alcun prodotto e non chiede niente in cambio. Fa risparmiare tempo ed evita di sforare il budget. Il giorno in cui il tuo cliente cerca un'idea per sua madre, il tuo catalogo è a una scheda di distanza.

Il budget conta, e non si ferma al tetto

Guarda la scheda di Mum: budget di 80 €, due regali comprati, 85 € spesi. La barra è piena, la cifra diventa rossa (€85 of €80) e il conteggio continua. È scritto nero su bianco nel prompt: non smettere mai di contare al raggiungimento del budget. Una barra bloccata al 100% mentirebbe proprio nel momento in cui l'informazione conta.

Due dettagli rendono quel totale affidabile. Un regalo incartato resta conteggiato: passare da Comprato a Incartato cambia solo l'etichetta. E quando si segna come comprata un'idea che non aveva un prezzo, la sezione apre subito la scheda del regalo, con il cursore nel campo Price paid. Il cliente scrive quanto ha pagato in quel momento, e il totale non resta mai sbagliato per una dimenticanza.

Una lista che resta sul telefono

Una lista di regali è una lista di segreti, e la sezione la prende sul serio: tutto viene salvato sul dispositivo, niente viene inviato, niente viene condiviso. Lo dice una volta, in piccolo, in fondo allo schermo: This list stays on your phone. We can't see it.

Per i telefoni lasciati sul tavolo del soggiorno, il cliente può bloccare la lista con un codice di quattro cifre. Alla riapertura, lo schermo chiede il codice prima di mostrare qualsiasi cosa.

Le frasi del prompt che fanno il lavoro

Il prompt completo è più in basso. Se lo adatti, cinque frasi portano l'essenziale: tienile.

  1. «When the total passes the budget, the bar fills completely and the figure turns to "€72 of €60" in a warning colour — never stop counting at the budget.» L'esempio con le cifre fa il lavoro: il generatore vede esattamente cosa mostrare quando il budget viene superato.
  1. «Wrapping a gift never takes it out of any total.» Nella nostra costruzione, la prima versione toglieva dal totale i regali incartati. Basta una frase per impedirlo.
  1. «When a gift with no price becomes "Bought", its edit window opens with the cursor already in the price field.» Il momento in cui il cliente conosce il prezzo è quello in cui compra. La sezione glielo chiede proprio allora.
  1. «A person is done as soon as at least one of their gifts is bought or wrapped.» La parola «completato» non ha un significato ovvio. Scrivi la regola, altrimenti il generatore ne sceglie una al posto tuo.
  1. «The list is never sent anywhere, never shared with anyone, and never visible to us.» La promessa di riservatezza è nel prompt, e anche la frase mostrata sullo schermo, parola per parola.

Il prompt: rubalo

Nemmeno una riga di codice dietro questa sezione: solo un brief, consegnato all'AI Extension Builder. La nostra costruzione ha richiesto qualche ritocco, tutti integrati qui in un unico prompt rifinito. L'abbiamo verificato: incollato così com'è in una sezione nuova, questo prompt dà al primo colpo tutto ciò che descrive questo articolo.

Create a Christmas gift planner section. Write every text on screen in English. The screen is a list of the people the user is buying for, each with their gift ideas. There is no limit to the number of people. When the list is empty, it shows a single card with the line "Who are you shopping for this year?" and an "Add a person" button, and no other add button. As soon as one person exists, that card disappears and a full-width "Add a person" button sits above the list. Adding a person asks for a name and, optionally, a budget — a plain number, shown with the € symbol. The name is whatever the user types: a first name, "Mum", "the neighbours". Each person is a card. Its header shows the name with a small pen icon right next to it, and the number of gifts on the right ("1 gift", "3 gifts"). Tapping anywhere on the header except the pen folds or unfolds the card; folded, only the header shows, and each card remembers whether it is folded. The pen opens "Edit person": name, budget, Save and Cancel side by side, and below them a full-width "Delete person" button that asks first, then removes the person and all their gifts. Unfolded, a card shows the money line, then the gifts, then "Add a gift idea". The money line reads "No gift ideas yet" when the person has no gift, "€45 of €60" with a thin bar when a budget is set, and "€18 spent" when there is no budget. When the total passes the budget, the bar fills completely and the figure turns to "€72 of €60" in a warning colour — never stop counting at the budget. Each gift is one line: its name, its price if there is one, a state button, and "Edit" and "Delete" links. Tapping the state button moves it from "Idea" to "Bought" to "Wrapped", and a wrapped gift goes back to "Idea". Only those three states, always in that order. Bought and wrapped gifts count toward the person's total and the overall total; ideas don't. Wrapping a gift never takes it out of any total. When a gift with no price becomes "Bought", its edit window opens with the cursor already in the price field, labelled "Price paid". "Add a gift idea" asks for a line of text and an optional price. "Edit" lets the user rename the gift, change its price, or move it to another person with a "For whom?" choice. "Delete" asks first. At the top of the screen, three compact cards in a bento layout. A full-width card reads "48 days until Christmas Eve", counting to 24 December; on 24 December it reads "It's Christmas Eve". Below it, two cards side by side: "Progress", a ring that fills with the share of people who are done, with "2/3" in its centre and "done" under it; and "Total spent on gifts", the sum of the prices of every bought or wrapped gift. A person is done as soon as at least one of their gifts is bought or wrapped. No sentence under the ring. Under the add button, when it is true, one line reads "2 people have no gift ideas yet" ("1 person has no gift ideas yet" in the singular); tapping it scrolls to the first of them and unfolds their card. Everything lives on this device alone. The list is never sent anywhere, never shared with anyone, and never visible to us. Say so on the screen, once, in small text at the bottom: "This list stays on your phone. We can't see it." Above that line, a "Lock this list" button lets the user choose a four-digit code, typed twice, and warns in one sentence that a forgotten code cannot be recovered. Every code entry in the section uses four separate boxes: the cursor moves to the next box as each digit is typed, and backspace moves back. Once a code is set, the section asks for it before showing anything. The lock screen offers "Forget the code and erase the list" as the only way out: its confirmation appears on top of the lock screen, and confirming erases the people, the gifts and the code, and shows the empty list. Once unlocked, the button reads "Remove the lock" and asks for the code before removing it. From 26 December, the top of the screen offers "Start next year's list", which keeps the people and their budgets and removes every gift. Nothing is deleted without asking, and every confirmation is a window drawn by the section, on top of everything else. Nothing flickers or flashes: a gift changing state updates in place without the list jumping or scrolling, totals recount without animating, there is no reload effect when the screen opens, and entrance animations play only on first load. Match the app's design.

Prima di annunciarla: tre verifiche

Una sezione generata si verifica rifacendo i gesti di un cliente. Bastano tre minuti.

Il prezzo all'acquisto. Aggiungi un'idea senza prezzo e passala a Bought: la scheda del regalo deve aprirsi con il cursore nel campo del prezzo. Inserisci un importo: il totale della persona e quello in cima allo schermo devono cambiare.

L'incarto. Passa quel regalo a Wrapped: nessun totale deve cambiare.

La via d'uscita del blocco. Imposta un codice, chiudi la sezione e riaprila. Sulla schermata bloccata, senza digitare il codice, tocca Forget the code and erase the list. La conferma deve comparire sopra la schermata bloccata.

Nella nostra costruzione, si apriva dietro la schermata bloccata: la si vedeva solo dopo aver sbloccato (schermata di sinistra, in cima a questa parte). Con il prompt qui sopra, compare sopra come deve (schermata di destra).

È proprio il genere di dettaglio che si nota solo testando. Il prompt qui sopra ora lo precisa, ma se la tua generazione se lo lascia sfuggire, non serve ricominciare: chiedi il ritocco descrivendo quello che vedi e quello che ti aspetti. Eccolo, pronto da incollare:

"Forget the code and erase the list" doesn't work from the lock screen: its confirmation opens behind the lock screen, and I only see it after unlocking. Expected: the confirmation appears on top of the lock screen, and confirming erases the people, the gifts and the code, then shows the empty list — without ever entering the code.

La ricetta vale per qualsiasi ritocco: il sintomo che vedi, il comportamento che ti aspetti e il dettaglio che toglie l'ambiguità. Qui, «senza mai digitare il codice».

Il 26 dicembre

Il conto alla rovescia ha fatto il suo lavoro. Dal 26 dicembre, in cima allo schermo compare Start next year's list: le persone e i loro budget restano, i regali vengono cancellati, dopo una conferma. L'anno prossimo, il tuo cliente ritroverà la sua lista dove l'aveva lasciata, nella tua app, e potrà annotarci le idee man mano, già subito dopo le feste.

Tocca a te

Persone, idee, tre stati e un budget: il meccanismo va ben oltre il Natale. Un negozio di articoli per l'infanzia ne farà una sezione «lista nascita» da preparare, una cartoleria la lista per il ritorno a scuola di ogni figlio. Ovunque i tuoi clienti preparino acquisti per più persone, la sezione si riscrive cambiando poche parole.

Per approfondire

Il tuo turno

La lista di Natale è solo un punto di partenza. Descrivi la tua sezione come la spiegheresti a un commesso che inizia a dicembre: cosa vede il cliente, cosa tocca e cosa deve restare vero in ogni caso. Se si può descrivere, può diventare una sezione della tua app: crea un'app con GoodBarber.

In breve

Posso vedere le liste dei miei clienti?

No. Tutto resta sul loro telefono: non viene inviato nulla, né a te né a noi. La sezione lo indica in fondo allo schermo.

La lista si sincronizza tra più dispositivi?

No, è il rovescio della riservatezza: la lista vive su un solo telefono. Se il tuo cliente cambia dispositivo, riparte da una lista vuota.

E se il mio cliente dimentica il codice?

Nessuno può recuperarlo. L'unica via d'uscita è cancellare la lista e ricominciare. La sezione lo avvisa nel momento in cui sceglie il codice.

Si può cambiare valuta o lingua?

Sì, con una frase nel prompt: sostituisci «€» e «English» con ciò che si adatta ai tuoi clienti.

Cosa succede dopo Natale?

Dal 26 dicembre, la sezione propone di preparare la lista dell'anno successivo mantenendo le persone e i loro budget.

Continua a leggere

  5 min di lettura

AI Extension Builder: l'agente testa le tue sezioni e può creare il database della tua app

Prendiamo un club sportivo che vuole far scegliere ai suoi soci la data del torneo. Nella sua sezione Create with AI, scrive: “Aggiungi un sondaggio per scegliere la data del torneo, con i risultati.”L'agente legge prima il contesto dell'app: la palette, i font, il logo, i file già aggiunti. Consulta il design system di GoodBarber, scritto dai nostri designer. Poi scrive i file della sezione.I voti devono essere condivisi tra tutti i soci. L'agente se ne accorge e fa la domanda, con tre risposte:Create the app's database: un solo database, gestito da GoodBarber. Le sue tabelle partono vuote.Connect my Supabase: i dati vanno nel progetto Supabase del club.Cancel: l'agente fa la sezione senza database, e ogni telefono vede solo i propri voti.Il club sceglie il database di GoodBarber. L'agente apre allora la sezione in un browser, alla larghezza di un telefono, e prova i suoi pulsanti. Cerca gli errori: uno script che si blocca, un'immagine rotta, un testo che esce dallo schermo. Corregge quello che trova, poi salva la sezione.I soci votano e tutti vedono i risultati. Ognuno modifica solo il proprio voto.