Exercice : mettre à jour des pages web générées avec Copilot

Effectué

Dans cet exercice, vous allez mettre à jour les pages supplémentaires de votre site web créées dans l’exercice précédent. Vous allez ajouter du contenu aux pages à l’aide de Copilot.

Mettre à jour la page À propos de nous

1. Connectez-vous à votre environnement Power Pages.

2. Sur la page d’Accueil, sous Sites actifs, identifiez le site Power Pages Contoso Real Estate que vous avez créé précédemment, puis cliquez sur Modifier.

   

3. Dans le studio de conception Power Pages, cliquez sur Pages dans le volet gauche pour accéder à l’espace de travail Pages.

   

4. Cliquez sur À propos de nous pour ouvrir la page À propos de nous dans le studio de conception.

5. Supprimez toutes les sections entre les sections En-tête et Pied de page.

6. Sous l’en-tête du site, cliquez sur Ajouter une section>Un tiers à gauche.

   Cette disposition de section donne à la section une disposition à deux colonnes, la colonne de gauche occupant un tiers de la largeur de la section.

   

7. Dans la colonne de gauche, sélectionnez Texte et remplacez le type de texte Paragraphe par Titre 2.

8. Remplacez le texte par Our Vision.

9. Cliquez sur l’icône plus sous l’en-tête Notre vision, puis sélectionnez à nouveau Texte.

10. Effacez le texte par défaut afin que la zone de texte soit vide. Ensuite, cliquez sur Copilot dans la barre d’outils.

    Dans le volet Décrivez le texte dont vous avez besoin, saisissez Two paragraphs describing the vision of the Contoso Real Estate company.

    Appuyez sur Entrée et Copilot génère alors du texte :

    

11. Vous pouvez jouer avec les options de réécriture, de modification du Ton ou d’augmentation et de diminution de la Longueur du texte jusqu’à ce que vous soyez satisfait du contenu.

    Cliquez sur Ajouter à la page pour ajouter le texte généré à la page.

12. Dans la colonne de droite de la section, sélectionnez Image>Images en stock et recherchez office building. Sélectionnez une image de votre choix, puis cliquez sur Insérer.

    

13. Ajoutez une nouvelle section pour mettre en évidence l’équipe de la société.

    • Utilisez la disposition Un tiers à droite.
    • Définissez Notre équipe comme titre.
    • Générez un paragraphe décrivant l’équipe à l’aide de Copilot.
    • L’image d’une équipe.

    Cela ressemble à ce qui suit :

    

14. Ajoutez un bouton sous le texte Notre équipe pour accéder à la page Nous contacter.

    

Mettre à jour la page Annonces

1. Dans le volet gauche, sous Pages, cliquez sur Annonces pour ouvrir la page Annonces dans le studio de conception.

2. Supprimez toutes les sections entre les sections En-tête et Pied de page.

3. Ajoutez une section, puis cliquez sur Modifier l’arrière-plan dans la barre d’outils. Cliquez sur Image>Ajouter une image.

4. Cliquez sur Images en stock, puis recherchez house. Sélectionnez une image de votre choix, puis cliquez sur Insérer.

5. Survolez et sélectionnez la section, puis cliquez sur l’icône Concevoir dans la barre d’outils.

   

6. Sous l’onglet Standard, définissez l’option Superposition sur 65%. Définissez également l’option Couleur de la superposition sur Noir ou une couleur foncée.

   

   Quittez le volet Concevoir.

7. Au-dessus de l’image, cliquez sur Texte et redéfinissez le type de texte en remplaçant Paragraphe par Titre 2. Redéfinissez l’option Couleur du texte sur Blanc ou une couleur visible sur l’image.

8. Cliquez sur l’icône Concevoir dans la barre d’outils. Sous l’onglet Typographie, définissez l’option Épaisseur de la police sur Bold. Quittez le volet Concevoir.

9. Définissez l’option Alignement sur Centrer et redéfinissez le texte sur Featured Listings.

   

10. Ouvrez le volet Copilot, saisissez Create a new section to show real estate listings et appuyez sur Entrée.

    Cliquez sur Conserver pour ajouter la section générée à la page.

11. Mettez à jour la section à l’aide d’une combinaison de Copilot et de la barre d’outils intégrée au produit afin d’afficher au moins trois annonces. La section doit avoir une disposition 3 colonnes.

    Remarque

    Vous allez coder en dur les données pour les annonces immobilières. En général, ces données sont connectées à une source de données telle qu’une liste SharePoint, une table Dataverse ou toute source de données externe.

    Ensuite, vous affichez les données d’une manière visuellement attrayante à l’aide d’un composant personnalisé. Cependant, cette démarche sort du cadre de ce module.

    Si vous souhaitez en savoir plus, vous pouvez consulter l’article Utiliser des composants de code dans Power Pages.

12. Chaque colonne doit comporter une image. Ajoutez les images à l’aide de l’option URL.

    • Pour la première image, cliquez sur URL>de l’image, puis saisissez l’URL suivante : https://raw.githubusercontent.com/microsoft/PowerPlatformAdvocates/main/MSLearn/AIModule/Images/property1.jpg
    • Pour la deuxième image, utilisez l’URL suivante : https://raw.githubusercontent.com/microsoft/PowerPlatformAdvocates/main/MSLearn/AIModule/Images/property2.jpg
    • Pour la troisième image, utilisez l’URL suivante : https://raw.githubusercontent.com/microsoft/PowerPlatformAdvocates/main/MSLearn/AIModule/Images/property3.jpg

    

