Hızlı Başlangıç

IBM Bob'u başlatın

IBM Bob uygulamasını bilgisayarınızda başlatın.

Bob sohbet arayüzünü açın

Bob sohbet arayüzü görünmüyorsa, gezinme çubuğunun yanındaki Bob simgesine tıklayarak veya Option + Command + B (Mac) ya da Ctrl + Alt + B (Windows) kısayolunu kullanarak açın.

Giriş alanına doğal dil istekleri yazarak Bob ile etkileşime girersiniz.

Eğitim repository'sini klonlayın

Örnek uygulamayı içeren repository'yi aşağıdaki adımları kullanarak klonlayın:

1. Bob IDE panelinin sol üst köşesindeki dosyalar simgesine tıklayın.
2. Clone Repository'ye tıklayın ve aşağıdaki repository URL'sini yapıştırın.
3. Bob repository'yi nereye kaydetmek istediğinizi sorduğunda istediğiniz herhangi bir konumu seçin.

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

Repository'yi açın

Bob klonlanan repository'yi açmak isteyip istemediğinizi sorduğunda Open'a tıklayın. Bob "Klasördeki dosyaların yazarlarına güveniyor musunuz?" diye sorarsa, Yes, I trust the authors'a tıklayın.

Explorer proje dosyalarını gösterir ve Bob sohbet paneli yanda açılır. bob-get-started/express-todo-api-modern klasöründen çalışacaksınız.

Agent moduna geçin

Mod seçicide Agent'ı seçin veya sohbete /agent yazın. Agent modu Bob'un kod yazmasına, değiştirmesine ve yeniden düzenlemesine izin verir. Bob her işlemden önce yine izin ister.

Otomatik onayı yapılandırın

Pencerenin sağ alt köşesindeki Permissions menüsünde otomatik onay düğmesini bulun. Otomatik onay için yalnızca Read seçili olduğundan emin olun. Bob salt okunur komutları otomatik olarak çalıştırır, ancak dosyaları değiştiren veya terminalde çalışan komutlar için onay ister.

Projenizde Bob'u başlatın

Bob'un bir kök AGENTS.md dosyası ve kural AGENTS.md dosyaları oluşturması için Bob sohbet panelinde /init komutunu çalıştırın.

Kök AGENTS.md dosyası, Bob'a projenin genel yapısını, kurallarını ve hedeflerini söyler, böylece Bob projenize uyan kod yazabilir. Onsuz Bob her seferinde baştan başlar çünkü Bob stateless çalışır.

.bob içindeki kural dosyaları, Bob'un her bir modu için AGENTS.md oluşturduğu yerdir: Agent, Plan ve Ask. Her modun, Bob'un o moddaki davranışını yönlendiren farklı bir kural seti vardır.

/init

Bob AGENTS.md dosyalarını oluşturmak için izin ister. Dosyaları oluşturmak için Approve todo tools for task'e tıklayın. Bob tüm AGENTS.md dosyalarını oluşturduktan sonra aşağıdaki dosyaları görürsünüz:

API'yi Docker'da oluşturun ve çalıştırın

Bob'dan bir Dockerfile oluşturmasını ve konteyneri başlatmasını isteyin:

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 imajı oluşturmanızı ve konteyneri başlatmanızı onaylamanızı ister. Approve todo tools for task ve Approve edit tools for task'e tıklayın.

Yalnızca Read için otomatik onayı etkinleştirdiğiniz için Bob, Execute komutlarını çalıştırmak üzere izin ister. I understand the risks'e ve ardından Approve'a tıklayarak Bob'un sizin için komut çalıştırmasına izin verin.

Bob aşağıdaki gibi bir NPM sorunu bulabilir. Bob'un önerdiği düzeltmeleri onaylayın:

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 artık çalışıyor ve kullanılabilir.

Yapılacaklar listesine bir görev ekleyin

API'yi test etmek için aşağıdaki komutu doğrudan Bob sohbet paneline yapıştırın. Bu komut, API'ye bir POST isteği yaparak yapılacaklar listesine bir görev ekler:

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 size yanıtı gösterir; bu, API ile yapılacaklar listesine görev ekleyebileceğinizi doğrular. Bob aşağıdakine benzer bir yanıt gösterir:

Konteyneri durdurun ve kaldırın

Bob'dan konteyneri durdurmasını ve kaldırmasını isteyin. Bir sonraki bölümde web arayüzü ile yeni bir konteyner oluşturacaksınız:

