		Cover image
Démarrage rapide	Tout ce qu'il faut savoir pour commencer avec Papillon	/files/rw8xmaxRbImfxt1V5Oea	/spaces/Lt8mMBbf7ntjxrd29I4o/pages/GpoUPkrGgP4m0ZT7j30c
Architecture	Organisation du code, du projet, et choix techniques	/files/6DSRRZbtXMDnJFSxdAEX	/spaces/Lt8mMBbf7ntjxrd29I4o/pages/1wHDm0HrlIwse65mlS5v
Compiler pour iOS	Empaquetage de l'application pour les plateformes Apple	/files/bxTYdolV6WlmGxCzDPsw	/spaces/Lt8mMBbf7ntjxrd29I4o/pages/Hl5TLFx4ptZIrxLEKnaf

Cover image

Démarrage rapide

Tout ce qu'il faut savoir pour commencer avec Papillon

/files/rw8xmaxRbImfxt1V5Oea

/spaces/Lt8mMBbf7ntjxrd29I4o/pages/GpoUPkrGgP4m0ZT7j30c

Architecture

Organisation du code, du projet, et choix techniques

/files/6DSRRZbtXMDnJFSxdAEX

/spaces/Lt8mMBbf7ntjxrd29I4o/pages/1wHDm0HrlIwse65mlS5v

Compiler pour iOS

Empaquetage de l'application pour les plateformes Apple

/files/bxTYdolV6WlmGxCzDPsw

/spaces/Lt8mMBbf7ntjxrd29I4o/pages/Hl5TLFx4ptZIrxLEKnaf

		Cover image
Moyennes générales	Comprendre le calcul des moyennes sur Papillon	/files/kCccrd2u4E26hH8qJd98	/spaces/X5EgfW0EAbWBOpPutrzF/pages/xxMGtERgs1cQjerXF0UH
Se connecter à un service	Comprendre comment se connecter sur l'application	/files/z3WP93LOHdMYZh9tzoI9	/spaces/X5EgfW0EAbWBOpPutrzF/pages/TwhikRhN5l7uCuFr037f
Questions fréquentes	Les questions que l'on a l'habitude d'entendre, et leurs réponses	/files/VSFXmLNS5MZNxPz8vbGr	/spaces/X5EgfW0EAbWBOpPutrzF/pages/dz2WcEQ6euNAQ7I3ppG8

Cover image

Moyennes générales

Comprendre le calcul des moyennes sur Papillon

/files/kCccrd2u4E26hH8qJd98

/spaces/X5EgfW0EAbWBOpPutrzF/pages/xxMGtERgs1cQjerXF0UH

Se connecter à un service

Comprendre comment se connecter sur l'application

/files/z3WP93LOHdMYZh9tzoI9

/spaces/X5EgfW0EAbWBOpPutrzF/pages/TwhikRhN5l7uCuFr037f

Questions fréquentes

Les questions que l'on a l'habitude d'entendre, et leurs réponses

/files/VSFXmLNS5MZNxPz8vbGr

/spaces/X5EgfW0EAbWBOpPutrzF/pages/dz2WcEQ6euNAQ7I3ppG8

Développer pour Papillon

Cette partie de la documentation vous sera utile pour vos premières contributions à Papillon, si elle ne répond pas à toutes vos questions, nous y répondrons avec plaisir sur le serveur Discord de Papillon.

🥳 Bienvenue à toi, cher contributeur !

Papillon est un projet fait par des étudiants, pour des étudiants. L'intérêt étant que n'importe qui, qu'importe son niveau en informatique, puisse participer. C'est un moyen génial d'apprendre à coder des applications mobiles, avec un projet sympa qui peut t'intéresser.

Alors si tu es prêt à tenter l'aventure (il faut que tu sois à l'aise avec JavaScript), commence par notre guide de démarrage rapide pour tout installer et tout comprendre !

#### NodeJS [Node](https://nodejs.org/fr) 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. ```shellscript choco install nodejs --version="22.22.0" ``` #### Git [Git](https://git-scm.com/) est un outil qui vous sera nécessaire pour télécharger le code de Papillon, le tenir à jour, et publier des modifications. ```shellscript choco install git ``` #### Watchman [Watchman](https://facebook.github.io/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. ```shellscript choco install watchman ``` {% endtab %} {% endtabs %} ## Environnement de développement Une fois que tout est installé, il faut mettre en place votre environnement de développement. {% tabs %} {% tab title="iOS (macOS)" %} {% hint style="danger" %} **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. {% endhint %} #### Cocoapods Cocoapods est le gestionnaire de dépendance pour les applications iOS, il est nécessaire au build de l'application. {% hint style="info" %} Il n'est pas nécessaire pour développer sur Android, mais il reste conseillé de l'installer. {% endhint %} ```shellscript sudo gem install cocoapods ``` #### Xcode [Xcode](https://developer.apple.com/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 : ```shellscript xcode-select --install ``` {% endtab %} {% tab title="Android (Windows ou macOS)" %} #### Android Studio [Android Studio](https://developer.android.com/studio?hl=fr) est le logiciel de développement officiel pour Android. Celui-ci est recommandé pour développer sous Android. Téléchargez-le [depuis le site officiel](https://developer.android.com/studio?hl=fr) et procédez à l'installation. {% endtab %} {% endtabs %} ## 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 : ```bash 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](https://code.visualstudio.com/), [Zed](https://zed.dev/) ou [WebStorm](https://www.jetbrains.com/fr-fr/webstorm/). Ouvrez le projet `papillon` dans l'éditeur en question et exécutez les commandes d'initialisation suivantes : ```bash 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. {% hint style="info" %} 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. {% endhint %} Pour cela, éxecutez la commande suivante **à chaque fois que vous installez des nouvelles dépendances**. ```shellscript npx expo prebuild ``` Si vous développez pour iOS, il faut également mettre à jour les Cocoapods ```bash cd ios && pods install && cd .. ``` ## Commencez à développer ! Pour démarrer l'app, exécutez la commande correspondante : {% hint style="danger" %} 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. {% endhint %} {% tabs %} {% tab title="iOS (macOS)" %} ```shellscript npx expo run ios ``` {% endtab %} {% tab title="Android (macOS et Windows)" %} ```shellscript npx expo run android ``` {% endtab %} {% endtabs %} ## 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 : {% code title="(sous macOS)" %} ```shellscript rm -rf node_modules npm i npx expo prebuild cd ios pod install cd .. ``` {% endcode %}

## 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](https://conventional-branch.github.io/) 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](https://www.conventionalcommits.org/en/v1.0.0/). 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 ! # Architecture ## Résumé Papillon utilise la version 53 d'Expo et la 0.79.5 de React Native pour fonctionner. Nous nous reposons aussi sur de nombreuses librairies, la liste est disponible ici. Notre architecture est découpée en plusieurs couches : * Librairies et communications réseaux * Papillon UI * Papillon Icons * Stockage des données ## Librairies et communications **Papillon** n’utilise **aucun serveur intermédiaire** pour récupérer les données scolaires de l’utilisateur : elle s’appuie directement sur diverses **librairies open source** pour interagir avec les services. Cette approche est rendue possible **en grande partie** grâce au travail de l’organisation [**LiterateInk**](https://literate.ink/), qui maintient plusieurs des **principales** librairies utilisées par Papillon, telles que [**Pawnote**](https://github.com/LiterateInk/Pawnote), [**Pawdirecte**](https://github.com/LiterateInk/Pawdirecte.js) ou [**PawRD**](https://github.com/LiterateInk/PawRD). D’autres librairies externes, provenant d’autres **développeurs** et **contributeurs**, participent également à la **magie** de **Papillon**. Grâce à plusieurs phases de **rétroingénierie**, nous avons pu reproduire fidèlement le comportement des applications **officielles**, tout en permettant une approche plus **ouverte**, **transparente** et **respectueuse de la vie privée**. Pour mieux visualiser ce fonctionnement, voici un **schéma comparatif** entre les **applications officielles** et **Papillon**.

