Introduzione ai test con Gemini Code Assist

1. Introduzione

In questo lab utilizzerai Gemini Code Assist, un collaboratore basato sull'IA di Google Cloud, per aggiungere test a un'applicazione web Python esistente, nonché per trovare e correggere gli errori nell'applicazione esposte dai test. Utilizzerai quindi Code Assist per creare test per le nuove funzionalità e generare codice per superare questi test ed estendere l'app.

Cosa farai...

  • Utilizzerai l'editor di Cloud Shell per scaricare il codice per 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 in linea di Gemini Code Assist nell'editor di Cloud Shell per generare test per l'applicazione, eseguire i test, trovare e correggere gli errori ed estendere la funzionalità dell'applicazione.

Cosa imparerai...

  • Come utilizzare Gemini Code Assist per diverse attività degli sviluppatori, come la generazione di test e di codice.
  • Come utilizzare Gemini Code Assist per imparare a utilizzare Google Cloud.

Che 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. Anche se l'applicazione di esempio è in linguaggio Python, non è necessario avere familiarità con la programmazione Python per capire cosa sta succedendo. Il nostro obiettivo sarà familiarizzare con le funzionalità di Gemini Code Assist per gli sviluppatori.

2. Configurazione

Dovresti già avere un progetto Cloud con fatturazione abilitata per questo lab. Ora abiliteremo l'API Gemini nel nostro progetto Google Cloud. Procedi come indicato di seguito:

  1. Visita 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 Gemini che vedi in alto a destra.

GeminiBanner.png

  1. Si aprirà la finestra di Gemini per la console Cloud sul lato destro della console. Fai clic sul pulsante Attiva se mostrato di seguito. Se non vedi il pulsante Abilita, ma vedi un'interfaccia di Chat, significa che hai già abilitato Gemini per Cloud per il progetto e puoi andare direttamente al passaggio successivo.

GeminiApiEnable.png

  1. Una volta abilitato, puoi testare Gemini chiedendogli una o due query. Vengono mostrate alcune query di esempio, ma puoi provare ad esempio Che cos'è Cloud Run?

GeminiChatWindow.png

Code Assist risponderà con la risposta 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.

Abilita Gemini nell'editor di Cloud Shell

Gemini Code Assist è disponibile e si comporta in modo simile in diversi IDE popolari. Utilizzerai l'editor di Google Cloud Shell, che viene eseguito completamente nel browser web, in questo codelab. 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 di Cloud Shell potrebbe richiedere un paio di minuti.

72dc3df7b007fcde.png

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

CloudShellEditor.png

  1. Fai clic sul pulsante Cloud Code - Accedi nella barra di stato in basso come mostrato. Autorizza il plug-in come da istruzioni. Se nella barra di stato vedi il messaggio "Cloud Code - no project" (Cloud Code - nessun progetto), selezionalo e 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, dovrai abilitarla in Cloud Code. Prima di farlo, assicurati che Gemini (precedentemente noto come Duet AI for Developers) sia abilitato nell'IDE: vai all'estensione Cloud Code → Impostazioni e inserisci il testo Duet AI: Abilita come mostrato di seguito. Assicurati che la casella di controllo sia selezionata. Dovresti ricaricare il tuo IDE. Gemini in Cloud Code attiva e la barra di stato di Gemini verrà visualizzata nel tuo 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. Dopo aver selezionato il progetto Google Cloud, assicurati di poterlo vedere nel messaggio di stato di Cloud Code nella barra di stato e di avere Gemini abilitato a destra, nella barra di stato, come mostrato di seguito:

GeminiEnabledStatusBar.png

Gemini Code Assist è pronto per l'uso.

3. Scarica ed esamina 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 di Gemini Chat facendo clic sull'icona della chat con Gemini sul lato sinistro dell'editor. Questa finestra di Gemini Chat è all'interno dell'IDE e ha 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 vedere la risposta completa. La spiegazione dice che possiamo eseguire questo programma in locale con il comando python3 main.py nella finestra del terminale.

4. Esegui localmente

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

3bf558e9cea15375.png

Clicca sul link http://127.0.0.1:8080 per aprire una nuova scheda del browser nella home page dell'applicazione:

fb06f382a4c03e4c.png

L'applicazione è in esecuzione "localmente". In realtà l'editor di Cloud Shell ha fatto un po' di magia in questo caso. L'applicazione è in esecuzione in Cloud Shell, non sul tuo computer. Quando hai fatto clic sul link, è stata aperta una scheda non nell'indirizzo locale effettivo http://127.0.0.1:8080, ma in un server proxy configurato proprio per questo scopo da Cloud Shell. L'effetto è lo stesso che se la eseguissi davvero in locale.

Provalo. Inserisci 25 e premi Converti!

e1b9d5832f6d0058.png

Esatto, 25 è XXV in numeri romani! Devi completare l'operazione qui.

