Sviluppa un'app Node.js con Gemini per l'assistenza di Google Cloud

Questo tutorial mostra come utilizzare Gemini per Google Cloud per Google Cloud, un collaboratore basato sull'AI in Google Cloud, per esplorare, creare, modificare, testare ed eseguire il deployment di un'app Node.js di esempio.

Per i passaggi seguenti, considera che sei uno sviluppatore Node.js e vuoi scrivere una semplice applicazione web in JavaScript che utilizzi un modulo di base. In questo scenario, utilizzerai il framework Express per l'app e i modelli EJS per il modulo HTML.

Questa guida è rivolta agli sviluppatori Node.js che vogliono utilizzare Gemini per accelerare il processo di sviluppo. Si presume che tu abbia familiarità con i concetti di base del cloud, anche se non è necessariamente Google Cloud.

Obiettivi

Questo tutorial ti aiuta a imparare a utilizzare Gemini per:

  • Sviluppa un'app web Node.js in Cloud Shell.
  • Creare test delle unità per l'app web Node.js.
  • Esegui il deployment dell'app web Node.js in Cloud Run.

Prodotti Google Cloud utilizzati

Questo tutorial utilizza i seguenti prodotti Google Cloud:

  • Gemini: un collaboratore sempre attivo di Google Cloud che offre assistenza basata sull'AI generativa a un'ampia gamma di utenti, tra cui sviluppatori e data scientist. Per fornire un'esperienza di assistenza integrata, Gemini è integrato in molti prodotti Google Cloud.
  • plug-in Cloud Code per Cloud Shell: un'estensione plug-in IDE che fornisce supporto del ciclo di sviluppo per le app che verranno eseguite su Google Cloud.
  • Cloud Run: un servizio completamente gestito che consente di creare ed eseguire il deployment di app containerizzate. Google Cloud gestisce la scalabilità e altre attività dell'infrastruttura in modo che tu possa concentrarti sulla logica di business del tuo codice. Per informazioni sui prezzi, consulta la pagina Prezzi di Cloud Run e utilizza il Calcolatore prezzi per generare una stima dei costi in base all'utilizzo previsto.

Prima di iniziare

  1. Crea un progetto Google Cloud se non ne hai già uno che può essere utilizzato per questo tutorial.
  2. Attiva Cloud Shell.
  3. Assicurati che Gemini sia configurato per il tuo account utente e progetto Google Cloud.
  4. Attiva Gemini per Cloud Shell selezionando il progetto a cui è stato concesso l'accesso alle funzionalità di Gemini.

Chiedi a Gemini di generare il codice Node.js

Gemini può aiutarti a generare il codice Node.js in base ai prompt che fornisci nella chat e alle descrizioni che scrivi nei commenti al codice. Più codice scrivi e più contesto fornisci a Gemini, più Gemini può aiutarti a sviluppare la tua app. Tieni presente che le risposte di Gemini possono variare a seconda di come poni le domande o descrivi il contesto, quindi è buona norma rivedere le risposte di Gemini prima di accettare i suggerimenti durante il processo di sviluppo.

Prima di chiedere a Gemini di aiutarti a generare un codice iniziale, usa il terminale Cloud Shell per creare una directory vuota e aggiungi due file vuoti.

mkdir node-js-with-gemini
cd node-js-with-gemini
touch app.js test.js

Nell'editor di Cloud Shell, seleziona content_copy Explorer e apri la cartella appena creata nel terminale Cloud Shell.

Installa pacchetti

Sai che vuoi installare i pacchetti express e ejs per la tua app Node.js. Per chiedere a Gemini di aiutarti a installare questi pacchetti, segui questi passaggi:

  1. Nel riquadro laterale sinistro nell'editor di Cloud Shell, fai clic su spark Gemini.

  2. Nel riquadro Gemini, inserisci un prompt come:

    What is the command to install express and ejs packages for node.js?

  3. Fai clic su Invia Invia.

    Gemini restituisce una risposta simile alla seguente:

    Per installare i pacchetti express ed ejs per Node.js, puoi utilizzare il seguente comando:

    npm install express ejs

  4. Copia il comando fornito da Gemini ed eseguilo nel terminale Cloud Shell.