**Et si vous en faisiez partie ?** C’est grâce à la **communauté open source** que Papillon existe et continue de grandir. Si vous souhaitez **intégrer votre service à Papillon**, nous serions ravis d’accueillir votre **librairie** et de collaborer avec vous pour enrichir l’application. ## Papillon UI Avant d’atteindre une **maturité suffisante**, les composants de **Papillon UI** sont développés directement au sein du [dépôt GitHub](https://github.com/PapillonApp/Papillon) de **Papillon V8**. À terme, cette librairie deviendra un **dépôt distinct** et réutilisable par tous les développeurs, que ce soit pour des projets **internes** ou **externes** à **Papillon**. Il est **essentiel** de suivre **rigoureusement** les designs disponibles sur le **Figma** de **Papillon**, afin de garantir une **cohérence visuelle** et **fonctionnelle** dans l’interface. Cette rigueur permet de **préserver** l’identité de **Papillon** tout en assurant une expérience utilisateur homogène à mesure que l’interface **s’agrandit et évolue**. {% hint style="info" %} **Une question sur l'interface ?** Nous serions ravies d'y répondre dans le salon `🎨┃・interfaces` du serveur [Discord de Papillon](https://discord.gg/aKhYSBSzgW) {% endhint %} ## Papillon Icons Cette année, **Papillon** se renouvelle avec une **nouvelle identité visuelle**, nous continuons d’utiliser une partie des [**Lucide Icons**](https://lucide.dev/icons/), mais privilégions désormais les superbes icônes créées par [**Tom Things**](https://www.linkedin.com/in/tom-heliere/), designer chez **Papillon**. Ces icônes sont disponibles via la librairie NPM [**Papicons**](https://www.npmjs.com/package/@getpapillon/papicons), qui bénéficie de mises à jour **régulières**. Nous invitons donc les contributeurs à **privilégier** l’usage des icônes de cette librairie dans leurs PRs.

## Stockage des données {% hint style="success" %} **Papillon** respecte pleinement le **RGPD (Règlement Général sur la Protection des Données)**. **Aucune** donnée personnelle n’est traitée automatiquement sur nos serveurs : vos données **vous appartiennent** et **restent** strictement stockées **sur votre appareil**. {% endhint %} Depuis la **version 8** de **Papillon**, nous avons remplacé [**AsyncStorage**](https://docs.expo.dev/versions/latest/sdk/async-storage/) par plusieurs solutions de stockage **plus performantes** afin de garantir un **accès rapide** aux données, aussi bien **en ligne** que hors **ligne**. Nous utilisons notamment **deux librairies** principales : 1. [**MMKV**](https://github.com/mrousavy/react-native-mmkv): une solution **ultrarapide** de stockage **clé-valeur**, jusqu’à **20 fois** plus rapide qu'**AsyncStorage**, chez Papillon, nous l'utilisons pour stocker les données critiques comme les comptes ou encore les flags (nécessaires pour activer certaines fonctionnalités). 2. [**WatermelonDB**](https://github.com/Nozbe/WatermelonDB): une base de données locale ultra-optimisée pour les performances, bien plus rapide aussi qu'**AsyncStorage**, elle est utilisée lorsque l'appareil de l'utilisateur n'a pas accès à Internet, c'est lui qui sert de cache. Afin de fluidifier les différents flux de données reçus par les services, nous utilisons des interfaces partagées, auxquelles chaque donnée renvoyée par un service doit se conformer, c'est d'ailleurs ce que font les fichiers contenus dans `database/mappers`. # Structure {% hint style="danger" %} Afin de **ne pas surcharger** cette page, seuls les fichiers considérés comme **utiles au développement** y sont **répertoriés**. {% endhint %} ``` ├── app │ ├── (new) # Fondation de l'application, il n'est généralement pas utile de modifier son contenu │ ├── (settings) # Dossier relatif à la page des paramètres │ └── (tabs) │ └── calendar # Dossier relatif à l'onglet "Emploi du temps" │ └── grades # Dossier relatif à l'onglet "Notes" │ └── index # Dossier relatif à l'onglet principal │ └── profile # Dossier relatif à l'onglet "Profil" │ └── tasks # Dossier relatif à l'onglet "Tâches" ├── assets # Contient les ressources utiles à l'application ├── ios # Dossier généré automatiquement par Expo, sert à compiler l'application pour iOS ├── android # Dossier généré automatiquement par Expo, sert à compiler l'application pour Android ├── components ├── database # Tout ce qui est relatif à l'intégration de WatermelonDB │ ├── mappers # Fonctions utilitaires pour transformer le retour de WatermelonDB en données compatibles avec le Manager │ ├── models # Modèles nécessaires au fonctionnement de WatermelonDB │ ├── index.ts # Déclaration du schéma et des modèles │ ├── schema.ts # Schéma servant au fonctionnement de WatermelonDB ; sa version doit être incrémentée à chaque mise à jour │ └── use[...].ts # Contient les fonctions utiles à l'ajout/l'obtention dans la base de données ├── locales # Dossier contenant les traductions dans les différentes langues supportées par Papillon │ ├── [lang].json # Fichier spécifique à chaque langue supportée par Papillon ├── services │ ├── ecoledirecte # Dossier contenant toutes les fonctions utiles à l'intégration d'ÉcoleDirecte │ ├── pronote # Dossier contenant toutes les fonctions utiles à l'intégration de Pronote │ ├── shared # Dossier centralisant les classes et interfaces utilisées par les différents services │ └── skolengo # Dossier contenant toutes les fonctions utiles à l'intégration de Skolengo ├── stores # Tout ce qui est relatif à l'intégration de MMKV │ ├── account # Contient le stockage des comptes │ ├── flags # Contient le stockage des flags, nécessaire pour activer certaines fonctionnalités │ ├── global │ └── logs ├── ui # Tout ce qui est relatif à Papillon UI : composants et utilitaires │ ├── components │ └── utils ├── utils │ ├── grades │ └── algorithms # Algorithmes utilisés pour calculer une approximation des moyennes │ ├── logger │ ├── subjects # Gestion de la personnalisation des matières et de la classification par Kora │ ├── theme # Gestion du mode sombre/clair │ ├── adjustColor.ts │ └── generateId.ts # Certains IDs sont dynamiques ; les IDs finaux sont générés ici └────── i18n.ts # Fichier contenant les traductions de Papillon ``` # Règles de contribution ## :closed\_lock\_with\_key: Signaler une vulnérabilité Nous prenons la sécurité **très au sérieux**. Si vous découvrez une **vulnérabilité** dans **Papillon**, merci de suivre notre [**politique de sécurité**](https://github.com/PapillonApp/Papillon/.github/blob/main/SECURITY.md) : **n’ouvrez pas d’issue publique** et signalez-la directement à l’adresse suivante : ****. ## :outbox\_tray: Soumettre une Pull Request Nous serions ravis d’intégrer vos modifications à Papillon. Cependant, avant de fusionner avec la branche principale, merci de respecter les règles ci-dessous. En cas de non-respect, votre Pull Request sera considérée comme **invalide** et ne sera pas traitée tant que les corrections nécessaires n’auront pas été apportées. * [x] Vous ne devez pas soumettre plusieurs fonctionnalités ou corrections de bugs dans une même Pull Request. Chaque modification doit rester isolée afin de faciliter son traitement et, si nécessaire, son éventuel retour. * [x] Si votre Pull Request concerne des changements majeurs, merci d'ouvrir une Issue pour discuter avec les mainteneurs de la stratégie à adopter pour ne pas faire de gros travaux pour rien. * [x] Votre Pull Request doit respecter les conventions [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) et [Conventional Branch](https://conventional-branch.github.io/), ainsi que le style de code de l’application. * [x] Si votre Pull Request modifie une partie documentée, comme la structure, l’architecture ou autre, assurez-vous d’avoir mis à jour la documentation en conséquence. * [x] J'ai testé mes changements sur iOS et Android et l'application compile correctement. * [x] J'utilise un langage informel (tutoiement). #### :question: Comment vérifier le Lint ? Par défaut, en effectuant la commande ci-dessous, ESLint essayera de résoudre automatiquement les problèmes, s'il n'y arrive pas, vous devrez les corriger manuellement. ```bash $ npm run lint ``` ## :inbox\_tray: Ouvrir une issue Avant d’ouvrir une issue, assurez-vous d’utiliser la **dernière version** de **Papillon**, testez si le problème persiste après mise à jour, et vérifiez qu’une issue similaire n’a pas **déjà** été ouverte. Une issue bien écrite facilite son traitement et est toujours plus agréable pour nous à lire, afin que le traitement se passe au mieux, voici quelques conseils : 1. **Elle porte un nom explicite**, qui permet d’identifier **immédiatement** son **sujet principal**. 2. **Aucune issue semblable n’existe déjà** : il est inutile d’en créer plusieurs pour le même problème, **cela ne fait que ralentir son traitement**. Si vous êtes concerné par une issue existante, **réagissez** simplement avec un👍 3. **Elle contient une description détaillée**, si c’est une fonctionnalité, elle est **clairement expliquée**, idéalement accompagnée d’une **capture d’écran** ou d’un **design Figma,** s’il s’agit d’un bug, la description précise **le comportement actuel**, **le comportement attendu**, ainsi que **les étapes pour le reproduire**. 4. Si vous rencontrez **le même problème** ou souhaitez **la même fonctionnalité**, privilégiez les **réactions** aux commentaires. 5. **Complétez le modèle fourni lors de la création de votre issue**, il a été rédigé pour vous aider à **structurer votre demande, ne rien oublier d’important et gagner du temps**. # Compiler pour iOS {% hint style="danger" %} Pour compiler Papillon pour iOS, vous devez être sous MacOS et avoir installé Xcode. **Xcode 26 est nécessaire pour compiler Papillon v8 et ultérieur.** {% endhint %} {% stepper %} {% step %} #### Prébuild du projet Dans la racine du projet, éxecutez l'une de ces commandes : {% tabs %} {% tab title="npm" %} ```sh npm prebuild ``` {% endtab %} {% tab title="pnpm" %} ```sh pnpm prebuild ``` {% endtab %} {% tab title="yarn" %} ```sh yarn prebuild ``` {% endtab %} {% tab title="bun" %} ```sh bun prebuild ``` {% endtab %} {% endtabs %} {% endstep %} {% step %} #### Ouverture d'Xcode Ouvrir `Papillon.xcworkspace` avec xCode (**TRÈS IMPORTANT**) > Il se trouve dans le dossier `/ios` du projet > {% endstep %} {% step %} #### Configuration de Signing (optionnel) {% hint style="info" %} Cette étape n'est utile que si vous souhaitez lancer Papillon sur un appareil physique ou créer une build pour distribuer l'app {% endhint %} Double-cliquez sur Papillon dans le menu de gauche du projet puis allez dans **Signing & Capabilities** Ajoutez ici votre compte Apple Developer pour pouvoir signer vos builds. Si vous n'avez pas de compte payant Apple Developer: changer les teams pour le signing et enlever les "Assiocated Domains" {% endstep %} {% step %} #### Selection du scheme et de la target **Pour développer** Sélectionner `Papillon (debug)`au niveau des schemes et votre target (physique ou simulateur) **Pour distribuer ou tester en production** Sélectionner `Papillon (release)`au niveau des schemes et votre target (physique ou simulateur) {% endstep %} {% step %} #### Builder {% tabs %} {% tab title="Pour développer (debug)" %} Appuyez sur l'icône Debug pour démarrer l'appli sur l'appareil ou le simulateur sélectionné. Cela va compiler l'app puis la démarrer. **Il faut un serveur de développement Expo ouvert sur votre machine pour que l'app se lance par la suite.** {% endtab %} {% tab title="Pour distribuer (release)" %} Sélectionnez **Any iOS device** comme appareil de target Ouvrez le menu **`Product > Archive`** pour démarrer la compilation. > Par la suite, **l'Organizer** s'ouvre pour permettre de distribuer l'app ou de l'empaqueter au format `*.ipa` > {% endtab %} > {% endtabs %} > {% endstep %} > {% endstepper %} # Compiler pour Android ## Via la ligne de commande Dans un terminal de commande qui est dans le dossier GitHub Papillon, exécutez ces lignes : {% tabs %} {% tab title="Release" %} ```sh git clone git@github.com:PapillonApp/Papillon.git cd Papillon npm install npx expo prebuild -p android cd .\android\ ./gradlew ":app:assembleRelease" ``` {% endtab %} {% tab title="Debug" %} ```sh git clone git@github.com:PapillonApp/Papillon.git cd Papillon npm install npx expo prebuild -p android cd .\android\ ./gradlew ":app:assembleDebug" ``` {% endtab %} {% endtabs %} L'APK est disponible ici ```shell cd app/build/outputs/apk/release ``` # Principes de design Papillon est un projet né d'un besoin critique d'**expérience utilisateur**. A l'ère ou nos appareils sont dotés d'interfaces toujours plus claires, inclusives et intuitives, le monde de l'éducation prend encore du temps à rattrapper son retard. C'est pourquoi l'interface de Papillon et de ses services se construit autour de principes simples. ### Informer en un minimum d'actions En un minimum de clics, l'utilisateur doit avoir accès à l'information. Pour cela, on peut distinguer plusieurs types d'informations :

