Développer une application Node.js avec Gemini pour l'assistance Google Cloud

Ce tutoriel explique comment utiliser Gemini pour Google Cloud pour Google Cloud, un collaborateur alimenté par l'IA dans Google Cloud, afin d'explorer, créer, modifier, tester et déployer un exemple d'application Node.js.

Pour les étapes suivantes, considérez que vous êtes un développeur Node.js et que vous souhaitez écrire une application Web simple en JavaScript utilisant un format de base. Dans ce scénario, vous utiliserez le framework Express pour l'application et les modèles EJS pour le formulaire HTML.

Ce guide est destiné aux développeurs Node.js qui souhaitent utiliser Gemini pour accélérer le processus de développement. Nous partons du principe que vous maîtrisez les concepts de base du cloud, mais pas nécessairement Google Cloud.

Objectifs

Ce tutoriel vous explique comment utiliser Gemini pour effectuer les opérations suivantes:

  • Développer une application Web Node.js dans Cloud Shell
  • Créer des tests unitaires pour votre application Web Node.js
  • Déployez votre application Web Node.js sur Cloud Run.

Produits Google Cloud utilisés

Ce tutoriel utilise les produits Google Cloud suivants :

  • Gemini: collaborateur permanent dans Google Cloud qui propose une assistance basée sur l'IA générative à un large éventail d'utilisateurs, y compris des développeurs et des data scientists. Afin de fournir une expérience d'assistance intégrée, Gemini est intégré dans de nombreux produits Google Cloud.
  • Cloud Code pour le plug-in Cloud Shell: extension de plug-in IDE qui prend en charge le cycle de développement des applications qui s'exécutent sur Google Cloud.
  • Cloud Run: service entièrement géré qui vous permet de créer et de déployer des applications conteneurisées. Google Cloud gère le scaling et d'autres tâches d'infrastructure afin que vous puissiez vous concentrer sur la logique métier de votre code. Pour en savoir plus sur la tarification, consultez la page Tarifs de Cloud Run et utilisez le Simulateur de coût afin de générer une estimation des coûts en fonction de votre utilisation prévue.

Avant de commencer

  1. Créez un projet Google Cloud si vous ne disposez pas d'un projet Google Cloud existant pouvant être utilisé pour ce tutoriel.
  2. Activez Cloud Shell.
  3. Assurez-vous que Gemini est configuré pour votre compte utilisateur et votre projet Google Cloud.
  4. Activez Gemini pour Cloud Shell en sélectionnant le projet ayant accès aux fonctionnalités Gemini.

Demander à Gemini de générer du code Node.js

Gemini peut vous aider à générer du code Node.js en fonction des requêtes que vous fournissez dans le chat et des descriptions que vous rédigez dans les commentaires sur le code. Plus vous écrivez de code et plus vous fournissez de contexte à Gemini, mieux Gemini peut vous aider à développer votre application. Notez que les réponses de Gemini peuvent varier selon la façon dont vous posez des questions ou décrivez le contexte. Il est donc recommandé d'examiner les réponses de Gemini avant d'accepter les suggestions pendant le processus de développement.

Avant de demander à Gemini de vous aider à générer un code de démarrage, utilisez le terminal Cloud Shell pour créer un répertoire vide et ajoutez deux fichiers vides.

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

Dans l'éditeur Cloud Shell, sélectionnez l'explorateur content_copy, puis ouvrez le dossier que vous venez de créer dans le terminal Cloud Shell.

Installer les packages

Vous savez que vous souhaitez installer les packages express et ejs pour votre application Node.js. Pour demander à Gemini de vous aider à installer ces packages, procédez comme suit:

  1. Dans le panneau de gauche de l'éditeur Cloud Shell, cliquez sur l'icône spark Gemini.

  2. Dans le volet Gemini, saisissez une requête telle que:

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

  3. Cliquez sur Envoyer Envoyer.

    Gemini renvoie une réponse semblable à la suivante:

    Pour installer les packages express et ejs pour Node.js, utilisez la commande suivante:

    npm install express ejs
    
  4. Copiez la commande fournie par Gemini et exécutez-la dans votre terminal Cloud Shell.

Créer des fichiers d'application

Après avoir installé les packages, utilisez Gemini pour savoir comment ajouter les packages installés dans votre fichier app.js.

  1. Ouvrez votre fichier app.js dans l'éditeur Cloud Shell.
  2. Dans la discussion Gemini, saisissez une requête telle que:

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

    La réponse de Gemini sera semblable à celle-ci:

    Pour ajouter les packages express et ejs à votre fichier app.js, vous pouvez utiliser le code suivant:

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

    Cela nécessite les packages express et ejs, et vous pouvez les utiliser dans votre fichier app.js.

  3. Ajoutez le code fourni par Gemini à votre fichier app.js.