Magari controlla qualche altro numero. 25 hanno funzionato, cosa circa 24?

37982e385e17baac.png

Forse siamo stati un po' frettolosi a pensare che andava tutto bene. XXIIII è la conversione corretta per 24? Non dovrebbe essere il XXIV?

Si potrebbe ammettere che XXIIII ha ragione, ma non è esattamente ciò che le persone si aspettano solitamente. Tuttavia, dal momento che non è un errore (tieni presente che molti orologi mostrano il numero 4 come numero romano IIII), lascia questo problema per un miglioramento futuro.

Provare i numeri negativi Zero? Non è possibile rappresentare questi numeri in numeri romani. Sembra che l'utente non restituisca nulla, sembra che si tratti di un errore che deve essere risolto.

I test possono aiutare a trovare ed eliminare gli errori, mentre 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 sui moduli unittest e pytest.

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

How can I test the number_to_roman function?

La risposta è ora più specifica, anche con l'inclusione di 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 vedere un codice diverso dall'esempio precedente. I modelli sottostanti di Gemini Code Assist vengono aggiornati di tanto in tanto, quindi le risposte non saranno sempre le stesse. Se vedi un set di codice diverso, ora puoi scegliere se continuare con gli esempi mostrati in questo codelab copiando il codice mostrato qui oppure puoi provare la risposta alternativa che Gemini Code Assist ti fornisce ora. Se hai tempo, puoi anche provare entrambi i percorsi. Gemini Code Assist è un assistente di programmazione che puoi utilizzare in base alle tue esigenze.

Fai clic sulla freccia con due punte nell'angolo in alto a destra della finestra di Gemini Chat per creare un nuovo file contenente il codice del test delle unità oppure utilizza l'IDE per creare un nuovo file e incolla il codice mostrato in questo lab. Premi CTRL-S o CMD-S nella finestra per salvare il file e richiama il file salvato calendar-unittest.py.

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

python3 calendar-unittest.py

per eseguire i nuovi test.

Nessun output. Non è quello che ci aspettavamo. È passato tutto in silenzio? Ti piacerebbe saperlo con certezza. Guarda di nuovo la risposta di Gemini Code Assist che includeva il codice del test. Sotto il codice c'erano maggiori informazioni su come eseguire lo scenario di test:

run-unittest.png

Prova a eseguire il comando consigliato:

python -m unittest discover

È possibile che si verifichi un problema se la macchina non esegue l'aliasing del comando python3 a python. In questo caso, esegui:

python3 -m unittest discover

Il comando viene eseguito, ma restituisce Ran 0 tests in 0.000s. Il modulo include diversi test. Che cosa succede?

È l'ultima parola del comando, discover. Da dove viene? 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 cosa dovresti fare. Poiché hai effettivamente salvato il file in calendar-unittest.py, prova a eseguire questo comando:

python3 -m unittest calendar-unittest

Ora vedrai molti output, a partire da qualcosa del genere:

$ 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 riuscito. La maggior parte dei test non riesce. Quindi, elenca singolarmente i test non riusciti, mostrando sia l'output previsto che quello effettivo. Non è chiaro in quale ordine sono stati eseguiti questi test. Era in ordine alfabetico in base al nome del test, non all'ordine in cui i test compaiono nel file. Quindi è stato eseguito prima test_convert_1, poi test_convert_1990, poi test_convert_2023 e così via. Gli scenari di test per 1 e 2023 sono gli unici superati.

Quando hai provato per la prima volta questo codice, hai notato che ha convertito 24 in XXIIII, il che non era esattamente sbagliato, ma non è il formato comune in cui IIII viene convertito in IV. Tutti i test non riusciti si sono verificati per casi simili. Quando questo problema è stato notato per la prima volta, il laboratorio ha detto: "Dal momento che però non è davvero sbagliato (tieni presente che molti orologi mostrano 4 come numero romano IIII) lascia questo problema per un futuro miglioramento.

Potresti cambiare gli scenari di test in modo che accettino e accettino il messaggio "Non proprio sbagliato" risponda al codice che ti viene fornito o accetti che sia giunto il momento di quel "miglioramento futuro". Il passaggio successivo quindi è correggere il codice, con l'aiuto di Gemini Code Assist, per fornire le risposte più accettabili previste dai test.

6. Miglioramento del codice in corso...

Ricorda che risposte come XXIIII per 24, invece del più comune XXIV, sono state considerate "non realmente sbagliate" e sono stati posticipati per un miglioramento futuro. Il futuro è adesso. Quelle "non proprio sbagliate" risposte sono ancora fastidiose.

La prima regola per i numeri romani ripetuti è che ogni volta che ci sono quattro cifre identiche in una riga, devono essere sostituite da una delle cifre seguite dalla cifra più alta successiva. Di conseguenza, XXIIII deve essere sostituito da XXIV. Allo stesso modo, XXXX deve essere modificato in XL, mentre 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?

