Pour s'assurer de la maîtrise des concepts fondamentaux du développement d'applications Android, vous développerez une preuve de concept qui vous servira de référence pour le reste de la session.

• Vous devrez créer un répertoire sur Bitbucket et me le partager via l'adresse jhoffman@cshawi.ca
  • Vous utiliserez également une branche distincte identifiant chacune des remises itérative

Interface utilisateur

Créer les écrans suivants en respectant la structure de projet vue en classe.

• Les images ci-dessous 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
• Exploitez judicieusement la séparation en components et l'organisation des fichiers

Login

Signup

Recipe

Librairies suggérées

npx expo install react-native-radio-buttons-group

import { 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>
   );
}

npx expo install @react-native-picker/picker

import { 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>
   );

}

Interactions

À partir des écrans créé précédemment, ajouter la navigation en respectant le storyboard ci-dessous.

• Assurez-vous de respecter votre thème de couleur

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
• Bouton Add ouvre le détail en mode ajout
• Un texte affiche le tableau de recettes brutes en string, JSON.stringify(...)
• 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

Détail d'une recette

Permet d'ajouter une nouvelle recette ou de consulter 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
• Le bouton Delete est disponible en consultation 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 via la navigation
  • La liste se mets à jour

Structure d'une recette

{
    category: Int,
    name: String,
    durationHours: Int,
    durationMinutes: Int,
    description: String
}

Liste

Ajouter l'affichage des recettes en utilisant un mécanisme de liste optimal en considérant les aspects suivants:

• Liste triée par nom, ascendant
  • 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 XhY
  • 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.

Liste vide

Liste

Clic

HTTP

Implémenter les fonctionnalités d'authentification et CRUDL des recettes via l'API HTTP Martha à partir des fichiers fournis précédemment.

• 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

Critères d’évaluation

10% / 38

Nom: ____________________________________