13. Chaque colonne doit comporter un texte En-tête 3 comportant le prix du bien.

    • Pour la première colonne, utilisez le prix $350,000.
    • Pour la deuxième colonne, utilisez le prix $250,000.
    • Pour la troisième colonne, utilisez le prix $600,000.

14. Chaque colonne doit comporter un texte Petit texte comportant l’adresse du bien.

    • Pour la première colonne, utilisez l’adresse 432 Elm Street, Riverside, CA 92501.
    • Pour la deuxième colonne, utilisez l’adresse 789 Maple Avenue, Lexington, KY 40502.
    • Pour la troisième colonne, utilisez l’adresse 210 Pine Road, Portland, OR 97204.

15. Chaque colonne doit comporter un Bouton qui permet d’accéder à la page Nous contacter.

    • Le Libellé du bouton doit être Enquire Now.

    

    Vous êtes libre de personnaliser la section comme bon vous semble.

Définition de la solution pour vos données

1. Vous allez maintenant commencer à utiliser des tables et données Dataverse. Pour rester dans le thème de l’organisation des composants de votre solution Real Estate Solution, vous devez définir une solution pour toutes les données.

   Dans le volet gauche, cliquez sur Données.

2. En haut du volet Données, cliquez sur l’icône Définir une solution représentant un engrenage.

3. Sélectionnez la solution Real Estate Solution dans la liste déroulante.

   

   Ainsi, l’ensemble des tables de données, colonnes, vues et formulaires que vous créez sont ajoutés à la solution Real Estate Solution.

   Quittez le volet Définir une solution.

Mettre à jour la page Nous contacter

1. Dans le volet gauche, cliquez sur Pages.

2. Ensuite, cliquez sur Nous contacter pour ouvrir la page Nous contacter dans le studio de conception.

3. Supprimez toutes les sections entre les sections En-tête et Pied de page.

4. Ajoutez une bannière de titre à la page Nous contacter à l’aide des étapes de la page Annonces.

   

5. En dessous, ajoutez une section avec la disposition Un tiers à gauche.

6. Dans la colonne de gauche, sélectionnez Texte et remplacez le type de texte Paragraphe par Titre 2.

   Remplacez le texte par We want to hear from you!.

7. Cliquez sur l’icône plus sous l’en-tête Nous souhaitons connaître votre avis, puis sélectionnez à nouveau Texte.

   Remplacez le texte par :

   Explore the world of real estate with us. Whether you're buying, selling, or investing, our expert team is here to guide you every step of the way. 
   
   Contact us today to start your real estate journey!
   

8. Dans la colonne de droite de la section, cliquez sur le bouton Plus représentant des points de suspension, puis sélectionnez Formulaire. Une fenêtre contextuelle s’affiche alors, dans laquelle nous pouvons créer un formulaire généré par l’IA.

   

9. Sous la section Décrire un formulaire pour le créer, saisissez Create a contact us form to capture user inquiries.

   Appuyez sur Entrée et Copilot génère alors un formulaire pour vous. L’aperçu de ce formulaire s’affiche alors sur le côté droit du volet.

   

10. Vous pouvez continuer à apporter des modifications au formulaire en saisissant de nouvelles invites telles que Move the Email field up ou Remove the Subject field.

    Une fois satisfait du formulaire, cliquez sur OK pour l’ajouter à la page.

    La génération du formulaire peut prendre quelques instants, mais ensuite, Copilot crée non seulement un formulaire, mais aussi une table dans Dataverse pour stocker les données du formulaire une fois envoyé.

11. Nous devons maintenant définir des autorisations pour le formulaire afin qu’il puisse être vu et utilisé par tous les utilisateurs du site. Cliquez sur + Nouvelle autorisation.

    

12. Configurez l’autorisation de table comme suit :

    • Nom : Contact Us Form
    • Table : laissez la table présélectionnée telle quelle.
    • Type d’accès : Global Access

    Remarque

    Le type Global Access applique l’autorisation et les privilèges de table sélectionnés aux utilisateurs des rôles sélectionnés pour tous les enregistrements.

    Vous pouvez en savoir plus sur les types d’accès ici.

    • Autorisation de : Create
    • Pour Rôles, cliquez sur + Ajouter des rôles, puis sélectionnez des utilisateurs Anonymes et Authentifiés.

    Cliquez sur Enregistrer pour enregistrer l’autorisation.

    

    Recliquez sur Enregistrer dans le volet Les données s’affichant sur votre site peuvent être vues par n’importe qui.

    Remarque

    Dans un module précédent, vous avez configuré un flux pour analyser le contenu d’un e-mail envoyé par un utilisateur à l’aide de l’IA.

    Vous pouvez configurer un flux similaire pour capturer les données du formulaire Nous contacter, puis analyser le contenu de l’envoi du formulaire et effectuer des actions en fonction du contenu à l’aide de l’IA.

    Cela n’entre pas dans le cadre de ce module, mais vous pouvez en savoir plus sur la configuration des flux de cloud Power Automate dans la documentation de configuration de Power Pages.

Mettre à jour la page Services

Mettez à jour la page Services à l’aide de votre créativité et des connaissances acquises jusqu’à présent. Ajoutez tout contenu que vous jugez approprié à la page à l’aide d’une combinaison de Copilot et de la barre d’outils intégrée au produit.