DART è un lin­guag­gio di pro­gram­ma­zio­ne giovane che ha già preso piede, so­prat­tut­to nel mondo dello sviluppo di ap­pli­ca­zio­ni mobile. Google ha creato un Software De­ve­lo­p­ment Kit (SDK) basato su DART chiamato Flutter, favorendo così l’adozione e la dif­fu­sio­ne del proprio lin­guag­gio di pro­gram­ma­zio­ne. Un im­por­tan­te vantaggio è che può essere uti­liz­za­to per svi­lup­pa­re ap­pli­ca­zio­ni per tutti i sistemi operativi mobili, quindi per Apple iOS, Google Android e Microsoft Windows Phone.

Se de­si­de­ra­te imparare a pro­gram­ma­re con DART, il nostro tutorial vi renderà l’ap­pren­di­men­to un gioco da ragazzi. Per un’in­fa­ri­na­tu­ra generale sul lin­guag­gio di pro­gram­ma­zio­ne di Google prima di muovere i primi passi, potete con­sul­ta­re il nostro articolo Cos’è DART?. Maggiori in­for­ma­zio­ni sono inoltre di­spo­ni­bi­li nel nostro articolo sul Software De­ve­lo­p­ment Kit Flutter di Google.

Le origini di DART

Ini­zial­men­te DART era stato pensato per colmare le lacune di Ja­va­Script che non potevano più essere mo­di­fi­ca­te in­ter­na­men­te al lin­guag­gio di pro­gram­ma­zio­ne. A partire da questo pre­sup­po­sto, gli svi­lup­pa­to­ri ri­cer­ca­va­no quindi modi per sem­pli­fi­ca­re o unire de­ter­mi­na­te logiche interne di Ja­va­Script, senza però perdere di vista l’ampia gamma di pos­si­bi­li­tà che offre. Con­si­de­ria­mo il seguente esempio. In Ja­va­Script ri­tro­via­mo i seguenti elementi:

getElementsById()
getElementsByTagName()
getElementsByName()
getElementsByClassName()
querySelector()
querySelectorAll()
document.links
document.images
document.forms
document.scripts
formElement.elements
selectElement.options

Mentre in DART restano solo:

elem.query('#foo');
elem.queryAll('.foo');

Primi passi con DART

Un lin­guag­gio di pro­gram­ma­zio­ne è composto da una serie di “vocaboli” che con­sen­to­no di strut­tu­ra­re e dare forma a dati e processi (algoritmi). A questo scopo, il lin­guag­gio sfrutta un numero stabilito di comandi (le variabili), che non devono essere uti­liz­za­ti per altri scopi. Alcuni esempi di comandi in DART sono “var”, “int”, “if”, “else” o “while”. Altri dettagli sull’ar­chi­tet­tu­ra dei linguaggi di pro­gram­ma­zio­ne sono di­spo­ni­bi­li nella nostra guida sui linguaggi di pro­gram­ma­zio­ne web. Dalla com­bi­na­zio­ne tra variabili, operatori, con­di­zio­ni, funzioni e molto altro ancora emerge il codice che deve fornire un de­ter­mi­na­to risultato.

DART nella pratica

Vi pre­sen­tia­mo in­nan­zi­tut­to una serie di esempi facili per imparare la pro­gram­ma­zio­ne con DART, che potrete poi ampliare a vostro piacere e uti­liz­za­re per fare degli espe­ri­men­ti. Ogni routine di pro­gram­ma­zio­ne inizia con la richiesta della funzione prin­ci­pa­le. Qui nell’esempio vedete la richiesta classica del mondo della pro­gram­ma­zio­ne:

void main () {
    print("Hello World!"); 
}

Prima della funzione “main” troviamo il tipo re­sti­tui­to “void”, che non re­sti­tui­sce alcun valore. Le parentesi tonde “()” indicano una funzione, mentre nelle parantesi graffe “{...}” viene eseguito il codice DART, in questo caso, il comando per eseguire qualcosa sullo schermo. Ciò che appare dopo le barre oblique “//” è un commento che rimane in­vi­si­bi­le; lo stesso risultato si ottiene con “/*questo è un commento su più righe...*/”, già noto da PHP. Questo permette di com­men­ta­re in modo strut­tu­ra­to il codice, come pro­me­mo­ria per sé stessi o per gli altri svi­lup­pa­to­ri, fa­ci­li­tan­do no­te­vol­men­te il lavoro di squadra.

