8. Correction de l’Évaluation “Programmation Mobile”

Voici les réponses détaillées et expliquées aux 6 questions de la “Partie 4 : Programmation pour terminaux mobiles”.

Question 1 : Donnez la commande IONIC permettant de voir la version IONIC installée sur votre machine. (0.5pt)

Réponse : ionic --version ou ionic -v
Explication : Cette commande se tape dans le terminal (invite de commandes). Elle indique quelle version de la CLI (Command Line Interface) de Ionic est actuellement installée globalement sur votre ordinateur.

Question 2 : Donnez la commande permettant d’installer IONIC sur votre machine. (1pt)

Réponse : npm install -g @ionic/cli
Explication :
- npm : utilise le gestionnaire de paquets de Node.js.
- install : l’ordre de télécharger et d’installer.
- -g (ou --global) : très important, cela signifie qu’on installe Ionic sur l’ordinateur entier de manière globale, au lieu de l’installer juste dans un dossier spécifique.
- @ionic/cli : le nom officiel du paquet Ionic contenant tous les outils en ligne de commande.

Question 3 : Donnez la commande ionic permettant de démarrer l’application modèle sidemenu (1pt)

Réponse : ionic start nom_du_projet sidemenu
Explication : La commande ionic start sert à initialiser un tout nouveau projet. Ensuite, on donne le nom que l’on souhaite pour notre dossier d’application, puis on précise le “template” (modèle de base) choisi : sidemenu. Ce modèle créera une application avec un menu latéral coulissant et une navigation intégrée.

Question 4 : Donnez la commande permettant de créer une page IONIC (1pt)

Réponse : ionic generate page nom_de_la_page (ou la version courte : ionic g page nom_de_la_page)
Explication : La commande generate (ou g) est le générateur de code d’Ionic/Angular. Demander de générer une “page” va automatiquement créer le dossier avec le fichier HTML (l’interface), le TypeScript (logique), le SCSS (style) et mettre à jour le système de routage de l’application pour que la page soit accessible.

Question 5 : À quoi sert le npm ? (0.5pt)

Réponse : Node Package Manager (npm) sert à installer, partager et gérer les bibliothèques et dépendances d’un projet JavaScript.
Explication : Imaginez que NPM est comme le “Play Store” ou “l’App Store” pour les développeurs. Si vous avez besoin d’une fonctionnalité (ex : Ionic, un calendrier, un lecteur vidéo, etc.), plutôt que de recréer tout le code, NPM va télécharger ce “paquet” depuis internet et l’installer dans votre projet (dans le dossier node_modules).

Question 6 : Soit l’IHM suivante (Formulaire d’authentification). Construire cette IHM avec du code XML (1pt)

Note importante : Le terme “XML” est parfois utilisé de manière générique dans les épreuves (pensant au développement Android natif), mais dans le contexte des questions 1 à 4 qui portent sur Ionic, le code utilisé pour l’IHM est généralement du HTML structuré avec des balises Ionic (qui ressemblent syntaxiquement à du XML).

Voici le code “façon Ionic” correspondant exactement à l’image :

<!-- En-tête : Barre avec le texte "Authentification" centré -->
<ion-header>
    <ion-toolbar color="dark">
        <ion-title class="ion-text-center">Authentification</ion-title>
    </ion-toolbar>
</ion-header>

<!-- Contenu principal -->
<ion-content class="ion-padding">
    <form>
        <!-- Champ pour le pseudo "Toto" avec les bords arrondis -->
        <ion-item lines="none" class="input-arrondi">
            <ion-input type="text" value="Toto"></ion-input>
        </ion-item>

        <br />

        <!-- Champ pour le mot de passe "*********" -->
        <ion-item lines="none" class="input-arrondi">
            <ion-input type="password" value="*********"></ion-input>
        </ion-item>

        <br /><br />

        <!-- Bouton "Connecter" avec fond sombre -->
        <ion-button expand="block" color="dark"> Connecter </ion-button>
    </form>
</ion-content>

Explication du code IHM :

L’image montre un fond très structuré, donc on utilise <ion-toolbar> et <ion-title> pour la barre d’en-tête, tous deux avec l’attribut de couleur sombre.
Pour reproduire le look des champs de saisie (inputs) qui ont l’air très arrondis (fill="outline" possible également mais class="input-arrondi" implique qu’il faudrait ajouter une pincée de CSS border-radius: 10px; border: 1px solid black; en arrière-plan).
Le champ mot de passe contient des étoiles, on spécifie donc qu’il est de type password.
Le bouton prend toute la largeur du container disponible, c’est ce que permet de faire l’attribut expand="block".