IMA4 2021/2023 P17
Sommaire
Introduction
Chaque année les étudiants de Polytech'Lille effectue divers projets, pour se faire du matériel est mis à disposition (Raspberry, Arduino, ordinateur, Robot etc...). Il est donc nécessaire de rendre ceux-ci afin qu'ils puissent être profitable pour tout le monde. Dans ce sens, le projet sur lequel nous avons travaillé est la création d'une boutique en ligne permettant aux étudiants d'avoir accès à une liste de matériels mis à leur disposition par l'établissement. Cette boutique est accessible via une application mobile et la gestion des produits doit être effectuée à l'aide de la technologie NFC. Le contexte de ce projet est celui de l'enseignement supérieur, où les étudiants ont souvent besoin de matériel spécifique pour réaliser leurs travaux et leurs projets. L'objectif est donc de faciliter l'accès à ce matériel en proposant une plateforme simple et intuitive pour les étudiants. Pour atteindre cet objectif, nous avons utilisé différentes technologies. Tout d'abord, l'application mobile a été développée avec React Native, un framework de développement d'applications mobiles multiplateformes basé sur le langage JavaScript. Cette technologie nous a permis de développer une application performante et rapide, tout en réduisant le temps de développement. Ensuite, pour la gestion des produits, nous avons utilisé la technologie NFC. Cette technologie permet la communication sans fil entre deux dispositifs électroniques à courte distance, et est souvent utilisée pour les paiements sans contact. Dans notre cas, elle nous a permis de créer un système de gestion des produits simple et efficace, accessible à l'aide d'un smartphone. Enfin, pour la gestion des données, nous avons utilisé Firebase, une plateforme de développement d'applications mobiles et web proposée par Google. Firebase nous a permis de stocker les données des utilisateurs, des produits et des commandes de manière sécurisée et accessible depuis n'importe quel dispositif connecté à Internet. Pour résumer, chaque matériel est équipé d'un tag nfc, dès lors qu'un étudiant souhaite emprunter quelque chose, il lui suffit de se rendre sur l'application, de se connecter avec ses identifiants, puis de scanner le tag qui permet d'identifier le matériel. Celui-ci lui sera donc attribué. Pour la restitution du matériel, il suffira juste de le rendre à un admin, qui avec son profil administrateur sur l'application pourra scanner le tag afin de confirmer la restitution et de remettre le matériel dans la "boutique".
Dans ce compte rendu, nous allons détailler les différentes étapes de développement de ce projet, ainsi que les choix techniques que nous avons effectués pour parvenir à réaliser cette application.
Etat de l'art
Dans le domaine de la gestion des matériels mis à disposition dans une école, il existe plusieurs solutions existantes. Parmi celles-ci, on peut citer :
•Les listes papier : cette solution consiste à établir une liste papier des matériels disponibles avec les dates de réservation. Elle est simple à mettre en place, mais présente plusieurs inconvénients, notamment une gestion fastidieuse et peu efficace en cas de changement de planning ou de retard dans la restitution du matériel.
•Les logiciels de gestion : ces outils permettent une gestion automatisée de la disponibilité des matériels et de leur réservation. Ils offrent une meilleure efficacité que les listes papier, mais nécessitent une installation et une configuration, ainsi qu'une maintenance régulière.
•Notre système de gestion par NFC : ce système utilise la technologie NFC (Near Field Communication) pour la gestion des matériels. Cette solution permet une gestion rapide et facile des réservations et des restitutions de matériels grâce à des étiquettes NFC apposées sur chaque matériel.
Chaque solution présente des avantages et des limites. Les listes papier sont simples à mettre en place, mais sont peu efficaces et fastidieuses à gérer. Les logiciels de gestion offrent une meilleure efficacité, mais nécessitent une installation et une maintenance régulière.Notre système de gestion par NFC, quant à lui, offre une gestion rapide et facile, mais nécessite l'acquisition de matériels compatibles avec la technologie NFC.
Cahier des charges
Contexte
Polytech’Lille est une école d'ingénieurs qui offre à ces étudiants un large panel de projets. Pour ce faire, l'école met à la disposition des étudiants des supports variés tout au long de l'année. Ces appareils incluent Raspberry Pi, Arduino, des ordinateurs, des robots etc ... L'objectif de ce projet est de créer une boutique en ligne via une application mobile permettant aux étudiants de parcourir, réserver et gérer le prêt et le retour de ces appareils de manière efficace et intuitive. Cette application s'adresse en priorité aux étudiants de Polytech’Lille, ainsi qu’aux professeurs et aux membres du personnel administratif en charge de la gestion des dispositifs. Les différents objectifs pour mener à bien le projet Le développement d'une application mobile pour afficher les équipements disponibles, faciliter la réservation et la gestion des emprunts et des restitutions. L’intégration de la technologie NFC pour simplifier le processus d'emprunt et de restitution. La mise en place d'une base de données pour stocker les informations sur les utilisateurs, les équipements et les transactions.
Dans quel but ?
Améliorer l’accès aux équipements pour les étudiants Simplifier et optimiser la gestion du matériel pour les professeurs et le personnel administratif Réduire les pertes et le retard dans la restitution du matériel
Les contraintes du projet
En ce qui concerne le coût de ce projet, pour le développement nous avons juste eu besoin de quelques tags (environ une dizaine d’euros), nous avions déjà nos smartphones afin de tester au fur et à mesure notre application. Nous pouvons cependant ajouter le prix du smartphone dans le coût de développement du projet. Au début nous avions commencé à exécuter notre application sur un appareil virtuel, nous sommes vite passé à l’exécution de celle-ci sur smartphone dès lors que nous avons intégré la technologie nfc à notre application car le simulateur ne permettait pas de tester cette technologie. L’utilisation de la technologie nfc est le coeur de notre projet. En termes de technique utilisée nous avons fait le choix de React native. C’est un framework open-source créé par Facebook. Il permet de développer des applications mobiles pour Android et IOS. Il est basé sur React qui est la bibliothèque Javascript de Facebook. React native nous permet de réutiliser le code entre les 2 plateformes, Android et IOS. Au début nous voulions présenter nos résultats sur les 2 plateformes, cependant pour développer une application IOS en utilisant la technologie nfc, il faut adhérer au programme de développement Apple qui a un coût d’une centaine d’euros, nous avons fait le choix de ne pas inscrire ceci dans notre coût de développement. La mise en fonction de l’application sur la plateforme IOS pourra se faire sans soucis par la suite (de par la compatibilité que nous offre React Native) en fonction du budget alloué pour le déploiement de l’application. En ce qui concerne le choix de Firebase, qui est une plateforme de développement d’application mobile et web créé par Google, celle-ci nous offre des services de backend qui nous ont permis de consacrer beaucoup moins de temps et d’efforts sur la gestion de l’infrastructure serveur. En effet, nous avons utilisé leur service d’authentification intégré et leur base de données en temps réel (Firebase) qui permet de stocker et de synchroniser les données entre les clients en temps réel. Par la suite, ces services pourraient tout à fait être mis en place en interne (moyennement le budget et le temps alloué au développement) avec très peu de modifications au niveau code.
Délai
Le projet a dû être réalisé dans un délai défini qui correspond au S7 et S8.
Cahier des spécifications
L’analyse des moyens correspond à la partie des contraintes du projet dans le cahier des charges. Nous allons maintenant définir toutes les exigences spécifiques.
Exigences fonctionnelles
Au niveau de l’application :
● Interface utilisateur intuitive et facile d’utilisation
● Authentification des étudiants et administrateurs
● Visualisation de la liste des matériels disponibles
● Emprunt de matériel en scannant le tag NFC
● Visualisation des emprunts en cours pour chaque utilisateur
Au niveau de la gestion des produits :
● Utilisation de la technologie NFC pour identifier chaque matériel
● Assignation du matériel à un utilisateur lors de l'emprunt
● Restitution du matériel par les administrateurs en scannant le tag NFC
Au niveau de la base de données :
● Stockage sécurisé des données des utilisateurs, des produits et des commandes avec Firebase
● Accès aux données depuis n'importe quel dispositif connecté à Internet
Exigences non fonctionnelles
En termes de performance :
● Un temps de réponse rapide pour l’application mobile
● Une gestion des données efficace avec Firebase
En termes de sécurité :
● Une authentification sécurisée des utilisateurs et des administrateurs
● Protection des données sensibles stockées dans Firebase
● Sécurisation de l’écriture sur le tag en low-level
En termes de compatibilité :
● Application mobile compatible avec IOS et Android
Compétences nécessaire et acquisition de nouvelles compétences
● JavaScript
● Développement d’applications mobiles avec React Native
● Utilisation de la technologie NFC
● Gestion des données avec une base de données
Diagramme de Gantt
Notre Application: POLYTAG
C’est le moment de vous présenter le nom de notre application : POLYTAG Il fait référence à l’école : POLYTECH en intégrant un élément de la technologie nfc qui est le TAG. Nous avons choisi une petite icône qui représente un smartphone car c’est sur celui-ci que l’application est vouée à être utilisée. A côté de celui-ci quelques courbes faisant référence à la « near field communication ». De plus à l’intérieur de l’appareil mobile une petite icone « Sécurité », c’est vraiment sur cet axe que nous avons voulu nous démarquer. Une partie lui sera dédiée dans la suite du rapport. Pour finir sur les couleurs, nous avons fait le choix du bleu qui est la couleur de l’école sur un fond noir pour garder un style assez sobre et épuré.
Conception
React Native
Pour développer notre application nous avons fait le choix d'utiliser le framework React Native. Un framework est une infrastructure sur laquelle les développeurs peuvent créer des applications plus rapidement et de manière plus standardisée. Les frameworks sont désormais utilisés pour le développement d’applications sur toutes les plateformes web et mobiles.
React Native fait référence à un cadre basé sur JavaScript utilisé pour créer des applications mobiles natives sur Android et la plate-forme iOS. Il est basé sur React, la bibliothèque JavaScript de Facebook, pour créer des interfaces utilisateur pour les plateformes mobiles. Les développeurs web peuvent utiliser React Native JavaScript pour écrire des applications Android et iOS qui agissent et apparaissent de manière similaire aux applications natives. Le code écrit avec React Native est également partageable entre les plateformes, ce qui permet un développement efficace et simultané sur iOS et Android.
Les applications React Native sont créées en combinant JavaScript avec un balisage de type XML, c’est-à-dire JSX. La passerelle React Native est chargée d’effectuer le rendu natif des API en Java (pour Android) et Swift (pour iOS). Les applications sont rendues avec des composants d’interface utilisateur mobiles au lieu de webviews et fonctionnent de la même manière que les autres applications mobiles. React Native peut afficher des interfaces JavaScript pour les API de plate-forme. Ainsi, les applications React Native peuvent accéder à des fonctionnalités de la plate-forme mobile telles que la localisation de l’utilisateur et l’appareil photo du téléphone.
React Native offre un support pour les plateformes mobiles Android et iOS et pourrait étendre le support à d’autres plateformes dans le futur. La plupart des codes écrits dans ce framework sont multiplateformes, ce qui permet aux développeurs de gagner du temps et de réduire les efforts de codage. Certaines des applications de Facebook et Coinbase sont maintenant produites avec React Native.
L'application utilise plusieurs bibliothèques React Native, notamment :
-react-navigation pour la gestion de la navigation entre les différentes vues de l'application.
-react-native-paper pour la conception d'interfaces utilisateur avec des composants prédéfinis.
-react-native-nfc-manager pour l'interaction avec les tags NFC.
Pour la mise en place de l'environnement, celle-ci est très rapide et très bien documenté sur le site react native: https://reactnative.dev/docs/environment-setup
Firebase pour la gestion des données
Firebase est une plateforme de développement d'applications web et mobiles proposée par Google. Elle offre une variété de services, tels que le stockage en temps réel, l'authentification, les notifications, l'analyse, etc. Dans le cas de notre application, nous avons utilisé Firebase pour le stockage des données des utilisateurs, des produits et des commandes.
Firebase offre une base de données en temps réel, ce qui signifie que les modifications apportées aux données sont immédiatement répercutées sur tous les appareils connectés. Cela permet à notre application d'être réactive et de toujours afficher les informations les plus récentes.
Maintenant, il faut connecter notre application à notre base de données. Pour ce faire nous avons suivi une documentation précise disponible ici (Lien : https://rnfirebase.io). Nous allons préciser à la suite quelques étapes importantes, sans développer celles concernant l’installation de certains modules et dépendances. Pour commencer il faut se rendre sur Firebase et se créer un compte (ou se connecter si on en a déjà un). Ensuite il suffit de créer un projet puis on arrive sur une page qui nous demande de choisir l'OS de développement, dans notre cas Android. Par la suite toute les étapes sont très bien détaillé sur Firebase nous n'allons donc pas le refaire ici.
Comment fonctionne le NFC
La technologie NFC (Near Field Communication) est une technologie de communication sans fil à courte portée qui permet l'échange d'informations entre deux dispositifs compatibles NFC. Dans notre cas, nous utilisons des tags NFC qui sont apposés sur chaque matériel. Ces tags contiennent des informations sur le matériel, comme son nom, sa description, etc.
Lorsqu'un utilisateur souhaite emprunter un matériel, il lui suffit de scanner le tag NFC avec son smartphone. L'application va alors lire les informations contenues dans le tag et enregistrer l'emprunt dans la base de données Firebase.
Pour la restitution du matériel, le processus est similaire. L'administrateur scanne le tag NFC du matériel avec son smartphone, et l'application va enregistrer la restitution dans la base de données.
Cryptographie pour la sécurité des données
Pour assurer la sécurité des données, nous avons mis en place des mesures de cryptographie. Chaque tag NFC est doté d'une signature qui nous permet de différencier les tags écrits par notre application des autres tags. Nous avons utilisé la bibliothèque npm 'elliptic' pour réaliser la signature des données. Cette bibliothèque offre des fonctionnalités pour la cryptographie à courbes elliptiques, qui est une forme de cryptographie asymétrique.
Realisation
Description
Das cette partie nous allons vous présenter quelques morceaux de notre code afin de faciliter la compréhension de comment avons-nous réalisé cela.
Main
function Main() {
return (
<PaperProvider>
<AppNavigator />
</PaperProvider>
);
}
export default Main;
Main est la fonction principale de l'application. Elle utilise le PaperProvider pour fournir les thèmes du papier (un ensemble de styles prédéfinis pour les éléments d'interface utilisateur) à toute l'application. La principale composante de l'application est AppNavigator qui gère la navigation entre les différentes pages.
const Stack = createStackNavigator();
function AppNavigator() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen options={{headerShown: false, cardStyle: { backgroundColor: 'black' }}} name="Login" component={Login} />
// Le reste du code a été omis pour gagner de la place
</Stack.Navigator>
</NavigationContainer>
);
}
AppNavigator est la fonction qui gère la navigation entre les différentes pages de l'application. Elle utilise le NavigationContainer de @react-navigation/native et le createStackNavigator pour créer une pile de navigation. Chaque Stack.Screen représente une page de l'application. Les propriétés name et component de Stack.Screen définissent respectivement le nom de la page et le composant à afficher. Les options permettent de personnaliser l'apparence de la page et de la barre de navigation.
Connexion
Ici on utilise useState pour le state local, 'useState est un Hook. Il nous permet d'ajouter un état local à un composant fonctionnel. Avant l'introduction des Hooks, seuls les composants de classe pouvaient avoir un état.
const [email, setEmail] = useState(); : On créer une variable d'état email et une fonction setEmail pour mettre à jour cette variable. L'argument initial de useState() est la valeur initiale de l'état, qui est une chaîne vide dans ce cas.
On utilise auth pour l'authentification avec Firebase, database et firebase pour interagir avec la base de données Firebase handleLogin est la fonction qui gère la connexion. Elle vérifie d'abord si l'e-mail et le mot de passe ne sont pas vides. Si c'est le cas, elle utilise la méthode signInWithEmailAndPassword de l'auth Firebase pour se connecter. En cas de succès, elle récupère l'ID utilisateur (uid) et utilise ce uid pour obtenir les informations de l'utilisateur dans la base de données Firebase.
Nous venons de voir la page de connexion, dans le meme sens il y a la page d'inscription que nous ne développerons pas ici
Ecriture du tag
Nous attaquons maintenant la partie la plus compliqué qui est l'écriture sur le tag.
function SecureWrite2(props) {
const [value, setValue] = useState('');
const androidPromptRef = useRef();
async function writeLowLevel() {
try {
if (Platform.OS === 'android') {
androidPromptRef.current.setVisible(true);
}
await NfcManager.requestTechnology(NfcTech.NfcA);
const items = toHexa(`${value}`);
await WritePassword();
await WritePayload(items);
await WriteSignature(`${value}`);
const date = setCurrentDate();
const tag = await NfcManager.getTag();
addProductAvailable(tag.id, `${value}`, date);
} catch (ex) {
Alert.alert('Error Write', 'Try again !!', [{text: 'OK'}]);
} finally {
if (Platform.OS === 'android') {
androidPromptRef.current.setVisible(false);
}
NfcManager.cancelTechnologyRequest();
}
}
writeLowLevel est une fonction asynchrone qui fait plusieurs choses :
-Elle vérifie si l'OS est Android et, si c'est le cas, elle rend visible le prompt Android.
-Elle fait une requête pour utiliser la technologie NFC.
-Elle convertit la valeur entrée par l'utilisateur en hexadécimal et la stocke dans items.
-Elle exécute les fonctions WritePassword, WritePayload et WriteSignature qui sont définies ailleurs dans notre projet et que nous détaillerons juste après
-Elle récupère la date courante et l'étiquette NFC, puis ajoute le produit à une liste de produits disponibles.
En cas d'erreur lors de l'exécution de ces opérations, une alerte est affichée à l'utilisateur. À la fin, indépendamment du fait qu'une erreur se soit produite ou non, le prompt Android est caché et la requête NFC est annulée. Enfin, la fonction de composant SecureWrite2 retourne un élément JSX qui est rendu sur l'écran. Cet élément comprend un champ de texte où l'utilisateur peut entrer une valeur, un bouton pour lancer la fonction writeLowLevel lorsqu'il est pressé, et le composant AndroidPrompt qui peut afficher un prompt à l'utilisateur sur Android. Le style des éléments est défini dans l'objet styles créé avec StyleSheet.create.
Réalisations et résultats
Application basique niveau supérieur
Pour commencer avec une application NFC basique qui utilise la lecture/écriture de tags NFC, nous avons utilisé le niveau supérieur de notre bibliothèque NFC, en utilisant la technologie NDEF . Les quatre étapes que nous avons suivies pour utiliser cette bibliothèque sont les suivantes :
1️⃣-->| Tout d'abord, nous avons utilisé la méthode NfcManager.start() pour commencer à écouter une balise NFC (bien que cette étape ne soit pas obligatoire).
2️⃣-->| Ensuite, nous avons demandé des technologies NFC particulières en utilisant la méthode NfcManager.requestTechnology, où nous avons demandé la technologie Ndef.
3️⃣-->| Enfin, nous avons appelé des méthodes spécifiques sur le gestionnaire de technologie NFC , par exemple pour lire le tag NfcManager.getTag(),ou NfcManager.ndefHandler.writeNdefMessage() pour écrire. Et pour finir, nous avons nettoyé notre inscription technologique en utilisant la méthode NfcManager.cancelTechnologyRequest().
Ces trois étapes sont nécessaires pour utiliser efficacement notre bibliothèque NFC à un niveau supérieur et pour commencer à créer une application NFC basique avec des fonctionnalités de lecture/écriture de tags NFC.
Pour vérifier si le NFC est activé sur le téléphone, nous avons utilisé la méthode useEffect() de React. Dans cette méthode, nous avons créé une fonction asynchrone checkNfc() qui utilise la méthode NfcManager.isSupported() pour vérifier si le téléphone prend en charge le NFC. Si le téléphone prend en charge le NFC, nous avons ensuite utilisé la méthode NfcManager.start() pour commencer à écouter les balises NFC et la méthode NfcManager.isEnabled() pour vérifier si le NFC est activé sur le téléphone. Nous avons utilisé la méthode setEnabled() pour définir l'état du NFC comme activé si le NFC était activé sur le téléphone. Enfin, nous avons utilisé la méthode setHasNfc() pour définir l'état de la prise en charge NFC comme étant vraie ou fausse, selon que le téléphone prend en charge le NFC ou non.
L'utilisation de useEffect() pour vérifier si le NFC est activé est une bonne pratique car cela garantit que cette vérification est effectuée une fois au montage du composant et que les ressources sont utilisées efficacement.
Passage au niveau inférieur
La technologie NDEF fonctionne au niveau supérieur, ce qui ne garantit pas une sécurité totale du tag. Malgré la fonctionnalité "canMakeReadOnly" qui permet uniquement la lecture, il est important de noter que son activation est permanente et empêche toute écriture future sur le tag. Par conséquent, il est nécessaire de descendre au niveau inférieur pour protéger le tag et assurer la sécurité de l'opération d'écriture. En utilisant un mot de passe pour limiter l'accès à l'écriture à l'administrateur et en ajoutant une signature avec une clé publique elliptique secp256k1, on peut différencier les tags écrits par l'application et ainsi prévenir les accès non autorisés. Même si la gestion du niveau inférieur est plus complexe, cela permet une meilleure compréhension de la technologie NFC et une utilisation plus sûre et efficace.
On peut voir dans la figure suivante, l’organisation de la mémoire du ntag213:
L’intervalle mémoire dédié pour l'utilisation se compose de l'ensemble des pages de la page 4 jusqu’à la page 39.
Nous avons utilisé les opérations NFC suivantes :
La commande de lecture (READ) utilise le code 0x30 et requiert une adresse de départ. Elle renvoie les 16 octets de quatre pages NTAG21x. Par exemple, si l'adresse de départ est 03h, les pages 03h, 04h, 05h et 06h seront renvoyées en réponse.
La commande d'écriture (WRITE) est identifiée par le code 0xa2. Elle requiert une adresse de bloc spécifique et permet d'écrire 4 octets de données dans la page correspondante.
L'accès à une zone de mémoire protégée ne peut être effectué qu'après avoir réussi une vérification de mot de passe à l'aide de la commande PWD_AUTH, qui est identifiée par le code 0x1b. Le byte de configuration AUTH0 détermine la zone protégée en spécifiant la première page protégée par le mécanisme de mot de passe. Le niveau de protection peut être configuré à l'aide du bit PROT, qui permet de protéger en écriture ou en lecture/écriture. Lorsque la commande PWD_AUTH est utilisée avec le mot de passe en paramètre et que la vérification réussit, un accusé de réception d'authentification de mot de passe, appelé PACK, est renvoyé.
La configuration du mot de passe sur le tag se fait par blocs, s'étendant de la page 41 à la page 44. Chaque page représente un bloc spécifique de configuration, comme indiqué dans le tableau ci-dessous :
Signature
Dans le but de renforcer la sécurité du tag et d'autoriser uniquement l'application à scanner les tags qu'elle a écrits, nous allons mettre en œuvre la cryptographie asymétrique. Un exemple concret de cette utilisation peut être illustré par la simulation suivante : Alice signe un message confidentiel à l'aide de sa clé privée, puis Bob peut vérifier l'intégrité du message crypté en utilisant la clé publique fournie par Alice. Cela permet à Bob de déterminer si le message a été réellement écrit par Alice ou non.
Pour résoudre notre problématique, nous avons opté pour l'utilisation de l'algorithme de cryptographie asymétrique ECDSA (Elliptic Curve Digital Signature Algorithm) basé sur la courbe elliptique secp256k1 pour garantir l'authenticité des tags NTAG213. Cette décision est fondée sur plusieurs facteurs, tels que la sécurité, la taille de la clé et la facilité d'intégration avec les dispositifs NFC existants.
L'utilisation de la cryptographie basée sur les courbes elliptiques offre une sécurité comparable à celle d'autres algorithmes couramment utilisés, tout en permettant l'utilisation de clés de taille réduite. Cela présente l'avantage de réduire les exigences de stockage et de traitement pour les dispositifs NFC. De plus, la courbe secp256k1 est largement reconnue et utilisée, notamment dans les technologies de blockchain comme Bitcoin et Ethereum. Cette popularité facilite l'intégration de la vérification d'authenticité dans les dispositifs NFC existants.
En résumé, l'utilisation de l'algorithme ECDSA basé sur la courbe elliptique secp256k1 offre un équilibre optimal entre sécurité, efficacité et compatibilité, ce qui en fait un choix approprié pour garantir l'authenticité des tags NTAG213.
Ajout rapide de nouvelles fonctionnalités
Tout au long du projet nous avons structuré le code afin que l'ajout de nouvelles fonctionnalité soit relativement simple. Plusieurs étapes sont essentielles à l'ajout de fonctionnalités, nous allons vous démontrer cela a travers un exemple. La dernière fonction que nous avons ajoutées à notre projet est la validation des produits retournés. C'est à dire que lorsqu'un étudiant souhaite rendre un produit, un administrateur doit confirmer la demande:
Voici les étapes:
-Définition de la fonctionnalité
Ici, la fonctionnalité à ajouter est la possibilité de valider un produit retourné. Dans l'écran d'accueil de notre application, nous avons ajouté un bouton qui permet à l'administrateur de naviguer vers l'écran "ValidateReturnProducts". Sur cet écran, l'administrateur peut voir une liste de produits retournés qui attendent une validation
<Button
mode="contained-tonal"
dark="true"
style={[styles.btn]}
labelStyle={styles.buttonLabel}
onPress={() => {
navigation.navigate('ValidateReturnProducts');
}}>
Validate products returned
</Button>
-Mise à jour de l'application
Nous avons une FlatList qui affiche chaque produit retourné en attente de validation. Chaque item de la liste comprend un bouton qui, lorsqu'il est pressé, déclenche une alerte pour confirmer l'action de validation du retour du produit.
function ValidatingReturnProduct(tagId, record) {
const date = setCurrentDate();
Alert.alert('Confirmation', `Validate return ${record} ?`, [
{
text: 'No',
style: 'cancel',
},
{
text: 'Yes',
onPress: () => ValidateReturnProduct(tagId, record, date),
},
]);
}
return (
<View style={styles.wrapper}>
<FlatList
data={data}
keyExtractor={item => item.tagid}
renderItem={({item}) => (
<View>
<Text style={styles.textId}>ID: {item.tagid}</Text>
<Button
mode="contained-tonal"
dark="true"
style={[styles.btn]}
onPress={() => ValidatingReturnProduct(item.tagid, item.tagrec)}>
<Image source={require('../Images/not_available.png')} style={styles.image} />
{item.name} a retourné {item.tagrec} le {item.daterec}
</Button>
</View>
)}
/>
</View>
Lorsque l'utilisateur confirme la validation du retour d'un produit, la fonction ValidateReturnProduct est appelée. Elle supprime le produit de la liste en attente de validation et le remet dans les produits disponibles.
function ValidateReturnProduct(tagId, record, date) {
const user = firebase.auth().currentUser;
if (user) {
firebase
.database()
.ref('/produitsRetourneAValider/')
.once('value')
.then(snapshot => {
snapshot.forEach(childSnapshot => {
const childData = childSnapshot.val();
if (childData.tagid === tagId) {
database()
.ref('/produitsDisponibles/' + tagId)
.set({
tagrec: record,
tagid: tagId,
daterec: date,
})
.then(() => console.log('Data produitsDisponibles set.'));
database()
.ref('/produitsRetourneAValider/' + tagId)
.remove();
}
});
});
}
}
En résumé, l'ajout de cette nouvelle fonctionnalité de validation des produits retournés est un exemple parfait de la façon dont une nouvelle fonctionnalité peut être intégrée de manière propre et organisée dans notre application React Native. Nous avons clairement défini la fonctionnalité, mis à jour l'état de l'application pour prendre en compte les nouvelles informations, mis à jour l'interface utilisateur pour afficher ces nouvelles informations et gérer les interactions
Bilan
Notre projet POLYTAG vise à faciliter et moderniser la gestion des locations et des retours de matériel au sein de l'établissement. L’utilisation de la technologie NFC permet aux étudiants et au personnel d'accéder facilement et rapidement aux ressources dont ils ont besoin. Le développement de cette solution a été divisé en plusieurs phases clés comprenant la conception, le développement, les tests, le déploiement et la sécurité. L'ensemble du projet a été rigoureusement planifié et exécuté en tenant compte des besoins et contraintes spécifiques de l'installation et de ses utilisateurs. Ce projet de boutique en ligne utilisant le NFC pourrait très bien contribuer à améliorer l'efficacité de la gestion des ressources et à offrir la meilleure expérience utilisateur aux étudiants et professeurs. Il démontre également l'engagement de l'institution à adopter de nouvelles technologies et à innover en termes de services et de processus internes. A travers cette expérience, nous avons pu acquérir et développer de nouvelles compétences, notamment la découverte de React Native, l’amélioration de nos compétences en Javascript, l’utilisation de Firebase, la gestion de projet et pour finir le point le plus important, l’utilisation de la technologie NFC. Nous avons pris beaucoup de plaisir à réaliser ce projet et aujourd’hui nous vous présentons une application fonctionnelle, prête à l’emploi. De nombreuses améliorations peuvent être apportées afin de rendre celle-ci encore plus complète. Nous vous invitons à vous rendre sur notre GitHub si vous souhaitez consulter le code du projet : https://github.com/Hblgrim/PolyTagVf . Veuillez demander l’accès au répertoire du projet, car il n'est pas public.
