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 e trovare e correggere gli errori nell'applicazione esposta dai test. Userai quindi Code Assist per creare test per le nuove funzionalità e generare codice per superare questi test ed estendere l'app.

Attività previste

  • Utilizzerai l'editor di Cloud Shell per scaricare il codice di un'applicazione web esistente.
  • Utilizzerai la chat di Gemini Code Assist nell'editor di Cloud Shell per fare 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, nonché per estendere la funzionalità dell'applicazione.

Obiettivi didattici...

  • Come utilizzare Gemini Code Assist per diverse attività degli sviluppatori come la generazione di test e la generazione di codice.
  • Come utilizzare Gemini Code Assist per conoscere 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 agli sviluppatori di tutti i livelli, inclusi i principianti. Anche se l'applicazione di esempio è nel linguaggio Python, non è necessario avere familiarità con la programmazione Python per capire cosa sta succedendo. Il nostro obiettivo sarà acquisire familiarità con le funzionalità di Gemini Code Assist per gli sviluppatori.

2. Imposta

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

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

GeminiBanner.png

  1. Sul lato destro della console Gemini for Cloud si aprirà la finestra. Fai clic sul pulsante Attiva, se mostrato di seguito. Se non vedi il pulsante Abilita, ma vedi l'interfaccia di Chat, 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 chiedendo una o due query. Sono visualizzati alcuni esempi di query, ma puoi provare con 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.

Abilita Gemini nell'editor di Cloud Shell

Gemini Code Assist è disponibile e si comporta in modo simile in diversi IDE comuni. In questo codelab utilizzerai l'editor di Google Cloud Shell, che viene eseguito completamente nel tuo browser web. Devi abilitare e configurare Gemini nell'editor di Cloud Shell e seguire i passaggi 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 dei casi) e attendi finché non viene visualizzato l'editor di Cloud Shell. Fai clic sul pulsante Prova il nuovo editor, se visualizzato.

CloudShellEditor.png

  1. Fai clic sul pulsante Cloud Code - Accedi nella barra di stato in basso, come mostrato. Autorizza il plug-in come indicato. Se nella barra di stato è visualizzato il messaggio "Cloud Code - no project", 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 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 per gli sviluppatori) sia abilitato nell'IDE andando all'estensione Cloud Code → Impostazioni e inserendo il testo Duet AI: Abilita, come mostrato di seguito. Assicurati che la casella di controllo sia selezionata. Devi ricaricare il tuo IDE. Questa opzione abilita Gemini in Cloud Code e la barra di stato Gemini viene 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 cui 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 sulla 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, quindi 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 della chat di Gemini sul lato sinistro dell'editor. Questa finestra di Gemini Chat si trova all'interno dell'IDE e ha il codice al suo interno disponibile come contesto per la discussione. Inserisci il prompt Spiega questo e visualizza la risposta:

GeminiChatExplainThis.png

Per vedere la risposta completa, puoi scorrere la finestra della chat. La spiegazione indica che possiamo eseguire il 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

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

fb06f382a4c03e4c.png

L'applicazione viene eseguita "in locale". 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. Facendo clic sul link, si è aperta una scheda che non rimandava 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 è come se l'avessi eseguito localmente.

Provalo. Inserisci 25 e premi Converti!

e1b9d5832f6d0058.png

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

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

37982e385e17baac.png

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

Possiamo affermare che XXIIII ha ragione, ma non è proprio ciò che la gente si aspetta di solito. Tuttavia, poiché non è sbagliato (tieni presente che molti orologi mostrano il numero 4 come numero romano IIII), lascia questo problema per un miglioramento futuro.

Che ne dici di provare con i numeri negativi? Zero? Non c'è modo di rappresentare quei numeri in numeri romani. Non sembra essere restituito nulla all'utente, il che è come 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 della chat di Gemini e chiedi

How can I test the number_to_roman function?

Leggi la risposta, che dovrebbe includere discutere dei moduli unittest e pytest.

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

How can I test the number_to_roman function?

La risposta è ora più specifica, anche includendo 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 rispetto all'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 sta offrendo. Se hai tempo, puoi anche provare entrambi i percorsi. Gemini Code Assist è un assistente di programmazione che puoi utilizzare come meglio credi.

Fai clic sulla freccia a doppia punta 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 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 avevi 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. È passato tutto in silenzio? Lo vorresti saperlo con certezza. Prendi in esame 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

Potrebbe essersi verificato un problema se la tua macchina non esegue 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. Che cosa succede?

È l'ultima parola nel 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 il comando:

python3 -m unittest calendar-unittest

Vedrai molti output, che iniziano con il seguente esempio:

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

