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

Effectué

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

Mettre à jour la page À propos de nous

1. Connectez-vous à votre environnement Microsoft Power Pages.

2. Sur la page d’Accueil, sous Sites actifs, identifiez le site 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 ouvrir l’espace de travail Pages.

   

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

5. Supprimez toutes les sections entre les sections En-tête et Pied de page en sélectionnant chaque section, en cliquant sur les points de suspension (…), puis en sélectionnant Supprimer.

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

   Cette disposition crée une section à deux colonnes où la colonne de gauche occupe un tiers de la largeur.

   

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, puis 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 pour générer le contenu.

    

11. Les options disponibles vous permettent de Réécrire, d’ajuster le Ton ou de modifier la Longueur du texte jusqu’à ce que vous soyez satisfait du contenu.

    Cliquez sur Ajouter à la page pour insérer le contenu. Vous devrez peut-être ajouter manuellement un saut de paragraphe.

12. Dans la colonne de droite, 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 présenter l’équipe de la société.

    • Utilisez la disposition Un tiers (à droite).
    • Définissez le titre sur Notre équipe.
    • Générez un paragraphe descriptif sur l’équipe à l’aide de Copilot.
    • Ajoutez une image pertinente d’une équipe.

    

14. Ajoutez un bouton sous Notre équipe établissant un lien vers la page Nous contacter.

    

Mettre à jour la page Annonces immobilières

1. Dans le volet gauche, sous Pages et Navigation principale, sélectionnez Annonces immobilières pour ouvrir la page Annonces immobilières dans le studio de conception.

2. Supprimez toutes les sections entre les sections En-tête et Pied de page en sélectionnant chaque section, en cliquant sur les points de suspension (…), puis en sélectionnant Supprimer.

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

4. Sélectionnez Images en stock et recherchez house, choisissez une image, 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 autre couleur foncée. Quittez le volet Concevoir en cliquant sur le X.

   

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 contrastant avec 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, puis 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 du studio de conception 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. Dans un scénario de production, ces données sont généralement connectées à une source de données telle qu’une liste SharePoint, une table Dataverse ou une source externe.

    L’affichage des données est alors géré à l’aide d’un composant personnalisé. Cette étape sort du cadre de ce module.

    Pour en savoir plus, consultez l’article Composants de code utilisés 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 affecter 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, 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 en sélectionnant chaque section, en cliquant sur les points de suspension (…), puis en sélectionnant Supprimer.

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

   

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. Dans le champ Décrire un formulaire pour le créer, saisissez Create a contact us form to capture user inquiries.

   Appuyez sur Entrée, puis Copilot génère le formulaire. Un aperçu s’affiche alors à droite.

   

10. Vous pouvez modifier le formulaire en saisissant des 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.

    Copilot crée également une table Dataverse pour stocker les données de formulaire envoyées.

11. Ensuite, configurez les autorisations afin que tous les utilisateurs puissent afficher et envoyer le formulaire. Cliquez sur + Nouvelle autorisation.

    

12. Configurer l’autorisation de table :

    • Nom : Contact Us Form
    • Table : laissez la table présélectionnée telle quelle.
    • Type d’accès : Global Access
    • Autorisation de : Create
    • Sous Rôles, cliquez sur + Ajouter des rôles, puis sélectionnez des utilisateurs Anonymes et Authentifiés.

    Cliquez sur Enregistrer pour enregistrer l’autorisation.

    Dans le volet de confirmation indiquant Les données s’affichant sur votre site peuvent être vues par n’importe qui, recliquez sur Enregistrer.

    

    Remarque

    Dans un module précédent, vous avez configuré un flux analysant le contenu des e-mails des utilisateurs à l’aide de l’IA.

    Vous pouvez configurer un flux similaire pour analyser les envois de formulaires Nous contacter et effectuer des actions en fonction des données.

    Cette étape sort du cadre de ce module, mais vous pouvez en savoir plus 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 du contenu pertinent à la page à l’aide d’une combinaison de Copilot et de la barre d’outils intégrée au produit.