Aller au contenu principal

TP Spotify Web

Talent HUB Team01/05/2025Environ 5 minTravaux pratiques

Table des matières

  1. Prérequis
  2. Création du projet Spotify Web
  3. Conclusion

Prérequis

Logiciels requis

  • JDK 11 ou supérieur (OpenJDK recommandé)
  • IntelliJ Community Edition
  • MariaDB (installation locale)
  • Postman
  • Rancher Desktop
  • SDKMAN! (pour installer Grails)
  • Git

IntelliJ CE (Community Edition)

IntelliJ est un IDE puissant, je vous recommande de le télécharger à l'adresse suivante :
https://www.jetbrains.com/idea/download/?section=windows

La version CE est suffisante pour nos travaux pratiques

Installation de JDK-11

  1. Téléchargez OpenJDK 11 ou supérieur depuis depuis le site officiel :
    https://www.oracle.com/java/technologies/downloads/#java11-windows
    Puis télécharger jdk-11.0.27_windows-x64_bin.exe
  2. Une fois télécharger, suivez les instructions de l'assistant d'installation

Installation de Grails 6.2.3

  1. Télécharger Grails 6.2.3 depuis le site officiel.

grails-cli vs grails

Bien que sur la page d'accueil Grails vous pouvez directement télécharger grails-cli, il est préférable de télécharger l'intégralité du projet grails avec ses librairies.
Ce lien est disponible dans les releases notes de la version 6.2.3

grails-6.2.3.zip

  1. Décompresser l'archive dans le répertoire de votre choix.
    Par exemple : C:\Grails\grails-6.2.3
  2. Ajouter aux variables d'environnement Système les variables JAVA_HOME et GRAILS_HOME
  3. Ajouter au PATH les variables
    • JAVA_HOME
    • GRAILS_HOME
img_6.png
img_6.png

Le saviez-vous ?

Vous pouvez aussi ouvrir un terminal en administrateur et taper les commandes.

setx /M JAVA_HOME C:\Program Files\Java\jdk-11
setx /M GRAILS_HOME C:\Grails\grails-6.2.3
setx /M Path "$Env:PATH;%JAVA_HOME%;%JAVA_HOME%\bin;%GRAILS_HOME%;%GRAILS_HOME%\bin"

Vérification de l'installation

Ouvrir un terminal PowerShell et taper la commande

grails --version
| Grails Version: 6.2.3
| JVM Version: 21.0.7

Configuration de MariaDB

  1. Assurez-vous que MariaDB est installée et en cours d'exécution
  2. Créez une base de données pour notre application
CREATE DATABASE spotify_db;
CREATE USER 'spotify_user'@'localhost' IDENTIFIED BY '123456';
GRANT ALL PRIVILEGES ON spotify_db.* TO 'spotify_user'@'localhost';
FLUSH PRIVILEGES;

Et vérification :

SHOW GRANTS FOR 'spotify_user'@'localhost';

Création du projet Spotify Web

Initialisation du projet grâce à Grails Forge

Se rendre sur : https://start.grails.org/

img_1.png
img_1.png

Remplir comme décrit ci-dessus puis appuyer sur "Generate Project".

Cela va télécharger une archive zip.

Sur votre PC, décompresser l'archive et placer son contenu dans un répertoire de votre choix.
Par exemple : C:/Academie/spotify-web

Création du projet dans IntelliJ CE

Ouvrir le répertoire précédemment créér : par exemple C:/Academie/spotify-web

img_7.png
img_7.png

IntelliJ devrait alors reconnaitre la structure et proposer de charger Gradle.

img_8.png
img_8.png

Une fois les tasks Gradle disponibles, lancer :

img_9.png
img_9.png

L'application est disponible sur : http://localhost:8080

Configuration de la base de données MariaDB

Ajout de la dépendance MariaDB

Modifier le fichier build.gradle pour ajouter la dépendance au connecteur MariaDB :

dependencies {
    // Autres dépendances...
    implementation 'org.mariadb.jdbc:mariadb-java-client:3.3.3'
}

