[TUTO] Ma première application AppInventor

Bonjour

Aujourd'hui je vous met le premier Tuto pour apprendre les bases pour programmer (si on peut dire programmer)

C'est vraiment les bases après faudra comme moi attendre d'autre tuto. Je les publierais des que je les trouves.


Ce Tuto va vous permettre de démarrer la construction de votre première application: A l'image d'un chat qui miaule que lorsque vous le caressez. Vous pouvez également regarder cette vidéo https://www.youtube.com/watch?v=nC_x9iOby0g ou vous pourrez voire comme il est facile de créer une application.
Lorsque vous aurez terminé la construction Hello Purr, vous serez prêt à concevoir et construire des applications vous même (en théorie).
Avant de commencer, assurez-vous de bien avoir configuré votre PC et mobile.



En construisant HelloPurr, vous apprendrez à utiliser les trois principaux outils de travail d'App Inventor.

- Le design : L'endroit ou vous Glisser déposer le design de votre application. Il s'exécute dans votre navigateur web. En somme ce n'est que du décore ça n'agit avec rien ça ne fait rien.
- L' éditeur de blocs : L'endroit ou vous aller définir le comportement de l'application. Il s'agit d'une demande distincte avec sa propre fenêtre. C'est la que vous aller dire au programme toi tu fait ca toit quand ça fait ça tu fait ça etc c'est la programmation du logiciel mais en très simplifier (pour ceux qui sont bon an anglais informatique)
- Le téléphone : Connecté à votre ordinateur via un cordon USB. vous pourrez voire en directe ce que vous construisez et pourrez tester en directe pas à pas lors de la construction

Pour construire Hello Purr vous aurez besoin d'une image et un son de votre choix .
Pour le tuto vous pouvez téléchargez ces fichiers.

- Photo du chat : http://appinventor.googlelabs.com/learn/tutorials/hellopurr/HelloPurrAssets/kitty.png
- son de miaulement : http://appinventor.googlelabs.com/learn/tutorials/hellopurr/HelloPurrAssets/meow.mp3


Démarrez le site de conception et créez un nouveau projet.

Dans votre navigateur Web, allez sur site d'App Inventor à http://appinventor.googlelabs.com . Si c'est la première fois que vous avez utilisé App Inventor, vous verrez la page projets vide. Il devrait ressembler à ceci:



Créez un nouveau projet

- 1 Cliquez sur New sur le côté gauche, près du haut de la page.
Entrez le nom du projet "HelloPurr" (en un mot, sans espace) dans la boîte de dialogue qui s'affiche,
- 2 cliquez sur OK.

Le navigateur ouvre la partie design, l'endroit où vous sélectionnez les composants de votre application et il devrait ressembler à ceci:



Sélectionnez les composants à la conception de votre application

Les composants d'App Inventor sont situés sur le côté gauche de l'écran, sous le titre Palette.
Les composants sont les éléments de base que vous utilisez pour faire des applications sur votre mobile Android.
Ils sont comme les ingrédients d'une recette.
Certains composants sont très simples, comme le "composant Label", qui permet de mettre du texte sur l'écran, ou un "composant button" que vous appuyez dessus pour lancer une action.
D'autres éléments sont plus élaborés, un "composant Drawing Canvas" qui peut contenir des images fixes ou et animations, un accéléromètre (motion) capteur qui fonctionne comme un contrôleur de la Wii et détecte lorsque vous déplacez ou secouer le téléphone, les composants qui font ou envoie des messages texte, des composants qui jouent musique et vidéo, des composants qui obtenir des informations de sites Web, et ainsi de suite.

Pour utiliser un composant dans votre application, vous devez cliquer dessus sans le relâcher et le faire glisser vers le "Viewer" au milieu du design.
Lorsque vous ajoutez un composant dans le "Viewer", il apparaîtra également dans la liste des composants sur le côté droit de la "Viewer" dans la fenêtre "Coponents".

Les composants ont des propriétés qui peuvent être ajustés pour changer la façon dont le composant apparaît dans l'application. Pour afficher et modifier les propriétés d'un composant, vous devez d'abord sélectionner le composant souhaité dans la liste des composants ou en cliquant sur le composant dans le "Viewer".


