Institut Supérieur de Comptabilité et d’Administration des Entreprises
Nouakchott-Mauritanie
PROJET DE FIN D’ETUDES
Pour l’obtention de :
LICENCE en DEVELOPPEMENT INFORMATIQUE
Thème :
Développement d’une application mobile (client) qui communique avec API
serveur
Elaboré par: Cheikh El Mustapha Hamady – I18189
Encadré par : Dr. Mohammed Ould Zoubeir
Année Universitaire : 2022-2023
Dédicace
Toutes les lettres ne sauront trouver les mots qu’il faut…Tous les mots ne sauraient exprimer
la gratitude,
L’amour, le respect, la reconnaissance. Aussi, c’est tout simplement que :
Je dédie cette Mémoire
Je remercie avant tous Allah
A mon très cher père
Tout l’encre du monde ne pourrait suffire pour exprimer mes sentiments envers un être très
cher. J’implore Dieu, tout puissant, de vous accorder une bonne santé, une longue vie et
beaucoup de bonheur
A ma très chère mère,
Aucune dédicace très chère maman, ne pourrait exprimer la profondeur des sentiments que
j’éprouve pour vous. Vous m’avez aidé et soutenu pendant de nombreuses années avec à
chaque fois une attention renouvelée. Puisse Dieu, tout puissant, vous combler de sante, de
bonheur et vous procurer une longue vie
.
1
REMERCEMENT
Tout d’abord, nous remercions dieu le tout puissant de nous avoir donné l’opportunité
d’achever ce projet.
Nous commençons par remercier Dr. Mohammed Ould Zoubeir qui nous a fait l’honneur
d’être encadrant.
Nous le remercions profondément pour ses encouragements continus, d’être toujours là pour
nous écouter, nous aider, nous guider à retrouver le bon chemin par sa sagesse et ses précieux
conseils.
En outre, son soutien moral, sa compréhension, sa générosité en matière de formation et
d’encadrement nous ont été très utiles pour l’élaboration de ce mémoire.
Nous le remercions aussi pour le conseil concernant les taches évoquées dans ce rapport, le
suivi et la confiance qu’il nous a témoignée.
Nous voulons également exprimer par ces lignes de remerciements notre gratitude envers tous
ceux qui par leur présence, leur soutien, leur disponibilité ou leurs conseils, nous ont
encourages pour accomplir ce projet. Enfin, nous ne pouvons achever ce mémoire sans
exprimer nos sincères remerciements et notre profonde gratitude a tout le professeur de notre
institut ISCAE, pour leur dévouement et leur assistance tout au long de notre cursus d’études
universitaires.
2
TABLE DE MATIERES
Dédicace.................................................................................................................................................. 1
REMERCEMENT................................................................................................................................. 2
INTRODUCTION ................................................................................................................................. 6
1
L’ENTREPRISE SYSONE ............................................................................................................ 8
2
ANALYSE ET SPECIFICATION DES BESOINS ....................................................................... 9
2.1
INTRODUCTION .................................................................................................................. 9
2.2
Spécifications des besoins : .................................................................................................... 9
2.2.1
Besoins fonctionnels ....................................................................................................... 9
2.2.2
Besoins non fonctionnels : ............................................................................................. 9
2.3
Analyse des besoins .............................................................................................................. 10
2.3.1
2.4
Méthodologie de développement : ........................................................................................ 10
2.4.1
Définition de processus unifié : ................................................................................... 10
2.4.2
Phase du processus unifié : .......................................................................................... 10
2.4.3
Activités du processus unifie : ...................................................................................... 10
2.5
3
Conclusion ............................................................................................................................ 11
DEVELOPPEMENT ET REALISATION ...................................................................................11
3.1
INTRODUCTION : .............................................................................................................. 11
3.2
Définition React Native : ...................................................................................................... 12
3.3
L’histoire de React Native .................................................................................................... 12
3.4
Le cross-platform .................................................................................................................. 16
3.5
Comment fonctionne React Native ? ................................................................................... 17
3.6
L’architecture React Native.................................................................................................. 18
3.6.1
Avant la nouvelle architecture React 18 ...................................................................... 18
3.6.2
Argumentation du choix de React Native .................................................................... 23
3.7
4
Étude préalable : ........................................................................................................... 10
Expo Go................................................................................................................................ 25
3.7.1
Fetch ............................................................................................................................. 30
3.7.2
Axios.............................................................................................................................. 31
3.8
Comment faire des appels d’API REST dans React Native App ........................................ 32
3.9
En conclusion ....................................................................................................................... 32
Node JS ......................................................................................................................................... 33
4.1
Package.json ......................................................................................................................... 33
4.2
@expo/vector-icons ............................................................................................................... 34
4.3
React-navigation/native ........................................................................................................ 35
4.4
React-native-render-html ..................................................................................................... 35
3
4.5
5
React-native-tailwindcss ....................................................................................................... 35
PRESENTATION DU SYSTEME ............................................................................................. 36
5.1
Les principales interfaces graphiques ................................................................................. 36
5.2
Interface pour l’offre d’emploi ............................................................................................ 36
5.3
Interface pour l’appels d’offre ............................................................................................. 37
5.4
Interface pour l’infos avis .................................................................................................... 38
5.5
Conclusion ............................................................................................................................ 38
Conclusion générale ............................................................................................................................ 40
WEBOGRAPHIE ................................................................................................................................ 41
4
Liste des figures
Figure 1: logo React Native .......................................................................................... 12
Figure 2: logo hackathon .............................................................................................. 14
Figure 3:logo Android ................................................................................................... 15
Figure 4: logo IOS ........................................................................................................ 16
Figure 5: logo thread ..................................................................................................... 19
Figure 6: logo Bytecode ................................................................................................ 21
Figure 7: logo CODEGEN ............................................................................................ 22
Figure 8: logo shadow thread ........................................................................................ 23
Figure 9: logo Expo ...................................................................................................... 25
Figure 10: logo Développement.................................................................................... 25
Figure 11: logo Nom de projet ..................................................................................... 26
Figure 12: logo terminale pour créer un projet ............................................................ 28
Figure 13: logo terminal pour run l’application............................................................ 28
Figure 14: logo terminal pour commande turnel .......................................................... 29
Figure 15:logo fetch ...................................................................................................... 31
Figure 16: logo code en react native ............................................................................. 32
Figure 17: logo Node js................................................................................................. 33
Figure 18: page d’offre d’emploi .................................................................................. 36
Figure 19: page d’appels d’offre ................................................................................... 37
Figure 20: page d’infos et avis ...................................................................................... 38
5
INTRODUCTION
L’application que nous avons développée est une plateforme dédiée à l’offre d’emploi, aux
appels d’offre et aux informations et avis en Mauritanie. Dans un contexte ou la recherche
d’opportunités professionnelles est essentielle pour les demandeurs d’emploi et les
entreprises, notre application vise à faciliter la connexion entre les deux parties en fournissant
un espace centralise pour la publication et la recherche d’offre d’emploi et d’appels d’offre.
En Mauritanie, ou le marché du travail est dynamique et en constante évolution, il est crucial
pour les demandeurs d’emploi d’avoir accès à des informations précises et a jour sur les
opportunités professionnelles disponibles. De même, les entreprises et les organismes publics
ont besoin d’une plateforme fiable pour diffuser leurs offres d’emploi et leurs appels d’offre
de manière efficace.
Notre application vise à répondre à ces besoins en fournissant une interface conviviale et
intuitive, accessible à la fois sur les smartphones et les tablettes, Grace a notre application, les
utilisateurs pourront explorer les différentes offres d’emploi et les appels d’offre en
Mauritanie, ainsi que consulter des informations et des avis pertinents lies aux marches du
travail local.
L’utilisation de la technologie React Native pour le développement de notre application frontend garantit une expérience utilisateur fluide et réactive, quel que soit le dispositif utilise. En
parallèle, nous avons mis en place une API robuste pour gérer les interactions avec notre base
de données et assurer la fiabilité et la sécurité des informations fournies.
Notre objectif principal est de simplifier le processus de recherche d’emploi et d’appels
d’offre en Mauritanie, en fournissant une plateforme complète et facile à utiliser. Nous
croyons fermement que notre application contribuera à réduire les frictions sur la marche du
travail en facilitant le mise en relation des demandeurs d’emploi et des employeurs, ainsi
qu’en offrant un accès rapide et fiable aux informations pertinentes.
Dans ce rapport, nous décrirons en détail l’architecture de notre application, les défis
rencontres lors de son développement, les fonctionnalités mise en place et les résultats
obtenus. Nous discuterons également des avantages de l’utilisation de React Native pour le
6
front-end et d’une API pour le back-end, ainsi que de perspectives d’amélioration pour
l’avenir.
Nous espérons que cette application apportera une valeur ajoutée aux demandeurs d’emploi,
aux entreprises et aux organismes publics en Mauritanie, en favorisant un meilleur visible et
une plus grande efficacité dans la recherche d’opportunités professionnelles et d’appels
d’offre.
7
1 L’ENTREPRISE SYSONE
SYSONE est une société spécialisée en nouvelles technologies née de la volonté de ses
fondateurs de mettre à profit leurs expertises et leur savoir-faire issus d’une expérience de
plus 15 ans aux services de grandes structures publiques et privées en France et en
Mauritanie.
Grace a son engagement continue, SYSONE a su répondre au mieux aux besoins de ses
clients, ce qui lui assure une vraie crédibilité et une reconnaissance dans le consulting en
système d’information.
SYSONE a développée, depuis sa création, une grande expérience dans les domaines suivants
:
➢ Conception, Développé, depuis sa création, une grande expérience dans les
domaines suivants ;
➢ Web (Sites, Modules, Design, Hébergement) ;
➢ Études et Conseils en Système d’information ;
➢ Développement de solutions mobiles ;
➢ Fourniture et Installation de matériels Informatique ;
8
2 ANALYSE ET SPECIFICATION DES BESOINS
2.1 INTRODUCTION
Comme dans tous projet, l’analyse des besoins occupe une place très importante. En effet,
avant de pouvoir entamer tout développement, il est absolument nécessaire de connaitre tous
les besoins, mais également les contraintes, qu’ils soient techniques, ou imposes est aussi
indispensable de connaitre les délais nécessaires pour le travail à effectuer.
2.2 Spécifications des besoins :
Dans cette partie, on explique en détail ce que l’application est censée faire et ceci
spécification des besoins fonctionnels et non fonctionnels.
2.2.1 Besoins fonctionnels
Alertes et notifications : Envoyez des notifications aux utilisateurs lorsqu'une nouvelle offre
d'emploi ou un nouvel appel d'offres ou infos avis correspondant à leurs critères de recherche
est publié.
Partage social : Intégrez des fonctionnalités de partage social qui permettent aux utilisateurs
de partager des offres d'emploi ou des appels d'offres ou infos avis avec leurs contacts sur les
réseaux sociaux.
2.2.2 Besoins non fonctionnels :
Ce sont des exigences qui ne concernent pas spécifiquement le comportement du système
mais plutôt ils identifient des contraintes internes et externes du système. Les principaux
besoins non fonctionnels de mon application se résument dans les points suivants :
❖ Performance
⧫ L’application répond à tous les exigences de l’utilisateur d’une
manière optimale.
❖ Fiabilité
⧫ Bon fonctionnement de l’application sans détection de
défaillance.
❖ Rapidité
⧫ Le déplacement entre les pages sera facile et rapide.
9
2.3 Analyse des besoins
L’objectif de l’analyse est d’accéder à une compréhension des besoins et des exigences du
client. Il s’agit de livrer des spécifications pour permettre de choisir la conception de la
solution.
2.3.1 Étude préalable :
L’étude préalable est une partie primordiale dans la réalisation d’un projet informatique pour
atteindre nos buts et objectifs, il est nécessaire d’avoir une vue claire des différents besoins
escompter. Raison pour laquelle on est appelé à faire une étude des méthodes ou systèmes
qu’utilise pour la gestion des programmes opératoires.
2.4 Méthodologie de développement :
Contenu de la nature de mon projet, j’ai juge que la méthode PU (processus unifie) serait la
plus adapte pour sa réalisation.
2.4.1 Définition de processus unifié :
Le processus unifie est un processus de développement logiciel itératif, centre sur
l’architecture, pilote par des cas d’utilisation et oriente vers la diminution des risques.
2.4.2 Phase du processus unifié :
La méthode UP se base sur quatre phases :
➢ Analyse de besoins : Établir une vision globale du projet ou on spécifie les besoins et
on étude la faisabilité du projet.
➢ Élaboration : On reprend les éléments de l’analyse des besoins et on développe une
architecture de référence, les risques et la plupart des besoins sont identifiés.
➢ Construction : Finaliser l’analyse, la conception, l’implémentation et les tests puis
transformer l’architecture de référence en produit exécutable tous en veillant à
respecter son intégrité.
➢ Transition : Livraison du produit au client afin d’effectuer des essais pour détecter
d’éventuelles anomalies.
2.4.3 Activités du processus unifie :
Chaque phase est constituée d’une succession d’activités. Les activités de la méthode UP
sont :
10
➢ Expression des besoins : Compréhension et expression des besoins et des
exigences du client qu’elles soient fonctionnelles ou non fonctionnelles.
➢ Analyse et Conception : Permet d’acquérir une compréhension approfondie des
contraintes liées aux outils de réalisation en prenant en compte le choix
d’architecture technique retenu pour le développement et l’exploitation système.
➢ Implémentation : On implémente le système sous forme de composants,
bibliothèque et de fichiers. Elle a pour objectif de planifier l’intégration.
➢ Tests : Permettent de vérifier les résultats de l’implémentation de toutes les
exigences et de s’assurer de la bonne intégration de tous les composant dans le
logiciel.
➢ Déploiement : Livraison et exploitation du produit.
2.5 Conclusion
L’analyse et la spécification des besoins fonctionnels et non fonctionnels sont essentielles
pour le développement d'une application mobile efficace pour les offres d'emploi, les appels
d'offres et les informations et avis en Mauritanie.
Les besoins fonctionnels décrivent les fonctionnalités spécifiques que l'application doit offrir,
telles que la recherche d'offres d'emploi et d'appels d'offres, les alertes et les notifications pour
informer les utilisateurs des nouvelles opportunités, ainsi que les fonctionnalités de partage
social pour faciliter le partage des informations avec d'autres utilisateurs.
D'autre part, les besoins non fonctionnels identifient les contraintes et les exigences de
performance, de fiabilité et de rapidité de l'application. Il est crucial que l'application réponde
de manière optimale aux exigences des utilisateurs, fonctionne sans défaillance et offre une
expérience fluide en termes de navigation entre les pages.
3 DEVELOPPEMENT ET REALISATION
3.1 INTRODUCTION :
Après l’étape de conception de l’application, nous allons dans ce chapitre, d’écrire la phase de
réalisation et de développement. Nous allons présenter, en premiers lieu, L’architecture de
l’application et du système ensuite parlerons de l’environnement du travail utilise pour le
développement de l’application.
11
React Native est un Framework open source pour application mobile, soutenu par facebook, et
qui s’appuie sur le très riche écosystème de React js. Utilise par des acteurs majeurs de la
marche de l’application comme Airbnb, SounCloud ou encore Instagram, ce Framework est
largement plébiscité et reconnu pour sa robustesse.
3.2 Définition React Native :
Figure 1: logo React Native
React Native est un Framework logiciel d’interface utilisateur open source crée par Meta
Platforms. Il est utilisé pour développer des applications pour Android, IOS, permettant aux
développeurs d’utiliser le Framework React avec les capacités de la plate-forme native. Il est
utilisé pour développer les applications Android et IOS chez Facebook, Microsoft et Shopify.
Il est également utilisé pour développer des applications de réalité virtuelle chez Oculus.
3.3 L’histoire de React Native
Tous a commencé avec React.js et la volonté d’apporter au mobile les techniques du web
moderne de l’époque. Remontons donc en arrière dans le temps, jusqu’en 2013, dans les
locaux Facebook, société créatrice de la bibliothèque, qui vient de publier sa première version
publique sous licence Apache 2.0
Des lors, React.js devient une référence au sein de la firme pour leurs développements frontend, ainsi que le socle de référence pour leur département R&D. Ceci donne alors naissance a
plusieurs composants dans le site du réseau social, mais aussi à des Framework bâtis audessus de React, comme Relay par exemple.
Bien sûr, le web n’est qu’une partie de l’histoire. Facebook propose également des
applications Android et IOS qui, en 2013 sont construites sur des piles technologiques
propriétaires et disjointes. Mais cela divise les équipes au sein de Facebook car l’entreprise
livre à cette période une nouvelle version du site web deux fois par jour, de sorte qu’ils
peuvent obtenir les résultats d’une expérience presque immédiatement. En revanche sur le
12
mobile, il faut souvent attendre des semaines ou des mois pour obtenir les résultats d’une
expérience ou d’un test A/B, car les nouvelles versions de l’application sont publiées
beaucoup moins souvent.
Néanmoins, le natif reste nécessaire à cette époque pour avoir accès aux composants UI
spécifique à l’OS (comme la cartographie, les sélecteurs de date, les commutateurs ou encore
les piles de navigation). De plus, la gesture est beaucoup plus sophistiquée en natif que sur le
web, et le JavaScript ne permet pas de faire du multi-threading que Facebook utilise pour le
décodage des images par exemple.
Un hackaton s’organise donc en interne dans la compagnie afin de combiner le meilleur du
natif et du web ; c’est-à-dire l’UX des plateformes mobiles natives et l’expérience de
développement du web avec React. Plusieurs solutions en découlent :
— Utiliser des WebViews dans les applications natives : cela permettrait de trier
pleinement profit de l’expérience de développement en React et du cycle d’itération
rapide du web. Cependant, si le rendu est effectué à l’aide des technologies web, l’UX
native est difficilement reproductible et maintenable et les performances sont
dégradées.
— Faire un portage de React en code natif : cette seconde option voit le jour sous le
nom de “ComponentKit”, mais pour IOS uniquement. Avec CompoentKit,
l’application bénéficie de tous les avantages de React, notamment des interfaces
utilisateur déclaratives et prévisibles. Elle profite également de la puissance de
l’environnement natif, avec es composants spécifiques à la plateforme et une gestion
sophistiquée des gestes, ainsi qu’un décodage asynchrone des images, une mesure du
texte et un rendu. En outre, ComponetKit utilise la méthode “Flexbox” pour la mise en
page, ce qui évite de devoir positionner et dimensionner manuellement les vues de
l’application, de sorte que votre code est plus concis et plus facile a maintenir.
— Créer une librairie de Scripting natif : cette solution utiliserait JavaScript pour faire
appel aux API natives et donc avoir accès à toute la puissance de l’environnement
natif, mais aussi à la capacite d’itération rapide et de fonctionnement sur des OS autre
que IOS. Différents Framework font déjà cela a cette époque, mais avec certains
désagréments comme par exemple des blocages du thread des UI par l’exécution de
13
javascript dans le cadre d’allers-retours synchrones entre l’environnement natif et
l’environnement interprète.
Bien que le défi soit élevé et que les obstacles soient importants, les ingénieurs chez
Facebook optent finalement pour cette dernière solution et produisent une nouvelle
libraire, basée sur React.js, appelée React Native, afin de fournir des applications
hybrides. En résulte quelques premières applications, notamment Facebook Groups,
composée de vues construites à la fois avec du code natif et du JavaScript sous React
Native, et Facebook Ads Manager entièrement bâtie avec React Native.
C’est ainsi que, en janvier 2015, une première présentation de la bibliothèque React
Native est présentée en avant-première au public lors de la React.js Con. Deux mois
plus tard, lors de la conférence F8, Facebook annonce la mise à disposition de la librairie
React Native pour IOS en Open Source, avec la promesse d’une prise en charge rapide
d’Android.
Quelques mois plus tard, en septembre 2015, la promesse de compatibilité Android est
tenue et une nouvelle version est publiée, ouvrant la librairie React Native aux deux
systèmes d’exploitation.
Figure 2: logo hackathon
En 2016, soit un an après la présentation de React Native lors de la conférence F8, Facebook
et Microsoft présentent conjointement le support de React Native pour Universal Windows
Platform. En à peine un an, l’adoption de React Native et sa communauté de développeurs se
sont toutes deux développées beaucoup plus rapidement que prévu.
Plus de 650 personnes ont ajoute du code a la base de code React Native. Sur les 5800 commit
de la base de code, 30% ont été effectués par des contributeurs qui ne travaillaient pas chez
Facebook. En février 2016, pour la première fois, plus de 50% des commit provenaient de
14
contributeurs externes. Avec autant de personnes de la communauté contribuant à React
Native, le repository GitHub a vu jusqu’a 266 nouvelles pull requests par mois (jusqu’à 10
pull requests par jour).
Cette popularité a permis au fil du temps, de faire rapidement évoluer la librairie React Native
avec des fonctionnalités telles que le Hot reloading, l’accessibilité, les performances, le
support d’écriture Right-to-left, le SDK Expo, le starter-kit “Create React Native App”, le
support AWS Amplify, le support de Typescript.
En 2019, Facebook annonce Hermes, un moteur JavaScript léger et optimise pour l’exécution
de React Native sur Android. Hermes améliore les performances de React Native en
diminuant l’utilisation de la mémoire, en réduisant la taille des téléchargements et en
réduisant le temps nécessaire à l’application pour devenir utilisable ou temps d’interaction.
En octobre 2021, Facebook annonce que le moteur Hermes va devenir le moteur par défaut
pour React Native, annonce ensuite confirme depuis juillet 2022 et les versions de prerealese 0.70.0 de React Native. Ce changement s’opère afin d’améliorer les performances des
applications mobiles Android et IOS en déplaçant les opérations de parsing et de compilation,
du runtime vers le buildtime.
Figure 3:logo Android
15
Figure 4: logo IOS
En plus d’Hermes, 2022 est aussi l’année du changement pour l’architecture React Native. La
mise à jour signe la fin des Native Modules et Native Components, au profit de leurs
équivalents : “TurboModule” et “Fabric Components”. Cette nouvelle architecture React
Native, liée à Hermes, a pour but de rendre encore plus natives les applications mobiles React
Native et d’optimiser les performances de calcul et de rendu, donnant ainsi de nouvelles
perspectives, notamment au niveau des animations de composants ou de la gestion des gestes.
Toutes ces nouveautés relancent ainsi les éternels débats entre les technologies “natif vs crossplatform”, “react native vs flutter vs .Net MAUI”,”application hybride vs PWA” …Nous
avons d’alleurs nous aussi pris la parole sur ce sujet pour contribuer au débat a travers un
webinar : Application native ou cross-platform : comment faire son choix ?
3.4 Le cross-platform
Aujourd’hui, quel que soit le domaine d’expertise promu ou le marché vise, une solution
mobile est devenue indispensable. Il existe différentes technologies permettant de répondre
aux attentes des utilisateurs et d’atteindre les objectifs marketing. Les technologies crossplatform gagnent de plus en plus de terrain pour le développement des applications mobiles,
et prennent ainsi une place de plus en plus importante face aux technologies de
développement d’application natives.
Ces technologies cross-platform offrent l’avantage d’une meilleure productivité : la durée et
les couts de développement et de maintenance sont considérablement réduits, puisqu’au lieu
d’avoir différentes copies du même logiciel pour différents systèmes d’exploitation, le
16
développement d’application cross-platform crée un programme unique qui fonctionne sur
plusieurs plateform. En utilisant une base de code unique, transparente et compatible avec
tous les systèmes d’exploitation, les développeurs peuvent commencer à créer des
applications mobiles.
Le développement multiplateforme présente de nombreux avantages, mais nécessite
néanmoins de prendre quelques précautions et d’anticiper certains facteurs. Je vous propose
de découvrir tous cela dans un autre article que j’ai pu rédiger, dédié au cross-patform, et de
nous concentrer ici sur React Native, technologie cross-platform par excellence.
3.5 Comment fonctionne React Native ?
Les fondamentaux de React Native
La librairie React, bien connue pour créer des interfaces utilisateurs via JavaScript, sert de
base a React Native. Ce dernier utilise donc les mêmes concepts que son aine : des
composants, le langage JSX, des propos, un state, la possibilité d’utiliser des hooks, ...
Une application React Native va donc être rendue en utilisant des vues natives, mais le code
JavaScript n’est pas compilé dans le langage natif de la plateforme.
Les interfaces utilisateur en React Native, utilisent des composants et suivent le principe
unidirectionnel propre à React. L’application dispose donc d’un arbre de composants. La
communication entre ces composants se fait par le biais de propriétés (appelées props) et de
callbacks (fonction a appelé suite à un déclencheur). Ce callback est transmis à un composant
enfant si un composant plusieurs) propriété est transmise au composant enfant s’il a besoin de
quelque chose de son parent.
React Native exploite une base de code JavaScript et celle-ci doit finir par être comprise par
du code propriétaire comme Objective-C ou Swift pour IOS, et Java ou Kotlin pour Android.
Nous parlons donc d’un langage du Web, interprétable, qui va devoir discuter avec un langage
natif complié.
Lorsque vous utilisez React Native, vous allez pouvoir exécuter votre code dans deux
environnements :
✓ Dans la plupart des cas, React Native utilisera JavaScriptCore, le moteur JavaScript
qui alimente Safari. JavaScriptCore est un framework qui permet d’exécuter du code
JavaScript sur des appareils mobiles, par exemple. Sur les appareils IOS, ce
17
framework est directement fourni par le système d’exploitation. Les appareils Android
ne disposent pas de ce dernier, React Native l’intègre donc à l’application elle-même.
✓ Lorsque vous utilisez le débogage Chrome, tout le code JavaScript s’exécute dans
Chrome lui-même, communiquant avec le code natif via des WebSockets. Chrome
utilise le moteur JavaScript V8.
Pour rester compatible, React Native s’appuie par défaut sur le compilateur JavaScript
Babel. Ce dernier va permettre la prise en charge de transformation du langage,
notamment pour profiter au mieux des dernières avancées liées aux versions ECMAScript,
en apportant des polyfills.
3.6 L’architecture React Native
3.6.1
Avant la nouvelle architecture React 18
Une application React Native est divisée en trois parties différentes : le code natif, le code
JavaScript et le bridge. Ce dernier interprète le code JS pour l’exécuter sur des
plateformes natives et permet une communication asynchrone entre les éléments natifs et
le code JavaScript.
Plusieurs couches vont donc être impliquées :
✓ Le thread natif : le thread principal, également appelé thread natif, est utilisé pour
le rendu de l’interface utilisateur dans les applications IOS et Android. Il gère la
tâche d’affichage des éléments de l’interface utilisateur et traite les gestes des
utilisateurs.
✓ Le thread d’exécution JavaScript : le thread JS s’occupe essentiellement de la
logique métier de l’application et définit la structure ainsi que les fonctions de
l’interface utilisateur. Les fonctions du thread JavaScript comprennent l’exécution
du code JS dans un moteur distinct, les appels API, le traitement des évènements
tactiles ...
✓ Le thread Shadow Tree : ce thread génère des nœuds fantômes et agit comme un
moteur mathématique qui utilise des algorithmes pour transformer les mises à jour
de layout en données précises et les évènements de l’interface utilisateur en charge
utile correctement sérialisée.
✓ Le thread de modules natifs : lorsqu’une application doit accéder à l’API de la
plateforme, le processus se déroule dans le thread du module natif.
18
✓ Les threads des modules natifs personnalisent : ces threads sont utilisés pour
accélérer les performances d’une application lorsque des modules personnalises
sont utilisés. Par exemple, React Native gère les animations à l’aide d’un thread
natif d’un thread natif distinct afin que cette tache soit déchargée du thread JS.
Figure 5: logo thread
Au lancement d’une application, le thread natif charge l’application et spawn le thread
JavaScript, qui exécuté le code JS. Les évènements lies au toucher, a l’appui et a l’interface
utilisateur sont détectés par le thread natif, qui les transmet ensuite au thread JS via le bridge
React Native.
Une fois le JavaScript charge, le thread correspondant informe le shadow thread des
informations qui doivent être rendues à l’écran. Le shadow thread détermine ensuite comment
calculer les positions de la vue et utilise des méthodes pour calculer les mises en page. Après
le rendu de la vue, le thread principal recoit les paramètres de mise en page du shadow thread.
Ensuite, les évènements de l’interface utilisateur sont collectes par le thread principal et
envoyés au shadow thread. Les évènements sont sérialisés en charges utiles et transmis au
thread JS.
Enfin, le thread JavaScript examine les charges utiles et invoque les fonctions natives ou
modifie l’interface utilisateur.
Ces étapes se répètent continuellement à chaque itération de la boucle d’évènements de
JavaScript.
19
Une fois que chaque boucle d’évènement du thread JS est terminée, le cote natif recoit les
mises à jour par lots des vues natives ; celles-ci sont ensuite exécutées dans le thread natif. Il
est à noter que les mises à jour par lots doivent être envoyées par le thread JS au thread natif
avant la date limite de rendu de l’image suivante, afin de maintenir les performances de
l’application. Un thread JS lent en raison d’un traitement complique dans la boucle
d’évènements JS nuit à l’interface utilisateur. La seule exception ou un thread JS lent n’affecte
pas les performances est dans les scenarios ou les natives se déroulent entièrement dans le
thread natif.
Pour éviter qu’un thread ne bloque l’autre, le bridge React Native permet une
communication asynchrone entre les threads. Des plus, les messages sont mis en lots, ou
passes entre les threads de manière efficace. En outre, le bridge sérialise les communications
pour empêcher le partage des données ou l’exploitation des mêmes données par deux threads.
Depuis la nouvelle architecture React 18 et Hermes
Hermes
Comme explique précédemment, React Native peut s’exécuter dans deux environnements :
❖ JavaScriptCore dans votre appareil mobile
❖ Le moteur Chrome V8
Bien que les deux environnements soient très similaires, cela peut provoquer certaines
incohérences. De plus, les applications de plus grande taille utilisant des Framework
JavaScript connaissent souvent des problèmes de performance à mesure que les développeurs
ajoutent des fonctionnalités et de la complexité. Cela fait donc un certain temps que facebook
travaille sur le fait de moins faire appel au “runtime” JavaScript pour améliorer les
performances des apps, même sur les appareils grand public dont la mémoire est limitée, le
stockage lent et la puissance de calcul réduite.
Une des clés principales qu’amené Hermes est donc la pré-compilation du bvtecode. En
général, après avoir été chargé, un moteur JavaScript analyse la source et produit du pytecode.
Le début de l’exécution de JavaScript est retardé par cette étape. Hermes utilise un
compilateur avance, qui s’exécuté dans le cadre du développement d’applications mobiles,
pour omettre cette phase. Par conséquent plus de temps peut être consacre a l’optimisation du
bytecode, le rendant plus compact et plus efficace. Il est possible d’effectuer des optimisations
20
sur l’ensemble du programme, comme la déduplication des fonctions et l’empaquetage des
tables de chaines.
Le bytecode est conçu pour être mappe en mémoire au moment de l’exécution et interprète
sans qu’il soit nécessaire de lire avidement le fichier entier. Sur de nombreux appareils
mobiles moyen et bas de gamme, les E/S de la mémoire flash introduisent une latence
importante. Le chargement du bytecode à partir de la mémoire flash uniquement lorsque
cela est nécessaire et l’optimisation de la taille du bytecode se traduisent par des
améliorations notables du TTI (Time To Interact). De plus, les systèmes d’exploitation
mobiles qui n’effectuent pas de swap, comme Android, peuvent toujours évincer ces pages en
cas de contrainte mémoire, car la mémoire est mappée en lecture seule et soutenue par un
fichier. Sur les appareils dotes d’une mémoire limitée, cela réduit le nombre de processus tues
par l’épuisement de la mémoire.
Figure 6: logo Bytecode
Une autre clé majeure des performances du moteur Hermes réside dans la mise en place de
son “garbage collector”. L’utilisation efficace de la mémoire est particulièrement cruciale
pour les appareils mobiles. Les systèmes d’exploitation ne prennent généralement pas en
charge le swapping. Les applications gourmandes en mémoire sont interrompues de force par
les systèmes d’exploitation sur les appareils bas de gamme, et la mémoire est une ressource
rare. Les fonctionnalités d’arrière-plan en pâtissent et de longs redémarrages sont nécessaires
lorsque les applications sont interrompues.
Hermes inclut donc un garbage collector pour réduire la quantité de mémoire et d’espace
en adressage virtuel que le moteur utilise.
Nouvelle architecture
21
Figure 7: logo CODEGEN
Jusqu’à présent, React Native utilisait le Bridge dans la conception pour assurer la
communication entre les threads JavaScript et natif. Les données devaient être sérialisées en
JSON avant d’être envoyées à travers le bridge à tout moment. Les données devaient
également être décryptées lorsqu’elles étaient reçues du cote oppose. Cela implique qu’il n’y
a pas de communication entre les mondes JavaScript et Natifs.
Toutefois, dans la nouvelle architecture, le bridge est remplacé par un module appelé
JavaScript Interface (JSI), qui est une couche légère et polyvalente, écrite en C++, pouvant
être utilisée par le moteur JavaScript pour invoquer directement des méthodes dans le
domaine natif.
JSI est donc découplée du moteur, ce qui signifie que la nouvelle architecture permet
l’utilisation d’autres moteurs JavaScript comme Chakra, v8, Hermes...
Une autre évolution principale de l’architecture est le système de rendue “Fabric”, qui
remplace le Manager UI.
Auparavant, React exécutait le code et créait un “ReactElementTree” en JavaScript.
Sur la base de cet arbre, le rendre créait un “ReactShadowTree” en C++. Cet arbre était utilisé
par le moteur de mise en page pour calculer les positions des éléments de l’interface
utilisateur pour l’écran hôte. Une fois que les résultats du calcul de la mise en page étaient
disponibles, le shadow tree était transformé en “HostViewTree” qui comprenait des éléments
natifs.
22
Selon la documentation Facebook : <<Fabric est le nouveau système de rendu de React
Native, une évolution conceptuelle du système de rendu hérité >>
Comme JSI expose directement les méthodes natives à JavaScript, u compris les méthodes de
l’interface utilisateur, les threads JS et UI peuvent ainsi être synchronises. Les performances
pour les listes, la navigation, la gestion des gestes, etc. S’en trouvent améliorées.
Parmi les changements effectifs, React Native propose maintenant aussi les “Turbo
Modules”.
Dans l’architecture précédente, tous les modules natifs utilisent par JavaScript (ex : Bluetooth,
Géolocalisation, Stockage de fichiers.) doivent être initialises avant l’ouverture de
l’application. Cela signifie que même si l’utilisateur n’a pas besoin d’un module particulier,
celui-ci doit été initialise au démarrage.
Les “Turbo Modules” sont donc une amélioration permettant à JavaScript de charger chaque
module uniquement quand il est nécessaire, en mode “lazy loading”.
Enfin, toutes ces nouveautés dans l’architecture React Native sont appuyées par CodeGen, un
vérificateur et générateur de typage permettant à JavaScript, qui a un typage dynamique,
d’échanger avec JSI, écrit en C++ et qui par conséquent repose sur un typage statique.
Figure 8: logo shadow thread
3.6.2 Argumentation du choix de React Native
1. Développement multiplateforme : React Native permet de créer des applications pour
IOS et Android à partir d’un seul code source. Cela permet de réduire les couts et les
23
efforts de développement, car une grande partie de la logique métier peut être partagée
entre les deux plateformes
2. Productivité accrue : Grace a la réutilisation de composants et a l’utilisation du
langage JavaScript, React Native offre une productivité élevée. Les développeurs
peuvent développer rapidement des fonctionnalités, effectuer des tests plus facilement
et itérer plus rapidement.
3. Performance native : Contrairement aux Framework hybrides, React Native utilise des
composants natifs, ce qui offre des performances similaires à celles des applications
développées en langages natifs tels que Java (pour Android) et Objective-C ou Swift
(pour IOS). Les applications React Native peuvent donc offrir une expérience
utilisateur fluide et réactive.
4. Grande communauté et écosystème : React Native bénéficie d’une communauté de
développeurs très active et d’un écosystème riche en bibliothèques, en outils en
ressources. Cela facilite la résolution des problèmes, l’apprentissage et la mise en
œuvre de fonctionnalités avancées.
5. Mises à jour en temps réel : Avec le Hot Reloading et le Live Reloading de React
Native, les développeurs peuvent voir les changements apportés au code en temps réel,
sans avoir à recompiler ou redémarrer l’application. Cela permet un processus de
développement plus rapide et plus efficace.
6. Facilite d’apprentissage : Si vous avez déjà des compétences en JavaScript et en
React, la courbe d’apprentissage de React Native est relativement douce. Il est plus
facile pour les développeurs web de se familiariser avec le développement
d’applications mobiles grâce à React Native.
7. Maintenance simplifiée : En utilisant un codebase commun pour les deux plateformes,
la maintenance de l’application est plus simple et moins sujette aux erreurs. Les
correctifs de bugs, les mises à jour et les nouvelles fonctionnalités peuvent être
implémentes plus rapidement et avec moins d’efforts.
24
3.7 Expo Go
Découvrez Expo Go, le client open source gratuit pour
Développer et tester des applications React Native sur
Android et IOS.
Expo Go est un client gratuit open source pour tester les
Figure 9: logo Expo
applications React Native sur Android et IOS sans avoir
besoin de créer quoi que ce soit localement.
C’est le moyen le plus rapide d’être opérationnel et d’utiliser l’application client Expo Go sur
votre appareil Android ou IOS. Il vous permet d’ouvrir des applications servies via Expo CLI
et d’exécuter vos projets plus rapidement lors de leur développement.
Installez Expo Go sur votre appareil
Il est disponible sur Android Play Store et IOS App Store.
❖ Android Play Store – Android Lollipop (5) et supérieur
❖ IOS App Store – IOS 13 et supérieur
Comment ça fonctionne
Expo Go est une application native installée sur votre appareil. Lorsque vous exécutez npx
expo start votre projet, Expo CLI démarré un serveur de développement et généré un code
QR, Vous pouvez ensuite ouvrir l’application Expo Go sur votre appareil et scanner le code
QR pour vous connecter au serveur de développement.
Figure 10: logo Développement
25
Le serveur de développement renvoie un fichier manifeste JSON qui décrit le projet. Expo Go
utilise ce manifeste pour télécharger le bundle JavaScript et tous l’actif nécessaire à
l’exécution du projet. Ensuite, le moteur JavaScript exécute ce bundle JavaScript pour
rendre l’application React Native.
Manifeste
Le manifeste est similaire à un index.html sur le web. Il est servi à partir de L’URL racine / et
permet de télécharger le code du script du projet à partir de bundleUrl. Le manifeste peut être
personnalise à l’aide de la configuration de l’application (app.json, app.config.js). Des
champs supplémentaires comme Icon et splash peuvent être utilises pour personnaliser la
façon dont Expo Go ou expo-dev-client présente l’application.
Figure 11: logo Nom de projet
Version du SDK
Expo Go utilise des versions SDK correspondant à une version majeure de expo et de
l’application Expo Go. Vous pouvez voir les versions SDK prises en charge dans l’application
Expo Go en accédant à la page des paramètres.
Nous publions une nouvelle version du SDK environ tous les trimestres. Découvrez quelle
version de React Native correspondent à quelles versions du SDK Expo.
Connectez-vous a Expo Go
Ouvrez l’application Expo Go une fois l’installation terminée. Si vous avez créé un compte
avec Expo CLI, vous pouvez vous connecter en cliquant sur le buton Connexion dans l’entête supérieur de l’onglet Accueil. La connexion vous permettra d’ouvrir plus facilement des
projets dans l’application Expo Go tout en les développant-ils apparaitront automatiquement
dans la section Projets de l’onglet Accueil de l’application.
26
Production
Expo Go n’est pas destiné à une distribution publique. C’est un client de développement qui
n’est pas optimise pour les performances. Nous proposons une suite d’outils pour créer et
soumettre vos applications directement aux magasins d’application. Pour plus d’informations,
voir Répartition.
Vous pouvez créer votre propre application de type Expo Go en utilisant le expo-dev-client
package. Ce package vous permet de créer un client natif avec n’importe quel code ou
configuration natif personnalise ou une bibliothèque tierce qui nécessite la configuration du
code natif. Pour plus d’informations, consultez Builds de développement.
L’étape suivante
Le processus de gestion d’un nouveau projet Expo se compose de trois étapes. Vous
commencez par initialiser un nouveau projet, puis démarrez le serveur de développement avec
Expo CLI et enfin ouvrez l’application sur votre appareil avec Expo Go pour voir vos
modifications en direct.
1. Initialiser un nouveau projet
Pour initialiser un nouveau projet, utilisez create-expo-app pour exécuter la commande
suivante :
27
Figure 12: logo terminale pour créer un projet
2. Démarrer le serveur de développement
Pour démarrer le serveur de développement, exécutez la commande suivante :
Figure 13: logo terminal pour run l’application
Lorsque vous exécutez la commande ci-dessous, l’Expo CLI démarré Metro Bundler. Ce
bundler est un serveur HTTP qui compile le code JavaScript de votre application a l’aide de
Babel et le sert à l’application Expo. Voyez comment Expo Développement Server fonctionne
pour plus d’information sur ce processus.
3. Ouvrez l’application sur votre appareil
Pour ouvrir l’application sur votre appareil sur lequel Expo Go est déjà installé :
➢ Sur votre appareil Android, appuyez sur Scanner le code QR dans l’onglet Accueil de
l’application Expo Go et scannez le code QR que vous voyez dans le terminal
28
➢ Sur votre iPhone ou iPad, ouvrez l’application Apple Camera par défaut et scannez le
code QR que vous voyez dans le terminal.
Vous pouvez ouvrir le projet sur plusieurs appareils simultanément. Allez-y et essayez-le sur
les deux téléphones en même temps si vous les avez a portée de main.
L’application ne se charge pas sur votre appareil ?
Tout d’abord, assurez-vous que vous êtes sur le même réseau Wi-Fi sur votre
ordinateur et votre appareil.
Si cela ne fonctionne toujours pas, cela peut être du a la configuration du routeur –
c’est courant pour les réseaux publics. Vous pouvez contourner ce problème en
choisissant le type de connexion Tunnel lors du démarrage du serveur de
développement, puis en scannant à nouveau le code QR.
Figure 14: logo terminal pour commande turnel
Utiliser un émulateur ou un simulateur ?
Si vous utilisez un émulateur/simulateur, les raccourcis clavier Expo CLI suivants
peuvent être utiles pour ouvrir l’application sur l’une des plates-formes suivantes :
29
APPELS API REST
Les applications sur le Web et les appareils mobiles ne peuvent souvent pas stocker toutes les
informations dont elles ont besoin. Par conséquent, ils doivent accéder au Web pour mettre à
jour des données, récupérer des données ou demander un service a un tiers. La transaction qui
a lieu entre deux appareils (client et serveur) s’appelle un appel API. Une API (interface de
programmation d’application) utilisera généralement le paradigme de conception REST pour
gérer toutes les façons d’y accéder (appelées).
Étant donné que cela est devenu une tache très courante pour les applications, quelques
moyens utiles ont émerge pour y parvenir. Dans cet article, nous allons parler de la fetch
fonction et de la axios bibliothèque. Ces deux méthodes réalisent la même tâche, en effectuant
un appel HTTP, mais elles s’y prennent de manière légèrement différente.
3.7.1 Fetch
Le fetch API est une fonction JavaScript intégrée. Vous pouvez utiliser fetch en fournissant
l’URL de l’emplacement de votre contenu. Cela enverra une requête GET a cette URL.
fetch('https://example.com/data'
En fonction de ce qui se trouve à cette adresse, un objet de réponse sera renvoyé avec les
données. Les données ne sont pas renvoyées instantanément. Par conséquent, le fetch API
renvoie un Promise. L’objet Promise renverra un objet de réponse lorsque la requête réseau
sera effectué. Nous pouvons enchainer des fonctions qui s’exécuteront lorsque la Promise
retournera un objet de réponse.
30
Nous pouvons lire le code ci-dessus comme ;
1. Récupérer les données à l’URL 'https://example.com/data'
2. Ensuite, transformez la réponse en JSON
3. Ensuite, renvoyez la name propriété sur l’objet JSON
4. S’il y a une erreur, consignez l’erreur dans la console.
3.7.2 Axios
La bibliothèque Axios a gagné en popularité parallèlement à l’augmentation des applications
qui échangent des informations à l’aide de JSON. Trois choses qui rendent la bibliothèque
Axios si utile sont la possibilité de ;
➢ Intercepter les demandes et les réponses
➢ Transformer les données de requête et de réponse
➢ Transformer automatiquement les données pour JSON
Ensuite, examinons une requête GET plus petite.
Figure 15:logo fetch
Nous appelons la même URL que nous l’avons fait avec le fetch API, mais nous n’avons pas
à transformer manuellement l’objet de réponse en JSON. Axios a plus de fonctionnalités qui
31
peuvent être utiles avec des applications plus grandes, mais nous allons nous concentrer sur
les bases dans notre application React Native.
3.8 Comment faire des appels d’API REST dans React
Native App
Figure 16: logo code en react native
3.9 En conclusion
Comme évoque précédemment, bien que le moteur Hemmes et la nouvelle architecture
cohabitent déjà au sein des dernières versions de React, Facebook rappelle que ces évolutions
ne sont pas encore entièrement stables. Elles sont toujours en cours de travail et
d’améliorations dans une version de “release candidate”.
De plus, pour que cette nouvelle version soit totalement utilisable, les packages doivent aussi
évoluer et basculer sur cette solution.
32
React Native vit donc actuellement un moment charnière qui annonce un nouveau souffle à la
librairie pour lui promettre encore de beaux jours. Les développeurs ses peuvent déjà
s’amuser à tester le moteur et l’architecture pour y participer.
Néanmoins, cette version n’est pas encore conseillée pour une mise en production.
4 Node JS
Node.js est un environnement d’exécution JavaScript open
source et multiplateforme. C’est un outil populaire pour
presque tous les types de projets !
Node.js exécute le moteur JavaScript V8, le cœur de
Google Chrome, en dehors du navigateur. Cela permet à
Node.js d’être très performant.
Figure 17: logo Node js
Une application Node.js s’exécutée en un seul processus, sans créer de nouveau thread pour
chaque requête. Node.js fournit un ensemble de primitives d’E/S asynchrones dans sa
bibliothèque standard qui empêchent le blocage du code JavaScript et, en général, les
bibliothèques de Node.js sont écrites à l’aide de paradigmes non bloquants, faisant du
comportement de blocage l’exception plutôt que la norme.
Lorsque Node.js effectue une opération d’E/S, comme la lecture à partir du réseau, l’accès à
une base de données ou au système de fichiers, au lieu de bloquer le thread et de perdre des
cycles CPU en attente, Node.js reprendra les opérations lorsque la réponse reviendra.
Cela permet à Node.js de gérer des milliers de connexions simultanées avec un seul serveur
sans introduire le fardeau de la gestion de la simultanéité des threads, qui pourrait être une
source importante de bogues.
Node.js a un avantage unique car des millions de développeurs frontaux qui écrivent du
JavaScript pour le navigateur sont désormais capables d’écrire le code cote serveur en plus du
code cote client sans avoir besoin d’apprendre un langage complètement diffèrent.
4.1 Package.json
Le fichier package.json est un fichier essentiel utilise dans les projets Node.js et JavaScript. Il
contient des informations sur le projet, ses dépendances, ses scripts et d’autres métadonnées.
33
Point clés :
1. Dépendances et versions : Le fichier package.json permet de spécifier les
dépendances nécessaires au projet, y compris les bibliothèques, les Framework et les
modules. Il indique également les versions spécifiques des dépendances à utiliser,
garantissant ainsi la cohérence entre les environnements de développement.
2. Scripts personnalises : Vous pouvez définir des scripts personnalises dans le fichier
package.json, tels que des scripts de construction, de test ou de démarrage. Ces scripts
automatisent des taches courantes et facilitent le flux de travail de développement.
3. Informations du projet : Le fichier package.json contient des informations sur le
projet telles que le nom, la description, la version, les auteurs, les licences, etc. Ces
informations aident à identifier et à documenter le projet de manière claire et concise.
4. Gestion des dépendances : Grace au fichier package.json, il est facile d’installer toutes
les dépendances requises en exécutant une seule commande. Il permet également de
mettre à jour les dépendances en spécifiant les versions souhaitées et en exécutant une
autre commande.
5. Intégration d’outils et de services tiers : De nombreux outils et services du monde du
développement s’intègrent au fichier package.json . Par exemple, des outils de
construction comme webpack ou Babel utilisent les informations du fichier
package.json pour configurer le projet. Les services d’intégration continue peuvent
également exploiter les scripts définis dans le fichier package.json pour exécuter des
tests automatiquement.
Le fichier package.json est donc un élément central dans les projets Node.js et JavaScript,
fournissant des informations essentielles sur le projet, ses dépendances et sa configuration.
Il facilite la gestion des dépendances l’automatisation des taches et l’intégration avec
d’autres outils et services.
4.2 @expo/vector-icons
Cette bibliothèque est installée par défaut sur le modelé de projet a l’aide de npx create-expoapp et fait partie du expo package. Il est construit sur react-native-vector-icons et utilise une
API similaire. Il comprend des ensembles d’icônes populaires que vous pouvez parcourir sur
icons.expo.fyi.
34
4.3 React-navigation/native
React Navigation est un choix solide pour gérer la navigation dans les applications React
Native. Il offre une solution complète et facile à utiliser, avec des fonctionnalités de
personnalisation étendues et une intégration transparente avec React Native. Que vous
construisiez une application simple ou complexe, React Navigation peut vous aider à créer
une expérience de navigation fluide et intuitive pour vos utilisateurs.
Expo-notification
expo-notifications fournit une API pour récupérer les jetons de notification push et pour
présenter, planifier, recevoir et répondre aux notifications.
4.4 React-native-render-html
React Native Render HTML est un outil pratique pour afficher du contenu HTML dans des
applications mobiles React Native. Il offre des fonctionnalités puissantes, une
personnalisation avancée et une bonne performance. Que vous ayez besoin d'afficher des
articles de blog, des descriptions de produits ou tout autre contenu HTML dynamique, React
Native Render HTML peut être une solution efficace pour répondre à vos besoins.
4.5 React-native-tailwindcss
React Native TailwindCSS est une bibliothèque qui combine le Framework de styles CSS
populaire, Tailwind CSS, avec React Native. Elle offre une approche basée sur les classes
CSS pour styliser les composants React Native, facilitant ainsi la création d'interfaces
utilisateur cohérentes et réactives.
35
5 PRESENTATION DU SYSTEME
Au cours de ce chapitre j’essaierai de faire une présentation générale de l’application. Cette
Présentation s’articulera sur les principaux types d’interfaces utilisateurs proposés par mon
système. Rappelons qu’une interface utilisateur est une partie spécifique de l’application
destinée à un utilisateur. Cette partie lui permettra d’interagir avec le système et de profiter
aux différentes fonctionnalités qui lui sont offertes.
5.1 Les principales interfaces graphiques
5.2 Interface pour l’offre d’emploi
Dans cette page on utilise une api pour
afficher l’offre d’emploi.
Cette API semble donc fournir un
ensemble complet d’information sur les
offres d’emploi, y compris les
détails de chaque offre ainsi que les
informations sur la société proposant
l’emploi. Ces données peuvent être utilisées
pour afficher des offres d’emploi dans un
application, permettant aux utilisateurs de
consulter les détails de chaque offre, de
rechercher des offres spécifiques en
fonction de critères tels que la ville, le
domaine ou le niveau d’études, et de
postuler aux offres qui les intéressent.
Figure 18: page d’offre d’emploi
36
5.3 Interface pour l’appels d’offre
Dans cette page on utilise une api pour
afficher l’appels d’offre.
Cette api fournie par “rimtic.com” permet
d’accéder aux données des appels
d’offres. Chaque appel d’offre est
représenté par un objet contenant des
informations telles que l’identifiant, la
date de début et de fin, le libelle, la ville,
le nombre des consultations, et s’il est mis
en avant. Chaque appel d’offre est
également associé à des informations sur
la société émettrice, telles que
l’identifiant, le nom, le numéro
d’identification fiscale, le logo et
l’adresse.
Figure 19: page d’appels d’offre
37
5.4 Interface pour l’infos avis
Dans cette page on utilise une api
pour afficher l’infos avis.
Cette api fournie par “rimtic.com”
permet d’accès au données ou infos
avis.
Vous pouvez obtenir des
informations précises sur les avis
disponibles. Ces informations
peuvent inclure des détails sur les
opportunités, les évènements ou les
annonces importantes lies à
différentes sociétés.
Figure 20: page d’infos et avis
5.5 Conclusion
En conclusion, notre application propose trois pages distinctes, chacune offrant des
informations spécifiques.
La première page est dédiée aux offres d'emploi. Chaque offre d'emploi est présentée avec une
introduction, une date de début et de fin, un libellé, un slug, un contenu, un logo, une ville, un
domaine, une expérience requise, un niveau d'études et des détails sur la société. Les offres
d'emploi sont essentielles pour les chercheurs d'emploi qui souhaitent postuler à des
opportunités professionnelles.
La deuxième page concerne les appels d'offres. Chaque appel d'offres est accompagné d'une
date de début et de fin, d'un libellé, d'un slug, d'une ville, de détails sur la société et de son
logo. Cette page est particulièrement utile pour les entreprises ou les prestataires de services
intéressés par des contrats ou des projets.
38
Enfin, la troisième page présente des informations et des avis supplémentaires. Les avis sont
fournis avec un libellé, un slug, des dates de début et de fin, des détails sur la société et son
logo. Cette section peut être utile pour obtenir des informations sur les sociétés ou pour
consulter les opinions des autres utilisateurs.
Dans l'ensemble, notre application offre une plateforme complète pour les chercheurs
d'emploi, les entreprises et les utilisateurs en quête d'informations sur les opportunités
professionnelles, les appels d'offres et les avis dans différents domaines.
39
Conclusion générale
En conclusion, notre application développée en React Native offre une plateforme complète
pour les utilisateurs à la recherche d'opportunités professionnelles, d'appels d'offres et
d'informations supplémentaires.
La page des offres d'emploi permet aux chercheurs d'emploi d'accéder à une liste d'offres avec
des détails pertinents tels que la date de début et de fin, le libellé, la ville, l'expérience requise
et le niveau d'études. Lorsqu'un utilisateur clique sur une offre spécifique, il est redirigé vers
la page de détails de l'offre, où il peut obtenir des informations plus approfondies sur la
société, l'adresse et d'autres détails pertinents.
De même, la page des appels d'offres offre aux entreprises ou prestataires de services la
possibilité de consulter les appels d'offres en cours. Chaque appel d'offres est accompagné
d'informations telles que la date de début et de fin, le libellé, la ville et des détails sur la
société émettrice de l'appel d'offres. Lorsqu'un utilisateur sélectionne un appel d'offres
spécifique, il est dirigé vers la page de détails de l'appel d'offres pour obtenir des informations
plus spécifiques.
Enfin, la page des informations et avis fournit des informations supplémentaires sur des sujets
spécifiques. Les utilisateurs peuvent consulter les avis et les informations sur différentes
entités ou projets. Chaque élément est accompagné d'un libellé et d'autres détails sur la société
concernée. Lorsqu'un utilisateur clique sur un élément spécifique, il est redirigé vers la page
de détails correspondante.
En résumé, notre application offre une interface conviviale et intuitive permettant aux
utilisateurs d'accéder facilement aux offres d'emploi, aux appels d'offres et aux informations
supplémentaires. Grâce à son développement en React Native, l'application peut être utilisée
sur différentes plateformes, offrant ainsi une expérience utilisateur cohérente.
40
WEBOGRAPHIE
https://docs.expo.dev/get-started/expo-go/
https://reactnative.dev/architecture/overview
https://en.wikipedia.org/wiki/React_Native
https://nodejs.org/en/docs
https://www.appstud.com/fr/blog-react-native-realiser-apps-mobiles-plusrapidement/
41
