Ecole Supérieur Française

Keyce Informatique & Intelligence Artificielle

Projet Final de Développement Mobile

Hybride - Bachelor 2
Table des matières
Synopsis : .......................................................................................................................................... 3
Objectif : ........................................................................................................................................... 3
Première Phase du Projet : Développement des Interfaces avec React Native .............................. 3
Écran de Signup (Inscription) ........................................................................................................ 3
Écran de Signin (Connexion) ......................................................................................................... 3
Page Principale (Accueil)............................................................................................................... 4
Page de Recherche ....................................................................................................................... 4
Page de Publication ...................................................................................................................... 4
Page Short (Optionnel) ................................................................................................................. 5
Page Profil ..................................................................................................................................... 5
Recommandations Générales....................................................................................................... 5
Deuxième Phase du Projet : Intégration avec Firebase et Gestion des Données avec Context API 5
Authentification des Utilisateurs (Signup et Signin) ..................................................................... 5
Gestion des Données (CRUD pour les Ressources) ...................................................................... 6
Upload et Stockage des Fichiers (Publications) ............................................................................ 6
Recherche et Tri des Publications ................................................................................................ 6
Gestion des Données avec Context API ........................................................................................... 7
Objectif ......................................................................................................................................... 7
Tâches à réaliser : ......................................................................................................................... 7
Outils recommandés :................................................................................................................... 7
Recommandations Générales....................................................................................................... 7
Astuces Générales : .......................................................................................................................... 7
Commencez Petit .......................................................................................................................... 7
Réutilisation du Code.................................................................................................................... 7
Versionnez Votre Travail .............................................................................................................. 8
Ecole Supérieur Française
Keyce Informatique & Intelligence Artificielle
Ressources Utiles .......................................................................................................................... 8
Astuces pour l'Utilisation Consciente des LLM (Large Language Models : chatgpt/bard) ........... 8
1. Comprendre plutôt que Copier-Coller : ............................................................................... 8
2. Validation et Tests : .............................................................................................................. 8
3. Éviter la Plagiat : ................................................................................................................... 8
Encouragement de la Collaboration ............................................................................................. 8
1. Travail d'Équipe : .................................................................................................................. 8
2. Revue de Code : .................................................................................................................... 9
3. Partage des Connaissances : ................................................................................................ 9
Délai : 6h à la date de la dernière séances de cours. ....................................................................... 9
Évaluation ......................................................................................................................................... 9
Ecole Supérieur Française
Keyce Informatique & Intelligence Artificielle

Synopsis :
Dans le cadre du cours de développement d'applications mobiles avec React Native pour les
étudiants en Bachelor 2, un projet de création d'une application similaire à TikTok est proposé.
Cette application version simplifiée, intégrée à Firebase, permettra aux utilisateurs de s'inscrire,
de se connecter, de visionner, de rechercher et de poster des vidéos, photos ou textes.
L'application comportera une navigation par onglets en bas de l'écran, incluant les sections
principales telles que l'accueil, la recherche, la publication de contenu, et le profil utilisateur.

Objectif :

L'objectif du projet est de mettre en pratique les compétences acquises en développement

d'applications mobiles en utilisant React Native et Firebase. Les étudiants seront amenés à créer
une application fonctionnelle en deux phases : la première consacrée à la conception et au
développement des interfaces utilisateur, et la seconde à l'intégration avec Firebase pour gérer
l'authentification, la base de données et le stockage.

Première Phase du Projet : Développement des Interfaces avec React

Native
La première phase se concentre sur la création des écrans principaux de l'application et leur
interconnexion via une navigation par onglets. Voici un guide détaillé pour chaque écran,
incluant des recommandations de paquets ou d'outils appropriés.

Écran de Signup (Inscription)

❖ Objectif : Permettre aux nouveaux utilisateurs de créer un compte.

❖ Éléments clés :
o Champs de formulaire pour l'email, le mot de passe, la confirmation du mot de
passe, et éventuellement le nom d'utilisateur.
o Bouton de soumission du formulaire.
❖ Outils recommandés :
❖ react-native-paper pour des composants d'interface utilisateur élégants et cohérents.
❖ (React hook forms ou formik) et yup pour la gestion des formulaires et la validation des
données.

Écran de Signin (Connexion)

❖ Objectif : Permettre aux utilisateurs existants de se connecter à leur compte.

❖ Éléments clés :
Ecole Supérieur Française
Keyce Informatique & Intelligence Artificielle
o Champs de formulaire pour l'email et le mot de passe.
o Bouton de connexion.
❖ Outils recommandés : Utilisez les mêmes outils que pour l'écran de Signup pour une
cohérence de l'interface utilisateur.

Page Principale (Accueil)

❖ Objectif : Afficher les vidéos récentes postées par les utilisateurs.

❖ Éléments clés :
o Liste ou grille de vidéos avec miniatures.
o Option de rafraîchissement pour voir les nouvelles publications.
o Sur chaque publication on doit pouvoir :
▪ Liker
▪ Partager (react-native-share)
▪ Commenter
▪ Lire si videos
❖ Outils recommandés : react-native-flatlist pour afficher une liste scrollable de contenus.

