FreeBASIC – Modello MVC

In questo articolo scopriremo uno dei modi per organizzare il codice in maniera efficace ed efficiente.

Per fare questo sfrutteremo il Modello Architetturale MVC (Model-View-Controller).

Modello Architetturale MVC

In pratica ciò che occorre fare per seguire questo schema di progettazione è raccogliere logicamente i moduli del nostro codice nelle 3 componenti del modello MVC che differiscono per scopo e logica di funzionamento. Vediamole in sintesi:

  • Il componente Modello – che rappresenta il cuore del nostro programma – è quella parte del codice che contiene tutte quelle procedure (subroutines e funzioni) per la gestione delle informazioni secondo le regole e la logica decise dal programmatore. In pratica è questo componente che determina il vero e proprio comportamento del programma.
  • Il componente Vista contiene tutta quella parte del codice concepita per la gestione della grafica e del testo. Questo modulo si occupa sia della visualizzazione dei risultati delle elaborazioni avvenute nel componente Modello (output), sia della visualizzazione di quegli elementi grafici e testuali che permettono all’utilizzatore di interagire con il programma (input).
  • Il componente Controllore si occupa invece della fasi di interlavoro con le altre due componenti: una parte del suo codice permette a questo componente di mettersi in ascolto degli input dell’utilizzatore provenienti dal componente Vista, per poi attivare le relative procedure del componente Modulo, da cui raccoglierà i risultati elaborati per attivare le relative procedure del componente Vista che si occuperà infine di trasformare i dati elaborati in oggetti grafici o testuali.

Forse uno schema può aiutarci a capire ancora meglio ciò che abbiamo provato a descrivere più sopra.

Schema del Modello Architetturale MVC

Di Wdror-wsu-ap and Regis Frey – Opera propria, Pubblico dominio, Collegamento

Per non lasciare tutto questo soltanto ad un livello teorico, scriveremo un programma per disegnare dei quadrati rossi, selezionarli o deselezionarli, e spostarli a video.

Programma di esempio

Volendo seguire lo schema di progettazione MVC, scriveremo un modulo per ciascun componente di questo Modello Architetturale. In aggiunta prepareremo anche un file di intestazione per organizzare meglio le dichiarazioni delle procedure e del tipo di dato creato ad hoc per l’occasione, così come si usa fare in FreeBASIC.

Una volta preparati e salvati i 4 files, si dovrà compilare il file sorgente modulo_controllore.bas e quindi eseguire il file compilato modulo_controllore.exe.

File di intestazione

''nome file: intestazione.bas
''sito web: https://ciucoinformatico.home.blog/
''ultimo aggiornamento: 04/08/2019

/' DESCRIZIONE
File di intestazione per la dichiarazione del tipo di dato
creato ad hoc e delle procedure contenute negli altri moduli.
'/

''definizione del tipo di dato figura
type figura
  tipo as string
  coord_x as integer
  coord_y as integer
  dimensione as integer
  colore(1 to 3) as integer
  selezione as boolean
  selezione_x as integer
  selezione_y as integer
end type

''dimensiona un array fisso del tipo figura
dim figure(1 to 10) as figura

/'
Componente VISTA
'/

''procedura per stampare a video il menu
declare sub stampa_menu()

''procedura per visualizzare le informazioni del mouse
declare sub info_mouse(x as integer, y as integer, r as integer)

''procedura per visualizzare il numero delle figure create
declare sub stampa_tot_figure(n as integer)

''procedura per disegnare le figure
declare sub disegna_figura(f() as figura)

/'
Componente MODELLO
'/

''procedura per la creazione di una figure geometrica
declare sub crea_figura(x as integer, y as integer, r as integer, n as integer, f() as figura)

''procedura per la selezione di una o più figure
declare sub seleziona(x as integer, y as integer, f() as figura)

''procedura per lo spostamento delle figure
declare function sposta(x as integer, y as integer, f() as figura) as boolean

Modulo Controllore

''nome file: controllore.bas
''architettura MVC (Model-View-Controller): componente CONTROLLORE
''sito web: https://ciucoinformatico.home.blog/
''ultimo aggiornamento: 04/08/2019

