Version du 15 mai 2023 à 18:02 (voir la source) Bblack (discussion | contributions) (→‎Description) ← Modification précédente		Version du 15 mai 2023 à 18:05 (voir la source) Bblack (discussion | contributions) (→‎Conception) Modification suivante →
Ligne 118 :		Ligne 118 :
	=Conception=		=Conception=
−	==Description de l'architecture technique de l'application  ==	+	==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.[[Fichier:Unknown.png|right ]]		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.[[Fichier:Unknown.png|right ]]

---

Version du 15 mai 2023 à 18:05

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.

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.

Réalisations et résultats

- Réalisation d'une application mobile pour lire et écire sur des tags nfc.

Bilan

Gestion de projet

<code>
Votre code ici
</code>