GSP1051

Présentation

Cloud Spanner est un service Google de base de données relationnelle entièrement géré et offrant des capacités d'évolutivité horizontale. Les clients des secteurs des services financiers, des jeux vidéo, du commerce et de bien d'autres domaines d'activité font confiance à Cloud Spanner pour exécuter leurs charges de travail les plus exigeantes, où la cohérence et la disponibilité à grande échelle sont primordiales.

Dans cet atelier, vous allez créer et déployer une application Node.js connectée à une instance Cloud Spanner. L'application Node.js est un outil de visualisation des cours boursiers nommé OmegaTrade. L'application OmegaTrade stocke les cours boursiers dans Cloud Spanner et affiche des visualisations à l'aide de Google Charts.

Le service de backend utilise le framework Node.js Express et se connecte à Cloud Spanner avec les fonctionnalités par défaut de pooling de connexions, de session et de délai d'expiration.

Objectifs de l'atelier

• Configurer l'environnement du projet
• Télécharger et inspecter le code de l'application
• Déployer le composant backend de l'application
• Importer des exemples de données de transactions boursières dans la base de données
• Déployer le composant d'interface de l'application
• Effectuer des opérations dans l'application OmegaTrade

Préparation

Avant de cliquer sur le bouton "Démarrer l'atelier"

Lisez ces instructions. Les ateliers sont minutés, et vous ne pouvez pas les mettre en pause. Le minuteur, qui démarre lorsque vous cliquez sur Démarrer l'atelier, indique combien de temps les ressources Google Cloud resteront accessibles.

Cet atelier pratique vous permet de suivre les activités dans un véritable environnement cloud, et non dans un environnement de simulation ou de démonstration. Des identifiants temporaires vous sont fournis pour vous permettre de vous connecter à Google Cloud le temps de l'atelier.

Pour réaliser cet atelier :