/' DESCRIZIONE
Componente CONTROLLO: modulo per l'ascolto degli input
dell'utilizzatore che tramite il mouse interagisce con lo
schermo, e dispaccio degli eventi generati dall'utilizzatore
alle procedure del componente MODELLO e chiamata alle
procedure di visualizzazione del componente VISTA.
'/

#include once "file_intestazione.bi"
#include once "modulo_vista.bas"
#include once "modulo_modello.bas"

''dimensiona una variabile per ricevere il valore
''restituito dalla funzione getmouse
dim as long verifica_mouse

''dimensiona quattro variabili per ricevere le
''informazioni provenienti dal mouse
dim as integer mouse_x, mouse_y, mouse_ruota, mouse_pulsante

''variabile per il conteggio delle figure
dim num_figura as integer
num_figura = 0

''Visualizza il menu
stampa_menu()

''ciclo per l'ascolto degli input (informazioni dal mouse)
do
  verifica_mouse = getmouse(mouse_x, mouse_y, mouse_ruota, mouse_pulsante)
  if verifica_mouse = 0 then
    ''visualizza a video le informazioni del mouse
    info_mouse(mouse_x, mouse_y, mouse_ruota)
  else
    ''non fare nulla
  end if
  if mouse_pulsante = 1 then
    ''tasto sinistro del mouse
    seleziona(mouse_x, mouse_y, figure())
    disegna_figura(figure())
    stampa_menu()
    stampa_tot_figure(num_figura)
  elseif mouse_pulsante = 4 then
    ''tasto centrale del mouse
    if sposta(mouse_x, mouse_y, figure()) then
      disegna_figura(figure())
      stampa_menu()
      stampa_tot_figure(num_figura)
      sleep 200
    else
    end if
  elseif mouse_pulsante = 2 then
    ''tasto destro del mouse
    if num_figura < 10 then
      num_figura = num_figura + 1
      crea_figura(mouse_x, mouse_y, mouse_ruota, num_figura, figure())
      disegna_figura(figure())
      stampa_menu()
      stampa_tot_figure(num_figura)
      sleep 200
    else
      beep
    end if
  else
    ''non fare nulla
  end if
loop until verifica_mouse = 1

Modulo Vista

''nome file: vista.bas
''architettura MVC (Model-View-Controller): componente VISTA
''sito web: https://ciucoinformatico.home.blog/
''ultimo aggiornamento: 03/08/2019

/' DESCRIZIONE
Componente VISTA: modulo per la rappresentazione a video
del testo e delle figure.
'/

''Imposta una pagina video con la modalità grafica 19 per
''una risoluzione dello schermo di 800x600 pixels, una
''dimenzione testuale di 100 colonne x 37 righe e
''una profondità di colore a 32bpp.
screen 19, 32, 1

''posiziona il mouse al centro
setmouse 400, 300

''procedura per stampare a video il menu
sub stampa_menu()
  locate 1,1: print "Mouse:"
  locate 2, 1: print "tasto sinistro = seleziona le figure"
  locate 3, 1: print "tasto centrale = sposta le figure selezionate"
  locate 4, 1: print "tasto destro = crea una figura"
  locate 5, 1: print "Nota:"
  locate 6, 1: print "Per ingrandire o rimpicciolire la figura, prima"
  locate 7, 1: print "di crearla, usa la ruota."
  locate 36, 1: print "Per uscire dal programma porta il puntatore del";
  print " mouse fuori dalla finestra grafica."
end sub

''procedura per visualizzare il numero delle figure create
sub stampa_tot_figure(n as integer)
  locate 8, 1: print "Totale figure create:"; n; _
                     " (al massimo ne puoi creare 10)"
end sub

''procedura per visualizzare le informazioni del mouse
sub info_mouse(x as integer, y as integer, r as integer)
  locate 9, 1
  print "x:"; x; " y:"; y; " ruota:"; r
end sub

