Comment créer votre propre application Soundboard avec Android App Inventor

Table des matières:

Comment créer votre propre application Soundboard avec Android App Inventor
Comment créer votre propre application Soundboard avec Android App Inventor

Vidéo: Comment créer votre propre application Soundboard avec Android App Inventor

Vidéo: Comment créer votre propre application Soundboard avec Android App Inventor
Vidéo: Comment afficher l'aperçu des images et l'extension de fichiers - YouTube 2024, Avril
Anonim
Aujourd'hui, nous allons vous montrer comment utiliser l'outil Android App Inventor pour créer votre propre application Android, sans avoir à écrire beaucoup de code compliqué. C’est un processus très simple qui ne nécessite que quelques glisser-déposer.
Aujourd'hui, nous allons vous montrer comment utiliser l'outil Android App Inventor pour créer votre propre application Android, sans avoir à écrire beaucoup de code compliqué. C’est un processus très simple qui ne nécessite que quelques glisser-déposer.

Les tables de son font partie des applications les plus simples à créer avec App Inventor. Nous allons donc vous montrer comment commencer à créer votre propre application.

Mitch Bartlett de Technipages a rédigé cet article invité dans lequel il présente de nombreux conseils détaillés sur les smartphones.

Installation et utilisation d’App Inventor pour créer une application

Tout d’abord, vous devez vous assurer d’installer Java 1.6 ou une version ultérieure. Vous pouvez le télécharger sur https://www.java.com. Une fois que vous avez terminé, installez App Inventor en suivant les instructions pour votre système d'exploitation.

  • Mac OS X
  • GNU / Linux
  • les fenêtres

Visitez la section Mes projets du site App Inventor. Connectez-vous et acceptez les conditions d'utilisation si vous y êtes invité. Sélectionnez le bouton Nouveau pour démarrer une nouvelle application.