N.B.

Come in Java, C e PHP, tutti gli statement di DART devono terminare con un punto e virgola.

Provate a eseguire gli esempi che seguono. Per farlo potete uti­liz­za­re la piat­ta­for­ma gratuita open source DartPad, la quale offre anche il vantaggio di numerare le righe del programma e di vi­sua­liz­za­re eventuali messaggi di errore. In un menu a scomparsa sono inoltre di­spo­ni­bi­li diversi esempi di pro­gram­ma­zio­ne.

Nei seguenti esempi di codice, il testo “void main() {…}” non viene più riportato.

De­fi­ni­zio­ne e uso delle variabili

Le variabili vengono uti­liz­za­te per definire le singole grandezze. Co­min­cia­mo con i numeri.

var mySize = 174;

Abbiamo definito una nuova variabile, “mySize” (in italiano “la mia taglia”), a cui è stato assegnato il valore “174”. Questa variabile viene con­ser­va­ta nel codice con il suo valore fino a quando non viene mo­di­fi­ca­ta at­ti­va­men­te da operatori o funzioni. Per eseguire il valore entra in gioco il comando “print”.

var mySize = 174;
print(mySize);
int yourSize = 174;
print(yourSize);
double thisSize = 1.74;
print(thisSize);
dynamic oneSize = 'Onehundredseventyfor' + ': ' + '174';
print(oneSize);

Dall’insieme delle righe 3, 6, 9 e 12 e del comando “print” nel DartPad ottenete il risultato mostrato nella console:

Immagine: Programmare con DART: il comando print
Gli iden­ti­fi­ca­to­ri delle variabili possono essere scelti (quasi) li­be­ra­men­te. Questo sem­pli­fi­ca la lettura e la cor­re­zio­ne del codice di pro­gram­ma­zio­ne.

Esistono diversi tipi di variabili in DART. Possono essere numeri interi (“int”) o numeri a virgola mobile (“double”). Il tipo di variabile “dynamic” può assumere diversi valori ed espres­sio­ni nel codice. Di righe vuote, ta­bu­la­to­ri o paragrafi invece non viene tenuto conto nell’ese­cu­zio­ne della routine. Per questo motivo, i valori vengono riportati uno sotto all’altro nella console a destra.

Se si assegna un valore sbagliato a un de­ter­mi­na­to tipo di variabile si riceverà nel DartPad un messaggio di errore con una de­scri­zio­ne cor­ri­spon­den­te:

int mySize = 1.74; // integer is expected, but double comes
print(mySize);
Immagine: Programmare con DART: messaggio di errore
DartPad segnala un valore sbagliato con “1 issue(s)”. Nell’esempio viene segnalato quindi che non è possibile assegnare un numero a virgola mobile a una variabile a numero intero. L’errore compare nella riga 2 del codice, il numero errato viene sot­to­li­nea­to in arancione.
N.B.

Gli iden­ti­fi­ca­to­ri (Iden­ti­fier) delle variabili uti­liz­za­te non devono contenere parole riservate. Anche numeri in posizioni iniziali, così come spazi e caratteri speciali, sono da evitare. Fanno eccezione il trattino basso “_” e il simbolo del dollaro “$”. Gli iden­ti­fi­ca­to­ri di­stin­guo­no tra maiuscole e minuscole e devono essere univoci.

Stringhe di caratteri

Con le stringhe di caratteri, ovvero il tipo di dato “String” (at­ten­zio­ne alla S maiuscola), è possibile elaborare qualunque carattere nella pro­gram­ma­zio­ne DART. A questo proposito, vi mostriamo subito come pro­gram­ma­re diverse righe for­mat­ta­te in DART.

String text1 = 'this is a single line string';
String text2 = '''this is a multiline
	line string with a break''';
print(text1);
print(text2);
Immagine: Programmare con DART: testo a una e più righe
Testo a una e più righe in DART. Per farlo, dovete uti­liz­za­re un numero specifico di vir­go­let­te.

