Creazione di un software con interfaccia grafica in grado di generare immagini vettoriali contenenti informazioni di un tweet.

Aspetto 0 - divisione del lavoro

Per una maggiore efficienza, il gruppo ha deciso di decidere la divisione del lavoro prima di iniziare. Ogni componente del gruppo si è occupato della scrittura del codice e in particolare Matteo Bini si è occupato della scrittura e pubblicazione della presente documentazione; Simone Tardiani si è occupato della produzione del filmato e Ryan Znaidi si è occupato della esposizione mediante slides.

Essendo il progetto ambizioso, il gruppo ha deciso che anche la scrittura del codice dovesse essere divisa tra i componenti. Infatti, i tre maggiori intrighi sono stati divisi equamente tra gli sviluppatori: a Matteo Bini è stata affidata la realizzazione grafica del programma, a Simone Tardiani la gestione delle APIs e dei contatti con Twitter, Inc. e, infine, Ryan Znaidi si è occupato della scrittura dei file immagine. La progettazione del layout del prodotto finito è stata prodotta sinergicamente, dal momento che il contenuto prodotto deve godere delle maggiori attenzioni.

Aspetto 1 - impostazione del layout grafico dell'immagine da produrre e prototipi vari

a cura di Ryan Znaidi

Basi del file SVG

Il linguaggio SVG è quasi totalmente XML, per questo può essere implementato in un file HTML o può essere creato come file standalone. A un codice SVG può essere linkato un file CSS esternamente, ma solo se è all'interno di un file HTML; se il file è standalone il codice CSS deve essere per forza incluso in un tag style al interno del file.

Il file SVG si apre con un tag svg (dato che questo linguaggio è estremamente simile a HTML per quanto riguarda la sintassi).

<svg width="720" height="1280" version="1.1" 
      xmlns="http://www.w3.org/2000/svg">
<!--CODICE-->
</svg>

Dentro questo tag verrà insrito qualunque cosa (come il tag html in HTML).

width/height: Definiscono l'altezza e la larghezza dell' immagine, paragonabile alla risoluzione.
version: Definisce la versione di codice SVG che andremo ad usare.
xmlns: Definisce il namespace dell' XML.

Ora si potrebbe gia iniziare a scrivere del codice per creare delle forme, tuttavia non avrebbero colore o attributi particolari, per questo serve il tag style per inserire dei CSS.

<svg width="720" height="1280" version="1.1" 
      xmlns="http://www.w3.org/2000/svg">
    <style>
        rect{
            fill: rgba(0,255,0,255);
        }
    </style>
    <rect width="720" height="1280" />
</svg>

Il tag style funziona allo stesso modo che in HTML.

Attributi più usati:

width/height: Scala della forma.
x/y: Posizione della forma.
class: Classe di CSS.
fill: Colore di una forma.
transform: insieme di attributi riguardanti rotazione, grandezza e posizione delle forme.

Tag più usati:

Rect
Circle
Line
Polygon
Points
Path
Text

Le animazioni nei file svg

Le animazioni in SVG vengono create attraverso il tag animate e animateTransform

Aspetto 2 - sviluppo e integrazione dell'interfaccia grafica

a cura di Matteo Bini

Per l'interfaccia grafica, ho deciso di utilizzare gtk, una libreria C/C++ che facilita lo sviluppo di questi applicativi con GUI. Per compilare il progetto, è infatti essenziale installare gtk dal sito ufficiale per il proprio sistema operativo. Io personalmente sviluppo su sistemi linux, ma il mio codice è compilabile nativamente anche per Windows e MacOS (anche con processori di ultima generazione Apple Silicon).

L'interfaccia costruita è estremamente semplice, composta da due widget adibiti all'input del id/link del tweet e un pulsante per confermare la scelta.

All'interno della funzione principale, inizio dichiarando le variabili dei widget che utilizzerò:

/* finestra */
GtkWidget *win = NULL;

/* widget per text input field */
GtkWidget *entry = NULL;

/* widget container (tipo div) */
GtkWidget *hbox = NULL;

