Installation React Native environnement🔗
Introduction🔗
Elao utilise React Native pour développer des applications mobiles. Ce document explique comment installer l'environnement de développement pour pouvoir travailler sur ces projets.
Qu'est-ce que React Native ?🔗
React Native est une bibliothèque JavaScript permettant de développer des applications mobiles pour Android et iOS. Ses avantages sont nombreux :
- Elle permet de générer et gérer des applications iOS et Android à partir d'un seul code source
- de développer des applications mobiles en utilisant les mêmes concepts que ReactJS, la bibliothèque JavaScript de Facebook
- d'utiliser du JavaScript pour développer des applications mobiles, et non pas du Java ou du Swift (ou de l'Objective-C)
Installation de l'environnement de développement🔗
Configuration sur laquelle ce document a été rédigé🔗
- Systeme d'exploitation : macOS Version 13.4.1
- Matériel : MacBook Pro (13 pouces, 2023)
- Processeur : Apple M2 Pro
- Mémoire : 16 Go
Introduction🔗
La configuration de l'environnement de développement pour React Native peut varier suivant les versions, j'ai essayé de retenir les composants qui ont le moins changé depuis les premières versions jusqu'à aujourd'hui (septembre 2023).
Développer sur une cible iOS🔗
Pour développer sur une cible iOS, il faut installer au moins les composants suivants :
- Xcode
- Watchman
- Ligne de commande React Native
- CocoaPods
Homebrew🔗
Homebrew est un gestionnaire de paquets pour macOS, il permet d'installer des logiciels et des librairies. Il est fortement recommandé d'utiliser Homebrew pour installer les composants nécessaires à React Native.
Note
Il y a déjà un cookbook (en anglais) interne sur comment installer et utiliser Homebrew..
Node et Watchman🔗
Introduction et utilités🔗
Utilisé avec React Native, Watchman permet de détecter des modifications apportées au code source, (sur votre projet local) et de build et pushe automatiquement les modifications sur le simulateur ou le device.
Note
C'est un outil désigné par une équipe de développement de Facebook, plus de détails sur le site officiel du projet.
NodeJS est essentiel pour configurer votre application React Native, en effet, il a plusieurs utilités au sein de votre projet :
- Servir d'environnement d'exécution pour le code JavaScript de l'application mobile, côté serveur,
- Côté client (sur le device ou le simulateur), il permet d'exécuter un serveur local, et de recharger à chaud les modifications apportées au code source, sans avoir besoin d'une compilation complète de l'application.
- De plus, les librairies et dépendances de votre projet sont gérées via npm (ou Node Package Manager), fourni avec NodeJS.
Installation🔗
Lancez cette commande avec Homebrew ;
1 | |
Et pour installer NodeJS, vous pouvez utiliser NVM (Node Version Manager), qui vous permet d'installer, de gérer et de switcher entre plusieurs versions de NodeJS.
Il y a un cookbook sur ce sujet, vous pouvez l'utiliser pour installer NVM.
Vérifier que la version que vous installez de NodeJS est la plus récente
Note
A l'instant d'écriture de ce cookbook, la version minimum nécessaire de Node est la 16.
Vous pouvez vérifier la version installée en lançant la commande suivante :
1 | |
Xcode🔗
Introduction🔗
XCcode est l'IDE (Integrated Development Environment) officiel d'Apple pour développer des applications iOS, des applications qui peuvent tourner sur des devices comme des iPhone, iPad, etc.
Il vous fournira plusieurs outils et features essentiels :
- Des simulateurs sur différents devices et versions d'iOS,
- Compiler et build votre application, pour que votre code initialement écrit en JavaScript soit compilé en code natif (par exemple de l'Objective-C ou du Swift pour iOS),
- Gérer les certificats et les profils de provisioning pour déployer votre application sur un device physique, comme la tâche de signature du code source, étape obligatoire pour installer une application sur un device iOS.
Installation🔗
Xcode est disponible sur l'App Store, vous pouvez le télécharger et l'installer depuis l'application.
Installez de préférence la dernière version supportée (LTS).
Comment déployer une application sur un device iOS🔗
Avec un compte personnel🔗
Vous devez tout d'abord avoir un compte personnel auprès d'Apple, à créer sur le site web officiel.
Quand vous avez créé votre compte, vous pouvez le renseigner sur le projet XCode qui vous intéresse, ouvrez le projet, et rendez-vous dans XCode > Settings > Account > Cliquez sur l'icône '+' en bas à gauche > Apple ID.
Si l'application appartient à une organisation, il faut demander aux administrateurs de l'organisation de vous ajouter, sur ce site.
Avec un compte d'organisation🔗
En général, le compte d'organisation propre à Elao est mobile@elao.com, vous devez aussi l'ajouter dans la partie
'Account' de XCode, le mot de passe est disponible sur le 1Password Elao.
Warning
Le compte mobile@elao.com, demande une double authentification (Deux facteurs ou 2FA),
il faut donc utiliser un code de sécurité quand vous ajoutez le compte sur XCode.
Certaines personnes d'Elao ont des devices enregistrés pour vous transmettre ces codes.
Vous pouvez vous-même ajouter le compte dans la partie 'Comptes Internet' des
paramètres systèmes de votre mac, pour recevoir les codes de sécurité.
Il faut également rajouter le certificat de l'application sur votre mac, disponible normalement sur 1password. Le certificat est à importer dans l'application 'Trousseaux d'accès' (partie 'Mes certificats').
CocoaPods🔗
Introduction🔗
CocoaPods permet de gérer les dépendances d'un projet de développement sur iOS ou macOS. Dans le contexte de développement React Native, il permet de gérer les bibliothèques et dépendances natives de votre application mobile, comme les librairies qui permettent de gérer des notifications Push (Firebase).
Installation🔗
Pour l'installer sur votre machine, vous pouvez exécuter la commande suivante :
1 | |
Tip
Il n'y a pas besoin d'installer gem avec Homebrew, il est déjà installé par défaut sur macOS, en effet
la commande vient avec Ruby qui est nativement présent sur macOS.
Si vous voulez gérer vos versions de Ruby de façon plus fine, vous pouvez utiliser RVM (Ruby Version Manager),
outil analogue à NVM pour NodeJS.
Installer et lancer le projet localement🔗
Installer les dépendances du projet🔗
Avec les commandes Make suivantes, vous pouvez installer les dépendances du projet :
1 | |
Lancer le projet🔗
Vous pouvez lancer le projet sur un simulateur iOS avec la commande suivante :
1 | |
Tip
Pour lancer le projet sur l'environnement de staging, vous pouvez utiliser la commande suivante :
1 | |