L'information

C'est ce pour quoi l'utilisateur ouvre l'app. * Une moyenne générale * Un devoir a rendre * La salle ou se trouve son prochain cours * Le solde de son compte cantine. Tout cela est une information. Dans la mesure du possible, les informations les plus évidentes et les plus sensibles à la durée doivent être visibles dans l'immédiat. Les informations secondaires, qui rentrent dans le détail, doivent elles être catégorisées intelligemment sous un composant représentant l'information primaire.

Les actions

C'est ce que l'utilisateur peut faire à un instant donné. Les actions clés doivent idéalement être visibles sans aucune intéraction préalable afin de maximiser la valeur perçue de l'interface.

Les contraintes

Ce sont des points de vigilance auxquels l'utilisateur doit être informé pour pouvoir agir en conséquence : * Si la fiabilité d'une information n'est pas garantie (moyenne estimées) * Si une erreur s'est produite * Si une intégration repose sur un service externe

### Faire comme chez soi Papillon est une application multiplateforme. Cependant, pour familiariser l'utilisateur avec l'environnement de l'application, elle doit appliquer les principes de design de sa plateforme hôte. * Sur iOS, elle peut adopter le Liquid Glass, les animations non-linéaires, les ombres portées, ainsi que les composants natifs SwiftUI * Sur Android, elle peut adopter les palettes de couleur Material You, les animations cubiques, les élevations, ainsi que les composants natifs Jetpack Compose Il faut pouvoir identifier en un coup d'oeil sur quel appareil fonctionne l'application. ### Rester honnête Ne pas mentir. Ne pas complexifier. Ne pas contourner. Si une information risque d'avoir une conséquence majeure pour l'utilisateur, il faut qu'elle soit expliquée de la manière la plus claire possible. Aucun modèle de design ayant pour intérêt de dévier l'utilisateur de son intention principale doit être utilisé dans l'application. # Layouts Les layouts sont les principaux conteneurs d'une page ou de contenu, contenant les élements scrollables, le header, le footer, etc. **Il est le point d'entrée d'un affichage particulier de données.**

## Commencer avec les layouts Il existe dans Papillon UI plusieurs types de layouts utilisables pour votre interface. {% hint style="warning" %} Si vous ne retrouvez pas votre cas d'usage dans ces types, privilégiez les layouts par défaut tels que [ScrollView](https://reactnative.dev/docs/scrollview), [FlatList](https://reactnative.dev/docs/flatlist) ou ceux importés comme [LegendList](https://github.com/LegendApp/legend-list) ou [FlashList](https://shopify.github.io/flash-list/). {% endhint %}

		Cover image		Cover image (dark)
TabFlatList	Composition complexes avec un header repliant animé	/files/bdYsD4VCCUMSs0wCBMEk	/pages/o9ICRcLVXF3wjkNYTpgl	/files/pSQvFgu5wv44o8ESCXeX
TableFlatList	Affichage de large listes de données scrollables avec sections	/files/eWVlcTJMKO7tVeQ18eMu	/pages/1ru9LBthuwX2b8bkEwbC	/files/ilylqgQNcZbqtcILOKlc
Stack	Affiche des éléments dans un format conditionné	/files/Lsp1lOk2waYa8GGvIXSp		/files/I3GcqO1sYRUEGJyou69y