''procedura per disegnare le figure
sub disegna_figura(f() as figura)
  cls 1
  ''itera gli elementi del contenitore delle figure
  for i as integer = lbound(f) to ubound(f)
    if f(i).tipo = "quadrato" then
      line(f(i).coord_x, f(i).coord_y)-(f(i).coord_x + f(i).dimensione, f(i).coord_y), rgb(f(i).colore(1),f(i).colore(2),f(1).colore(3))
      line(f(i).coord_x + f(i).dimensione, f(i).coord_y)-(f(i).coord_x + f(i).dimensione, f(i).coord_y + f(i).dimensione), rgb(f(i).colore(1),f(i).colore(2),f(i).colore(3))
      line(f(i).coord_x + f(i).dimensione, f(i).coord_y + f(i).dimensione)-(f(i).coord_x, f(i).coord_y + f(i).dimensione), rgb(f(i).colore(1),f(i).colore(2),f(i).colore(3))
      line(f(i).coord_x, f(i).coord_y + f(i).dimensione)-(f(i).coord_x, f(i).coord_y), rgb(f(i).colore(1),f(i).colore(2),f(1).colore(3))
    end if
  next i
end sub

Modulo Modello

''nome file: modello.bas
''architettura MVC (Model-View-Controller): componente MODELLO
''sito web: https://ciucoinformatico.home.blog/
''ultimo aggiornamento: 03/08/2019

/' DESCRIZIONE
Modulo contenente le procedure per la gestione dei dati
e la logica di funzionamento del programma.
'/

''procedura per la creazione di una figure geometrica
sub crea_figura(x as integer, y as integer, r as integer, n as integer, f() as figura)
  f(n).tipo = "quadrato"
  f(n).coord_x = x
  f(n).coord_y = y
  f(n).dimensione = 80 + r
  f(n).colore(1) = 255
  f(n).colore(2) = 0
  f(n).colore(3) = 0
  f(n).selezione = false
end sub

''procedura per la selezione di una o più figure
sub seleziona(x as integer, y as integer, f() as figura)
  ''itera gli elementi del contenitore delle figure
  for i as integer = lbound(f) to ubound(f)
    if x >= f(i).coord_x and x <= (f(i).coord_x + f(i).dimensione) and y >= f(i).coord_y and y <= (f(i).coord_y + f(i).dimensione) then
       f(i).colore(2) = 255
       f(i).selezione = true
       f(i).selezione_x = x - f(i).coord_x
       f(i).selezione_y = y - f(i).coord_y
    else
      f(i).colore(2) = 0
      f(i).selezione = false
      f(i).selezione_x = 0
      f(i).selezione_y = 0       
    end if
  next i
end sub

''procedura per lo spostamento delle figure
function sposta(x as integer, y as integer, f() as figura) as boolean
  dim controllo as boolean
  controllo = false
  ''itera gli elementi del contenitore delle figure
  for i as integer = lbound(f) to ubound(f)
    if f(i).selezione = true then
      f(i).coord_x = x - f(i).selezione_x
      f(i).coord_y = y - f(i).selezione_y
      ''deselezione
      f(i).colore(2) = 0
      f(i).selezione = false
      f(i).selezione_x = 0
      f(i).selezione_y = 0       
      controllo = true     
    else
      ''non fare nulla
    end if
  next i
  return controllo 
end function

Bene. Per oggi ci fermiamo qui.

A rileggerci tra circa una settimana. 🙂

Il problema delle tre monete

Cominciamo la nostra avventura nel mondo degli algoritmi con questo primo problema che potete trovare a pagina 13 del testo Il pensiero computazionale – Dagli algoritmi al coding di Paolo Ferragina e Fabrizio Luccio.

Tra tre monete di identico aspetto una potrebbe essere falsa e di peso differente. Disponendo di una bilancia a due piatti per confrontare le monete tra loro si vuole individuare la moneta falsa se c’è, e in questo caso stabilire se pesa più o meno delle altre, mediante non più di due pesate.

Prima di partire a testa bassa immaginando un ipotetico algoritmo o, peggio ancora, cominciando a scrivere direttamente del codice, fermiamoci e leggiamo lentamente, più volte, e con molta attenzione l’enunciato del problema.

Cerchiamo quindi di individuare e ordinare le informazioni essenziali che rappresenteranno i nostri dati.

Poi sforziamoci di capire cosa ci viene chiesto, in modo tale da essere in grado di formulare con precisione le giuste domande a cui dovremo cercare di dare risposta con il nostro algoritmo tradotto in codice FreeBASIC.

Le giuste domande ci guidano nella definizione del nostro obiettivo.

Raccolta delle informazioni essenziali (dati)

