Handic'App est un projet réalisé pour Microsoft. L'objectif est de créer une application qui centralise les différents services cognitifs Azure existant afin de simplifier leur accessibilité. Ces services sont un réel soutien pour les personnes handicapées.
Pour réaliser cette application, on a décidé d'utiliser le langage React-Native. React-Native est un framework java-script populaire pour réaliser des applications cross-plateformes (application disponible sur IOS et Android).
React-Native est un langage bien adapté pour la programmation orienté objet. En effet chaque élément sur l'application (bouton,image,barre de saisie ...) fait l'objet d'un fichier de code séparé qui peut être réutilisé ensuite dans n'importe quel écran de l'application. Ci-dessous, voici la structure générale d'un fichier de code en React-Native:
Tout d'abord, il faut importer les bibliothèques/fonctions dont on a besoin
Ensuite vient le coeur du fichier, ici nous avons une classe mais on peut également décider de créer une fonction. Une classe en react native est composé de -constructeurs -props -render (obligatoire) -return (pour afficher quelque chose à l'écran, il faut placer son code du return entre des balises )
Ensuite, on peut décider de créer un style pour designer les composants de la classe/fonction
Enfin, il faut exporter la classe afin de pouvoir l'utiliser ailleurs dans l'application (Ici on exporte la classe avec (withNavigation car notre classe renvoie vers une autre, mais on peut utiliser simplement "export default" s'il n'ya pas de renvoie vers un autre objet)
Ci-dessous, des liens vers la documentation officiel de React-Native pour débuter avec le développement mobile:
Learn the basics: https://reactnative.dev/docs/tutorial
Tutoriel complet: https://reactnative.dev/docs/getting-started
Les dossiers .expo et .vscode sont générés automatiquement à la création d'une application React-Native et sert au bon fonctionnement de cette dernière
Assets contient les images affichés dans l'application
Components regroupe les différents objets (boutton, barre de recherche ...)
Ci-dessous, le rendu en front des différents components:
-Affichage:
-Azure:
-Creation:
-Dictaphone:
-Localisation:
-Parametre:
-Recherche:
-Scanner:
-Son:
-Visionneuse:
Navigator est le fichier qui permet la navigation entre les différents écrans de l'application
node_modules, comme son nom l'indique, contient les différents modules de l'application. C'est un fichier très volumineux.
Screen contient les différents écrans de l'application. Ces écrans sont composés d'objets du dossier Components
Ci-dessous, les différents écrans de l'application:
-Login:
-Inscription:
-mdp_oublie:
-Menu:
Chacun des cinq boutons principaux du menun renvoie vers une page pour accéder au service cognitif associé. Ces pages ont la forme ci-dessous:
App.js est le fichier principal. C'est l'application à proprement parlé
Paradoxalement, il est très simple car tout est compacté avant dans les différents fichiers. (C'est l'avantage de la POO)
Les derniers dossiers sont aussi des dossiers générés automatiquement à la création de l'application
Tout d'abord, il faut ouvrir un terminal sur Visual Studio et se placer dans le dossier où se trouve l'application grâce à la commande "cd". Ensuite il faut entrer la commande "npm install" afin d'installer les différents nodes modules nécessaires au lancement de l'application ainsi que : "npm install --global expo-cli" afin d'installer expo. Ensuite il faut entrer la commande "npm start" afin de lancer le programme dans un serveur local
On arrive alors sur la page suivante, d'ici on peut décider de lancer l'application sur un serveur web local en cliquant sur "Run in web browser", sinon peut scanner le QR code avec l'application Expo installé sur votre téléphone afin de pouvoir tester le programme directement sur mobile. lien de téléchergaent de Expo:
-Android: https://play.google.com/store/apps/details?id=host.exp.exponent&hl=en&gl=US
-IOS: https://apps.apple.com/us/app/expo-go/id982107779
