📅 SAISON B Semaine 5 Épisode 1 - Découverte de la Programmation Orientée Objet (POO) en JavaScript – Classes, Encapsulation et Contrôle d’Accès

📚 Notions du jour

Aujourd'hui nous avons aborbé un paradigme important en programmation : la Programmation Orientée Objet (ou POO pour les intimes). C'est un concept que je connaissais déjà avec le langage de programmation Python que je pratiquais avant de commencer ma formation. Cette fois-ci j'ai pu voir comment cela était organisé en JavaScript en commençant par les fondamentaux.

Voici les notions aborbées durant cette journée :

Les limites du code procédural et l’intérêt de la POO.
La syntaxe class pour définir un « moule » à objets.
Le constructor pour initialiser une nouvelle instance.
L’encapsulation pour protéger les données.
Les attributs privés avec le préfixe #.
Les getters et setters pour contrôler l’accès aux données.

🔄 Pourquoi la POO ? Les Limites du Code Procédural

Jusqu’à présent, j’ai principalement écrit du code procédural : des fonctions qui s’enchaînent pour accomplir des tâches. Cependant, à mesure que les projets grandissent, ce style de programmation montre ses limites :

Manque de structure : Le code devient difficile à organiser et à maintenir.
Répétition : Les données et les fonctions qui les manipulent sont souvent séparées, ce qui conduit à dupliquer du code.
Faible réutilisabilité : Difficile de réutiliser des morceaux de logique dans d’autres parties du projet.

La Programmation Orientée Objet (POO) résout ces problèmes en regroupant les données et les comportements dans des objets. Cela permet de :

✅ Modéliser des entités réelles (ex. : un étudiant, une promotion).
✅ Encapsuler les données pour les protéger et contrôler leur accès.
✅ Réutiliser du code grâce à l’héritage et la composition.

🏗️ Les Classes : Des Moules pour Créer des Objets

En JavaScript, une classe est comme un moule qui définit la structure et le comportement des objets. Elle permet de créer des instances (objets concrets) avec des attributs (données) et des méthodes (fonctions).

1️⃣ Définir une Classe avec `class`

// Define a class to represent a Student
class Student {
  // The constructor initializes new instances
  constructor(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }

  // Method to display student info
  getInfo() {
    return `${this.firstName} ${this.lastName}, ${this.age} years old`;
  }
}

Explications :

class Student : Définit une classe nommée Student.
constructor : Méthode spéciale appelée lors de la création d’une instance pour initialiser ses attributs.
this : Fait référence à l’instance courante de la classe.

2️⃣ Créer une Instance avec `new`

// Create a new student instance
const student1 = new Student('John', 'Doe', 20);
console.log(student1.getInfo()); // Output: "John Doe, 20 years old"

Résultat :

Un objet student1 est créé avec les attributs firstName, lastName, et age, ainsi que la méthode getInfo().

🔒 L’Encapsulation : Protéger les Données

L’encapsulation est un principe clé de la POO qui consiste à :

Cacher les détails internes d’un objet.
Contrôler l’accès aux données via des méthodes (getters/setters).
Éviter les modifications accidentelles des attributs.

1️⃣ Attributs Privés avec `#`

En JavaScript, on peut déclarer des attributs privés en utilisant le préfixe #. Ces attributs ne sont accessibles qu’à l’intérieur de la classe.

class Student {
  // Private attributes
  #firstName;
  #lastName;
  #age;

  constructor(firstName, lastName, age) {
    this.#firstName = firstName;
    this.#lastName = lastName;
    this.#age = age;
  }

  // Public method to access private data
  getInfo() {
    return `${this.#firstName} ${this.#lastName}, ${this.#age} years old`;
  }

  // Attempting to access #firstName outside the class will throw an error
  // console.log(student1.#firstName); // SyntaxError: Private field '#firstName' must be declared in an enclosing class
}

Avantages :

Sécurité : Les attributs privés ne peuvent pas être modifiés directement depuis l’extérieur.
Contrôle : Vous décidez comment et quand les données sont accessibles ou modifiées.

