- Examiner les différents composants que vous pouvez utiliser dans App Inventor ou Thunkable
- Trouvez un composant qui peut aider votre application
- Recherchez un tutoriel et codez au moins un composant dans votre application.
Voici les activités de cette leçon :
COMPOSANTS POUR SMARTPHONES
Il est temps de choisir et de coder les composants, dont certains comprennent des capteurs, que vous souhaitez utiliser dans votre application. Les différents composants disponibles permettront à votre application de faire beaucoup de choses différentes - assurez-vous de choisir ceux qui vous conviennent le mieux !
Cette leçon est une référence pour vous permettre de découvrir les nombreux composants que vous pouvez utiliser dans votre application.
Vous avez probablement déjà choisi votre plateforme, mais nous allons énumérer tous les composants pour App Inventor et Thunkable, juste pour que vous soyez au courant des composants disponibles.
Recherchez les composants que vous pouvez utiliser pour mettre en œuvre les fonctionnalités que vous avez prévues pour votre application.
LISTE DES COMPOSANTS PAR CATÉGORIE
Les composants qui suivent sont ceux qui vont au-delà de la norme composants de l'interface utilisateurqui permettent à l'utilisateur d'interagir avec l'application.
Cette liste n'est pas exhaustive, mais elle couvre la plupart des composants actuellement disponibles. Thunkable et App Inventor continuent d'ajouter des fonctionnalités et des composants en permanence.
Les informations ci-dessous sont également disponibles dans ce document.
Si votre application a besoin de fonctionnalités liées à des éléments tels que les photographies, l'audio et la vidéo, ces composants vous seront très utiles.
| Description de la fonctionnalité | App Inventor | Thunkable |
|---|---|---|
| Permet à l'utilisateur de prendre des vidéos. Vous pouvez l'utiliser pour des applications sociales, des applications de partage de vidéos ou à tout autre moment où vous souhaitez que votre utilisateur enregistre une vidéo. | Caméscope | Appareil photo |
| Permet à l'utilisateur de prendre des photos. Cela peut être utile pour les applications qui permettent aux utilisateurs de définir des photos de profil ou de prendre des photos à partager ou à enregistrer dans une galerie. | Appareil photo | Appareil photo |
| Permet à l'utilisateur de choisir une image dans sa photothèque. Il permet aux utilisateurs de choisir des photos qu'ils ont prises en dehors de l'application. | ImagePicker | Fichiers (photothèque) |
| Permet d'intégrer dans l'application une vidéo sur laquelle l'utilisateur peut cliquer. La vidéo doit être au format .wmv, .3gp ou .mp4 et ne pas dépasser 1 Mo. | Lecteur vidéo | Vidéo |
| Permet de traduire un texte dans une autre langue. L'application doit disposer d'un accès à l'internet car elle s'appuie sur des services de traduction externes. | Traducteur | Discours |
| Permet à l'utilisateur d'enregistrer un son ou un bruit. | Enregistreur de sons | Son |
| Ce composant audio joue un son. Cela fonctionne mieux pour les sons "longs", tels que les chansons, les discours ou les poèmes. Thunkable n'a qu'un seul composant, Sound, pour les sons de toute longueur. | Joueur | Son |
| Très similaire au composant Player, mais il convient mieux aux sons courts, comme les "dings" de notification. | Son | Son |
| Traduit la parole de l'utilisateur en texte. Cette fonction est particulièrement utile pour les applications qui requièrent des capacités mains libres. | Reconnaissance de la parole | Discours |
| Ce composant fait l'inverse de SpeechRecorder ; il permet aux utilisateurs de saisir du texte et l'application le lira à haute voix. | TextToSpeech | Discours |
| Vous pouvez faire jouer une animation JSON dans votre application. | Non disponible | Animation |
Si vous avez besoin de votre application pour passer des appels téléphoniques, envoyer des courriels, envoyer des SMS et partager certains types d'informations, ces composantes sociales peuvent être utiles.
| Description de la fonctionnalité | App Inventor | Thunkable |
|---|---|---|
| Affiche les contacts de l'utilisateur et lui permet de choisir quelqu'un dans cette liste. | ContactPicker | Non disponible |
| Permet à l'utilisateur de saisir une adresse électronique à partir de sa liste de contacts. | EmailPicker | Non disponible |
| Permet à l'utilisateur de sélectionner un numéro de téléphone à partir d'une liste de contacts téléphoniques. | Sélecteur de numéros de téléphone | Non disponible |
| Permet d'intégrer dans l'application une vidéo sur laquelle l'utilisateur peut cliquer. La vidéo doit être au format .wmv, .3gp ou .mp4 et ne pas dépasser 1 Mo. | Lecteur vidéo | Vidéo |
| Permet à l'utilisateur de passer un appel téléphonique à partir de votre application. | Appel téléphonique | Partager |
| Permet à l'utilisateur d'envoyer un message texte au téléphone d'un autre utilisateur par l'intermédiaire de votre application. | Textes | Partager |
| Ce composant audio joue un son. Cela fonctionne mieux pour les sons "longs", tels que les chansons, les discours ou les poèmes. Thunkable n'a qu'un seul composant, Sound, pour les sons de toute longueur. | Joueur | Son |
| Permet aux utilisateurs de partager des messages, des images ou d'autres contenus de votre application avec d'autres applications sur le téléphone de l'utilisateur, comme le courrier électronique et la messagerie. | Partage | Partager |
| Permet la communication entre votre application et Twitter. Les utilisateurs peuvent rechercher des tweets, envoyer et recevoir des messages, obtenir une liste de followers, etc. | Non disponible | |
| Thunkable vous permet d'ajouter des publicités à votre application. Toutes les applications doivent être approuvées par Thunkable avant d'être téléchargées ou publiées. | Non disponible | Annonces |
Ces composants permettent à votre application d'interagir avec des entités extérieures à votre application, comme le web, les appareils et d'autres applications.
| Description de la fonctionnalité | App Inventor | Thunkable |
|---|---|---|
| Permet à votre application de démarrer d'autres applications, comme Appareil photo ou Google Maps, ou des applications créées par l'utilisateur et installées sur le téléphone. | Démarrage d'activité | Ouvrir le lien (Bloc de contrôle) |
| Permet d'intégrer une carte dans votre application. App Inventor comprend des composants tels que des marqueurs et des formes qui peuvent être ajoutés à une carte. Ces fonctionnalités sont ajoutées dans le code de Thunkable. | Cartes | Cartes |
| Permet aux utilisateurs d'afficher des pages web dans votre application. | WebViewer | Web Viewer |
| Permet à votre application d'envoyer et de recevoir des informations vers et depuis des sites web externes. | Web | API Web |
| Permet à l'utilisateur de passer un appel téléphonique à partir de votre application. | Appel téléphonique | Partager |
| Ces composants permettent à votre application de se connecter aux appareils Bluetooth. | Client Bluetooth, Serveur Bluetooth, BlueToothLE (extension) | Bluetooth Low Energy |
| Ce composant audio joue un son. Cela fonctionne mieux pour les sons "longs", tels que les chansons, les discours ou les poèmes. Thunkable n'a qu'un seul composant, Sound, pour les sons de toute longueur. | Joueur | Son |
| Utilisé pour collecter des données à partir de sources externes (capteurs, web, fichiers de données) et les afficher sous forme de graphiques. | Graphique, ChartData2D | Non disponible |
| Peut être utilisé pour se connecter à des appareils sériels comme Arduino. | En série | Non disponible |
| Permet aux utilisateurs de votre application de s'inscrire avec un nom d'utilisateur et un mot de passe. Pour cela, vous devez d'abord créer un compte Firebase. | Non disponible | S'inscrire |
| Permettre l'intégration d'un fichier pdf dans votre application | Non disponible | Lecteur PDF |
Si votre application a besoin de recueillir des informations sur le monde qui l'entoure ou sur l'utilisateur, voici quelques capteurs auxquels App Inventor et Thunkable peuvent accéder.
| Description de la fonctionnalité | App Inventor | Thunkable |
|---|---|---|
| Peut déterminer si le téléphone tremble et s'il est tenu à l'endroit ou à l'envers. Cette fonction est très utile lorsque vous souhaitez que l'écran se réoriente en fonction de la manière dont le téléphone est tenu, ou si vous souhaitez que l'application réagisse aux secousses. | AccéléromètreCapteur | Accéléromètre |
| Utilise le capteur accéléromètre pour mesurer le nombre de pas effectués par l'utilisateur qui tient le téléphone, et peut également estimer la distance parcourue. | Podomètre | Non disponible |
| Peut détecter si le téléphone est incliné. Il est plus précis que l'accéléromètre et peut mesurer l'ampleur du changement d'orientation du téléphone. | GyroscopeSensor | Gyroscope |
| Utilisé pour mesurer la densité du flux magnétique. Cette fonction n'est pas disponible sur tous les téléphones. | Capteur de champ magnétique | Magnétomètre |
| Permet à votre application d'obtenir l'heure actuelle ou d'utiliser une minuterie. Cela peut être utile pour régler une alarme ou utiliser une minuterie. | Horloge | Minuterie |
| Recueille la latitude et la longitude de l'emplacement du téléphone. Ce capteur peut s'avérer utile lorsque vous devez rechercher des points d'intérêt à proximité de l'utilisateur. | Capteur de localisation | Capteur de localisation |
| Indique si le téléphone est à proximité d'un objet. Il est souvent utilisé pour savoir si l'utilisateur a le téléphone près de son oreille. Tous les téléphones ne prennent pas en charge cette fonction. | Capteur de proximité | Non disponible |
| Permet à votre application de lire un code-barres. | BarcodeScanner | Appareil photo |
| Mesure la pression de l'air ambiant. | Baromètre | Non disponible |
| Mesure l'humidité relative de l'air ambiant. Peu courant pour la plupart des appareils mobiles. | Hygromètre | Non disponible |
| Mesure le niveau de lumière. | Capteur de lumière | Non disponible |
| Permet à votre application de partager des données avec d'autres appareils équipés de la technologie NFC (Near-field Communication). | Champ proche | Non disponible |
| Fournit des informations sur l'orientation physique de l'appareil en trois dimensions : roulis, tangage et azimut. | Capteur d'orientation | Non disponible |
| Mesure la température ambiante (externe). | Thermomètre | Non disponible |
Grâce à ces composants, votre application peut stocker des données dans l'opp, sur l'appareil et dans le nuage.
| Description de la fonctionnalité | App Inventor | Thunkable |
|---|---|---|
| Bloc qui vous permet de mettre à jour et de stocker des informations dans l'application. Toute information est effacée lorsque l'application est fermée. | Variable | app Variable |
| Permet à votre application de stocker et de mettre à jour des informations localement sur l'appareil mobile et de les utiliser dans l'application. Les données peuvent être stockées et récupérées entre les exécutions de l'application. Dans Thunkable, DataViewer et DataViewerGrid peuvent stocker des données localement en utilisant l'option "Create your own Table". | TinyDB | Variable stockée Liste DataViewer Grille de visualisation des données |
| Permet à votre application de stocker, récupérer et mettre à jour des données dans le nuage afin qu'elles puissent être partagées entre les différents utilisateurs de l'application. Thunkable offre des variables dans le nuage en utilisant Firebase. DataViewer et DataViewerGrid peuvent être liés à Airtable, Google Sheets et Webflow. Le composant Spreadsheet d'App Inventor est lié à Google Sheets. | CloudDB FirebaseDB Feuille de calcul | Variable cloud - (Firebase) DataViewer List DataViewerGrid |
Utilisez des modèles d'apprentissage automatique pour la classification et des outils d'IA générative dans votre application.
| Description de la fonctionnalité | App Inventor | Thunkable |
|---|---|---|
| Permet de communiquer avec un chat bot IA, le ChatGPT d'OpenAI. | Chatbot | Open AI Services (complétion de texte) |
| Permet d'inclure DALL-E dans votre application pour créer et modifier des images. | Imagebot | Services d'IA ouverts (génération d'images) |
| Permet de créer son propre modèle d'apprentissage automatique (image, son, pose) et de l'utiliser dans son application. | Classificateur d'images personnelles Classificateur audio personnel PoseNetExtension TeachableMachine (notez qu'ils nécessitent tous l'ajout de l'extension) | Non disponible |
Permettre de dessiner dans une application et ajouter des sprites pour animer et créer des jeux.
| Description de la fonctionnalité | App Inventor | Thunkable |
|---|---|---|
| Ajoute une zone à l'écran où les utilisateurs peuvent dessiner. C'est également à cet endroit que vous pouvez ajouter des sprites que vous pouvez animer. | Toile | Toile |
| Ces composants sont les éléments qui peuvent être animés et avec lesquels on peut interagir à l'intérieur d'un jeu ou d'une animation. | ImageSprite Ball |
Sprite |
Vous ajouterez des composants dans la fenêtre du concepteur d'App Inventor. Vous devrez cliquer sur une catégorie dans la palette pour ouvrir le tiroir et afficher les composants.
ACTIVITÉ : APPRENDRE UN NOUVEAU COMPOSANT
Durée estimée : 60 minutes
Choisissez un composant pour en savoir plus
- Choisissez au moins un composant ou un capteur que vous pensez utiliser dans votre application.
- Trouver de la documentation et/ou un tutoriel pour utiliser le composant dans une application. Vous pouvez commencer ici :
- Créez une application en utilisant ce nouveau composant
Conseil du mentor
Meilleures pratiques : Le composant que vous choisissez n'a pas besoin d'être parfait pour votre application ! Tant que vous apprenez à connaître un nouveau composant, c'est ce qui compte. Choisissez quelque chose qui pourrait fonctionner et si vous vous rendez compte que cela ne fonctionne pas, ce n'est pas grave. Dans le monde du codage, nous appelons cette recherche un "pic" parce que vous essayez de creuser rapidement aussi profondément que possible (un peu comme si vous enfonciez un pic de chemin de fer dans le sol).
Questions directrices à poser aux élèves : Si nous créons une application pour une montre Apple, quels types de composants pourraient se trouver sur la montre Apple (moniteur de fréquence cardiaque, gyroscope - pour le suivi des pas, bluetooth). Quelle quantité de données recueillez-vous ? Pourriez-vous utiliser ces données pour entraîner votre modèle d'IA ?
Les conseils des mentors sont fournis grâce au soutien de l'AmeriCorps.
L'une des meilleures compétences que vous puissiez acquérir en tant que programmeur est la capacité à trouver des ressources pour vous aider lorsque vous êtes bloqué ou que vous avez besoin d'apprendre à utiliser quelque chose.
Cette activité est une pratique !
Il se peut qu'elle ne corresponde pas exactement à l'application que vous souhaitez créer, mais le fait de vous entraîner à coder avec des composants vous aidera à créer votre propre application.
RÉFLEXION
Cette leçon est une référence pour tous les composants que vous pouvez utiliser pour construire votre application. Il n'est pas facile de trouver un tutoriel ou une documentation pour apprendre à utiliser un composant !
RÉVISION DES TERMES CLÉS
- Composants de l'interface utilisateur - composants standard avec lesquels un utilisateur interagit, tels que les boutons, les étiquettes et les zones de texte.
- Composants médias - les photos, les fichiers audio et les vidéos sont des exemples de composants multimédias.
- Capteurs - différents types de dispositifs installés sur un téléphone qui recueillent des données à des fins diverses.
- Composants sociaux - fonctions qui permettent aux utilisateurs de passer des appels téléphoniques, d'envoyer des courriels, des SMS et de partager des choses par l'intermédiaire de votre application.
- Composants de connectivité - fonctions qui permettent à votre application d'interagir avec des lieux extérieurs à votre application, comme le web et d'autres applications.
- Composants de stockage - blocs et composants qui permettent de stocker des informations dans l'application, sur l'appareil et dans le nuage.
- Composants AI - composants qui vous permettent d'utiliser des modèles d'apprentissage automatique ou des outils d'IA générative dans votre application.
RESSOURCES SUPPLÉMENTAIRES
Autres sites de tutoriels utiles pour App Inventor :
- appinventor.org
- Le cours pour débutants The Coding Bus (nombreux tutoriels sur les composants)
- GirlsCodeIt Tutoriels Technovation
- Liste de référence complète des composants (Google doc pour impression)
