5.4 KiB
PROJET 🚧
Pas de temps à perdre, commençons dès aujourd'hui à travailler sur l'accompagnement du projet. Pour celà, commençons par découvrir le cahier des charges du projet.
1 🚀 KICKSTART
1.1 Mettez vous par groupe
Renseignez ce fichier Google Sheets avec le nom des étudiants de votre groupe
1.2 Créez votre projet
Rappel de la commande : npx create-expo-app HabitsTracker --template (vous pouvez choisir un autre nom)
Choisissez une application blank
1.3 GitLab
- Ajoutez ce projet sur le Gitlab de l'université
- Ajoutez les profs (@joeybronner et @g.baldi) en tant que "Reporter"
- Ajoutez tous les membres de votre groupe au projet
2 📱 DESIGN
2.1 Wireframes
Hep hep hep, avant de commencer à coder, prenez le temps de créer vos Wireframes (c'est quoi ?). Vous pouvez utiliser une feuille et un crayon, mais je recommande l'utilisation de l'outil Whimsical pour la création de ces interfaces.
- Inscrivez vous sur https://whimsical.com
- Invitez les autres membres de votre groupe à collaborer
- Créez un nouveau Wireframe (logo carré violet en haut)
- Déssinez les écrans et leur enchainement (Splashscreen -> Login -> Home -> ...)
- Invitez le prof à voir vos wireframes (joeybronner@gmail.com)
4 🏗 BUILD
A vos claviers !!
Pour ces deux dernières heures et la mise en place des composants essentiels du projet, je vous recommande de faire du pair programming.
4.1 Structure du projet
Mettez-vous d'accord sur la structure et l'architecture du projet ⤵
🔗 Google Slide | Bien structurer son projet
!! C'est important pour la suite et pour la maintenance du projet. !!
4.2 SplashScreen (optionnel mais recommandé =))
Un Splashscreen est toujours plus élégant qu'un écran de lancement "tout moche", et en plus vous pouvez vous en servir pour charger des dépendances externes (fonts, check et initialisation serveur, etc...) ⤵
4.3 Navigation
Implémentez le type de navigation que vous préférez et qui (d'après-vous) correspond le mieux à ce projet ⤵
Pour rappel, la librairie est React Native Navigation et les 3 types de navigations sont :
- Stack (à implémenter forcément)
- Drawer
- Tabs
4.4 Ecran de login
Si l'API n'est pas encore prête, implémentez un écran de login fictif avec les champs "username", "password" et un bouton "se connecter".
Le bouton "se connecter" ferait donc pour le moment une simple redirection vers l'écran d'accueil en attendant l'implémentation réelle du login/password (quand l'API sera prête)
Quelques liens utiles pour comprendre... :
- Github | react-native-expo-auth
- Authentication in React Native, Easy, Secure, and Reusable solution.
- How To Add Authentication to Your React Native App
- Github | mesan-react-native-authentication-app
- React Native: Implementing Browser-Based Authentication using Expo's AuthSession Component
- Build a great login experience with React Native, Axios and JSONWebToken
- Adding Authentication to Your React Native App Using JSON Web Tokens
⚠️ Aucun de ces projets ci-dessus est considéré comme LA MARCHE à suivre, c'est simplement pour vous inspirer et comprendre l'implémentation de l'authentification en React Native.
4.5 UI Framework ? (optionnel)
Tous les développeurs n'ont pas la touche "design", c'est un fait. Et si vous utilisiez un framework UI qui vous facilitera la vie et rendra votre application un peu plus jolie ?
Je recommande les librairies de composants suivantes :
N'hésitez pas à ajouter un de ceux-là (ou un autre) à votre projet et à en utiliser les composants.
N'oubliez pas de faire des commits réguliers à la fin de chaque séance pour éviter les conflits Git.