Esercizio - Creare un'estensione del messaggio

Completato

In questo esercizio si crea una soluzione di estensione dei messaggi. È possibile usare Teams Toolkit in Visual Studio per creare le risorse necessarie, quindi avviare una sessione di debug e testare in Microsoft Teams.

Creare un progetto di estensione del messaggio

Per iniziare, creare un nuovo progetto di app Microsoft Teams configurato con un'estensione del messaggio che contiene un comando di ricerca. Anche se è possibile creare un progetto usando un modello di progetto di Teams Toolkit per Visual Studio, è necessario apportare modifiche al progetto con scaffolding per poter completare questo modulo. Si usa invece un modello di progetto personalizzato disponibile come pacchetto NuGet. Il vantaggio dell'uso di un modello personalizzato è che crea una soluzione con i file e le dipendenze necessari, risparmiando tempo.

In una sessione di PowerShell:

1. Iniziare con l'installazione del pacchetto modello da NuGet eseguendo:

   dotnet new install M365Advocacy.Teams.Templates
   

2. Creare un nuovo progetto eseguendo:

   dotnet new teams-msgext-search --name "ProductsPlugin" `
     --internal-name "msgext-products" `
     --display-name "Contoso products" `
     --short-description "Product look up tool." `
     --full-description "Get real-time product information and share them in a conversation." `
     --command-id "Search" `
     --command-description "Find products by name" `
     --command-title "Products" `
     --parameter-name "ProductName" `
     --parameter-title "Product name" `
     --parameter-description "The name of the product as a keyword" `
     --allow-scripts Yes
   

3. Attendere la creazione del progetto.

4. Passare alla directory del progetto eseguendo cd ProductsPlugin.

5. Aprire la soluzione in Visual Studio eseguendo .\ProductsPlugin.sln.

Creare un tunnel di sviluppo

Quando l'utente interagisce con l'estensione del messaggio, il servizio Bot invia richieste al servizio Web. Durante lo sviluppo, il servizio Web viene eseguito in locale nel computer. Per consentire al servizio Bot di raggiungere il servizio Web, è necessario esporlo oltre il computer usando un tunnel di sviluppo.

Continuare in Visual Studio:

1. Sulla barra degli strumenti selezionare l'elenco a discesa accanto al pulsante Start , espandere il menu Tunnel di sviluppo (nessun tunnel attivo) e selezionare Crea un tunnel...
2. Nella finestra di dialogo specificare i valori seguenti:
   1. Account: selezionare un account di propria scelta
   2. Nome: msgext-products
   3. Tipo di tunnel: temporaneo
   4. Accesso: Pubblico
3. Creare il tunnel selezionando OK. Viene visualizzata una richiesta che indica che il nuovo tunnel è ora il tunnel attivo corrente
4. Chiudere il prompt selezionando OK

Preparare le risorse

Con tutto ciò che è ora disponibile, usando Teams Toolkit, eseguire il processo Preparare le dipendenze delle app di Teams per creare le risorse necessarie.

Il processo Prepare Teams App Dependencies aggiorna le variabili di ambiente BOT_ENDPOINT e BOT_DOMAIN nel file TeamsApp\env\.env.local usando l'URL del tunnel di sviluppo attivo ed esegue le azioni descritte nel file TeamsApp\teamsapp.local.yml .

Prendere un momento per esplorare i passaggi nel file teamsapp.local.yml .

Continuare in Visual Studio:

1. Aprire il menu Progetto (in alternativa, è possibile selezionare a destra il progetto TeamsApp in Esplora soluzioni), espandere il menu Teams Toolkit e selezionare Prepare Teams App Dependencies
2. Nella finestra di dialogo Account Microsoft 365 accedere o selezionare un account esistente per accedere al tenant di Microsoft 365 e quindi selezionare Continua
3. Nella finestra di dialogo Provisioning accedere o selezionare un account esistente da usare per la distribuzione delle risorse in Azure e specificare i valori seguenti:
   1. Nome sottoscrizione: usare l'elenco a discesa per selezionare una sottoscrizione
   2. Gruppo di risorse: selezionare Nuovo... per aprire una finestra di dialogo, nella casella di testo immettere rg-msgext-products-local e selezionare OK
   3. Area: usare l'elenco a discesa per selezionare l'area più vicina
4. Creare le risorse in Azure selezionando Provisioning
5. Nel prompt degli avvisi di Teams Toolkit selezionare Provisioning
6. Nel prompt delle informazioni di Teams Toolkit selezionare Visualizza risorse di cui è stato effettuato il provisioning per aprire una nuova finestra del browser.

È possibile esplorare le risorse create in Azure e visualizzare anche le variabili di ambiente create nel file .env.local .

Nota

Quando si chiude e riapre Visual Studio, l'URL del tunnel di sviluppo cambia e non verrà più selezionato come tunnel attivo. In questo caso, sarà necessario selezionare di nuovo il tunnel ed eseguire il processo Preparare le dipendenze dell'app teams per riflettere l'URL aggiornato nel manifesto dell'app.

Eseguire ed eseguire il debug

Teams Toolkit usa profili di avvio multiprogetto. Per eseguire il progetto, è necessario abilitare una funzionalità di anteprima in Visual Studio.

In Visual Studio:

1. Aprire il menu Strumenti e selezionare Opzioni...
2. Nella casella di ricerca immettere più progetti
3. In Ambiente selezionare Funzionalità di anteprima
4. Selezionare la casella accanto a Abilita profili di avvio multiprogetto e selezionare OK per salvare le modifiche.

Per impostazione predefinita, Visual Studio aprirà una finestra del browser usando il profilo Microsoft Edge principale. Se si è scelto di usare un account Microsoft 365 durante il processo Prepare Teams App Dependencies diverso da quello usato nel profilo principale, è consigliabile configurare Visual Studio per avviare una finestra del browser che usa un profilo Microsoft Edge specifico. In questo modo si garantisce che l'account e il tenant di Microsoft 365 corretti vengano usati durante il test dell'app.

Per configurare Visual Studio per l'uso di un profilo Microsoft Edge specifico:

In Microsoft Edge:

1. Passare al profilo che si vuole usare o creare un nuovo profilo.
2. Passare a edge://version e prendere nota del valore di ProfilePath . Se il percorso del profilo è C:\Users\user\AppData\Local\Microsoft\Edge\User Data\Profile1, profile 1 è il nome della directory del profilo.
3. Copiare il nome della directory del profilo, ad esempio Profilo 1.

In Visual Studio:

1. Sulla barra degli strumenti selezionare l'elenco a discesa accanto al pulsante Start , selezionare Sfoglia con...

2. Selezionare Aggiungi...

3. Nella finestra di dialogo Aggiungi programma specificare i valori seguenti:

   1. Programma: C:\Programmi (x86)\Microsoft\Edge\Application\msedge.exe
   2. Argomenti: --profile-directory="Profile 1", sostituendo Profile 1 con il nome della directory del profilo che si vuole usare
   3. Nome descrittivo: Microsoft Edge (Nome profilo), sostituendo Nome profilo con il nome del profilo che si vuole usare

4. Selezionare OK

5. Selezionare Imposta come predefinito e quindi Annulla

Per avviare una sessione di debug e installare l'app in Microsoft Teams:

1. Premere F5 o selezionare Start sulla barra degli strumenti
2. Attendere l'apertura di una finestra del browser e la finestra di dialogo di installazione dell'app viene visualizzata nel client Web di Microsoft Teams. Se richiesto, immettere le credenziali dell'account Microsoft 365.
3. Nella finestra di dialogo di installazione dell'app selezionare Aggiungi

Per testare l'estensione del messaggio:

1. Aprire una chat di Microsoft Teams nuova o esistente
2. Nell'area di composizione dei messaggi selezionare + per aprire la selezione app
3. Nell'elenco delle app selezionare Prodotti Contoso per aprire l'estensione del messaggio
4. Nella casella di testo immettere hello
5. Attendere la visualizzazione dei risultati della ricerca
6. Nell'elenco dei risultati selezionare hello per incorporare una scheda nella finestra di messaggio compose

Tornare a Visual Studio e selezionare Arresta dalla barra degli strumenti o premere MAIUSC + F5 per arrestare la sessione di debug.