• Vous devez avoir accès à un navigateur Internet standard (nous vous recommandons d'utiliser Chrome).

• Vous disposez d'un temps limité. N'oubliez pas qu'une fois l'atelier commencé, vous ne pouvez pas le mettre en pause.

Démarrer l'atelier et se connecter à la console Google Cloud

1. Cliquez sur le bouton Démarrer l'atelier. Si l'atelier est payant, une boîte de dialogue s'affiche pour vous permettre de sélectionner un mode de paiement. Sur la gauche, vous trouverez le panneau "Détails concernant l'atelier", qui contient les éléments suivants :

   • Le bouton "Ouvrir la console Google Cloud"
   • Le temps restant
   • Les identifiants temporaires que vous devez utiliser pour cet atelier
   • Des informations complémentaires vous permettant d'effectuer l'atelier

2. Cliquez sur Ouvrir la console Google Cloud (ou effectuez un clic droit et sélectionnez Ouvrir le lien dans la fenêtre de navigation privée si vous utilisez le navigateur Chrome).

   L'atelier lance les ressources, puis ouvre la page "Se connecter" dans un nouvel onglet.

   Conseil : Réorganisez les onglets dans des fenêtres distinctes, placées côte à côte.

   Remarque : Si la boîte de dialogue Sélectionner un compte s'affiche, cliquez sur Utiliser un autre compte.

3. Si nécessaire, copiez le nom d'utilisateur ci-dessous et collez-le dans la boîte de dialogue Se connecter.

   {{{user_0.username | "Username"}}}

   Vous trouverez également le nom d'utilisateur dans le panneau "Détails concernant l'atelier".

4. Cliquez sur Suivant.

5. Copiez le mot de passe ci-dessous et collez-le dans la boîte de dialogue Bienvenue.

   {{{user_0.password | "Password"}}}

   Vous trouverez également le mot de passe dans le panneau "Détails concernant l'atelier".

6. Cliquez sur Suivant.

   Important : Vous devez utiliser les identifiants fournis pour l'atelier. Ne saisissez pas ceux de votre compte Google Cloud. Remarque : Si vous utilisez votre propre compte Google Cloud pour cet atelier, des frais supplémentaires peuvent vous être facturés.

7. Accédez aux pages suivantes :

   • Acceptez les conditions d'utilisation.
   • N'ajoutez pas d'options de récupération ni d'authentification à deux facteurs (ce compte est temporaire).
   • Ne vous inscrivez pas à des essais sans frais.

Après quelques instants, la console Cloud s'ouvre dans cet onglet.

Remarque : Pour accéder aux produits et services Google Cloud, cliquez sur le menu de navigation ou saisissez le nom du service ou du produit dans le champ Recherche.

Activer Cloud Shell

Cloud Shell est une machine virtuelle qui contient de nombreux outils pour les développeurs. Elle comprend un répertoire d'accueil persistant de 5 Go et s'exécute sur Google Cloud. Cloud Shell vous permet d'accéder via une ligne de commande à vos ressources Google Cloud.

1. Cliquez sur Activer Cloud Shell  en haut de la console Google Cloud.

2. Passez les fenêtres suivantes :

   • Accédez à la fenêtre d'informations de Cloud Shell.
   • Autorisez Cloud Shell à utiliser vos identifiants pour effectuer des appels d'API Google Cloud.

Une fois connecté, vous êtes en principe authentifié et le projet est défini sur votre ID_PROJET : . Le résultat contient une ligne qui déclare l'ID_PROJET pour cette session :

gcloud est l'outil de ligne de commande pour Google Cloud. Il est préinstallé sur Cloud Shell et permet la complétion par tabulation.

3. (Facultatif) Vous pouvez lister les noms des comptes actifs à l'aide de cette commande :

4. Cliquez sur Autoriser.

Résultat :

5. (Facultatif) Vous pouvez lister les ID de projet à l'aide de cette commande :

Résultat :

Instance Cloud Spanner

Pour vous permettre de progresser plus rapidement dans cet atelier, l'instance, la base de données et les tables Cloud Spanner requises pour l'application OmegaTrade ont été créées automatiquement.

Voici quelques informations complémentaires pour vous aider :

Tâche 1 : Activer les API Google Cloud requises

Commencez par activer les API Google Cloud pour Cloud Spanner, Container Registry et Cloud Run.

1. Dans Cloud Shell, saisissez les commandes suivantes :

Tâche 2 : Télécharger et inspecter le code de l'application

1. Téléchargez le dépôt de code que vous utiliserez dans cet atelier. Dans Cloud Shell, saisissez la commande suivante :

2. Accédez au dossier contenant le code de l'application.

3. Le code est principalement divisé en deux parties : le backend et l'interface. L'architecture de l'application est illustrée dans le schéma ci-dessous :

4. L'application s'appuie sur un fichier spécifique au déploiement nommé .env pour communiquer avec l'instance Cloud Spanner. Vous allez créer ce fichier dans la tâche suivante.

5. En ce qui concerne le backend, certaines des liaisons et des interactions avec les tables Cloud Spanner sont gérées par des modèles Node.js. Trois d'entre eux, company.model.js, simulation.model.js et user.model.js, se trouvent dans le dossier models. Exécutez la commande suivante pour accéder au dossier "models" :

6. Exécutez la commande suivante pour inspecter le fichier company.model.js. Ce fichier contient des opérations de base de données permettant d'interagir avec la table companies.

Appuyez sur la barre d'espace pour faire défiler le fichier jusqu'à la fin. Si vous souhaitez fermer le fichier avant d'atteindre la fin, saisissez q pour arrêter la commande more.

7. Certaines interactions entre l'interface et ces modèles, ainsi que d'autres structures du backend Node.js, se font par le biais de composants Angular situés dans le dossier components. Exécutez la commande suivante pour accéder au dossier "components" :

8. Par exemple, le composant company contient le code de base de l'application permettant de gérer et de mettre à jour les informations sur les entreprises.

9. Exécutez la commande suivante pour inspecter le fichier de configuration TypeScript manage-company.component.ts. Ce fichier contient des méthodes permettant par exemple de supprimer ou de modifier une entreprise.

Appuyez sur la barre d'espace pour faire défiler le fichier jusqu'à la fin. Si vous souhaitez fermer le fichier avant d'atteindre la fin, saisissez q pour arrêter la commande more.

Tâche 3 : Créer et déployer le composant de backend

1. Accédez au dossier contenant le code qui permet de créer et de déployer le backend.

2. Créez le fichier .env. Comme mentionné précédemment, ce fichier contient des informations spécifiques au projet afin que le composant de backend de l'application puisse communiquer avec l'instance Cloud Spanner.

Dans Cloud Shell, saisissez la commande suivante pour appeler l'éditeur de texte Nano et créer un fichier .env.

Collez le bloc de code ci-dessous.

Appuyez sur Ctrl+X pour quitter Nano, sur Y pour confirmer la mise à jour, puis sur Entrée pour enregistrer vos modifications.

3. Avant de continuer, vous devez installer les composants mis à jour pour npm afin que le backend puisse être compilé correctement. npm est un gestionnaire de paquets pour JavaScript et est utilisé par défaut pour l'environnement d'exécution JavaScript Node.js.

4. Ensuite, créez l'application backend à l'aide d'un Dockerfile de référence qui se trouve dans le dossier du dépôt.

5. Avant d'envoyer le nouveau package d'application, exécutez la commande suivante pour définir les autorisations de configuration dans Cloud Shell.

Saisissez y lorsque vous êtes invité à poursuivre l'opération.

6. Transférez le package d'application que vous venez de créer vers le dépôt de conteneurs de votre projet Qwiklabs.

7. Enfin, déployez le backend à l'aide de Cloud Run. Cloud Run est un framework de déploiement sans serveur qui automatise la gestion de l'infrastructure et de la capacité en fonction du trafic de manière quasi instantanée.

8. Copiez l'URL fournie à la fin du déploiement. Conservez l'URL dans le Bloc-notes, un fichier texte ou un autre emplacement facilement accessible. Cette URL sera fournie au composant d'interface pour s'assurer qu'il peut communiquer correctement avec la base de données Cloud Spanner via le backend.

L'URL du service de backend s'affiche au format suivant :

Tâche 4 : Importer des exemples de données de transactions boursières dans la base de données

1. Pour importer des exemples de données sur les entreprises et sur les actions boursières, exécutez la commande suivante dans le dossier actuel (backend principal) :

2. Vous recevrez la confirmation que les tables ont bien été chargées.

3. Cliquez sur Vérifier ma progression pour valider l'objectif.

Tâche 5 : Créer et déployer le composant d'interface

1. Accédez au répertoire contenant le code de l'interface. Accédez au dossier "environments" pour mettre à jour le fichier de configuration afin qu'il pointe vers votre composant backend.

2. Dans Cloud Shell, saisissez la commande suivante pour appeler l'éditeur de texte Nano et ouvrir le fichier environment.ts.

3. Supprimez avec précaution la chaîne http://localhost:3000 et remplacez-la par l'URL de votre backend.

Appuyez sur Ctrl+X pour quitter Nano, sur Y pour confirmer la mise à jour, puis sur Entrée pour enregistrer vos modifications.

Votre fichier environment.ts mis à jour doit ressembler à l'exemple ci-dessous.

4. Accédez au dossier principal de l'interface.

5. Installez les composants mis à jour pour npm afin que l'interface puisse être créée correctement.

6. Ensuite, créez l'application d'interface à l'aide d'un Dockerfile de référence qui se trouve dans le dossier du dépôt. La création de l'interface peut prendre entre 5 et 10 minutes.

7. Transférez le package d'application que vous venez de créer vers le dépôt de conteneurs de votre projet Qwiklabs.

8. Enfin, déployez le composant d'interface à l'aide de Cloud Run.

9. L'URL du service d'interface s'affiche au format suivant. Vous pouvez cliquer directement sur l'URL pour l'ouvrir ou la copier et la coller dans un nouvel onglet.

Tâche 6 : Effectuer des opérations dans l'application OmegaTrade

1. Sur la page de lancement de l'application, cliquez sur le lien sign up (S'inscrire).