IntelliJ va détecter l'ajout de cette dépendance. Un petit bouton va apparaître.
Vous pouvez cliquer dessus pour mettre à jour vos dépendances tout de suite, ou alors simplement relancer votre application (qui se chargera de charger les dépendances manquantes définies dans le build.gradle)

img_10.png
img_10.png

Configuration de la connexion à la base de données

Modifier le fichier grails-app/conf/application.yml pour configurer la connexion à MariaDB :

dataSource:
   pooled: true
   jmxExport: true
   driverClassName: org.mariadb.jdbc.Driver
   url: 'jdbc:mariadb://${DB_HOST:localhost}:${DB_PORT:3306}/${DB_DATABASE:spotify_db}?useUnicode=true&characterEncoding=utf8mb4&serverTimezone=UTC'
   username: '${DB_USER:spotify_user}'
   password: '${DB_PASSWORD:123456}'

environments:
   development:
      dataSource:
         dbCreate: create
   test:
      dataSource:
         dbCreate: update
   production:
      dataSource:
         dbCreate: none

Création des classes de domaine

Nous allons créer trois domaines : Artist, Album et Song.
Pour cela, nous allons utiliser les commandes grails.
Ouvrir un terminal dans IntelliJ :

img_11.png
img_11.png
grails create-domain-class com.talent.Album
grails create-domain-class com.talent.Artist
grails create-domain-class com.talent.Song
grails-app
  |
  |-- domain
     |-- com
        |-- talent
          |-- Artist.groovy
          |-- Album.groovy
          |-- Song.groovy

Remarque

Dans IntelliJ, il se peut qu'il faille ajouter le répertoire domain comme source du projet.
Pour cela, cliquer droit sur le répertoire domain, puis dans le menu contextuel, "Mark directory as", puis sélectionner src

Modification de la classe de domaine Artist

Modifier le fichier grails-app/domain/com/talent/Artist.groovy :

class Artist {
   String name
   String biography
   String imageUrl
   Date dateCreated
   Date lastUpdated

   static hasMany = [albums: Album]

   static constraints = {
      name blank: false, unique: true
      biography nullable: true, maxSize: 5000
      imageUrl nullable: true, url: true
   }

   static mapping = {
      biography type: 'text'
   }
}

Modification de la classe de domaine Album

Modifier le fichier grails-app/domain/com/talent/Album.groovy :

package com.talent

class Album {
   String title
   Integer year
   String coverArt
   Date dateCreated
   Date lastUpdated

   static belongsTo = [artist: Artist]
   static hasMany = [songs: Song]

   static constraints = {
      title blank: false
      year range: 1900..2030
      coverArt nullable: true, url: true
   }
}

Modification de la classe de domaine Song

Modifier le fichier grails-app/domain/com/talent/Song.groovy :


class Song {
   String title
   Integer duration // en secondes
   Integer trackNumber
   Date dateCreated
   Date lastUpdated

   static belongsTo = [album: Album]

   static constraints = {
      title blank: false
      duration min: 1
      trackNumber min: 1
   }
}

Création des contrôleurs et services

Pour simplifier la création des contrôleurs et services, nous utilisons les commandes suivantes :

grails generate-controller com.talent.Artist
grails generate-controller com.talent.Album
grails generate-controller com.talent.Song

Remarque

Dans IntelliJ, il se peut qu'il faille ajouter le répertoire service comme source du projet.
Pour cela, cliquer droit sur le répertoire service, puis dans le menu contextuel, "Mark directory as", puis sélectionner src

A ce stade, vous pouver relancer l'application en lançant la tâche Gradle application/bootRun comme précédemment.

Vous pouvez constater que les tables de votre base de données ont été synchronisées avec les classes de domaine.

Configuration des URL mappings

Modifier le fichier grails-app/controllers/com/talent/UrlMappings.groovy :

package spotify.app

class UrlMappings {

