Application « Digital Doodle » avec App Inventor 2 : dessinez sur votre smartphone !

Après avoir découvert avec quel logiciel créer des applications mobiles aisément, grâce à l’article Créez votre application Androïd facilement avec App Inventor 2, il est temps de passer à la pratique ! Pour débuter, pas de fonctionnalités très poussées ni de programmes complexes. Débutons avec une application facile à mettre en place, en guise de premier entraînement. Grâce à l’application « Digital Doodle », plus besoin de papier pour gribouiller des notes ou occuper un enfant !

L’objectif de ce tutoriel est de créer une application qui fera dessiner une ligne suite au touché du doigt sur l’écran du smartphone. Pour commencer, ouvrez un nouveau projet depuis « My Projects ». Nommez ce nouveau projet DigitalDoodle, par exemple. 

Créez un nouveau projet

Nommez votre projet

Etape 1 : supprimer la fonction « scrolling » de l’écran

Les paramètres par défauts d’App Inventor 2 permettent à l’écran du smartphone d’être « scrollable », c'est-à-dire que l’utilisateur peut faire descendre les informations lisibles au-delà de la limite de l’écran, en faisant glisser ses doigts sur l’écran pour descendre ou remonter le flux d’informations. Pour cela, sur la partie « Designer » de votre projet, vous devez décocher la case « Scrollable ».

Décochez la case "Scrollable" pour l'application Digital Doodle

Ensuite, depuis la palette « Drawing and Animation », ajoutez un composant « Canvas » à votre écran.

Partie Designer, ajoutez un composant "Canvas"

Etape 2 : changer les dimensions du Canevas

Vous allez maintenant vous assurez que le composant « Canvas » remplisse totalement l’écran du smartphone. Pour cela, sélectionner le Canvas sur l’écran puis allez dans les propriétés du Canvas, sur la droite de l’écran. Parmi les derniers paramètres, modifiez la hauteur et la largeur en sélectionnant « Fill Parent ». 

Redimensionner le Canvas

Surprise : la partie Designer est déjà terminée ! Rendez-vous maintenant dans l’éditeur Blocks afin de programmer l’application Digital Doodle.

Etape 3 : ajouter des animations à votre application

Assurez-vous d’avoir sélectionné Canvas1 dans la rubrique écran1. Ajoutez à la zone « Viewer » un événement « When Canvas1 Dragged ».

Ajoutez l'événement "When Canvas1 Dragged"

Ensuite, ajoutez le bloc de condition « When Canvas1 Drawline ».

Ajoutez la condition "When Canvas1 Drawline"

Etape 4 : paramétrer les variables pour que les lignes se dessinent

L’opération de « Canavs Dragged » va se répéter encore et encore, très rapidement, quand un utilisateur fera glisser son doigt sur l’écran tactile du smartphone. A chaque fois que le doigt touchera l’écran, cette action fera appel à l’événement « When Canvas Dragged » et une ligne se tracera entre l’emplacement précédent (prevX, prevY) du doigt puis le suivant (currentX, currentY). Pour ajouter les variables à l’événement, passez votre souris au-dessus des paramètres pour récupérer les blocs « get ». 

Paramétrez les variables de l'événement

Et voilà, vous venez de construire votre application DigitalDoodle ! Vous pouvez maintenant la tester. Pour ouvrir votre application Androïd, il vous suffit de cliquer sur « Build ». Vous pouvez choisir de générer un QRcode pour visualiser votre application. Ou alors vous pouvez générer votre fichier APK pour mettre votre application en ligne sur le Play Store.

Ouvrez l’application et faites glisser votre doigt sur l’écran : voyez-vous les lignes se dessiner ?

Pour aller plus loin avec cette application, App Inventor 2 vous permet de changer la couleur de la ligne, de modifier le fond d’écran, de dessiner des cercles à la place de lignes ou encore d’utiliser votre appareil photo pour prendre une photo puis dessiner dessus !

Félicitation pour votre première application avec App Inventor 2 et à bientôt pour un nouveau tutoriel d'application Androïd !

Alice G