Application mobile: Exécuter une application native React sur un appareil ou un émulateur Android

React Native est un framework de développement mobile permettant de créer des applications multiplateformes qui s’exécutent et se sentent vraiment natives sur iOS et Android. Avec React Native, vous pouvez choisir de tester l’exécution de votre application sur un émulateur ou sur un appareil physique.

Un émulateur est un appareil virtuel qui vous permet de tester votre application sans posséder un appareil réel. L’utilisation du périphérique virtuel Android offre une grande variété de périphériques virtuels pouvant être émulés. Par exemple, vous pouvez configurer un émulateur basé sur un appareil comme le Google Pixel et utiliser votre version préférée du système d’exploitation Android.

Si vous possédez un appareil Android physique et préférez tester votre application dessus, React Native vous couvre également. Le processus peut être aussi simple que de connecter votre appareil Android à l’ordinateur que vous utilisez pour le développement et d’exécuter une commande. Cependant, l’exécution d’applications React Native sur Android nécessite une configuration initiale.

Dans cet article, nous allons parcourir toute la configuration initiale requise pour définir un environnement de développement approprié. Après cela, nous verrons comment exécuter un exemple d’application React Native sur l’émulateur et sur un appareil Android physique. Nous terminerons en apprenant comment tester l’exécution des applications React Native créées à l’aide de l’Expo CLI et également comment tester les applications React Native à l’aide d’un outil connu sous le nom de Waldo.

Conditions préalables

Les éléments suivants sont requis pour exécuter une application React Native sur Android :

  • Android Studio
  • SDK Android
  • JDK 8 (instructions d’installation pour macOS ici et Windows ici)
citation de traction de waldo

Installation d’Android Studio et du SDK Android

Android Studio est l’IDE officiel pour le développement d’applications Android. Il est disponible gratuitement et peut être téléchargé sur le site officiel. Android Studio est disponible pour macOS, Windows et Linux.

Pour installer Android Studio, téléchargez le fichier d’installation d’Android Studio ici. Après cela, lancez l’exécutable et suivez les invites pour terminer le processus d’installation.

Une fois le processus d’installation terminé, lancez Android Studio. La première fois que vous exécutez Android Studio, il vous invite à installer des fichiers supplémentaires. Les fichiers supplémentaires incluent le SDK Android, les outils de plate-forme et l’émulateur. Assurez-vous que votre ordinateur est connecté à Internet, puis suivez l’assistant de configuration pour installer toutes les dépendances. Le processus peut prendre un certain temps, selon votre connexion Internet.

Installation du JDK 8

Comme mentionné précédemment dans les exigences, vous devrez installer JDK 8 si vous ne l’avez pas déjà installé. Vous trouverez ci-dessous des liens vers les pages de téléchargement officielles et les instructions d’installation pour les utilisateurs de Windows et macOS :

Il existe plusieurs façons d’installer JDK, par exemple, en utilisant Homebrew sur macOS. Cependant, les instructions liées ci-dessus impliquent l’utilisation d’un programme d’installation exécutable. Vous pouvez installer JDK 8 en utilisant la méthode que vous préférez.

citation de traction de waldo

Configuration des variables d’environnement

À ce stade, nous avons installé Android Studio et JDK 8. Par conséquent, nous pouvons procéder à l’ajout du SDK Android à nos variables d’environnement. Cette étape permettra à React Native d’interagir avec le SDK Android via la ligne de commande.

Configuration de macOS

Suivez ces étapes pour configurer les variables d’environnement sur votre ordinateur macOS.

Exécuter soit sudo nano ~/.bash_profile (pour bash) ou sudo nano ~/.zshenv (pour zsh) pour éditer votre fichier de configuration shell. Après cela, collez le code suivant dans le fichier :

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

Appuyez sur Ctrl + x pour enregistrer les modifications.

Pour recharger la nouvelle configuration, redémarrez votre terminal. Alternativement, vous pouvez exécuter source ~/.bash_profile ou source ~/.zshevn (selon le type de terminal dont vous disposez).

l’installation de Windows

En revanche, si vous êtes sur un PC Windows, vous devrez ajouter une nouvelle variable d’environnement via le panneau de configuration. Ouvrez le panneau de configuration (dans la vue par catégorie), puis accédez à Systèmes et sécurité → Systèmes.

l'installation de Windows

