Code Playground

Scrivi ed esegui codice nel browser, senza registrarti

Cosa fa

Un sito gratuito per provare codice Python, SQL, Assembly e altri linguaggi direttamente nel browser, con anteprima dal vivo.

Come guadagna

Il progetto è presentato in vetrina su SideProjectors; come guadagna non è indicato pubblicamente.

Rendilo tuo

• Per gli studenti italiani di informatica: esercizi dei programmi scolastici.
• Lezioni brevi accanto all'editor.

Le frasi da scrivere all'AI

1. Base del sito e grafica

Crea un'app web in italiano chiamata "Prova il Codice": un sito gratuito per provare codice Python e SQL direttamente nel browser, senza installare niente, con esercizi guidati in italiano e classi per gli insegnanti. Usa React, Vite, TypeScript e Tailwind CSS.

Pagine da creare:
1. Pagina iniziale con l'editor pronto e gli esercizi
2. Editor: codice a sinistra, risultato a destra, pulsante Esegui
3. Esercizi per livello con controllo automatico della soluzione
4. Classi: l'insegnante assegna esercizi e vede i risultati
5. Condividi un codice con un link

Stile: da programmatori ma accogliente: sfondo scuro #0F172A per l'editor, interfaccia chiara intorno, verde #22C55E per i test superati, carattere "JetBrains Mono" per il codice e "Inter" per il resto. 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:
- "esercizi": titolo, linguaggio, testo, codice di partenza, test
- "soluzioni": esercizio, codice, superato o no, data, collegate allo studente
- "classi": insegnante, codice d'invito, studenti, esercizi assegnati

Regole di sicurezza obbligatorie:
- il codice gira nel browser dello studente, mai sul server
- lo studente vede solo le sue soluzioni; l'insegnante quelle della sua classe
- 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. Python e SQL nel browser

Python gira nel browser con Pyodide (Python compilato in WebAssembly), SQL con sql.js (SQLite nel browser) e un piccolo database di esempio (negozio, scuola, film). Il codice dell'utente non arriva mai al server (codice nei Dettagli tecnici).

L'esecuzione avviene in un Web Worker, così un ciclo infinito non blocca la pagina: dopo 5 secondi si offre di fermarlo. L'output (print, errori, tabelle dei risultati SQL) compare a destra; gli errori di Python sono spiegati in italiano con un suggerimento.

Esercizi con test automatici: si confronta il risultato del codice con quello atteso.

4. Classi per gli insegnanti

L'insegnante crea una classe, condivide il codice d'invito, assegna esercizi con una scadenza e vede in una tabella chi li ha superati, con il codice inviato da ogni studente.

Per i minorenni l'iscrizione avviene tramite la classe, con il solo nome scelto dall'insegnante: nessun dato personale. Condivisione di un codice con un link.

5. Pagamenti con Stripe

Aggiungi un abbonamento a 5 € al mese per insegnante. Gratis l'utente ha: editor ed esercizi liberi per tutti. Con il piano Pro sblocca: classi illimitate, esercizi assegnati con scadenza, risultati degli studenti ed esercizi personalizzati.

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. Blocchi: esegui "while True: pass": la pagina deve restare usabile e mostrare il pulsante per fermare il codice.
Correggi quello che non va e scrivimi cosa hai cambiato.

Dettagli tecnici

Eseguire Python nel browser con Pyodide

Il worker carica Pyodide una volta, poi esegue il codice dello studente raccogliendo quello che stampa con print.

// worker-python.ts (gira in un Web Worker)
import { loadPyodide, type PyodideInterface } from "pyodide";

let pyodide: PyodideInterface | null = null;

self.onmessage = async (e: MessageEvent<{ codice: string }>) => {
  pyodide ??= await loadPyodide({ indexURL: "https://cdn.jsdelivr.net/pyodide/v0.26.4/full/" });
  const uscita: string[] = [];
  pyodide.setStdout({ batched: (riga) => uscita.push(riga) });
  pyodide.setStderr({ batched: (riga) => uscita.push(riga) });

  try {
    await pyodide.runPythonAsync(e.data.codice);
    self.postMessage({ ok: true, uscita: uscita.join("\n") });
  } catch (errore) {
    self.postMessage({ ok: false, uscita: uscita.join("\n"), errore: String(errore) });
  }
};

// Nella pagina: se il worker non risponde in 5 secondi, si offre di terminarlo
// const worker = new Worker(new URL("./worker-python.ts", import.meta.url), { type: "module" });
// const timer = setTimeout(() => mostraPulsanteFerma(() => worker.terminate()), 5000);

Classi, esercizi e risultati

Le classi con codice d'invito e la tabella dei risultati che vede l'insegnante.

create table classi (
  id uuid primary key default gen_random_uuid(),
  insegnante_id uuid not null references auth.users(id) on delete cascade,
  nome text not null,
  codice text not null unique default upper(substr(md5(random()::text), 1, 6))
);

create table studenti_classe (
  classe_id uuid not null references classi(id) on delete cascade,
  studente_id uuid not null references auth.users(id) on delete cascade,
  primary key (classe_id, studente_id)
);

create table soluzioni (
  id uuid primary key default gen_random_uuid(),
  studente_id uuid not null references auth.users(id) on delete cascade,
  esercizio_id int not null,
  codice text not null,
  superato boolean not null,
  inviata_il timestamptz not null default now()
);

alter table soluzioni enable row level security;
create policy "le mie soluzioni" on soluzioni for all
  using (auth.uid() = studente_id) with check (auth.uid() = studente_id);
create policy "l'insegnante vede la sua classe" on soluzioni for select using (exists (
  select 1 from studenti_classe s join classi c on c.id = s.classe_id
  where s.studente_id = soluzioni.studente_id and c.insegnante_id = auth.uid()));

-- Tabella dei risultati per l'insegnante: esercizi superati per studente
select s.studente_id, count(distinct so.esercizio_id) filter (where so.superato) as superati
from studenti_classe s
left join soluzioni so on so.studente_id = s.studente_id
where s.classe_id = 'ID-CLASSE'
group by s.studente_id;

Pezzi comuni a tutti i progetti

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

Glossario

Pyodide

Python che gira dentro il browser, senza installare nulla.

WebAssembly

Un formato che permette di far girare nel browser programmi scritti in altri linguaggi, quasi alla stessa velocità.