2️⃣ Getters et Setters pour Contrôler l’Accès

Les getters et setters permettent de lire et modifier les attributs privés de manière contrôlée.

class Student {
  #firstName;
  #lastName;
  #age;

  constructor(firstName, lastName, age) {
    this.#firstName = firstName;
    this.#lastName = lastName;
    this.#age = age;
  }

  // Getter for firstName
  get firstName() {
    return this.#firstName;
  }

  // Setter for firstName (with validation)
  set firstName(newFirstName) {
    if (typeof newFirstName === 'string' && newFirstName.length > 0) {
      this.#firstName = newFirstName;
    } else {
      console.error('First name must be a non-empty string');
    }
  }

  // Getter for age
  get age() {
    return this.#age;
  }

  // Setter for age (with validation)
  set age(newAge) {
    if (Number.isInteger(newAge) && newAge > 0) {
      this.#age = newAge;
    } else {
      console.error('Age must be a positive integer');
    }
  }
}

// Usage
const student1 = new Student('John', 'Doe', 20);
console.log(student1.firstName); // "John" (using getter)
student1.firstName = 'Jane';      // Valid update
student1.age = 25;                // Valid update
student1.age = -5;                // Error: "Age must be a positive integer"

Explications :

get firstName() : Permet d’accéder à l’attribut privé #firstName.
set firstName(newFirstName) : Valide et met à jour #firstName si la nouvelle valeur est valide.
Validation : Les setters peuvent inclure des règles pour garantir la cohérence des données.

💡 Ce Que J’ai Appris Aujourd’hui

