Version du 17 mai 2023 à 23:22

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

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 utilisé la cryptographie. Chaque tag NFC contient une clé privée qui est utilisée pour signer les données contenues dans le tag. De cette manière, nous pouvons vérifier que les données n'ont pas été modifiées depuis leur enregistrement sur le tag.

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.

AppNavigator

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

function Login(props) {
  const [email, setEmail] = useState('');
  const [pass, setPass] = useState('');
  const [passVisible, setPassVisible] = useState(true);
  const { navigation } = props;

  const handleLogin = () => {
    if (email === '' || pass === '') {
      Alert.alert('Enter details to signin!');
    } else {
      auth()
        .signInWithEmailAndPassword(email, pass)
        .then(user => {
          const { uid } = user.user;
          firebase
            .database()
            .ref(`/users/${uid}`)
            .once('value', snapshot => {
              const userData = snapshot.val();
              if (userData.authorization) {
                navigation.navigate('ReadWrite');
              } else {
                navigation.navigate('UserRead');
              }
            });
        })
        .catch(error => {
          Alert.alert(error.message);
        });
    }
  };

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 utilise le niveau supérieur, ce qui ne permet pas une sécurisation complète du tag. Malgré la fonctionnalité "canMakeReadOnly" qui permet d'autoriser seulement l'opération de lecture, il est important de noter que l'activation de cette fonctionnalité est irréversible et empêche toute écriture ultérieure dans le tag. .C'est pourquoi il est nécessaire de descendre au niveau inférieur pour protéger le tag et garantir la sécurité de l'opération d'écriture. En utilisant un mot de passe pour donner l'accès d'écriture seulement à l'administrateur et en ajoutant une signature à l'aide d'une clé publique elliptique secp256k1, on peut distinguer les tags écrits par l'application et ainsi éviter les accès non autorisés. Bien que la gestion du niveau inférieur soit plus complexe, cela peut offrir une meilleure compréhension de la technologie NFC et permettre une utilisation plus sûre et plus efficace.

On peut voir dans la figure suivante, l’organisation de la mémoire du ntag213:

texte descriptif

Bilan

Gestion de projet

<code>
Votre code ici
</code>

@@ Ligne 323 : / Ligne 323 : @@
 On peut voir dans la figure suivante, l’organisation de la mémoire du ntag213:
-[[Fichier:Nfclogo.png|200px|thumb|left|texte descriptif]]
+[[Fichier:Nfclogo.png|200px|thumb|center|texte descriptif]]
 ='''Bilan'''=

IMA4 2021/2023 P17 : Différence entre versions