Skip to content

Commit 2795cc8

Browse files
TP2 de secours
1 parent 5bf4b3a commit 2795cc8

File tree

3 files changed

+154
-9
lines changed

3 files changed

+154
-9
lines changed
Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,143 @@
11
# Cours 9 - TP2 (20%)
22

3+
Les instructions du TP2 sont [ici](/tp/tp2).
4+
5+
## 🏠 Serveur maison pour le TP2
6+
7+
:::warning
8+
9+
Le TP2 n'est ni plus facile, ni plus difficile en utilisant le **serveur maison**. Cela dit, cela permet de ne pas avoir à payer pour **Spotify**.
10+
11+
:::
12+
13+
💾 Téléchargement : [Cliquez-ici](../../static/files/tp2_serveur_maison.zip)
14+
15+
Si vous n'êtes pas abonné(e) à **Spotify**, utilisez simplement ce **serveur maison** que vous exécuterez localement.
16+
17+
Il fera le même travail que l'API de Spotify : il vous donnera accès à quelques **artistes**, **albums** et **chansons**.
18+
19+
Puisque ce serveur est fait maison à la dernière minute, il contient **très peu de données** :
20+
21+
* 5 artistes (Hans Zimmer, The Weeknd, Drake, Lady Gaga et Beyoncé)
22+
* 20 albums (4 par artiste)
23+
* 60 chansons (3 par album)
24+
25+
Cependant, c'est **amplement suffisant** pour réaliser le TP. Cela changera simplement **4 requêtes**, qui sont codées pour vous de toute façon.
26+
27+
:::danger
28+
29+
🚔🚨🔥 Si vous utilisez ce **serveur maison** pour faire le **TP2**, il ne doit pas être remis. Seul le projet **Next.js** est évalué !
30+
31+
:::
32+
33+
### ▶ Exécuter le serveur
34+
35+
Pour pouvoir envoyer des requêtes au serveur, il faut l'exécuter sur votre ordinateur. (Comme pendant le laboratoire 6)
36+
37+
**Étape 1** : Créez la base de données. Situez vous dans le dossier `/tp2_serveur_maison/TP2_serveur`, lancez **PowerShell** et faites la commande :
38+
39+
`dotnet ef database update`
40+
41+
**Étape 2** : Exécutez le serveur. Toujours avec la même fenêtre **PowerShell**, faites la commande :
42+
43+
`dotnet run`
44+
45+
Ne fermez pas la fenêtre **PowerShell**, sinon le serveur s'éteindra.
46+
47+
:::note
48+
49+
Ces deux étapes doivent être répétées à chaque fois que vous changez d'ordinateur. Si jamais vous arrêtez l'exécution du serveur, mais restez sur le même ordinateur, seule l'étape 2 doit être répétée.
50+
51+
Si vous êtes sur votre ordinateur personnel, il est possible que vous deviez installer ceci :
52+
53+
`dotnet tool install --global dotnet-ef`
54+
55+
:::
56+
57+
## 🔑 Requête de connexion
58+
59+
```tsx showLineNumbers
60+
async function connect(){
61+
62+
// Vous devez utiliser les identifiants "abc" et "123".
63+
const response = await axios.post("http://localhost:5143/api/Users/Login", {
64+
username : "abc",
65+
password : "123"
66+
});
67+
console.log(response.data);
68+
69+
setToken(response.data.token); // Le token peut-être rangé dans un état ...
70+
localStorage.setItem("token", response.data.token) // ... ou dans le stockage local.
71+
72+
}
73+
```
74+
75+
## 👨‍🎨 Obtenir un artiste
76+
77+
```tsx showLineNumbers
78+
async function getArtist(name : string){
79+
80+
const response = await spotifyRequest.get("http://localhost:5143/api/Artists/GetArtist/" + name, {
81+
headers : {
82+
'Content-Type': 'application/json',
83+
'Authorization': 'Bearer ' + token // 🔑 Votre token de connexion
84+
}
85+
});
86+
console.log(response.data);
87+
88+
return new Artist(response.data.id, response.data.name, response.data.imageUrl);
89+
90+
}
91+
```
92+
93+
## 💿 Obtenir les albums d'un artiste
94+
95+
Vous aurez besoin de l'**id** de l'artiste, pas de son **nom**.
96+
97+
```tsx showLineNumbers
98+
async function getAlbums(artistId : string){
99+
100+
const response = await spotifyRequest.get("http://localhost:5143/api/Albums/getAlbums/" + artistId, {
101+
headers : {
102+
'Content-Type': 'application/json',
103+
'Authorization': 'Bearer ' + token // 🔑 Votre token de connexion
104+
}
105+
});
106+
console.log(response.data);
107+
108+
let albums : Album[] = [];
109+
for(let a of response.data){
110+
albums.push(new Album(a.id, a.name, a.imageUrl));
111+
}
112+
113+
return albums;
114+
115+
}
116+
```
117+
118+
## 🎵 Obtenir les chansons d'un album
119+
120+
Vous aurez besoin de l'**id** de l'album, pas de son **nom**.
121+
122+
```tsx showLineNumbers
123+
async function getSongs(albumId : string){
124+
125+
const response = await spotifyRequest.get("http://localhost:5143/api/Songs/GetSongs/" + albumId, {
126+
headers : {
127+
'Content-Type': 'application/json',
128+
'Authorization': 'Bearer ' + token // 🔑 Votre token de connexion
129+
}
130+
});
131+
console.log(response.data);
132+
133+
let songs : string[] = [];
134+
for(let s of response.data) songs.push(s.name);
135+
136+
return songs;
137+
138+
}
139+
```
140+
141+
## 🎥🗺 YouTube et BandsInTown
142+
143+
Pour les requêtes à **YouTube** et **BandsInTown**, il n'y a pas de changement : comme les utilisateurs de Spotify, vous pourrez communiquer avec ces deux autres APIs en vous référant aux notes de cours et à l'énoncé du TP2.

