Exercice : utiliser le code source dans Visual Studio Code

  • 15 minutes

Dans ce scénario, il vous a été demandé de créer une application de gestion de compte pour votre organisation. Vous avez décidé de créer une application canevas et de rendre la source de l’application disponible au format texte afin de vous conformer aux exigences légales de l’organisation. Les politiques de développement de votre entreprise exigent que tous les actifs créés par les développeurs soient stockés dans le référentiel de contrôle de code source. Le code source doit, dans la mesure du possible, être enregistré dans le référentiel au format texte pour simplifier le processus de collaboration dans un environnement d’équipe de projet et pour rendre la source disponible pour l’analyse et la différenciation automatiques.

Configuration requise

Pour réaliser cet exercice, vous devez disposer d’un environnement Microsoft Dataverse dans lequel une base de données est installée.

Objectifs

La finalité de cet exercice est que vous appreniez à réaliser les opérations suivantes :

  • modifier une application canevas dans Visual Studio Code ;

  • empaqueter une application canevas dans Visual Studio Code ;

  • charger une application canevas vers Power Apps Studio ;

  • créer et initialiser des référentiels Git locaux et distants ;

  • synchroniser des référentiels locaux et distants et travailler avec les modifications.

Conditions préalables

Avoir terminé le labo précédent de ce module avant de commencer cet exercice.

Exercice 1 : modifier l’application

Au cours de cet exercice, vous allez modifier l’application de gestionnaire de compte dans Visual Studio Code.

Tâche : modifier l’application

Au cours de cette tâche, vous allez modifier l’application dans Visual Studio Code.

  1. Ouvrez Visual Studio Code.

  2. Si le dossier Learn lab account manager ne s’ouvre pas automatiquement, sélectionnez Fichier > Ouvrir le dossier. Localisez et ouvrez le dossier Learn lab account manager.

  3. Développez le dossier src et le dossier Src, puis sélectionnez le fichier BrowseScreen1.fx.yaml.

    Capture d’écran du fichier BrowseScreen.

  4. Localisez LblAppName1.

  5. Changez la valeur du champ Texte de LblAppName1 enEntreprises et du champ Taille en 28.

    Capture d’écran des valeurs de texte et de taille.

  6. Localisez IconNewItem1.

  7. Redéfinissez la transition de formule Navigate en remplaçant None par CoverRight, puis ajoutez l’expression Trace() :

    ;Trace("New Item Selected")

    Capture d’écran de la transition de formule Navigate et de l’expression Trace.

  8. Sélectionnez le fichier DetailScreen1.fx.yaml.

  9. Localisez LblAppName2.

  10. Changez la valeur de Texte de LblAppName2 àEntreprises et de Taille à 28.

  11. Sélectionnez le fichier EditScreen1.fx.yaml.

  12. Localisez LblAppName3.

  13. Changez la valeur du champ Texte de LblAppName3 en Entreprises et du champ Taille en 28.

  14. Cliquez sur Fichier > Enregistrer sous.

Exercice 2 : empaqueter et charger

Dans cet exercice, vous allez empaqueter l’application et la charger dans votre environnement.

Tâche : empaqueter et charger

Au cours de cette tâche, vous allez packager et charger l’application.

  1. Ouvrez Terminal, puis exécutez la commande suivante :

    pac canvas pack --msapp "Account manager.msapp" --sources src

    Capture d’écran de la commande d’application de package.

  2. Vous pourriez recevoir un message d’avertissement indiquant : Avertissement PA2001 : non-concordance de la somme de contrôle. Vous pouvez ignorer ce message en toute sécurité.

  3. Passez au navigateur, accédez à Power Apps Maker Portal, puis vérifiez que vous vous trouvez bien dans le bon environnement.

  4. Cliquez sur Applications.

  5. Sélectionnez l’application Gestionnaire de comptes, puis cliquez sur Modifier.

  6. Cliquez sur Fichier > Ouvrir > Parcourir.

    Capture d’écran du bouton Parcourir les fichiers.

  7. Sélectionnez le fichier Account manager.msapp contenu dans le dossier Learn lab account manager, puis cliquez sur Ouvrir.

    Capture d’écran de l’application canevas à importer.

  8. Cliquez sur Prévisualiser l’application.

    Capture d’écran du bouton Prévisualiser l’application.

  9. Le texte du libellé doit montrer les modifications que vous avez apportées dans Visual Studio Code. Cliquez sur l’icône plus (+) pour ajouter un nouveau compte.

    Capture d’écran du bouton d’ajout d’un nouveau compte.

  10. Le texte du libellé doit montrer les modifications que vous avez apportées dans Visual Studio Code. Renseignez le formulaire, puis cliquez sur Enregistrer.

    Capture d’écran de la fenêtre de création d’un compte.

  11. Cliquez sur le nouveau compte pour l’ouvrir.

  12. Le texte du libellé doit montrer les modifications que vous avez apportées. Fermez l’aperçu de l’application.

    Capture d’écran du bouton Fermer l’aperçu de l’application.

  13. Cliquez sur Fichier > Enregistrer.

  14. Cliquez sur Publier.

  15. Cliquez sur Publier cette version, puis attendez la fin du processus de publication.

