Antigravity IDE może pomóc przejść od pustego projektu do działającej lokalnie aplikacji webowej, ale najpierw trzeba wskazać agentowi folder projektu, a na końcu samodzielnie przejrzeć zmiany i sprawdzić aplikację w przeglądarce. Opisany przez InfoWorld przykład prowadzi od strony w Astro z listą gitar do lokalnej bazy SQLite i funkcji zapisywania historii konserwacji.
Którego Antigravity użyć?
Do pracy z edytorem kodu i plikami projektu wybierz Antigravity IDE. Google rozróżnia je od samodzielnej aplikacji Antigravity, która służy do zarządzania agentami, oraz Antigravity CLI, czyli interfejsu do pracy w terminalu. Codelab wymienia też SDK jako osobną pozycję. Google opisuje różnice między tymi produktami i wymagania ćwiczenia wprowadzającego.
W tym ćwiczeniu Google wskazuje macOS, Windows i określone dystrybucje Linuksa, a także przeglądarkę Chrome i osobiste konto Gmail. To wymagania podane dla opisywanego ćwiczenia, nie instrukcja dla każdej z powierzchni Antigravity.
Utwórz projekt i przypisz mu lokalny folder
Zanim agent zacznie pracować na plikach, utwórz projekt i wskaż folder na swoim komputerze. Google opisuje projekt jako zakres obejmujący jeden lub więcej folderów oraz powiązane z nimi narzędzia i uprawnienia. W samouczku dla początkujących Mikey No Code pokazuje, że agent nie pracuje na lokalnych plikach, dopóki projekt nie zostanie połączony z folderem.
Po połączeniu folderu zacznij od zadania o jasno określonym zakresie. Google opisuje /plan jako sposób na poproszenie agenta o plan implementacji. Plany, listy zadań, różnice w kodzie, omówienia zmian i zrzuty ekranu mogą pomagać w przeglądzie, ale nie pojawiają się przy każdym zadaniu. Agent może też kontynuować pracę bez widocznego przycisku „Proceed”.
Zbuduj aplikację etapami
Poniższa kolejność odtwarza projekt opisany przez autora tutorialu InfoWorld. To konkretny przykład, a nie wymagany stos technologiczny dla każdej aplikacji w Antigravity.
- Utwórz projekt Astro. W terminalu IDE autor rozpoczął od polecenia
npm create astro@latest vintage-guitar-vault, a następnie pracował nad plikiemsrc/pages/index.astro. - Dodaj przykładowe dane i stronę. Projekt zaczynał się od listy gitar zapisanej w kodzie. Autor InfoWorld opisał też, że w jego przykładzie trzy łączniki w
---były potrzebne, by uruchomiło się używane uzupełnianie inline. Komentarz precyzujący pola gitar dał bardziej ukierunkowane dane przykładowe niż ogólna prośba o tablicę. - Dodaj obsługę żądania HTMX. W przykładzie HTMX wysyłał żądanie dotyczące historii konserwacji gitary. Same podpowiedzi inline pomogły autorowi z fragmentem składni, ale nie rozwiązały brakującej integracji biblioteki ani architektury backendu.
- Przenieś dane do lokalnej bazy. W dalszej części projektu autor użył SQLite przez
better-sqlite3, dodał skrypt inicjalizujący bazę i przygotował endpoint/api/maintenance/[id]. Do zmian obejmujących kilka plików wykorzystał Agent Manager.
Uruchom aplikację i sprawdź zmiany
W przykładzie InfoWorld serwer deweloperski uruchamiał się poleceniem npm run dev, a aplikację można było otworzyć pod adresem localhost:4321. Sprawdź działanie strony w przeglądarce i przetestuj funkcję historii konserwacji — samo wygenerowanie kodu nie potwierdza, że żądanie, endpoint i baza współpracują poprawnie.
Autor opisał błąd node-gyp w środowisku Windows, który agent rozwiązał po zatwierdzeniu zmian. Później pojawił się TypeError podczas sprawdzania funkcji konserwacji; autor relacjonował, że dalsza praca agenta i testy w przeglądarce pozwoliły rozwiązać problem w tym projekcie. To wynik jednego opisanego wdrożenia, nie gwarancja podobnego przebiegu na innych komputerach.
Podpowiedź składniowa może przyspieszyć napisanie fragmentu, ale połączenie biblioteki, warstwy danych i endpointu wymagało w tym przykładzie pracy nad kilkoma plikami. Dlatego po każdej większej zmianie obejrzyj diff, uruchom aplikację i przetestuj funkcję, którą właśnie dodano; nie zakładaj przy tym, że Antigravity zawsze pokaże plan albo poprosi o zatwierdzenie.
