Introduzione ai test con Gemini Code Assist

1. Introduzione

In questo lab, utilizzerai Gemini Code Assist, un collaboratore basato sull'AI in Google Cloud, per aggiungere test a un'applicazione web Python esistente e trovare e correggere gli errori in questa applicazione rilevati dai test. Utilizzerai poi Code Assist per creare test per nuove funzionalità e generare codice per superare questi test ed estendere l'app.

Attività previste

  • Utilizzerai Cloud Shell Editor per scaricare il codice di un'applicazione web esistente.
  • Utilizzerai la chat di Gemini Code Assist nell'editor di Cloud Shell per porre domande generali su Google Cloud.
  • Utilizzerai l'assistenza per il codice inline di Gemini Code Assist nell'editor di Cloud Shell per generare test per l'applicazione, eseguirli, trovare e correggere gli errori e poi estendere la funzionalità dell'applicazione.

Cosa imparerai…

  • Come utilizzare Gemini Code Assist per diverse attività di sviluppo, come la generazione di test e di codice.
  • Come utilizzare Gemini Code Assist per scoprire di più su Google Cloud.

Cosa ti serve…

  • Browser web Chrome
  • Un account Gmail
  • Un progetto cloud con fatturazione abilitata
  • Gemini Code Assist abilitato per il tuo progetto cloud

Questo lab è rivolto a sviluppatori di tutti i livelli, inclusi i principianti. Sebbene l'applicazione di esempio sia in linguaggio Python, non è necessario avere familiarità con la programmazione in Python per capire cosa sta succedendo. Ci concentreremo sull'acquisizione di familiarità con le funzionalità di Gemini Code Assist per sviluppatori.

2. Configurazione

Per questo lab, dovresti già avere un progetto Cloud con la fatturazione abilitata. Ora abiliteremo l'API Gemini nel nostro progetto Google Cloud. Segui i passaggi riportati di seguito:

  1. Visita https://console.cloud.google.com e assicurati di aver selezionato il progetto Google Cloud che intendi utilizzare per questo lab. Fai clic sull'icona Gemini in alto a destra.

GeminiBanner.png

  1. La finestra della console Gemini in Cloud si aprirà sul lato destro della console. Fai clic sul pulsante Attiva se viene visualizzato di seguito. Se non vedi il pulsante Attiva e visualizzi invece un'interfaccia di chat, hai già attivato Gemini in Cloud per il progetto e puoi passare direttamente al passaggio successivo.

GeminiApiEnable.png

  1. Una volta attivato, puoi provare Gemini ponendo una o due query. Vengono mostrate alcune query di esempio, ma puoi provare a chiedere Che cos'è Cloud Run?

GeminiChatWindow.png

Code Assist risponderà alla tua domanda. Puoi fare clic sull'icona f68286b2b2ea5c0a.png nell'angolo in alto a destra per chiudere la finestra della chat di Code Assist.

Attivare Gemini nell'editor di Cloud Shell

Gemini Code Assist è disponibile e si comporta in modo simile in diversi IDE popolari. In questo codelab utilizzerai Google Cloud Shell Editor, che viene eseguito completamente nel browser web. Devi abilitare e configurare Gemini nell'editor di Cloud Shell. I passaggi sono riportati di seguito:

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

72dc3df7b007fcde.png

  1. Fai clic sul pulsante Editor o Apri editor (a seconda dei casi) e attendi che venga visualizzato l'editor di Cloud Shell. Se vedi il pulsante Prova il nuovo editor, fai clic.

CloudShellEditor.png

  1. Fai clic sul pulsante Cloud Code - Sign in (Cloud Code - Accedi) nella barra di stato in basso, come mostrato. Autorizza il plug-in come indicato. Se nella barra di stato vedi "Cloud Code - no project", selezionalo e poi scegli il progetto Google Cloud specifico dall'elenco dei progetti con cui prevedi di lavorare.

CloudCodeSignIn.png

  1. Se non vedi l'icona di Gemini nella barra di stato in basso a destra, devi abilitarla in Cloud Code. Prima di farlo, assicurati che Gemini (precedentemente noto come Duet AI for Developers) sia attivato nell'IDE andando su Estensione Cloud Code → Impostazioni e poi inserisci il testo Duet AI: Enable (Duet AI: attiva) come mostrato di seguito. Assicurati che la casella di controllo sia selezionata. Dovresti ricaricare l'IDE. In questo modo, Gemini viene abilitato in Cloud Code e la barra di stato di Gemini viene visualizzata nell'IDE.