/*bottone per confermare input */
GtkWidget *button1;

Successivamente, configuro e inizializzo gtk per il mio progetto:

g_log_set_handler("Gtk", 
  G_LOG_LEVEL_WARNING, 
  (GLogFunc) gtk_false, NULL);
gtk_init(&argc, &argv);
g_log_set_handler("Gtk", G_LOG_LEVEL_WARNING,
  g_log_default_handler, NULL);

A questo punto, sono pronto a inizializzare la mia finestra:

win = gtk_window_new(GTK_WINDOW_TOPLEVEL);
gtk_window_set_default_size(
  GTK_WINDOW(win), 300, 200);

Gli ultimi due parametri indicano la dimensione della finestra.

Il resto della documentazione è presente nel file di documentazione in pdf, adesso analizzeremo il meccanismo che lega e connette l'interfaccia utente al servizio che permette di scaricare i dati forniti dalle APIs di twitter.

Ho scritto una funzione appositamente per il data entry che, sostanzialmente, permette il supporto all'inserimento del codice identificativo di un tweet sia mediante link sia id (l'id è anche l'ultima parte del link, senza slash).

Questa funzione si chiama “button_clicked” e l'ho già menzionata sopra, esattamente quando configuravo la reazione del pulsante al click, come parametro del callback.

Una volta terminata la “pulizia” dell'id, la funzione invoca la funzione get_tweet, che permette di eseguire, tramite la bash di sistema, il codice python adibito all'iterazione con le APIs di Twitter, Inc., ecco il codice della funzione, per l'esecuzione del programma:

char command[L] = "python3 ./GetTweetInfo.py ";
strcat(command, tweet_id); // effettuo append dell'id
system(command); // eseguo il comando

Il comando che la bash riceverà è il seguente:

python3 ./GetTweetInfo.py 1516620752040116231

Dopo l'esecuzione del codice in python, il programma C proseguirà con la sua esecuzione prelevando da un file .csv salvato localmente. La funzione “system()” fa parte della C standard library (stdlib.h).

Aspetto 3 - relazione con Twitter, Inc. e modalità di connessione

a cura di Simone Tardiani

Purtroppo, le librerie C che facilitano questo tipo di servizi e interazione sono state tutte deprecate e inserite nella blacklist delle twitter developer guidelines, di conseguenza, per non cambiare progetto, abbiamo deciso di implementare questa funzione in python e comunicare con il resto del codice C tramite un file csv.

Per accedere ai server twitter, è necessario interagire con le APIs che l'azienda ha deciso di rendere disponibili pubblicamente. Per effettuare tutte le comunicazioni è stata necessaria una procedura di registrazione e autorizzazione al twitter developers portal che non mi dilungherò a spiegare ma che, alla fine di un processo di autenticazione e registrazione, fornisce quattro stringhe (token) che invieremo al server durante le richieste di dati (HTTP GET).

API è acronimo di Application Programming Interface, si tratta di software intermediario che permette a due applicazioni di comunicare tra di loro. Ogni volta che tramite una app come Facebook, invii un messaggio istantaneo, stai usando una API.

Il codice python adibito alla comunicazione con i server Twitter, Inc. è basato sull'utilizzo della libreria tweepy, che automatizza parte delle comunicazioni con le APIs.

È stato possibile rendere il codice open source tramite l'utilizzo di variabili d'ambiente (.env), che sono contenute in file che non vengono caricati su github e che permettono il salvataggio sicuro delle credenziali e dei dati sensibili di noi programmatori (i quattro token forniti dal portale sviluppatori twitter). Per accedere a questi file in modo sicuro e salvare il contenuto delle variabili, è necessaria la libreria python binaria getenv.

Le informazioni ottenute con le APIs, vengono salvate localmente in un file csv. Csv è acronimo di Comma Separated Values; si usa per salvare dati in un file di testo che possiamo immaginare come una tabella in cui le celle sono divise da una virgola. Proprio per questo, i file csv, di default, vengono aperti con programmi di spreadsheet (fogli di calcolo).