Creare un'estensione di tipo procedura guidata di Azure Data Studio

Articolo
10/18/2023

Questa esercitazione illustra come creare una nuova estensione di tipo procedura guidata di Azure Data Studio. L'estensione rende disponibile una procedura guidata per interagire con gli utenti in Azure Data Studio.

In questo articolo viene spiegato come:

Installare il generatore di estensioni
Creare l'estensione
Aggiungere una procedura guidata personalizzata all'estensione
Testare l'estensione
Creare il pacchetto dell'estensione
Pubblicare l'estensione nel marketplace

Prerequisiti

Azure Data Studio si basa sullo stesso framework di Visual Studio Code, quindi le estensioni per Azure Data Studio vengono compilate usando Visual Studio Code. Per iniziare, sono necessari i componenti seguenti:

Node.js installato e disponibile in $PATH. Node.js include npm, lo strumento di gestione dei pacchetti di Node.js, che viene usato per installare il generatore di estensioni.
Visual Studio Code per eseguire il debug dell'estensione.
Estensione di debug di Azure Data Studio (facoltativo). In questo modo è possibile testare l'estensione senza dover creare il pacchetto e installarla in Azure Data Studio.
Assicurarsi che azuredatastudio sia nel percorso. Per Windows, assicurarsi di scegliere l'opzione Add to Path in setup.exe. Per Mac o Linux, eseguire il comando Install 'azuredatastudio' in PATH dal riquadro comandi in Azure Data Studio.

Installare il generatore di estensioni

Per semplificare il processo di creazione delle estensioni, abbiamo creato un generatore di estensioni con Yeoman. Per installarlo, eseguire il comando seguente dal prompt dei comandi:

npm install -g yo generator-azuredatastudio

Creare l'estensione di tipo procedura guidata

Introduzione alle procedure guidate

Le procedure guidate sono un tipo di interfaccia utente che presenta pagine dettagliate che devono essere compilate dagli utenti per eseguire un'attività. Esempi comuni sono le procedure guidate per l'installazione del software e per la risoluzione dei problemi. Ad esempio:

Dacpac wizard

Dato che le procedure guidate sono spesso utili per l'uso dei dati e l'estensione delle funzionalità di Azure Data Studio, Azure Data Studio offre API per la creazione di procedure guidate personalizzate. Verrà illustrata la procedura per generare un modello di procedura guidata e modificarlo per creare una procedura guidata personalizzata.

Eseguire il generatore di estensioni

Per creare un'estensione:

Avviare il generatore di estensioni con il comando seguente:

yo azuredatastudio
Scegliere New Wizard or Dialog (Nuova procedura guidata o finestra di dialogo) nell'elenco dei tipi di estensione. Selezionare quindi Wizard (Procedura guidata) e poi Getting Started Template (Modello introduttivo)
Seguire i passaggi per compilare il nome dell'estensione (per questa esercitazione, usare My Test Extension) e aggiungere una descrizione.

Il completamento dei passaggi precedenti consente di creare una nuova cartella. Aprire la cartella in Visual Studio Code ed è tutto pronto per creare l'estensione per una procedura guidata personalizzata.

Eseguire l'estensione

Si vedrà ora cosa offre il modello di procedura guidata eseguendo l'estensione. Prima di eseguire l'estensione, assicurarsi che in Visual Studio Code sia installata l'estensione di debug di Azure Data Studio.

Selezionare F5 in VS Code per avviare Azure Data Studio in modalità di debug con l'estensione in esecuzione. In Azure Data Studio eseguire quindi il comando Launch Wizard (Avvia procedura guidata) dal riquadro comandi (CTRL+MAIUSC+P) nella nuova finestra. Verrà avviata la procedura guidata predefinita fornita da questa estensione:

Wizard template

Si vedrà ora come modificare questa procedura guidata predefinita.

Sviluppare la procedura guidata

I file più importanti per iniziare con lo sviluppo dell'estensione sono package.json, src/main.ts e vsc-extension-quickstart.md:

package.json: si tratta del file manifesto in cui è registrato il comando Avvio guidato . Questa è anche la posizione in cui main.ts viene dichiarato il punto di ingresso principale del programma.
main.ts: contiene il codice per aggiungere elementi dell'interfaccia utente alla procedura guidata, ad esempio pagine, testo e pulsanti
vsc-extension-quickstart.md: contiene la documentazione tecnica che può essere un riferimento utile durante lo sviluppo

Si vedrà ora come apportare una modifica alla procedura guidata: verrà aggiunta una quarta pagina vuota. Modificare src/main.ts come illustrato di seguito. Verrà visualizzata una pagina aggiuntiva quando si avvia la procedura guidata.

Wizard main Dopo aver acquisito familiarità con il modello, ecco alcune idee aggiuntive da provare:

Aggiungere un pulsante con larghezza 300 alla nuova pagina
Aggiungere un componente flessibile in cui inserire il pulsante
Aggiungere un'azione al pulsante. Ad esempio, quando si fa clic sul pulsante, avviare una finestra di dialogo di apertura file o aprire un editor di query.

Creare il pacchetto dell'estensione

Per condividere l'estensione con altri utenti, è necessario inserirla in un pacchetto costituito da un unico file. Questo può essere pubblicato nel marketplace delle estensioni di Azure Data Studio o condiviso all'interno del team o della community. A tale scopo, è necessario installare un altro pacchetto npm dalla riga di comando:

npm install -g vsce

Modificare il file README.md in base alla proprie esigenze e quindi passare alla directory di base dell'estensione ed eseguire vsce package. Facoltativamente, è possibile collegare un repository con l'estensione o continuare senza. Per aggiungerne uno, aggiungere una riga simile al file package.json.

"repository": {
    "type": "git",
    "url": "https://github.com/anjalia/my-test-extension.git"
}

Dopo l'aggiunta di queste righe è stato creato un file my-test-extension-0.0.1.vsix pronto per l'installazione in Azure Data Studio.

Install VSIX

Pubblicare l'estensione nel marketplace

Il marketplace delle estensioni di Azure Data Studio non è ancora completamente implementato, ma il processo corrente consiste nell'ospitare il pacchetto VSIX dell'estensione in una posizione qualsiasi (ad esempio, una pagina delle versioni di GitHub), quindi inviare una richiesta pull per aggiornare questo file JSON con le informazioni sull'estensione.

Passaggi successivi

Questa esercitazione ha descritto come:

Installare il generatore di estensioni
Creare l'estensione
Aggiungere una procedura guidata personalizzata all'estensione
Testare l'estensione
Creare il pacchetto dell'estensione
Pubblicare l'estensione nel marketplace

Ci auguriamo che la lettura di questo articolo sia di ispirazione per creare un'estensione personalizzata per Azure Data Studio. Sono disponibili il supporto per dashboard di informazioni dettagliate (utili grafici eseguiti in SQL Server), una serie di API specifiche di SQL e un enorme set di punti di estensione ereditati da Visual Studio Code.

Se si ha un'idea, ma non si è certi di come iniziare, aprire un problema o inviare un tweet al team: azuredatastudio.

È sempre possibile fare riferimento alla Guida delle estensioni di Visual Studio Code perché copre tutte le API e i modelli esistenti.

Per informazioni su come usare T-SQL in Azure Data Studio, completare l'esercitazione sull'editor T-SQL:

Usare l'editor Transact-SQL per creare oggetti di database