Cliquez sur « Paramètres système avancés » dans le menu latéral pour ouvrir la fenêtre Propriétés du système. Une fois que vous êtes dans la fenêtre Propriétés du système, cliquez sur « Variables d’environnement » pour ouvrir la fenêtre Variables d’environnement.

propriétés du système

Dans la fenêtre Variables d’environnement, sous la section Utilisateur, cliquez sur « Nouveau » pour ajouter une nouvelle valeur.

nouvelle variable utilisateur

À ce stade, la boîte de dialogue Nouvelle variable utilisateur doit être ouverte. Dans le premier champ, intitulé nom de la variable, ajoutez la valeur suivante : ANDROID_HOME.

Ensuite, vous devrez spécifier le chemin où Android SDK est enregistré sur votre machine dans le deuxième champ (valeur variable). Habituellement, le chemin est sur un emplacement comme C:UtilisateursvotrenomAppDataLocalAndroidSdk. Vous pouvez confirmer le chemin correct à partir de la page des paramètres d’Android Studio sous Apparence et comportement → Paramètres système → SDK Android.

SDK Android

Dans la section suivante, nous allons créer un nouveau projet React Native, que nous utiliserons pour tester notre configuration jusqu’à présent. Si vous avez déjà une configuration de projet, vous pouvez ignorer la section.

Création d’un nouveau projet avec React Native CLI

Ouvrez une nouvelle fenêtre de terminal ou une invite de commande si vous êtes sur un PC Windows et exécutez la commande suivante :

npx react-native init helloReactNative

Après avoir appuyé sur la touche Entrée, attendez la fin de la configuration du nouveau projet. Une fois créé, vous trouverez un nouveau dossier dans votre répertoire actuel. Le nom du nouveau dossier est le même que le nom de votre projet. Exécutez les commandes suivantes pour accéder au dossier du projet :

cd helloReactNative

ASTUCE: Remplacer bonjourReactNative avec le nom réel de votre projet. C’est-à-dire dans le cas où votre projet porte un nom différent.

Exécuter l’application sur un appareil Android physique

Dans cette section, nous allons exécuter notre projet sur un appareil Android réel. Avant de faire cela, assurons-nous que l’appareil et votre ordinateur sont capables de communiquer correctement.

Activation du débogage USB

Le débogage USB permet à Android Debug Bridge (ADB) de pousser les APK sur votre téléphone.

Pour activer le débogage USB, vous devez d’abord déverrouiller les options de développement. Pour ce faire, accédez aux paramètres de votre appareil Android et accédez à la section À propos de l’appareil. Dans la section À propos de l’appareil, appuyez 10 fois sur le numéro de build ou jusqu’à ce que vous voyiez le message « Vous êtes maintenant un développeur ».

Avec les options de développeur activées, vous devriez trouver un élément Options de développeur sur l’écran des paramètres ou sous Paramètres avancés/système. À partir de là, activez le débogage USB.

paramètres du développeur

Exécuter l’application

Connectez votre téléphone à l’ordinateur à l’aide d’un câble USB. Après cela, revenez au terminal (assurez-vous que votre répertoire de projet est défini comme répertoire actuel), puis exécutez la commande suivante :

npx react-native run-android

Sur une construction réussie (quand aucune erreur ne se produit), l’application sera installée sur votre appareil Android. Le processus de génération peut prendre quelques secondes ou minutes, selon la puissance de votre ordinateur.

ASTUCE: Une invite peut apparaître sur votre téléphone pour demander l’autorisation d’ADB la première fois que vous exécutez la commande ci-dessus. Veuillez accepter l’invite pour accorder l’accès ADB.

Utiliser un émulateur

À ce stade, nous avons pu terminer la configuration initiale et exécuter notre application sur un appareil Android. Essayons ensuite d’exécuter la même application sur un émulateur.

Nous commencerons par créer un nouvel émulateur si nous n’en avons pas déjà configuré un.

Ouvrez AVD Manager en accédant à Outils → AVD Manager dans Android Studio. Pour lancer AVD Manager à partir de l’écran d’accueil d’Android Studio, accédez à Configuration → AVD Manager.

Responsable AWD

Dans AVD Manager, cliquez sur le bouton « Créer un périphérique virtuel » pour lancer le nouvel assistant de configuration de périphérique virtuel.

appareils virtuels

AVD Manager affiche également une liste de tous les appareils virtuels que vous avez déjà configurés. Si vous n’avez aucun périphérique virtuel, la liste sera vide.