Crea file di applicazioni

Dopo aver installato i pacchetti, usa Gemini per avere indicazioni su come aggiungere i pacchetti installati nel file app.js.

  1. Apri il file app.js nell'editor di Cloud Shell.

  2. Nella chat di Gemini, inserisci un prompt come:

    How do I add these packages to my app.js file?

    La risposta di Gemini sarà simile alla seguente:

    Per aggiungere i pacchetti express ed ejs al file app.js, puoi utilizzare il seguente codice:

    const express = require('express');
const ejs = require('ejs');

    Questa operazione richiederà i pacchetti express ed ejs e li renderà disponibili per l'utilizzo nel file app.js.

  3. Aggiungi il codice fornito da Gemini al tuo file app.js.

Genera codice con commenti

Il plug-in Cloud Code dispone di una funzionalità che consente a Gemini di usare commenti ai file per generare codice. Ad esempio, quando aggiungi un commento come segnaposto nel file, puoi chiedere a Gemini di generare il codice come descritto nel commento.

Per utilizzare questa funzionalità nel file app.js, assicurati che Gemini sia abilitato nell'editor di Cloud Shell.

  1. Alla fine del file, aggiungi un segnaposto di commento per inizializzare l'app web. Ad esempio:

    // Initialize express web app using ejs templating engine

  2. Sposta il cursore di testo alla fine del commento e premi Control+Enter (per Windows e Linux) o Control+Return (per macOS), quindi premi Tab per utilizzare le funzionalità di generazione del codice di Gemini al fine di generare il codice.

    La risposta di Gemini avrà due righe di codice sotto il commento, simili alle seguenti:

    // Initialize express web app using ejs templating engine

const app = express();
app.set('view engine', 'ejs');

    Se l'output della generazione del codice è diverso da quello previsto, modifica o elimina i contenuti aggiuntivi in base alle tue esigenze.

Poi, aggiungi altri commenti per generare le funzionalità di base per la tua app web Express.

  1. Vai in fondo al file app.js e aggiungi i seguenti commenti:

    // add urlencoded middleware to parse form data

// define the home route

// create a /greeting POST route with a `name` parameter

// create a /greeting route that accepts a name parameter

// start the server on port 8080

  2. Genera un codice per ogni commento sul file simile a come hai generato il codice prima.

  3. Prima di accettare i suggerimenti, esamina il codice generato per verificarne l'accuratezza.

    I commenti nel file app.js ora dovrebbero essere accompagnati da un codice corrispondente, simile al seguente:

    // add urlencoded middleware to parse form data
app.use(express.urlencoded({ extended: true }));

// define the home route
app.get('/', (req, res) => {
  res.render('index');
});

// create a /greeting POST route with a `name` parameter
app.post('/greeting', (req, res) => {
  const name = req.body.name || 'World';
  res.render('greeting', { name });
});

// start the server
const port = process.env.PORT || 8080;
app.listen(port, () => {
  console.log(`App listening on port ${port}`);
  console.log('Press Ctrl+C to quit.');
});

// create a /greeting route that accepts a name parameter
app.get('/greeting/:name', (req, res) => {
  res.render('greeting', { name: req.params.name });
});

Creare un file package.json

