Utilizzo di Duet AI durante il ciclo di vita dello sviluppo del software

1. Panoramica

Una giornata tipica di uno sviluppatore Google Cloud prevede in genere l'utilizzo di più prodotti e servizi Google Cloud. Questi prodotti consentono allo sviluppatore di sviluppare, testare, eseguire il deployment e gestire le applicazioni nel cloud. Con l'assistenza di Duet AI, uno sviluppatore può diventare più produttivo quando utilizza i prodotti Google Cloud grazie alla chat interattiva, all'assistenza alla programmazione e alle integrazioni incorporate di Duet AI.

Nota: poiché si tratta di una tecnologia in fase iniziale, Duet AI è in grado di generare risultati che sembrano plausibili, ma che sono di fatto errati. Ti consigliamo di convalidare tutti gli output di Duet AI prima di utilizzarlo. Per saperne di più, consulta Duet AI in Google Cloud e l'IA responsabile.

Questo lab utilizza l'assistenza di Duet AI per il deployment di "Cymbal Superstore" app web di generi alimentari. Quindi, svilupperai ed eseguirai il deployment di una nuova funzionalità e creerai il fronte e il backend dell'app. Inoltre, riceverai l'aiuto di Duet per scrivere test per la tua app e scoprirai come Duet può essere integrato con altri strumenti Google Cloud.

Obiettivi

Al termine del corso sarai in grado di:

• Migliora un'applicazione web esistente con l'aiuto di Duet AI.
• Eseguire il deployment dell'applicazione in Cloud Run.
• Chiedi a Duet AI di spiegare un errore nell'applicazione e di fornire una correzione.
• Sviluppa test per l'applicazione con l'aiuto di Duet AI.
• Visualizza i log delle applicazioni con l'aiuto di Duet AI.

Prerequisiti

• Account Google Cloud Platform e un progetto con fatturazione abilitata
• Esperienza Linux di base

2. Configurazione

Questa sezione illustra tutto ciò che devi fare per iniziare a utilizzare questo lab.

Crea un progetto

Per semplificare la pulizia, creiamo un nuovo progetto Google Cloud.

• Vai a https://console.cloud.google.com.
• Fai clic sul menu a discesa del selettore progetti
• Seleziona Crea progetto
• Assegnagli un nome facile da ricordare, ad esempio "intro-to-containers"

Abilita Duet AI nel progetto Google Cloud

Ora abiliteremo l'API Duet AI nel nostro progetto Google Cloud. Procedi come indicato di seguito:

1. Vai alla dashboard della pagina https://console.cloud.google.com e assicurati di aver selezionato il progetto Google Cloud con cui prevedi di lavorare per questo lab. Fai clic sull'icona di Duet AI che vedi in alto a destra.

2. Sul lato destro della console si aprirà la finestra della chat di Duet AI. Fai clic sul pulsante Abilita come mostrato di seguito. Se non vedi il pulsante Abilita, ma al contrario vedi un'interfaccia di Chat, è probabile che tu abbia già abilitato Duet AI per il progetto e puoi andare direttamente al passaggio successivo.

3. Una volta abilitato, puoi testare Duet AI con una o due query. Vengono mostrate alcune query di esempio, ma puoi provare, ad esempio, "Che cos'è Cloud Run?"

Duet AI risponderà con la risposta alla tua domanda. Puoi fare clic sull'icona _ nell'angolo in alto a destra per chiudere la finestra della chat di Duet AI.

Abilita Duet AI nell'IDE di Cloud Shell

Useremo l'IDE di Cloud Shell per il resto del codelab. Dobbiamo abilitare e configurare Duet AI nell'IDE di Cloud Shell e i passaggi sono riportati di seguito:

1. Avvia Cloud Shell tramite l'icona mostrata di seguito. L'avvio dell'istanza di Cloud Shell potrebbe richiedere un paio di minuti.

2. Fai clic sul pulsante Editor o Apri editor (a seconda del caso) e attendi che venga visualizzato l'IDE di Cloud Shell. Utilizzerai il nuovo un editor di testo, non quello precedente.

3. Fai clic sul pulsante Accedi con Cloud Code nella barra di stato in basso come mostrato. Autorizza il plug-in come da istruzioni. Se viene visualizzato "Cloud Code - nessun progetto" Nella barra di stato, selezionalo e scegli il progetto Google Cloud specifico dall'elenco dei progetti con cui prevedi di lavorare.

