Android Natif - Anthony Da Cruz

Historique des Commandes
🧠 Notions
🎯 Objectif
1. Couche modèle
✅ Complétez les tâches suivantes
2. Développement de l’UI
✅ Complétez les tâches suivantes
🛟 Aide
✅ Critères de Validation

Historique des Commandes

Pour ce début de projet, nous allons nous concentrer sur l’affichage d’une liste de commandes passées par l’utilisateur.

🧠 Notions

Ce premier exercice commence en douceur, il va vous permettre de vous familiariser avec Compose et de comprendre comment fonctionne la création d’écran et de composants.

Création de modèles de données
Affichage d’une UI simple avec Compose
Utilisation de composants Material Design

🎯 Objectif

Voici l’UI que nous allons développer :

🚧 Pour le moment

On ne travaille pas avec l’API, on va juste créer une liste de commandes en dur pour simuler l’affichage.
Pour l’instant ne vous souciez pas du thème de l’application, nous allons nous concentrer sur la structure de l’application.

1. Couche modèle

La première chose à bien comprendre dans un framework comme Compose, c’est que l’interface utilisateur est un reflet de l’état des données de l’application.

On commence donc par faire les modèles

✅ Complétez les tâches suivantes

Cela va nous permettre mettre en place les données nécessaires à l’affichage de la liste des commandes.

À Faire	Fichier	Documentation
Créer une `data class` `Order`	`model/Order.kt`	Kotlin data classes
Créer également les sous-classes nécessaires	`model/{DataClassName}.kt`	Kotlin data classes
Créer une variable `orders` (mock) contenant une liste d’`Order` d’exemple	`data/Orders.kt`	Kotlin collections
🆙 Respecter les champs `Date` pour les dates	`model/{DataClassName}.kt`	Simple Date Format

Pour ça vous pouvez utiliser ce JSON d’exemple pour construire vos objets Order, Ingredient, etc.

🆙 Hey Oh !

Pensez à utiliser QuickType.io pour transformer une structure JSON en data class Kotlin

🆙 Hey Oh 2 !

Essayez également de comprendre et commenter les champs de la structure JSON ci-dessous, pour mieux saisir les rôles et l’imbrication des modèles entre-eux.

Json de la structure de donnée

json

{
	"id": 3,
	"documentId": "xh37i6xd42rfv2qijl57mjgj",
	"placedAt": "2024-11-10T10:45:00.000Z",
	"receivedAt": "2024-11-10T11:00:00.000Z",
	"cookMessage": "Avec maaaaassse Oignons caramélisés please",
	"price": 12,
	"progress": 100,
	"createdAt": "2024-11-10T17:16:14.881Z",
	"updatedAt": "2024-11-11T14:29:34.659Z",
	"publishedAt": "2024-11-11T14:29:34.787Z",
	"ingredients": [
		{
			"id": 48,
			"documentId": "emqcpowwchz5ync8yri10g1e",
			"name": "Chou rouge mariné",
			"Description": "Croquant et acidulé, il donne un twist coloré et savoureux à chaque bouchée.",
			"isVegan": true,
			"isSpicy": false,
			"Kind": "topping",
			"createdAt": "2024-11-04T19:53:38.633Z",
			"updatedAt": "2024-11-04T20:20:30.657Z",
			"publishedAt": "2024-11-04T20:20:30.755Z"
		},
		{
			"id": 9,
			"documentId": "lc8a81ogo9x4qkrji2jny7c5",
			"name": "Jambon Cru",
			"Description": "Raffiné et savoureux, avec une touche de sel et de caractère, ce jambon cru relève chaque bouchée avec un charme méditerranéen.",
			"isVegan": null,
			"isSpicy": null,
			"Kind": "main",
			"createdAt": "2024-11-04T19:36:38.209Z",
			"updatedAt": "2024-11-04T19:36:38.209Z",
			"publishedAt": "2024-11-04T19:36:38.294Z"
		},
		{
			"id": 54,
			"documentId": "x2p6w1juycux47d3lpgrmxqe",
			"name": "Oignons caramélisés",
			"Description": "Doux et sucrés, ils apportent une touche de gourmandise et un parfum irrésistible.",
			"isVegan": true,
			"isSpicy": false,
			"Kind": "topping",
			"createdAt": "2024-11-04T19:45:26.858Z",
			"updatedAt": "2024-11-04T20:22:18.097Z",
			"publishedAt": "2024-11-04T20:22:18.181Z"
		},
		{
			"id": 56,
			"documentId": "k8f12xmyxlkhibobf86pos77",
			"name": "Pain Ciabatta",
			"Description": "Léger et aéré avec une croûte légèrement croustillante, idéal pour un sandwich méditerranéen.",
			"isVegan": true,
			"isSpicy": false,
			"Kind": "bread",
			"createdAt": "2024-11-04T20:00:05.268Z",
			"updatedAt": "2024-11-04T20:22:43.618Z",
			"publishedAt": "2024-11-04T20:22:43.726Z"
		}
	],
	"users_permissions_user": {
		"id": 1,
		"documentId": "vpfsc4adv76ynm2pqu5sm6i9",
		"username": "campus",
		"email": "campus@numerique.fr",
		"provider": "local",
		"confirmed": true,
		"blocked": false,
		"createdAt": "2024-11-10T17:04:20.222Z",
		"updatedAt": "2024-11-10T17:16:26.813Z",
		"publishedAt": "2024-11-10T17:16:26.664Z"
	},
	"store": {
		"id": 2,
		"documentId": "gy0rgplj9kw945qydeaamjvd",
		"Name": "Dwitch Bonlieu ",
		"isOpen": false,
		"city": "Annecy",
		"zipCode": "74000",
		"createdAt": "2024-11-10T14:07:03.541Z",
		"updatedAt": "2024-11-10T14:07:03.541Z",
		"publishedAt": "2024-11-10T14:07:03.690Z"
	}
}