Générer du code avec des commentaires

Le plug-in Cloud Code dispose d'une fonctionnalité qui permet à Gemini de générer du code. Par exemple, lorsque vous ajoutez un commentaire en tant qu'espace réservé dans votre fichier, vous pouvez demander à Gemini de générer du code, comme décrit dans le commentaire.

Pour utiliser cette fonctionnalité dans votre fichier app.js, assurez-vous que Gemini est activé dans l'éditeur Cloud Shell.

  1. À la fin du fichier, ajoutez un espace réservé de commentaire pour initialiser l'application Web. Par exemple:

    // Initialize express web app using ejs templating engine
    
  2. Placez le curseur de texte à la fin du commentaire, appuyez sur Control+Enter (pour Windows et Linux) ou Control+Return (pour macOS), puis appuyez sur la touche Tabulation pour utiliser les fonctionnalités de génération de code de Gemini afin de générer du code.

    La réponse de Gemini affichera deux lignes de code sous le commentaire, semblables à celles-ci:

    // Initialize express web app using ejs templating engine
    
    const app = express();
    app.set('view engine', 'ejs');
    

    Si le résultat de la génération de code est différent de ce que vous attendiez, modifiez ou supprimez le contenu supplémentaire comme vous le souhaitez.

Ensuite, ajoutez d'autres commentaires pour générer les fonctionnalités de base de votre application Web Express.

  1. En bas du fichier app.js, ajoutez les commentaires suivants:

    // 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. Générez un code pour chaque commentaire sur un fichier de la même manière que précédemment.

  3. Avant d'accepter les suggestions, vérifiez l'exactitude du code généré.

    Les commentaires de votre fichier app.js doivent désormais être accompagnés du code correspondant, semblable à celui-ci:

    // 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 });
    });
    

Créer un fichier package.json

Une fois le code généré pour votre application de base, créez et ajoutez du contenu au fichier package.json.

  1. Créez un fichier package.json dans le même répertoire que votre fichier app.js.
  2. Dans l'éditeur Cloud Shell, sélectionnez spark Gemini et saisissez une requête telle que:

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

    La réponse de Gemini devrait suggérer le script de démarrage et les dépendances à spécifier. Elle sera semblable à la suivante:

    Bien sûr. Voici un fichier package.json que vous pouvez utiliser avec votre fichier 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"
      }
    }
    

    Ce fichier package.json contient les informations suivantes:

    Nom de l'application (my-app)
    Version de l'application (1.0.0)
    Description de l'application (application Web Node.js simple utilisant Express et EJS)
    Fichier principal de l'application (app.js)
    Scripts pouvant être exécutés sur l'application (start)
    Dépendances de l'application (express et ejs)

  3. Copiez et collez uniquement le contenu fourni par Gemini dans votre fichier package.json.

Créer des modèles ejs

Pour terminer votre application Web, créez un répertoire views pour vos modèles ejs dans le même répertoire que vos fichiers app.js et package.json.

  1. Dans votre terminal, saisissez la commande suivante:

    mkdir views
    touch views/index.ejs views/greeting.ejs
    
  2. Ouvrez le fichier index.ejs dans l'éditeur et collez le contenu suivant:

    <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. Ouvrez le fichier greeting.ejs dans l'éditeur et collez le contenu suivant:

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

Prévisualiser votre application dans un navigateur

Une fois le code, les modèles et les exigences de votre application terminés, vous pouvez vérifier si votre application fonctionne.

  1. Exécutez la commande suivante pour installer les dépendances.

    npm install
    
  2. Exécutez la commande suivante pour démarrer l'application:

    npm start
    
  3. Vérifiez que l'application fonctionne. Sélectionnez le bouton Aperçu sur le Web situé en haut à droite de la barre des tâches Cloud Shell. Sélectionnez ensuite le numéro de port dans le menu qui s'affiche. Cloud Shell ouvre l'URL d'aperçu dans une nouvelle fenêtre de navigateur.

Écrire des tests unitaires