web/docs/02-tp/02-tp2.md

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,12 @@ De plus, vous devrez déplacer les images dans un dossier du projet Next.js et r
1010

1111
:::
1212

13+
:::danger
14+
15+
Vous n'êtes pas abonnés à **Spotify** ? Ne gaspillez pas vos roupies ! 💰⛔ Utilisez le [serveur local fourni](/notes/rencontre5.1).
16+
17+
:::
18+
1319
### 📥 Remise
1420
* 📍 Où : sur **Git** uniquement (N'oubliez pas l'invitation [https://github.com/MaximePelletier15](https://github.com/MaximePelletier15))
1521
* ⏰ Quand : **6 mars 23h59**. Vous avez 4 cours (12h en classe !) consacrés au TP.
@@ -24,7 +30,7 @@ De plus, vous devrez déplacer les images dans un dossier du projet Next.js et r
2430
* 👤 Le projet doit être fait individuellement.
2531
* 👽 Attention au **plagiat**. Il est interdit de copier en partie ou complètement le code d'une autre personne ou de générer son code avec l'IA. Le niveau d'usage de l'intelligence artificielle générative permis pour ce TP est de **1**. (Se référer au plan de cours)
2632

27-
En résumé, nous réaliserons une **application Web client** permettant d'explorer des données musicales en utilisant les API **Spotify**, **Youtube** et **BandsInTown**. Nous utiliserons également **Google Maps**.
33+
En résumé, nous réaliserons une **application Web client** permettant d'explorer des données musicales en utilisant les API **Spotify** (ou le [serveur maison](/notes/rencontre5.1)), **Youtube** et **BandsInTown**. Nous utiliserons également **Google Maps**.
2834

2935
Si vous avez du mal à commencer le TP, suivez les instructions dens la section [😵 Ses tro compliquais](/tp/tp2#-ses-tro-compliquais).
3036

@@ -39,9 +45,7 @@ Si votre travail est suspecté de plagiat (code copié d'un(e) autre étudiant(e
3945

4046
## 👨‍🎨👩‍🎨 Page d'accueil
4147

42-
À partir de la page d'accueil, l'utilisateur pourra rechercher des artistes (API Spotify) pour les afficher. Rechercher un artiste
43-
l'affiche et l'ajoute automatiquement aux « favoris ». (Favoris veut simplement dire que si on réactualise la page, les artistes
44-
recherchés resteront présents)
48+
À partir de la page d'accueil, l'utilisateur pourra rechercher des artistes (API Spotify ou [serveur maison](/notes/rencontre5.1)) pour les afficher. Rechercher un artiste l'affiche et l'ajoute automatiquement aux « favoris ». (Favoris veut simplement dire que si on réactualise la page, les artistes recherchés resteront présents)
4549

4650
Il y aura également un bouton pour nettoyer tous les artistes. (Tous les favoris) Sous chaque artiste, il y a un bouton pour aller vers
4751
la **page des concerts de l'artiste** et un bouton pour aller vers la **page des albums de l'artiste**.
@@ -53,7 +57,7 @@ la **page des concerts de l'artiste** et un bouton pour aller vers la **page des
5357
Accessible en cliquant sur le bouton « **Albums** » sous un artiste de la page d'accueil.
5458

5559
* On affiche le titre « Albums de NOM_ARTISTE » en haut.
56-
* On affiche tous les albums de l'artiste (titre et pochette) à l'aide d'une requête à **Spotify**.
60+
* On affiche tous les albums de l'artiste (titre et pochette) à l'aide d'une requête à **Spotify** ou au [serveur maison](/notes/rencontre5.1).
5761
* Un bouton sous chaque album permet de naviguer vers la **page des chansons de l'album**.
5862

5963
<center>![Pages des albums](../../static/img/tp2/albums.png)</center>
@@ -63,7 +67,7 @@ Accessible en cliquant sur le bouton « **Albums** » sous un artiste de la page
6367
Accessible en cliquant sur le bouton « **Chansons** » sous un album dans la page des albums.
6468

6569
* On affiche le titre « Chansons de NOM_ALBUM » en haut.
66-
* On affiche le titre de toutes les chansons de l'album à l'aide d'une requête à **Spotify**.
70+
* On affiche le titre de toutes les chansons de l'album à l'aide d'une requête à **Spotify** ou au [serveur maison](/notes/rencontre5.1).
6771
* Un bouton sous chaque chanson permet d'afficher la chanson dans un **lecteur YouTube** pour la faire jouer
6872
à l'aide de **l'API de YouTube**.
6973
* ⛔ N'envoyez pas de requête pour une chanson qui n'a pas été cliquée !
@@ -105,8 +109,8 @@ de convertir ces valeurs en `number` avec la fonction `parseFloat(monString)` ou
105109

106110
* 🐙 Vous devez utiliser au minimum **4 composants**, c'est-à-dire un par page.
107111
* 👅 L'application doit être disponible en français et en anglais. (16 textes à traduire)
108-
* 📶 Il faut utiliser un **intercepteur** pour la gestion du **token Spotify**.
109-
* ⚙ La requête de **connexion à Spotify**, qui risque d'être nécessaire dans 3 pages, doit être dans un **hook** pour ne pas la répéter !
112+
* 📶 Il faut utiliser un **intercepteur** pour la gestion du **token Spotify** ou du token du [serveur maison](/notes/rencontre5.1).
113+
* ⚙ La requête de **connexion à Spotify** ou au [serveur maison](/notes/rencontre5.1), qui risque d'être nécessaire dans 3 pages, doit être dans un **hook** pour ne pas la répéter !
110114
* 💾 Le **stockage local** a été utilisé pour ranger les artistes dans les favoris.
111115
* 🔱 Vous devez faire **au moins 8 commits** clairs. L'enseignant(e) doit être invité(e) sur Git dès le début du TP.
112116
* 📦 Il est obligatoire d'utiliser au moins 3 classes : `Album`, `Artist` et `Show`.
@@ -134,7 +138,7 @@ Avant le **26 février 17h59**, en **classe**, il faut montrer à l'enseignant(e
134138

135139
:::warning
136140

137-
N'oubliez pas que **toutes les requêtes Spotify** (Connexion, artiste, albums et chansons) sont déjà codées pour vous et sont disponibles dans le [Cours 7](/notes/rencontre4.1#-exemples-de-requêtes-à-spotify-pour-le-tp2). Seule la requête **BandsInTown** sera codée par vous-même.
141+
N'oubliez pas que **toutes les requêtes Spotify et au serveur maison** (Connexion, artiste, albums et chansons) sont déjà codées pour vous et sont disponibles dans le [Cours 7](/notes/rencontre4.1#-exemples-de-requêtes-à-spotify-pour-le-tp2) ou le [Cours 9](/notes/rencontre5.1). Seule la requête **BandsInTown** sera codée par vous-même.
138142

139143
:::
140144

11.6 MB
Binary file not shown.

0 commit comments

Comments
 (0)