Étapes à suivre pour la sélection des composants et la définition des propriétés

Dans HelloPurr Nous voulons avoir un bouton ("Button") composant qui a la propriété d'image vous metez le fichier que vous avez téléchargé plus tôt kitty.png, ou n'importe quel image.

Voila comment faire :

- 1 Faites glisser le composant bouton ("Button") dans "Screen1" . Le bouton composant est situé dans la section de base de la palette.
- 2 Dans la liste des propriétés ("Properties"), sous l'image, cliquez sur aucun ...
- 3 Cliquez sur Ajouter ... .
- 4 Sélectionnez le fichier que vous avez téléchargé plus tôt kitty.png.
- 5 Supprimer le Texte de Button1 énumérées dans le texte de propriété.

Votre design doit ressembler à ceci:



Ouvrir l'éditeur de blocs et connecter votre téléphone

Le Designer est l'un des trois outils principaux que vous utiliserez lors de la création de vos applications. Le second est l’éditeur de blocs ("Blocks editor"). Le troisième est le téléphone.
Vous pourrez utiliser l'éditeur de blocs pour attribuer des comportements à vos composants, ce qui doit arriver lorsque l'utilisateur de votre application appuie sur un bouton.

L'éditeur de blocs ("Blocks editor") s'exécute dans une fenêtre séparée. Lorsque vous cliquez sur Ouvrir l'éditeur de blocs ("Open the blocks editor") de la fenêtre designer, l'éditeur de blocs télécharge un fichier, l'installe et l’exécute (si vous accepter mais si vous n'accepter pas ça marche pas évidement).
Ce processus peut prendre 30 secondes ou plus.
Si l'éditeur de blocs ne s'ouvre pas, il se peut que votre navigateur n'est pas configuré pour exécuter des applications Java téléchargées automatiquement. Dans ce cas, recherchez le fichier téléchargé nommé AppInventorForAndroidCodeblocks.jnlp et l'ouvrir. La fenêtre de l'éditeur blocs doit se présenter comme indiqué ci-dessous, avec un menu à gauche pour les blocs de programme , et un grand espace vide "Canvas" pour placer les blocs à assembler.



Avant de continuer à construire l'application, vous aurez besoin de connecter votre téléphone. Assurez-vous que vous avez déjà configuré votre téléphone.
Maintenant, connectez votre téléphone à l'ordinateur avec un câble USB, puis cliquez sur connecter au périphérique ("Connect to device...") le bouton est en haut de la fenêtre de l'éditeur Blocks. Vous verrez une liste drowdown avec votre téléphone énumérés, identifié par son type de modèle (par exemple, HT99TP800054). Cliquez dessus. Vous verrez une flèche jaune qui se deplace d'avant en arrière, montrant que cette App Inventor se connecte au téléphone. La création de cette connexion peut prendre une minute ou deux. Quand tout sera fait, la flèche arrêtent de bouger et passe au vert, et si vous regardez l'écran du mobile, vous verrez la photo du chat qu'on a deja installer dans votre application - c'est le début de votre application!

Prochaines étapes

Page traduit par mes soins. Page original http://appinventor.googlelabs.com/learn/setup/hellopurr/hellopurrphonepart1.html

Création de votre première application (partie 2): Fin de HelloPurr

Maintenant que vous avez configuré votre ordinateur et le périphérique, et vous avez appris comment fonctionne le designer et le blocs Editor, vous êtes prêt à finaliser l'application HelloPurr.
À ce stade, vous devriez avoir le designer et l'éditeur de blocs ouverts dans une autre fenêtre chacun et votre appareil soit le téléphone soit l'émulateur connecté à l'éditeur de blocs.

Voici un aperçu des étapes que vous allez faire dans ce tutoriel pour terminer l'application:

Dans le Designer:

- Ajouter un composant Label qui lit "Pet the Kitty".
- Téléchargez le fichier meow.mp3
- Ajouter un composant Sound qui joue le fichier "meow.mp3".

Dans l'éditeur de blocs:

Créer un gestionnaire d'événements qui va indiquer que lorsque l'utilisateur touche la photo, un son sera jouer.