2. Utilisez les informations suivantes pour créer un compte pour une entreprise fictive nommée Spanner1.

3. Votre compte sera créé et vous serez connecté.

4. Pour examiner l'application OmegaTrade, accédez au tableau de bord et sélectionnez Foobar Inc dans la liste pour afficher le graphique des performances boursières de cette entreprise. Vous verrez une simulation de l'évolution du cours boursier de Foobar Inc.

5. Accédez à Manage Company (Gérer l'entreprise) et ajoutez Spanner1 en tant que nouvelle société.

6. Cliquez sur Add Company (Ajouter une entreprise) à droite de la page. Dans la fenêtre pop-up, saisissez les valeurs suivantes :

Ensuite, cliquez sur Save (Enregistrer).

7. Spanner1 figure désormais dans la liste des entreprises.

8. Accédez au tableau de bord et sélectionnez Spanner1 si ce n'est pas déjà fait. Vous pouvez constater qu'aucune simulation n'existe pour Spanner1. Cliquez sur le lien here (ici) pour générer une simulation.

9. Sous Simulate Data (Simuler des données), fournissez les informations suivantes :

Ensuite, cliquez sur Simulate (Simuler).

10. Accédez au tableau de bord, qui mettra immédiatement à jour le graphique pour Spanner1 au fur et à mesure de la progression de la simulation. La simulation prendra entre 3 et 6 minutes.

11. L'application OmegaTrade vous permet également de modifier les informations existantes concernant une entreprise. Dans l'onglet Manage Company (Gérer l'entreprise), cliquez sur l'icône en forme de crayon sous Action pour Acme Corp.

12. Remplacez le nom de l'entreprise par Coyote Inc. Notez que le champ Short Code (Code abrégé) ne peut pas être modifié dans l'interface utilisateur. Cliquez sur Update (Mettre à jour) pour fermer la fenêtre et valider la modification.

13. La modification du nom de l'entreprise est immédiate. Accédez au tableau de bord. Vous verrez que l'entreprise Acme Corp n'apparaît plus et qu'elle a été remplacée par Coyote Inc.

14. Il arrive que des modifications de données soient nécessaires, mais qu'elles dépassent les capacités du code de l'application. En tant qu'utilisateur autorisé, vous pouvez mettre à jour les données utilisées dans l'application OmegaTrade en apportant des modifications directement dans la base de données Cloud Spanner.

15. Dans la console Cloud, cliquez sur le menu de navigation () > Afficher tous les produits > Bases de données > Spanner.

16. Acceptez ou validez les informations dans les fenêtres qui peuvent s'afficher.

17. Cliquez sur le nom omegatrade-instance, puis sur omegatrade-db sous Bases de données. Dans la liste des tables en bas de la page, cliquez sur companies.

18. Cliquez sur Data (Données) dans le volet de gauche pour afficher le contenu de la table.

19. Vous allez modifier le nom de l'entité Bar Industries.

20. Cochez la case de la ligne Bar Industries. Cliquez ensuite sur Edit (Modifier) dans les options affichées au-dessus des lignes du tableau.

21. Vous êtes redirigé vers Spanner Studio. Cliquez sur + Nouvel onglet. Saisissez la requête suivante pour remplacer la valeur de companyName (Bar Industries) par Consolidated Enterprises Inc.

22. Cliquez sur Exécuter pour traiter la mise à jour.

23. Revenez à la page de l'application, actualisez votre navigateur et accédez au tableau de bord. Vous verrez que l'entreprise Bar Industries n'apparaît plus et qu'elle a été remplacée par Consolidated Enterprises Inc.

Félicitations !

Vous avez déployé une application Node.js connectée à une instance Cloud Spanner et effectué quelques opérations simples sur la base de données depuis l'application. Vous avez également modifié des données directement dans la base de données.

Formations et certifications Google Cloud

Les formations et certifications Google Cloud vous aident à tirer pleinement parti des technologies Google Cloud. Nos cours portent sur les compétences techniques et les bonnes pratiques à suivre pour être rapidement opérationnel et poursuivre votre apprentissage. Nous proposons des formations pour tous les niveaux, à la demande, en salle et à distance, pour nous adapter aux emplois du temps de chacun. Les certifications vous permettent de valider et de démontrer vos compétences et votre expérience en matière de technologies Google Cloud.

Dernière mise à jour du manuel : 12 mai 2025

Dernier test de l'atelier : 12 mai 2025

Copyright 2025 Google LLC. Tous droits réservés. Google et le logo Google sont des marques de Google LLC. Tous les autres noms d'entreprises et de produits peuvent être des marques des entreprises auxquelles ils sont associés.