# TabHeader `` est un composant [Layout](/design/components/layouts) conçu pour gérer l'en-tête (header) d'un écran, souvent utilisé dans des contextes de navigation par onglets. Ce composant est conçu pour se placer au-dessus du contenu de la page (avec un positionnement `absolute`) et peut être intégré à des logiques d'animation comme le défilement (scrolling) pour des effets de réduction ou de superposition, bien que ces logiques d'animation doivent être implémentées à l'extérieur via les propriétés (voir `shouldCollapseHeader`). ### Exemple ```tsx import React, {u seState } from 'react'; import { View } from 'react-native'; import { Papicons } from '@getpapillon/papicons'; import TabHeader from './TabHeader'; // Assurez-vous d'utiliser le bon chemin d'import import TabHeaderTitle from './TabHeaderTitle'; import Search from './Search'; import Typography from '@/ui/components/Typography'; import { TouchableOpacity } from 'react-native'; const MyTabScreen = () => { const [height, setHeight] = useState(0) return ( setHeight(height)} title={ } trailing={ console.log('Settings pressed')}> } bottom={ } /> {/* Le reste de votre contenu, comme un , doit avoir une marge supérieure pour ne pas être caché */} Contenu de l'écran... ); }; export default MyTabScreen; ``` ### Propriétés | `onHeightChanged` | `(height: number) => void` | Callback appelé à chaque fois que la hauteur de l'en-tête est calculée ou modifiée. Essentiel pour ajuster la marge supérieure du contenu de l'écran. | | ---------------------- | ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `title` | `React.ReactElement` | Le composant de titre principal, généralement un ``. | | `trailing` | `React.ReactElement` | Un élément React placé à droite du titre (boutons, icônes d'action, etc.). | | `bottom` | `React.ReactElement` | Un élément React placé sous la ligne du titre (ex: ``). | | `shouldCollapseHeader` | `boolean` | Indicateur si l'en-tête doit participer à un mécanisme de réduction (collapse) lors du défilement (même si l'animation elle-même est gérée à l'extérieur). *Non utilisé dans l'implémentation actuelle.* | # TableFlatList `` est un composant [Layout](/design/components/layouts) utilisé pour concevoir des onglets **comportant principalement d'une liste avec sections**. Il est notamment utilisé dans les paramètres.

