Szybki start

Uruchom IBM Bob

Uruchom aplikację IBM Bob na swoim komputerze.

Otwórz interfejs czatu Bob

Jeśli interfejs czatu Bob nie jest widoczny, otwórz go, klikając ikonę Bob obok paska nawigacji lub użyj skrótu Option + Command + B (Mac) lub Ctrl + Alt + B (Windows).

Wchodzisz w interakcję z Bob, wpisując żądania w języku naturalnym w polu wprowadzania.

Sklonuj repozytorium tutoriala

Sklonuj repozytorium zawierające przykładową aplikację, wykonując następujące kroki:

1. Kliknij ikonę plików w lewym górnym rogu panelu Bob IDE.
2. Kliknij Clone Repository i wklej następujący URL repozytorium.
3. Gdy Bob zapyta, gdzie zapisać repozytorium, wybierz dowolną lokalizację.

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

Otwórz repozytorium

Gdy Bob zapyta, czy chcesz otworzyć sklonowane repozytorium, kliknij Open. Jeśli Bob zapyta "Czy ufasz autorom plików w tym folderze?", kliknij Yes, I trust the authors.

Explorer pokazuje pliki projektu, a panel czatu Bob otwiera się z boku. Będziesz pracować z folderu bob-get-started/express-todo-api-modern.

Przełącz się na tryb Agent

Wybierz Agent w selektorze trybu lub wpisz /agent w czacie. Tryb Agent pozwala Bob pisać, modyfikować i refaktoryzować kod. Bob nadal prosi o pozwolenie przed każdą operacją.

Skonfiguruj auto-zatwierdzanie

Znajdź przełącznik auto-zatwierdzania w prawym dolnym rogu okna w menu Permissions. Upewnij się, że dla auto-zatwierdzania wybrane jest tylko Read. Bob automatycznie uruchamia polecenia tylko do odczytu, ale prosi o zatwierdzenie każdego polecenia, które modyfikuje pliki lub działa w terminalu.

Zainicjuj Bob w swoim projekcie

Uruchom /init w panelu czatu Bob, aby Bob utworzył główny plik AGENTS.md i pliki reguł AGENTS.md.

Główny plik AGENTS.md informuje Bob o ogólnej strukturze projektu, konwencjach i celach, dzięki czemu Bob może pisać kod pasujący do twojego projektu. Bez niego Bob zaczyna od początku za każdym razem, ponieważ Bob jest stateless.

Pliki reguł w .bob to miejsce, gdzie Bob tworzy AGENTS.md dla każdego ze swoich trybów: Agent, Plan i Ask. Każdy tryb ma inny zestaw reguł, które kierują zachowaniem Bob w tym trybie.

/init

Bob prosi o pozwolenie na utworzenie plików AGENTS.md. Kliknij Approve todo tools for task, aby utworzyć pliki. Po utworzeniu przez Bob wszystkich plików AGENTS.md zobaczysz następujące pliki:

Zbuduj i uruchom API w Dockerze

Poproś Bob o utworzenie Dockerfile i uruchomienie kontenera:

Create a Dockerfile for this API using Node 22 and run it on port 3000.
Don't install dependencies locally.
The Dockerfile handles all installations.

Once you create the Dockerfile, build the image and start the container.

Bob prosi o zatwierdzenie budowania obrazu i uruchamiania kontenera. Kliknij Approve todo tools for task i Approve edit tools for task.

Ponieważ masz włączone tylko auto-zatwierdzanie dla Read, Bob poprosi o pozwolenie na uruchamianie poleceń Execute. Kliknij I understand the risks, a następnie Approve, aby pozwolić Bob uruchamiać polecenia za ciebie.

Bob może znaleźć problem z NPM, taki jak poniższy. Zatwierdź poprawki, które proponuje Bob:

The build failed because there's no package-lock.json file.
I need to update the Dockerfile to use npm install instead of npm ci:

API jest teraz uruchomione i dostępne.

Dodaj zadanie do listy zadań

Aby przetestować API, wklej następujące polecenie bezpośrednio do panelu czatu Bob. To polecenie dodaje zadanie do listy zadań, wykonując żądanie POST do API:

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

  Give me the response in a table format with two columns: Field and Value

Bob pokazuje odpowiedź, która potwierdza, że możesz dodawać zadania do listy zadań za pomocą API. Bob pokazuje odpowiedź podobną do poniższej:

Zatrzymaj i usuń kontener

Poproś Bob o zatrzymanie i usunięcie kontenera. Zbudujesz nowy kontener z interfejsem webowym w następnej sekcji:

Stop and remove the running container and Docker image.

Rozpocznij nową rozmowę

Kliknij znak plus u góry interfejsu czatu, aby rozpocząć nową rozmowę i wyczyścić okno kontekstu.

Rozpoczęcie nowej rozmowy czyści okno kontekstu, co:

• zapobiega temu, by wcześniejsze dyskusje planistyczne zużywały twój token budget.
• utrzymuje kontekst implementacji skupiony na zatwierdzonym planie.
• zmniejsza ryzyko, że Bob pomyli instrukcje planowania i implementacji.

Zaplanuj interfejs webowy

Przed modyfikacją kodu przełącz się na tryb Plan, aby Bob mógł stworzyć plan, jak zbuduje interfejs webowy. Kliknij menu rozwijane wyboru trybu i wybierz Plan, lub wpisz /plan w czacie.

Poproś Bob o zaplanowanie interfejsu webowego ui-plan.md w katalogu projektu express-todo-api-modern. Bob poprosi o użycie skill tools i subagents do stworzenia planu. Kliknij Approve skill tools for task, aby pozwolić Bob używać skill tools, Approve subagent tools for task, aby pozwolić Bob używać subagents, oraz Approve edit tools for task, aby zapisać plan.

Make a plan to add a React TypeScript web UI to this todo app using Vite.

The UI needs to:
- Display all existing tasks fetched from GET /api/todos
- Add new tasks using POST /api/todos
- Mark tasks as complete or incomplete using PUT /api/todos/:id

Constraints:
- Do not modify the existing Express API or its endpoints
- Serve both the API and React frontend from a single Docker container using a multi-stage build
- Keep the implementation simple: no authentication, no client-side routing, no external state management library
- run `npm install` inside the Dockerfile

Save the plan to a file named `ui-plan.md` in the express-todo-api-modern project directory.

Bob może zadawać pytania doprecyzowujące, aby lepiej zrozumieć wymagania. Możesz odpowiedzieć na pytania albo powiedzieć Bob, żeby zrobił to, co rekomenduje.

Przejrzyj plan przed powiedzeniem Bob, aby go uruchomił. Kliknij ui-plan.md w explorerze, aby go otworzyć.

Poproś Bob o zbudowanie interfejsu webowego

Przełącz Bob na tryb Agent, klikając menu rozwijane wyboru trybu i wybierając Agent, lub wpisz /agent w czacie.

Poproś Bob o zbudowanie UI, konteneryzację i uruchomienie:

Implement the plan `ui-plan.md` you outlined to build the web UI
containerize the application with Docker, and run it.
Don't install dependencies locally. The Dockerfile handles all installations.

Bob czyta ui-plan.md, pokazuje pliki, które utworzy lub zmieni, a następnie buduje i uruchamia kontener. Kliknij Approve w żądaniach narzędzi Bob.

Ponieważ masz włączone tylko auto-zatwierdzanie dla Read, Bob poprosi o pozwolenie na uruchamianie poleceń Execute. Kliknij I understand the risks, a następnie Approve, aby pozwolić Bob uruchamiać polecenia za ciebie.

Napraw błędy budowania

Czasami pierwsza próba Bob zbudowania UI i kontenera może się nie powieść z powodu błędów w kodzie lub Dockerfile. Bob pokazuje komunikat o błędzie i proponuje poprawkę. Iteracja rozwoju jest częścią pisania kodu z Bob.

Poniżej znajdują się niektóre możliwe błędy i poprawki, które możesz napotkać:

The build failed because `npm ci` requires a package-lock.json file.
Let me update the Dockerfile to use `npm install` instead.

Vite can't find index.html. The issue is that index.html is in the `public` directory
but Vite expects it in the root. Let me move it to the correct location.

Otwórz interfejs webowy w przeglądarce

Gdy kontener jest uruchomiony, Bob daje podsumowanie tego, co zostało ukończone.

Otwórz http://localhost:3000/index.html w przeglądarce. Spróbuj dodać nowe zadanie za pomocą pola wprowadzania, aby potwierdzić, że API działa poprawnie.

Poproś Bob o aktualizację stylów

Spersonalizuj UI, mówiąc Bob, jakiej czcionki, koloru czcionki i koloru tła chcesz. Poniżej znajdują się niektóre czcionki, z których możesz wybrać:

• Inter: Popularny wybór dla aplikacji webowych
• Georgia: Klasyczna czcionka szeryfowa, ciepła i czytelna
• JetBrains Mono: Czcionka monospace z atmosferą narzędzia deweloperskiego

Wybierz kolor czcionki i kolor tła. W panelu czatu Bob opisz swoje wybory, używając języka naturalnego. Poniżej znajduje się przykład dostosowania:

Update the styles of the web UI.
Use the Inter font.
Dark navy background.
White text.

Bob proponuje edycje stylów komponentów React. Przejrzyj diff i kliknij Save, aby zaakceptować zmiany.

Przebuduj kontener i zobacz swoje zmiany

Uruchomiony kontener nadal serwuje stare style. Poproś Bob o przebudowanie i ponowne uruchomienie, abyś mógł zobaczyć swoje zmiany:

Rebuild the Docker image and restart the container with the updated styles.

Odśwież http://localhost:3000/index.html w przeglądarce, aby zobaczyć zaktualizowany design.