Ajout du label

Sous Palette

Faites glisser un composant Label dans la visionneuse ("viewer"), en le plaçant en dessous de la photo.
Il apparaît dans votre liste de composantes comme Label1

Sous Propriétés

Modifiez la propriété Text de Label1 à lire "Pet the Kitty". Vous verrez le changement de texte dans le concepteur et sur votre appareil.
Changer le BackgroundColor de Label1 en cliquant sur la case
Changer le TextColor de Label1
Changer le FontSize de Label1 à 30
Le concepteur doit maintenant ressembler à ceci:



Ajout du son Meow

Sous Palette

- 1 Cliquez sur l'en-tête marqué "Media" pour développer la section composant de Media sous palette.
- 1 Faites glisser un élément "sound" et le placer dans le "Viewer". Peut importe où vous le déposez, il apparaîtra dans la zone au bas de la visionneuse marquée "non-visibles composants" Composant non vissible.

Sous Propriétés

- 1 Cliquez sur Ajouter ("Add...")
- 2 Ajouter le fichier meow.mp3 au projet.

Le concepteur doit maintenant ressembler à ceci:



Programmer le son à jouer


Utilisation de l'éditeur de Blocs "The blocks Etitor" nous allons définir la façon dont l'application va se comporter. Nous allons dire aux composants quoi faire, et quand le faire. Vous allez dire au bouton kity de jouer un son lorsque vous le toucherez. Si les éléments sont des aliments les composant sont le mode de cuissons (c'est pas de moi lol).

L'éditeur de blocs a deux pattes sur le coin supérieur gauche: Built-in et mes blocs . Les boutons sous chaque onglet permet d'élargir et d'exposer les blocs quand on clique dessus.
Le Haut du blocs sont l'ensemble standard de blocs qui sont disponibles pour toutes les applications que vous créez.
Les blocs sous mes blocs contiennent des blocs spécifiques qui sont liés à l'ensemble des composants que vous avez choisi pour votre application.

Pour rendre la lecture du son, vous aurez besoin pour faire glisser les Button1.Click bloc et la Sound1.Play bloc dans l'éditeur. Les blocs s’assemble comme des pièces de puzzle.

Étapes à suivre pour faire jouer le son

Accédez à l' éditeur de blocs . Il peut être couverte par le navigateur web.
Cliquez sur le Mon blocs onglet sur ​​le côté supérieur gauche.
Cliquez sur Button1 .
Faites glisser le moment ne Button1.Click bloc sur l'éditeur.
Cliquez Sound1 .
Faites glisser le Sound1.Play appel bloc sur l'éditeur et le déposer dans l' en Button1.Click ne bloc.
Cliquez sur l'image pour chat sur votre appareil. Vous devriez entendre le miaulement chat.
Sous la direction de vos blocs devrait ressembler à ceci:[/hide]


Convertir votre application
Félicitation, votre première application fonctionne ! Si vous étiez en train d'utiliser votre smartphone en tant qu'émulateur, l'application ne tournera dessus qu'en étant connecté au PC. Si vous le déconnecté, l'application se coupera ; en reconnectant elle se relancera.
Pour récupérer votre application vous devez donc " la convetire " pour créer un Pactage d'application (fichier .apk). Cliquez sur " Package for Phone " au coin supérieur droit de la page de Designer vous proposera 3 options d'empactage :

1 Si le smartphone est connecté, vous pouvez télécharger automatiquement l'application sur ce dernier.
2 Vous pouvez télécharger l'application sur votre ordinateur sous forme d'un fichier APK, que vous pourrez distribuer et partager comme bon vous semble, et l'installer manuellement sur les smartphones utilisant le Android ADB Programm
3 Vous pouvez générer un code-barre que vous pourrez utiliser pour installer l'application sur votre smartphone en utilisant un scanner de code-barre (comme ZXing Barcode Scanner - gratuit sur le market). Ce code-barre fonctionnera uniquement sur votre smartphone. Si vous voulez partager votre application avec d'autres personnes, vous aurez besoin de télécharger le fichier APK (2ème option).

Review
Voici quelques concept clés pour la création de vos prochaines applications :

- Construisez des applications en seléctionnant les composants (ou ingrédients) et en leur disant quoi faire et quand le faire.
- Utilisez le Designer pour choisir des composants. Certains sont visibles et d'autres ne le sont pas.
- Ajoutez des médias(sons et images) aux applications en les téléchargeant depuis votre ordinateur.
- Utilisez le Blocks Editor pour assembler des block qui définieront le comportement des composant.
- Quand [condition] Faire [evènement]... les blocks définissent des évènements d'utilisateurs, qui dictent aux composants quoi faire quand quelque chose se produit [i]
- Appeller[quelqu'un]... Les blocks dictent aux composants les choses à faire.

ps : Merci à Olve pour la fin de traduction ^^


Dernière édition par lbalpha le Mar 13 Sep 2011 - 9:10, édité 8 fois

Superbe tuto, bien joué

Merci agrimok tous ces mot m'on en fait oublier ma politesse ^^

Les tutoriaux anglais ne manquent à cette adresse :
http://appinventor.googlelabs.com/learn/tutorials/index.html
En français par contre c'est plus dur.

voilà qui va être chouette, je vais essayer de suivre...

_achille_ a écrit:

Les tutoriaux anglais ne manquent à cette adresse :
http://appinventor.googlelabs.com/learn/tutorials/index.html
En français par contre c'est plus dur.

Merci je teste les tuto et après je les traduit pour les autres si j'ai réussit à les faire bien sur ^^

Dernière édition par lbalpha le Mer 27 Avr 2011 - 10:10, édité 1 fois

Super tuto
Je vais également suivre afin de m'essayer à appinventor

Hello

Je suis en train d'essayer aussi cette application, mais j'ai un problème, (qui en soit n'est pas trop gênant... quand je vais dans la partie block Editor, impossible de faire reconnaitre mon tel... il trouve un tél du type "0123456789ABCDEF", mais impossible de le lié...
Pour info, mon tél est un HD2 sous ROM BICHON

Alors si le tel est reconnue et seulement si le tel est reconnue la ou tu voie le code avec des chiffres veut dire qu'il est reconnue.
Maintenant si ça fonctionne pas je sais pas quoi te dire.

Nory a écrit:

Hello

Je suis en train d'essayer aussi cette application, mais j'ai un problème, (qui en soit n'est pas trop gênant... quand je vais dans la partie block Editor, impossible de faire reconnaitre mon tel... il trouve un tél du type "0123456789ABCDEF", mais impossible de le lié...
Pour info, mon tél est un HD2 sous ROM BICHON

concernant ton souci, il y a deux émulateurs possibles pour tester tes applications, soit un émulateur virtuel, soit si ton mobile est branché il devient le lieu de test.
effectivement il nomme le téléphone 0123456789abcdef, en tout cas chez moi et j'ai également un hd2 sous rom bichon. Il faut alors cliquer sur 0123456789abcdef et attendre quelques secondes. Après ces quelques secondes, on a l'application sur l'écran du hd2. si il est en veille, il faut l'en sortir soi même.

j'espère que cela t'aidera.

Bonjour,

En faisant ton tuto Ibalpha j'ai utilisé une image que j'ai redimensionné à 480x800 (dimensions en pixel du Desire S), mais elle ne rentre pas dans l'écran de mon Desire S. J'en ai conclu qu'en fait je n'avais pas installé les drivers du téléphone sur le PC.

Quelqu'un pourrais m'indiquer où les trouver ?
Je suis plus orienté design que informatique, et j'ai du mal à trouver ces drivers :s

Normalement, en téléchargeant HTC Sync, tu as les drivers de ton phone, non?

Bah en fait, du fait que HTC Sync ne reconnaissait pas mon phone, j'ai pensais que ça n'avait pas suffit. Mais en fait j'avais pas mis mon téléphone en mode HTC Sync... (je sais je sais, no comment pliz )

Néanmoins, le fait est que l'image redimensionné à 480x800 est scrollable verticalement, et pas qu'un peu, alors que ce ne devrait pas être possible...

M'enfin bon, j'vais passé à la suite, sinon j'peux rester bloquer des jours la dessus ; si quelqu'un sait le pourquoi du comment, je suis tout ouïe !

Edit : J'ai pu finir Merci encore Ibalpha pour la traduction tuto ! A quand la suite ?!

Ben content que tu es trouvé la réponse a ton problème.

Pour la suite j'aurais espérer que des bon gars commence a travailler dessus et nous faire par de ces découverte et nous aider par la même occasion.

Moi je ne sais pas a quoi correspond chaque bouton du logiciel donc je ne sais pas par quoi commencer donc si personne nous aide moi non plus je ne le peut pas.

Bonne chance dans l'utilisation de ce logiciel

Je sais pas pourqoui, mais j'ai jamais aimé AppInventor

Pour mon problème, il n'a pas été résolu, mais j'ai fais sans.
Quand j'aurais trouvé la réponse je vous en ferais part.

Je regarde en ce moment même le tuto original pour finir la traduction.

Empacter votre application
Félicitation, votre première application fonctionne ! Si vous étiez en train d'utiliser votre smartphone en tant qu'émulateur, l'application ne tournera dessus qu'en étant connecté au PC. Si vous le déconnecté, l'application se coupera ; en reconnectant elle se relancera.
Pour récupérer votre application vous devez donc " l'empacter " pour créer un Pactage d'application (fichier .apk). Cliquez sur " Package for Phone " au coin supérieur droit de la page de Designer vous proposera 3 options d'empactage :

1 Si le smartphone est connecté, vous pouvez télécharger automatiquement l'application sur ce dernier.
2 Vous pouvez télécharger l'application sur votre ordinateur sous forme d'un fichier APK, que vous pourrez distribuer et partager comme bon vous semble, et l'installer manuellement sur les smartphones utilisant le Android ADB Programm
3 Vous pouvez générer un code-barre que vous pourrez utiliser pour installer l'application sur votre smartphone en utilisant un scanner de code-barre (comme ZXing Barcode Scanner - gratuit sur le market). Ce code-barre fonctionnera uniquement sur votre smartphone. Si vous voulez partager votre application avec d'autres personnes, vous aurez besoin de télécharger le fichier APK (2ème option).

Review
Voici quelques concept clés pour la création de vos prochaines applications :

- Construisez des applications en seléctionnant les composants (ou ingrédients) et en leur disant quoi faire et quand le faire.
- Utilisez le Designer pour choisir des composants. Certains sont visibles et d'autres ne le sont pas.
- Ajoutez des médias(sons et images) aux applications en les téléchargeant depuis votre ordinateur.
- Utilisez le Blocks Editor pour assembler des block qui définieront le comportement des composant.
- Quand [condition] Faire [evènement]... les blocks définissent des évènements d'utilisateurs, qui dictent aux composants quoi faire quand quelque chose se produit [i]
- Appeller[quelqu'un]... Les blocks dictent aux composants les choses à faire.

_________________________________

Voilà la fin de la traduction du tuto.
Pour ceux que ça interesse de voir la suite pour mieux apprendre à utilise AppInventor, voici le lien des tutos :
http://www.appinventorbeta.com/learn/ (générales)
http://www.appinventorbeta.com/learn/tutorials/index.html (tutoriels)

lbalpha si tu souhaite reprendre mon morceau de traduction pour l'ajouter à la tienne, ne te gène pas. Et je t'autorise à modifier ma traduction si le coeur t'en dis : j'ai traduit "package" par empactage par exemple, ce qui n'est peut-être pas nécessaire dans le milieu du vocabulaire de programmation (très anglophone) ; je fais confiance à ton jugement.

oki je l'ajoute mais je croyez que j'avez fait la traduction jusqu'au bout lol Merci bien

Kioul !
Je suis en train de m'occuper de la traduction du second tuto au sujet du sorte de " Paint " : créer une zone dessinable, changer de couleur, de taille du pinceau, effacer la zone... le tuto commence même à abordé l'usage des variables ! (Miam )
Bref, ce weekend je pense que je l'aurais fini.

oki tu fera un poste à toi dans ce cas pour que ça fassent propre

Genre App Inventort 2eme tuto ou quelque chose de mieux ^^