4. Fai clic sul pulsante Duet AI nell'angolo in basso a destra, come mostrato, e seleziona il progetto Google Cloud corretto per il quale abbiamo abilitato l'API Cloud AI Companion.

5. Dopo aver selezionato e autorizzato il progetto Google Cloud, assicurati di poterlo vedere nel messaggio di stato di Cloud Code nella barra di stato e di aver abilitato Duet AI a destra, nella barra di stato, come mostrato di seguito:

Duet AI è pronto per l'uso.

3. Utilizzo di Duet AI

Nell'ambito di questo lab creerai un'app web. Il lab indica molti luoghi in cui provare Duet. Ma se ti incuriosisce, puoi anche prenderti del tempo per chiedere a Duet in qualsiasi punto del lab.

Ad esempio, utilizzerai Terraform per creare ed eseguire il deployment dell'applicazione di base. Se non sai cos'è Terraform, puoi chiedere a Duet. Se vuoi capire il funzionamento di ogni passaggio, Duet può spiegartelo. Vuoi aprire il codice e chiedere informazioni su righe specifiche? Prova Duet.

Nota: poiché si tratta di una tecnologia in fase iniziale, Duet AI è in grado di generare risultati che sembrano plausibili, ma che sono di fatto errati. Ti consigliamo di convalidare tutti gli output di Duet AI prima di utilizzarlo. Per saperne di più, consulta Duet AI in Google Cloud e l'IA responsabile.

4. Crea l'app web

Questo lab utilizza "Cymbal Superstore" app web di generi alimentari. Nelle attività successive di questo lab, utilizzerai Duet AI per sviluppare una nuova funzionalità ed eseguirne il deployment in questa app. Prima di vedere in che modo Duet AI ti aiuta a comprendere il codice esistente, hai bisogno di codice esistente con cui lavorare, quindi creerai subito i componenti frontend e backend di questa app.

Mentre lavori a questo progetto, ti sposterai tra Cloud Shell e l'editor di Cloud Shell. Un modo semplice per farlo è utilizzare i pulsanti nella parte superiore dello schermo:

configura l'ambiente

Esegui i comandi in Cloud Shell.

1. Imposta l'ID progetto:

gcloud config set project <Google Cloud Project ID>

2. Per eseguire l'helper delle credenziali Docker, esegui questo comando:

gcloud auth configure-docker

3. Se ti viene chiesto se vuoi continuare, digita Y.
4. Per scaricare "Cymbal Superstore" esegui questo comando dalla directory radice in Cloud Shell. Riceverà il codice Cymbal Superstore da GitHub.

git clone https://github.com/GoogleCloudPlatform/cymbal-superstore

5. Per eseguire correttamente questo codice, devi abilitare diverse API. In Cloud Shell, inserisci il comando seguente:

gcloud services enable cloudresourcemanager.googleapis.com compute.googleapis.com artifactregistry.googleapis.com serviceusage.googleapis.com run.googleapis.com bigquery.googleapis.com 

6. Passa alla directory Terraform nel codice che hai scaricato:

cd cymbal-superstore/terraform

5. Poiché in questo lab non verrà utilizzato Spanner, utilizzeremo una versione delle istruzioni di Terraform che non installa Spanner. In Cloud Shell, inserisci il comando seguente:

mv main.tf.nospanner main.tf

8. Per evitare di dover inserire il nome e il numero del progetto ogni volta che esegui un comando Terraform, crea un file denominato terraform.tfvars in questa directory terraform. Aggiungi due righe a questo file con le informazioni seguenti e salva il file. Puoi trovare queste informazioni nella dashboard del progetto.

project_id="Your project id"
project_number=Your project number

9. Inizializza Terraform con la riga:

terraform init

10. Infine, esegui il deployment delle risorse Terraform nel tuo progetto utilizzando il comando seguente. Ti potrebbe essere chiesto di digitare "sì" durante il deployment. Questa operazione potrebbe richiedere fino a 10 minuti, quindi prenditi il tempo necessario per esaminare il diagramma dell'architettura all'indirizzo https://github.com/GoogleCloudPlatform/cymbal-superstore/blob/main/assets/architecture.png. Puoi anche dare un'occhiata al codice esistente e utilizzare Duet per aiutarci a comprenderlo.

terraform apply

Una volta completato correttamente il comando, dovresti vedere un output simile al seguente:

11. Aggiorna il frontend per comunicare con il backend inventory_cr_endpoint nell'output. Per farlo, copia il valore di inventory_cr_endpoint, apri cymbal-superstore/frontend/.env.production e sostituisci il valore di REACT_APP_INVENTORY_URL.
12. Esegui di nuovo terraform apply. Questa operazione dovrebbe richiedere solo un minuto, poiché verrà eseguito nuovamente il deployment dell'app React del frontend in Cloud Storage utilizzando l'URL di backend aggiornato.
13. Apri frontend_ip in un browser. Dovresti vedere il frontend Cymbal Superstore. La propagazione delle modifiche potrebbe richiedere alcuni minuti, quindi potresti dover controllare più di una volta.

14. Fai clic su Nuovi arrivi sul lato sinistro della home page di Cymbal. Dovresti visualizzare una pagina di frontend simulata con prodotti segnaposto. Si tratta di un comportamento previsto, in quanto implementerai il codice dell'API Inventario backend per pubblicare la pagina dei nuovi prodotti nella prossima attività di questo lab.

Se hai difficoltà a visualizzare l'applicazione nel browser, devi verificare che il deployment di Cloud Run sia stato eseguito correttamente. Per:

• Vai a Cloud Run dal menu principale della console Cloud.
• Seleziona il servizio inventory dall'elenco dei servizi.
• Seleziona REVISIONI dalle schede della pagina dell'inventario.

• Assicurati che il deployment dell'applicazione Cloud Run venga eseguito come previsto:

Se non è stato eseguito il deployment, puoi eseguirne il deployment selezionando MODIFICA e ESEGUI IL DEPLOYMENT DI NUOVA REVISIONE nella parte superiore della pagina e accetta i valori predefiniti.

5. Modifica il backend dell'app web

Ora utilizziamo Duet AI per aggiungere funzionalità al backend della nostra app web.

In questa attività, chiedi a Duet AI di completare il codice per implementare l'endpoint /newproducts nell'app. Dovrai creare un endpoint nel backend per recuperare i nuovi prodotti da Firestore e testare questo endpoint prima di eseguire il deployment della modifica.

Sviluppa l'endpoint /newproducts

1. Apri il file cymbal-superstore/backend/index.ts nell'editor di Cloud Shell.
2. Nel file index.ts, scorri fino al commento relativo a DEMO TASK START, attorno alla riga 95, dove vedi un gruppo di righe commentate per questa attività. Rimuovi tutte le righe commentate e sostituiscile con il seguente prompt di Duet AI:

// Get new products from Firestore (added < 7 days ago) and quantity > 0 (in stock)

3. Per richiedere a Duet AI di generare il codice funzione, seleziona l'intero commento e fai clic sulla lampadina ( ).
4. Nel menu Altre azioni, seleziona Genera codice.
5. Passa il mouse sopra il codice generato e fai clic su Accetta nella barra degli strumenti di Duet AI. Duet AI compila il codice della funzione per l'endpoint /newproducts.

Nota: Duet AI potrebbe generare più versioni del codice per il tuo prompt. Puoi scegliere una versione specifica scorrendo l'elenco nella barra degli strumenti.

6. Il codice generato dovrebbe essere simile al seguente:

app.get("/newproducts", async (req: Request, res: Response) => {
  const products = await firestore
    .collection("inventory")
    .where("timestamp", ">", new Date(Date.now() - 604800000))
    .where("quantity", ">", 0)
    .get();
  const productsArray: any[] = [];
  products.forEach((product) => {
    const p: Product = {
      id: product.id,
      name: product.data().name,
      price: product.data().price,
      quantity: product.data().quantity,
      imgfile: product.data().imgfile,
      timestamp: product.data().timestamp,
      actualdateadded: product.data().actualdateadded,
    };
    productsArray.push(p);
  });
  res.send(productsArray);
});

Molte delle righe potrebbero essere sottolineate per avvisarti di potenziali problemi di licenza. Per questo lab, puoi applicare una correzione rapida, ma in futuro controlla questi avvisi.

7. Se il codice generato non è equivalente all'esempio del passaggio precedente, puoi sostituirlo ora o vedere in che modo Duet può aiutarti a eseguire il debug in un secondo momento. Esiste anche una versione del codice con l'errore previsto nel file scripts/solutioncode-with-bug.ts .
8. Salva il file index.ts.

Test e debug dell'endpoint /``newproducts

1. In Cloud Shell, passa alla directory cymbal-superstore/backend. Inserisci il comando:

npm run start

Questa operazione avvia l'endpoint.

2. Per vedere i risultati dell'endpoint, apri un altro terminale utilizzando il segno + nella barra dei menu di Cloud Shell ed esegui questo comando:

