Ciao!
Abbiamo sviluppato una piccola app React Native per risolvere uno dei tipici problemi che affrontiamo ogni giorno
Ci serve una mano per aggiungere o sistemare delle feature che non siamo riusciti a includere nella prima release
Ecco il codice sorgente dell'app: https://my.tate.it/challenge/mobile-2022.zip
Puoi svilupparli te!
Al termine delle challenge inviaci il progetto tramite un archivio .zip per mail o il link a un repo Github / BitBucket / Gitlab
Puoi utilizzare ogni libreria o tool che reputi necessaria a raggiungere il tuo obiettivo
Cerca di approcciare il progetto come se stessi realizzando una soluzione da rilasciare in produzione, con le considerazioni del caso
Una nostra API ritorna delle informazioni relative a degli utenti e i loro metodi di pagamento
Ogni utente può avere più metodi di pagamento ma solo un metodo di pagamento di default
Nota: I nostri backend dev sono un pó gelosi dei dati dei nostri utenti per cui ci stanno dando delle informazioni generate a caso, va bene uguale, prima o poi avremo i dati veri
L'url dell'API è https://mz37bp4toc.execute-api.eu-west-1.amazonaws.com/challenge/users
L'API potrebbe non essere sempre disponibile, a volte ritornerá errori 500
I dati vengono ritornati come una collezione di oggetti, ad esempio:
{
id: "ba8f3d2b-d1dd-788f-32e3-97719e8b7f61",
name: "Milena",
surname: "Nannelli",
email: "wumtewu@mo.gs",
username: "milena.nannelli",
signup_date: "2017-12-24T00:01:41.159Z",
PaymentMethods: [
{
id: "12868bd7-0e59-6f22-379c-1a8cec2ece51",
type: "Banca Popolare",
currency: "eur",
name: "098-59-5816",
ending_with: 9236,
default: false
},
{
id: "352872cf-db14-811b-781d-e43f7c7f8abe",
type: "CC di nonna",
currency: "usd",
name: "600-17-3878",
ending_with: 5212,
default: true
}
]
}
Questi dati devono essere presentati all’interno di un elenco di utenti che mostra l'username e il nome del metodo di
pagamento di default.
Deve essere possibile mostrare maggiori informazioni riguardo un singolo utente e tutti i suoi metodi di pagamento
cliccando su un pulsante ‘Dettagli’ che apre una seconda schermata con le informazioni aggiuntive.
L’API ritorna 50 risultati alla volta per cui è necessario implementare un sistema paginazione per recuperare le altre
pagine dell’elenco. Si può richiedere una specifica pagina all’API passando in query string il parametro page
e
l’indicazione della pagina richiesta
https://mz37bp4toc.execute-api.eu-west-1.amazonaws.com/challenge/users?page=42
Non è possibile avere informazioni riguardo al numero di utenti totali per cui la paginazione potrà essere implementata tramite dei semplice Next/Previous.
Nota: I nostri backend dev ci tengono a ricordarti che le operazioni di filtro/ricerca devono essere eseguite localmente, un opzione API sarebbe meglio, ma ieri sera han fatto festa e non c'é stato il tempo per costruirla
Una volta che hai correttamente implementato una lista, integra le seguenti funzionalità:
Nota: I nostri frontend dev ci tengono a ricordarti che non scrivono mai codice contente bug 😉
Se React Native non fa per te oppure finisci presto potresti considerare di progettare una delle seguenti nuove feature, non scrivere del codice, piuttosto, raccontaci in un paragrafo o due come li costruiresti
A presto per la code review!