Démarrage rapide

Lancez IBM Bob

Lancez l'application IBM Bob sur votre ordinateur.

Ouvrez l'interface de chat Bob

Si l'interface de chat Bob n'est pas visible, ouvrez-la en cliquant sur l'icône Bob à côté de la barre de navigation ou utilisez le raccourci Option + Command + B (Mac) ou Ctrl + Alt + B (Windows).

Vous interagissez avec Bob en tapant des demandes en langage naturel dans le champ de saisie.

Clonez le dépôt du tutoriel

Clonez le dépôt contenant l'application d'exemple en suivant ces étapes :

1. Cliquez sur l'icône de fichiers dans le coin supérieur gauche du panneau Bob IDE.
2. Cliquez sur Cloner le dépôt et collez l'URL du dépôt suivante.
3. Lorsque Bob vous demande où enregistrer le dépôt, choisissez l'emplacement de votre choix.

https://github.com/IBM/bob-demo.git

Ouvrez le dépôt

Lorsque Bob vous demande si vous souhaitez ouvrir le dépôt cloné, cliquez sur Ouvrir. Si Bob demande "Faites-vous confiance aux auteurs des fichiers dans ce dossier ?", cliquez sur Oui, je fais confiance aux auteurs.

L'explorateur affiche les fichiers du projet et le panneau de chat Bob s'ouvre sur le côté. Vous travaillerez depuis le dossier bob-get-started/express-todo-api-modern.

Passez en mode Agent

Sélectionnez Agent dans le sélecteur de mode, ou tapez /agent dans le chat. Le mode Agent permet à Bob d'écrire, de modifier et de refactoriser du code. Bob demande toujours la permission avant chaque opération.

Configurez l'approbation automatique

Trouvez le bouton d'approbation automatique dans le coin inférieur droit de la fenêtre, dans le menu Permissions. Assurez-vous que seule l'option Read est sélectionnée pour l'approbation automatique. Bob exécute automatiquement les commandes en lecture seule, mais il demande une approbation pour toute commande qui modifie des fichiers ou s'exécute dans le terminal.

Initialisez Bob dans votre projet

Exécutez /init dans le panneau de chat Bob pour que Bob crée un fichier AGENTS.md racine et des fichiers de règles AGENTS.md.

Le fichier AGENTS.md racine indique à Bob la structure globale du projet, les conventions et les objectifs afin que Bob puisse écrire du code qui correspond à votre projet. Sans lui, Bob repart du début à chaque fois parce que Bob est stateless.

Les fichiers de règles dans .bob sont l'endroit où Bob crée AGENTS.md pour chacun de ses modes : Agent, Plan et Ask. Chaque mode a un ensemble différent de règles qui guident le comportement de Bob dans ce mode.

/init

Bob demande la permission de créer les fichiers AGENTS.md. Cliquez sur Approve todo tools for task pour créer les fichiers. Une fois que Bob a créé tous les fichiers AGENTS.md, vous verrez les fichiers suivants :

Compilez et exécutez l'API dans Docker

Demandez à Bob de créer un Dockerfile et de démarrer le conteneur :

Crée un Dockerfile pour cette API en utilisant Node 22 et exécute-la sur le port 3000.
N'installe pas les dépendances localement.
Le Dockerfile gère toutes les installations.

Une fois que tu as créé le Dockerfile, compile l'image et démarre le conteneur.

Bob vous demande d'approuver la compilation de l'image et le démarrage du conteneur. Cliquez sur Approve todo tools for task et Approve edit tools for task.

Comme seule l'approbation automatique pour Read est activée, Bob vous demande la permission d'exécuter des commandes Execute. Cliquez sur I understand the risks, puis sur Approve pour permettre à Bob d'exécuter des commandes pour vous.

Bob pourrait trouver un problème NPM, comme celui qui suit. Approuvez les corrections que Bob propose :

La compilation a échoué car il n'y a pas de fichier package-lock.json.
Je dois mettre à jour le Dockerfile pour utiliser npm install au lieu de npm ci :

L'API est maintenant en cours d'exécution et disponible.

Ajoutez une tâche à la liste de tâches

Pour tester l'API, collez la commande suivante directement dans le panneau de chat Bob. Cette commande ajoute une tâche à la liste de tâches en effectuant une requête POST vers l'API :

curl -X POST http://localhost:3000/api/todos \
  -H "Content-Type: application/json" \
  -d '{"title": "Build a web UI"}'

  Donne-moi la réponse au format tableau avec deux colonnes : Champ et Valeur

Bob vous montre la réponse, qui confirme que vous pouvez ajouter des tâches à la liste de tâches avec l'API. Bob affiche une réponse similaire à celle-ci :

Arrêtez et supprimez le conteneur

Demandez à Bob d'arrêter et de supprimer le conteneur. Vous créerez un nouveau conteneur avec l'interface web dans la section suivante :

Arrête et supprime le conteneur en cours d'exécution et l'image Docker.

Démarrez une nouvelle conversation

Cliquez sur le signe plus en haut de l'interface de chat pour démarrer une nouvelle conversation et vider la fenêtre de contexte.

Démarrer une nouvelle conversation vide la fenêtre de contexte, ce qui :