curl localhost:8000/newproducts

È possibile che vengano visualizzati l'errore curl: (52) Empty reply from server nel nuovo terminale e un lungo messaggio di errore con i dettagli 'Cannot have inequality filters on multiple properties: [quantity, timestamp]' nel terminale che esegue l'endpoint.

3. Risolviamo l'errore. Prima però dobbiamo capire il significato del messaggio di errore. Per farlo, chiederemo a Duet. Apri la chat Duet AI dal menu a sinistra dell'editor di Cloud Shell e chiedi quanto segue:

I'm querying Cloud Firestore and getting this error: 'Cannot have inequality filters on multiple properties: [quantity, timestamp]' What does it mean?

Duet dovrebbe fornirti alcune opzioni per risolvere il problema, tra cui la rimozione di uno dei filtri di disuguaglianza. Per risolvere il problema, elimina la riga .where("quantity", ">", 0) da index.ts in modo da avere un solo filtro nella query.

4. Ripeti i primi due passaggi precedenti per riavviare il server e recuperare l'elenco dei prodotti. Ora dovrebbe andare a buon fine, ma in caso contrario, usa Duet per capire il problema (oppure usa la soluzione corretta in scripts/solutioncode-bug-fixed.ts per andare avanti).

Deployment della modifica

Per eseguire il deployment dell'applicazione modificata, esegui di nuovo terraform apply dalla directory terraform in Cloud Shell. Potrai quindi visualizzare l'app all'indirizzo IP fornito da Terraform.

6. Test di scrittura

Un'attività importante che spesso non ha priorità è la creazione di test per il codice in un progetto. Come avrai intuito, Duet può aiutarti a creare questi test.

Creiamo dei test per il codice newproducts appena creato.

1. Apri backend/index.test.ts. Utilizza la chat di Duet AI per generare un test per la funzione newproducts() con il prompt:

Help me write an Express.js test using Jest, in typescript, for the GET /newproducts handler in index.ts. Should check if the response code is 200 and the list of new products is length 8.

Noterai che vengono visualizzate import righe già presenti nel file. Copia nel file solo il test describe() nelle righe indicate. Salva il file.

In alternativa, puoi migliorare il prompt e indicare a Duet di non includere istruzioni di importazione, così dovresti ottenere solo il codice che ti serve.

2. Per vedere i risultati del test, apri Cloud Shell, cambia la directory nella cartella backend ed esegui il comando:

npm run test

7. Logging

Duet AI può aiutare il tuo progetto anche dopo il deployment. In questa sezione esamineremo i log con l'aiuto di Duet AI.

Torna alla console Cloud e assicurati che Duet sia in esecuzione. Chiedi a Duet dove trovare i log. Puoi provare il tuo prompt, ma se non fornisce una risposta appropriata, il seguente prompt dovrebbe funzionare.

How can I view the Cloud Run logs for the service called 'inventory'?

Duet AI dovrebbe suggerire di andare alla pagina di Cloud Run, selezionare il servizio di inventario ed esaminare i log di quel servizio. Il risultato dovrebbe essere simile a questo:

Seleziona uno degli elementi e chiedi a Duet AI di spiegarlo. Dovresti ottenere una descrizione della voce in linguaggio naturale.

Puoi visualizzare le voci di log anche in Esplora log, che puoi aprire dall'opzione Logging nel menu principale. Un vantaggio della visualizzazione delle voci di log da Esplora log è che l'opzione per spiegare le voci è integrata, come mostrato di seguito:

8. Complimenti!

Complimenti: hai utilizzato con successo Duet AI per aiutarti a comprendere il codice che non hai mai visto prima. Hai migliorato questo codice, creato test e utilizzato Duet per comprendere le voci di log.

Esegui la pulizia

Elimina progetto

Per fare la pulizia, basta eliminare il nostro progetto.

• Nel menu di navigazione, seleziona IAM e. Amministratore
• Poi fai clic su Impostazioni nel sottomenu
• Fai clic sull'icona del cestino con il testo "Elimina progetto"
• Segui le istruzioni dei prompt.

In questo lab abbiamo visto come:

• Migliora un'applicazione web esistente con l'aiuto di Duet AI.
• Eseguire il deployment dell'applicazione in Cloud Run.
• Chiedi a Duet AI di spiegare un errore nell'applicazione e di fornire una correzione.
• Sviluppa test per l'applicazione con l'aiuto di Duet AI.
• Visualizza i log delle applicazioni con l'aiuto di Duet AI.