## MISSION 5 : Création d'une application mobile en React Native
## MISSION 6 : Création d'une application mobile en React Native
### 1. Objectifs
### Objectifs
L'objectif de cette mission est de créer une application mobile en **React Native** qui consomme les API **Last.fm** pour afficher des informations sur des artistes, des albums et des charts musicaux. L'application devra permettre aux utilisateurs de rechercher des artistes, afficher leurs albums, et consulter les classements des morceaux populaires.
Les objectifs sont :
Les objectifs techniques sont de :
- Comprendre et implémenter la consommation d'APIs externes dans une application React Native.
- Structurer l'application selon les bonnes pratiques de React Native et gérer l'état de l'application.
- Utiliser les composants UI de base (comme `FlatList`, `TextInput`, `Button`, etc.) pour afficher les données de manière dynamique.
### 2. Découverte de React Native en JS
### 2. Installation de l'environnement de travail
Avant de commencer la mission, vous devrez vous familiariser avec les concepts de base de **React Native**. Assurez-vous de bien comprendre :
- L'installation de l'environnement de développement pour React Native.
- La création et la gestion des **composants React Native**.
- Le **hook `useState`** et **`useEffect`** pour la gestion de l'état et les effets secondaires.
- La navigation avec **React Navigation** (si vous avez besoin de plusieurs pages dans l'application).
- La gestion des **requêtes HTTP** avec `fetch` ou `axios` pour interagir avec l'API Last.fm.
Vous devez travailler sur `IntelliJ`. J'ai testé sous Windows, l'usage sous Linux est aussi possible.
#### 2.1. Installation de `Node.js`
1. Clonez ce projet dans votre dossier personnel et créez une nouvelle branche à votre nom :
Pour tester et déboguer votre application React Native, nous utilisons **Expo**, qui permet d’exécuter le code sur un téléphone ou un émulateur sans configuration complexe.
2. Start the app
##### 2.2.1. Démarrer l'application avec Expo
```bash
Sur votre machine, lancez la commande suivante dans le terminal :
```sh
npx expo start
```
Expliquer le fonctionnement de la compilation et du deboggage
Cela ouvrira automatiquement le **tableau de bord Expo** dans votre navigateur. Vous y trouverez plusieurs options pour exécuter l’application :
JavaScript (JS) : C'est un excellent point de départ pour les débutants car c'est un peu plus facile à apprendre et c'est le langage standard utilisé pour le développement web (frontend et backend avec Node.js). De plus, comprendre JavaScript est fondamental pour comprendre TypeScript plus tard, car TypeScript est un sur-ensemble de JavaScript.
TypeScript (TS) : Il a ajouté des fonctionnalités de typage statique et d'autres améliorations à JavaScript qui peuvent rendre le code plus lisible et moins sujet aux erreurs. En même temps, il peut être un peu plus complexe pour les débutants en raison de la nécessité de définir les types. Cependant, connaître TypeScript peut être un atout majeur pour l'avenir, car de plus en plus de grandes bases de code JavaScript sont converties en TypeScript pour plus de sécurité et de scalabilité.
Pour un cours de BTS SIO, l'important est de bien maîtriser les bases de la programmation web, donc partir sur JavaScript serait le plus logique. Cependant, une introduction à TypeScript plus tard dans le cours pourrait être très bénéfique pour les étudiants, car cela leur donnerait une idée des avantages du typage statique et des grandes bases de code professionnelles.
Enfin, n'oubliez pas que la meilleure façon d'apprendre est par la pratique. Assurez-vous donc de fournir beaucoup d'exemples concrets et d'opportunités pour pratiquer la programmation, quelle que soit la langue que vous choisissez.
-**Web** : Lancer l’application dans un navigateur (utile pour tester rapidement).
-**Android** : Lancer l’application sur un appareil Android ou un émulateur.
-**iOS** : Disponible uniquement sur Mac, avec un simulateur iOS.
-**Tunnel, LAN ou Localhost** : Choisir le mode de connexion à votre téléphone.
Voici une fiche récapitulative en **Markdown** pour expliquer **Expo Router** et son arborescence :
##### 2.2.2. Connecter votre téléphone à l’application
```markdown
# Expo Router - Guide de démarrage et structure du projet
1.**Assurez-vous que votre téléphone et votre ordinateur sont connectés au même réseau Wi-Fi**.
2.**Installez l’application Expo Go** (disponible sur Android et iOS).
3.**Scannez le QR Code** affiché dans la console Expo avec Expo Go.
4. L’application se charge et s’exécute directement sur votre téléphone.
## Qu'est-ce qu'Expo Router ?
**Expo Router** est un système de navigation basé sur des fichiers, utilisé pour simplifier la navigation dans les projets React Native avec Expo. Il permet de définir les routes de l'application simplement en créant des fichiers dans le répertoire `app/`. Chaque fichier dans ce répertoire représente une page de ton application.
**Si vous avez des problèmes de connexion** :
- Vérifiez que votre PC et votre téléphone sont bien sur le même réseau Wi-Fi.
- Changez le mode de connexion dans Expo en **LAN** ou **Tunnel**.
- Essayez `npx expo start -c` pour vider le cache d’Expo.
## Installation d'Expo Router
4. Testez l'exécution de l'application développée.
Si tu utilises Expo, tu peux ajouter Expo Router à ton projet en exécutant :
##### 2.2.3 Ouvrir le débogueur Expo**
```bash
npm install expo-router
Si vous avez besoin d’afficher la console de débogage pour voir vos logs (`console.log()`) ou inspecter l’état des composants, voici comment faire :
🔹 **Sur un téléphone physique** :
-**Android** : Secouez votre téléphone ou ouvrez Expo Go et appuyez longuement sur l’écran.
-**iOS** : Secouez votre iPhone ou appuyez sur `Cmd + D` si vous utilisez un simulateur.
🔹 **Sur un émulateur** :
-**Android** : Appuyez sur `Ctrl + M` pour ouvrir le menu Expo.
-**iOS** : Appuyez sur `Cmd + D` sur un Mac.
Dans ce menu, sélectionnez **"Open JS Debugger"** pour voir les logs et déboguer votre application dans IntelliJ.
### 3. Qu'est-ce que `React Native` ?
`React Native` permet de créer des applications mobiles en utilisant `JavaScript` et `TypeScript`, ainsi que le framework `React`, avec **un rendu natif pour iOS et Android** :
- JavaScript (JS) est le langage standard utilisé pour le développement web (frontend et backend avec Node.js).
- TypeScript (TS) a ajouté des fonctionnalités de typage statique et d'autres améliorations à JavaScript qui peuvent rendre le code plus lisible et moins sujet aux erreurs.
Voici les concepts clés `React` utilisés dans le projet :
#### 3.1. Composants de base
React Native utilise des composants similaires à React, mais adaptés aux interfaces mobiles. Les principaux composants utilisés dans le projet sont :
-**`View`** : Conteneur de base pour la mise en page des éléments, équivalent à `div` en React.
-**`Text`** : Utilisé pour afficher du texte.
-**`Image`** : Affiche une image locale ou distante.
-**`TextInput`** : Permet la saisie de texte par l'utilisateur.
-**`Button`** : Déclenche une action lors du clic.
-**`ActivityIndicator`** : Affiche un indicateur de chargement.
#### 3.2. Gestion des styles
React Native utilise des styles définis en JavaScript via l'objet **`StyleSheet`**, inspiré de CSS mais avec des noms de propriétés en camelCase.
```tsx
conststyles=StyleSheet.create({
container:{
flex:1,
padding:10,
backgroundColor:'#f8f8f8',
},
text:{
fontSize:18,
color:'#333',
},
});
```
ou avec `yarn` :
#### 3.3. Flexbox pour la mise en page
```bash
yarn add expo-router
React Native utilise **Flexbox** pour organiser les éléments à l’écran :
-**`flexDirection`** : Définit l’axe principal (`row` ou `column`).
-**`justifyContent`** : Gère l’alignement sur l’axe principal.
-**`alignItems`** : Gère l’alignement sur l’axe secondaire.
console.error('Error fetching artist data:',error);
}
};
```
#### 3.7. Librairie `Expo Router`
**Expo Router** est un système de navigation basé sur des fichiers, utilisé pour simplifier la navigation dans les projets React Native avec Expo. Il permet de définir les routes de l'application simplement en créant des fichiers dans le répertoire `app/`. Chaque fichier dans ce répertoire représente une page de ton application.
##### 3.7.1. Arborescence du projet avec Expo Router
Voici la structure des fichiers que tu utiliseras pour la navigation avec Expo Router :
@@ -78,7 +205,6 @@ app/
└── ... # Autres pages comme /profile, /settings, etc.
```
### 1. **Le fichier `_layout.js`**
Le fichier `_layout.js` contient la configuration de la navigation. C'est ici que tu définis la structure de ton application (par exemple, Stack, Tabs, etc.).
```js
@@ -88,14 +214,12 @@ export default function Layout() {
return<Stack/>;
}
```
Le composant `Stack` permet de gérer la navigation de type **pile** (empilement d'écrans). Il fonctionne de manière similaire à un `Stack.Navigator` de React Navigation.
---
Le composant `Stack` permet de gérer la navigation de type **pile** (empilement d'écrans). Il fonctionne de manière similaire à un `Stack.Navigator` de React Navigation.
### 2. **Les pages de l'application**
Chaque fichier `.js` ou `.tsx` dans le répertoire `app/` représente une page (écran) de ton application.
#### Exemple de fichier `app/index.js` (Home Screen) :
Exemple de fichier `app/index.js` (Home Screen) :
```js
import{View,Text,Button}from'react-native';
@@ -132,16 +256,14 @@ export default function AlbumScreen() {
Ce fichier définit la page où l'utilisateur peut rechercher un album.
---
## Utilisation de la navigation
##### 3.7.2. Utilisation de la navigation
### Navigation entre les pages
Navigation entre les pages
-**`router.push('/page')`** : Utilisé pour naviguer vers une autre page.
-**`router.replace('/page')`** : Navigue vers une page et remplace la page actuelle dans la pile de navigation.
### Exemple :
Exemple :
Dans le fichier `app/index.js`, la navigation vers la page d'album se fait ainsi :
@@ -151,14 +273,14 @@ router.push('/album');
### Routes dynamiques
Si tu veux créer une route dynamique, par exemple pour afficher un album spécifique, tu peux utiliser des paramètres dans l'URL. Exemple :
Si vous voulez créer une route dynamique, par exemple pour afficher un album spécifique, vous pouvez utiliser des paramètres dans l'URL. Exemple :
```
app/
├── album/[id].js # Page dynamique pour chaque album
```
Dans ce cas, `[id]` est un paramètre dynamique que tu peux récupérer dans ton fichier :
Dans ce cas, `[id]` est un paramètre dynamique que vous récupérez dans votre fichier :
```js
import{useRouter}from'expo-router';
@@ -174,38 +296,70 @@ export default function AlbumDetail() {
}
```
---
### 4. Implémenter l'application
## Autres fonctionnalités d'Expo Router
#### 4.1. Structure du projet
Voici un résumé en Markdown qui explique la hiérarchie des fichiers et leur association aux composants **MVC**. Voici également le fonctionnement des pages principales et l'enchaînement de l'exécution, depuis `_layout.tsx` jusqu'à `album.tsx`, en incluant le style et le modèle.
- **Nested Routes (routes imbriquées)** : Tu peux organiser tes pages en utilisant des répertoires pour définir des routes imbriquées.
Par exemple :
L'application utilise l'architecture **MVC (Modèle-Vue-Contrôleur)** pour organiser les différentes parties du projet. Voici la hiérarchie des fichiers et leur rôle dans l'application.
```
app/
├── dashboard/
├── index.js
└── settings.js
/app
├── /tab
│ ├── album.tsx
│ ├── artist.tsx
│ ├── chart.tsx
│ └── home.tsx
├── _layout.tsx
├── index.tsx
└── /styles
└── styles.tsx
```
La route `/dashboard/settings` pointera vers le fichier `app/dashboard/settings.js`.
##### 4.1.1. Modèle (Model)
-**`src/models/lastfm.ts`** : Contient la logique métier pour interagir avec l'API Last.fm. Il récupère les données sur les artistes (ou d'autres informations si nécessaire).
- La fonction `fetchArtistData` envoie une requête à l'API Last.fm et retourne les données de l'artiste sous forme de JSON.
##### 4.1.2. Vue (View)
-**`/app/tab/artist.tsx`** : La vue est la page qui contient l'interface utilisateur pour rechercher un artiste. Elle gère l'affichage des informations artistiques, y compris les images et les résumés.
- Elle utilise **React Native** pour afficher des éléments comme des `TextInput`, `Button`, `Image`, et `ActivityIndicator`.
- Elle présente les données récupérées par l'appel API sous forme de texte et d'image.
-**`/styles/styles.tsx`** : Gère l'apparence de l'application. Tous les styles globaux sont définis ici et importés dans les différents composants pour maintenir la cohérence visuelle. Cela inclut les couleurs, les tailles de police, la disposition des éléments, etc.
##### 4.1.3. Contrôleur (Controller)
-**`/app/tab/artist.tsx`** : En tant que contrôleur, il gère la logique liée à l'action de l'utilisateur, en l'occurrence la recherche d'artistes via l'API Last.fm.
- Lorsqu'un utilisateur saisit un nom d'artiste et appuie sur "Search", le contrôleur appelle la fonction `fetchArtistData` dans le modèle pour récupérer les informations sur l'artiste.
- Si l'appel réussit, il met à jour l'état de l'artiste et affiche les résultats dans la vue. Sinon, il gère les erreurs (par exemple, si l'artiste n'est pas trouvé ou si une erreur survient lors de la récupération des données).
- **Préchargement des pages** : Expo Router précharge les pages pour améliorer les performances de l'application.
#### 4.1.4. **Enchaînement de l'Exécution**
---
Voici l'enchaînement de l'exécution, depuis le fichier `_layout.tsx` jusqu'à l'affichage des résultats dans `artist.tsx` :
## Conclusion
1.**`_layout.tsx`** : Ce fichier sert de structure de navigation pour l'application. Il définit les onglets dans l'interface, comme "Home", "Artist", "Album", "Chart", etc.
- Lors de l'initialisation, `_layout.tsx` rend les onglets correspondants aux fichiers de la page de contenu, par exemple `home.tsx`, `artist.tsx`, `album.tsx`, etc.
Expo Router simplifie la gestion de la navigation dans les projets React Native. Il repose sur un système de fichiers pour définir les routes, ce qui permet d'éviter la configuration manuelle complexe des navigateurs comme avec React Navigation. Avec Expo Router, tu peux créer une application avec une navigation fluide et facile à maintenir.
2.**Navigation vers `artist.tsx`** : Lorsque l'utilisateur clique sur l'onglet "Artists" (via `_layout.tsx`), la page `artist.tsx` est rendue.
- Ce fichier contient la logique de recherche d'artiste et d'affichage des informations artistiques.
---
3.**Page `artist.tsx`** : Lorsqu'un utilisateur entre un nom d'artiste dans la zone de recherche et appuie sur "Search", la fonction `handleSearch` dans `artist.tsx` est appelée. Elle :
- Vérifie si un nom d'artiste a été saisi.
- Appelle le **modèle** (dans `src/models/lastfm.ts`) pour effectuer une requête vers l'API Last.fm et récupérer les informations de l'artiste.
- Gère l'état du composant (`artistData`, `loading`, `error`) pour afficher les résultats ou les erreurs.
### 3. Implémenter l'application
4.**Affichage des résultats** : Si la récupération des données est réussie, l'état `artistData` est mis à jour avec les informations de l'artiste (nom, image, bio, etc.).
- Ces informations sont ensuite affichées dans la vue de `artist.tsx`.
5.**Style (`styles.tsx`)** : Les styles définis dans `src/styles/styles.tsx` sont appliqués à la vue dans `artist.tsx` pour assurer une présentation cohérente et esthétique des résultats de recherche.
#### 4.2. Travail à fournir
L'application devra être structurée autour de trois parties principales : **Artistes**, **Charts**, et **Albums**. Chaque partie consommera une API spécifique de **Last.fm**.
#### a. Organisation du design des pages
##### 4.2.1. Organisation du design des pages (introduction)
1.**Page d'accueil (Home Screen)** : Cette page affichera un **champ de recherche** où l'utilisateur peut entrer le nom d'un artiste. Lorsqu'il appuie sur **Rechercher**, l'application affichera les résultats sous forme de liste d'artistes avec une option pour naviguer vers la page des albums ou des charts de l'artiste.
@@ -215,9 +369,7 @@ L'application devra être structurée autour de trois parties principales : **Ar
4.**Page Charts (Chart Screen)** : Cette page affichera les chansons les plus populaires (par exemple, les 10 meilleurs morceaux) en utilisant l'API Last.fm pour afficher des informations comme le **titre**, **l'artiste**, et le **nombre de lectures**.
---
#### b. API à consommer
##### 4.2.2. API à consommer
1.**API Artiste (Artist Information)** :
-**Objectif** : Récupérer des informations sur un artiste, comme son nom, son image et sa biographie.
@@ -237,42 +389,48 @@ L'application devra être structurée autour de trois parties principales : **Ar
-**Données attendues** : Liste des albums d'un artiste avec des informations comme le titre, l'année de sortie, et la couverture de l'album.
-**Exemple d'utilisation** : Afficher les albums d'un artiste sur la page dédiée.
##### 4.2.3. Suite des *features* à programmer
#### c. Structure du projet
```
app/
├── _layout.tsx
├── home.tsx
├── artist.tsx
├── album.tsx
├── chart.tsx
└── ... (autres pages)
```
---
### 4. Développement et Soumission
#### **📡 Accès à l’API Last.fm (5 fonctionnalités supplémentaires)**
1.**🎵 Recommandations d’artistes similaires** :
- Sur la page d’un artiste, afficher une liste d’artistes similaires avec leur image et nom.
- API : `artist.getSimilar`
1. **Création des pages** : Créez les pages mentionnées ci-dessus dans votre application React Native, en utilisant des composants comme `FlatList`, `TextInput`, `Button`, `Image`, etc. pour afficher les données récupérées des API.
2.**📀 Détails d’un album** :
- Lorsqu’on sélectionne un album, afficher la **liste des morceaux**, leur durée et éventuellement un extrait.
- API : `album.getInfo`
2. **Gestion des requêtes API** : Utilisez `fetch` ou `axios` pour interagir avec l'API Last.fm. N'oubliez pas de gérer les erreurs et de charger les données de manière asynchrone avec `useEffect`.
3.**📊 Statistiques d’écoute de l’artiste** :
- Afficher des informations comme le **nombre total d’écoutes** et le **nombre de fans**.
- API : `artist.getInfo`
3. **Interface utilisateur (UI)** : Concevez une interface agréable et fluide avec des composants React Native. Utilisez des éléments de base comme des boutons, des champs de texte et des listes pour afficher les informations de manière claire et organisée.
4.**📅 Concerts et événements à venir** :
- Afficher une liste des prochains concerts d’un artiste avec la **date**, le **lieu**, et un lien vers la réservation.
- API : `geo.getEvents` (ou `artist.getEvents` si disponible)
4. **Tests** : Assurez-vous que votre application fonctionne correctement sur un simulateur ou un appareil réel.
5.**🧑🤝🧑 Connexion à un compte Last.fm** :
- Permettre à l’utilisateur de se connecter avec son compte Last.fm pour sauvegarder ses artistes préférés.
- API : `auth.getMobileSession` + gestion d’un token d’authentification
5. **Soumission** : À la fin de la mission, soumettez le code source de l'application, ainsi qu'une démonstration fonctionnelle qui montre la recherche d'artistes, l'affichage des albums et des charts, ainsi que la gestion des erreurs en cas d'API invalide ou de données manquantes.
#### **🎨 Amélioration de la qualité du design global (1 amélioration UX/UI)**
6.**🌗 Mode sombre et mode clair** :
- Ajouter un **bouton dans les paramètres** pour basculer entre **dark mode** et **light mode**.
- Utilisation de `Appearance` et `useColorScheme()` de React Native.
#### **🖌️ Améliorations UI avec ajout d’un bouton dans le menu du bas (5 nouvelles pages/boutons)**
7.**⭐ Favoris (Ajout d’un bouton “Favoris” dans la barre du bas)** :
- Permettre aux utilisateurs d’**ajouter des artistes, albums ou chansons en favoris** et les retrouver dans une page dédiée.
8.**🔍 Historique des recherches (Ajout d’un bouton “Historique” dans la barre du bas)** :
- Afficher les **dernières recherches effectuées**, pour permettre à l’utilisateur d’y revenir facilement.
---
9.**🎼 Playlist personnalisée (Ajout d’un bouton “Playlist” dans la barre du bas)** :
- Permettre aux utilisateurs de créer et sauvegarder une **playlist personnalisée** avec leurs morceaux préférés.
### 5. Critères d'évaluation
10.**📡 Actualités musicales (Ajout d’un bouton “News” dans la barre du bas)** :
- Afficher les dernières **news musicales** des artistes favoris de l’utilisateur (si disponible via l’API Last.fm ou un flux RSS externe).
- Bonne gestion des API (récupération et affichage des données).
- Structure du code claire et bien organisée.
- Qualité de l'interface utilisateur (UI) et expérience utilisateur (UX).
- Utilisation correcte de React Native et de ses composants.
- Fonctionnalités complètes (recherche d'artistes, affichage des albums, charts).
No newline at end of file
11.**⚙️ Paramètres (Ajout d’un bouton “Paramètres” dans la barre du bas)** :
- Ajouter une page **paramètres** avec des options comme **choix du thème, gestion du compte Last.fm, préférences de recherche, etc.**