Dopo aver generato il codice per l'applicazione di base, crea e aggiungi contenuti al file package.json.

  1. Crea un file package.json nella stessa directory del file app.js.

  2. Nell'editor di Cloud Shell, seleziona spark Gemini e inserisci un prompt come:

    Based on my app.js file, can you create a package.json file?

    La risposta di Gemini dovrebbe suggerire lo script di inizio e le dipendenze da specificare ed essere simile alla seguente:

    Certo. Ecco un file package.json che puoi utilizzare con il file app.js:

    {
  "name": "my-app",
  "version": "1.0.0",
  "description": "A simple Node.js web app using Express and EJS.",
  "main": "app.js",
  "scripts": {
    "start": "node app.js"
  },

  "dependencies": {
    "express": "^4.17.1",
    "ejs": "^3.1.6"
  }
}

    Questo file package.json include le seguenti informazioni:

    Il nome dell'app (my-app)
    La versione dell'app (1.0.0)
    Una descrizione dell'app (una semplice app web Node.js che utilizza Express ed EJS).
    Il file principale dell'app (app.js)
    Gli script che possono essere eseguiti sull'app (start)
    Le dipendenze dell'app (express ed ejs)

  3. Copia e incolla solo i contenuti forniti da Gemini nel tuo file package.json.

Creare modelli ejs

Per completare l'app web, crea una directory views per i modelli ejs nella stessa directory dei file app.js e package.json.

  1. Nel terminale, inserisci quanto segue:

    mkdir views
touch views/index.ejs views/greeting.ejs

  2. Apri il file index.ejs nell'editor e incolla quanto segue:

    <html>
<body>
    <form action="/greeting" method="post">
    <label for="name">What's your name?</label>
    <input type="text" id="name" name="name" autofocus />
    <button type="submit">Submit</button>
    </form>
</body>
</html>

  3. Apri il file greeting.ejs nell'editor e incolla quanto segue:

    <html>
<body>
    <a href="/">Home</a>
    <p>Hello <%= name %>~</p>
</body>
</html>

Visualizzare l'anteprima dell'app in un browser

Una volta completati il codice, i modelli e i requisiti dell'app, ora puoi verificare se l'app funziona.

  1. Esegui questo comando per installare le dipendenze.

    npm install

  2. Esegui questo comando per avviare l'app:

    npm start

  3. Verifica che l'app funzioni. Seleziona il pulsante Anteprima web in alto a destra nella barra delle applicazioni di Cloud Shell. Poi seleziona il numero di porta dal menu visualizzato. Cloud Shell apre l'URL di anteprima in una nuova finestra del browser.

Scrittura dei test delle unità

Dopo aver verificato che l'app Node.js funziona, puoi scrivere i test delle unità nel file test.js prima di eseguire il deployment dell'app in Cloud Run. Nell'esempio seguente, chiederai a Gemini di assistenza per generare un test delle unità per i casi in cui il codice di risposta HTTP è 200.

  1. Nella parte inferiore del file app.js, aggiungi la riga seguente per esportare il file dell'app.

    module.exports = app;

  2. Apri il file test.js.

  3. Per verificare quando la risposta restituisce un codice di stato HTTP 200, apri il riquadro della chat con Gemini e inserisci un prompt come:

    Can you generate a unit test for my home route in app.js to assert that the response code is 200?

    Gemini dovrebbe rispondere con qualcosa di simile al seguente:

    Certo. Ecco un test delle unità per la route home in app.js che garantisce che il codice di risposta sia 200:

    const assert = require('assert');
const request = require('supertest');

const app = require('./app.js');
describe('GET /', () => {
  it('should return a 200 response code', async () => {
    const response = await request(app).get('/');
    assert.equal(response.status, 200);
  });
});

    Questo test verifica che il percorso verso casa restituisca un codice di stato 200.

    Aggiungi il blocco di codice suggerito al tuo file test.js.

  4. Installa i pacchetti mocha test e supertest eseguendo questo comando nel terminale:

    npm i mocha supertest

  5. Aggiorna il file package.json in modo da includere il nuovo script per il test e i relativi pacchetti. Ad esempio:

    {
  "name": "my-app",
  "version": "1.0.0",
  "description": "A simple Node.js web app using Express and EJS.",
  "main": "app.js",
  "scripts": {
    "start": "node app.js",
    "test": "mocha"
  },
  "dependencies": {
  "express": "^4.17.1",
  "ejs": "^3.1.6",
  "mocha": "^10.2.0",
  "supertest": "^6.3.3"
  }
}

  6. Esegui questo comando per eseguire i test:

    npm test

