Création d'applications mobiles pour débutants

Présentation du projet qui sera réalisé dans cette section. Vous réaliserez un premier projet complet jusqu'à l'installation sur le téléphone, ce qui vous permettra de vous familiariser avec les différentes étapes de conception, de test et de développement, et les principes de fonctionnement d'App Inventor. 

Les différentes étapes décrites dans cette session seront suivies à l'identique dans toutes les autres sessions.

Conseils et recommandations méthodologiques pour la création et le développement de vos applications.

Comment est construite une application du point de vue du programmeur.

Principes de la programmation dans App Inventor (orientée objet).

Comment créer un projet dans App Inventor.

Création de l'interface utilisateur de l'appli Hello World dans l'interface de design.

Comment tester une application pendant le développement, sur son téléphone, sa tablette ou sur l'émulateur.

Création du code de l'application dans l'interface de programmation.

Bonnes pratiques de développement.

Note complémentaire : 

Si vous voulez avoir les codes de toutes les langues supportées par le composant Yandex Translate, vous pouvez les trouver ici :  https://tech.yandex.com/translate/doc/dg/concepts/api-overview-docpage/

Attention, il y a une petite coquille dans la vidéo : en effet, une des langues est écrite en toutes lettres, ce qui peut générer un code d'erreur. Il est recommandé de mettre les "codes" de toutes les langues en 2 lettres. Merci.

Comment créer facilement l'icône d'une application mobile avec des outils gratuits en ligne.

Comment installer une application sur son téléphone mobile ou sa tablette.

Comment la partager avec d'autres personnes.

Note complémentaire : comment publier son appli sur le Google Play Store

Ce cours n'explique pas la publication sur le Google Play Store car elle nécessite des compétences et du suivi qui vont au-delà du périmètre de ce cours. Sachez néannmoins que vous pouvez tout à fait publier vos applications créées avec App Inventor sur le Play Store.

Les explications pour ce faire (en anglais) sont disponibles sur le site du MIT App Inventor, suivez ce lien : http://appinventor.mit.edu/explore/ai2/google-play.html

Conseils pratiques pour vous aider à identifier les sources d'erreur et à les corriger dans App Inventor.

Récapitulatif des instructions de connexion, de test, d'installation et de partage vues durant cette section et qui seront répétées à l'identique pour chaque nouveau projet.

Code source complet de l'application Hello World.

Fichier image, car le format de fichier de code source d'App Inventor (fichier en .aia) n'est pas téléchargeable sur Udemy.

Note complémentaire :

Si vous voulez avoir les codes de toutes les langues supportées par
Yandex Translate, vous pouvez les trouver ici :
https://tech.yandex.com/translate/doc/dg/concepts/api-overview-docpage/

Exercices complémentaires pour vous permettre de pratiquer par vous-même, dès cette première session.

Solution dans un fichier séparé (format Word), car les formats de fichiers .aia (code source dans App Inventor) ne sont pas téléchargeables sur Udemy.

Présentation de l'application qui sera réalisée.

Comportement de l'application.

Présentation des composants et des notions qui seront abordés dans cette section.

Comment ouvrir un second écran.

Comment importer des images dans une application, utilisation de banques d'images libres de droit.

Comment créer des boutons et des couleurs personnalisés.

Comment utiliser l'appareil photo.

Comment afficher la photo en fond d'écran.

Comment partager la photo.

Comment dessiner sur la photo (traits, points, cercles, épaisseur).

Comment choisir la couleur.

Personnalisation des couleurs.

Visualisation de la couleur active.

Amélioration de l'ergonomie : comment identifier la couleur active et effacer l'écran ; comment accéder à la galerie du téléphone ; comment nommer son fichier.

Création de l'icône de l'application pour l'installation.

Code source complet de l'application My PhotoShare.

Fichier image, car le format de fichier de code source d'App Inventor (fichier en .aia) n'est pas téléchargeable sur Udemy.

Exercices complémentaires pour vous permettre de pratiquer par vous-même et aller plus loin.

Solution dans un fichier séparé (format Word), car les formats de fichiers .aia (code source dans App Inventor) ne sont pas téléchargeables sur Udemy.

Présentation de l'application qui sera réalisée.

Comportement de l'application.

Comment répondre automatiquement à un SMS.

Comment écouter un message texte.

Comment changer le message.

Création et manipulation de listes, ajout et suppression d'éléments.     

Création d'une réponse spécifique à un numéro de téléphone spécifique.

Rajout de la localisation.

Code source complet de l'application Mon Répondeur SMS.

Fichier image, car le format de fichier de code source d'App Inventor (fichier en .aia) n'est pas téléchargeable sur Udemy.

Exercices complémentaires pour vous permettre de pratiquer par vous-même et aller plus loin.

Solution dans un fichier séparé (format Word), car les formats de fichiers .aia (code source dans App Inventor) ne sont pas téléchargeables sur Udemy.

