GUIDA: creare applicazioni html5 con l'AI

In questa guida mostrerò brevemente un metodo per creare dei piccoli "laboratori virtuali" interattivi. Queste applicazioni possono essere caricate su un sito internet e utilizzate da te come supporto alla lezione, o direttamente agli studenti. Non è necessaria una conoscenza tecnica approfondita dell'html, in quanto useremo il metodo del "vibe coding": ci faremo aiutare dall'AI per generare il codice. La procedura è basata su quella mostratami da prof. M. Sabella di EFT Lombardia (link al suo sito) durante il corso di formazione "Stem e AI".

1) Scegli un chatbot e inizia una nuova chat.

Suggerisco di utilizzare google Gemini. Io ho provato anche ChatGPT, ma non lo ho trovato molto funzionale.

2) Formula la tua richiesta.

Nel prompt (la tua richiesta), specifica che l'applicazione deve essere scritta in html5.

Esempio: "Genera un'applicazione html5 interattiva che simuli l'esperimento del moto rettilineo uniforme con la rotaia a cuscinetto d'aria, mostrando all'utente anche il grafico spazio-tempo"
3) Visualizza il risultato.

Una volta inviata la richiesta, il chatbot produrrà un codice e lo metterà nel canvas. Non appena avrà finito, potrai cliccare su "Antemprima" (in cima al canvas, di fianco a "Codice") per visualizzare l'applicazione e provare a utilizzarla.

4) Perfeziona l'applicazione.

L'applicazione non funziona come vorresti? Ci sono altre funzionalità che vorresti aggiungere? Inesattezze? Bug? Dettagli che non ti piacciono? Chiedi al bot di modificarle!

Esempio: "Il codice che hai prodotto non funziona, la simulazione crasha appena il carrellino parte" Esempio: "Aggiungi la possibilità per l'utente di scegliere il numero di fotocellule" Esempio: "Aggiungi la possibilità di inclinare la rotaia"
Nota bene: il chatbot ha i suoi limiti! Se fai troppe richieste, spesso eliminerà altri elementi o modificherà cose senza che tu lo chieda!
  • se l'applicazione è già molto complessa, ti consiglio di chiedere sempre "Non eliminare nulla, non fare altre modifiche";
  • non chiedere troppo! Se esageri con la complessità, non riuscirà a starti dietro;
  • l'AI mente molto bene! A volte dirà di aver fatto quello che chiedi, anche se non è vero... controlla sempre bene il risultato!
5) Implementa la tua applicazione in un sito

Se hai finito di sviluppare la tua applicazione, copia e incolla il codice che trovi nel canvas. Andremo adesso a implementarlo in un vero sito. Per ora ho trovato due opzioni per farlo:

A) github-pages. Trovi qui un breve tutorial per produrre un semplice sito con questo servizio. I siti github sono gratuiti e pubblici, quindi puoi farli usare direttamente ai tuoi studenti!

B) google sites. Più semplice da utilizzare, ma non può essere pubblicato, a meno che tu non abbia la versione premium del servizio. Puoi condividerlo ai tuoi studenti in modalità editor, ma attenzione! Potranno sempre modificare (e vandalizzare...) il sito!

Per creare un sito con google sites:

  • vai su sites.google.com
  • crea un sito vuoto
  • nello spazio bianco, fai doppio click
  • clicca su "Incorpora" (simbolo "<>" giallo)
  • clicca su "Incorpora codice"
  • Incolla qui il codice che hai copiato dal canvas e clicca su "Avanti"

Per utilizzare la tua applicazione, clicca su "Anteprima" (icona con un portatile e uno smartphone)