AppLaunchFlow

Tutto il materiale per lanciare un'app sugli store, in un unico posto

Incasso mensile: 2700 USD (fonte indicata nella scheda)

Cosa fa

Crea gli screenshot per App Store e Play Store, i testi della scheda, i video promozionali, le icone e le traduzioni, e controlla la posizione nelle ricerche.

Come guadagna

Ha entrate ricorrenti ogni mese, verificate su TrustMRR. Prezzi e piani esatti sono indicati sul sito del progetto.

Rendilo tuo

• Parti solo dagli screenshot, la parte che tutti odiano fare.
• Traduzioni automatiche della scheda in italiano, spagnolo, tedesco.

Le frasi da scrivere all'AI

1. Base del sito e grafica

Crea un'app web in italiano chiamata "Vetrina App": aiuta chi pubblica un'app a creare gli screenshot per App Store e Google Play nelle misure giuste, e a scrivere i testi della scheda nei limiti di caratteri. Usa React, Vite, TypeScript e Tailwind CSS.

Pagine da creare:
1. Pagina iniziale con esempi di vetrine prima/dopo e prezzi
2. Registrazione e accesso
3. Editor degli screenshot: sfondo, titolo, cornice del telefono, schermata
4. Testi della scheda per i due store, con i contatori di caratteri
5. Esportazione di tutte le misure in uno zip

Stile: da strumento per creatori di app: sfondo bianco, blu #0071E3, verde Play #01875F, carattere "Inter", tela dell'editor grande al centro. Nessuna immagine generica di stock.

Tutto deve funzionare perfettamente da telefono. Tutti i testi in italiano, chiari e senza parole tecniche.

2. Database, account e sicurezza

Collega il progetto a Supabase e attiva la registrazione con email e password.

Crea queste tabelle:
- "app": nome, descrizione, pubblico, colori, collegate all'utente
- "vetrine": per ogni app gli screenshot con titolo, sfondo, schermata caricata e ordine
- "testi": nome, sottotitolo, parole chiave, descrizione breve e lunga per ogni store e lingua

Regole di sicurezza obbligatorie:
- ogni utente vede e modifica solo le sue app, vetrine e testi
- il piano non si modifica dal browser

Usa esattamente il codice SQL che trovi nei "Dettagli tecnici" di questa scheda: eseguilo nel SQL Editor di Supabase prima di continuare, poi collega le pagine alle tabelle.

3. L'editor degli screenshot

Crea l'editor: l'utente carica le schermate della sua app e per ognuna sceglie sfondo (colore, sfumatura), titolo grande in alto, posizione e cornice del telefono. Si lavora su un solo modello e l'esportazione crea tutte le misure richieste (elenco e codice di disegno nei Dettagli tecnici).

Funzioni utili: stesso stile su tutti gli screenshot in un clic, anteprima di come appaiono nello store, e versioni tradotte cambiando solo i testi.

Lo zip finale ha cartelle ordinate per store e misura, con i file numerati nell'ordine scelto.

4. Testi della scheda

Pagina dei testi con contatori che diventano rossi oltre i limiti: App Store nome 30, sottotitolo 30, parole chiave 100, descrizione 4.000; Google Play titolo 30, descrizione breve 80, descrizione completa 4.000.

Il pulsante "Proponi testi" chiama Claude con la descrizione dell'app e restituisce testi già nei limiti, in italiano e inglese, senza parole vietate dagli store (es. "migliore", "n.1", nomi di altre app).

5. Pagamenti con Stripe

Aggiungi un abbonamento a 15 € al mese. Gratis l'utente ha: una app, 3 screenshot e il marchio nell'angolo. Con il piano Pro sblocca: app illimitate, tutte le misure, traduzioni e testi suggeriti.

A pagamento riuscito il webhook porta l'utente al piano Pro; se l'abbonamento viene disdetto o non rinnovato lo riporta al piano gratuito.

Per la sessione di pagamento e il webhook segui la guida "Pagamenti con Stripe" di Fattibile.

