Détachement d'applications Expo pour 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 apprendrez également certains de ses avantages et inconvénients.

Dans mon développement plus facile de React Native avec Expo Post, vous avez appris comment il est plus facile pour les débutants de commencer à créer des applications avec React Native. Vous avez également appris que Expo permettait aux développeurs de développer plus rapidement le développement d'applications React Native, car il n'était 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 s'efforce toujours de prendre en charge davantage de fonctionnalités natives, c'est une bonne idée d'apprendre à convertir un projet Expo existant en un projet natif standard afin que vous puissiez effectuer facilement une transition en cas de besoin. Donc, dans cette série en deux parties, nous allons voir comment le faire.

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

Conditions préalables

Ce tutoriel suppose que vous avez déjà configuré votre ordinateur pour le développement natif d'Expo et de React. 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 vérifier le Guide de prise en main de l'Expo, ainsi que le guide "Mise en route" dans les documents React Native sous l'onglet "Construction de projets avec code natif" pour votre plate-forme spécifique, si ce n'est 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 plate-forme Expo au sein d’un projet standard React Native. Quand je parle de "projet React Native standard", je veux dire celui qui a été créé à l'aide du réact-natif init commander.

L’inconvénient de ce détachement d’ExpoK est que vous devez configurer l’environnement de développement natif standard pour React Native.!

Un autre inconvénient est que vous n'êtes limité que par les versions React et React Native utilisées 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 de 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, évitez d'utiliser les API Expo. De cette façon, vous pouvez facilement "éjecter" un projet React Native standard au moment où vous devez commencer à utiliser des modules natifs personnalisés..

Quand détacher pour ExpoKit?

Vous voudrez 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 plateforme Expo. Exemples: Bluetooth et 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’erreur. Si vous souhaitez utiliser un service alternatif, votre seule option est d'écrire votre propre code pour communiquer à l'API HTTP les services que vous souhaitez utiliser ou d'installer un module natif existant qui effectue le travail..
Vous avez 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 n'intègre pas vraiment ces services avec le logiciel, vous devrez donc écrire votre propre code d'intégration si vous souhaitez les utiliser tout en restant sur la plateforme Expo..

Fonctions conservées lors du détachement dans ExpoKit

Si vous vous détachez d’ExpoKit, vous perdrez certaines des fonctionnalités offertes par la plate-forme Expo. Cependant, les fonctionnalités essentielles suivantes sont toujours conservées:

API Expo. Vous pourrez toujours utiliser les API Expo telles que l'API Autorisations..
Live Recharger. Les applications Détachées Expo 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 votre iPad, mais vous devez suivre certaines étapes supplémentaires que je ne couvrirai pas dans ce didacticiel..

Fonctions que vous perdez lorsque vous vous détachez d'ExpoKit

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

Partage facile des applications au moyen du code QR et Expo Snack. Une fois que vous avez détaché 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 scannerez avec l'application client Expo..
Construire des applications autonomes via les serveurs de l'Expo. Vous ne pouvez plus utiliser le construction exp 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 l'application vous-même localement. Vous pouvez également utiliser Microsoft App Center pour créer l'application si aucun environnement de développement local n'a encore été configuré. Notez que vous ne pouvez pas utiliser de commandes telles que réagit natif run-android ou réactif natif run-ios pour exécuter l'application, comme dans un projet React Native standard.
Service de notifications push de l'Expo. Expo ne gère plus vos certificats Push après leur détachement. Le pipeline de notifications Push doit donc être géré manuellement..

Ce que nous allons créer

Pour démontrer les avantages liés au détachement dans ExpoKit, nous allons créer une application nécessitant une fonctionnalité native que la plateforme Expo ne prend pas en charge pour le moment. L'application sera une application de partage de localisation. Il fonctionnera principalement en arrière-plan, récupérant l'emplacement actuel de l'utilisateur. Il enverra ensuite ce lieu via Pusher. Nous allons également créer une page Web indiquant l'emplacement actuel de l'utilisateur sur une carte..

Voici à quoi ressemblera l'application:

Vous pouvez trouver la source complète du projet dans le tutoriel GitHub repo.

Configuration de l'application

Dans le reste de cet article, nous allons nous concentrer sur la configuration de notre application. Ensuite, dans le prochain article, nous préciserons une partie du code clé permettant d'interagir avec ExpoKit..

Créer une application Pusher

Si vous souhaitez utiliser les services de Pusher dans votre application, vous devez créer une application dans le tableau de bord Pusher. Une fois connecté, allez sur votre tableau de bord, cliquez sur Vos apps et alors Créer une nouvelle application, et entrez le nom de l'application:

Une fois l'application créée, allez à Paramètres de l'application et vérifier le Activer les événements client case à cocher. Cela nous permettra de déclencher des événements Pusher directement depuis l'application plutôt que depuis un serveur. Puis cliquez sur Mettre à jour pour enregistrer les modifications:

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

Création d'une application Google

De même, nous devons créer un projet Google pour utiliser l'API Google Maps et l'API de géolocalisation. Accédez au fichier console.developers.google.com et créez un nouveau projet:

Ensuite, allez au tableau de bord du projet et cliquez sur Activer les API et les services. Rechercher API Google Maps JavaScript et API de géocodage de Google Maps et permettre à ceux.

Dans le tableau de bord du projet, accédez à Lettres de créance 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 d'exposition

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

exp init ocdmom cd ocdmom exp début

L'application Expo est maintenant prête à être testée. Scannez simplement le code QR avec votre application client 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 passerons à ExpoKit lorsque nous aurons besoin d'utiliser des fonctionnalités natives personnalisées..

Génération du code de suivi unique

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

importer Réagir de 'réagir'; importer StyleSheet, Text, View de 'react-native';

Nous allons également utiliser un composant d'en-tête personnalisé:

importer l'en-tête de './components/Header';

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

classe d'exportation par défaut App étend React.Component constructeur (props) super (props); this.state = code_unique: Math.random (). toString (36) .substring (7) .toUpperCase () // génère une chaîne aléatoire;

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

render () return (    Code unique this.state.unique_code   )

Enfin, voici le code pour le Entête (composants / Header.js) composant:

importer Réagir de 'réagir'; importer StyleSheet, Text, View de 'react-native'; exporter la classe par défaut Header etend React.Component render () return (  this.props.text  )  const styles = StyleSheet.create (en-tête: flex: 1, flexDirection: 'colonne', alignSelf: 'stretch', paddingTop: 20, paddingBottom: 5, backgroundColor: '# f3f3f3', header_text: fontWeight: 'bold', fontSize: 17, textAlign: 'center');

Conclusion

Ce fut la première partie de notre série en deux parties sur le détachement d'applications Expo pour ExpoKit. Dans cet article, vous avez appris les concepts qui sous-tendent ExpoKit et commencé à mettre en place un projet qui utilisera les fonctionnalités d'ExpoKit..

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

En attendant, consultez certains de nos autres articles sur le développement d'applications React Native!

Code