EnableDuetAiSetting.png

  1. Fai clic sul pulsante Gemini 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.

GeminiSelectGoogleCloudProject.png

  1. Una volta selezionato il progetto Google Cloud, assicurati di visualizzarlo nel messaggio di stato di Cloud Code nella barra di stato e che Gemini sia attivato a destra, nella barra di stato, come mostrato di seguito:

GeminiEnabledStatusBar.png

Gemini Code Assist è pronto per l'uso.

3. Scaricare ed esaminare l'applicazione

Nella finestra del terminale, esegui il comando per clonare il repository con il codice iniziale e poi passa alla nuova directory (se la finestra del terminale non è più aperta, fai clic sul pulsante Terminale o Apri terminale per ripristinarla):

git clone https://github.com/GoogleCloudPlatform/testing-with-duet-ai-codelab.git
cd testing-with-duet-ai-codelab

Apri main.py nell'editor, quindi apri la finestra Gemini Chat facendo clic sull'icona di Gemini Chat sul lato sinistro dell'editor. Questa finestra di Gemini Chat si trova all'interno dell'IDE e il codice nell'IDE è disponibile come contesto per la discussione. Inserisci il prompt Spiega questo e visualizza la risposta:

GeminiChatExplainThis.png

Puoi scorrere questa finestra della chat per visualizzare l'intera risposta. La spiegazione indica che possiamo eseguire questo programma localmente con il comando python3 main.py nella finestra del terminale.

4. Esegui in locale

Se necessario, passa alla directory del repository con cd ~/testing-with-duet-ai-codelab e inserisci il comando python3 main.py nella finestra del terminale:

3bf558e9cea15375.png

Fai clic sul link http://127.0.0.1:8080 per aprire una nuova scheda del browser con la home page dell'applicazione:

fb06f382a4c03e4c.png

L'applicazione viene eseguita "localmente". In realtà, l'editor di Cloud Shell ha fatto un po' di magia qui. L'applicazione viene eseguita in Cloud Shell, non sul tuo computer. Quando hai fatto clic sul link, si è aperta una scheda non all'indirizzo locale effettivo http://127.0.0.1:8080, ma a un server proxy configurato appositamente per questo scopo da Cloud Shell. L'effetto è lo stesso che si avrebbe se lo eseguissi localmente.

Provalo. Inserisci 25 e premi Converti.

e1b9d5832f6d0058.png

Esatto, 25 è XXV in numeri romani. Devi aver finito.

Prova a controllare qualche altro numero. 25 ha funzionato, che ne dici di 24?

37982e385e17baac.png

Forse abbiamo pensato un po' troppo in fretta che tutto andasse bene. XXIIII è la conversione corretta di 24? Non dovrebbe essere XXIV?

Si potrebbe sostenere che XXIIII sia corretto, ma non è quello che gli utenti si aspettano di solito. Poiché non è un errore vero e proprio (molti orologi mostrano il numero romano IIII per indicare le 4), lascia questo problema per un miglioramento futuro.

Prova con i numeri negativi. Zero? Non è possibile rappresentare questi numeri in numeri romani. All'utente non viene restituito nulla, il che sembra un errore da risolvere.

I test possono aiutare a trovare ed eliminare gli errori e Gemini Code Assist può aiutarci a scrivere e utilizzare i test.

5. Aggiunta di test

Torna alla finestra di Gemini Chat e chiedi

How can I test the number_to_roman function?

Leggi la risposta, che dovrebbe includere una discussione sul modulo unittest e sul modulo pytest.

Ti potrebbe interessare che Gemini Code Assist scriva questi test per te. Apri calendar.py, dove si trova il codice di conversione effettivo, nell'editor, torna alla finestra di Gemini Chat e chiedi di nuovo

How can I test the number_to_roman function?

La risposta è ora più specifica e include persino un modulo unittest che puoi copiare o inserire in un nuovo file:

import unittest
import calendar

