HelloPurr: Appuyez sur le minou, écoutez-le miauler
HelloPurr est une application simple que vous pouvez créer en très peu de temps. Vous allez créer un bouton qui a une image d'un chat dessus, puis programmez le bouton de sorte que quand il est cliqué un son "miaou" joue.
Pour construire HelloPurr, vous aurez besoin d'un fichier image d'un chat et d'un fichier audio avec un son "miaou".
Attention :
Enregistrez le fichier sur votre bureau ou dans un dossier de téléchargement, ou à tout autre endroit que vous pourrez facilement trouver plus tard et le dézipper au même endroit. (appelez votre professeur si vous n'arrivez pas à dézipper)
Téléchargez ces fichiers sur votre ordinateur en cliquant sur le lien "hellopurr.zip"
AppInventor et son interface
Si tous ce déroule correctement vous devez avoir à l'écran le même contenu que l'image jointe
Les composants App Inventor sont situés sur le côté gauche de la fenêtre Designer sous le titre Palette . Les composants sont les éléments de base que vous utilisez pour créer des applications sur un appareil Android. Ce sont comme les ingrédients d'une recette. Certains composants sont très simples, comme un composant Label , qui affiche juste du texte à l'écran, ou un composant Button (# 1 à gauche) sur lequel vous appuyez pour lancer une action
Pour utiliser un composant dans votre application, vous devez :
- cliquer dessus et le faire glisser sur la visionneuse au milieu du concepteur .
Lorsque vous ajoutez un composant à la visionneuse (n ° 1 ci-dessous),
il apparaîtra également dans la liste des composants sur le côté droit de la visionneuse.
Les composants (n ° 2 ci-dessous) ont des propriétés qui peuvent être ajustées pour changer la façon dont le composant apparaît ou se comporte dans l'application. Pour afficher et modifier les propriétés d'un composant (n ° 3 ci-dessous), vous devez d'abord sélectionner le composant souhaité dans votre liste de composants.
Étapes de sélection des composants et de définition des propriétés
HelloPurr aura un composant "Button" qui affiche l'image du minou que vous avez téléchargé précédemment.
Pour y parvenir:
Étape 1a . Dans la palette de l' interface utilisateur , faites glisser et déposez le composant Button vers Screen1 (# 1).
Étape 1b . Pour que le bouton ait une image de chat, dans le volet Propriétés , sous Image, cliquez sur le texte "Aucun ..." et cliquez sur "Télécharger nouveau" (# 2). Une fenêtre apparaîtra pour vous permettre de choisir le fichier image. Cliquez sur "Choisir un fichier", puis accédez à l'emplacement du fichier kitty.png que vous avez téléchargé précédemment (n ° 3). Cliquez sur le fichier kitty.png , cliquez sur «Ouvrir», puis sur «OK».
Étape 2 . Modifiez la propriété Text du Button : Supprimez "Text for Button1", en laissant la propriété Text du Button vide afin qu'il n'y ait aucune écriture sur le visage du chat.
Si l'image entière du chat n'apparaît pas, vous pouvez résoudre ce problème en définissant les propriétés Hauteur et Largeur du bouton sur "Remplir le parent".
Pour ce faire, cliquez sur le composant Button , allez dans le volet Propriétés sur le côté droit, faites défiler jusqu'en bas jusqu'à l'endroit où il est dit Largeur et cliquez sur le mot "Automatique ..." pour activer la liste déroulante . Choisissez "Remplir le parent". Faites de même pour la propriété Height .
Étape 3 . Depuis la palette de l' interface utilisateur , faites glisser et déposez le composant Label dans la visionneuse (n ° 1), en le plaçant sous l'image du minou. Il apparaîtra sous votre liste de composants comme Label1 .
Étape 4 .
- Sous Palette, cliquez sur le tiroir Média et faites glisser un composant Son et placez-le dans la visionneuse (# 1). Où que vous le déposiez, il apparaîtra dans la zone en bas de la visionneuse marquée Composants non visibles .
- Sous le volet Média , cliquez sur Télécharger nouveau ... (# 2)
- Naviguez jusqu'à l'emplacement du fichier meow.mp3 que vous avez téléchargé précédemment et téléchargez-le dans ce projet (# 3).
- Sous le volet Propriétés, voir que la source propriété dit actuellement Aucun ... . Cliquez sur le mot Aucun ...
pour changer le composant de Sound1 Source à meow.mp3 (# 4).
Programmation avec l'éditeur de blocs
Jusqu'à présent, vous avez organisé l'écran et les composants de votre application dans le Designer . Pour commencer à programmer le comportement de l'application, vous devez accéder à l' éditeur de blocs . Cliquez sur le bouton Blocs pour accéder à l'éditeur de blocs.
Une fois que vous avez l'éditeur de blocs devant vous, passez à l'étape suivante pour commencer à programmer votre application avec des blocs.
Faire jouer le son
Étape 1 . Sur le côté gauche de l'éditeur de blocs, cliquez sur le tiroir Button1 pour l'ouvrir. Faites glisser et déposez le bloc "when Button1.Click " dans la zone de travail (la zone ouverte à droite).
Ces blocs jaune moutarde sont appelés blocs de gestionnaire d'événements . Les blocs du gestionnaire d'événements spécifient comment l'application doit répondre à certains événements: un bouton a été enfoncé, le téléphone est secoué, l'utilisateur fait glisser son doigt sur un canevas, etc. Les blocs du gestionnaire d'événements sont de couleur jaune moutarde et utilisent le mot quand . Par exemple, lorsque Button1.Click est un gestionnaire d'événements
Étape 2 . Cliquez sur le tiroir Sound1 et faites glisser le bloc "Sound1.Play" et connectez-le à la section «do» du bloc "when Button1.Click" . Les blocs se connectent comme des pièces de puzzle et vous pouvez entendre un clic lorsqu'ils se connectent.
Les blocs violets sont appelés blocs de commande et sont placés dans le corps des gestionnaires d'événements. Lorsqu'un gestionnaire d'événements est exécuté, il exécute la séquence de commandes dans son corps. Une commande est un bloc qui spécifie une action à effectuer (par exemple, jouer un son) lorsque l'événement (par exemple, appuyer sur Button1) est déclenché.
Vos blocs devraient ressembler à ceci à ce stade:
Vous pouvez maintenant voir que le bloc de commande se trouve dans le gestionnaire d'événements . Cet ensemble de blocs signifie, "lorsque Button1 est cliqué, Sound1 jouera."
Lancer l'application sur votre appareil Android
Le développement de votre application est désormais terminé il faut la voir sur votre appareil Android.
Pour y parvenir il faut connecter votre appareil à l'application :
- cliquez sur connections
- cliquez sur compagnon AI
ensuite scanner le QRcode
Attention :
Ne scannez pas celui de l'image c'est celui qui est fourni par l'application AppInventor en ligne