{% hint style="success" %} **Il étend les propriétés et le fonctionnement de** [**FlatList**](https://reactnative.dev/docs/flatlist) tout en ayant la capacité d'utiliser comme composant étendu [FlashList](https://shopify.github.io/flash-list/) et [LegendList](https://legendapp.com/open-source/list/api/gettingstarted/) si nécessaire. {% endhint %} Celui-ci est utilisé principalement pour afficher un grand nombre de données dans des List tout en privilégiant les performances. Il faut impérativement l'utiliser si un écran se compose principalement de List avec beaucoup de données ou des informations chargées depuis un environnement externe. ## Exemple Cet exemple affiche 3 élements dans une section. {% columns %} {% column width="50%" %} {% code title="example.tsx" %} ```tsx , title: "Je suis mieux que vous", description: "Pourquoi ? J'ai une icône géniale !" } ] } ]} /> ``` {% endcode %} {% endcolumn %} {% column width="50%" %}

{% endcolumn %} {% endcolumns %} ## Propriétés TableFlatList étend les propriétés de [FlatList](https://reactnative.dev/docs/flatlist). {% hint style="danger" %} Il n'est **pas possible** d'indiquer un **`renderItem`** et des **`data`.** **Ces propriétés sont automatiquement managées par Papillon UI et les déclarer casse le fonctionnement et l'utilité de la TableFlatList.** {% endhint %} ### `sections` ^_(\*) Éléments a afficher dans la liste | Type | | --------------- | | Array\

| ### `engine` Composant FlatList wrappé et utilisé pour le rendu de la liste. 3 options disponibles. * [FlatList](https://reactnative.dev/docs/flatlist) * Composant de liste par défaut de React Native * [FlashList](https://shopify.github.io/flash-list/) (expérimental) * Plus performant que FlatList * Maintenu et très documenté * **Ne fonctionne pas pour le moment avec TabFlatList et le background** * [LegendList](https://github.com/LegendApp/legend-list) * Beaucoup plus performant que les deux autres * Instable avec des layouts complexes | Type | Valeur par défaut | | ------ | ----------------- | | String | FlatList | ## Types ### `Section` Une section contient un header avec son titre et une icône, ainsi que le contenu (des [SectionItem](#sectionitem)). | Propriété | Type | Usage | | ----------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------- | | items ^_(\*) | Array<[SectionItem](#sectionitem)> | Array contenant les items | | title | String | Titre de la section (affiché au dessus de celle-ci) | | icon | React.ReactNode | Élément React utilisé comme icône | | papicon | React.ReactNode | Élément issu des Papicons utilisé à la place d'`icon` | | hideTitle | Booléen | Masquer le header de la section | ### `SectionItem` Un item retourne un \ conçu pour apparaître dynamiquement dans une section. | Propriété | Type | Usage | | ----------- | --------------- | -------------------------------------------------- | | leading | React.ReactNode | Élément placé en amont du contenu | | trailing | React.ReactNode | Élément placé en aval du contenu | | icon | React.ReactNode | Icône affichée à la place du Leading | | papicon | React.ReactNode | Icône Papicons affichée a la place d'`icon` | | content | React.ReactNode | Élément React custom contenu dans l'Item | | title | String | Affiche un Typography type `title` dans l'item | | description | String | Affiche un Typography type `caption` dans l'item | | tags | Array\ | Affiche une liste de tags après la description | | onPress | () => void | Fonction appelée à l'appui | | itemProps | PressableProps | Propriétés supplémentaires passées à l'item wrappé | # TabFlatList {% hint style="danger" %} **Déprécié depuis la v8.3** TabFlatList est déprécié en faveur de TabHeader sur l'appli Papillon. Il ne sera plus maintenu ou mis à jour {% endhint %} `` est un composant [Layout](/design/components/layouts) utilisé pour concevoir des onglets complexes **avec un header repliant animé**. Il est notamment utilisé sur l'onglet des Notes, des Tâches et du Profil.

{% hint style="success" %} **Il étend les propriétés et le fonctionnement de** [**FlatList**](https://reactnative.dev/docs/flatlist) tout en ayant la capacité d'utiliser comme composant étendu [FlashList](https://shopify.github.io/flash-list/) et [LegendList](https://legendapp.com/open-source/list/api/gettingstarted/) si nécessaire. {% endhint %} Celui-ci est utilisé principalement pour afficher des grandes listes de données similaires ou des interfaces complèxes accompagné d'un header mobile tout en privilégiant un haut niveau de performances au render et au scroll. ## Propriétés TabFlatList étend les propriétés de [FlatList](https://reactnative.dev/docs/flatlist). {% hint style="warning" %} Il est **obligatoire** d'indiquer un **`renderItem`** et des **`data`.** {% endhint %}

Éléments obligatoires inhérents à FlatList (renderItem et data)

### `renderItem` _(FlatList) Prend un item de data et le rend à l'intérieur de la liste. Ajoute également des propriétes telles que `index` au rendu. | Type | | -------- | | Fonction | ### `data` _(FlatList) Une array (liste) d'éléments à rendre | Type | | ----- | | Liste |

### `engine` Composant FlatList wrappé et utilisé pour le rendu de la liste. 3 options disponibles. * [FlatList](https://reactnative.dev/docs/flatlist) * Composant de liste par défaut de React Native * [FlashList](https://shopify.github.io/flash-list/) (expérimental) * Plus performant que FlatList * Maintenu et très documenté * **Ne fonctionne pas pour le moment avec TabFlatList et le background** * [LegendList](https://github.com/LegendApp/legend-list) * Beaucoup plus performant que les deux autres * Instable avec des layouts complexes | Type | Valeur par défaut | | ------ | ----------------- | | String | FlatList | ### `header` Render le composant React a placer dans la partie supérieure animée. L'animation réduit l'échelle du component en fonction du scroll. Ce component est rendu **en dehors et au dessus** de la FlatList d'engine. {% hint style="danger" %} La hauteur du header est définie par la propriété [`height`](#height) et non par le composant lui-même. {% endhint %} {% columns fullWidth="true" %} {% column width="58.333333333333336%" %}

<TabFlatList
  header={
    <View>
      <Text>Coucou !</Text>
    </View>
  }
/>

{% endcolumn %} {% column width="41.666666666666664%" %}

{% endcolumn %} {% endcolumns %} | Type | | --------------- | | React.ReactNode | ### `height` Hauteur du composant parent de [`header`](#header). Cette height sera repliée avec le scroll de la vue. | Type | Valeur par défaut | | ------ | ----------------- | | Number | 120 | ### `padding` Espace (padding) autour des éléments rendus (renderItem) dans la vue scrollable. | Type | Valeur par défaut | | ------ | ----------------- | | Number | 16 | ### `gap` Espace entre les éléments rendus (renderItem) dans la vue scrollable. | Type | Valeur par défaut | | ------ | ----------------- | | Number | 0 | ### `radius` Bordure arrondie de la carte contenant la vue scrollable. {% hint style="success" %} **Privilégiez un** [**radius concentrique**](https://stackoverflow.com/questions/50096684/calculating-outer-corner-radius-for-concentric-rounded-corners-of-a-border) **avec vos élements UI** si ceux-ci commencent directement dans la liste pour un confort visuel et le respect des guides d'interface Papillon. {% endhint %} | Type | Valeur par défaut | | ------ | ----------------- | | Number | 28 | ### `backgroundColor` Couleur de fond de la vue | Type | Valeur par défaut | | ------------- | ---------------------------------------------------------------------------- | | Couleur (HEX) |

#F7E8F5 | ### `foregroundColor` Couleur du [`pattern`](#pattern) (si utilisé) de la vue | Type | Valeur par défaut | | ------------- | ----------------------------------------- | | Couleur (HEX) | ![](/files/Ij9bsOVhiQZFyLEHN1yf) #29947A | ### `translucent` Supprime l'arrière plan de la carte inférieure | Type | Valeur par défaut | | ------- | ----------------- | | Booléen | false | ### `pattern` Motif utilisé dans le fond de la vue. Fonctionne uniquement avec les motifs prédéfinis : * `dots` * `checks` * `grades` | Type | | ------ | | String | ### `onFullyScrolled` Callback qui sera appelé lorsque le header sera entièrement replié. | Type | | -------------------------------------- | | `({isFullyScrolled: boolean}) => void` | # Stack Stack permet de créer facilement des assemblages de vues, alignées et réparties équitablements, à la manière de **l'Auto Layout** de Figma ou du **Flexbox** en CSS.

## Exemple Cet exemple aligne 3 titres H2 verticalement avec un espacement de 12 pixels {% columns %} {% column %}

<Stack
  direction="vertical"
  gap={12}
>
  <Typography variant="h2">
    Hey
  </Typography>
  <Typography variant="h2">
    Comment
  </Typography>
  <Typography variant="h2">
    Ça va
  </Typography>
</Stack>

{% endcolumn %} {% column %}

{% endcolumn %} {% endcolumns %} ## Propriétés {% hint style="success" %} Stack étend [**View**](https://reactnative.dev/docs/view) et dispose de toutes ses propriétés {% endhint %} ### `direction` Direction de l'alignement des éléments : * `horizontal` * **`vertical` (par défaut)** | Type | Valeur par défaut | | ------ | ----------------- | | String | vertical | ### `gap` Espacement entre les éléments | Type | Valeur par défaut | | ------ | ----------------- | | Nombre | 4 | ### `padding` Espacement autour des éléments de la Stack | Type | Valeur par défaut | | ---------------------------- | ----------------- | | Nombre ou `[Nombre, Nombre]` | 0 | ### `margin` Espacement au dehors des éléments de la Stack | Type | Valeur par défaut | | ------ | ----------------- | | Nombre | 0 | ### `vAlign` Alignement vertical à l'intérieur de la Stack | Type | Valeur par défaut | | -------------------------- | ----------------- | | `start`, `center` ou `end` | start | ### `hAlign` Alignement horizontal à l'intérieur de la Stack | Type | Valeur par défaut | | -------------------------- | ----------------- | | `start`, `center` ou `end` | start | ### `inline` Empêche la Stack de prendre toute la largeur | Type | Valeur par défaut | | ------- | ----------------- | | Booléen | false | ### `flex` Applique `flex: 1` a la Stack | Type | Valeur par défaut | | ------- | ----------------- | | Booléen | false | ### `backgroundColor` Applique une couleur de fond à la Stack | Type | | ------ | | String | ### `radius` Valeur d'arrondi de la stack | Type | Valeur par défaut | | ------ | ----------------- | | Nombre | 0 | ### `card` Transforme la stack en une Carte similaire a une [``](/design/components/list) {% hint style="danger" %} Cette propriété en overwrite d'autres par défaut telles que `backgroundColor` ou `radius`. {% endhint %} | Type | Valeur par défaut | | ------- | ----------------- | | Booléen | false | ### `flat` Désactive les `ombres` lorsque card est actif. | Type | Valeur par défaut | | ------- | ----------------- | | Booléen | false | # List List est un élément conçu pour contenir des [`Item`](/design/components/item) en dehors d'une [`TableFlatList`](/design/components/layouts/tableflatlist). Il permet de concevoir facilement des interfaces sectionnées.

{% hint style="danger" %} Si la vue se compose essentiellement de [`List`](/design/components/list) ou qu'il faut les sectionner, **privilégiez le** [**Layout**](/design/components/layouts) [**`TableFlatList`**](/design/components/layouts/tableflatlist) {% endhint %} ## Usage Pour utiliser List, il suffit de l'importer et d'y mettre du contenu. List applique automatiquement les séparations et le placement des items à l'intérieur. {% hint style="warning" %} List peut contenir autre chose que des Item, **mais cet usage n'est pas recommandé.** {% endhint %} {% columns %} {% column %}

<List>
  {Array.from({ length: 10 }, (_, i) => (
    <Item key={i}>
      <Typography>
        Je suis l'item {i + 1}
      </Typography>
    </Item>
  ))}
</List>

{% endcolumn %} {% column %}

{% endcolumn %} {% endcolumns %} ## Propriétés ### `disablePadding` Supprime le padding appliqué automatiquement aux éléments n'étant pas ``. | Type | Valeur par défaut | | ------- | ----------------- | | Booléen | false | ### `radius` Bordure arrondie de la liste | Type | Valeur par défaut | | ------ | ----------------- | | Nombre | 20 | ### `marginBottom` Marge inférieure appliquée au conteneur de la liste | Type | Valeur par défaut | | ------ | ----------------- | | Nombre | 12 | ### `animated` Si l'élément doit s'animer automatiquement ou non ([Layout Transitions](https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/layout-transitions)) | Type | Valeur par défaut | | ------- | ----------------- | | Booléen | True | ### `entering` Animation d'entrée de la liste ([Reanimated.View](https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/)) | Type | | ------------------------ | | EntryOrExitAnimationType | ### `exiting` Animation de sortie de la liste ([Reanimated.View](https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/)) | Type | | ------------------------ | | EntryOrExitAnimationType | # Item Item est un élément conçu pour être placé dans une [`List`](/design/components/list) ou dans une [`TableFlatList`](/design/components/layouts/tableflatlist). Il permet de concevoir facilement des interfaces sectionnées. **Il remplace l'ancien ``.**

## Fonctionnement Item est un élément **dynamique et intelligent**. Il adapte automatiquement le placement de son contenu selon son type, ce qui lui permet d'être utile pour construire rapidement des interfaces complètes. {% hint style="info" %} Lors des exemples suivants, les Item seront wrappés dans une List, comme ils doivent être utilisés. {% endhint %} ### Texte Pour commencer un Item, on ajoute habituellement un titre et un sous-titre. Pour cela, on va utiliser `` et ses variantes conçues pour Item. {% columns %} {% column width="50%" %}

<List>
  <Item>
    <Typography variant="title">
      Salut tout le monde !
    </Typography>
    <Typography variant="caption">
      Comment ça va ?
    </Typography>
  </Item>
<List>

{% endcolumn %} {% column width="50%" %}

{% endcolumn %} {% endcolumns %} ### Icône Pour ajouter une icône, on va faire appel a l'élément ``. {% columns %} {% column width="50%" %}

<List>
  <Item>
    <Icon papicon>
      <Papicons.Student />
    </Icon>

    <Typography variant="title">
      Salut tout le monde !
    </Typography>
    <Typography variant="caption">
      Comment ça va ?
    </Typography>
  </Item>
</List>

{% endcolumn %} {% column width="50%" %}

{% endcolumn %} {% endcolumns %} ### Trailing `Trailing` est un élément placé en fin d'Item, il peut contenir n'importe quel composant React. {% hint style="success" %} Papillon UI le place et l'espace automatiquement, peu importe sa position dans le code. {% endhint %} {% columns %} {% column width="50%" %}

<List>
  <Item>
    {/* Reste du code */}
    
    <Trailing>
      <Button
        title="Bouton"
        size="small"
        inline
      />
    </Trailing>
  </Item>
</List>

{% endcolumn %} {% column width="50%" %}

{% endcolumn %} {% endcolumns %} ### Leading `Leading` est un élément placé en début d'Item, il peut contenir n'importe quel composant React. {% hint style="success" %} Papillon UI le place et l'espace automatiquement, peu importe sa position dans le code. {% endhint %} {% columns %} {% column width="50%" %}

<List>
  <Item>
    <Leading>
      <Image source={require('@/assets/images/icon.png')} style={{ width: 40, height: 40, borderRadius: 10 }} />
    </Leading>

    {/* Reste du code */}
  </Item>
</List>

{% endcolumn %} {% column width="50%" %}

{% endcolumn %} {% endcolumns %} ## Propriétés ### `onPress` Appelé lorsqu'un appui est enregistré sur l'`Item` | Type | | ----------------------------------- | | ({nativeEvent: PressEvent}) => void | # Icon Icon est un wrapper conçu pour contenir une icône [**Lucide**](https://lucide.dev/icons/) ou une [**Papicon**](https://icons.papillon.bzh/). Celle-ci permet d'avoir d'avantage de contrôle sur l'affichage des icônes.

## Fonctionnement {% tabs %} {% tab title="Avec une Papicon" %}

import * as Papicons from "@getpapillon/papicons"
import Icon from "@/ui/components/Icon";

<Icon papicon>
  <Papicons.Ghost />
</Icon>

{% endtab %} {% tab title="Avec une icône Lucide" %} ```tsx import { Ghost } from "lucide-react-native"; import Icon from "@/ui/components/Icon"; ``` {% endtab %} {% tab title="Avec une Vector Icon" %} ```tsx import { FontAwesome5 } from "@react-native-vector-icons/fontawesome5"; import Icon from "@/ui/components/Icon"; ``` {% endtab %} {% endtabs %} ## Propriétés ### `color` Couleur de fond de l'icône (Ajoute un padding et un fond) | Type | | ------------- | | Couleur (HEX) | ### `fill` Couleur de remplissage de l'icône | Type | Valeur par défaut | | ------------- | ------------------------------------------------- | | Couleur (HEX) | *Couleur du texte selon le thème clair ou sombre* | ### `papicon` A activer si l'icône est une Papicon pour le fonctionnement d'`Icon` {% hint style="warning" %} Cette propriété sera inutile dans une future version des Papicons {% endhint %} | Type | Valeur par défaut | | ------- | ----------------- | | Booléen | false | ### `size` Taille de l'icône | Type | Valeur par défaut | | ------ | ----------------- | | Nombre | 24 | ### `opacity` Opacité de l'icône | Type | Valeur par défaut | | ------ | ----------------- | | Nombre | 1 | # Typography Typography est un remplacement de [Text](https://reactnative.dev/docs/text) qui applique automatiquement le thème et les règles d'interface de Papillon UI sur l'ensemble de l'UI Kit.

## Exemple Cet exemple affiche un titre de la couleur principale. {% columns %} {% column width="58.333333333333336%" %}

<Typography
  variant="h1"
  color="primary"
>
  Lorem ipsum
</Typography>

{% endcolumn %} {% column width="41.666666666666664%" %}

{% endcolumn %} {% endcolumns %}

Note sur les polices pré-installées

En plus des polices préinstallées dans l'OS, Papillon importe [SN Pro](https://supernotes.app/open-source/sn-pro/) sous les noms suivants : * light * regular * medium * semibold * bold

## Propriétés {% hint style="success" %} Typography étend [Text](https://reactnative.dev/docs/text) et dispose de toutes ses propriétés {% endhint %} ### `variant` Style du texte (parmi les variantes disponibles)

Variantes disponibles

* Corps de texte * `body1` * `body2` * Titres * `h1` * `h2` * `h3` * `h4` * `h5` * `h6` * UI * `title` * `caption` * `button` * `navigation`

| Type | Valeur par défaut | | ------ | ----------------- | | String | body1 | ### `color` Couleur du texte (parmi les couleurs par défaut ou custom)

Couleurs de base

* `primary` * `text` * `secondary` * `light` * `danger`

| Type | Valeur par défaut | | ----------------------- | ----------------- | | Couleur (HEX) ou String | text | ### `align` Alignement du texte : * `left` * `center` * `right` | Type | Valeur par défaut | | ------ | ----------------- | | String | left | ### `inline` Indique si le texte ne doit PAS prendre toute la largeur | Type | Valeur par défaut | | ------- | ----------------- | | Booléen | false | ### `nowrap` Empêche le texte de passer sur plusieurs lignes | Type | Valeur par défaut | | ------- | ----------------- | | Booléen | false | ### `weight` Police d'écriture (et non l'épaisseur puisqu'elle ne fonctionne pas sur les fonts custom) | Type | | ------ | | String | # Accueil

Centre d'aide Papillon

Besoin d'aide avec l'appli Papillon ? Nous avons la solution.

{% columns %} {% column %} {% content-ref url="/pages/TwhikRhN5l7uCuFr037f" %} [Se connecter à un service](/support/kb/login) {% endcontent-ref %} {% content-ref url="/pages/HtNewjYA6KrCOpZW9pXS" %} [Langues et régions](/support/kb/languages) {% endcontent-ref %} {% endcolumn %} {% column %} {% content-ref url="/pages/UN0eHr6o24ffHDpp60wx" %} [Bugs, erreurs et plantages](/support/kb/bugs) {% endcontent-ref %} {% content-ref url="/pages/xxMGtERgs1cQjerXF0UH" %} [Moyennes générales](/support/kb/averages) {% endcontent-ref %} {% endcolumn %} {% endcolumns %} ### Découvre nos derniers articles


Questions fréquemment posées	Certaines questions reviennent fréquemment. C'est pourquoi nous avons pris le temps d'y répondre.	/pages/dz2WcEQ6euNAQ7I3ppG8
Les moyennes	Chez Papillon, on sait que ta moyenne est super importante. Mais comment on la calcule ?	/pages/xxMGtERgs1cQjerXF0UH
Bugs, erreurs et plantages	Des changements majeurs sont réguliers et que des bugs et plantages peuvent survenir.	/pages/UN0eHr6o24ffHDpp60wx

Cover image (dark)

Questions fréquemment posées

Certaines questions reviennent fréquemment. C'est pourquoi nous avons pris le temps d'y répondre.

/pages/dz2WcEQ6euNAQ7I3ppG8

Les moyennes

Chez Papillon, on sait que ta moyenne est super importante. Mais comment on la calcule ?

/pages/xxMGtERgs1cQjerXF0UH

Bugs, erreurs et plantages

Des changements majeurs sont réguliers et que des bugs et plantages peuvent survenir.

/pages/UN0eHr6o24ffHDpp60wx

# Se connecter à un service Tu viens d'installer Papillon mais tu te pose la question : **comment me connecter à mon service scolaire ?** Tu va voir, c'est facile ! * [#avec-pronote](#avec-pronote "mention") * [#avec-ecoledirecte](#avec-ecoledirecte "mention") * [#avec-skolengo](#avec-skolengo "mention") *** ## Avec **Pronote** Lors de l'ouverture de l'app, indique que tu es un **collégien**, un **lycéen** ou un **étudiant**. puis sélectionne le service **PRONOTE**. {% hint style="warning" %} **Papillon n'est pas disponible pour les professeurs, la vie scolaire et les parents.** {% endhint %} ### Localisation de l'établissement Pour se connecter, on doit connaître l'établissement dans lequel tu es. Pour cela, un écran apparaît et te propose 3 options : #### Tu indiques le nom de ta ville dans la barre de recherche * Indique le nom de la ville ou se situe ton collège/lycée ou une ville à proximité. Par exemple, tu peux écrire "Montpellier" ou "Saint-Quay-Perros". * Choisis la ville *(et le bon arrondissement le cas échéant)*. * Recherche ton établissement dans la liste une fois choisi. Son nom complet doit apparaître (par exemple "LYCEE GEN. ET TECHNOLOGIQUE SCHRODER" {% hint style="danger" %} ## Que faire si je ne trouve pas mon établissement ? Malheureusement, ce n'est pas nous mais Index Éducation qui maintient la liste des établissements sur Pronote. Si tu ne trouves pas ton collège / lycée, tu peux essayer les autres méthodes ci-dessous. {% endhint %} #### Tu scannes un QR-Code Pronote Depuis Pronote sur ordinateur, tu peux créer un QR-Code a usage unique te permettant de te connecter. Scanne le avec l'option prévue pour te connecter. Ensuite, indique le code à 4 chiffres que tu as crée dans Pronote juste avant. > Une page de Pronote explique tout à ce sujet : #### Tu indiques une URL Pronote Ceci est réservé aux utilisateurs avancés. Tu peux indiquer l'URL de la page Pronote pour accéder directement à sa page de connexion. ### Connexion au compte PRONOTE Une fois l'établissement trouvé, tu n'a plus qu'a indiquer ton identifiant et ton mot de passe, ou à te connecter à ton ENT local si c'est nécessaire. {% hint style="success" %} ## Papillon est compatible avec tous les ENT et avec ÉduConnect Que ça soit Toutatice, Mon ENT occitanie, Paris Classe Numérique, Mon Bureau Numérique, Atrium, ENT Hauts-de-France, et bien d'autres {% endhint %} {% hint style="danger" %} ## Que faire si ça charge à l'infini ? **Ce n'est pas normal.** La connexion ne devrait pas prendre plus de **30 secondes**. Si c'est le cas, quelque chose s'est mal passé. Essaye d'attendre une mise à jour qui pourrait régler le problème (d'ici quelques jours) {% endhint %} *** ## Avec **ÉcoleDirecte** Lors de l'ouverture de l'app, indique que tu es un **collégien** ou un **lycéen**. {% hint style="warning" %} **Papillon n'est pas disponible pour les professeurs, la vie scolaire et les parents.** {% endhint %} Sélectionne le service ÉcoleDirecte. ### Connexion avec des identifiants Indique ton identifiant ainsi que ton mot de passe puis appuie sur l'option permettant de se connecter. *** ## Avec **Skolengo** Lors de l'ouverture de l'app, indique que tu es un **collégien** ou un **lycéen**. {% hint style="warning" %} **Papillon n'est pas disponible pour les professeurs, la vie scolaire et les parents.** {% endhint %} Sélectionne le service Skolengo. ### Localisation de l'établissement Recherche le nom de ton établissement pour le trouver dans la liste. Ceci pemettra de te connecter par la suite. ### Connexion avec des identifiants Indique ton identifiant ainsi que ton mot de passe puis appuie sur l'option permettant de se connecter. # Moyennes générales Chez Papillon, **on sait que ta moyenne est super importante.** Mais comment on la calcule ? C'est un peu un jeu de détective ! Le problème ? Chaque école a sa propre "recette" pour faire les moyennes. Notre solution ? On fait de notre mieux pour l'estimer. Mais c'est pas toujours parfait. À noter que lorsque la moyenne nous est fournie par l'établissement, celle-ci est affichée et l'interface vous l'indique également. *** {% columns fullWidth="false" %} {% column %}

#### **Affichage lorsque la moyenne est fournie par l'établissement** Le chiffre affiché est exactement le même que celui de votre service (Pronote, ÉcoleDirecte, etc.) {% endcolumn %} {% column %}

#### **Affichage lorsque la moyenne n'est pas fournie par l'établissement** Le chiffre affiché est **estimé**. La date affiche le moment du calcul : à la note sélectionnée ou à la plus récente. {% endcolumn %} {% endcolumns %} *** ### Comment estime-t-on les moyennes ? Dans l'application, tu as le choix entre plusieurs algorithmes de calcul. Vous pouvez tous les retrouver [sur le dépôt Git du projet](https://github.com/PapillonApp/Papillon/tree/main/utils/grades/algorithms). {% tabs %} {% tab title="Moyenne des matières" %} > La moyenne des matières est utilisée par défaut car celle ci est utilisée en majorité par les établissements scolaires. **Celle ci calcule la moyenne de chaque matière puis en fait une moyenne générale**. {% hint style="success" %} **C'est la méthode par défaut utilisée par Papillon**. C'est généralement la plus fiable et la plus proche de ta vraie moyenne générale. Cependant, il peut y avoir un écart entre 0.1 pt et un demi-point dans le pire des cas. {% endhint %} D'abord, elle calcule la moyenne de chaque matière. Pour cela, elle convertit toutes les notes sur une base de /20 (par exemple, un 12/15 devient un 16/20) et les multiplie par leur coefficient pour donner plus de poids aux notes importantes. Elle gère également les notes bonus (qui ajoutent des points d'avance) et les notes facultatives (qui sont ignorées si elles font baisser ta moyenne), puis il applique la formule classique : $$ \text{Moyenne} = \left(\frac{\text{Total des points obtenus}}{\text{Total des points possibles}}\right) \times 20 $$ Enfin, il prend toutes les moyennes de matière obtenues et en fait la moyenne arithmétique pour donner ta note générale: $$ \text{Moyenne Générale} = \frac{\text{Moyenne Maths} + \text{Moyenne Français} + \dots}{\text{Nombre de Matières}} $$ {% endtab %} {% tab title="Moyenne pondérée" %} Contrairement à la **moyenne des matières**, la moyenne pondérée ne sépare pas les notes en matières avant d'en calculer la moyenne. Elle calcule l'ensemble des notes indépendamment de leur appartenance à une matière. Ça peut s'apparenter à une **moyenne de notes**.\ \ Il s'agit donc d'une moyenne pondérée classique sur l'ensemble des points : $$ \text{Moyenne} = \left(\frac{\text{Total des points obtenus pondérés}}{\text{Total des points possibles pondérés}}\right) \times 20 $$ {% endtab %} {% tab title="Médiane des matières" %} > La médiane est une autre façon de regarder tes résultats. Contrairement à la moyenne qui peut être complètement faussée par une seule très bonne ou très mauvaise note, **la médiane coupe ton ensemble de notes en deux parties égales**. {% hint style="info" %} La médiane te permet de savoir où tu te situes "au milieu" de tes notes. **Elle peut être bien plus haute ou plus basse que ta moyenne, mais ne reflète pas la moyenne de ton bulletin : c'est un outil pour voir le millieu des notes que tu as eu le plus souvent.** {% endhint %} Pour la calculer, l'application prend toutes tes notes converties sur 20, les trie de la plus petite à la plus grande, et prend la note qui se trouve pile au centre. * Si tu as un nombre impair de notes, c'est la note du milieu : $$\text{Position} = \frac{n + 1}{2}$$ * Si tu as un nombre pair de notes, elle fait la moyenne des deux notes centrales : $$\text{Position} = \frac{n}{2} \text{ et } \frac{n}{2} + 1$$ C'est un excellent outil pour voir ta vraie régularité, sans qu'un accident (un 02/20) ou un exploit (un 20/20) ne vienne masquer le reste de tes efforts ! {% endtab %} {% endtabs %} ### Pourquoi ma moyenne n'est pas la bonne ? On ne connaît malheureusement pas votre moyenne exacte. Si nous sommes en capacité de vous la donner, cela sera affiché juste en dessous de votre moyenne avec la mention "fournie par l'établissement". Sinon, nous faisons de notre mieux pour avoir la note la plus précise possible. # Bugs, erreurs et plantages Papillon est un projet en cours de développement actif. Cela veut dire que des changements majeurs sont réguliers et que des bugs et plantages peuvent survenir. ## Pourquoi mon application plante Bien que nous souhaitons éviter cela à tout prix, cela peut arriver pour de nombreuses raisons :

📑 Crash lors de l'ouverture des pages des cours, notes, devoirs, actualités, vie scolaire

Votre service (Pronote, ÉcoleDirecte, Skolengo, etc.) a envoyé des données incorrectes que l'application n'a pas pu gérer. Cela sera surement réglé dans quelques jours / semaines

❌ Crash à l'ouverture de l'app

Quelque chose s'est mal passé et le code ne fonctionne plus. Essaye de mettre à jour l'app dés que possible ou de désinstaller puis de réinstaller.

## Je vois un message d'erreur Si l'application affiche un message d'erreur, c'est que quelque chose s'est mal passé mais que c'est un cas prévu par l'équipe de développement

🔑 Vous avez été déconnecté

Votre établissement à déconnecté Papillon de votre compte. Si le bouton "Me reconnecter" apparaît une fois après avoir appuyé sur l'erreur, il suffit d'indiquer votre mot de passe à nouveau.

🗺️ Unmatched route ou Page non trouvée

Ce n'est pas de votre faute mais de la notre, un lien de l'application ne doit pas fonctionner correctement

# Langues et régions Papillon est un projet communautaire traduit bénévolement dans plus de 40 langues. ## Comment changer de langue Depuis les Paramètres, ouvre le menu Personnalisation puis sélectionne Langues. Tu peux changer ta langue d'affichage ici. ## Pourquoi je vois des mots en français ou en anglais ? Parfois, la traduction n'est pas complète. Papillon affiche par défaut de l'anglais ou du français si il ne trouve pas le mot dans la langue souhaitée. ## Quelles langues je peux choisir ?

Liste complète des langues

* 🇫🇷 Français * 🇬🇧 Anglais * 🇩🇪 Allemand * 🇪🇸 Espagnol * 🇮🇹 Italien * 🇹🇷 Turc * 🏁 Breton * 🇵🇹 Portugais * 🇯🇵 Japonais * 🇷🇺 Russe * 🇰🇷 Coréen * 🇿🇦 Afrikaans * 🇦🇪 Arabe * 🇬🇷 Grec * 🇮🇳 Hindi * 🇳🇱 Néerlandais * 🇵🇱 Polonais * 🇷🇴 Roumain * 🇦🇱 Albanais * 🇺🇦 Ukrainien * 🇻🇳 Vietnamien * 🇧🇬 Bulgare * 🇧🇩 Bengali * 🇨🇿 Tchèque * 🇩🇰 Danois * 🇫🇮 Finnois * ✡️ Hébreu * 🇭🇺 Hongrois * 🇮🇩 Indonésien * 🇳🇴 Norvégien * 🇸🇰 Slovaque * 🇸🇪 Suédois * 🇹🇭 Thaï * 🇮🇷 Persan * 🇵🇰 Ourdou * 🇲🇾 Malais * 🇹🇿 Swahili * 🇭🇷 Croate * 🇪🇪 Estonien

# Partenaires de Papillon Pour proposer plus de fonctionnalités pertinentes, **Papillon peut faire appel à des partenaires externes** dans le but de fournir un service qui n'est pas maintenu par l'équipe de développement. Lorsque c'est le cas, une mention "fourni par ..." ou "avec ..." est affichée pour permettre l'identification du partenaire concerné. {% columns %} {% column %}

{% endcolumn %} {% column %}

{% endcolumn %} {% endcolumns %} {% hint style="success" %} ## Ces intégrations sont désactivables si vous le souhaitez. Vos données ne sont pas utilisées à des fins de suivi, de tracage publicitaire ou d'analyse en dehors de la politique de confidentialité de Papillon. De la même manière, **aucune donnée personnelle n'est transmise vers l'extérieur** sans votre consentement éclairé. {% endhint %} **Il ne s'agit pas de publicités ou d'intégrations à but lucratif.** Papillon ne gagne pas d'argent avec ces fonctionnalités et celles-ci s'organisent autour d'accords communs avec des entreprises ou des associations fournissant gratuitement un service pour Papillon et sa communauté. ### Cas spéciaux Dans certains cas, comme dans les devoirs avec Knowunity, certaines intégrations peuvent être présentes dans le but d'**évaluer la faisabilité d'une intégration**. Les fonctionnalités proposées ne sont pas immédiatement disponibles et le partenariat peut être amené à évoluer selon les retours de la communauté Papillon. # Questions fréquemment posées Certaines questions reviennent fréquemment. C'est pourquoi nous avons pris le temps d'y répondre. ## **Introduction** Vous êtes nombreux à télécharger Papillon, et ça nous touche vraiment. Cependant, nous recevons régulièrement des questions et des signalements de problèmes. Pour vous aider au mieux, nous avons regroupé les plus fréquents ci-dessous ! 😉

🔐 Mes données sont-elle vraiment en sécurité ?

Papillon est un projet libre et open-source. Pour nous, la sécurité de vos données personnelles est **un sujet essentiel**.\ C'est pourquoi l'application **ne partage aucune donnée avec des tiers** et ne communique jamais avec des services extérieurs à vos services scolaires, ni même avec les serveurs de Papillon. Vos identifiants de connexion ne sont ni conservés ni transmis par l'application, et vos informations ne quittent jamais votre appareil.

👥 Ça veut dire quoi "open-source" ?

Le fait que Papillon soit **open-source** signifie que n'importe qui peut **consulter, vérifier et contribuer** au code de l'application librement. Cela garantit **la sécurité de vos données**, car chacun peut examiner **le code exécuté** sur votre appareil. Vous pouvez consulter le code source sur le dépôt GitHub de Papillon à l'adresse .

🏫 Pourquoi mon établissement n'est pas listé ? (Pronote)

#### Le problème Lorsque vous recherchez votre établissement, il est possible que celui-ci **n'y apparaisse pas**. En effet, certains établissements peuvent choisir de **ne pas apparaître dans l'annuaire fourni par Pronote**. Papillon n'a aucun moyen d'y ajouter un établissement, cet annuaire étant **entièrement** géré par l'entreprise Index Education. #### La solution Pour vous connecter, vous pouvez utiliser la méthode du **QR code** ou celle de l'**URL** de votre établissement.

❓ Pourquoi je ne parviens pas à me connecter en tant que parent/professeur ?

À l'heure actuelle, Papillon ne prend en charge **que les comptes élèves**. Le support d'autres types de comptes pourrait être envisagé à l'avenir.

‍🌍 Pourquoi Papillon n'est pas disponible dans ma région ?

#### Le problème Rendre Papillon disponible dans tous les pays du monde représente un **défi complexe**, car chaque pays possède des politiques différentes en fonction des **lois en vigueur**. À cela s'ajoutent également les restrictions imposées par les **magasins d'application**. Papillon est actuellement disponible dans les pays suivants : **sur iOS :** en France & en Suisse\ **sur Android :** dans le monde entier #### La solution Nous prévoyons d'élargir notre couverture **à l'avenir**, mais cela ne reste pas une priorité pour le moment. N'hésitez pas à suivre **nos actualités** pour être informé des nouveautés.

📞 Comment nous contacter ?

Si vous avez des questions, rencontrez des bugs ou faites face à un problème que vous ne parvenez pas à résoudre, nous sommes là pour vous aider ! Vous pouvez nous contacter sur nos réseaux sociaux : * 🎮 Discord : [Rejoignez le serveur](https://discord.gg/xn3NstgjuT) * 🐦 X (anciennement Twitter) : [@thepapillonapp](https://x.com/thepapillonapp) * 📸 Instagram : [@thepapillonapp](https://www.instagram.com/thepapillonapp) * 🎵 TikTok : [@thepapillonapp](https://www.tiktok.com/@thepapillonapp) * 🏢 LinkedIn : [Voir notre page](https://www.linkedin.com/company/101942566) Vous pouvez également nous envoyer un e-mail à , et nous vous répondrons dans les meilleurs délais !

📱 Sur quels appareils fonctionne Papillon ?

Papillon est disponible sur **Android** à partir de la version **7.0**, ainsi que sur **iPhone** à partir d'**iOS 17.6**. Pour profiter de l'application, assurez-vous que votre appareil est bien à jour.\ \ Papillon est une **application mobile**. Il n'existe pas de version PC ou Mac, pour des raisons techniques. Il faut obligatoirement un appareil Android ou iOS récent pour en profiter.

📶 Avec quels services scolaires Papillon est compatible ?

Papillon fonctionne actuellement avec des services tels que **Pronote**, **EcoleDirecte**, **Turboself** et **Skolengo**. D'autres services comme les **Crous** et divers **ENT régionaux** devraient être supportés prochainement.

💸 Papillon est-il gratuit ?

Oui, Papillon est entièrement **gratuit**. L'application ne contient **aucune** publicité et ne collecte **aucune** donnée personnelle. Elle a été développée par des **élèves** et des **étudiants**, avec le souci de rendre l'expérience aussi simple et pratique que possible.