👋Démarrage rapide

À savoir

Papillon est développé en React Native. C'est un framework JavaScript (c'est-à-dire que vous développerez avec du code JavaScript). Il vous faut donc un minimum de connaissances dans ce langage de programmation.

Quelques particularités

• Papillon utilise TypeScript, c'est-à-dire que les objets JavaScript présents dans le code doivent être typés. Si votre IDE est configuré correctement, il vous en notifiera.

• Papillon utilise Expo mais pas Expo Go. Un processus de build sera nécessaire pour voir vos changements sur l'app en temps réel (cela sera expliqué plus tard).

Pré-requis

Commençons par préparer votre ordinateur pour contribuer à Papillon ! Pour cela, il faut un certain nombre d'outils.

macOS est nécessaire pour développer Papillon sous iOS. Si vous n'avez pas de Mac ou d'appareil éxecutant macOS, vous serez limité au développement Android.

Sur macOS

Les commandes d'installation seront indiquées ici. En les éxecutant dans l'ordre, votre Mac sera prêt pour le développement de Papillon.

Homebrew

Pour rendre l'installation plus facile, il est conseillé d'installer Homebrew, un gestionnaire de logiciels en ligne de commande.

Vous pouvez l'installer avec la commande suivante :

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Les commandes brew nécessitent cette étape. Il est fortement recommandé d'installer Homebrew pour la suite de ce tutoriel.

NodeJS

Node est un environnement JavaScript conçu pour exécuter localement du code JavaScript, en dehors d'un navigateur. C'est ce qu'utilise Papillon (via React Native) pour fonctionner.

brew install node@22

Git

Git est un outil qui vous sera nécessaire pour télécharger le code de Papillon, le tenir à jour, et publier des modifications.

brew install git

Watchman

Watchman est un outil qui vous permettra de voir les mises à jour de votre code en temps réel, sans avoir à redémarrer l'application.

brew install watchman

Sur Windows

Environnement de développement

Une fois que tout est installé, il faut mettre en place votre environnement de développement.

iOS (macOS)

macOS est nécessaire pour développer Papillon sous iOS. Si vous n'avez pas de Mac ou d'appareil éxecutant macOS, vous serez limité au développement Android.

Cocoapods

Cocoapods est le gestionnaire de dépendance pour les applications iOS, il est nécessaire au build de l'application.

Il n'est pas nécessaire pour développer sur Android, mais il reste conseillé de l'installer.

sudo gem install cocoapods

Xcode

Xcode est le logiciel d'Apple permettant le développement sous macOS. Il est téléchargeable via l'App Store.

Une fois Xcode installé, il faudra installer les outils en ligne de commande :

xcode-select --install 

Android (Windows ou macOS)

Clonage

Une fois que vous avez créé un fork de Papillon, vous allez pouvoir le télécharger localement afin d'y apporter des modifications via votre éditeur de code, pour cloner le fork, vous allez devoir utiliser l'outil Git :

Pour cela, ouvrez un terminal dans le dossier de votre choix et exécutez la commande suivante :

git clone https://github.com/PapillonApp/Papillon.git

Préparation au développement

Pour développer plus facilement, il est recommandé d'utiliser un éditeur de code tel que Visual Studio Code, Zed ou WebStorm.

Ouvrez le projet papillon dans l'éditeur en question et exécutez les commandes d'initialisation suivantes :

npm install

Pré-build

Pour démarrer l'application, il faut la pré-builder. C'est-à-dire compiler une version spécifique utile au développement.

Il faut procéder à cette étape à CHAQUE ajout ou mise à jour de modules npm demandant du code natif. Sinon, l'app peut crash ou se comporter incorrectement.

Pour cela, éxecutez la commande suivante à chaque fois que vous installez des nouvelles dépendances.

npx expo prebuild

Si vous développez pour iOS, il faut également mettre à jour les Cocoapods

cd ios && pods install && cd ..

Commencez à développer !

Pour démarrer l'app, exécutez la commande correspondante :

Cette commande peut prendre 5 à 10 minutes lorsqu'elle est exécutée à froid (c'est à dire pour la première fois). C'est normal, c'est un processus lourd et énergivore.

iOS (macOS)

npx expo run ios

Android (macOS et Windows)

Problèmes fréquents

⚠️ L'application crash sans raison ou le build ou le pré-build ne fonctionne pas

Si l'erreur n'affiche pas de raison claire, tentez de réinitialiser la partie native de votre projet :

(sous macOS)

rm -rf node_modules
npm i
npx expo prebuild
cd ios
pod install
cd ..

Effectuer sa première Pull Request

Une fois que tu as fait les modifications que tu voulais, tu peux créer une nouvelle branche à l'aide de la commande git checkout -b feature/super-cool, chez Papillon, nous respectons la spécification Conventional Branch afin de se repérer dans nos branches.

Ensuite, il te suffit d'ajouter tous les fichiers que tu souhaites pousser avec la commande git add [fichier] puis d'effectuer un commit avec git commit -m [titre de ton commit] -m [description], il n'est pas obligatoire de mettre une description, mais tu dois respecter la spécification Conventional Commits.

Une fois que tout ça est fait, tu peux enfin pousser les modifications vers ton fork à l'aide de la commande git push origin [nom de ta branche, et tu peux ensuite, en allant dans l'onglet Pull Requests du dépôt GitHub de Papillon, ouvrir ta Pull Request.

Et ensuite ?

Elle sera analysée en premier temps par un robot qui s'assurera de sa conformité avec les règles de contributions, si elle n'est pas conforme, elle obtiendra le label Invalide le temps que tu corriges ce qui ne va pas, ne t'inquiète pas, tout est expliqué par le robot sous ta Pull Request.

Après cette première analyse, nous analyserons manuellement ta Pull Request, nous pouvons à ce stade, soit valider, soit demander des changements, une fois que tout sera bon, elle sera fusionnée avec le code principal !