Stop and remove the running container and Docker image.

Yeni bir konuşma başlatın

Yeni bir konuşma başlatmak ve bağlam penceresini temizlemek için sohbet arayüzünün üst kısmındaki artı işaretine tıklayın.

Yeni bir konuşma başlatmak bağlam penceresini temizler; bu da:

• önceki planlama tartışmalarının token budget'ınızı tüketmesini önler.
• uygulama bağlamını onaylanan plana odaklı tutar.
• Bob'un planlama ve uygulama talimatlarını karıştırma riskini azaltır.

Web arayüzünü planlayın

Kodu değiştirmeden önce, Bob'un web arayüzünü nasıl oluşturacağına dair bir plan oluşturabilmesi için Plan moduna geçin. Mod seçici açılır menüsüne tıklayın ve Plan'ı seçin veya sohbete /plan yazın.

Bob'dan web arayüzünü express-todo-api-modern proje dizininde ui-plan.md olarak planlamasını isteyin. Bob planı oluşturmak için skill tools ve subagents kullanmak ister. Bob'un skill tools kullanmasına izin vermek için Approve skill tools for task, subagents kullanmasına izin vermek için Approve subagent tools for task ve planı kaydetmek için Approve edit tools for task'e tıklayın.

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 gereksinimleri daha iyi anlamak için açıklayıcı sorular sorabilir. Soruları yanıtlayabilir veya Bob'a önerdiğini yapmasını söyleyebilirsiniz.

Bob'a çalıştırmasını söylemeden önce planı gözden geçirin. Açmak için explorer'da ui-plan.md'ye tıklayın.

Bob'dan web arayüzünü oluşturmasını isteyin

Mod seçici açılır menüsüne tıklayıp Agent'ı seçerek veya sohbete /agent yazarak Bob'u Agent moduna geçirin.

Bob'dan UI'yi oluşturmasını, konteynerleştirmesini ve çalıştırmasını isteyin:

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 ui-plan.md'yi okur, oluşturacağı veya değiştireceği dosyaları gösterir ve ardından konteyneri oluşturur ve başlatır. Bob'un araç isteklerinde Approve'a tıklayın.

Yalnızca Read için otomatik onayı etkinleştirdiğiniz için Bob, Execute komutlarını çalıştırmak üzere izin ister. I understand the risks'e ve ardından Approve'a tıklayarak Bob'un sizin için komut çalıştırmasına izin verin.

Derleme hatalarını düzeltin

Bazen Bob'un UI ve konteyneri oluşturma ilk denemesi, koddaki veya Dockerfile'daki hatalar nedeniyle başarısız olabilir. Bob size hata mesajını gösterir ve bir düzeltme önerir. Geliştirme iterasyonu Bob ile kod yazmanın bir parçasıdır.

Karşılaşabileceğiniz bazı olası hatalar ve düzeltmeler şunlardır:

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.

Web arayüzünü tarayıcınızda açın

Konteyner çalıştığında Bob, tamamlananların bir özetini verir.

Tarayıcınızda http://localhost:3000/index.html adresini açın. API'nin doğru çalıştığını doğrulamak için giriş alanını kullanarak yeni bir görev eklemeyi deneyin.

Bob'dan stilleri güncellemesini isteyin

Bob'a hangi yazı tipi, yazı tipi rengi ve arka plan rengini istediğinizi söyleyerek UI'yi kişiselleştirin. Seçebileceğiniz bazı yazı tipleri şunlardır:

• Inter: Web uygulamaları için popüler bir seçim
• Georgia: Sıcak ve okunabilir klasik bir serif yazı tipi
• JetBrains Mono: Geliştirici aracı hissi veren bir monospace yazı tipi

Bir yazı tipi rengi ve arka plan rengi seçin. Bob sohbet panelinde seçimlerinizi doğal dil kullanarak açıklayın. Aşağıda bir özelleştirme örneği bulunmaktadır:

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

Bob, React bileşen stillerinde düzenlemeler önerir. Diff'i gözden geçirin ve değişiklikleri kabul etmek için Save'e tıklayın.

Konteyneri yeniden oluşturun ve değişikliklerinizi görün

Çalışan konteyner hâlâ eski stilleri sunuyor. Değişikliklerinizi görebilmeniz için Bob'dan yeniden oluşturmasını ve yeniden başlatmasını isteyin:

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

Güncellenmiş tasarımı görmek için tarayıcınızda http://localhost:3000/index.html adresini yenileyin.