Suddividiamo e ordiniamo le informazioni in punti:

  • «tre monete di identico aspetto»;
  • «una potrebbe essere falsa e di peso differente»;
  • «bilancia a due piatti per confrontare le monete»;
  • «non più di due pesate».

Una volta raccolte le informazioni essenziali che, come già detto, non sono altro che i dati su cui potremo operare, analizziamo i nostri punti.

Il primo, il terzo e il quarto non sembrano presentare ambiguità. Concentriamoci quindi sul secondo punto. Questo punto, se letto in maniera poco attenta, potrebbe crearci dei problemi nel momento in cui inizieremo a progettare l’algoritmo risolutivo: il testo, infatti, riferendosi alle monete ci dice che «una potrebbe essere falsa».

Stiamo bene attenti…

Cosa ci dice questa frase?

Che ci sono delle monete false?

No!

La frase semplicemente asserisce due cose:

  1. la prima è che non ci possono essere più monete false;
  2. la seconda è che potrebbero anche non essercene.

Quindi i casi sono soltanto due:

  1. o c’è una moneta falsa;
  2. oppure non ci sono monete false.

Il secondo punto rappresenta quindi una informazione chiave per la definizione del nostro obiettivo.

Dobbiamo quindi stare sempre attenti non soltanto a ciò che di esplicito ci dicono le informazioni in nostro possesso, ma anche a ciò che ci viene suggerito in modo implicito. Molto spesso sono proprio le informazioni implicite a sfuggirci con più facilità.

Ecco allora che è bene seguire questa regola:

È bene trasformare sempre le informazioni implicite in esplicite.

Proviamo quindi a farlo con il nostro secondo punto:

  • frase implicita: «una potrebbe essere falsa e di peso differente»;
  • frase esplicita: se esiste una moneta tra le tre date che ha un peso differente dalle altre due che per definizione devono avere in questo caso pari peso, allora questa è falsa.

Definizione precisa delle domande (obiettivo)

Torniamo all’enunciato del problema per cercare di scoprire qual è il nostro obiettivo: ovvero a quali domande dobbiamo rispondere.

Ecco le frasi che ci interessano:

  • «individuare la moneta falsa se c’è»;
  • «in questo caso stabilire se pesa più o meno delle altre».

Che possiamo tradurre in queste due domande:

  1. Esiste una moneta falsa?
  2. Se esiste, pesa di più o di meno delle altre due?

Progettazione di un algoritmo risolutivo (pensiero computazionale)

