Procés de desenvolupament de myLeague

Alt Text

Introducció

Taula de continguts

Disseny i desenvolupament de la base de dades
  1. Primers taules de la base de dades
  2. Lògica d’actualització de les dades
  3. Afegir les taules “players i “leagues”
  4. Reptes i possibles millores futures
Desenvolupament del front-end
  1. Objectius
  2. Elecció de framework i llibreries
  3. Estructura del projecte

Disseny i desenvolupament de la base de dades

Primeres taules de la base de dades

Vaig triar supabase perquè facilita molt el disseny i creació d’una base de dades. És un servei que té una capa gratuïta i que ofereix una interfície per crear i administrar una base de dades postgreSQL allotjada en un servidor, i una api REST preparada. També ofereix un plugin per consumir la API des de javascript.

Vaig començar doncs amb la creació de les primeres taules “teams” i “matches”, la mínima expressió del projecte:

Després vaig adonar-me que havia de definir una lògica que s’encarregués d’actualitzar la informació: quan s’actualitza un partit, s’ha d’actualitzar la informació dels equips que hi han participat. Vaig optar per tenir aquesta lògica directament en la base de dades perquè vaig considerar que era més fàcil evitar errors de sincronització. Tinc clar que si una cosa bona té SQL és la coherència de dades. En realitat son 4 les característiques “ACID”: atomicitat, coherència, aïllament i durabilitat.

Lògica d’actualització de les dades

Vaig començar a desenvolupar la lògica que s’encarregaria d’actualizar la informació cada cop que s’actualitzava un partit. A mesura que feia la lògica d’actualització de les dades vaig anar afegint més informació que trobava que era important:

Aquí tens la funció update_teams_row com a exemple. Aquesta funció permet assegurar que les estadístiques dels equips es mantinguin correctament actualitzades després de cada partit.

DECLARE
 match_row record;
 team record;
 index int:=1;
BEGIN
 UPDATE teams SET
 goals_scored \= 0,
 goals_scored_away \= 0,
 goals_scored_home \= 0,
 goals_conceded \= 0,
 goals_conceded_away \= 0,
 goals_conceded_home \= 0,
 points \= 0,
 wins \= 0,
 defeats \= 0,
 draws \= 0,
 played_matches \= 0
 WHERE teams.id=teams.id;

FOR match_row in SELECT \* FROM matches where played \= true LOOP
 CALL update_teams_row(match_row);
 END LOOP;

FOR team in SELECT \* FROM teams LOOP
 UPDATE teams SET
 goals_conceded \= team.goals_conceded_home \+ team.goals_conceded_away,
 goals_scored \= team.goals_scored_home \+ team.goals_scored_away
 where id \= team.id;
 END LOOP;
 return NEW;
END;

Explicació de la lògica:

  1. Primer establim totes les columnes de tots els equips a zero.
  2. Després recorrem tots els partits que s’han jugat (on played = true) i cridem la funció update_teams_row(match_row) que s’encarregarà d’actualitzar les estadístiques dels equips que van participar en cadascun d’aquests partits.
  3. Finalment, recorrem tots els equips per sumar els gols a favor i en contra, a casa i a fora, i actualitzem aquestes dades.

Afegir les taules “players i “leagues”

Després vaig afegir la taula “players”, per afegir les dades dels jugadors dels equips i així poder oferir estadístiques.

Posteriorment vaig crear la taula “leagues”, que va permetre escalar i poder guardar més d’una lliga. Finalment han sigut 4 taules:

Poc a poc vaig anar afegir més dades i més complexitat en les taules i les funcions per a mantenir la coherència de les dades.
En total vaig escriure 10 funcions i 6 triggers.

Si t’interessa, pots consultar la base de dades completa en aquest [enllaç](https://github.com/eloicasamayor/my-league).

Reptes i possibles millores futures

Desenvolupament del front-end

Objectius

  1. Interactivitat i usabilitat Vull crear una aplicació molt interactiva i fàcil d’usar, amb una navegació senzilla entre les pàgines i apartats. La introducció de dades serà directa, evitant informació innecessària per assegurar una experiència intuitiva.
  2. Aplicació adaptativa L’objectiu és desenvolupar una aplicació que s’adapti perfectament a qualsevol pantalla. L’elecció de Tailwind CSS serà clau per aconseguir-ho, permetent una disseny responsiu i flexible.
  3. Rapidesa L’aplicació ha de ser ràpida tant en l’obtenció com en l’emmagatzematge de dades, garantint una experiència fluida. També, vull informar l’usuari durant els processos de càrrega o enviament d’informació.
  4. Accessibilitat L’aplicació serà dissenyada per ser accessible, permetent el seu ús amb el teclat, amb el mínim suport del ratolí. Inclourà opcions de canviar entre mode clar i fosc.
  5. Estètica moderna i disseny coherent La interfície visual serà atractiva i coherent, amb un disseny adaptat al públic objectiu, que consisteix principalment en homes joves.
  6. Escalabilitat Desenvoluparé una arquitectura que permeti l’addició de noves funcionalitats de manera senzilla a mesura que el projecte creixi, assegurant així la seva sostenibilitat i adaptabilitat a futurs requisits.

Elecció de framework i llibreries

Estructura del projecte 

./components:
Alert.jsx           Footer.jsx          icons/               LeagueDayMatchings.jsx  MatchesList.jsx       PageLayout.jsx      StepsNavigation.jsx
Classification.jsx  forms/              index.jsx            LeaguesList.jsx         Modal.jsx             PlayersList.jsx     TeamsList.jsx
Header.jsx          LeagueDayDate.jsx   MatchesCalendar.jsx  NewLeagueInfo.jsx       SortableHeadCell.jsx  WeekDaySelect.jsx

./components/forms:
EditLeagueForm.jsx  EditPhotoForm.jsx   EditTeamForm.jsx  NewMatchForm.jsx   NewTeamForm.jsx
EditMatchForm.jsx   EditPlayerForm.jsx  index.jsx         NewPlayerForm.jsx

./components/icons:
ArrowBackIcon.jsx   ArrowUpDown.jsx      ExclamationCircleIcon.jsx  Logo.jsx        PlusIcon.jsx      UpdateIcon.jsx
ArrowDownDoble.jsx  CircleCheckIcon.jsx  GithubIcon.jsx             MoreIcon.jsx    SettingsIcon.jsx  UploadIcon.jsx
ArrowLeft.jsx       DragDropIcon.jsx     HomeIcon.jsx               PencilIcon.jsx  TeamIcon.jsx      UserIcon.jsx
ArrowRight.jsx      EmailIcon.jsx        index.jsx                  PhotoIcon.jsx   TrashIcon.jsx

./helpers:
addDatesToMatchings.js  getMatchings.js  nameToUrlName.js  setMessage.jsx  truncateString.js       validateNewLeague.js
getFirstMatchDay.js     index.js         saveNewLeague.js  shuffle.js      useWindowDimensions.js

./pages:
index.js  LeaguePage.jsx  LeaguesPage.jsx  LoginPage.jsx  NewLeaguePage.jsx  TeamPage.jsx  UpdatePassword.jsx

./redux:
api/  auth/  constants.js  index.js  store.js

./redux/api:
apiSlice.js  index.js  leagues.js  matches.js  players.js  teams.js

./redux/auth:
slice.js