Ti suggeriamo di aggiungere del codice alla fine:

6437c3fa2c5fabd1.png

Copia/incolla o digita le righe nell'editor, quindi osserva cosa succede:

dcefa568cab82fb7.png

Gemini Code Assist ha aggiunto altre righe per gestire le richieste che potresti ricevere dopo aver effettuato la prima serie di sostituzioni. Ad esempio, 19 verrebbe convertito in XVIIII, poi in XVIV e infine nel XIX corretto.

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

a206999587fdc9.png

risposta esatta.

Esegui di nuovo i test ora. Passano tutti!

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

7. Esegui il deployment in Cloud Run

Cloud Run eseguirà per te un'applicazione containerizzata su internet. 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 viene richiesta la posizione del codice sorgente, premi Invio per accettare la posizione corretta suggerita. Allo stesso modo, quando ti viene richiesto il nome di un servizio, premi Invio per accettare il suggerimento.

Il comando potrebbe non riuscire perché gcloud non è in grado di determinare quale progetto utilizzare. In tal caso, esegui il comando:

gcloud config set core/project <project-id>

dove viene sostituito dall'ID del progetto, che può essere uguale al suo nome. Quindi esegui nuovamente il comando gcloud run deploy.

  • Il comando ti chiederà che alcune API sono necessarie e non ancora abilitate. Inserisci una y per attivarle automaticamente.
  • Quando ti viene chiesto di selezionare una regione, scegline una. L'inserimento del numero corrispondente a us-central1 è una scelta sicura.
  • Quando richiesto, inserisci Y per continuare.
  • È consigliabile consentire le chiamate non autenticate per questo servizio Cloud Run. L'opzione di autenticazione utilizzata da Cloud Run è adatta all'uso da parte dei programmi che chiamano il servizio. Poiché questo è un sito web, non utilizzerai l'autenticazione.

Google Cloud creerà il container, ne eseguirà il deployment, instraderà il traffico e imposterà i criteri di accesso, quindi mostrerà il link alla home page:

94ba7d8d63a44afd.png

Puoi andare al link e accedere alla tua applicazione.

a2e51666dfd33a9f.png

Inserisci un numero e premi Invio e tada!

5021535ac991a95c.png

Cosa?!

Ha funzionato sulla tua macchina! Perché non è finito?

Scoprilo. 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. Chiedi a Gemini Code Assist come puoi esaminare i log autonomamente:

92d1855be73ef1d.png

Vai avanti e creale Cerca linee con il rosso! indicatori di errore, come indicato di seguito:

9bed4f9ed82de21c.png

Questo è seguito da molte righe di dettaglio sullo stack di chiamate arrivando qui, ma poi c'è questo:

47fc93be845f4e3f.png

Quando osservi il file calendar.py, puoi vedere la funzione number_to_roman proprio lì! E sai che è giusto perché ha funzionato sulla tua macchina. Cosa potrebbe essere diverso in Cloud Run?

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

Questo tipo di differenze negli ambienti è sempre possibile. Fortunatamente, quando un'applicazione è containerizzata, trasporta il proprio ambiente al suo interno, quindi ovunque la esegui ci si può aspettare lo stesso comportamento. Se avessi eseguito localmente la stessa applicazione containerizzata di Cloud Run, avresti avuto lo stesso problema.

Risolvi questo problema. Devi cambiare il nome del modulo del calendario locale in un nome che non sia anche un nome standard. Rinomina il file calendar.py in my_calendar.py, quindi modifica le righe import calendar in main.py e calendar-unittest.py in import my_calendar. Infine, modifica la linea

roman = calendar.number_to_roman(number)

a

roman = my_calendar.number_to_roman(number)

Fai una prova locale, esegui i test ed esegui nuovamente il deployment:

gcloud run deploy

E ora funziona:

ed288801c6825eb1.png

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

8. (Facoltativo) Migliora l'aspetto

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

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

Make this index.html file use material design.

La risposta consiste nell'aggiungere il file corrente, ottenendo qualcosa di simile alla 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 incolla i contenuti esistenti di index.html. Nel terminale, esegui python3 main.py e fai clic sul link per aprire una finestra di anteprima. La pagina è un po' meno semplice ora:

295643ec03fcaafc.png

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

Gemini Code Assist conosce abbastanza codice CSS e ti aiuta a definire lo stile delle 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 trasmettere l'URL alle persone che devono convertire in numeri romani.

9. Complimenti!

Complimenti: hai lavorato correttamente con Gemini Code Assist per aggiungere test a un'applicazione, correggere gli errori e aggiungere funzionalità avanzate.

Quando hai finito di utilizzare l'applicazione che hai creato, puoi eliminarla dalla dashboard di Cloud Console per interrompere eventuali addebiti futuri.

Documenti di riferimento...