class NumberToRomanTest(unittest.TestCase):

    def test_convert_1(self):
        self.assertEqual(calendar.number_to_roman(1), "I")

    def test_convert_4(self):
        self.assertEqual(calendar.number_to_roman(4), "IV")

    def test_convert_9(self):
        self.assertEqual(calendar.number_to_roman(9), "IX")

    def test_convert_40(self):
        self.assertEqual(calendar.number_to_roman(40), "XL")

    def test_convert_90(self):
        self.assertEqual(calendar.number_to_roman(90), "XC")

    def test_convert_400(self):
        self.assertEqual(calendar.number_to_roman(400), "CD")

    def test_convert_900(self):
        self.assertEqual(calendar.number_to_roman(900), "CM")

    def test_convert_1990(self):
        self.assertEqual(calendar.number_to_roman(1990), "MCMXC")

    def test_convert_2023(self):
        self.assertEqual(calendar.number_to_roman(2023), "MMXXIII")

Potresti visualizzare un codice diverso da quello dell'esempio riportato sopra. I modelli di base di Gemini Code Assist vengono aggiornati di tanto in tanto, quindi le risposte non saranno sempre le stesse. Se vedi un insieme di codici diverso, ora puoi scegliere se continuare con gli esempi mostrati in questo codelab copiando il codice mostrato qui oppure provare la risposta alternativa che Gemini Code Assist ti sta fornendo. Se hai tempo, puoi anche provare entrambi i percorsi. Gemini Code Assist è un assistente alla programmazione che puoi utilizzare come preferisci.

Fai clic sulla freccia a doppia punta nell'angolo in alto a destra della finestra di chat di Gemini per creare un nuovo file contenente il codice del test unitario oppure utilizza l'IDE per creare un nuovo file e incollare il codice mostrato in questo lab. Premi CTRL+S o CMD+S in quella finestra per salvarlo e chiama il file salvato calendar-unittest.py.

Torna al terminale e premi Ctrl+C per arrestare il server web che hai lasciato in esecuzione in precedenza e visualizzare un prompt della shell. Inserisci il comando

python3 calendar-unittest.py

per eseguire i nuovi test.

Non è presente alcun output. Non è quello che ci aspettavamo. È andato tutto a buon fine in modalità silenziosa? Vorresti saperlo con certezza. Rivedi la risposta di Gemini Code Assist che includeva il codice di test. Sotto il codice c'erano ulteriori informazioni su come eseguire lo scenario di test:

run-unittest.png

Prova a eseguire il comando consigliato:

python -m unittest discover

Potresti avere un problema se il tuo computer non associa l'alias del comando python3 a python, nel qual caso esegui:

python3 -m unittest discover

Il comando viene eseguito, ma restituisce Ran 0 tests in 0.000s. Il modulo contiene diversi test. Cosa succede?

Si tratta dell'ultima parola del comando, discover. Da dove proviene? A quanto pare, Gemini Code Assist si aspettava che il codice di test venisse salvato in un file denominato discover o discover.py, ma non ha specificato che è quello che devi fare. Poiché hai effettivamente salvato il file in calendar-unittest.py, prova a eseguire il comando:

python3 -m unittest calendar-unittest

Ora vedrai molti output, a partire da qualcosa di simile a questo:

$ python3 -m unittest calendar-unittest
.F.FFFFFF
======================================================================
FAIL: test_convert_1990 (calendar-unittest.NumberToRomanTest)
----------------------------------------------------------------------
Traceback (most recent call last):
  File "/home/charles_engelke/testing-with-duet-ai-codelab/calendar-unittest.py", line 28, in test_convert_1990
    self.assertEqual(calendar.number_to_roman(1990), "MCMXC")
AssertionError: 'MDCCCCLXXXX' != 'MCMXC'
- MDCCCCLXXXX
+ MCMXC

La prima riga mostra un punto per ogni test superato e un F per ogni test non superato. La maggior parte dei test non riesce. Quindi elenca i test non riusciti singolarmente, mostrando l'output previsto e quello effettivo. Non è molto chiaro in quale ordine sono stati eseguiti questi test. Era in ordine alfabetico in base al nome del test, non in base all'ordine in cui i test vengono visualizzati nel file. Quindi, test_convert_1 è stato eseguito per primo, poi test_convert_1990, poi test_convert_2023 e così via. Sono stati superati solo gli scenari di test per 1 e 2023.

Quando hai provato questo codice per la prima volta, hai notato che convertiva 24 in XXIIII, il che non era del tutto sbagliato, ma non era la forma comune in cui IIII viene convertito in IV. Tutti i test non superati riguardavano casi simili. Quando è stato notato per la prima volta questo problema, il lab ha dichiarato: "Poiché non è un errore vero e proprio (tieni presente che molti orologi mostrano 4 come numero romano IIII), rimandiamo la risoluzione del problema a un miglioramento futuro".

