Compte Rendu - Coach v1

📋 Informations générales

Nom du projet : Coach v1 - Application de calcul d'IMG

Date de création : Projet BTS SIO SLAM

Auteur : Abdelmalek Elidrissi

Type : Application mobile multiplateforme

🎯 Objectifs du projet

Calcul de l'IMG (Indice de Masse Grasse)
Évaluation de la condition physique selon le sexe
Affichage visuel des résultats avec des indicateurs
Interface utilisateur simple et intuitive

🛠️ Technologies utilisées

Framework

.NET MAUI C# XAML

Plateformes supportées

Android iOS Windows macOS (MacCatalyst)

Architecture

MSTest

📱 .NET MAUI : Présentation détaillée

Qu'est-ce que .NET MAUI ?

.NET MAUI (Multi-platform App UI) est un framework open-source développé par Microsoft qui permet de créer des applications natives pour plusieurs plateformes à partir d'un seul code source partagé.

🎯 Objectif principal : Développer une fois, déployer partout (Android, iOS, Windows, macOS) avec des performances natives et une expérience utilisateur optimale sur chaque plateforme.

Historique et évolution

Principaux concepts et architecture

1. Code partagé (Shared Code)

Le code métier, la logique et les modèles de données sont écrits une seule fois dans un projet partagé et fonctionnent sur toutes les plateformes.

// Exemple : Code partagé dans MauiAppCoach.Core public class Profil { // Cette classe fonctionne sur Android, iOS, Windows, macOS public double CalculIMG() { ... } }

2. Code spécifique par plateforme (Platform-Specific Code)

Pour accéder aux fonctionnalités natives de chaque plateforme, MAUI permet d'écrire du code spécifique dans le dossier Platforms/.

Platforms/ ├── Android/ # Code spécifique Android ├── iOS/ # Code spécifique iOS ├── Windows/ # Code spécifique Windows └── MacCatalyst/ # Code spécifique macOS

3. XAML (eXtensible Application Markup Language)

Langage déclaratif pour créer l'interface utilisateur de manière séparée de la logique métier.

Avantages du XAML :

Séparation claire entre UI et logique
Design visuel facilité
Binding de données déclaratif
Styles et ressources réutilisables

Architecture recommandée pour structurer les applications MAUI :

Model

Représente les données et la logique métier (ex: classe Profil)

View

Interface utilisateur définie en XAML (ex: MainPage.xaml)

ViewModel

Intermédiaire entre View et Model, gère la logique de présentation et le binding

5. Handlers et Renderers

MAUI utilise un système de handlers pour mapper les contrôles XAML vers les contrôles natifs de chaque plateforme :

Android : Les contrôles MAUI sont rendus comme des vues Android natives
iOS : Conversion en UIKit (UIView, UIButton, etc.)
Windows : Utilisation de WinUI 3
macOS : Utilisation de AppKit

Avantages de .NET MAUI

🚀 Performance native

Les applications compilées sont des applications natives, pas des applications web dans un conteneur. Performance équivalente aux apps développées nativement.

💰 Coût de développement réduit

Un seul code source pour plusieurs plateformes = moins de temps de développement et de maintenance.

🔄 Partage de code maximal

Jusqu'à 90% de code partagé entre les plateformes, réduisant la duplication et les bugs.

🛠️ Écosystème .NET

Accès à toutes les bibliothèques .NET ( .NET10-android , .NET10-ios , .NET10-windows , .NET10 macOs ) et outils de l'écosystème .NET.

📦 Hot Reload

Modifications du code visibles instantanément sans recompiler, accélérant le développement.

🎨 Interface native

Chaque plateforme utilise ses contrôles natifs, garantissant une expérience utilisateur authentique.

Contrôles et composants principaux

MAUI fournit une bibliothèque riche de contrôles UI :

Contrôles de base

Button - Bouton cliquable
Entry - Champ de saisie texte
Label - Texte affiché
Image - Affichage d'images
RadioButton - Sélection unique

Layouts

StackLayout - Empilement vertical/horizontal

Ressources et styles

MAUI permet de centraliser les ressources (couleurs, styles, images) :

// Dans App.xaml ou ResourceDictionary <Color x:Key="PrimaryColor">#007ACC</Color> <Style x:Key="ButtonStyle" TargetType="Button"> <Setter Property="BackgroundColor" Value="{StaticResource PrimaryColor}" /> </Style>

Comparaison avec d'autres technologies

Technologie	Avantages	Inconvénients
.NET MAUI	Performance native, code partagé, écosystème .NET	Courbe d'apprentissage, taille des apps
React Native	Écosystème JavaScript, hot reload	Performance inférieure, dépendances natives
Flutter	Performance, UI personnalisable	Langage Dart, moins de packages
Développement natif	Performance maximale, accès complet aux APIs	Code dupliqué, maintenance multiple

Utilisation dans le projet Coach v1

Dans ce projet, .NET MAUI a été utilisé pour :

