Thunkable : Regarder de plus près

  • En savoir plus sur la programmation événementielle
  • Comprendre les différents types de blocs dans la plateforme Thunkable

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 est le moment où l'utilisateur clique. Le code à exécuter lorsque cet événement se produit s'appelle le 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.
les filles discutent

Commençons par examiner les différentes parties de la plateforme Thunkable.

Thunkable a deux fenêtres que vous utilisez pour construire votre application. En cliquant sur Design dans la barre de menu supérieure (en haut à gauche de l'écran), vous accédez à la fenêtre 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.

FENÊTRE DE CONCEPTION THUNKABLE

Fenêtre du concepteur thunkable
1

Liste des composants

Tous les composants que vous avez ajoutés à votre application apparaissent ici, organisés hiérarchiquement par écran.

3

Espace de travail

Vous faites glisser vos composants sur le téléphone dans cet espace de travail central. Vous pouvez contrôler l'emplacement des composants ainsi que leur taille.

2

Ajouter des composants

Vous faites glisser les composants visuels de ce panneau dans l'espace de travail. 

4

Panneau des propriétés

Le panneau Propriétés permet de définir les propriétés de chaque composant. Les propriétés sont les différentes caractéristiques que vous pouvez définir pour chaque composant, comme sa largeur, sa hauteur et sa couleur. Sélectionnez un composant sur la maquette, puis modifiez l'une de ses propriétés dans le panneau Propriétés.

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.

Éditeur de blocs Thunkable
1
Palette de blocs

Sur la gauche, vous trouverez la palette de blocs. En haut se trouvent les composants de l'interface utilisateur. Chaque composant de votre application possède son propre ensemble de blocs. Cliquez sur le composant pour afficher les blocs que vous pouvez faire glisser dans l'espace de travail.

4

Espace de travail de codage

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.

2

Blocs de base

Les blocs de base sont des blocs de codage standard à utiliser dans votre application. Ils sont classés en fonction de leur type et codés par des couleurs.

3

Caractéristiques de l'application

Il s'agit de fonctionnalités invisibles que vous pouvez ajouter à votre application. Vous pouvez cliquer sur l'une d'entre elles pour l'ajouter, puis définir des propriétés et faire glisser des blocs de code pour cette fonctionnalité.

MANIPULATEURS D'ÉVÉNEMENTS

Les blocs de gestion d'événements dans Thunkable 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.

Bloc d'événements de clic de bouton thunkable

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.

Bloc d'événements pour le clic sur un élément d'une visionneuse de liste

Lorsque l'élément d'un ListViewer est cliqué
Un ListViewer est comme un menu déroulant, cet événement se produit donc lorsque l'utilisateur choisit un élément de la liste. L'application doit faire quelque chose avec l'élément cliqué.

Le bloc d'événements s'ouvre dans l'écran

Lorsqu'un écran s'ouvre
Cet événement est utilisé lorsque vous voulez faire quelque chose au démarrage de l'application ou lorsque l'application passe à un autre écran. Vous pouvez définir des variables ou mettre à jour des informations à partir du nuage.

FONCTIONS

Les fonctions Les fonctions sont des blocs de code qui font quelque chose. Elles peuvent être exécutées plusieurs fois dans une application. Dans Thunkable, les blocs de fonctions sont colorés en violet. Certains langages appellent les fonctions des méthodes ou des procédures. Elles font quelque chose, vous pouvez donc les considérer comme des blocs d'action.

blocs de fonction

Dire
Cette fonction permet à l'application de dire ou de prononcer le texte que vous souhaitez qu'elle prononce.

Démarrage de la minuterie et diffusion du son
Le composant Timer peut commencer à compter. Et l'application peut émettre un son.

LES SETTERS ET GETTERS

Les blocs verts concernent les propriétés du composant. 

Les blocs vert clair sont appelés getterscar ils permettent d'obtenir la valeur de la propriété.

Blocs d'obturation à analyser

Texte du bouton 1
Le texte est obtenu et enregistré dans la variable numberChoice.

Temps du Timer1 en secondes
La valeur des secondes de la minuterie est obtenue et stockée dans le texte de Lablel1, de sorte que la valeur est affichée dans l'étiquette. 

Setters 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é.

Blocs setter thunkable

Texte du bouton 1
Le texte du bouton 1 est défini comme suit : "Cliquez sur moi !"

Label1.Text
Le texte de Label1 est défini comme le temps en secondes de Timer1.

IntervalleMillisecondes de la minuterie 1
L'IntervalleMillisecondes du Timer1 (la fréquence à laquelle il se déclenche) est fixé à 3000, soit 3 secondes.

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.

A stylisé, logo AmeriCorps en bleu marine

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.

blocs mathématiques thunkable

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 section "core" de la palette de blocs.

Blocs de texte thunkable

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 section Core de la palette de blocs.

blocs booléens thunkable

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

Durée estimée : 45 minutes

Suivez le tutoriel vidéo ci-dessous

Téléchargez les fichiers médias ici (regardez la vidéo de Dave pour plus de détails)
Suivez ensuite la vidéo de Dave ci-dessous pour utiliser les fonctions et les gestionnaires d'événements afin de lire des discours dans votre application.

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 pour savoir comment obtenir une couleur aléatoire.

RÉFLEXION

Maintenant que vous en savez un peu plus sur les différents blocs de code, réfléchissez à votre solution d'application :

De quels composants aurez-vous besoin pour votre application ?
Quels sont les événements qui nécessiteront des gestionnaires d'événements dans votre application ?
Quelles sont les actions qui se produiront lorsque les événements seront déclenchés dans votre 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 Thunkable de Dave Wolber à l'adresse suivante draganddropcode.com

Le cours gratuit de l'étudiante ambassadrice Meenakshi Nair cours gratuit Thunkable sur Udemy est une autre excellente ressource !