Page de Recherche

❖ Objectif : Permettre aux utilisateurs de rechercher des vidéos.

❖ Éléments clés :
o Barre de recherche pour saisir les critères (nom, auteur, etc.).
o Filtres pour trier les résultats (nombre de vues, commentaires, etc.).
❖ Outils recommandés : react-native-searchbar pour intégrer une barre de recherche
fonctionnelle.

Page de Publication

❖ Objectif : Offrir une interface pour poster de nouveaux contenus.

❖ Éléments clés :
o Formulaire de publication avec options pour uploader des vidéos, photos ou
saisir du texte.
o Sélecteur pour le type de publication (normal/short).
❖ Outils recommandés :
o react-native-image-picker pour permettre aux utilisateurs de sélectionner des
images ou vidéos depuis leur appareil.
o react-native-modal-selector pour choisir le type de publication.
Ecole Supérieur Française
Keyce Informatique & Intelligence Artificielle
Page Short (Optionnel)

❖ Objectif : Permettre la publication de contenus éphémères.

❖ Éléments clés : Mécanisme d'expiration automatique des posts après 2 minutes.
❖ Outils recommandés : Gestion côté serveur via Firebase pour contrôler l'expiration des
contenus.

Page Profil

❖ Objectif : Afficher les informations et publications de l'utilisateur.

❖ Éléments clés :
o Informations de l'utilisateur (nom, email, etc.).
o Liste des publications de l'utilisateur.
❖ Outils recommandés : react-native-paper pour créer une interface utilisateur riche pour
le profil.

Recommandations Générales
❖ React Navigation pour la gestion de la navigation par onglets. Utilisez @react-
navigation/bottom-tabs pour créer une barre de navigation en bas.
❖ Firebase comme backend pour gérer l'authentification et le stockage des données.
Utilisez @react-native-firebase/app pour intégrer Firebase avec votre application React
Native.
❖ Design et UX : Bien que l'accent soit mis sur la fonctionnalité, veillez à suivre les principes
de base du design d'interface pour une expérience utilisateur optimale.
PS : La première phase du projet doit se concentrer sur l'implémentation robuste de ces écrans
et la navigation fluide entre eux. L'intégration avec Firebase sera abordée dans la seconde
phase.

Deuxième Phase du Projet : Intégration avec Firebase et Gestion des

Données avec Context API

Après avoir développé les interfaces utilisateur, la deuxième phase se concentre sur
l'intégration avec Firebase pour ajouter des fonctionnalités dynamiques et l'utilisation de
Context API pour une gestion centralisée des données au sein de l'application React Native.

Authentification des Utilisateurs (Signup et Signin)

❖ Objectif : Implémenter l'inscription et la connexion sécurisées avec Firebase
Authentication.
Ecole Supérieur Française
Keyce Informatique & Intelligence Artificielle
❖ Tâches à réaliser :
o Intégrer Firebase Authentication pour permettre la création de comptes et la
connexion.
o Stocker les tokens JWT pour gérer la session utilisateur.
❖ Outils recommandés : @react-native-firebase/auth pour l'intégration avec Firebase
Authentication.

Gestion des Données (CRUD pour les Ressources)

❖ Objectif : Implémenter les opérations CRUD pour les ressources (tasks, categories,
projects, users, reservations, rooms, equipment, stations) en utilisant Firebase Firestore.
❖ Tâches à réaliser :
o Configurer et utiliser Firestore pour stocker et gérer les données de l'application.
o Créer des fonctions CRUD spécifiques pour chaque ressource, assurant une
interaction fluide avec la base de données.
❖ Outils recommandés : @react-native-firebase/firestore pour accéder à Firestore.

Upload et Stockage des Fichiers (Publications)

❖ Objectif : Permettre aux utilisateurs de télécharger et gérer des fichiers dans Firebase
Storage.
❖ Tâches à réaliser :
o Configurer Firebase Storage pour stocker des fichiers téléchargés (photos,
vidéos).
o Implémenter une fonctionnalité d'upload dans l'application qui interagit avec
Firebase Storage.
❖ Outils recommandés : @react-native-firebase/storage pour l'intégration avec Firebase
Storage.

Recherche et Tri des Publications

❖ Objectif : Offrir des fonctionnalités de recherche et de tri pour les publications en
utilisant Firestore.
❖ Tâches à réaliser :
o Implémenter des requêtes de recherche dans Firestore basées sur les critères
fournis (nom, auteur, etc.).
o Ajouter des options de tri pour organiser les résultats de recherche par
popularité ou date.
Ecole Supérieur Française
Keyce Informatique & Intelligence Artificielle
Gestion des Données avec Context API
Objectif
Utiliser Context API pour gérer l'état global de l'application, facilitant ainsi le partage des
données entre différents composants.

Tâches à réaliser :