Quando hai provato per la prima volta questo codice, hai notato che ha convertito 24 in XXIIII, il che non era esattamente un errore, ma non nel formato comune in cui IIII viene convertito in IV. Tutti i test con esito negativo riguardavano casi simili. Quando questo problema è stato rilevato per la prima volta, il lab ha indicato: "Dal momento che non è davvero sbagliato (tieni presente che molti orologi mostrano 4 come numero romano IIII), lascia questo problema per un miglioramento futuro."

Puoi modificare gli scenari di test in modo da aspettarsi e accettare le risposte "non davvero sbagliate" fornite dal codice oppure accettare che sia giunto il momento di "migliorare il futuro". Il passaggio successivo consiste nel 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é le più comuni XXIV, sono state considerate "non davvero errate" e sono state posticipate per un miglioramento futuro. Quel futuro è adesso. Queste risposte "non davvero sbagliate" sono comunque fastidiose.

La prima regola per le cifre ripetute in numeri romani è: ogni volta che si hanno quattro cifre identiche in una riga, queste devono essere sostituite da una delle cifre seguita dalla cifra successiva più alta. Di conseguenza, XXIIII deve essere sostituito con XXIV. Analogamente, XXXX deve essere modificato in XL e CCCC deve diventare CD.

Chiedi a Gemini Code Assist come modificare il valore della variabile roman in questo modo prima che venga restituita 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 e incolla o digita queste righe nell'editor, quindi guarda cosa succede:

dcefa568cab82fb7.png

Gemini Code Assist ha aggiunto altre righe per gestire i casi a cui puoi arrivare dopo aver effettuato il primo insieme di sostituzioni. Ad esempio, 19 verrebbe convertito in XVIIII, quindi in XVIV e infine nella XIX corretta.

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

a206999587fdc9.png

risposta esatta.

Esegui di nuovo i test ora. Hanno superato tutti!

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

7. Eseguire il deployment in Cloud Run

Cloud Run eseguirà automaticamente un'applicazione containerizzata su internet. Per le applicazioni scritte utilizzando framework comuni, come Flash, il comando gcloud run deploy crea persino il container prima del deployment. Esegui il comando:

gcloud run deploy

Nel terminale. Quando ti viene chiesto la posizione del codice sorgente, premi Invio per accettare la posizione corretta che suggerisce. Analogamente, quando ti viene chiesto 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 questo caso, esegui il comando:

gcloud config set core/project <project-id>

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

  • Il comando ti chiederà che determinate API sono necessarie e non sono ancora abilitate. Inserisci y per attivarle per te.
  • Quando ti viene chiesto di selezionare una regione, scegline una più adatta alle tue esigenze. È consigliabile inserire il numero corrispondente a us-central1.
  • Quando richiesto, digita Y per continuare.
  • Dovrai consentire le chiamate unauthenticated a 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, vi instrada il traffico e imposta i criteri di accesso. Quindi, ti mostra il link alla home page:

94ba7d8d63a44afd.png

Puoi andare a quel link e accedere alla tua applicazione.

a2e51666dfd33a9f.png

Inserisci un numero e premi Invio, e tada!

5021535ac991a95c.png

Cosa?!

Ha funzionato sul tuo computer! 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 è in grado di leggere il file di log, con una lettura simile. Chiediamo a Gemini Code Assist come esaminare i log autonomamente:

92d1855be73ef1d.png

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

9bed4f9ed82de21c.png

Questo è seguito da molte righe di dettagli sullo stack di chiamate, ma c'è anche questo:

47fc93be845f4e3f.png

Quando esamini il tuo file calendar.py, vedi la funzione number_to_roman proprio lì. E sai che è giusta 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 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 è containerizzata, porta il suo ambiente 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 cambiare il nome del modulo del calendario locale scegliendone uno che non sia anche un nome standard del modulo. 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 riga

roman = calendar.number_to_roman(number)

a una

roman = my_calendar.number_to_roman(number)

Provalo a livello locale, esegui i test ed esegui di nuovo il deployment:

gcloud run deploy

Ecco come 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) Fai in modo che abbia un aspetto più accattivante

La tua applicazione funziona correttamente ed è accessibile a chiunque sul web. Ma sembra un po' più semplice. Prima di dirlo 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 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 sui 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 può aiutarti a modificare lo stile delle pagine dell'applicazione in vari modi. E questo è solo l'inizio.

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

gcloud run deploy

Puoi trasferire l'URL agli utenti che devono convertirlo in numeri romani.

9. Complimenti!

Complimenti, 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 hai creato, puoi eliminarla dalla dashboard della console Cloud per interrompere eventuali addebiti futuri.

Documenti di riferimento...