Tutoriel en 10 étapes pour faire son application

Statut
N'est pas ouverte pour d'autres réponses.

Kavage

Anciennement Keke.
Ancien staff
Inscription
18 Octobre 2012
Messages
4 244
Réactions
863
Points
21 901
RGCoins
25
Tutoriel en 10 étapes pour faire son application

Vous souhaitez mettre sur pieds votre première application? Voici un tutoriel rapide en 10 étapes pour vous guider, de la création de l'application au test sur votre mobile.

Ce tutoriel décrit les bases principales pour bien débuter, après quoi vous apprendrez par vous-même simplement en utilisant l'éditeur d'application.


1 - Création de l'application


Depuis votre compte Make me Droid, créez une nouvelle application à partir d'un modèle vide.

firstapptuto_create.jpg

Une fois l'application créée, cliquez sur son icône et choisissez votre propre icône depuis votre ordinateur.

Enfin, cliquez sur le bouton Construisez votre application pour commencer à bâtir les écrans dans l'éditeur.


2 - Le menu principal


Les applications sont faites d'écrans reliés les uns aux autres par des actions. Un premier écran de type liste est créé pour vous dans l'application de base: vous pouvez le modifier ou le supprimer.

Commençons la création des écrans: dans la liste évoquée ci-dessus, ajoutez 2 éléments en cliquant sur nouvel élément.

firstapptuto_list.jpg

Modifiez ensuite le contenu de la liste, en nommant le premier élément Ma gallerie d'images et le second Messagerie. Modifiez les icônes et la description à votre gré.

firstapptuto_list2.jpg




3 - Une galerie d'images


Créez un nouvel écran via le bouton Ajouter un écran. Sélectionnez Galerie d'images, nommez l'écran Galerie puis validez.

Cet écran-modèle comporte une galerie d'images à la base, mais vous pouvez le modifier comme bon vous semble.

Pour ajouter une image, cliquez sur la galerie (vous voyez alors les propriétés de la galerie horizontale sur le coté), puis ajoutez-y un élément Image via le bouton
plus_icon12.png
. Pour plus d'informations sur la mise en page, veuillez consulter la page .

firstapptuto_gallery.jpg




4 - Une messagerie pour l'application

Nous allons embarquer une messagerie dans l'application, pour que les utilisateurs puissent partager des informations entre eux et avec vous. Créez un nouvel écran de type Messagerie, que vous nommez Messagerie.

Vous n'avez rien d'autre à modifier sur cet écran pour l'instant. La messagerie fonctionne d'elle-même.

firstapptuto_messaging.jpg




5 - Lier les écrans entre eux
app28.png



Lorsque l'application est lancée, le premier écran affiché (hormis les écrans d'accueil) est l'écran que vous avez défini en tant qu'écran initial via le bouton approprié dans l'éditeur. Par défaut, la liste de départ est déjà l'écran initial, donc vous n'avez rien à modifier.

Nous souhaitons que lorsque l'utilisateur clique sur le premier élément du menu principal, la galerie s'affiche. Et pour le second élément, nous voulons afficher la messagerie. Pour cela nous allons définir des actions sur ces éléments. Notez que les actions sont diverses: afficher un écran, ouvrir une page web, jouer un son...

Revenez sur l'écran liste (celui du début), puis cliquez sur l'icône
link.gif
du premier élément (Ma galerie d'images). L'éditeur d'actions s'ouvre. Sélectionnez l'action Afficher un écran, puis Galerie. Validez via Appliquer cette action.

Faites de même pour l'élément Messagerie. Vous obtenez alors un écran qui ressemble à ceci (remarquez les actions Afficher un écran):

firstapptuto_list3.jpg




6 - La barre de raccourcis
app28.png


La barre de raccourcis se situe en bas des écrans. Elle reste identique sur tous les écrans de l'application. Dans notre cas, nous allons y placer 4 raccourcis: Accueil, Galerie, Messagerie et Site web.

Si la barre de raccourci n'a pas 4 icônes, ajoutez-en en cliquant sur les boutons
plus_icon.png
.

firstapptuto_dock.jpg

Pour chaque raccourci, choisissez une image, et donnez-lui un titre très court.

firstapptuto_dock2.jpg

Chaque raccourci doit ensuite être associé à une action comme précédemment. Liez les raccourcis, Accueil, Galerie et Messagerie à leurs écrans respectifs. Concernant le raccourci Site Web, rattachez-le à une action de type Ouvrir une page web, toujours via les icônes
link.gif
.



7 - Un peu de personnalisation
app28.png


Le bouton Personnaliser vous donne accès à un menu qui vous permet de changer l'apparence de l'application. Les modifications faites via ce menu sont globales à l'ensemble de l'application. Certains écrans possèdent aussi des personnalisations individuelles.

Ouvrez le menu en question, puis choisissez le thème Sombre et cliquez sur Appliquer.

Ensuite, dans la section zone centrale, cliquez sur l'image de fond pour choisir votre propre image depuis votre ordinateur (sombre de préférence). Définissez sa transparence à 70%.

Si vous le souhaitez, passez un peu de temps pour modifier d'autres valeurs. Le résultat s'affiche dans l'éditeur lorsque vous cliquez sur Fermer.

firstapptuto_custo.jpg




8 - Enregistrement et génération
app28.png


La mise en place de notre première application est terminée.

Cliquez sur le bouton Enregistrer pour sauvegarder vos changements. Une fois la sauvegarde effectuée, cliquez sur Retour vers votre compte pour rejoindre la page principale de l'application.

L'application doit désormais être générée, ce qui signifie que l'outil va créer pour vous le fichier exécutable Android (similaires aux applications Windows, c'est-à-dire le fichier à partir duquel l'application peut être lancée). Ce fichier, nommé APK, sera ensuite publié sur Google Play pour rendre votre application accessible au plus grand nombre.

Depuis la page de l'application, cliquez sur générer l'application puis patientez quelques instants, après quoi vous obtiendrez le fichier APK désiré.

firstapptuto_gen.jpg




9 - Test de l'application
app28.png


Que vous possédiez un smartphone sur lequel tester votre application ou que vous souhaitiez utiliser le simulateur Android, suivez le guide pour pouvoir lancer votre application sur mobile.

Notez qu'une fois la première installation manuelle effectuée, vous pouvez utiliser le pour gagner du temps.

firstapptuto_mobileres.jpg




10 - Mise en ligne sur Google Play
app28.png


Votre application est prête, testée et complétée? Il ne vous reste qu'à la mettre en ligne sur Google Play en suivant ce guide !

 
GG tres beau tuto +1 ;)
 
GG bon tuto ! :)
 
très bon tuto merci ! :)
 
Statut
N'est pas ouverte pour d'autres réponses.
Retour
Haut