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

Ce tutoriel explique comment utiliser Gemini pour Google Cloud, un collaborateur de Google Cloud basé sur l'IA, afin d'explorer, de créer, de modifier, de tester et de 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 formulaire 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 connaissez 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éveloppez une application Web Node.js dans Cloud Shell.
  • Créez 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: un collaborateur permanent de 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. Pour fournir une expérience d'assistance intégrée, Gemini est intégré à de nombreux produits Google Cloud.
  • Plug-in Cloud Code pour Cloud Shell: extension de plug-in IDE permettant de prendre en charge le cycle de développement des applications exécutées 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 les tarifs, consultez la page Tarifs de Cloud Run et utilisez le Simulateur de coût pour 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 invites 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 peut vous aider à développer votre application. Notez que les réponses de Gemini peuvent varier en fonction de la manière 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 au cours du processus de développement.

Avant de demander à Gemini de vous aider à générer le 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 Explorateur content_copy, puis ouvrez le dossier que vous venez de créer dans le terminal Cloud Shell.

Installer des packages

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

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

  2. Dans le volet Gemini, saisissez une requête du type:

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

  3. Cliquez sur Envoyer Envoyer.

    Gemini renvoie une réponse semblable à celle-ci:

    Pour installer les packages express et ejs pour Node.js, vous pouvez utiliser 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 les ajouter dans votre fichier app.js.

  1. Ouvrez votre fichier app.js dans l'éditeur Cloud Shell.
  2. Dans le chat Gemini, saisissez une invite telle que:

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

    Gemini se présentera comme suit:

    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écessitera les packages express et ejs, et vous les rendrez disponibles dans votre fichier app.js.

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

Générer le code avec des commentaires

Le plug-in Cloud Code comporte une fonctionnalité qui permet à Gemini d'utiliser des commentaires de fichier pour 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é pour les commentaires pour initialiser l'application Web. Par exemple:

    // Initialize express web app using ejs templating engine
    
  2. Dé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 générer du code à l'aide des fonctionnalités de génération de code de Gemini.

    La réponse de Gemini comportera deux lignes de code sous le commentaire, comme suit:

    // 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 à quoi vous vous attendiez, modifiez ou supprimez le contenu supplémentaire à votre guise.

Ajoutez ensuite d'autres commentaires pour générer les fonctionnalités de base de votre application Web Express.

  1. Au 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 du code pour chaque commentaire de 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 maintenant être accompagnés du code correspondant, semblable à ce qui suit:

    // 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 dans le 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 du type:

    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 se présentera comme suit:

    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 (démarrage)
    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

Maintenant que le code, les modèles et les exigences de votre application sont terminés, vous pouvez vérifier qu'elle 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 du 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 générer un test unitaire pour les cas où 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 de Genmini et saisissez une invite du type:

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

    Gemini doit renvoyer un message semblable à celui-ci:

    Bien sûr. Voici un test unitaire pour la route de la maison dans app.js qui garantit 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 la route du domicile renvoie un code d'état de 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 le 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 exécuter les tests:

    npm test
    

S'il n'y a pas d'erreur, votre test doit s'afficher comme étant concluant. Si vous souhaitez ajouter des tests supplémentaires à 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 la déployer 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 le chat Gemini, demandez à Gemini comment effectuer un déploiement 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 doit renvoyer une réponse semblable à celle-ci:

    Vous pouvez effectuer un déploiement directement sur Cloud Run à partir du code source de votre répertoire actuel à l'aide de gcloud. Pour ce faire, vous pouvez exécuter 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 de la déployer sur Cloud Run.

    Par exemple, pour déployer le code de 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, exécutez 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, vous pouvez consulter la documentation de Cloud Run.

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

  3. Suivez les invites pour sélectionner une région et 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 dans 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, vous supprimez également tout autre travail effectué dans ce projet lorsque vous le supprimez.
    • 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, la réutilisation de 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