Tutoriel – App Inventor : Journal Secret

Réflexion préliminaire

Pour avoir accès à la fiche complète c’est par ici !

L’application que nous allons créer ici est un petit peu plus compliquée que celles que nous avons créées jusqu’à présent. C’est pourquoi il peut être intéressant de se faire un schéma récapitulatif de ce que l’on veut. Nous vous conseillons de toujours faire ainsi lorsque vous créez une application. Éteignez votre ordinateur et prenez une feuille de papier pour dessiner le « squelette » de votre application.

Le design

Etape 1 : Paramétrer l’écran (Screen)

Puis, nous allons ajouter une étiquette (Label) avec écrit « Entrez votre mot de passe » dessus. Par la suite, nous changerons cette phrase quand l’utilisateur se trompe de mot de passe.

Etape 2 : Ajouter un texte (Label)

Puis, nous allons ajouter une étiquette (Label) avec écrit « Entrez votre mot de passe » dessus. Par la suite, nous changerons cette phrase quand l’utilisateur se trompe de mot de passe.

Etape 3 : Ajouter un bouton (Button)

Depuis la partie gauche Palette, ajoutez ensuite un bouton (Button) sur lequel nous écrirons
« Go » dans ses Properties.

Etape 4 : Ajouter une zone de texte de mot de passe (PasswordTextBox)

Depuis la partie gauche Palette, ajouter une zone de mot de passe (PasswordTextBox) qui nous permettra d’entrer le mot de passe pour rentrer dans l’application.
Votre application devrait ressembler à cela :

 

Les composantes de votre application

 

La programmation Screen1

Nous allons maintenant programmer l’application en allant dans Blocks. Si vous ne trouvez pas l’un des blocs utiles, n’hésitez pas à consulter l’annexe.

Etape 1 : Ajouter un second écran

Dans la programmation, nous allons avoir besoin de créer un deuxième écran, restez dans la partie design et ajoutez un deuxième écran, appelez le « Journal_secret ».

C’est important de créer le deuxième écran tout de suite car nous allons avoir besoin d’envoyer l’utilisateur vers la deuxième page.

Etape 2 : Coder le changement d’écran par mot de passe

Il va falloir faire en sorte que lorsque l’on rentre un mot de passe, le programme vérifie si c’est le bon. Créez le bloc suivant :

 

Quand le bouton “Go !” est cliqué, on vérifie si le mot de passe est “123456”. Vous pouvez mettre ce que vous désirez. Si le mot de passe correspond, nous nous rendons à la page 2. Sinon le
programme signale qu’il y a eu une erreur.

Le design du second écran

Etape 1 : Paramétrer l’écran (Journal_secret)

Rendez-vous dans le second écran, il aura déjà normalement le nom « Journal_secret ». Ce n’est pas fondamental mais vous pouvez cocher « Scrollable » dans les Properties. Ainsi, votre écran pourra être aussi grand que vous voulez quand vous ajouterez du contenu.
Changez le titre de l’écran comme sur l’image :

Etape 2 : Ajouter des boutons (Button)

Depuis la partie gauche Palette, ajoutez 4 boutons que vous appellerez : « Nouveau texte »,
« Sauvegarder », « OK » et « Retour ». Pour renommer un bouton procédez comme ci-contre :

Pour les textes des boutons, ce sont les mêmes que leurs noms.

Etape 3 : Ajouter des zones de texte (TextBox)

Depuis la partie gauche Palette, ajouter deux zones de texte TextBox, nommez les “Titre” et
“TexteJournal”. Pour la seconde, il va falloir modifier sa taille et permettre la présence de plusieurs lignes.

Etape 4 : Ajouter une étiquette (Label)

Depuis la partie gauche Palette, importez une étiquette (label). Changez son texte en “Titre ?” et appelez-la “Titre?” par exemple.

Etape 5 : Ajouter un gestionnaire de fichier (File)

Enfin, il ne nous reste plus qu’à ajouter un gestionnaire de fichiers. Vous le trouverez dans Palette puis l’onglet storage.
Organisez vos composants ainsi, après avoir cliqué sur la petite croix en haut:

Dans les Properties de tous nos éléments, il y a une case “Visible”, décochez-là pour
“Sauvegarder”, “TexteJournal”, “Titre?”, “Titre” et “Ok”.
Vous devez avoir les composants suivants :

La programmation Screen2

Nous allons maintenant programmer l’application. Si vous ne trouvez pas un des blocs utiles, n’hésitez pas à consulter l’annexe. Allez dans la partie Blocks.

Etape 1 : Programmer le retour à l’écran1

C’est plus une précaution dans la conception du programme mais nous allons programmer le bouton retour pour qu’il nous renvoie à la page du mot de passe. Ainsi, nous n’aurons pas besoin de redémarrer l’application pour tester les deux écrans. Vous pourrez choisir de l’enlever ou de le garder une fois l’application achevée.

Le code est très simple: quand on clique sur le bouton retour, on retourne à l’écran dont le nom est “Screen1”.

Etape 2 : Coder l’ajout de nouveaux textes

Nous voulons écrire notre premier texte dans le journal intime. Pour cela, nous cliquerons sur le bouton “Nouveau Texte”.

Quand le “NouveauTexte” est pressé, on va demander à l’utilisateur le titre qu’il veut donner à l’article d’aujourd’hui et lui permettre de cliquer sur OK pour valider.

Etape 3 : Valider le titre

L’utilisateur entre le titre qu’il désire et on affiche la zone de texte :

Quand le “Ok” est pressé, on va regarder s’il y a déjà un texte enregistré dans un fichier “Texte.txt”. Si c’est le cas, on l’ajoutera dans un deuxième temps, sinon on colle juste le texte qui existe déjà dans la zone de texte et l’on rajoute notre nouveau titre. Puis on saute deux lignes (en utilisant n qui saute une ligne automatiquement).

Etape 4 : Ajouter le contenu de fichier

Si le fichier dans lequel on sauvegarde nos articles n’est pas vide, il faut ajouter son contenu à la page, pour cela :

Quand le fichier contient du texte, on l’ajoute automatiquement à notre texte déjà existant.

Etape 5 : Sauvegarder son texte dans un fichier

Une fois que nous avons fini notre texte, il faut encore l’enregistrer dans un fichier. Procédez ainsi :

Quand on clique sur le bouton sauvegarder, on supprime ce qui pourrait se trouver dans le fichier « Texte.txt » et on ajoute notre sauvegarde du journal.
Normalement, vos blocs pour le second écran devraient ressembler à cela :

Aller plus loin

Voici une liste (non exhaustive bien sûr) des améliorations possibles :

• Améliorer l’interface graphique.
• Pouvoir changer son mot de passe via une interface à part, et même pourquoi pas le recevoir par mail (interface type : mot de passe oublié).
• Permettre de charger des textes déjà écrits via une liste de fichiers présents.
• Enregistrer plusieurs comptes utilisateurs différents (couple nom d’utilisateur, mot de passe).
• Rendre le mot de passe un peu plus sécurisé (non présent dans le code source). Pour cela, il vous suffit de trouver le bon bloc dans la partie « text ».

Annexe