L'application Recipeasy sera développée de façon itérative au fil de notre apprentissage de React Native.
- Créez un répertoire pour le projet sur GitHub et me le partager via l'adresse
jhoffman@cshawi.ca- Le code de l'application doit se trouver à la racine du répertoire
- Vous utiliserez également une branche distincte identifiant chacune des remises itérative. Seul le code sur la branche précisée sera considéré pour la correction.
- Chaque itération devrait être constituée de plusieurs commits, représentant une unité fonctionnelle dans la réalisation de l'itération en cours
- Chaque itération devra être présentée AVANT la date limite de remise précisée au calendrier
1- Interface utilisateur
Les prototypes d'écrans représentent une maquette, donc vous pouvez utiliser des couleurs différentes ou une librairie de composants différente sans changer la mise en forme significativement
- Exploitez judicieusement la séparation en components et l'organisation des fichiers
- Assurez-vous d'implémenter les Safe Areas, pour éviter de masquer le contenu
Pour cette première itération, implémentez seulement le contenu statique des écrans suivants:
Librairies suggérées
Boutons radio
📚 RN Radio Buttons Groupnpx expo install react-native-radio-buttons-groupimport { View } from 'react-native';
import RadioGroup from 'react-native-radio-buttons-group';
export default function App() {
const options = [
{
id: '1',
label: 'One',
value: '1'
},
{
id: '2',
label: 'Two',
value: '2'
}
];
return (
<View>
<RadioGroup radioButtons={ options } />
</View>
);
}Liste déroulante
📚 Expo Pickernpx expo install @react-native-picker/pickerimport { View } from 'react-native';
import { Picker } from '@react-native-picker/picker';
export default function App() {
return (
<View>
<Picker>
<Picker.Item label="One" value="1" />
<Picker.Item label="Two" value="2" />
</Picker>
</View>
);
}Développement d'applications mobiles
Nom
GitHub, Branche remise-ui |
1 0 |
| Appréciation générale | |
| UI | 0 -0.5 -1 |
| Code | 0 -0.5 -1 |
| Écrans | |
| Connexion | 2 1.5 1 0 |
| Inscription | 2 1.5 1 0 |
| Formulaire de recette | 3 2.5 2 1 0 |
2- Interactions
À partir des écrans créés précédemment, ajouter la navigation en respectant le storyboard
- Assurez-vous de respecter votre thème de couleur
Comportement minimal
Liste des recettes
Pour nous permettre de continuer le développement, nous créons un écran provisoire pour afficher la liste des recettes. À court-terme, cet écran est responsable de stocker la liste des recettes et d'offrir des interactions de base.
- Bouton View ouvre le détail d'une recette aléatoire de la liste
- Attention si la liste est vide...
- Bouton Add ouvre le détail en mode ajout
- Un texte affiche le tableau de recettes brutes en string,
JSON.stringify(...)- Triée par nom, en ordre croissant
- On ajoute un bouton Log out dans la barre de navigation qui retourne au login
- L'option back de la barre de navigation est désactivée
Formulaire d'une recette
Permet d'ajouter une nouvelle recette ou de consulter en édition une recette existante reçue en paramètre de navigation.
- Pour la création, les données doivent être valides
- Catégorie requise
- Nom requis, non vide
- Durée > 0, Heures 0 à 12, Minutes 0 à 59
- Le bouton Delete est disponible en édition uniquement et retourne simplement à la liste
- PAS de suppression à implémenter
- Le bouton Save est disponible en ajout uniquement et retourne la nouvelle recette à la liste
- La liste se mets à jour
- PAS d'édition à implémenter
{
category: Number,
name: String,
durationHours: Number,
durationMinutes: Number,
description: String
}Librairie suggérée
Développement d'applications mobiles
Interactions - 1.5%
/ 13
Nom
Branche remise-ux, commits |
1 0.5 0 |
| Appréciation générale | |
| Correctifs |
0 -0.25 -0.5 -0.75 -1 |
| UI | 0 -0.5 -1 |
| UX | 0 -0.5 -1 |
| Code | 0 -0.5 -1 |
| Navigation | |
| Login, Signup | 1 0.5 0 |
| Log out, back caché | 1 0.5 0 |
| Liste, Ajout/Édition | 2 1.5 1 0 |
| Comportement | |
| Liste brute, trié par nom ascendant, se mets à jour | 2 1.5 1 0 |
| Ajout, validations | 2 1.5 1 0 |
| Édition, recette aléatoire, données cohérentes | 2 1.5 1 0 |
| Boutons Save, Delete | 2 1.5 1 0 |
3- Liste
Ajouter l'affichage des recettes en utilisant un mécanisme de liste optimal en considérant les aspects suivants:
- Affichage d'un message si la liste est vide
- Affichage d'un séparateur
- Chaque item de la liste affiche
- une icône pour la catégorie
- la durée formatée en heures-minutes
XhYY - le nom
- la description
- Item cliquable, avec une rétroaction visuelle, qui amène au détail correspondant
- Mise à jour de la liste lors d'un ajout
Penser également à créer manuellement des recettes de départ, seeds, pour tester votre affichage.
Développement d'applications mobiles
Liste - 1%
/ 10
Nom
Branche remise-liste, commits |
1 0.5 0 |
| Appréciation générale | |
| Correctifs |
0 -0.25 -0.5 -0.75 -1 |
| UI | 0 -0.5 -1 |
| UX | 0 -0.5 -1 |
| Code | 0 -0.5 -1 |
| Liste | |
| Mécanisme optimal | 1 0 |
| Seeds | 1 0.5 0 |
| Liste vide | 1 0.5 0 |
| Item: icône, durée formatée, nom, description | 2 1.5 1 0 |
| Séparateur | 1 0.5 0 |
| Item clic, rétroaction, navigue vers le détail correspondant | 2 1.5 1 0 |
| Mise à jour | 1 0.5 0 |
4- Modèles et HTTP
Implémenter les fonctionnalités d'authentification et CRUDL des recettes via l'API HTTP Martha à partir des fichiers fournis.
- Mettre à jour l'écran Recipe pour afficher un bouton Save en édition
- Exploiter judicieusement les services et les models pour traiter les données
- Ajouter la gestion d'erreurs dans la communication HTTP
Développement d'applications mobiles
Nom
Branche remise-http, commits |
1 0.5 0 |
| Appréciation générale | |
| Correctifs |
0 -0.25 -0.5 -0.75 -1 |
| UI | 0 -0.5 -1 |
| UX | 0 -0.5 -1 |
| Code | 0 -0.5 -1 |
| HTTP | |
| Authentification via Martha | 0 -1 |
| C R U D L des recettes via Martha | 4 3.5 3 2 1 0 |
| Gestion des erreurs | 1 0.5 0 |
| Séparation judicieuse des responsabilités components, services, models | 3 2.5 2 1 0 |