Interface utilisateur : Création de l'UI avec XAML (MainPage.xaml)
Logique métier : Code partagé dans MauiAppCoach.Core (classe Profil)
Ressources : Images stockées dans Resources/Images/
Multiplateforme : Même code fonctionne sur Android, iOS, Windows, macOS

💡 Pourquoi .NET MAUI pour ce projet ?

Le choix de .NET MAUI permet de créer une application mobile professionnelle avec un seul code source, tout en bénéficiant des performances natives et de l'expérience utilisateur optimale sur chaque plateforme. C'est idéal pour une application de calcul comme Coach v1 qui nécessite une interface simple mais efficace.

📁 Structure du projet

Coach V1/ ├── MauiAppCoach/ # Application principale │ ├── MainPage.xaml # Interface utilisateur principale │ ├── MainPage.xaml.cs # Code-behind de la page principale │ ├── App.xaml # Application XAML │ ├── App.xaml.cs # Point d'entrée de l'application │ ├── AppShell.xaml # Navigation et structure de l'app │ ├── Platforms/ # Code spécifique par plateforme │ │ ├── Android/ │ │ ├── iOS/ │ │ ├── Windows/ │ │ └── MacCatalyst/ │ ├── Resources/ # Ressources (images, styles) │ │ ├── Images/ │ │ │ ├── smiley_parfait.png │ │ │ ├── smiley_surpoids.png │ │ │ ├── smiley_tropmaigre.png │ │ │ └── smiley.png │ │ └── Styles/ │ └── Tests/ # Tests unitaires ├── MauiAppCoach.Core/ # Bibliothèque de classes partagée │ └── Modele/ │ └── Profil.cs # Modèle de données pour le calcul IMG ├── TestProjectCoach/ # Projet de tests └── MauiAppCoach.slnx # Solution Visual Studio

🔧 Fonctionnalités implémentées

1. Calcul de l'IMG (Indice de Masse Grasse)

L'application calcule l'IMG selon la formule de Deurenberg :

IMG = (1.2 × poids / taille²) + (0.23 × âge) - (10.83 × sexe) - 5.4 Où : - poids : en kilogrammes - taille : en centimètres (convertie en mètres) - âge : en années - sexe : 1 pour homme, 0 pour femme

2. Évaluation selon le sexe

Pour les femmes (sexe = 0)

IMG < 25 : Trop maigre
25 ≤ IMG < 30 : Parfait
IMG ≥ 30 : Surpoids

Pour les hommes (sexe = 1)

IMG < 15 : Trop maigre
15 ≤ IMG < 20 : Parfait
IMG ≥ 20 : Surpoids

3. Interface utilisateur

Champs de saisie :

Poids (en kg)
Taille (en cm)
Âge (en années)
Sélection du sexe (Homme/Femme) via radio buttons

Affichage des résultats :

Message textuel (Trop maigre / Parfait / Surpoids)
Valeur de l'IMG avec une décimale
Image indicative (smiley) selon le résultat :
- smiley_parfait.png
- smiley_surpoids.png
- smiley_tropmaigre.png

4. Modèle de données

La classe Profil encapsule :

Les données d'entrée (sexe, poids, taille, âge)
Le calcul de l'IMG
La détermination du message et de l'image à afficher
Les méthodes getters pour accéder aux résultats

💻 Code principal

Classe Profil