   static mappings = {
      "/$controller/$action?/$id?(.$format)?"{
         constraints {
            // apply constraints here
         }
      }

      "/"(view:"/index")
      "500"(view:'/error')
      "404"(view:'/notFound')

   }

}

Ajouter des données au startup

Modifier le fichier grails-app/init/com/talent/BootStrap.groovy :
Ce fichier est exécuté au startup de l'application.
Cela va nous permettre d'insérer des données initiales dans la base de données.

package com.talent

import grails.gorm.transactions.Transactional

class BootStrap {

   def init = { servletContext ->
      initSampleData()
   }

   @Transactional
   void initSampleData() {
      // Création des artistes
      def artist1 = Artist.findByName('Pink Floyd') ?: new Artist(
              name: 'Pink Floyd',
              biography: 'Groupe de rock progressif britannique formé à Londres en 1965.',
              imageUrl: 'https://example.com/pink_floyd.jpg'
      ).save(flush: true)

      def artist2 = Artist.findByName('The Beatles') ?: new Artist(
              name: 'The Beatles',
              biography: 'Groupe de rock britannique, originaire de Liverpool, formé en 1960.',
              imageUrl: 'https://example.com/the_beatles.jpg'
      ).save(flush: true)

      // Création des albums pour Pink Floyd
      def album1 = Album.findByTitleAndArtist('The Dark Side of the Moon', artist1) ?: new Album(
              title: 'The Dark Side of the Moon',
              year: 1973,
              coverArt: 'https://example.com/dark_side.jpg',
              artist: artist1
      ).save(flush: true)

      def album2 = Album.findByTitleAndArtist('Wish You Were Here', artist1) ?: new Album(
              title: 'Wish You Were Here',
              year: 1975,
              coverArt: 'https://example.com/wish_you_were_here.jpg',
              artist: artist1
      ).save(flush: true)

      // Création des albums pour The Beatles
      def album3 = Album.findByTitleAndArtist('Abbey Road', artist2) ?: new Album(
              title: 'Abbey Road',
              year: 1969,
              coverArt: 'https://example.com/abbey_road.jpg',
              artist: artist2
      ).save(flush: true)

      // Chansons pour The Dark Side of the Moon
      if (!Song.findByTitleAndAlbum('Speak to Me', album1)) {
         new Song(
                 title: 'Speak to Me',
                 duration: 90,
                 trackNumber: 1,
                 album: album1
         ).save(flush: true)

         new Song(
                 title: 'Breathe (In the Air)',
                 duration: 163,
                 trackNumber: 2,
                 album: album1
         ).save(flush: true)

         new Song(
                 title: 'Time',
                 duration: 421,
                 trackNumber: 3,
                 album: album1
         ).save(flush: true)
      }

      // Chansons pour Abbey Road
      if (!Song.findByTitleAndAlbum('Come Together', album3)) {
         new Song(
                 title: 'Come Together',
                 duration: 260,
                 trackNumber: 1,
                 album: album3
         ).save(flush: true)

         new Song(
                 title: 'Something',
                 duration: 182,
                 trackNumber: 2,
                 album: album3
         ).save(flush: true)

         new Song(
                 title: 'Here Comes the Sun',
                 duration: 185,
                 trackNumber: 7,
                 album: album3
         ).save(flush: true)
      }
   }

   def destroy = {
   }
}

Création des views

Afin de pouvoir afficher et manipuler les données, nous allons créer la structure suivante :

 |-views
      |-album
         |- _form.gsp
         |- create.gsp
         |- edit.gsp
         |- index.gsp
         |- show.gsp

Les views sont disponibles ici album.zip

Relancer l'application, vous devriez avoir :

img_2.png
img_2.png

Vous pouvez maintenant créer les views pour Artist et Song

Conclusion

Lors de ce TP, nous avons pu :

  • Installer le framework Grails
  • Installer la plateforme IntelliJ Community Edition
  • Créer une application basée sur une architecture MVC

Good job !

Talent
Copyright © 2025 Talent HUB Team