Présentation de l'application qui sera réalisée.

Comportement de l'application.

Présentation des composants et notions qui seront abordés dans cette section.

Instructions pour créer l'écran de l'interface utilisateur dans App Inventor, avant de démarrer la programmation.

A faire avant la vidéo suivante.

Introduction à la géolocalisation : GPS et composant Location.Sensor.

Création d'url dynamiques dans Google Maps.

Affichage d'une carte Google Maps au sein de l'application.

Utilisation de la latitude et de la longitude pour un affichage plus précis.

Manipulation, sauvegarde et récupération de données multiples dans une liste.

Conditions.

Design & ergonomie.

Imbrication de grilles de positionnement à multiples lignes et colonnes.

Visibilité et invisibilité des composants dans l'interface utilisateur.

Code source complet de l'application Où est la voiture ?

Fichier image, car le format de fichier de code source d'App Inventor (fichier en .aia) n'est pas téléchargeable sur Udemy.

Présentation de l'application qui sera réalisée.

Comportement de l'application.

Présentation des composants et notions qui seront abordés dans cette section.

Introduction aux différentes méthodes de déplacement et d'animation d'un objet.

Création de la base du jeu : animation de la balle, déplacement de la planche, incrémentation du score.

Intégration de sons.

Création de procédures pour simplifier les fonctions répétitives.

Création d'un second écran "Préférences" pour personnaliser les couleurs du jeu.

Passage de valeurs entre écrans.

Code source complet de l'application Pong.

Fichier image, car le format de fichier de code source d'App Inventor (fichier en .aia) n'est pas téléchargeable sur Udemy.

Avec cet exercice de codage, vous allez découvrir la manière d'utiliser les composants génériques dans App Inventor.

Les composants génériques vous permettent de reproduire facilement le comportement (et donc le code) pour plusieurs éléments identiques.

Par exemple, dans cet exercice, cela vous permettra de reproduire facilement le composant des Space Invaders, quelque soit le nombre de Space Invaders que vous voudriez rajouter à votre jeu.

Présentation de l'application qui sera réalisée.

Comportement de l'application.

Présentation des composants et notions qui seront abordés dans cette section.

Comment extraire et afficher les éléments d'une liste en créant une boucle.

Modèle de la maquette de l'écran 1 à créer avant de démarrer le tutoriel.

Création du vote : association du nom et du résultat.

Sauvegarde partagée sur une base de données web.

Notifications utilisateur.

Affichage de mon propre vote en écran 1.

Désactivation des boutons après vote.

Réinitialisation du vote.

Simplification du code : création de procédures et variabilisation.

Comment mettre à jour l'application sans la réinstaller : utilisation de liens vers des images en ligne.

Vote gagnant : calcul et affichage des résultats en temps réel.

Utilisation de variables globales et locales.

Code source complet de l'application Votez !

Fichier image, car le format de fichier de code source d'App Inventor (fichier en .aia) n'est pas téléchargeable sur Udemy.

Présentation de l'application qui sera réalisée.

Comportement de l'application.

Présentation des composants et notions qui seront abordés dans cette section.

Indications à suivre pour créer une base de données Google Fusion Tables : à faire avant le début du tutoriel.

Données à récupérer et à intégrer ensuite à l'application dans App Inventor.

Interface utilisateur de l'écran 1 : à créer suivant le modèle ci-joint avant de faire l'étape suivante.

Interface utilisateur de l'écran 2 : à créer suivant le modèle avant de faire l'étape suivante.

Création du questionnaire et des réponses.

Connexion avec Fusion Tables.

Création d'une procédure pour formater automatiquement la requête.

Code source complet de l'application Questionnaire de satisfaction.

Fichier image, car le format de fichier de code source d'App Inventor (fichier en .aia) n'est pas téléchargeable sur Udemy.

Bravo, vous êtes arrivé(e) au bout de ce cours !

Quelques conseils pour la suite dans la vidéo de fin.

Si vous avez apprécié ce cours, merci de penser à lui attribuer une note et quelques feedbacks !

Pour en savoir plus sur Teen-Code (pour ados) et Executive-Code (pour entreprises) :

* Teen-Code initie les ados à la programmation et à la création de projet à travers des stages de vacances à Paris, et des ateliers hebdomadaires à partir de septembre 2017. Toutes les infos sur www.teen-code.com + des tutos vidéos publiés régulièrement sur le blog et la chaîne YouTube !

* Executive-Code est un programme d'acculturation au numérique pour entreprises, s'appuyant sur l'initiation à la programmation et à la création d'applications mobiles pour démystifier la technique et faciliter la collaboration entre équipes fonctionnelles et informatiques en mode agile. Pour en savoir plus sur nos formations : www.executive-code.com

A bientôt peut-être !

Youmna Ovazza