Après avoir vérifié que votre application Node.js fonctionne, vous pouvez écrire des tests unitaires dans votre fichier test.js avant de déployer votre application sur Cloud Run. Dans l'exemple suivant, vous demanderez à Gemini de vous aider à générer un test unitaire lorsque le code de réponse HTTP est 200.

  1. En bas de votre fichier app.js, ajoutez la ligne suivante pour exporter le fichier de votre application.

    module.exports = app;
    
  2. Ouvrez votre fichier test.js.

  3. Pour tester le moment où la réponse renvoie un code d'état HTTP 200, ouvrez le volet de chat Gemini et saisissez une requête telle que:

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

    Gemini devrait répondre de ce type:

    Bien sûr. Voici un test unitaire pour la route d'accueil dans app.js qui vérifie que le code de réponse est 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);
      });
    });
    

    Ce test vérifie que l'itinéraire d'accueil renvoie un code d'état 200.

    Ajoutez le bloc de code suggéré à votre fichier test.js.

  4. Installez les packages mocha test et supertest en exécutant la commande suivante dans votre terminal:

    npm i mocha supertest
    
  5. Mettez à jour votre fichier package.json pour inclure votre nouveau script de test et ses packages. Exemple :

    {
      "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. Exécutez la commande suivante pour lancer les tests:

    npm test
    

S'il n'y a pas d'erreur, votre test devrait s'afficher comme réussi. Si vous souhaitez ajouter des tests supplémentaires pour vos autres routes, continuez à demander à Gemini des suggestions à ajouter à votre fichier test.js.

Déployer une application dans Cloud Run

Maintenant que votre application s'exécute localement, vous pouvez procéder au déploiement sur Google Cloud. Cloud Run fonctionne bien dans ce scénario, car vous pouvez effectuer le déploiement à partir du code source sans avoir à gérer d'infrastructure lors de l'exécution de votre application.

  1. Dans la discussion Gemini, demandez à Gemini comment le déployer sur Cloud Run directement depuis votre code source à l'aide de gcloud:

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

    Gemini devrait répondre de quelque chose de semblable à:

    Vous pouvez déployer directement sur Cloud Run à partir de votre code source dans votre répertoire actuel à l'aide de gcloud. Pour ce faire, vous pouvez utiliser la commande gcloud run deploy avec --source flag. Cet indicateur indique à gcloud d'utiliser votre code source pour créer une image de conteneur et la déployer sur Cloud Run.

    Par exemple, pour déployer le code dans votre fichier app.js sur Cloud Run, utilisez la commande suivante:

    gcloud run deploy app --source .
    

    Cette commande crée une image de conteneur à partir de votre fichier app.js et la déploie sur Cloud Run.

    Vous pouvez également utiliser l'option --region pour spécifier la région dans laquelle vous souhaitez déployer votre application. Par exemple, pour déployer votre application dans la région us-central1, utilisez la commande suivante:

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

    Pour en savoir plus sur le déploiement sur Cloud Run à partir du code source, consultez la documentation Cloud Run.

  2. Utilisez la commande gcloud fournie par Gemini dans la réponse.

  3. Suivez les instructions pour sélectionner une région, puis sélectionnez l'option permettant d'autoriser les appels non authentifiés pour votre application de test. Une fois l'application déployée, le résultat renvoie une URL de service.

Effectuer un nettoyage

Pour éviter que les ressources utilisées lors de ce tutoriel soient facturées sur votre compte Google Cloud, vous pouvez supprimer le projet Google Cloud que vous avez créé pour ce tutoriel. Vous pouvez également supprimer les différentes ressources.

  1. Attention: La suppression d'un projet aura les effets suivants :
    • Tout le contenu du projet est supprimé. Si vous avez utilisé un projet existant pour les tâches de ce document et que vous le supprimez, vous supprimez également tout autre travail effectué dans le projet.
    • Les ID de projets personnalisés sont perdus. Lorsque vous avez créé ce projet, vous avez peut-être créé un ID de projet personnalisé que vous souhaitez utiliser à l'avenir. Pour conserver les URL qui utilisent l'ID de projet, telle qu'une URL appspot.com, supprimez les ressources sélectionnées dans le projet au lieu de supprimer l'ensemble du projet.
  2. Si vous envisagez d'explorer plusieurs architectures, tutoriels ou guides de démarrage rapide, le fait de réutiliser des projets peut vous aider à éviter de dépasser les limites de quota des projets.Dans la console Google Cloud, accédez à la page Gérer les ressources.

    Accéder à la page Gérer les ressources

  3. Dans la liste des projets, sélectionnez le projet que vous souhaitez supprimer, puis cliquez sur Supprimer.

  4. Dans la boîte de dialogue, saisissez l'ID du projet, puis cliquez sur Arrêter pour supprimer le projet.

Étapes suivantes