Application Power Apps avec GPS

Vous allez apprendre à créer une application Power Apps avec GPS. Notamment, vous allez afficher une carte de Microsoft Bing géolocalisée.

Pour vous aider, regardez la copie d’écran ci-dessous qui présente un des deux résultats attendus.

Si vous ne voyez rien durant l’exercice, faites des tests avec l’application Power Apps Mobile. Sur un poste de travail, le navigateur Chrome semble mieux fonctionner.

Si vous rencontrez des erreurs dans les manipulations ci-dessous, lisez l’article qui explique comment débuguer les erreurs dans Power Apps.

Gardez à l’esprit que l’interface a pu évoluer fortement depuis que cet article a été rédigé.

Obtenir une clé Bing Maps à utiliser dans l’application Power Apps avec GPS

Pour afficher un emplacement géographique sous forme d’une carte Bing Maps dans Power Apps, vous devez récupérer une clé d’API chez Microsoft. Elle est obligatoire.

Cette clé est un identifiant unique, qui est générée à partir de votre compte Microsoft. Selon son usage, vous avez le droit à un certain nombre d’appels de l’API Bing Maps.

Voilà à quoi ressemble une clé d’API.

Attention la clé ci-dessous est fausse (elle n’existe pas) et elle ne peut pas être utilisée.

AvyDgx0hxBPCWNLJuBPzJ2oK0yCr7tuhzVEdF3fPnIwJEC8CqrUuMV

L’utilisation de la clé est expliquée dans la suite de l’exercice. Toutefois, ce n’est pas très compliqué car elle est simplement transmise comme paramètre lors de l’appel de l’API.

Suivez la procédure décrite sur la page pour obtenir une clé d’API pour Microsoft Maps. Cette procédure est en anglais. Si vous ne comprenez pas cette langue, demandez de l’aide à votre formateur.

La procédure est simple. Toutefois, vous devrez fournir les renseignements suivants :

• Application name (Nom de l’application) : obligatoire. Par exemple : demo.
• Application URL (URL de l’application) : facultatif. Laissez vide.
• Key type (Type de clé) : obligatoire. Indiquez : Basic.
• Application type (Type d’application) : obligatoire. Indiquez : Dev/Test.

Vous obtenez ensuite l’écran suivant :

Il suffit ensuite de cliquer sur Show key pour la voir, ou de cliquer sur Copy key pour la récupérer : copiez la clé et enregistrez-la dans un simple fichier texte, créé avec le Bloc-Notes (notepad) car vous allez bientôt l’utiliser.

Créer une application Power Apps avec GPS

Vous allez créer une application Power Apps avec GPS.

Pour ce faire, ouvrez le site web Microsoft Power Apps.

Ensuite, dans le volet de navigation (à gauche), cliquez sur Applications.

Puis, dans la bannière du volet central (en haut), cliquez sur Nouvelle application (en haut, vers la gauche).

Ensuite, dans le menu qui s’affiche, cliquez sur : Zone de dessin.

Puis, dans le volet central du nouvel onglet, cliquez sur Mode téléphone sous Application vide.

Notez que vous auriez pu aussi bien choisir la disposition de la tablette sous Application vide, car les manipulations sont strictement identiques. Il s’agit d’un choix purement arbitraire.

Enregistrer et renommer l’application Power Apps avec GPS

Vous allez enregistrer et renommer l’application Power Apps avec GPS.

Pour ce faire, cliquez sur le ruban Fichier puis dans le volet de gauche, cliquez sur Enregistrer.

Puis, dans le volet central (vers la droite), remplacez le nom de l’application (« Application ») par canBing.

Ensuite, en bas et à droite de l’écran, cliquez sur le bouton Enregistrer.

Puis, si vous ne voyez pas le bouton Enregistrer, c’est parce que vous êtes dans les Paramètres de l’application. Dans ce cas, cliquez sur Enregistrer.

Puis, cliquez sur la flèche en haut et à gauche pour revenir à l’accueil.

Récupérer la position courante dans l’application Power Apps avec GPS

Vous allez récupérer la position courante dans l’application Power Apps avec GPS.

Notamment, si un pop-up vous indique que Power Apps souhaite connaître votre position, cliquez sur le bouton Autoriser.

Ensuite, insérez un contrôle Bouton, puis changez ses propriétés.

Button1.Text = "Où suis-je ?"

Button1.Y = 40

Button1.OnSelect = UpdateContext({maPosition: Location})

Insérez deux étiquettes, et nommez-les : maLongitude, maLatitude.

Définissez leur positionnement.

maLongitude.Y = 160

maLatitude.Y = 280

Puis, définissez leur contenu.

maLongitude.Text = "Longitude: " & maPosition.Longitude

maLatitude.Text = "Latitude: " & maPosition.Latitude

Facultativement, vous pouvez aussi agrandir la police et changer la couleur des étiquettes. C’est selon votre envie, car cela n’a pas de conséquence sur la suite de la manipulation.

Afficher la position courante dans l’application Power Apps avec GPS

Vous allez afficher la position courante dans l’application Power Apps avec GPS.

Pour ce faire, insérez un contrôle Image, nommez-le maCarte puis définissez sa taille et son positionnement.

maCarte.Height = 600

maCarte.Width = 600

maCarte.X = 20

maCarte.Y = 400

Ensuite, définissez la propriété Image du contrôle de type Image, avec l’URL suivante. Vous prendrez soin de remplacer <votre clé> par la valeur de votre clé Bing Maps.

maCarte.Image = "https://dev.virtualearth.net/REST/V1/Imagery/Map/Road/" & Substitute("maPosition.latitude";",";".") & Substitute("maPosition.longitude";",";".") & "?mapSize=600,600 & key=<votre clé>"

Notamment, la fonction Substitue() remplace le caractère « , » par « . ».

Pour vous aider, regardez la copie d’écran ci-dessous.

Afficher une position déterminée

Cette fois-ci, vous allez afficher la géolocalisation d’un endroit précis dans l’application Power Apps avec GPS.

Pour ce faire, supprimez le contrôle bouton, et supprimez aussi les deux contrôles étiquettes : il ne doit rester que le contrôle image.

Ensuite, insérez un contrôle Entrée de texte, et nommez-le maVille puis définissez ses propriétés.

maVille.Default = ""

maVille.HintText = "Nom de la ville"

maVille.X = 20

maVille.X = 40

Définissez le positionnement de la carte.

maCarte.Width = 600

maCarte.X = 20

maCarte.Y = 160

Puis, définissez la propriété Image du contrôle de type Image, avec l’URL suivante. Vous prendrez soin de remplacer <votre clé> par la valeur de votre clé Bing Maps.

maCarte.Image = "https://dev.virtualearth.net/REST/V1/Imagery/Map/Road/" & EncodeUrl(maVille.Text) & "?mapSize=600,600&key=<votre clé>"

Vous pouvez copier-coller cette URL à partir des fichiers d’exercices.

La fonction EncodeUrl() remplace les caractères non alphanumériques par des caractères alphanumériques, comme % ou des caractères hexadécimaux. En théorie, elle n’est pas indispensable. Toutefois, elle évite des caractères qui pourraient faire planter l’application.

Pour vous aider, regardez la copie d’écran ci-dessous.

La manipulation est terminée.