• évite que les discussions de planification précédentes consomment votre budget de tokens.
• garde le contexte d'implémentation centré sur le plan approuvé.
• réduit le risque que Bob mélange les instructions de planification et d'implémentation.

Planifiez l'interface web

Avant de modifier le code, passez en mode Plan pour que Bob puisse créer un plan sur la façon de créer l'interface web. Cliquez sur le menu déroulant de sélection de mode et sélectionnez Plan, ou tapez /plan dans le chat.

Demandez à Bob de planifier l'interface web ui-plan.md dans le répertoire du projet express-todo-api-modern. Bob demande à utiliser des skill tools et des subagents pour créer le plan. Cliquez sur Approve skill tools for task pour permettre à Bob d'utiliser les skill tools, sur Approve subagent tools for task pour permettre à Bob d'utiliser des subagents, et sur Approve edit tools for task pour enregistrer le plan.

Fais un plan pour ajouter une interface web React TypeScript à cette application de tâches avec Vite.

L'interface doit :
- afficher toutes les tâches existantes récupérées depuis GET /api/todos
- ajouter de nouvelles tâches avec POST /api/todos
- marquer les tâches comme terminées ou non terminées avec PUT /api/todos/:id

Contraintes :
- Ne modifie pas l'API Express existante ni ses endpoints
- Sers à la fois l'API et le frontend React depuis un seul conteneur Docker avec un build multi-stage
- Garde l'implémentation simple : pas d'authentification, pas de routing côté client, pas de bibliothèque externe de gestion d'état
- exécute `npm install` dans le Dockerfile

Enregistre le plan dans un fichier nommé `ui-plan.md` dans le répertoire du projet express-todo-api-modern.

Bob peut poser des questions de clarification pour mieux comprendre les exigences. Vous pouvez soit répondre aux questions, soit dire à Bob de faire ce qu'il recommande.

Examinez le plan avant de dire à Bob de l'exécuter. Cliquez sur ui-plan.md dans l'explorateur pour l'ouvrir.

Demandez à Bob de créer l'interface web

Passez Bob en mode Agent en cliquant sur le menu déroulant de sélection de mode et en sélectionnant Agent, ou tapez /agent dans le chat.

Demandez à Bob de créer l'interface, de la conteneuriser et de l'exécuter :

Implémente le plan `ui-plan.md` que tu as décrit pour créer l'interface web,
conteneuriser l'application avec Docker et l'exécuter.
N'installe pas les dépendances localement. Le Dockerfile gère toutes les installations.

Bob lit le ui-plan.md, vous montre les fichiers qu'il va créer ou modifier, puis compile et démarre le conteneur. Cliquez sur Approve dans les demandes d'outils de Bob.

Comme seule l'approbation automatique pour Read est activée, Bob vous demande la permission d'exécuter des commandes Execute. Cliquez sur I understand the risks, puis sur Approve pour permettre à Bob d'exécuter des commandes pour vous.

Corrigez les échecs de compilation

Parfois, la première tentative de Bob pour créer l'interface et le conteneur peut échouer en raison d'erreurs dans le code ou le Dockerfile. Bob vous montre le message d'erreur et propose une correction. L'itération de développement fait partie de l'écriture de code avec Bob.

Voici quelques erreurs et corrections possibles que vous pourriez rencontrer :

La compilation a échoué car `npm ci` nécessite un fichier package-lock.json.
Laisse-moi mettre à jour le Dockerfile pour utiliser `npm install` à la place.

Vite ne trouve pas index.html. Le problème est que index.html est dans le répertoire `public`
mais Vite l'attend à la racine. Laisse-moi le déplacer au bon endroit.

Ouvrez l'interface web dans votre navigateur

Une fois le conteneur en cours d'exécution, Bob vous donne un résumé de ce qu'il a terminé.

Ouvrez http://localhost:3000/index.html dans votre navigateur. Essayez d'ajouter une nouvelle tâche en utilisant le champ de saisie pour confirmer que l'API fonctionne correctement.

Demandez à Bob de mettre à jour les styles

Personnalisez l'interface en disant à Bob quelle police, couleur de police et couleur d'arrière-plan vous souhaitez. Voici quelques polices parmi lesquelles vous pouvez choisir :

• Inter : Un choix populaire pour les applications web
• Georgia : Une police serif classique, chaleureuse et lisible
• JetBrains Mono : Une police à espacement fixe avec une sensation d'outil de développeur

Choisissez une couleur de police et une couleur d'arrière-plan. Dans le panneau de chat Bob, décrivez vos choix en langage naturel. Voici un exemple de personnalisation :

Mets à jour les styles de l'interface web.
Utilise la police Inter.
Arrière-plan bleu marine foncé.
Texte blanc.

Bob propose des modifications aux styles des composants React. Examinez le diff et cliquez sur Enregistrer pour accepter les modifications.

Recompilez le conteneur et voyez vos modifications

Le conteneur en cours d'exécution sert toujours les anciens styles. Demandez à Bob de le recompiler et de le redémarrer pour que vous puissiez voir vos modifications :

Recompile l'image Docker et redémarre le conteneur avec les styles mis à jour.

Actualisez http://localhost:3000/index.html dans votre navigateur pour voir le design mis à jour.