2. Développement de l’UI

Nous allons développer cette interface grâce aux modèles.

✅ Complétez les tâches suivantes

À Créer	Description
Un composant `OrderList`	Permettant de boucler sur des `OrderItem`
Un composant `OrderItem`	Permettant d’afficher une commande comme sur la maquette
La liste des commandes est affichée	Utilisez un `LazyColumn` pour afficher la liste des commandes.
La structure de la page correspond à la maquette	Utilisez un `Scaffold` pour la structure de la page.
La barre de navigation est affichée	Utilisez un `TopAppBar` pour la barre de navigation.
Les éléments sont organisés	Utilisez `Row` et `Column` pour organiser les éléments.
Les dates sont affichées comme sur la maquette	Utilisez `Text` pour afficher du texte, les dates doivent être des objets Date
Chaque type d’ingrédient à une couleur et un émoji	Utilisez les enums et les extensions pour les émojis et les couleurs des ingrédients

🛟 Aide

Pour cela vous devrez utiliser les composants suivants du Material Design :

Scaffold pour la structure de la page
TopAppBar pour la barre de navigation
LazyColumn pour afficher la liste des commandes
LazyRow pour afficher les ingrédients
Row et Column pour organiser les éléments
Icon | IconButton pour afficher des icônes
Text pour afficher du texte
Card ou Surface pour mettre en forme les éléments avec des ombres
LinearProgressIndicator pour afficher une barre de progression

Attention, les ingrédients sont scrollables horizontalement :

📱 Pour l’UI : Utilisez la BIBLE pour vous aider

📚 Bibliothèque de composants Material pour Compose

🖼️ Pour les icones

Lisez l’aide dans les ressources à propos des icônes

📆 Pour les dates

Faites en sortes de créer une extension Kotlin à l’objet Date pour formater la date en fonction de la locale de l’utilisateur. Je dois pouvoir formatter mes dates en utilisants maVariableDeTypeDate.toDateString().

🎨 Pour les couleurs / emojis

Il faut que vous n’ayez qu’a appeler ce genre de code ingredient.color() ou ingredient.emoji() pour obtenir la couleur ou l’emoji de l’ingrédient.

🧮 Pour les compteurs

Il faut que vous n’ayez qu’a utiliser order.getToppingCount(), order.getMainCount() etc., pour obtenir le nombre de toppings dans une commande.

✅ Critères de Validation

Critère	Validation
Le tutoriel Hello World officiel a été suivi	⬜
La liste s’affiche correctement	⬜
Le scroll fonctionne	⬜
Le code suit les conventions Kotlin	⬜
Les composants sont réutilisables	⬜

Une fois ces critères validés, vous pouvez passer à la suite.

Projet Dwitch Historique Réseau

Android Natif - Anthony Da Cruz

# Historique des Commandes

#🧠 Notions

#🎯 Objectif

#1. Couche modèle

#✅ Complétez les tâches suivantes

#2. Développement de l’UI

#✅ Complétez les tâches suivantes

#🛟 Aide

#✅ Critères de Validation

Historique des Commandes

🧠 Notions

🎯 Objectif

1. Couche modèle

✅ Complétez les tâches suivantes

2. Développement de l’UI

✅ Complétez les tâches suivantes

🛟 Aide

✅ Critères de Validation