1. Introducció.
2. Arquitectura.
3. Components d'Angular.
4. Backend i BBDD.
5. Configuració i requisits.
6. Us i exemples.
7. Proves.
8. Desplegament.
9. Manteniment.
10. Referencies.
11. Anexos.
El projecte s'ha desenvolupat per tal de que els treballadors de l'empresa ACME puguin reservar sales amb la finalitat de reunir-se amb altres treballadors de l'empresa, concretant dia i hora d'inici. Així doncs, el usuari pot reservar la sala desitjada i a la vegada, també pot veure a quines hores la sala no està disponible.
El projecte ha sigut desenvolupat amb les següents tecnologies: AspNet.Core, C#, SQL Server i el framework Angular, de les que parlarem més endavant.
Els objectius del projecte s'han anat afegint en el Trello, progressivament. En les primeres setmanes del projecte, els objectius no eren altres que crear el projecte i conseguir objectius petits, com per exemple: que un usuari es pogués registrar i això es guardes correctament a la BBDD. Durant la duració del propi projecte, els objectius han anat agafant més ambició. Un bon exemple seria la imatge del perfil. Un cop creat el perfil, vam veure que els usuaris de l'empresa necessitaven afegir la seva imatge de perfil i per això vam investigar com es tractava una imatge a la BBDD, per llavors passar-la al component adient, en aquest cas profile.component.ts.
En aquest apartat entrarem en detall en quant a la arquitectura a capes, utilitzada per desenvolupar el projecte. També parlarem amb més profunditat en les tecnologies utilitzades, anomenades en el apartat anterior.
Hem seguit aquesta arquitectura tant per el projecte com per organitzar-nos de la millor manera possible. Dintre del projecte, les capes s'han separat de la següent manera:
- El frontend s’ha portat a terme gràcies a la tecnología anomenada Angular, basada en una altre, anomenada Typescript. Les dues tecnologies han aportat al projecte una interacció per l’usuari. Typescript ha servit per desenvolupar la lògica del interfaz d'usuari i en canvi, l'Angular s'ha encarregat de la construcció de la interfície d'usuari i de la interacció.
- En la part més pura de fulls d’estils, s’ha utilitzat HTML i CSS, tot i que recordem que això no es considera com a tal una tecnología, simplement defineixen les seccions de la pàgina a més dels estils.
- També s’ha utilitzat Bootstrap, una llibreria de clases i ID’s ja predefinides que ens ha agilitzat la feina a la hora de crear estils diferents dintre del projecte.
- Finalment, s'ha afegit un altre paquet extern, anomenat FontAwsome. Aquest paquet ens permet utilitzar unes icones per el nostre projecte en diferents estils, en el projecte s'ha utilitzat l'estil duotone. Hem fet servir la versió 6.1.1.
- Per desenvolupar aquesta capa hem utilitzat ASP.NET Core i C# per tal de tenir una coordinació entre les capes existents.
- Aquesta capa és l'unica que interactua amb les dues restants. Si es conecta a la BBDD, es guarda informació i llavors, passant per la capa de presentacció, imprimeix la informació.
- Es pot considerar doncs, una capa prou important dintre d'aquest projecte ja que durant el procés de reserva, la lògica pesa força. Tot i així no podem dir que és la capa més important, ja que en casos força concrets, no necessita estar en coordinació amb la capa de presentació.
- Hem utilitzat SQL Server juntament amb Entity Framework Core per tal de dur a terme una base de dades per el tipus de projecte desenvolupat. SQL Server ens ha facilitat l'interacció amb la BBDD, mentres que Entity Framework Core, a partir d'ara anomenat EF Core, ens ha proporcionat la opció de mapejar taules per fer-les models d'objectes (ORM).
- Com que es treballa amb dades sensibles, com poden ser perfectament les contrasenyes de cada usuari, s’han integrat al projecte i per tant, a la BBDD, tokens. Així doncs, cal deixar clar que les contrasenyes no es guarden mai com un text pla, sino que un cop creat el compte, la contrasenya es transforma en un token. És important recordar que cada usuari tindrà un token únic, protegint així el compte d’usuari i la seguretat del projecte.
3.1 Índex.
3.2 Inici i registre.
3.3 Pàgina principal.
3.4 Barres de navegació.
3.5 Canvi de dades i perfil.
3.6 Paisos, ciutats, oficines i sales.
3.7 Reserva i derivats.
3.8 Administrador i els seus modificadors.
3.9 CRUD.
3.10 Configuració de microserveis.
3.11 Configuració de moduls i enrutament.
Com que el projecte es tracta d'una empresa que reserva sales per els seus treballadors, a la portada només podem veure el nom de l'empresa i dos botons.
Tecnologies i biblioteques utilitzades: Dintre d'aquest component s'ha utilitzat Bootstrap en els botons i també en el container del component.
Funcionalitats principals: Aquest component no té cap funcionalitat ja que com a .
Aquest arxiu és el módul arrel del framework d'Angular. En aquest arxiu s'hi defineixen móduls, components, serveis i altres dependencies que es troben dintre de l'aplicació.
Funcionalitats principals:
- Implementació de móduls, components i serveis del projecte de l'aplicació d'Angular.
- S'estableix una lògica global dintre del mateix projecte.
- Configurar móduls de tercers, com per exemple Angular Material, que s'utilitza en el fer-reserva a l'hora d'escollir la sala.
Aquest arxiu és on escollirem una ruta de l'entorn del client amb les corresponents vistes de l'aplicació. En definitiva, aquest arxiu no és més que un módul d'enrutament.
Funcionalitats principals:
- S'enllaçen components i URL's, fent que depenent de la URL, l'usuari vegi un el component A, B, C... Això ens porta directament al següent punt.
- Ens permet facilitar la navegació entre diferents components.
- Podem crear rutes anidades i també passant-li parametres. En aquest projecte ho veurem quan passem per el component Paisos. Quan l'usuari vagi fent click als parametres que ell vulgui, veura una ruta similar a aquesta: /oficines/Alemanya/Munic/ACME%20Munich/sales.
En aquest apartat veurem la part del backend i la BBDD que son les parts que sostenen el nostre projecte. Puntualitzarem com es gestionen les dades, es podrà veure com es connecten els components i a la vegada, s'asegura la integritat de les dades sensibles dins de la funcionalitat de l'aplicació.
A l'apartat del backend trobem tot allò que no es veu al costat client: rutes, endpoints, maneig de peticions, accés a la BBDD, seguretat i autenticació, maneig d'excepcions, rendiment, serveis addicionals, etc.
En un principi, aquest projecte era més petit per lo que només teniem un simple projecte amb tot el backend, anomenat WebAPI. A mesura que han anat passant els sprint reviews, ens hem vist amb la necesitat d'afegir-hi microserveis -punt que explicarem més endavant-. El projecte WebAPI és el monolit principal, tot i que l'idea és dividir-lo per tal de que cada microservei cumpleixi una funcio més especifica.
Els microserveis no són més que programaris dividits per tal de que aquests tinguin una autonomía. Aquesta utilitat s'ha implementat per tal de que, en el cas de que caigui un servei, per exemple el de ReservesAPI, no es vegi afectat també el servei de UsersAPI. Es a dir, que tots els serveis en la mesura del possible, siguin autònoms i no depenguin dels altres serveis.
- GeoLocalitzation
- ReservesAPI
- UsersAPI
La seva funció principal és fer servir les sol·licituds HTTP que arriben al servidor i coordinar la interacció entre el model de dades, la vista i altres parts de l'aplicació.
Aquest arxiu conté tots els controladors dedicats als usuaris de l'aplicació.
GET: UsersAPI/ApplicationUsers
- Torna tots els usuaris de la base de dades amb tota la seva informació en format JSON.
GET: UsersAPI/ApplicationUsers/{id}
- Torna l'usuari amb la ID que se li passa amb tota la informació en format JSON.
POST: UsersAPI/ApplicationUsers
- Es crea o s'actualitza un usuari a la base de dades.
PUT: UsersAPI/ApplicationUsers/{id}
- S'actualitzen diferents paràmetres de l'usuari amb la ID que se li passa.
DELETE: UsersAPI/ApplicationUsers/{id}
- S'esborra l'usuari amb la ID que se li passa de la base de dades.
GET: UsersAPI/ApplicationUsers/{id}/role
- Torna el nom del rol de l'usuari amb la ID que se li passa.
POST: UsersAPI/ApplicationUsers/ChangePassword
- Actualitza la contrasenya d'un usuari. Aquesta contrasenya serà la que l'usuari hagi escrit i confirmat al formulari de la web.
POST: UsersAPI/ApplicationUsers/ChangeUsername
- Actualitza el nom d'usuari d'un usuari. Aquest nom d'usuari serà el que l'usuari hagi escrit i confirmat al formulari de la web.
POST: api/ApplicationUsers/ChangeEmail
- Actualitza el correu d'un usuari. Aquest correu serà el que l'usuari hagi escrit i confirmat al formulari de la web.
POST: UsersAPI/ApplicationUsers/AssignCountry
- Assigna un país a un usuari. Aquest país serà el que l'usuari hagi seleccionat a la web.
POST: UsersAPI/ApplicationUsers/AssignCity
- Assigna una ciutat a un usuari. Aquesta ciutat serà la que l'usuari hagi seleccionat a la web, filtrada pel país que hagi seleccionat anteriorment.
POST: UsersAPI/ApplicationUsers/AssignOffice
- Assigna una oficina a un usuari. Aquesta oficina serà la que l'usuari hagi seleccionat a la web, filtrada pel país i ciutat que hagi seleccionat anteriorment.
POST: UsersAPI/ApplicationUsers/{username}/UploadProfileImage
- Puja o actualitza a la base de dades la imatge de perfil d'un usuari. Aquesta imatge es guarda com a tipus image. Si l'usuari no ha pujat cap imatge anteriorment s'estableix una per defecte.
GET: UsersAPI/ApplicationUsers/GetProfileImage/{username}
- Torna la imatge del nom d'usuari que se li passa.
Aquest arxiu conté tots els controladors dedicats a l'autentificació de l'aplicació, fent referencia als tokens.
Aquest arxiu conté tots els controladors dedicats als paisos de l'aplicació.
GET: api/GetPais
- Torna tots els paisos de la base de dades amb tota la seva informació en format JSON.
GET: GeoLocalitzation/GetPais/{id}
- Torna la informació del país amb la ID que se li introdueix, en format JSON.
POST: GeoLocalitzation/CreatePais
- Crea un nou país dintre de la BBDD.
PUT: GeoLocalitzation/UpdatePais/{id}
- Actualitza la informació d'un país amb l'ID que l'usuari ha introduit.
DELETE: GeoLocalitzation/DeletePais/{id}
- El métode elimina el país amb la ID introduida per l'usuari.
DELETE: GeoLocalitzation/DeletePais/{nomPais}
- El métode elimina el país que tingui el mateix nom introduit per l'usuari.
GET: GeoLocalitzation/PaisExists/{id}
- Aquest métode privat comprova que el país amb ID introduida existeix a la BBDD.
Aquest arxiu conté tots els controladors dedicats a les ciutats de l'aplicació.
GET: GeoLocalitzation/GetCiutats
- Torna totes les ciutats de la base de dades amb tota la seva informació en format JSON.
GET: GeoLocalitzation/GetCiutats/{id}
- Torna la informació de la ciutat amb la ID que se li introdueix, en format JSON.
GET: GeoLocalitzation/GetCiutatsByPais/{nomPais}
- Torna la informació de totes les ciutats enllaçades amb el país introduit. Ho torna en format JSON.
POST: GeoLocalitzation/CreateCiutats/{nomCiutat}
- Crea una nova ciutat dintre de la BBDD.
POST: GeoLocalitzation/CreateCiutatsByName/{nomPais, nomCiutat}
- Crea una nova ciutat relacionada ja amb país dintre de la BBDD.
PUT: GeoLocalitzation/UpdateCiutat/{cityId}
- Actualitza la informació de una ciutat amb l'ID que l'usuari ha introduit.
DELETE: GeoLocalitzation/DeleteCiutats/{id}
- El métode elimina la ciutat amb la ID introduida per l'usuari.
DELETE: api/DeleteCiutatsByNom/{nomCiutat}
- El métode elimina la ciutat que tingui el mateix nom introduit per l'usuari.
GET: GeoLocalitzation/CiutatsExists/{id}
- Aquest métode privat comprova que la ciutat amb ID introduida existeix a la BBDD.
Aquest arxiu conté tots els controladors dedicats a les oficines de l'aplicació.
GET: GeoLocalitzation/GetOficines
- Torna tots els paisos de la base de dades amb tota la seva informació en format JSON.
GET: GeoLocalitzation/GetOficina/{id}
- Torna la informació del país amb la ID que se li introdueix, en format JSON.
GET: GeoLocalitzation/GetGeolocationByOficinaId/{id}
- Lorem ipsum.
POST: GeoLocalitzation/CreateOficina
- Crea un nou país dintre de la BBDD.
POST: GeoLocalitzation/CreateOficinesByNom/{nomOficina}
- Crea un nou país dintre de la BBDD.
PUT: GeoLocalitzation/UpdateOficina/{id}
- Actualitza la informació d'un país amb l'ID que l'usuari ha introduit.
DELETE: GeoLocalitzation/DeleteOficina/{id}
- El métode elimina el país amb la ID introduida per l'usuari.
DELETE: GeoLocalitzation/DeleteOficinesByNom/{nomOficina}
- El métode elimina el país que tingui el mateix nom introduit per l'usuari.
GET: GeoLocalitzation/OficinaExists/{id}
- Aquest métode privat comprova que el país amb ID introduida existeix a la BBDD.
Aquest arxiu conté tots els controladors dedicats a les sales de l'aplicació.
GET: ReservesAPI/GetSales
- Torna totes les sales de la base de dades amb tota la seva informació en format JSON.
GET: ReservesAPI/GetSala/{id}
- Torna la informació de la sala amb la ID que se li introdueix, en format JSON.
POST: ReservesAPI/CreateSales
- Crea una nova sala de reunions utilitzant el nom de país, ciutat i oficina.
POST: ReservesAPI/CreateSalesByNom/{id}
- Crea una nova sala de reunions utilitzant el nom de país, ciutat i oficina.
PUT: ReservesAPI/UpdateSales/{id}
- Actualitza la sala desitjada a través del ID que l'usuari li introdueixi. Retorna el codi 204 si l'operació s'ha realitzat amb éxit.
DELETE: ReservesAPI/DeleteSales/{id}
- El métode elimina la sala de reunions amb la ID introduida per l'usuari.
DELETE: ReservesAPI/DeleteSalesByNom/{nomSala}
- El métode elimina la sala de reunions amb el nom de la sala introduit per l'usuari.
GET: ReservesAPI/SalesExists/{id}
- Aquest métode privat comprova que la sala de reunions amb la ID introduida, existeix a la BBDD.
Aquest arxiu conté tots els controladors dedicats a les reserves de l'aplicació.
GET: ReservesAPI/GetReserves
- Torna totes les reserves de la base de dades amb tota la seva informació en format JSON.
GET: ReservesAPI/GetReserve/{id}
- Torna la informació de la reserva amb la ID que se li introdueix, en format JSON.
POST: ReservesAPI/CreateReservations
- Crea una nova reserva utilitzant el nom de país, ciutat i oficina.
PUT: ReservesAPI/UpdateReserve/{id}
- Crea o actualitza una reserva utilitzant el nom de país, ciutat i oficina.
GET: ReservesAPI/GetReservesByUser/{userId}
- Torna la informació de la reserva amb la UserID que se li introdueix, en format JSON.
DELETE: ReservesAPI/DeleteReserve/{id}
- El métode elimina la reunió amb la ID introduida per l'usuari.
GET: ReservesAPI/ReserveExists/{id}
- Aquest métode privat comprova que la reunió amb la ID introduida existeix a la BBDD.
Lorem ipsum.
Lorem ipsum.
- Username (string, nullable): La variable que registrarà el nom del futur usuari.
- Email (string, nullable): La variable que guardarà el correu electronic del usuari.
- Password (string, nullable): Aquesta variable guardarà més endavant la contrasenya del usuari.
Lorem ipsum.
- Username (string, nullable): Lorem ipsum.
- Email (string, nullable): Lorem ipsum.
- RememberMe (bool): Lorem ipsum.
Lorem ipsum.
- Rol (string): Lorem ipsum.
Lorem ipsum.
- Username (string): Lorem ipsum.
- Country (string): Lorem ipsum.
Lorem ipsum.
- Username (string): Lorem ipsum.
- City (string): Lorem ipsum.
Lorem ipsum.
- Username (string): Lorem ipsum.
- Office (string): Lorem ipsum.
Lorem ipsum.
- Email (string): Lorem ipsum.
- NewEmail (string): Lorem ipsum.
Lorem ipsum.
- Username (string): Lorem ipsum.
- CurrentPassword (string): Lorem ipsum.
- NewPassword (string): Lorem ipsum.
Lorem ipsum.
- CurrentUsername (string): Lorem ipsum.
- NewUsername (string): Lorem ipsum.
Lorem ipsum.
- CountryID (int): Lorem ipsum.
- NomPais (string, nullable): Lorem ipsum.
Lorem ipsum.
- CityID (int): Lorem ipsum.
- NomCiutat (string, nullable): Lorem ipsum.
- CountryID (int): Lorem ipsum.
- Pais (Pais): Lorem ipsum.
Lorem ipsum.
- OfficeID (int): Lorem ipsum.
- NomOficina (string, nullable): Lorem ipsum.
- CityID (int): Lorem ipsum.
- Ciutat (Ciutats): Lorem ipsum.
Lorem ipsum.
- MeetingRoomID (int): Lorem ipsum.
- NomSala (string, nullable): Lorem ipsum.
- OfficeID (int): Lorem ipsum.
- Capacitat (int): Lorem ipsum.
Lorem ipsum.
- ReserveID (int): Lorem ipsum.
- MeetingRoomID (int): Lorem ipsum.
- DataReserva (DateTime, nullable): Lorem ipsum.
- HoraInici (TimeSpan, nullable): Lorem ipsum.
- HoraFi (TimeSpan, nullable): Lorem ipsum.
- UserID (string): Lorem ipsum.
- User (IdentityUser): Lorem ipsum.
- Sala (Sales): Lorem ipsum.
La base de dades SQL Server és un component clau en la arquitectura d'aquest projecte, ja que gestiona i guarda les dades utilitzades a l'aplicació. Aquestes dades inclouen informació sobre les ciutats, reserves, etc. En aquest apartat, a més, podrem apreciar millor sobre les relacions entre les taules, indicant les claus exteriors, anomenades foreign key.
Id - nvarchar(450): Aquesta és la clau primaria de cada un dels usuaris. Recordem que al ser una clau primaria doncs, serà unica per cada usuari.
UserName - nvarchar(256): Nom que passarà per la capa de lógica i també per la capa de la presentació, mostrant-se per exemple, en el navbar.
PasswordHash - nvarchar(MAX): [PENDENT]
Email - nvarchar(256): Correu electronic que s'utilitzarà més endavant.
Rol - bit: Aquesta clau és la que determina com veurà diversos components el usuari ja que podrà o no, accedir o no a diversos components de la pàgina web.
Pais - nvarchar(30): Identificador que es guarda per determinar el país on el usuari treballa.
Ciutat - nvarchar(30): Identificador que es guarda per determinar la ciutat on el usuari treballa.
Oficina - nvarchar(30): Identificador que es guarda per determinar la oficina on el usuari treballa.
ProfileImage - image: Dada que es mostrarà a l'entorn client quan l'usuari vulgui visualitzar el seu perfil. Aquesta dada es tracta d'una imatge, per tant s'ha tingut que guardar com a tal perquè llavor es pugui descodificar al component d'Angular pertinent, en aquest cas: profile.component.ts
CountryID - int: És la clau primaria de la taula dbo.Pais.
NomPais - varchar(30): Nom del país. Aquest valor un límit de 30 caràcters.
CityID - int: La clau primaria de la taula dbo.Ciutats.
NomCiutat - varchar(30): Nom de la ciutat. Aquest valor un límit de 30 caràcters.
CountryID - FOREIGN KEY de [dbo.Pais] - int: Identificador del país.
OfficeID - int: És la clau primaria de la taula dbo.Office.
NomOficina - varchar(30): Nom de la oficina en la que trobarem la sala. Aquest valor un límit de 30 caràcters.
CityID - FOREIGN KEY de [dbo.Ciutat] - int: Identificador de la ciutat.
MeetingRoomID - int: La clau primaria de la taula dbo.Sales.
NomSala - varchar(30): Nom de la sala que es reserva. Aquest valor un límit de 30 caràcters.
OfficeID - FOREIGN KEY de [dbo.Oficines] - int: Identificador de la oficina.
ReserveID - int: És la clau primaria de la taula dbo.Reserves.
DataReserva - date: Data en la que es durà a lloc la reunió a la sala pertinent.
HoraInici - time: Hora d'inici de la reserva.
HoraFi - time: Hora de finalització de la reserva.
UserID - FOREIGN KEY de [dbo.AspNetCore.Users] - nvarchar(450): Identificador del usuari, propietari d'aquesta reunió.
MeetingRoomID - FOREIGN KEY de [dbo.Sales] - int: Identificador de la sala.
En aquesta secció entrarem en detall en quant a les configuracions de cada apartat del projecte, entorn servidor i entorn client a més dels requisits essencials per compilar i executar correctament la nostra aplicació. S'inclou també informació sobre les versions utilitzades en els paquets a més d'informació detallada sobre el software i les configuracions necessàries.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.