6. Controlli specifici di questo progetto

Oltre ai controlli della guida "Controllo finale", verifica in particolare:
1. Misure: carica gli screenshot esportati in App Store Connect e Google Play Console (anche senza pubblicare): devono essere accettati senza errori.
Correggi quello che non va e scrivimi cosa hai cambiato.

Dettagli tecnici

Misure e disegno degli screenshot

Disegna uno screenshot su una tela con sfondo, titolo e schermata dell'app, nella misura richiesta dallo store. Si ripete per ogni misura dell'elenco.

// Misure in pixel (verticale) accettate dagli store
export const MISURE = {
  "iphone-6.9": [1320, 2868],
  "iphone-6.5": [1284, 2778],
  "ipad-13": [2064, 2752],
  "android-telefono": [1080, 1920],
} as const;

export async function disegnaScreenshot(
  misura: keyof typeof MISURE,
  opz: { sfondo: string; titolo: string; coloreTitolo: string; schermata: ImageBitmap },
): Promise<Blob> {
  const [l, a] = MISURE[misura];
  const tela = new OffscreenCanvas(l, a);
  const ctx = tela.getContext("2d")!;

  ctx.fillStyle = opz.sfondo;
  ctx.fillRect(0, 0, l, a);

  // Titolo in alto, grande il 6% della larghezza
  ctx.fillStyle = opz.coloreTitolo;
  ctx.font = "700 " + Math.round(l * 0.06) + "px Inter, sans-serif";
  ctx.textAlign = "center";
  ctx.fillText(opz.titolo, l / 2, a * 0.1, l * 0.9);

  // Schermata dell'app: 78% della larghezza, sotto il titolo
  const largh = l * 0.78;
  const alt = (opz.schermata.height / opz.schermata.width) * largh;
  ctx.drawImage(opz.schermata, (l - largh) / 2, a * 0.16, largh, Math.min(alt, a * 0.82));

  return tela.convertToBlob({ type: "image/png" });
}

Tabelle del database

Le app, gli screenshot e i testi per ogni store e lingua.

create table app (
  id uuid primary key default gen_random_uuid(),
  utente_id uuid not null references auth.users(id) on delete cascade,
  nome text not null,
  descrizione text not null default '',
  colori jsonb not null default '{}'
);

create table vetrine (
  id uuid primary key default gen_random_uuid(),
  app_id uuid not null references app(id) on delete cascade,
  utente_id uuid not null references auth.users(id) on delete cascade,
  ordine int not null,
  titolo text not null,
  sfondo text not null default '#0071E3',
  schermata_path text not null
);

create table testi (
  app_id uuid not null references app(id) on delete cascade,
  utente_id uuid not null references auth.users(id) on delete cascade,
  store text not null check (store in ('apple', 'google')),
  lingua text not null default 'it',
  nome text not null check (length(nome) <= 30),
  sottotitolo text check (length(sottotitolo) <= 30),       -- solo Apple
  parole_chiave text check (length(parole_chiave) <= 100),  -- solo Apple
  breve text check (length(breve) <= 80),                   -- solo Google
  descrizione text not null check (length(descrizione) <= 4000),
  primary key (app_id, store, lingua)
);

alter table app enable row level security;
create policy "le mie righe" on app
  for all using (auth.uid() = utente_id) with check (auth.uid() = utente_id);

alter table vetrine enable row level security;
create policy "le mie righe" on vetrine
  for all using (auth.uid() = utente_id) with check (auth.uid() = utente_id);

alter table testi enable row level security;
create policy "le mie righe" on testi
  for all using (auth.uid() = utente_id) with check (auth.uid() = utente_id);

Pezzi comuni a tutti i progetti

• Pagamenti con Stripe
• Profili, piano e crediti
• Controllo finale prima di pubblicare

Glossario

JSONB

Un tipo di colonna che contiene dati strutturati flessibili, come un piccolo documento.

Canvas

Una tela del browser su cui il codice disegna immagini, che poi si possono scaricare come file.