Abbiamo già dato 5 motivi per cui dovresti scegliere Android come piattaforma per iniziare a programmare.

Tuttavia, di recente ho avuto la possibilità di parlare assieme a Samuele Perricone, Carlo Lucera e Mirko di Lucia dei vantaggi e delle differenze dello sviluppo nativo vs il cross-platform (Flutter e React Native).

Molto in breve, con sviluppo nativo si intende lo sviluppo software per dispositivi mobile sulla piattaforma e i tool offerti dall’azienda stessa. Quindi Google per Android e Apple per iOS.

Con sviluppo cross-platform si intende invece lo sviluppo utilizzando tecnologie come Flutter o React-Native. Ovvero delle tecnologie sviluppate da terze parti, anche se nel caso di Flutter è proprio Google che l’ha scritto, con l’obiettivo di fornire framework che possano creare app che girino sia su Android che su iOS che eventualmente su altre piattaforme (desktop o web).

Un esempio di app Android

Nella diretta vengono affrontati molti temi interessanti, tuttavia in questo articolo volevo andare più in dettaglio sull’applicazione Android che ho realizzato. Spiegandone le scelte e le motivazioni, nella speranza che possa essere utile a chi vuole affacciarsi in questo mondo.

L’applicazione che ho realizzato la si può trovare in questo repository GitHub.

Il focus era quello di creare un’applicazione che permettesse la lettura di una serie di News e che poi si potesse aprire la vista di dettaglio.

Ti piacciono questi argomenti? Seguimi su LinkedIn per non perdere i prossimi articoli 🙂

Per fare ciò, ho scelto di utilizzare la Clean Architecture utilizzando il pattern MVVM, per quanto per questo esempio siano entrambi abbozzati.

Inoltre, ho scelto di non utilizzare alcun fragment. Proprio perché pure nell’app di esempio di Android questi non vengono più utilizzati, a favore dell’utilizzo esclusivo di schermate in Jetpack Compose, di cui abbiamo già parlato.

Ho scelto di non scrivere alcun tipo di test per tre motivi:

• volevo fare un esempio nel minor tempo possibile, al solo scopo di mostrare delle funzionalità.
• l’applicazione non verrà mantenuta
• i test sarebbero stati davvero minimali

Similmente ho scelto di non creare dei package, proprio per non aumentare la complessità inutilmente e rendere l’esempio più immediato.

Entrambe queste cose possono essere tuttavia trovate nell’app di esempio di Android.

DetailsScreen

Andando un po’ più nel merito vedremo che l’applicazione “inizia” da MainActivity che istanzia una schermata in Jetpack Compose chiamata DetailsScreen. Passandole un MainViewModel che viene creato grazie all’utilizzo di Hilt, un framework di Dependency Injection.

Questa schermata non è altro che un tipo di Scaffold che permette la creazione appunto di un bottomsheet. Ovvero di un elemento che si apre dal basso e che va a riempire parzialmente la pagina. Potendolo eventualmente draggare e alzare a piacimento.

Ci sono vari tipi di Scaffold che non sono solo quello utilizzato. Per citarne qualcuno:

• Scaffold “base” che si può utilizzare per definire la struttura dell’app mettendo una barra superiore e una barra inferiore.
• BackdropScaffold che è uno scaffold che ha una schermata superiore e una inferiore che si può “rivelare” a scelta dell’utente.

Dopo aver definito un po’ di proprietà, andiamo a definire il sheetContent che sarà ciò che andrà dentro il nostro BottomSheet. Quindi nel nostro caso la vista di dettaglio di una News.

Vedendo DetailScreen, che va definire la vista di dettaglio di una News, potresti chiederti perché ho utilizzato una LazyColumn considerato che c’è solo un item. Il motivo è banalmente quello di rendere scrollabile il contento della news che altrimenti sarebbe rimasto fisso.

All’interno invece di content andiamo a definire il contenuto della lista di News che invece definiamo come parametro in input.

NewsListScreen & NewsItemRow

Passiamo dunque al contenuto del nostro scaffold, ovvero NewsListScreen.

In questo caso abbiamo una colonna, che ci permette di mettere una sotto l’altra il titolo e la lista. Per chi è abituato all’XML non è altro che un LinearLayout verticale.

Sotto dunque abbiamo lista che prende newsList come “generatore” di item e per ogni item andiamo a creare un NewsItemRow e un Divider per avere una linea di separazione.

Ma non avremmo potuto mettere il Divider dentro NewsItemRow?

Si avremmo potuto. Anche qui, per certi sarebbe stato auspicabile, per altri meno. Lascio la scelta preferibile al lettore 🙂

Infine abbiamo dunque il contenuto della riga con un’immagine, del testo e anche la possibilità di premere la linea in modo da aprire la vista di dettaglio.

A concludere il file ho messo anche una Preview per poter visualizzare graficamente la lista. Come similmente è stato fatto in DetailScreen.

Va detto che non è l’unico modo in cui avremmo potuto realizzare un elenco di elementi. Jetpack Compose infatti ci mette a disposizione:

1. LazyRow: Funziona in modo simile a LazyColumn, ma per gli elenchi orizzontali. Carica e visualizza gli elementi orizzontalmente all’occorrenza.
2. LazyVerticalGrid: Usato per posizionare gli elementi in una griglia scrollabile verticalmente con più colonne. È utile quando si ha bisogno di visualizzare elementi in una griglia, come foto o icone, e si vuole sfruttare il caricamento lazy.
3. LazyHorizontalGrid (potrebbe essere stato aggiunto dopo l’ultima mia formazione): Simile a LazyVerticalGrid, ma per la creazione di griglie che scrollano orizzontalmente.

Ti piacciono questi argomenti? Seguimi su LinkedIn per non perdere i prossimi articoli 🙂

Pertanto non solo è molto semplice fare una lista di elementi ma anche le relative varianti sono immediate in Jetpack Compose, al contrario di com’erano prima in Android con gli XML, Adapter, ecc.

ViewModel, UseCase, ecc.

Quest’app purtroppo non rende molta giustizia al pattern MVVM o a come strutturare use case, repositories ecc.

Tuttavia, ho cercato di abbozzare un viewModel che appunto permette un’azione. Che è quella di aprire la schermata di dettaglio. E allo stesso tempo carica i dati utilizzando uno use case, ovvero NewsListUseCase. Che, per semplicità, in questo caso ritorna una lista statica di elementi.

Conclusioni

Sicuramente l’app di Now in Android fornisce un esempio molto più completo di un’app Android e della sua relativa struttura. Tuttavia, penso che avere un’app super semplice di riferimento possa aiutare per iniziare veramente con un set minimo di elementi. E non vedere direttamente un’app enterprise con vari moduli e una complessità molto alta persino per la splash screen 🙂

Viceversa se vogliamo andare più nel merito e capire come strutturare un’app complessa a fini aziendali, sicuramente Now in Android è lo standard e va studiato per offrire l’architettura più aggiornata possibile.

Spero che questo articolo ti possa essere stato utile, se così è stato non dimenticarti di seguirmi su LinkedIn per non perderti i prossimi articoli e i miei prossimi video 🙂