Potresti modificare i casi di test in modo che prevedano e accettino le risposte "non proprio sbagliate" fornite dal codice oppure accettare che sia arrivato il momento di apportare il "miglioramento futuro". Il passaggio successivo è correggere il codice, con l'aiuto di Gemini Code Assist, per fornire le risposte più accettabili che i test si aspettano.

6. Miglioramento del codice

Ricorda che risposte come XXIIII per 24, anziché la più comune XXIV, sono state considerate "non del tutto errate" e sono state rimandate a un miglioramento futuro. Quel futuro è ora. Queste risposte "non del tutto sbagliate" sono comunque fastidiose.

La prima regola per le cifre ripetute nei numeri romani è: ogni volta che hai quattro cifre identiche di fila, devono essere sostituite da una delle cifre seguita dalla cifra successiva più alta. Pertanto, XXIIII deve essere sostituito da XXIV. Analogamente, XXXX deve essere sostituito con XL e CCCC deve diventare CD.

Chiedi a Gemini Code Assist come modificare il valore della variabile roman in questo modo poco prima che venga restituito da number_to_roman:

If the final value of roman has IIII in it, that should be replaced by IV. Similarly XXXX should be replaced by XL, and CCCC should become CD. How can I make those changes?

Il suggerimento è di aggiungere del codice alla fine:

6437c3fa2c5fabd1.png

Copia/incolla o digita queste righe nell'editor, quindi guarda cosa succede:

dcefa568cab82fb7.png

Gemini Code Assist ha aggiunto altre righe per gestire i casi che possono verificarsi dopo aver effettuato il primo insieme di sostituzioni. Ad esempio, 19 verrà convertito in XVIIII, poi in XVIV e infine nel corretto XIX.

Se Gemini Code Assist ha fornito suggerimenti apparentemente utili, premi Tab per accettare i consigli, salva il file ed esegui di nuovo il server web. In caso contrario, aggiungi manualmente le righe mostrate nell'esempio qui e salva il file. Prova una conversione difficile: 1999:

a206999587fdc9.png

risposta esatta.

Esegui di nuovo i test. Superano tutti il test.

L'applicazione web sembra pronta per essere messa in produzione.

7. Esegui il deployment in Cloud Run

Cloud Run eseguirà un'applicazione containerizzata su internet per te. Per le applicazioni scritte utilizzando framework comuni, come Flash, il comando gcloud run deploy creerà anche il container prima di eseguirne il deployment. Esegui il comando:

gcloud run deploy

Nel terminale. Quando ti viene chiesto il percorso del codice sorgente, premi Invio per accettare il percorso corretto suggerito. Allo stesso modo, quando ti viene chiesto un nome del servizio, premi Invio per accettare il suggerimento.

Il comando potrebbe non riuscire perché gcloud non riesce a determinare quale progetto utilizzare. In questo caso, esegui il comando:

gcloud config set core/project <project-id>

dove viene sostituito dall'ID del tuo progetto, che potrebbe coincidere con il nome. Quindi esegui nuovamente il comando gcloud run deploy.

  • Il comando ti chiederà di abilitare alcune API necessarie. Inserisci y per attivarli.
  • Quando ti viene chiesto di selezionare una regione, scegli quella più comoda per te. Inserire il numero corrispondente a us-central1 è una scelta sicura.
  • Quando ti viene chiesto, inserisci Y per continuare.
  • Ti consigliamo di consentire le chiamate non autenticate di questo servizio Cloud Run. L'opzione di autenticazione utilizzata da Cloud Run è adatta all'uso da parte dei programmi che chiamano il servizio. Poiché si tratta di un sito web, non utilizzerai l'autenticazione.

Google Cloud creerà il container, ne eseguirà il deployment, indirizzerà il traffico e imposterà le policy di accesso, quindi ti mostrerà il link alla home page:

94ba7d8d63a44afd.png

Puoi andare a questo link e accedere alla tua applicazione.

a2e51666dfd33a9f.png

Inserisci un numero e premi Invio. Il gioco è fatto.

5021535ac991a95c.png

Cosa?!

Ha funzionato sul tuo computer. Perché non è stato completato?

