1. Avant de commencer
Dans ce parcours, vous avez appris à ajouter un bouton à une application et à modifier celle-ci pour répondre à un clic sur un bouton. L'heure est venue de mettre en pratique ce que vous avez appris en créant une application.
Vous créerez une application appelée Lemonade. Commencez par lire les conditions requises afin de déterminer l'apparence et le comportement qu'elle devra avoir. Si vous aimez les défis, vous pouvez créer l'application par vous-même. Si vous rencontrez des difficultés, lisez les sections suivantes pour bénéficier de conseils et d'astuces supplémentaires, qui vous aideront à décomposer le problème et à l'aborder étape par étape.
Résolvez ce problème pratique à votre rythme. Prenez le temps nécessaire pour créer chaque partie des fonctionnalités de l'application. Le code de solution de l'application Lemonade est disponible à la fin. Toutefois, nous vous recommandons de créer l'application par vous-même avant de vérifier la solution. N'oubliez pas que la solution fournie n'est pas la seule façon de créer l'application Lemonade. Il est donc tout à fait possible de la créer d'une autre manière, tant que les conditions sont remplies.
Conditions préalables
- Vous êtes capable de créer une mise en page d'interface utilisateur simple dans Compose avec des composables texte et image.
- Vous êtes capable de créer une application interactive qui répond à un clic sur un bouton.
- Vous connaissez les bases de la composition et de la recomposition.
- Vous connaissez les bases du langage de programmation Kotlin, y compris les fonctions, les variables, les conditions et les expressions lambda.
Ce dont vous avez besoin
- Un ordinateur avec un accès à Internet et Android Studio installé
2. Présentation de l'application
Vous allez nous aider à concrétiser notre projet de création de citronnade en ligne. L'objectif est de concevoir une application simple et interactive qui vous permettra de presser des citrons en appuyant sur l'image affichée à l'écran, jusqu'à ce que vous remplissiez un verre de citronnade. Considérez cet exercice comme une métaphore ou simplement comme un moyen amusant de passer le temps.
Voici comment l'application fonctionne :
- Lorsque l'utilisateur lance l'application pour la première fois, il voit un citronnier. Un libellé l'invite à appuyer sur l'image du citronnier afin de "sélectionner" un citron.
- Après avoir appuyé sur le citronnier, l'utilisateur voit un citron. Il est ensuite invité à appuyer sur le citron pour le "presser" et en faire une citronnade. Il doit appuyer plusieurs fois sur le citron pour le presser. Le nombre de pressions nécessaires pour presser le citron est différent à chaque fois. Il s'agit d'un nombre généré aléatoirement et compris entre 2 et 4 (inclus).
- Après avoir appuyé sur le citron le nombre de fois requis, un verre de citronnade rafraîchissant s'affiche. L'utilisateur est invité à appuyer sur le verre pour la "boire".
- Lorsqu'il appuie sur le verre de citronnade, un verre vide apparaît. Il doit appuyer sur le verre vide pour recommencer.
- Une fois qu'il appuie sur le verre vide, il voit le citronnier à nouveau et peut recommencer le processus. Plus de citronnade s'il vous plaît !
Voici des captures d'écran plus grandes pour illustrer l'apparence de l'application :
|
|
|
|
Chaque étape de préparation de la citronnade affiche une image et un libellé différents, et implique un comportement distinct en réponse à un clic. Par exemple, lorsque l'utilisateur appuie sur le citronnier, l'application affiche un citron.
Votre tâche consiste à créer la mise en page d'interface utilisateur de l'application et à implémenter la logique qui permettra à l'utilisateur de suivre toutes les étapes de création d'une citronnade.
3. Premiers pas
Créer un projet
Dans Android Studio, créez un projet avec le modèle Empty Activity (Activité vide) et les informations suivantes :
- Nom : Lemonade
- Nom du package : com.example.lemonade
- SDK minimum : 24
Une fois l'application et le projet créés, passez à la section suivante.
Ajouter des images
Vous disposez de quatre fichiers drawable vectoriels que vous utiliserez dans l'application Lemonade.
Téléchargez ces fichiers :
- Téléchargez un