❖ Créer un contexte global pour stocker les données utilisateur et l'état de l'application
(par exemple, l'utilisateur connecté, les données des publications).
❖ Utiliser useContext pour accéder et modifier l'état global dans les composants.
❖ Mettre en place des providers autour de l'arbre de composants pour injecter le contexte.

Outils recommandés :
React Context API intégré pour la gestion de l'état.

Recommandations Générales
❖ Organisation du Code : Structurez votre projet de manière claire, en séparant la logique
des composants, des services (accès à Firebase) et du contexte.
❖ Tests : Effectuez des tests réguliers lors de l'intégration avec Firebase pour vous assurer
que les données sont correctement gérées et sécurisées.
❖ Optimisation des Performances : Soyez attentif à la structure des données et aux
requêtes Firestore pour optimiser les performances et réduire les coûts.
❖ Utilisation de Context API : Exploitez Context API pour réduire le prop-drilling et
améliorer la gestion de l'état global, en gardant à l'esprit les performances et la
réactivité de l'application.
En intégrant Firebase pour la persistance des données et en utilisant Context API pour une
gestion centralisée de l'état, vous créerez une application robuste et efficace. Cette phase
mettra en pratique les compétences acquises en matière de développement d'applications
mobiles avec React Native, en se concentrant sur la fonctionnalité plutôt que sur le design.

Astuces Générales :

Commencez Petit
Concentrez-vous d'abord sur la mise en place d'une fonctionnalité basique et évoluez
progressivement. Par exemple, commencez par l'authentification avant de passer à des
fonctionnalités plus complexes.

Réutilisation du Code
Cherchez des moyens de réutiliser les composants pour différents écrans ou fonctionnalités.
Cela vous fera gagner du temps et maintiendra votre code organisé.
Ecole Supérieur Française
Keyce Informatique & Intelligence Artificielle
Versionnez Votre Travail
Utilisez Git dès le début pour garder une trace de vos progrès et faciliter la collaboration au sein
de votre équipe.

Ressources Utiles

❖ Documentation Officielle : La documentation officielle de React Native, Firebase, et

toute autre bibliothèque utilisée est votre meilleure alliée. Elle est souvent
accompagnée d'exemples de code et de meilleures pratiques.
❖ Tutoriels en Ligne : De nombreux tutoriels et vidéos sont disponibles gratuitement en
ligne. Sites comme YouTube, Medium, et StackOverflow sont d'excellentes ressources
pour trouver des solutions aux problèmes courants.
❖ Recherchez des tutoriels spécifiques pour React Native et Firebase pour des guides pas à
pas.
❖ Cours en Ligne : Plateformes comme Udemy, Coursera, et freeCodeCamp offrent des
cours qui peuvent vous aider à renforcer vos compétences en React Native et Firebase.
❖ Communautés et Forums : Rejoindre des communautés de développeurs sur des
plateformes telles que Reddit, Discord, ou des groupes Facebook peut être très
bénéfique pour obtenir des conseils et partager des connaissances.

Astuces pour l'Utilisation Consciente des LLM (Large Language Models : chatgpt/bard)

1. Comprendre plutôt que Copier-Coller :

Utilisez les LLM pour obtenir des explications, des clarifications ou des exemples de code. Plutôt
que de copier-coller directement le code dans votre projet, essayez de comprendre la logique
derrière. Cela renforcera votre apprentissage et vous permettra de personnaliser la solution en
fonction de vos besoins spécifiques.
2. Validation et Tests :
Même si un morceau de code provenant d'un LLM semble répondre à votre besoin, il est crucial
de le tester et de le valider dans le contexte de votre projet. Cela inclut la vérification des
performances, de la sécurité et de la compatibilité avec votre base de code existante.
3. Éviter la Plagiat :
Soyez conscient des problèmes de plagiat et de droits d'auteur. Utiliser des LLM pour générer
des idées ou des bouts de code est utile, mais vous devez toujours veiller à produire un travail
original ou à citer correctement les sources, le cas échéant.

Encouragement de la Collaboration
1. Travail d'Équipe :
Ecole Supérieur Française
Keyce Informatique & Intelligence Artificielle
Discutez des solutions générées par les LLM avec vos camarades ou aînés. Cela peut ouvrir des
discussions intéressantes, vous apporter de nouvelles perspectives et améliorer la solution
finale.
2. Revue de Code :
Organisez des séances de revue de code entre camarades pour examiner le code proposé par
les LLM. Cela aide non seulement à repérer les erreurs ou les points d'amélioration mais
renforce également les compétences de débogage et de critique constructive.
3. Partage des Connaissances :
Si vous trouvez une solution particulièrement élégante ou une explication utile via un LLM,
partagez-la avec vos camarades ou lors de séances de travail en groupe. Cela peut enrichir
l'expérience d'apprentissage collective.

Délai : 6h à la date de la dernière séances de cours.

Évaluation
Les projets seront évalués sur la qualité et la pertinence des livrables, l'efficacité de la
communication entre camarades.