Détachement des applications Expo sur ExpoKit: concepts

Dans cet article, vous apprendrez ce qu’est ExpoKit et comment il est utilisé pour ajouter des fonctionnalités natives aux applications Expo. Vous découvrirez également certains de ses avantages et inconvénients.

Dans mon article sur le développement natif de React plus facile avec Expo, vous avez appris comment Expo permet aux débutants de créer plus facilement des applications avec React Native. Vous avez également appris qu’Expo permet aux développeurs de se familiariser plus rapidement avec le développement d’applications React Native, car il n’est plus nécessaire de configurer Android Studio, Xcode ou d’autres outils de développement.

Mais comme vous l’avez également vu, Expo ne prend pas en charge toutes les fonctionnalités natives dont une application pourrait avoir besoin. Bien que l’équipe de l’Expo soit toujours travailler pour prendre en charge plus de fonctionnalités natives, c’est une bonne idée d’apprendre à convertir un projet Expo existant en projet natif standard afin de pouvoir facilement effectuer la transition si le besoin s’en fait sentir. Donc, dans cette série en deux parties, nous allons voir comment faire cela.

Dans cet article, vous apprendrez ce qu’est ExpoKit et quand vous en aurez besoin, ainsi que les fonctionnalités de la plate-forme Expo qui sont conservées et perdues une fois que vous vous êtes détaché de ExpoKit.

Conditions préalables

Ce didacticiel suppose que vous avez déjà configuré votre ordinateur pour le développement Expo et React Native. Cela signifie que vous aurez besoin d’Android Studio ou de Xcode ou des deux, selon l’endroit où vous souhaitez déployer. Assurez-vous de consulter le Guide de démarrage de l’Expo, ainsi que le guide “Mise en route” dans le Réagissez aux documents natifs sous l’onglet “Créer des projets avec du code natif” pour votre plate-forme spécifique si vous ne l’avez pas déjà fait.

La connaissance de Node.js est utile mais pas obligatoire.

Qu’est-ce que ExpoKit?

ExpoKit est une bibliothèque Objective-C et Java qui vous permet d’utiliser la plateforme Expo dans un projet React Native standard. Quand je dis “projet React Native standard”, je veux dire celui qui a été créé à l’aide de react-native init commander.

L’inconvénient de se détacher vers ExpoKit est que vous devrez configurer l’environnement de développement natif standard pour React Native!

Un autre inconvénient est que vous êtes limité à la version React et React Native utilisée par ExpoKit au moment où vous détachez votre application. Cela signifie qu’il peut y avoir des problèmes de compatibilité que vous devrez résoudre si le module natif que vous essayez d’installer dépend d’une version antérieure de React ou React Native.

Si vous pensez que votre application va nécessiter un grand nombre de modules natifs que les API React Native et Expo intégrées ne prennent pas déjà en charge, je vous suggère d’éviter d’utiliser les API Expo. De cette façon, vous pouvez facilement “éjecter” dans un projet React Native standard au moment où vous devez commencer à utiliser des modules natifs personnalisés.

Quand se détacher à ExpoKit?

Vous souhaiterez peut-être détacher votre projet Expo existant pour l’une des raisons suivantes:

  • L’API exposée par les fonctionnalités natives prises en charge par Expo ne couvre pas votre cas d’utilisation.
  • Vous devez utiliser une fonctionnalité native qui n’est actuellement pas prise en charge par la plate-forme Expo. Les exemples incluent Bluetooth et les tâches en arrière-plan.
  • Vous souhaitez utiliser des services spécifiques. Actuellement, Expo utilise Firebase pour les données en temps réel et Sentry pour les rapports d’erreurs. Si vous souhaitez utiliser un service alternatif, votre seule option est d’écrire votre propre code pour communiquer à l’API HTTP sur les services que vous souhaitez utiliser ou pour installer un module natif existant qui fait le travail.
  • Vous disposez d’une configuration d’intégration continue existante qui ne fonctionne pas bien avec Expo, par exemple, si vous utilisez Fastlane ou Bitrise pour une intégration continue. Expo ne s’intègre pas vraiment à ces services, vous devrez donc écrire votre propre code d’intégration si vous souhaitez les utiliser tout en restant sur la plate-forme Expo.
En relation :  Comment réparer l'erreur «SIM non provisionné MM 2»

Fonctionnalités conservées lors du détachement vers ExpoKit

En vous détachant vers ExpoKit, vous perdrez certaines des fonctionnalités offertes par la plateforme Expo. Cependant, les caractéristiques essentielles suivantes sont toujours conservées:

  • API de l’Expo. Vous pourrez toujours utiliser les API Expo telles que API des autorisations.
  • Recharger en direct. Les applications Expo détachées peuvent toujours utiliser le rechargement en direct pendant que vous développez l’application. La seule différence est que vous ne pourrez plus utiliser l’application cliente Expo. Si vous développez pour Android, vous pouvez toujours utiliser votre appareil Android ou un émulateur tel que Genymotion pour tester l’application. Si vous développez pour iOS, l’application peut être exécutée sur les simulateurs que vous avez installés dans Xcode. Vous pouvez également l’exécuter sur votre iPhone ou iPad, mais vous devez suivre certains étapes supplémentaires que je ne couvrirai pas dans ce tutoriel.