Il test dovrebbe risultare superato se non ci sono errori. Se vuoi aggiungere ulteriori test per le altre route, continua a chiedere a Gemini suggerimenti da aggiungere al tuo file test.js.

Eseguire il deployment in Cloud Run

Ora che la tua app è in esecuzione localmente, puoi procedere con il deployment in Google Cloud. Cloud Run funziona bene in questo scenario perché puoi eseguire il deployment dal codice sorgente senza dover gestire l'infrastruttura durante l'esecuzione dell'app.

  1. Nella chat di Gemini, chiedi a Gemini come eseguire il deployment in Cloud Run direttamente dal tuo codice sorgente usando gcloud:

    What is the gcloud command for deploying a Cloud Run service from source code?

    Gemini dovrebbe rispondere con qualcosa di simile a:

    Puoi eseguire il deployment direttamente in Cloud Run dal codice sorgente nella directory attuale utilizzando gcloud. Per farlo, puoi utilizzare il comando gcloud run deploy con --source flag. Questo flag indica a gcloud di usare il codice sorgente per creare un'immagine container ed eseguirne il deployment in Cloud Run.

    Ad esempio, per eseguire il deployment del codice nel tuo file app.js in Cloud Run, dovresti utilizzare il seguente comando:

    gcloud run deploy app --source .

    Questo comando creerà un'immagine container dal file app.js e ne eseguirà il deployment in Cloud Run.

    Puoi anche utilizzare il flag --region per specificare la regione in cui vuoi eseguire il deployment dell'app. Ad esempio, per eseguire il deployment dell'app nella regione us-central1, puoi utilizzare il seguente comando:

    gcloud run deploy app --source . --region us-central1

    Per ulteriori informazioni sul deployment in Cloud Run dal codice sorgente, vedi la documentazione di Cloud Run.

  2. Usa il comando gcloud fornito da Gemini nella risposta.

  3. Segui le istruzioni per selezionare una regione e seleziona l'opzione per consentire chiamate non autenticate per la tua app di test. Una volta eseguito correttamente il deployment dell'app, l'output restituirà un URL del servizio.

Esegui la pulizia

Per evitare che al tuo account Google Cloud vengano addebitati costi relativi alle risorse utilizzate in questo tutorial, puoi eliminare il progetto Google Cloud che hai creato per questo tutorial. In alternativa, puoi eliminare le singole risorse.

  1. Attenzione. L'eliminazione di un progetto ha i seguenti effetti:
    • L'intero contenuto del progetto viene eliminato. Se hai utilizzato un progetto esistente per le attività in questo documento, quando lo elimini, elimini anche qualsiasi altro lavoro che hai svolto nel progetto.
    • Gli ID progetto personalizzati non sono più disponibili. Quando hai creato il progetto, potresti aver creato un ID progetto personalizzato che vuoi utilizzare in futuro. Per conservare gli URL che utilizzano l'ID progetto, ad esempio un URL appspot.com, elimina le risorse selezionate all'interno del progetto anziché eliminare l'intero progetto.

  2. Se prevedi di esplorare più architetture, tutorial o guide rapide, il riutilizzo dei progetti può aiutarti a evitare di superare i limiti di quota.Nella console Google Cloud, vai alla pagina Gestisci risorse.

    Vai a Gestisci risorse

  3. Nell'elenco dei progetti, seleziona il progetto che vuoi eliminare, quindi fai clic su Elimina.

  4. Nella finestra di dialogo, digita l'ID progetto, quindi fai clic su Chiudi per eliminare il progetto.

Passaggi successivi