Scopri di più. Chiedi a Gemini Code Assist,

Why am I getting an internal server error on cloud run?

4b24321251d6eddf.png

A quanto pare, Gemini Code Assist può leggere il file di log, che dice qualcosa di simile. Chiediamo a Gemini Code Assist come puoi visualizzare i log:

92d1855be73ef1d.png

Vai avanti e creale Cerca le righe con indicatori di errore rossi !!, come di seguito:

9bed4f9ed82de21c.png

Seguono molte righe di dettagli sullo stack di chiamate che arrivano qui, ma poi c'è questo:

47fc93be845f4e3f.png

Quando esamini il file calendar.py, vedi la funzione number_to_roman. E sai che è giusto perché ha funzionato sul tuo computer. Cosa potrebbe essere diverso in Cloud Run?

La risposta è un po' complicata. Esiste un modulo standard incluso in Python3 chiamato calendar, proprio come il file calendar.py in cui è definita la funzione number_to_roman. Sulla tua macchina locale, quando Python cercava un modulo chiamato calendar, cercava prima nella directory dell'applicazione. A quanto pare, Python su Cloud Run ha cercato prima i moduli standard, li ha importati e non ha trovato una funzione number_to_roman.

Questi tipi di differenze negli ambienti sono sempre possibili. Fortunatamente, quando un'applicazione viene containerizzata, il suo ambiente viene trasportato al suo interno, quindi ovunque la esegui puoi aspettarti lo stesso comportamento. Se avessi eseguito localmente la stessa applicazione containerizzata di Cloud Run, avresti riscontrato lo stesso problema.

Risolvi questo problema. Devi modificare il nome del modulo del calendario locale in modo che non corrisponda a un nome di modulo standard. Rinomina il file calendar.py in my_calendar.py, poi modifica le righe import calendar in main.py e calendar-unittest.py in import my_calendar. Infine, cambia la linea

roman = calendar.number_to_roman(number)

a

roman = my_calendar.number_to_roman(number)

Provalo localmente, esegui i test e poi esegui nuovamente il deployment:

gcloud run deploy

Ora funziona:

ed288801c6825eb1.png

Puoi condividere questo URL e chiunque abbia bisogno di uno strumento di conversione dei numeri romani può utilizzare il tuo.

8. (Facoltativo) Migliora l'aspetto

La tua applicazione funziona correttamente ed è accessibile a chiunque sul web. Ma ha un aspetto un po' semplice. Prima di dirlo a tutti, perché non chiedi a Gemini Code Assist di migliorarne l'aspetto?

Apri il file templates/index.html. Nella finestra della chat con Gemini, chiedi:

Make this index.html file use material design.

La risposta consiste nell'aggiungere elementi al file corrente, ottenendo un risultato simile al seguente:

<!DOCTYPE html>
<html>
<head>
    <title>Roman Numerals</title>
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">   
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>     
</head>
<body>
    <h1 class="mdl-typography--title">Roman Numerals</h1>
    <form action="/convert" method="post">
        <div class="mdl-textfield mdl-js-textfield">
            <input class="mdl-textfield__input" type="text" id="number" name="number" required />
            <label class="mdl-textfield__label" for="number">Enter a number:</label>
          </div>
          <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
            Convert!
          </button>
    </form>
</body>
</html>

Utilizza l'icona per copiare il codice suggerito e incollarlo al posto dei contenuti esistenti di index.html. Nel terminale, esegui python3 main.py e fai clic sul link per aprire una finestra di anteprima. Ora la pagina è un po' meno semplice:

295643ec03fcaafc.png

Se vuoi, puoi ripetere questa operazione con il file convert.html.

Gemini Code Assist conosce un bel po' di CSS e può aiutarti a stilizzare le pagine dell'applicazione in vari modi. Questo è solo l'inizio.

Poiché vuoi condividere questa applicazione, non dimenticare di eseguirne nuovamente il deployment in Cloud Run:

gcloud run deploy

Puoi inoltrare l'URL alle persone che devono eseguire la conversione in numeri romani.

9. Complimenti!

Congratulazioni. Hai utilizzato Gemini Code Assist per aggiungere test a un'applicazione, correggere gli errori e aggiungere funzionalità avanzate.

Quando hai finito di utilizzare l'applicazione che crei, puoi eliminarla dalla dashboard della console cloud per interrompere eventuali addebiti futuri.

Documenti di riferimento…