Si vous êtes ici, vous demandez peut-être »Comment React Native et Expo peuvent-ils m'aider à créer ma prochaine application mobile plus rapidement ?».
En tant que stagiaires chez Imaginary Cloud, il nous a été proposé de développer une application qui soit d'une manière ou d'une autre utile pour la situation à laquelle le monde est actuellement confronté, à savoir la pandémie de coronavirus. En raison de cette situation, nous devons adopter de nouvelles procédures concernant la gestion des espaces communs de l'entreprise. Étant donné que le nombre de personnes pouvant se trouver dans une même pièce est désormais limité en fonction de sa taille, nous devons réduire la propagation du virus en regroupant les personnes qui partagent le même espace de travail.
Nous avons également l'intention, pour cette application, de sensibiliser le public en affichant des messages d'avertissement et de suivre la disponibilité d'une chambre sans la visiter.
En raison de ces contraintes, notre objectif était de résoudre ce problème en développant une application utilisant React Native et Expo. Nous ne connaissons aucun d'entre eux, et vous ne l'êtes peut-être pas, alors ne vous inquiétez pas, avec un peu de lecture et de pratique, vous comprendrez comment ils fonctionnent et pourquoi ils constituent un bon choix en matière de développement d'applications mobiles. C'est pourquoi nous pensons qu'il est important de partager notre parcours et les leçons que nous avons tirées de notre expérience.
Cet article pourrait vous aider à accélérer votre prochain projet, et nous espérons qu'il pourra vous éclairer sur les prochaines étapes à suivre et sur les avantages qu'il apporte. Dans cet article de blog, nous allons parler de ces deux frameworks, de leurs liens et des raisons pour lesquelles cela pourrait vous faire gagner du temps, même si vous n'êtes pas familier avec le développement mobile. Mais commençons par les bases de ces technologies.
Test React Native un framework open source pour créer des applications natives avec React créé par Facebook et publié en 2015. Il vous permet d'utiliser des contrôles d'interface utilisateur natifs et d'avoir un accès complet à la plateforme native depuis le confort d'une bibliothèque JavaScript. React Native facilite le développement simultané pour Android et iOS car le code peut être partagé sur plusieurs plateformes.
De plus, ce framework combine l'expérience utilisateur des plateformes natives avec les connaissances du développeur en matière de création avec React sur le Web, soutenant ainsi l'approche souhaitée de « Apprenez une fois, écrivez partout ».
Expo c'est un framework et une plateforme pour les applications React universelles. Il fournit un ensemble d'outils et de services qui simplifient le développement et les tests des applications React Native, en offre/donnant la possibilité d'exécuter facilement le code sur votre téléphone. En outre, Expo fournit un flux de travail plus robuste et plus convivial pour les développeurs.
La configuration de l'environnement de développement peut être différente selon l'expérience que vous avez en matière de développement mobile, mais cela ne pose pas de problème.
Si vous débutez dans le développement d'applications mobiles, le moyen le plus simple de démarrer est d'utiliser Expo CLI.
Si vous êtes déjà familiarisé avec le développement d'applications mobiles, vous souhaiterez peut-être utiliser la CLI React Native.
Nous allons aborder la configuration pour les nouveaux développeurs mobiles, car même si vous êtes familiarisé avec le développement mobile, Expo est un framework vraiment agréable à utiliser et facile à apprendre.
Vous aurez besoin de deux outils pour développer des applications avec Expo : un outil de développement local et un client mobile pour ouvrir votre application.
En tant qu'outil de développement local, nous utilisons Exposition CLI. Outre l'interface de ligne de commande (CLI), il possède également une interface utilisateur graphique (GUI) basée sur le Web qui apparaît dans votre navigateur Web lorsque vous démarrez votre projet.
You have need Node.js afin d'installer Expo CLI. Après avoir installé Node.js, vous pouvez désormais installer Expo CLI en exécutant la commande suivante : npm install -g expo-cli
Maintenant, après avoir suivi toutes les étapes que nous avons déjà abordées sur ce blog, il ne vous reste plus qu'à exécuter la commande suivante, avec un projet appelé par exemple « MyProject » : expo init MyProject
Vous demandez sûrement pourquoi vous devriez utiliser React Native. Nous allons parler de certains avantages liés à l'utilisation de ce framework.
Selon Google Trends, comme le montre le graphique ci-dessus, les recherches liées à React Native sont en hausse, ce qui montre l'intérêt et la demande croissants pour cette technologie.
De plus, selon l'enquête Stack Overflow 2019, React Native était le 6e framework le plus populaire parmi les développeurs. De plus, le nombre de questions sur Stack Overflow liées à React Native a augmenté depuis sa sortie.
D'après notre expérience, Expo simplifie vraiment les choses en matière d'exécution et de débogage. Vous pouvez exécuter votre application à des fins de test sans aucun effort ou vérifier certaines erreurs, et même déboguer votre application. C'est certainement l'une des raisons pour lesquelles la popularité de l'Expo a augmenté, comme le montre le graphique ci-dessous.
Une fois la configuration terminée, si vous souhaitez exécuter votre application pour voir comment se déroule votre progression, il vous suffit d'exécuter la commande suivante : démarrage npm. Après cela, une fenêtre apparaît dans votre navigateur Web. Vous pouvez le tester sur des simulateurs, à la fois pour Android et iOS, mais vous pouvez également l'exécuter sur votre propre appareil. Il vous suffit d'installer l'application client Expo et de scanner le code QR que vous voyez dans le terminal ou dans Expo Dev Tools. Notez qu'Expo n'est pas seulement un framework mais aussi une plateforme où vous pouvez trouver de nombreuses documentations utiles, des tutoriels, des exemples issus de la communauté, et même devenir contributeur sur GitHub.
Vous demandez peut-être s'il est possible de poursuivre votre projet sans utiliser Expo dessus. Oui, ça l'est. Si vous rencontrez des difficultés pour développer votre application à l'aide de l'interface de ligne de commande Explo, vous pouvez facilement la quitter et passer à un projet React Native maintenant.
Qu'en est-il du projet React Native bare ? Simplement, votre projet inclura les dossiers/répertoires liés aux systèmes d'exploitation (iOS et Android), vous permettant ainsi de créer vos propres versions natives. Ainsi, par exemple, si vous savez que vous devrez éventuellement inclure votre propre code natif dans le projet, vous pouvez éjecter expo en exécutant la commande npm run eject sur la console.
Lorsque nous pensons au processus de création d'une application mobile, nous pouvons le considérer comme un processus complexe. Pour cette raison, Expo essaie de simplifier et d'accélérer l'ensemble du processus. Dans le documentation officielle, ils expliquent en détail toutes les étapes à suivre et vous donnent même la possibilité de générer automatiquement le keystore et les informations d'identification nécessaires à l'application.
The keystore you permet de stocker des clés cryptographiques dans un conteneur afin de les rendre plus difficiles à extraire de l'appareil. Une fois que les clés sont dans le magasin de clés, elles peuvent être utilisées pour des opérations cryptographiques, le matériel clé restant non exportable. En outre, il offre des fonctionnalités permettant de restreindre quand et comment les clés peuvent être utilisées, telles que la restriction des clés à utiliser uniquement dans certains modes cryptographiques. Vous n'avez donc pas à vous soucier de tous ces détails, car Expo automatise le processus de signature de votre application pour iOS et Android.
Nous avons eu notre premier contact avec ces frameworks dès le début de notre stage chez Imaginary Cloud. C'est là que nous avons commencé à travailler avec React Native et Expo dans le cadre du développement d'une application mobile pour un projet interne.
Au début, il était difficile de comprendre comment travailler avec ces technologies alors que nous n'en étions qu'à nos débuts. C'était un nouveau monde pour nous. Cependant, la documentation disponible, ainsi que l'aide de nos collègues, ont joué un rôle très important dans le développement de ce projet. Il est tout à fait normal qu'il y ait des doutes ou des questions concernant ces cadres à un stade précoce. Au cours du développement, ces doutes sont dissipés pour laisser place à la connaissance et à l'expérience. L'utilisation de certaines bibliothèques React Native ainsi que de certains composants prédéfinis nous a non seulement fait gagner du temps, mais nous avons également facilité le travail.
Bien que React Native nous ait aidés à réutiliser le code pour Android et iOS, nous avons dû prendre en compte certains détails en raison des différences entre les systèmes d'exploitation. Par exemple, la propriété line-height de certaines polices pourrait ne pas être la même pour les deux plateformes, sinon les utilisateurs remarqueraient des styles différents dans les applications iOS et Android.
L'un des problèmes les plus difficiles auxquels nous avons été confrontés était de savoir comment charger des polices dans notre application. Nous avons essayé de nombreux didacticiels, nous avons effectué de nombreuses recherches et nous avons perdu du temps à essayer d'utiliser une police personnalisée, mais le résultat final en valait la peine.
Une autre difficulté provenait de l'utilisation de composants préfabriqués. React Native est sensible aux packages et à leurs versions, et il faut garder à l'esprit que certaines choses fonctionnent dans React Native mais ne sont pas encore prises en charge par Expo, il est donc nécessaire de rechercher d'autres solutions.
Par exemple, nous avons utilisé un sélecteur prédéfini mais sa dernière version n'était pas compatible avec Expo, plus précisément sur Android, nous avons donc dû la rétrograder. Tout n'est pas facile. Il faut parfois trouver un autre moyen d'atteindre ses objectifs. Néanmoins, comme vous l'avez probablement remarqué, React Native et Expo peuvent simplifier beaucoup de choses et vous faire gagner du temps.
Dans l'ensemble, notre parcours de travail sur ce projet a été très positif. Comme il s'agissait de notre première expérience de travail avec React Native et Expo, nous avons ressenti quelques difficultés au début, mais au fur et à mesure que nous avons commencé à en savoir plus sur ces technologies, cela est devenu plus facile et naturel.
Nous avons appris qu'il est possible de lancer facilement une application sur notre propre appareil et de voir les modifications sur le code presque immédiatement, ce qui a fini par justifier le confort que nous avons ressenti lors de l'utilisation de React Native avec Expo. En outre, la variété des API qu'ils proposent nous a aidés à atteindre nos objectifs. Par exemple, Expo-Notifications nous a été utile en fournissant des fonctionnalités essentielles en matière de notifications.
Pour conclure, nos connaissances ont augmenté et ce fut un projet très enrichissant sur la façon de développer une application mobile à l'aide de ces frameworks. Nous avons pris conscience de ses avantages et nous avons pu atteindre nos objectifs initiaux.
À Imaginary Cloud nous travaillons non seulement avec React Native, mais aussi avec une vaste gamme de technologies. Si vous avez besoin d'aide pour créer une application mobile évolutive, nous vous attendons ! Envoyez-nous un message ici!
Vous avez trouvé cet article utile ? Ceux-là vous plairont peut-être aussi !
Développeur Web. Passionné par les séries et la musique. Passionné de football. Un rêveur qui espère un jour marquer le monde avec quelque chose qu'il a développé.
People who read this post, also found these interesting:
.webp)
.webp)
%20(2).webp)