Exercice 3 : GitHub (facultatif)

Dans cet exercice, vous allez créer un référentiel dans GitHub, initialiser le référentiel, puis travailler avec les modifications.

Tâche 1 : initialiser le référentiel distant

Dans cette tâche, vous allez initialiser le référentiel distant.

  1. Accédez à GitHub et connectez-vous. Si c’est votre première fois, sélectionnez S’inscrire, puis suivez les invites pour effectuer l’inscription.

  2. Cliquez sur le bouton plus (+), puis sélectionnez Nouveau référentiel.

    Capture d’écran du bouton Nouveau référentiel dans GitHub.

  3. Saisissez Contoto_Man pour le Nom du référentiel, sélectionnez Privé, puis cliquez sur Créer un référentiel.

    Capture d’écran de la fenêtre Créer un référentiel, présentant l’option Privé sélectionnée.

  4. Copiez l’URL, puis collez-la dans le Bloc-notes pour l’utiliser plus tard.

    Capture d’écran du bouton Copier l’URL du référentiel.

Tâche 2 : initialiser le référentiel local

Dans cette tâche, vous allez initialiser le référentiel local.

  1. Ouvrez Visual Studio Code.

  2. Si le dossier Learn lab account manager ne s’ouvre pas automatiquement, sélectionnez Fichier > Ouvrir le dossier. Localisez et ouvrez le dossier Learn lab account manager.

  3. Cliquez sur le menu Affichage, puis sélectionnez SCM (gestionnaire de contrôle de code source).

  4. Cliquez sur Initialiser le référentiel.

    Capture d’écran du bouton Initialiser le référentiel.

  5. Placez le curseur sur l’option Modifications, puis cliquez sur l’icône plus (+) pour Mettre en place toutes les modifications.

    Capture d’écran du bouton Mettre en place toutes les modifications.

  6. Saisissez Validation initiale comme message, puis cliquez sur Validation (bouton case à cocher).

    Capture d’écran du bouton de validation des modifications pour la validation initiale.

Tâche 3 : ajouter et synchroniser un référentiel distant

Dans cette tâche, vous allez ajouter un référentiel distant, puis le synchroniser.

  1. Cliquez sur les points de suspension (...), puis sélectionnez Distant > Ajouter distant.

    Capture d’écran du bouton Ajouter distant.

  2. Collez l’URL du référentiel que vous avez copiée précédemment, puis sélectionnez Ajouter un référentiel distant à partir d’une URL. Connectez-vous si vous y êtes invité.

    Capture d’écran du bouton d’ajout d’un référentiel distant à partir d’une URL.

  3. Saisissez Origine comme nom distant, puis appuyez sur la touche Entrée.

    Capture d’écran du nom distant défini comme Origine.

  4. Cliquez sur les points de suspension (...), puis sélectionnez Tirer (pull), Envoyer (push) > Synchroniser.

    Capture d’écran du bouton Synchroniser les référentiels.

  5. Cliquez sur OK.

  6. Accédez à GitHub et ouvrez le référentiel Contoso_Homme.

  7. Cliquez sur le dossier src pour l’ouvrir.

    Capture d’écran du dossier du référentiel.

  8. Examinez le contenu du dossier.

Tâche 4 : travailler avec les modifications

Dans cette tâche, vous allez travailler avec les modifications.

  1. Basculez vers Visual Studio Code, puis sélectionnez le fichier BrowseScreen1.fx.yaml.

  2. Localisez IconNewItem1, puis redéfinissez la transition de formule Navigate en remplaçant CoverRight par UnCover.

    Capture d’écran du type de transition de navigation.

Cliquez sur Fichier > Enregistrer sous.

  1. Cliquez sur Contrôle de code source > Mettre en place toutes les modifications.

    Capture d’écran du contrôle de code source, avec le bouton Mettre en place toutes les modifications cliqué.

  2. Saisissez Modifier la transition selon les recommandations UX comme message, puis sélectionnez Validation (icône de case à cocher).

    Capture d’écran du bouton de validation des modifications.

  3. Cliquez sur le bouton des points de suspension (...), puis sélectionnez Envoyer (push).

  4. Retournez à GitHub et ouvrez le référentiel Contoso_Homme.

  5. Cliquez sur Ouvrir la validation.

    Capture d’écran du bouton d’ouverture de la validation.

  6. Passez en revue les modifications.

    Capture d’écran de l’examen de validation des modifications.