Attribuez un nom unique à votre application, puis cliquez sur OK.
Attribuez un nom unique à votre application, puis cliquez sur OK.
Le visualiseur App Inventor apparaîtra. Cet écran montre à quoi ressemblera votre application à mesure que vous la construisez. Nous voulons d’abord créer un titre pour cet écran. Sur le volet Composants, Screen1 devrait être sélectionné. Sous la section Propriétés, nous pouvons modifier le champ Titre avec le nom de notre application.
Le visualiseur App Inventor apparaîtra. Cet écran montre à quoi ressemblera votre application à mesure que vous la construisez. Nous voulons d’abord créer un titre pour cet écran. Sur le volet Composants, Screen1 devrait être sélectionné. Sous la section Propriétés, nous pouvons modifier le champ Titre avec le nom de notre application.
Nous pouvons maintenant commencer à organiser les éléments à l'écran. Nous allons créer des colonnes et des lignes pour les boutons de la table d’harmonie. Nous pouvons le faire en sélectionnant Arrangement de l’écran dans la palette et en faisant glisser l’élément TableArrangement dans la visionneuse.
Nous pouvons maintenant commencer à organiser les éléments à l'écran. Nous allons créer des colonnes et des lignes pour les boutons de la table d’harmonie. Nous pouvons le faire en sélectionnant Arrangement de l’écran dans la palette et en faisant glisser l’élément TableArrangement dans la visionneuse.
Définissez les propriétés du composant TableArrangement1 dans le volet Propriétés. Ici, nous allons le changer en 3 colonnes et 3 lignes.
Définissez les propriétés du composant TableArrangement1 dans le volet Propriétés. Ici, nous allons le changer en 3 colonnes et 3 lignes.
Nous aurons besoin d’un composant pour jouer nos sons. Sélectionnez Média dans la palette et faites glisser le composant Lecteur dans la visionneuse. Il apparaîtra sous le nom Joueur1 dans la section Composants non visibles.
Nous aurons besoin d’un composant pour jouer nos sons. Sélectionnez Média dans la palette et faites glisser le composant Lecteur dans la visionneuse. Il apparaîtra sous le nom Joueur1 dans la section Composants non visibles.
Ajoutons quelques sons à notre projet. App Inventor prendra en charge les fichiers MP3 ou WAV d’une taille inférieure à 3 Mo. Nous les ajoutons à notre projet en sélectionnant le composant Player1, puis en sélectionnant le champ Source. Cliquez sur le bouton Ajouter… et sélectionnez Parcourir… pour télécharger des fichiers audio à partir de votre PC. Répétez ces étapes pour ajouter plusieurs sons.
Ajoutons quelques sons à notre projet. App Inventor prendra en charge les fichiers MP3 ou WAV d’une taille inférieure à 3 Mo. Nous les ajoutons à notre projet en sélectionnant le composant Player1, puis en sélectionnant le champ Source. Cliquez sur le bouton Ajouter… et sélectionnez Parcourir… pour télécharger des fichiers audio à partir de votre PC. Répétez ces étapes pour ajouter plusieurs sons.
Ajoutez un bouton pour chaque son en sélectionnant la Palette de base et en les faisant glisser vers la zone TableArrangement1 dans l'afficheur. Vous pourrez placer chaque bouton dans une ligne et une colonne spécifiques.
Ajoutez un bouton pour chaque son en sélectionnant la Palette de base et en les faisant glisser vers la zone TableArrangement1 dans l'afficheur. Vous pourrez placer chaque bouton dans une ligne et une colonne spécifiques.
Sélectionnez chaque bouton dans la zone Composants et modifiez les champs de texte pour représenter les sons qu'ils vont jouer.
Sélectionnez chaque bouton dans la zone Composants et modifiez les champs de texte pour représenter les sons qu'ils vont jouer.
Nous en avons terminé avec l’afficheur. Voici à quoi ressemble actuellement notre application.
Nous en avons terminé avec l’afficheur. Voici à quoi ressemble actuellement notre application.
Il est temps de contrôler le comportement des éléments à l’écran. Cliquez sur Ouvrir l'éditeur de blocs pour commencer. Choisissez d'ouvrir le fichier ou d'accorder l'accès si vous y êtes invité.
Il est temps de contrôler le comportement des éléments à l’écran. Cliquez sur Ouvrir l'éditeur de blocs pour commencer. Choisissez d'ouvrir le fichier ou d'accorder l'accès si vous y êtes invité.
Cliquez sur l'onglet Mes blocs. Sélectionnez Button1 et faites glisser la case «Button1.Click» sur le côté droit de l'écran. Faites cela pour chaque bouton que vous avez ajouté à votre application (Button2, Button3, etc.).
Cliquez sur l'onglet Mes blocs. Sélectionnez Button1 et faites glisser la case «Button1.Click» sur le côté droit de l'écran. Faites cela pour chaque bouton que vous avez ajouté à votre application (Button2, Button3, etc.).
Sélectionnez Player1 sous l'onglet My Blocks et faites glisser le bloc «Player1.Source» vers le bloc «Button1.Click». Le bloc devrait se connecter en place. Ajoutez un bloc «Player1.Source» à chacun des autres blocs de clic de bouton (Button2.Click, Button3.Click, etc.).
Sélectionnez Player1 sous l'onglet My Blocks et faites glisser le bloc «Player1.Source» vers le bloc «Button1.Click». Le bloc devrait se connecter en place. Ajoutez un bloc «Player1.Source» à chacun des autres blocs de clic de bouton (Button2.Click, Button3.Click, etc.).
Cliquez sur l'onglet Intégré et sélectionnez Texte. Faites glisser un bloc "texte" vers la droite et connectez-le au bloc "Player1.Source".
Cliquez sur l'onglet Intégré et sélectionnez Texte. Faites glisser un bloc "texte" vers la droite et connectez-le au bloc "Player1.Source".
La boîte de texte contrôlera quel son sera joué. Cliquez sur le texte dans le bloc et modifiez-le pour qu'il corresponde au nom du fichier son de Button1. Dans notre exemple, Button1 est «Punch», nous définissons donc le texte sur Punch.mp3.
La boîte de texte contrôlera quel son sera joué. Cliquez sur le texte dans le bloc et modifiez-le pour qu'il corresponde au nom du fichier son de Button1. Dans notre exemple, Button1 est «Punch», nous définissons donc le texte sur Punch.mp3.
Faites glisser une zone de texte vers chaque bloc «Player1.Source» et modifiez-les pour qu'ils correspondent au nom du son de chaque bouton.
Faites glisser une zone de texte vers chaque bloc «Player1.Source» et modifiez-les pour qu'ils correspondent au nom du son de chaque bouton.
Maintenant que les sons sont définis pour chaque bouton, il suffit d'indiquer à notre application de jouer le son chaque fois que nous cliquons sur le bouton. Pour ce faire, cliquez sur l'onglet Mes blocs et sélectionnez Player1. Faites glisser le bloc «Player1.Start» sur le «Button1.Click». Répétez ces étapes pour chacun des blocs d’événements clic.
Maintenant que les sons sont définis pour chaque bouton, il suffit d'indiquer à notre application de jouer le son chaque fois que nous cliquons sur le bouton. Pour ce faire, cliquez sur l'onglet Mes blocs et sélectionnez Player1. Faites glisser le bloc «Player1.Start» sur le «Button1.Click». Répétez ces étapes pour chacun des blocs d’événements clic.
Vous avez terminé! Vous avez créé une application de table de résonance entièrement fonctionnelle. Voir l'application en action en effectuant l'une des opérations suivantes:
Vous avez terminé! Vous avez créé une application de table de résonance entièrement fonctionnelle. Voir l'application en action en effectuant l'une des opérations suivantes:
  • Testez l'application sur votre appareil Android en activant le débogage USB sur l'appareil sous Paramètres> Applications> Développement et en la connectant à votre ordinateur. Vous pouvez ensuite cliquer sur le bouton Connect to Device… dans l'éditeur de blocs pour afficher l'application sur le périphérique.

    Image
    Image
  • Installez le SDK Android et cliquez sur le bouton Nouvel émulateur pour l’afficher sur votre ordinateur dans un écran d’émulateur.
  • Cliquez sur l'option Package pour téléphone dans l'écran App Inventor. Vous pouvez ensuite afficher le code-barres, télécharger l'application sur l'ordinateur sous forme de fichier APK ou télécharger sur un téléphone connecté.

    Image
    Image

Profitez de votre application de table de son personnalisée sur votre appareil Android.

Conseillé: