Scribd
Importer
35 vues4 pages

Application mobile pour gérer les étudiants

L'objectif est de compléter une application mobile simple pour ajouter des étudiants, incluant un écran principal affichant une liste d'étudiants avec un champ de texte et un bouton 'Ajouter'. Les instructions incluent l'installation d'AsyncStorage et la complétion du code dans le fichier HomeScreen.tsx. L'application doit permettre de charger, ajouter et afficher des étudiants en utilisant AsyncStorage pour la persistance des données.

Transféré par

moutii bouraoui
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd
35 vues4 pages

Application mobile pour gérer les étudiants

L'objectif est de compléter une application mobile simple pour ajouter des étudiants, incluant un écran principal affichant une liste d'étudiants avec un champ de texte et un bouton 'Ajouter'. Les instructions incluent l'installation d'AsyncStorage et la complétion du code dans le fichier HomeScreen.tsx. L'application doit permettre de charger, ajouter et afficher des étudiants en utilisant AsyncStorage pour la persistance des données.

Transféré par

moutii bouraoui
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd

Objectif : Compléter une application mobile simple pour ajouter des étudiants.

(5 pts)

Exigences de l'application

1. Écran principal (Liste des étudiants) : (5 pts)

o Afficher une liste d'étudiants ajoutés. Chaque étudiant doit afficher son nom.

o Inclure un champ de texte pour saisir le nom de l'étudiant.

o Un bouton "Ajouter" pour soumettre le nom de l'étudiant et mettre à jour la liste


affichée.

Instructions

1. Installer AsyncStorage :

o Utiliser la commande async-storage et la navigation :

bash

Copier

npm install @react-native-async-storage/async-storage

2. Compléter le code :

o Remplir les parties manquantes dans le fichier HomeScreen.tsx ci-dessous.

Fichiers de l'application

Copier

import * as React from 'react';

import { AppRegistry } from 'react-native';

import HomeScreen from './screens/HomeScreen';

const App = () => {

return (

<HomeScreen />

);

};

AppRegistry.registerComponent('YourAppName', () => App);

2. HomeScreen.tsx

javascript

Copier
import React, { useEffect, useState } from 'react';

import { View, Text, Button, FlatList, TextInput } from 'react-native';

import AsyncStorage from '@react-native-async-storage/async-storage';

const HomeScreen = () => {

const [students, setStudents] = useState([]); // État pour stocker la liste des étudiants

const [studentName, setStudentName] = useState(''); // État pour le nom de l'étudiant à ajouter

// Fonction pour charger les étudiants depuis AsyncStorage

const loadStudents = async () => {

try {

const storedStudents = await AsyncStorage.getItem('students');

if (storedStudents) {

setStudents(JSON.parse(storedStudents)); // Mettre à jour l'état avec les étudiants chargés

} catch (e) {

console.error(e);

};

useEffect(() => {

loadStudents(); // Charger les étudiants au démarrage de l'application

}, []);

// Fonction à compléter pour ajouter un étudiant

const addStudent = async () => {

// Vérifiez si le champ de texte est vide

// Si oui, affichez une alerte

// Chargez la liste actuelle des étudiants depuis AsyncStorage


// Ajoutez le nouvel étudiant à la liste

// Enregistrez la liste mise à jour dans AsyncStorage

// Mettez à jour l'état avec la nouvelle liste

// Réinitialisez le champ de texte

};

return (

<View>

<TextInput

placeholder="Nom de l'étudiant"

value={studentName} // Lié à l'état studentName

onChangeText={setStudentName} // Met à jour l'état à chaque saisie

style={{ borderWidth: 1, margin: 10, padding: 10 }}

/>

<Button title="Ajouter" onPress={addStudent} /> {/* Appelle la fonction addStudent lors du clic
*/}

<FlatList

data={students}

keyExtractor={(item, index) => index.toString()}

renderItem={({ item }) => <Text>{item}</Text>} // Affiche le nom de chaque étudiant

/>

</View>

);

};

export default HomeScreen;

Notes

 Assurez-vous que vous le testent l'application après avoir ajouté le code.


 Encouragez-les à commenter les parties qu'ils complètent pour expliquer leur logique.

 Vérifiez que AsyncStorage est bien installé et importé dans le fichier HomeScreen.tsx.

Vous aimerez peut-être aussi