Fonctionnalités que vous perdez lors du détachement vers ExpoKit

En vous détachant sur ExpoKit, vous perdrez les fonctionnalités suivantes:

  • Partage facile des applications grâce au code QR et Collation de l’Expo. Une fois que vous vous êtes déconnecté d’ExpoKit, vous remarquerez que vous pouvez toujours partager votre application via Expo XDE. Il générera toujours un code QR, mais ce code ne fonctionnera plus lorsque vous le numériserez avec l’application cliente Expo.
  • Créer des applications autonomes via les serveurs de l’Expo. Vous ne pouvez plus utiliser le exp build commande pour construire le .ipa ou .apk fichiers sur les serveurs de l’Expo. Cela signifie que vous devez installer Android Studio ou Xcode (selon la plate-forme que vous souhaitez déployer) et créer vous-même l’application localement. Vous pouvez également utiliser Centre d’applications Microsoft pour créer l’application si vous n’avez pas encore configuré d’environnement de développement local. Notez que vous ne pouvez pas utiliser de commandes comme react-native run-android ou react-native run-ios pour exécuter l’application, comme vous le feriez dans un projet React Native standard.
  • Service de notifications push de l’Expo. Expo ne gère plus vos certificats push après le détachement, le pipeline de notifications push doit donc être géré manuellement.

Ce que nous allons créer

Pour montrer l’avantage de se détacher à ExpoKit, nous allons créer une application qui nécessite une fonctionnalité native que la plate-forme Expo ne prend actuellement pas en charge. L’application sera une application de partage de position. Il fonctionnera principalement en arrière-plan, récupérant l’emplacement actuel de l’utilisateur. Il enverra ensuite cet emplacement via Pusher. Nous allons également créer une page Web montrant l’emplacement actuel de l’utilisateur sur une carte.

Voici à quoi ressemblera l’application:

application de suivi de localisation

Vous pouvez trouver le source complète du projet dans le référentiel GitHub du tutoriel.

Configuration de l’application

Dans le reste de cet article, nous nous concentrerons sur la configuration de notre application. Ensuite, dans le prochain article, nous allons développer une partie du code clé pour interagir avec ExpoKit.

En relation :  7 applications d'allergie utiles pour vous aider à éviter les allergies de printemps

Créer une application Pusher

Si vous souhaitez utiliser les services de Pusher dans votre application, vous devrez créer une application dans le tableau de bord Pusher. Une fois connecté, accédez à votre tableau de bord, cliquez sur Vos applis puis Créer une nouvelle applicationet saisissez le nom de l’application:

créer une application Pusher

Une fois l’application créée, accédez à Paramètres de l’application et vérifiez le Activer les événements client case à cocher. Cela nous permettra de déclencher des événements Pusher directement depuis l’application au lieu d’un serveur. Cliquez ensuite sur Mise à jour pour enregistrer les modifications:

activer les événements client

Vous pouvez trouver les clés sous le Clés d’application languette. Nous en aurons besoin plus tard, une fois que nous nous connecterons à l’application Pusher.

Créer une application Google

De même, nous devons créer un projet Google afin d’utiliser l’API Google Maps et l’API de géolocalisation. Aller à console.developers.google.com et créez un nouveau projet:

créer un projet Google

Ensuite, allez dans le tableau de bord du projet et cliquez sur Activer les API et les services. Rechercher API JavaScript de Google Maps et API de géocodage de Google Maps et les activer.

Depuis le tableau de bord du projet, accédez à Identifiants et cliquez sur Créer des informations d’identification> Clé API. Prenez note de la clé API qu’elle génère car nous l’utiliserons plus tard.

Créer un nouveau projet Expo

Exécutez les commandes suivantes dans votre répertoire de travail:

Maintenant, l’application Expo est prête à être testée. Scannez simplement le code QR avec votre application cliente Expo pour iOS ou Android.

Codage de l’application

Nous sommes maintenant prêts à commencer à coder l’application. Nous commencerons à développer en tant que projet Expo standard, puis nous nous détacherons de ExpoKit lorsque nous aurons besoin d’utiliser des fonctionnalités natives personnalisées.

Générer le code de suivi unique

Effacez le contenu du App.js à la racine du répertoire du projet et ajoutez les importations suivantes:

Nous utiliserons également un composant d’en-tête personnalisé:

Dans le constructeur, définissez le unique_code à son état initial:

L’interface utilisateur de notre application affichera ce code unique.

Enfin, voici le code du Header (composants / Header.js) composant:

Conclusion

Il s’agit de la première partie de notre série en deux parties sur le détachement des applications Expo sur ExpoKit. Dans cet article, vous avez appris les concepts derrière ExpoKit et commencé à mettre en place un projet qui utilisera la fonctionnalité d’ExpoKit.

Dans le prochain article, nous détacherons l’application d’ExpoKit, puis continuerons à la coder afin de pouvoir l’exécuter sur un appareil.

En attendant, consultez certains de nos autres articles sur le développement de l’application React Native!

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.