Bene, ora che abbiamo raccolto i dati e definito le domande a cui dobbiamo rispondere, proviamo ad immaginare il cuore del nostro algoritmo procedendo per passi.

  • la prima cosa da fare che dovrebbe venirci in mente è quella di identificare in qualche modo le nostre tre monete per poterle riconoscere senza ambiguità: diamo quindi i nomi di prima, seconda e terza moneta;
  • a questo punto possiamo procedere con la prima pesata (#1) tra la prima e la seconda moneta;
  • da questa prima operazione potremo ricavare esclusivamente due possibili soluzioni:
    1. le due monete hanno lo stesso peso;
    2. le due monete hanno peso differente.
  • a questo punto procediamo con la seconda pesata (#2) tra la prima moneta e la terza moneta;
  • ovviamente anche da questa operazione non potremo che ottenere le due possibili soluzioni che abbiamo visto in precedenza, ovvero:
    1. le due monete hanno lo stesso peso;
    2. le due monete hanno peso differente.

E adesso viene il bello: che ce ne facciamo con questi risultati?

Proviamo a spremere le meningi…

Tabella associativa

La cosa migliore da fare sembra essere quella di costruire una Tabella associativa che metta in relazione tutti i possibili risultati delle due pesate ottenendo quindi le diverse soluzioni possibili:

'Tabella associativa risultati pesate/soluzioni possibili
'             pesata #2
'  pesata #1 |  1  |  2
'      1     |  A  |  B
'      2     |  C  |  D

Analizziamo ora il significato delle soluzioni:

  • A: pesata #1 risultato 1, pesata #2 risultato 1 → la moneta falsa non esiste
  • B: pesata #1 risultato 1, pesata #2 risultato 2 → la terza moneta è falsa
  • C: pesata #1 risultato 2, pesata #2 risultato 1 → la seconda moneta è falsa
  • D: pesata #1 risultato 2, pesata #2 risultato 2 → la prima moneta è falsa

Se siamo abbastanza confidenti – ancora non possiamo infatti dirci sicuri al 100% – che il nostro algoritmo funzioni, allora possiamo a ragion veduta cominciare a scrivere il nostro codice sorgente. Farlo prima ci avrebbe fatto perdere soltanto del tempo. Provare per credere. 😉

Scrittura del codice (coding)

Bene. Riprendiamo in mano il nostro algoritmo e cominciamo a scrivere:

'identificazione delle monete attraverso la loro dichiarazione
dim as integer m1, m2, m3

'definisci il caso di test assegnando
'i pesi delle monete
input "quanto pesa la prima moneta"; m1
input "quanto pesa la seconda moneta"; m2
input "quanto pesa la terza moneta"; m3

'verifica correttezza specifica
if m1 <> m2 and m1 <> m3 and m2 <> m3 then
  print "Attenzione! Non stai rispettando la"
  print "specifica che prevede che al massimo"
  print "ci possa essere una sola moneta falsa"
  print "con peso differente."
  end 'esci dal programma
end if

'pesata #1 tra la prima e la seconda moneta
if m1 = m2 then
  'procediamo con la seconda pesata
  if m1 = m3 then
    'Soluzione A
    print "la moneta falsa non esiste"
  elseif m1 < m3 then
    'Soluzione B
    print "la terza moneta è falsa e pesa di più"
  else 'm1 > m3
    'Soluzione B
    print "la terza moneta è falsa e pesa di meno"
  end if
elseif m1 < m2 then
  'procediamo con la seconda pesata
  if m1 = m3 then
    'Soluzione C
    print "la seconda moneta è falsa e pesa di più"
  else 'm1 < m3
    'Soluzione D
    print "la prima moneta è falsa e pesa di meno"
  end if
else 'm1 > m2
  'procediamo con la seconda pesata
  if m1 = m3 then
    'Soluzione C
    print "la seconda moneta è falsa e pesa di meno"
  else 'm1 > m3
    'Soluzione D
    print "la prima moneta è falsa e pesa di più"
  end if
end if

Rivediamo più volte il codice prima di compilarlo. Se la compilazione dovesse fallire leggiamo bene il tipo di errore che il compilatore FreeBASIC ci segnala e operiamo le opportune correzioni al codice. Una volta che la compilazione ha successo possiamo finalmente eseguire il nostro codice e passare alla fase di collaudo del software.

Test

Per collaudare il nostro software dobbiamo testare tutte le diverse combinazioni dei risultati delle due pesate (caso di test) e confrontare quindi i risultati (i nostri print a video) con le possibili soluzioni (oracolo).

Per fare questo non dobbiamo inventarci nulla, ma semplicemente riprendere la nostra Tabella associativa e giocare con i pesi rispettando le specifiche date: ovvero stando attenti a non inserire pesi diversi per tutte e tre le monete.

Potete testare il codice anche su JDoodle cliccando qui.

Buon divertimento e a presto. 😉

Introduzione al pensiero computazionale

Comincia con questo primo articolo una nuova categoria del blog dedicata al pensiero computazionale.

Il pensiero computazionale è un processo mentale per la creazione di un algoritmo, ovvero di una sequenza finita di passi elementari (istruzioni), traducibili poi in un linguaggio di programmazione (codice sorgente) in grado di permettere ad un computer di risolvere un problema.

Gli articoli che andranno a comporre questa categoria prenderanno spunto dal testo Il pensiero computazionale – Dagli algoritmi al coding di Paolo Ferragina e Fabrizio Luccio.

Cercheremo quindi di risolvere alcuni problemi proposti nel libro per sviluppare le nostre capacità creative nella elaborazione degli algoritmi che poi andremo a tradurre in codice FreeBASIC.

Inoltre proveremo anche a risolvere i rompicapo proposti su Advent of Code. Le soluzioni potrete trovarle su GitHub, sia sullo spazio di JJFlash che sul mio.

Per testare il codice offline direttamente sulla propria macchina si rimanda all’articolo  FreeBASIC – esecuzione.

Per chi invece preferisce lavorare online, lo stesso codice verrà comunque messo a disposizione su JDoodle.