Prova Tècnica Front-End amb Flutter

Aquesta és una prova tècnica per a un desenvolupament front-end utilitzant el framework Flutter. En aquesta prova es va implementar una aplicació que fa ús de placeholders per al disseny inicial, així com d’una API Rest per obtenir dades i mostrar-les a la interfaz.

Contingut

• Pantalles de la Prova
  

• Arquitectura de Classes i Assets

  • A continuació, es mostra la estructura de classes i els assets que formen part del projecte:

  

Característiques del Projecte

Ús de Provider per a la Gestió d'Estat

En aquest projecte s’ha utilitzat Provider com a sistema de gestió d'estat. Aquest patró permet una separació clara entre la lògica de negoci i la interfaz d'usuari, facilitant una millor escalabilitat i mantenibilitat de l'aplicació.

L'ús de Provider permet gestionar l'estat global de l'aplicació, com ara la càrrega de dades des de l'API, mantenint l'estructura del projecte neta i modular.

Arquitectura Clean Code

A l'hora de dissenyar el codi, he seguit els principis de Clean Code i SOLID per garantir un codi net, modular i fàcil de mantenir. Alguns dels principis clau que s'han aplicat són:

• Separació de responsabilitats: Les pantalles, la lògica de negoci i la interfaz d'usuari estan separades de manera clara.
• Clases petites i ben definides: Es fa servir la responsabilitat única per evitar que les classes creixin innecessàriament.
• Injecció de dependències: Utilitzant Provider, es fa una correcta injecció de dependències per evitar l'acoblament directe entre classes.
• Readabilitat: El codi està estructurat de manera clara i lògica, amb noms de variables i mètodes que reflecteixen la seva funcionalitat.

API Rest

L'aplicació fa ús d'una API Rest per obtenir dades en format JSON. En aquest cas, s'ha utilitzat el mètode http.get per realitzar les peticions i obtenir els resultats. A continuació es pot veure el procés bàsic de petició a l'API:

final response = await http.get(Uri.parse(apiUrl));
if (response.statusCode == 200) {
  // Processar la resposta
} else {
  throw Exception('Failed to load data');
}

Les dades obtingudes es gestionen a través de Provider, actualitzant l'estat de l'aplicació i mostrant-les a les pantalles corresponents.

Diseny de Pantalles

Les pantalles s'han dissenyat seguint una estructura simple i intuïtiva, amb un enfocament en l'usuari final. Els elements d'interfaz es mostren utilitzant widgets de Flutter com Container, Row, Column, i ListView, permetent una distribució flexible i adaptable a diferents dispositius.

Les pantalles inclouen:

• Pantalla de Login: On l'usuari pot introduir el seu correu i contrasenya.

• Pantalla de Catàleg de Productes: On es mostren els productes obtinguts des de l'API, amb opció de filtrar-los per categoria.

Milestones i Issues

Per garantir un seguiment adequat del desenvolupament, es van crear diversos** milestones i issues** a GitHub:

Milestone

• Lògica de pantalles

• Diseny Pantalles