Les classes permettent de créer des objets structurés avec des attributs et des méthodes.
L’encapsulation protège les données en les rendant privées et en contrôlant leur accès via des getters/setters.
Les attributs privés (avec #) empêchent les modifications directes depuis l’extérieur de la classe.
Les getters/setters permettent de valider les données avant de les modifier, garantissant ainsi leur intégrité.
La POO rend le code plus modulaire et réutilisable, ce qui facilite la maintenance et l’évolution des projets.

⌨️ Challenge du jour : "Projet oCoffee" – projet fil rouge

☕️ Présentation du Challenge

Cette semaine nous allons continuer à travailler sur notre projet oCoffee réalisé la semaine dernière en autonomie. L'idée est de refactoriser notre application en utilisant la POO.
Plus précisément, il s’agissait de remplacer les objets bruts retournés par notre datamapper par des instances de la classe Coffee créée en cours, afin de pouvoir utiliser ses méthodes directement dans nos vues EJS.

📁 Structure du Projet (bac à sable) Récupéré pour le Challenge

📁ocoffee/
│
├── 📁node_modules/          # Folder generated by npm (do not version)
│
├── 📁data/                            #Database folder
│   ├── create_database.sql
│   └── README.md               # How to connect to DB documentation
│
├── 📁database/             # Interactions with the database
│   ├── main-datamapper.js       
│   └── database-client.js   # Connection to database    
│
├── 📁docs/                  # Project specifications folder                  
│   ├── 📁damande-client/
│   ├── 📁integration/
│   └── 📁recommandations/
│
├── 📁public/                # Static files (CSS, JS, images)
│   ├── 📁css/               # Style sheets
│   ├── 📁images/            # Images for the site (logos, cafes, etc.)
│   └── 📁js/                # Client-side JavaScript scripts
│
├── 📁views/                # EJS views (templates)
│     ├── 📁partials/       # Reusable partials (header, footer)
│     └── 📁pages/          # App pages
│
├── index.js                # Express app entry point
├── router.js               # Express routes handler
├── package.json            # Dependencies and npm scripts
├── package-lock.json         
├── .env.example            # Public environnement variables
├── .gitignore
└── README.md               # Project documentation

📌 Étapes à Réaliser

1️⃣ Importer la Classe `Coffee` dans le Datamapper

Objectif : Importer la classe Coffee créée en cours pour pouvoir créer des instances à partir des données de la base.

Mon code :

J'ai créé un dossier src/models/ où j'ai copié la classe Coffee créée en cours ⟹ src/models/Coffee.js.

Ensuite je l'importe dans database/main-datamapper.js :

database/main-datamapper.js

import Coffee from "../src/models/Coffee.js";

2️⃣ Modifier la Méthode `getLatestsProducts()`

Objectif : Transformer les objets bruts retournés par la base de données en instances de Coffee.

Mon code :

Fichier d'origine :

database/main-datamapper.js

// Import database client
import db from "./database-client.js";

const datamapper = {
  /**
   * Retrieves the 3 most recently added products (coffees) from the database.
   * @async
   * @function getLatestsProducts
   * @returns {Promise<Array>} A promise resolving to an array of objects representing the 3 most recently added coffees.
   */
  async getLatestsProducts() {
     // SQL query to select the 3 most recent coffees, ordered by creation date
    const result = await db.query(
      `SELECT * FROM coffee ORDER BY created_at DESC LIMIT 3`
    );
    const products = result.rows;
    return products;
  },
  // ... other methods...
};

export default datamapper;

Refactorisation :

database/main-datamapper.js

// Import Coffee Class
import Coffee from "../src/models/Coffee.js";

const datamapper = {
  /**
   * Retrieves the 3 most recently added products (coffees) from the database
   * and maps them to Coffee model instances.
   * @async
   * @function getLatestsProducts
   * @returns {Promise<Array<Coffee>>} A promise resolving to an array of Coffee instances representing the 3 most recently added coffees.
   */
  async function getLatestsProducts() {
    // SQL query to select the 3 most recent coffees, ordered by creation date
    const query = `
      SELECT * FROM coffee
      ORDER BY created_at DESC
      LIMIT 3;
    `;
    // Execute the query and retrieve the result
    const result = await client.query(query);

    const products = result.rows;

    // Map each product row to a Coffee model instance
    const coffees = products.map(product => new Coffee({
          id: product.id,
          name: product.name,
          description: product.description,
          reference: product.reference,
          pricePerKg: product.price_per_kg,
          available: product.available,
        }));

    return coffees;
  },
  // ... other methods...
}

Explications :

result.rows.map(...) : Utilise la méthode map() pour transformer chaque objet brut en une instance de Coffee.
new Coffee(...) : Crée une nouvelle instance de Coffee avec les données de la base.

3️⃣ Utiliser les Méthodes de `Coffee` dans la Vue `home.ejs`

Objectif : Afficher le prix formaté en utilisant la méthode getFormattedPrice() de la classe Coffee.

La classe Coffee était fournie avec ses méthodes de classe. J'ai dû modifier la méthode de classe FormattedPrice() qui n'était pas fonctionnelle en l'état afin de pouvoir l'intégrer dans la vue home.ejs. En effet, le prix récupéré dans la base de données était de type string. Il fallait donc d'abord le convertir en nombre avant de pouvoir l'utiliser dans la vue et le formater grâce à la méthode FormattedPrice().

Mon code :

Méthode de classe fournie :

src/models/Coffee.js

/**
 * Represents a Coffee product with its properties and methods.
 * The class is responsible for handling coffee data, including price formatting.
 */
class Coffee {
  #id;
  #name;
  #reference;
  #description;
  #country;
  #pricePerKg;
  #categories;
  #available;

  constructor(data) {
    this.#id = data.id;
    this.#name = data.name;
    this.#reference = data.reference;
    this.#description = data.description;
    this.#country = data.country;
    this.#pricePerKg = data.price_per_kg;
    this.#categories = data.categories;
    this.#available = data.available;
  }

  // Getters and Setters
  get id() {
    return this.#id;
  }

  get name() {
    return this.#name;
  }

  set name(value) {
    this.#name = value;
  }
  // ... And so on for other getters/setters ...

  /**
   * Formats the coffee price for display.
   * Converts the price to a fixed 2-decimal format and replaces the dot with a comma,
   * which is a common format in many European locales.
   * @returns {string} The formatted price as a string.
   */
  formattedPrice() {
    return this.#pricePerKg.toFixed(2).replace('.', ',');
  }
}

export default Coffee;

Refactorisation de la méthode :

src/models/Coffee.js

/**
 * Represents a Coffee product with its properties and methods.
 * The class is responsible for handling coffee data, including price formatting.
 */
class Coffee {
  #id;
  #name;
  #reference;
  #description;
  #country;
  #pricePerKg;
  #categories;
  #available;

  constructor(data) {
    this.#id = data.id;
    this.#name = data.name;
    this.#reference = data.reference;
    this.#description = data.description;
    this.#country = data.country;
    // Refectorisation here: convert the price from string to float to ensure proper formatting
    this.#pricePerKg = parseFloat(data.price_per_kg);
    this.#categories = data.categories;
    this.#available = data.available;
  }

  // Getters and Setters
  get id() {
    return this.#id;
  }

  get name() {
    return this.#name;
  }

  set name(value) {
    this.#name = value;
  }
  // ... And so on...

  /**
   * Formats the coffee price for display.
   * Converts the price to a fixed 2-decimal format and replaces the dot with a comma,
   * which is a common format in many European locales.
   * @returns {string} The formatted price as a string.
   */
  formattedPrice() {
    return this.#pricePerKg.toFixed(2).replace('.', ',');
  }
}

export default Coffee;

Refactorisation de la vue home.ejs avec la méthode FormattedPrice() :

views/pages/home.ejs

<!-- header -->
<main>
  <!-- Other sections -->
  <section id="latest-products">
    <h2>Nouveautés</h2>

    <ul>
      <% articles.forEach(article => { %>
      <li>
        <article>
          <img
            src="/images/coffees/<%= article.reference %>.png"
            alt="<%= article.name %>"
          />
          <div>
            <h3><%= article.name %></h3>
            <!-- Paragraph added to display formatted price of an article -->
            <!-- Using formattedPrice() method from Coffee Class instance -->
            <p><%= article.formattedPrice() %></p>
            <a class="button-outline" href="/article/<%= article.id %>">
              Voir le détail
            </a>
          </div>
        </article>
      </li>
      <% }) %>
    </ul>
  </section>
</main>
<!-- footer -->

Résultat attendu :

Le prix s’affiche sous la forme 20,99 € (au lieu d’un nombre brut comme 20.99).

💡 Ce Que J’ai Appris avec ce Challenge

La POO permet d’encapsuler la logique métier dans des classes, ce qui rend le code plus modulaire et réutilisable.
Les méthodes comme map() sont utiles pour transformer des données brutes en objets plus riches.
Les vues deviennent plus expressives quand elles utilisent des méthodes d’objets (ex: FormattedPrice()).

📅 SAISON B Semaine 5 Épisode 1 - Découverte de la Programmation Orientée Objet (POO) en JavaScript – Classes, Encapsulation et Contrôle d’Accès

📚 Notions du jour

🔄 Pourquoi la POO ? Les Limites du Code Procédural

🏗️ Les Classes : Des Moules pour Créer des Objets

1️⃣ Définir une Classe avec class

2️⃣ Créer une Instance avec new

🔒 L’Encapsulation : Protéger les Données

1️⃣ Attributs Privés avec #

2️⃣ Getters et Setters pour Contrôler l’Accès

💡 Ce Que J’ai Appris Aujourd’hui

⌨️ Challenge du jour : "Projet oCoffee" – projet fil rouge

☕️ Présentation du Challenge

📁 Structure du Projet (bac à sable) Récupéré pour le Challenge

📌 Étapes à Réaliser

1️⃣ Importer la Classe Coffee dans le Datamapper

2️⃣ Modifier la Méthode getLatestsProducts()

3️⃣ Utiliser les Méthodes de Coffee dans la Vue home.ejs

💡 Ce Que J’ai Appris avec ce Challenge

1️⃣ Définir une Classe avec `class`

2️⃣ Créer une Instance avec `new`

1️⃣ Attributs Privés avec `#`

1️⃣ Importer la Classe `Coffee` dans le Datamapper

2️⃣ Modifier la Méthode `getLatestsProducts()`

3️⃣ Utiliser les Méthodes de `Coffee` dans la Vue `home.ejs`