← Blog

La dashboard di trasparenza in tasca

Kotlin Multiplatform Compose Android Engineering
Scorrimento tra le schermate dell'app Transparency: panoramica, rimozioni governative, il browser dei dataset e un grafico live, tutto dentro la cornice di un telefono
Panoramica → rimozioni → browser dei dataset → un grafico live, tutto dalla stessa API.

La transparency query API ha una dashboard web già da un po'. Quello che le mancava era un'icona nella schermata iniziale. Così l'esploratore dei dati è ora un'app nativa — gira su Android e sul desktop, da un unico codebase Kotlin Multiplatform, e dialoga esattamente con la stessa API pubblica del sito web.

Puoi scaricare la build per Android e installarla via sideload già oggi.

Perché un'app, poi

La maggior parte di questi dati è qualcosa che si controlla, non qualcosa su cui ci si siede a studiare — una tendenza delle rimozioni, come i numeri di una piattaforma si confrontano con quelli di un'altra, come si presentano le richieste di un dato paese in questo periodo. È un'interazione da telefono, non da desktop. Una dashboard che presuppone uno schermo largo e un mouse rende lo sguardo veloce più difficile di quanto dovrebbe. L'app è costruita al contrario: prima il telefono, e i layout larghi sono ciò che si espande a partire da lì, anziché il contrario.

Un solo codebase, due piattaforme

Tutto ciò che conta vive in un unico source set condiviso: i DTO, il client Ktor che chiama /api/overview e /api/explore, il repository che costruisce ogni query e ogni schermata e grafico. Compose Multiplatform disegna quella stessa UI su Android e in una finestra desktop. Solo due cose sono specifiche per piattaforma — il punto di ingresso (un'Activity su Android, una finestra sul desktop) e il motore HTTP, collegato tramite expect/actual di Kotlin così che Android usi OkHttp e il desktop usi CIO. Non c'è una seconda implementazione dell'app da tenere sincronizzata, perché non c'è una seconda implementazione.

La stessa disciplina che tiene onesta l'API prosegue nel client: non invia mai SQL. Una query è un ExploreRequest strutturato — il nome di una tabella più filtri tipizzati, raggruppamenti e aggregazioni — che il server convalida e compila. L'app costruisce quelle richieste; non costruisce stringhe. Aggiungere una nuova vista di dataset è un metodo del repository, non una query scritta a mano.

Mobile-first, sul serio

Il layout misura la propria larghezza e si adatta. Al di sotto di una soglia è un telefono: navigazione in basso, colonna singola e un flusso Explore che va da lista a dettaglio come ci si aspetterebbe su uno schermo piccolo. Al di sopra, le stesse schermate si espandono in una barra di navigazione laterale e in una vista master-detail. Poiché le schermate sono stateless — lo stato è sollevato in un unico view-model che espone uno stato UI immutabile come StateFlow — gli stessi identici composable vengono disegnati su un telefono, in una finestra desktop e nell'harness di screenshot che ha prodotto i fotogrammi qui sopra.

I grafici sono disegnati sul canvas di Compose invece di essere presi da un servizio di immagini, così restano nitidi a qualsiasi densità e onesti su ciò che mostrano — le bande restano bande, i tassi non vengono mai sommati e un periodo senza dati si legge come assenza di dati anziché come uno zero.

I dettagli Android che vale la pena curare

Un'app nativa dovrebbe sembrare nativa, il che è un mucchio di piccole cose: un'icona di avvio adattiva con un livello monocromatico per le icone a tema, scorciatoie di avvio che portano dritti alla vista delle rimozioni o al browser dei dataset, il predictive-back così che il gesto di ritorno del sistema anticipi dove stai andando, e le impostazioni di lingua per singola app che compaiono nell'elenco di Android stesso — l'app è già tradotta in otto lingue, quindi rispetta quella che scegli lì. La build di release passa attraverso R8 con lo shrinking delle risorse, ed è così che un'app Compose completa si attesta intorno a 1,5 MB.

Come ottenerla

L'APK Android è un download diretto — abilita le installazioni dal browser e aprilo. Sono gli stessi dati, lo stesso modello di query e le stesse avvertenze della dashboard web; solo che ora vive nella tua schermata iniziale. La build desktop gira dallo stesso codebase, se preferisci averla in una finestra.

esc