Creiamo una web app didattica con l’intelligenza artificiale

In questo articolo parleremo di come realizzare facilmente una semplice web app didattica con l’aiuto dell’intelligenza artificiale. Anche senza essere programmatori è infatti possibile dare vita a progetti educativi, lasciando spazio alla creatività e alla voglia di sperimentare.

Una web app (o “applicazione web”) è un software applicativo che si usa tramite Internet, dal browser (come Chrome, Safari, Firefox).
Non va scaricata come un’app normale sul telefono, basta aprire un link, come si farebbe con un sito web.

I requisiti minimi per per costruire una web app sono rappresentati dalla conoscenza dei linguaggi HTML5, CSS, JavaScript.

HTML5 (HyperText Markup Language, versione 5) è il linguaggio che definisce la struttura di una pagina web, indicandoci quali elementi ci sono (titoli, sottotitoli, paragrafi, immagini…). Per esempio:

<h1>Benvenuto nella mia app didattica!</h1>
<p>Qui puoi imparare le tabelline.</p>

CSS (Cascading Style Sheets) è il linguaggio che definisce lo stile della pagina (colori, caratteri, layout, spaziature…). Per esempio:

h1 {
  color: blue;
  font-size: 32px;
}

JavaScript è il linguaggio che aggiunge la logica e l’interattività alla pagina (cosa succede quando l’utente clicca, scrive, interagisce ecc.). Insomma, è il motore che fa funzionare la web app come un programma vero. Per esempio:

document.querySelector('button').addEventListener('click', function() {
  alert('Hai cliccato il pulsante!');
});

In sintesi:

• HTML5 per la struttura;
• CSS per lo stile grafico;
• JavaScript per la logica e l’interazione.

Sembra tutto molto complesso e per soli esperti di programmazione. Ma oggi questa affermazione è vera solo in parte. Grazie all’intelligenza artificiale, oggi è molto più semplice di prima creare una una web app, in quanto è possibile chiedere ad un assistente virtuale di generare il codice da copiare/incollare (e quindi usare).

Vediamo, di seguito, come fare.

Programmiamo la nostra prima web app didattica

Ecco un esempio di prompt:

Mi scrivi una webapp sulle tabelline in HTML5 Javascript (in un unico file)?

Il risultato presenta, in un unico file, il codice HTML5, CSS e JavaScript (in Figura 1 un frammento).

Questo codice va copiato in un editor di testo per programmatori, per esempio Sublime Text oppure NotePad++, e salvato con un nome quale “index.html”, eseguibile poi da qualunque browser.

In alternativa possiamo usare una piattaforma online come JSFiddle (Figura 2), che permette di:

• scrivere codice HTML, CSS e JavaScript;
• eseguirlo subito (“live”) nel browser e vedere il risultato immediatamente;
• condividere il codice con un link.

Copiamo il codice prodotto dall’intelligenza artificiale nella sezione HTML di JsFiddle. La piattaforma scorporerà automaticamente il codice CSS e quello JavaScript (Figura 3).

Ora clicchiamo su “Run” nella barra in alto per eseguire la nostra prima web app (Figura 4). Funziona!

Conclusioni

Nel prossimo futuro, l’uso dell’intelligenza artificiale per creare app e software sarà sempre più diffuso.
Anche chi non è esperto di programmazione potrà sviluppare progetti utili e didattici, sperimentando in modo semplice e creativo.

Resta il problema legato alla diffusione, ma possiamo aspettarci piattaforme ad hoc, se non addirittura le stesse piattaforma di generazione del codice – come ChatGPT, Gemini e altre – con sezioni apposite per questo scopo.