- En savoir plus sur la programmation événementielle
- Comprendre les différents types de blocs dans la plateforme App Inventor du MIT
Voici les activités de cette leçon :
ÉVÉNEMENTS
Les applications mobiles sont basées sur la programmation événementielle.
La programmation événementielle est basée sur les événements, plutôt que sur l'exécution du code de haut en bas. Certains programmes exécutent tout leur code en une seule fois, mais les applications mobiles fonctionnent en fonction de l'interaction avec l'utilisateur.
Les applications mobiles fonctionnent sur la base événementsqui sont des événements déclenchant l'exécution d'un code. Par exemple, l'utilisateur clique sur un bouton. L'événement se produit lorsque l'utilisateur clique. L'événement déclenche l'exécution d'un code, appelé gestionnaire d'événement.
S'ARRÊTER ET DISCUTER
Pouvez-vous penser à des façons d'interagir avec votre téléphone et à ce qu'il fait ? En voici quelques-unes pour commencer :
- Lorsque vous cliquez sur l'icône d'une application, celle-ci s'ouvre.
- Lorsque vous cliquez sur "envoyer" pour un message texte, il envoie le message et émet un son.
- Lorsque vous essayez de vous connecter à une application, celle-ci vous demande un mot de passe.
Commençons par examiner les différentes parties de la plateforme App Inventor.
App Inventor comporte deux fenêtres que vous utilisez pour créer votre application. En cliquant sur le bouton "Designer" (en haut à droite de l'écran), vous accédez à la fenêtre "Designer". Concepteuroù vous concevez l'interface utilisateur. L'interface interface utilisateur est l'ensemble des éléments de votre application avec lesquels l'utilisateur peut interagir. Il peut s'agir de boutons, de barres de navigation, de zones de texte, d'images, etc.
APP INVENTOR DESIGNER WINDOW
Palette
Vous choisissez des composants dans la palette pour les ajouter au visualiseur, qui se trouve au milieu de la fenêtre. Il existe plusieurs tiroirs de composants à explorer et à utiliser.
Visionneuse
Vous faites glisser vos composants sur le Visionneuse. Les composants sont ajoutés du haut vers le bas, à gauche. Vous devez utiliser les composants de disposition et l'alignement pour mieux contrôler l'emplacement exact de vos composants.
Liste des composants
Cette liste vous donne une liste hiérarchique des éléments présents sur votre écran. Vous pouvez les sélectionner en cliquant dessus dans le visualiseur ou dans cette liste.
Panneau des propriétés
Le panneau Propriétés vous permet de définir les propriétés de chaque composant, comme la taille de la police, l'alignement, la couleur, etc.
Composants non visibles
Les composants non visibles n'apparaissent pas à l'écran mais font tout de même partie de l'application. Ils apparaissent sous l'écran lorsque vous les faites glisser et les déposez.
Lorsque quelqu'un utilise votre application, il interagit avec votre interface utilisateur, en cliquant sur des boutons, en saisissant du texte, etc. C'est à vous de décider ce que votre application doit faire et de la programmer pour qu'elle le fasse.
RÉDACTEUR EN CHEF DE BLOCKS
En cliquant sur "Blocs", vous accédez à l'éditeur de blocs. Éditeur de blocs où vous effectuez toutes vos opérations de codage. Vous faites glisser les blocs du panneau de gauche vers l'espace de travail situé au centre de l'écran.
Sur la gauche, vous trouverez les blocs que vous pouvez faire glisser dans l'espace de travail. Ils sont répartis dans des catégories/tiroirs tels que Control et Logic.
Visionneuse
Il s'agit de l'espace de travail dans lequel vous faites glisser tous vos blocs. Vous pouvez les déplacer, les accrocher les uns aux autres et les imbriquer les uns dans les autres. Vous pouvez également supprimer tous les blocs dont vous n'avez pas besoin.
Blocs de composants
Chaque composant de votre application possède son propre ensemble de blocs. Vous devez cliquer sur le composant pour afficher les blocs que vous pouvez ensuite faire glisser dans l'espace de travail.
MANIPULATEURS D'ÉVÉNEMENTS
Les blocs de gestion d'événements dans App Inventor sont de couleur or et ont la forme d'un bloc ouvert, de sorte que vous pouvez y insérer des blocs. Ces blocs ne s'exécutent que lorsque l'événement en question se produit.
Lorsque le bouton est cliqué
Vous avez déjà utilisé cette fonction. Lorsque l'utilisateur clique sur un bouton particulier, vous souhaitez que l'application fasse quelque chose, comme ouvrir un autre écran ou envoyer un message.
Changement d'orientation de l'écran
Si l'utilisateur fait passer son téléphone du mode portrait (vertical) au mode paysage (horizontal), vous voudrez peut-être faire quelque chose, comme modifier la disposition de l'écran ou la taille des composants.
Lorsque la position du curseur est modifiée
Un curseur permet à l'utilisateur de le faire glisser pour choisir une valeur le long de celui-ci. Cela peut déclencher une modification d'un autre composant. Par exemple, vous pouvez augmenter la taille du stylo dans une application de dessin à l'aide d'un curseur.
FONCTIONS
Les fonctions sont des blocs de code qui font quelque chose. Elles peuvent être exécutées plusieurs fois dans une application. Dans App Inventor, les blocs de fonctions sont colorés en violet. Dans certains langages, les fonctions sont appelées méthodes ou procédures. En fait, App Inventor les désigne généralement comme des procédures. Ils font quelque chose, vous pouvez donc les considérer comme des blocs d'action.
TextToSpeech.Speak
Le composant TextToSpeech peut dire ou prononcer le texte que vous voulez qu'il prononce.
Camera.TakePicture
Le composant Camera permet de prendre une photo avec le téléphone.
Sound.Play
Le composant Sound peut jouer un son.
LES SETTERS ET GETTERS
Les blocs verts concernent les composants et leurs propriétés.
Les blocs vert clair qui peuvent s'accrocher à un autre bloc sont appelés getterscar ils permettent d'obtenir la valeur de la propriété.
Les régleurs sont d'un vert plus foncé et on peut s'y accrocher, avec une fente ouverte à l'extrémité. Cela vous permet de définir la valeur de la propriété.
Texte du bouton 1
Le texte du bouton 1 est obtenu et stocké dans la variable global greeting.
Texte du bouton 1
Le texte du bouton 1 est défini comme suit : "I love coding". Les mots "I love coding" apparaîtront sur le bouton.
Texte de l'étiquette1
Le texte de l'étiquette 1 est défini sur la source du son 1. Cela signifie que le nom du fichier son sera affiché dans l'étiquette 1.
Source de Sound1
La source de Sound1 (le nom du fichier son) est obtenue et stockée dans la propriété Text de Label1. La définition du texte d'une étiquette permet d'afficher la valeur de l'étiquette, de sorte que le nom du fichier son apparaîtrait dans Label1.
Texte de label 1
TextToSpeech récupère le contenu du texte de Label1 et le prononce. Quel que soit le texte affiché dans Label1, il sera prononcé.
Conseil du mentor
Bonnes pratiques : Rappelez aux élèves qu'il s'agit exactement de la même chose que le codage réel. Le vocabulaire étrange (fonctions, getters, setters) que nous utilisons est exactement celui qu'utilisent les codeurs.
Questions directrices à poser aux élèves : Pouvez-vous penser à certaines fonctions quotidiennes que vous effectuez ? (exemple : faire un gâteau, se brosser les dents - tout ce qui comporte des étapes répétables). Les fonctions sont très similaires aux algorithmes !
Les conseils des mentors sont fournis grâce au soutien de l'AmeriCorps.
BLOCS DE DONNÉES
Lorsque vous utilisez des blocs setter, vous pouvez utiliser d'autres blocs intégrés qui représentent des données ou des informations pouvant être utilisées dans votre application. Voici quelques exemples de blocs de données pouvant être utilisés.
Les nombres
Les valeurs numériques peuvent être utilisées comme données dans une application. Ces blocs se trouvent dans le tiroir Mathématique, dans la palette des blocs.
Texte ou chaînes de caractères
Le texte, parfois appelé chaîne de caractères, peut être utilisé comme données. Il s'agit de lettres, de mots et de phrases qui peuvent être utilisés dans une application. Les blocs se trouvent dans le tiroir Texte de la palette Blocs.
Booléen
Ce type de données n'a que deux valeurs possibles : true (vrai) ou false (faux). Ces blocs peuvent définir ou tester l'"état" de quelque chose et seront utilisés dans les conditionnels, que vous découvrirez plus en détail.
ACTIVITÉ : TUTORIEL SUR LA TABLE D'HARMONIE
Suivez le tutoriel vidéo ci-dessous
et suivez les instructions de Dave dans la vidéo ci-dessous.
Notez que la vidéo commence à 1:11 pour sauter les instructions de chargement. Ces instructions ne sont pas nécessaires si vous avez chargé le projet de démarrage en utilisant le lien ci-dessus.
DÉFI
Dans l'activité, vous avez utilisé :
- Blocs de gestion d'événements
- Blocs fonctionnels
Essayons d'utiliser quelques blocs setter et getter en les ajoutant à votre application Soundboard.
Lorsque l'utilisateur clique sur une image pour lire le discours associé, changer la couleur de fond de l'écran. de l'écran.
Vous pouvez le changer pour une couleur particulière, mais vous ne pouvez pas facilement revenir à la couleur de départ, le noir, alors changez plutôt l'arrière-plan de l'écran pour une couleur aléatoire.
Conseil : consultez le tiroir des couleurs et cherchez l'option créer un bloc decouleur . Ensuite, cherchez dans le tiroir Math un bloc de nombres entiers aléatoires. Les couleurs sont composées de 3 nombres, RVB pour rouge, vert, bleu, compris entre 0 et 255.
RÉFLEXION
Maintenant que vous en savez un peu plus sur les différents blocs de code, réfléchissez à votre solution d'application :
RÉVISION DES TERMES CLÉS
- Interface utilisateur - tout ce qui, dans votre application, permet à l'utilisateur d'interagir.
- Concepteur - fenêtre dans laquelle vous pouvez ajouter des composants à votre application et concevoir leur apparence
- Éditeur de blocs - fenêtre dans laquelle vous codez les blocs de votre application
- Événement - quelque chose qui se produit et qui déclenche l'exécution d'un code
- Gestionnaire d'événement- blocs de code qui indiquent à votre application ce qu'elle doit faire lorsqu'un événement se produit
- Programmation événementielle - Programmation basée sur des événements, plutôt que d'exécuter le code entier de haut en bas.
- Les fonctions - bloc de code qui s'exécute et peut être exécuté plusieurs fois
RESSOURCES SUPPLÉMENTAIRES
Découvrez d'autres tutoriels pour débutants de Dave Wolber sur App Inventor à l'adresse suivante appinventor.org