Per ri­pro­dur­re il testo mediante String è ne­ces­sa­rio rac­chiu­de­re il contenuto de­si­de­ra­to tra vir­go­let­te semplici o normali: ' o ". Se il testo inizia e finisce invece con tre vir­go­let­te (''' o """), DART inserirà in quel punto del testo un ritorno a capo. Dunque avete la pos­si­bi­li­tà di for­mat­ta­re la vi­sua­liz­za­zio­ne del testo.

Consiglio

Le vir­go­let­te ti­po­gra­fi­che (spesso nella corretta versione inglese) possono essere inserite fa­cil­men­te nel testo con le com­bi­na­zio­ni da tastiera di Windows [Alt] + 0147 (di apertura) e [Alt] + 0148 (di chiusura). Queste vengono anche vi­sua­liz­za­te come tali in una stringa di DART. In macOS è possibile digitare queste vir­go­let­te con le com­bi­na­zio­ni da tastiera [Alt] +[Shift] + [W] e [Alt] + [2].

Numeri

Ora che abbiamo imparato a definire le variabili, vediamo come uti­liz­zar­le per eseguire dei calcoli. Numeri o anche espres­sio­ni possono essere sommate. Per calcolare i risultati, DART sfrutta gli operatori arit­me­ti­ci. Uno scenario possibile potrebbe, ad esempio, essere quello di un cliente che aggiunge 3 volte lo stesso articolo al carrello nel negozio online. In questo caso, la funzione carrello deve mol­ti­pli­ca­re il prezzo unitario per “3” e indicare alla fine del calcolo il prezzo totale. Nel codice seguente potete vedere i diversi metodi per unire i dati, oltre ai commenti rilevanti nelle singole righe:

String product = 'calendar';
String curr = 'EUR';
String isFor = 'for'; // 3 strings for later print use
double singlePrice = 7.96; // floating comma for single price
int amount = 3; // number of ordered calendars
var totalPrice = (amount*singlePrice); // calculation of the total price with multiplier *
var invTotal = '$totalPrice $curr'; /* Merging of two variables in a new one by adding a $ sign before the old variables.*/
var result = '$amount $product\s'; //also plus adding a letter “s” for plural
print (invTotal); // creating the screen output
print (isFor);
print (result);
Immagine: Programmare con DART: calcolo semplice
Esempio di un calcolo semplice combinato con elementi testuali.

Possiamo vedere Strings, numeri interi e a virgola mobile, nonché l’unione di elementi di pro­gram­ma­zio­ne che danno luogo a variabili nuove. Quando unite due variabili esistenti per crearne una nuova dovete fare at­ten­zio­ne a una par­ti­co­la­ri­tà per ottenere sullo schermo il risultato sperato: le variabili già definite devono essere precedute dal simbolo del dollaro “$” (righe 8 e 9 nell’immagine di DartPad di sopra).

Impostare con­di­zio­ni

Le con­di­zio­ni giocano un ruolo im­por­tan­te nella pro­gram­ma­zio­ne. Vi spie­ghia­mo come pro­gram­ma­re una con­di­zio­ne in DART. Il risultato di una con­di­zio­ne è sempre una decisione, nel senso che se (if) si verifica il caso A, compare la vi­sua­liz­za­zio­ne X sullo schermo; se si verifica il caso B (elseif), allora appare la vi­sua­liz­za­zio­ne Y; se si ve­ri­fi­ca­no entrambe (else), compare la vista Z. Con i comandi DART inseriti tra parentesi ottenete il codice seguente:

var tOol = 'Glove';
if (tOol == 'Pliers' || tOol == 'Ruler') 
    { print('That is a tool.');
    } else if (tOol == 'brush') 
    { print('That is a tool.');    
    } else { print('That is not a tool.');
    }
}

che si presenta così in DartPad:

Immagine: Programmare con DART: uso di condizioni
Le con­di­zio­ni re­sti­tui­sco­no vi­sua­liz­za­zio­ni pia­ni­fi­ca­te sullo schermo.

Ampliate voi stessi le vostre co­no­scen­ze nel DART tutorial e so­sti­tui­te nel DartPad la parola “guanto” a turno con “pinza”, “riga” o “pennello” e osservate i cam­bia­men­ti della vi­sua­liz­za­zio­ne pia­ni­fi­ca­ta sulla console. Potete ampliare questo esempio a piacere e ap­pli­car­lo a diversi casi. Una novità è l’operatore “||”, che sta per l’espres­sio­ne logica “o”, che in DART non deve essere usato come la parola “OR”.

Sali e scendi

Per pro­gram­ma­re la sezione seguente, dobbiamo conoscere i co­sid­det­ti in­cre­men­ti e de­cre­men­ti di DART. Si tratta dell’in­gran­di­men­to o della riduzione graduali di un valore di partenza. Nell’esempio, mo­di­fi­che­re­mo il numero 50 con l’aiuto degli operatori “++” e “--”.

var upAndDown = 50;
print (upAndDown);
print('----');
++upAndDown;
print (upAndDown);
print('----');
upAndDown++;
print (upAndDown);
print('----');
--upAndDown;
print (upAndDown);
print('----');
upAndDown--;
print (upAndDown);
Immagine: Programmare con DART: incrementare e ridurre un numero
Il numero 50 viene in­gran­di­to e ridotto in modo definito.

Qui vedete inoltre che è possibile vi­sua­liz­za­re una stringa di caratteri semplice anche senza definirla in anticipo, in­se­ren­do­la sem­pli­ce­men­te tra parentesi tonde con vir­go­let­te per ciascun “print” nel codice. In questo caso serve soltanto per dare al risultato una struttura visiva. Arrivati a questo punto siete pronti per pro­gram­ma­re dei cicli.

Cicli

I cicli sono im­por­tan­ti routine di pro­gram­ma­zio­ne utili, ad esempio, per ef­fet­tua­re confronti con le di­men­sio­ni esistenti. A tale scopo, si utilizza la seguente “for­mu­la­zio­ne”: abbiamo un valore A, che mo­di­fi­chia­mo fino a quando non viene raggiunta la grandezza (lo stato) B. Tradotto in codice DART, otteniamo questo:

String myLabel = ' pieces';
var piece = 3;
while (piece < 12) {
var allThisStuff = '$piece $myLabel';
print(allThisStuff);
piece++;
    }

Ma cosa succede in DART?

Immagine: Programmare con DART: cicli
: I cicli vengono eseguiti fino a quando non è stata sod­di­sfat­ta una de­ter­mi­na­ta con­di­zio­ne.

Anche in questo esempio potremmo uti­liz­za­re delle con­di­zio­ni, se abbiamo, ad esempio, termini che sono dif­fe­ren­zia­ti in singolare e plurale:

int amount = 1;
var itemSing = 'blouse';
var itemPlural = 'blouses';
if (amount == 1) 
    { print(itemSing);
    } else { print(itemPlural);
    }

Per imparare a pro­gram­ma­re in DART, copiate questo esempio di codice nel DartPad e so­sti­tui­te la variabile a numero intero “quantità” in modo che l’articolo “camicetta” appaia al singolare o al plurale.

Pa­no­ra­mi­ca degli operatori DART

Abbiamo già co­no­sciu­to diversi operatori per pro­gram­ma­re in DART. Nella tabella seguente vi forniamo una pa­no­ra­mi­ca degli operatori più im­por­tan­ti.

La variabile “muster” nella tabella è impostata sul valore 35.

var muster = 35;
Tipo di operatore Iden­ti­fi­ca­to­re Simbolo Esempio Risultato
Calcoli Addizione + var muster + 2; 37
Sot­tra­zio­ne - var muster - 2; 33
Mol­ti­pli­ca­zio­ne * var muster * 3; 105
Divisione / var muster / 7; 5
Divisione numeri interi ~/ var muster ~/ 7; 11
In­cre­men­to di += var muster += 6; 41
Riduzione di -= var muster -= 7; 28
Mol­ti­pli­ca­zio­ne per *= var muster *= 2; 70
Divisione per /= var muster /= 7; 5
Com­pa­ra­zio­ni Identico == var muster == 35; True
Diverso != var muster != 44; True
Minore di < var muster < 44; True
Minore o uguale <= var muster <= 33; False
Maggiore di > 44 > var muster; True
Maggiore o uguale >= var muster>=23; False
Modifiche In­cre­men­to ++ ++var muster; 36
In­cre­men­to ++ var muster++; 36
Riduzione -- --var muster; 34
Riduzione -- var muster--; 34
Valore rimanente % %var muster%3; 2
Logica E && muster1 && muster2 … e
O muster1 muster2 … o
Negazione ! muster1 ! muster2 … non è
Con­di­zio­ni Se allora ? … : var y = muster < 34 ? 15 : 10; 10
Se allora ? … : var y = muster < 36 ? 15 : 10; 15
Controllo per Null ?? var y = muster ?? 9; 35
Controllo per Null ?? var z = 0 ?? muster; 35

Con queste co­no­scen­ze di base avete gli strumenti per con­ti­nua­re lo studio di DART e l’obiettivo di svi­lup­pa­re la vostra app non è più così lontano.

Vai al menu prin­ci­pa­le