public class Profil { private int sexe; private int poids; private int taille; private int age; private double img; private string message; private string image; public Profil(int sexe, int poids, int taille, int age) { this.sexe = sexe; this.poids = poids; this.taille = taille; this.age = age; CalculIMG(); ResultatIMG(); } private void CalculIMG() { double tailleEnMetres = taille / 100.0; img = (1.2 * poids / (tailleEnMetres * tailleEnMetres)) + (0.23 * age) - (10.83 * sexe) - 5.4; } private void ResultatIMG() { if (sexe == 0) // Femme { if (img < 25) { message = "Trop maigre."; image = "smiley_tropmaigre.png"; } else if (img < 30) { message = "Parfait."; image = "smiley_parfait.png"; } else { message = "Surpoids."; image = "smiley_surpoids.png"; } } else // Homme { if (img < 15) { message = "Trop maigre."; image = "smiley_tropmaigre.png"; } else if (img < 20) { message = "Parfait."; image = "smiley_parfait.png"; } else { message = "Surpoids."; image = "smiley_surpoids.png"; } } } }

MainPage.xaml.cs

private void btCalculer_Clicked(object sender, EventArgs e) { int poids = Convert.ToInt32(entPoids.Text); int taille = Convert.ToInt32(entTaille.Text); int age = Convert.ToInt32(entAge.Text); int sexe = rdHomme.IsChecked ? 1 : 0; Profil profil = new Profil(sexe, poids, taille, age); CounterLabel.Text = "Votre IMG : " + profil.GetMessage() + profil.GetImg().ToString("0.0"); imgResultat.Source = profil.GetImage(); }

📸 Aperçu de l'application Coach v1

Voici un aperçu réel de l'application Coach v1 en exécution sur un émulateur Android (ici un Pixel 7 - API 33) :

Écran principal de l'application Coach v1 : saisie des données et résultat de l'IMG.

Description détaillée de l'écran

En haut, le titre Coach dans la barre d'application, dans la couleur principale de l'application.
Trois champs de saisie alignés verticalement :
- Poids (65 kg dans l'exemple)
- Taille (171 cm)
- Âge (19 ans)
Un groupe de boutons radio pour le sexe :
- Homme (sélectionné dans la capture)
- Femme
Un bouton principal « Calculer IMG » qui déclenche le calcul à partir des valeurs saisies.
En dessous, un smiley qui change en fonction du résultat (ici un visage neutre pour un IMG proche de la limite).
Enfin, le texte de résultat « Votre IMG : 14.8 » qui affiche la valeur calculée formatée avec une décimale.

Interprétation de cet aperçu :

Avec les valeurs de l'exemple (65 kg, 171 cm, 19 ans, Homme), l'application calcule un IMG de 14.8. Cela correspond à la catégorie « Trop maigre » pour un homme, d'où l'affichage d'un smiley qui n'est pas entièrement satisfait. Cet écran illustre concrètement le lien entre la formule mathématique, la logique métier de la classe Profil et le retour visuel donné à l'utilisateur.

🚀 Installation et démarrage

Prérequis

Visual Studio 2022 ou supérieur
.NET MAUI workload installé
SDK Android (pour Android)
Xcode (pour iOS, sur macOS uniquement)
Windows SDK (pour Windows)

Étapes d'installation

Ouvrir la solution
Ouvrir MauiAppCoach.slnx dans Visual Studio
Restaurer les packages NuGet
dotnet restore
Compiler l'application
dotnet build
Lancer l'application
- Sélectionner la plateforme cible (Android, iOS, Windows)
- Appuyer sur F5 ou cliquer sur "Démarrer"

Plateformes disponibles

Android : Émulateur ou appareil physique
iOS : Simulateur iOS (sur macOS uniquement)
Windows : Application Windows native
macOS : Application macOS via MacCatalyst

💡 Points techniques remarquables

Architecture

Séparation Modèle/Interface
Code partagé (MauiAppCoach.Core)
Code spécifique par plateforme

Calculs

Formule IMG validée (Deurenberg)
Conversion cm → mètres
Précision avec une décimale

Interface utilisateur

XAML déclaratif
Code-behind C#
Ressources centralisées

Tests

Tests unitaires
MSTest framework
Validation des calculs

🐛 Difficultés rencontrées et solutions

Problème 1 : Configuration multiplateforme

Configuration des différentes plateformes (Android, iOS, Windows).

Solution : Utilisation de .NET MAUI qui simplifie la configuration multiplateforme avec des fichiers manifestes spécifiques par plateforme.

Problème 2 : Conversion des unités

Conversion correcte de la taille de centimètres en mètres pour le calcul.

Solution : Division par 100.0 pour obtenir des mètres avec précision décimale.

Problème 3 : Résulat neutre ( ni réussite ni échec )

Obtenir les bons résultat lors de l'exécution des tests unitaires

Solution : Faire référence à l'outil de test et appeler aux différentes solutions.

Problème 4 : Gestion des résultats selon le sexe

Seuils différents pour hommes et femmes.

Solution : Implémentation de la méthode `ResultatIMG()` avec conditions spécifiques selon la valeur de `sexe`.

📈 Améliorations possibles

Fonctionnalités

Validation des entrées
Gestion des erreurs (Try-catch)
Historique des calculs
Graphiques d'évolution
Objectifs de poids/IMG

Technique

Export PDF/CSV
Localisation multilingue
Thèmes (mode sombre/clair)
Base de données
Synchronisation cloud

📚 Compétences développées

Développement mobile

.NET MAUI framework
XAML déclaratif
C# orienté objet avancé

Architecture

Code partagé entre plateformes

Modularité (projets séparés)

Calculs et logique métier

Implémentation formules mathématiques
Validation des données
Tests unitaires

Multiplateforme

Android (configuration et développement)
iOS (sur macOS)
Windows (application native)
macOS (MacCatalyst)

🎓 Conclusion

Ce projet a permis de découvrir le développement d'applications mobiles multiplateformes avec .NET MAUI. L'application combine une interface utilisateur simple avec une logique de calcul précise pour fournir un outil utile de calcul d'IMG.

L'utilisation de .NET MAUI démontre la capacité à créer des applications natives pour plusieurs plateformes à partir d'un seul code source, ce qui est un avantage majeur pour le développement moderne.

Points forts :

Application multiplateforme fonctionnelle
Code bien structuré avec séparation des responsabilités
Interface utilisateur intuitive
Tests unitaires pour valider la logique

Prochaines étapes : Amélioration de l'interface utilisateur, ajout de fonctionnalités avancées (historique, graphiques), validation des entrées et gestion des erreurs.