Sélectionnez une catégorie et un nom d’appareil parmi les options proposées. Par exemple, vous pouvez sélectionner Téléphone et Pixel 4 comme catégorie et nom. Cela va configurer un appareil virtuel qui émule le Google Pixel 4. Il est généralement recommandé de choisir un appareil qui a l’icône Google Play à côté. Après cela, cliquez sur Suivant pour continuer.

sélectionner le matériel

Ensuite, sélectionnez une image système Android qui alimentera votre nouvel appareil virtuel. Cliquez sur le bouton de téléchargement pour télécharger l’image système. Une fois le téléchargement terminé, cliquez sur le bouton Terminer pour terminer la configuration.

configuration de finition

Revenez à AVD Manager. Votre nouvel émulateur devrait être visible sur la liste des appareils à ce stade. Cliquez sur l’icône de lecture à côté de l’appareil pour démarrer l’émulateur.

émulateur de démarrage

Une fois l’émulateur en cours d’exécution, revenez au terminal et exécutez la commande suivante pour déployer votre application sur l’émulateur :

npx react-native run-android

Attendez la fin du processus de génération. Si le processus se termine sans erreur, votre application doit s’exécuter sur l’émulateur.

écran de bienvenue de l'émulateur

Exécution d’applications natives React à l’aide d’Expo CLI

Expo CLI est un outil qui réduit le processus de configuration initiale dans le développement React Native. Par conséquent, cela facilite le démarrage pour les personnes sans expérience.

Dans cette section, nous verrons rapidement comment exécuter des projets React Native basés sur l’Expo CLI.

Périphérique physique

Pour exécuter votre projet sur un appareil Android, commencez par télécharger l’application Expo sur votre appareil depuis le Play Store. Après cela, exécutez la commande suivante à partir du répertoire racine de votre projet :

npm start

La commande ci-dessus démarrera Expo. Expo fournit un client accessible via un navigateur Web ou sur le terminal.

expo de départ

Ouvert hôte local : 19002 sur Google Chrome pour accéder au client Expo Metro Builder. Une fois l’Expo en cours d’exécution, connectez votre téléphone, puis cliquez sur « Exécuter sur un appareil/émulateur Android » pour exécuter votre application.

Émulateur

Exécutons maintenant notre application sur un émulateur en utilisant Expo. Tout d’abord, exécutez le début npm commande pour démarrer Expo (si Expo n’est pas déjà active). Ensuite, ouvrez le client Expo dans Chrome et cliquez sur « Appareil/émulateur Android ».

ASTUCE: Vous devrez peut-être supprimer tout appareil Android connecté.

Expo démarrera une nouvelle instance d’un émulateur que vous avez préconfiguré. Attendez que l’émulateur ait fini de démarrer. Après cela, votre application devrait démarrer dessus.

Un moyen supplémentaire de tester l’exécution de votre application native React

En plus de toutes les méthodes dont nous avons parlé jusqu’à présent, examinons une autre façon de tester l’exécution d’une application React Native. Waldo est une solution de test sans code pour le développement mobile. Il est facile à utiliser et ne nécessite pas de longues configurations.

Vous pouvez essayer Waldo gratuitement. Inscrivez-vous sur leur site ici. Après cela, vous pouvez commencer à tester votre application React Native de manière transparente avec Waldo.

citation de traction de waldo

En conclusion

Nous avons couvert de nombreuses étapes dans cet article. Par conséquent, terminons par un récapitulatif des principales choses que nous avons apprises.

Tout d’abord, nous avons commencé par configurer l’environnement de développement Android. Cela comprenait l’installation d’Android Studio et le téléchargement du SDK Android et de la configuration des variables d’environnement.

Deuxièmement, nous avons appris à créer un nouveau projet React Native à l’aide de la CLI React Native.

Et enfin, nous avons examiné comment exécuter réellement notre application sur un appareil Android physique et sur un appareil émulateur.

Si vous créez une application React Native qui cible les utilisateurs Android, la plupart des éléments dont nous avons discuté peuvent être utiles pour tester votre application pendant la phase de développement.

Ce billet a été écrit par Pius Aboyi. Pie est un développeur mobile et Web avec plus de 4 ans d’expérience dans la construction pour la plate-forme Android. Il écrit du code en Java, Kotlin et PHP. Il adore écrire sur la technologie et créer des tutoriels pour les développeurs.

#Exécuter #une #application #native #React #sur #appareil #émulateur #Android