Vibe coding: samodzielnie stwórz małą aplikację

W vibe codingu opisujesz zwykłymi słowami, co chcesz stworzyć. Asystent pisze kod, pokazuje wynik i poprawia go na podstawie twoich uwag. Nie musisz umieć programować. W ten sposób stworzysz na przykład quiz na szkolenie, prostą grę lub przydatne narzędzie dla współpracowników.

Potrzebujesz tylko aplikacji desktopowej. Nie musisz instalować Node.js ani gita: aplikacja ma je wbudowane.

1. Wybierz folder roboczy

Utwórz pusty folder na komputerze, na przykład QuizSzkoleniowy, i wybierz go jako folder roboczy czatu. Jak to zrobić, przeczytasz na stronie Dostęp do lokalnych plików. Asystent pracuje tylko w tym folderze.

2. Opisz, czego chcesz

Powiedz jak najkonkretniej, co chcesz stworzyć. Na przykład:

Utwórz quiz na warsztaty o bezpieczeństwie informacji jako jedną stronę HTML. Dziesięć pytań wielokrotnego wyboru, z dużymi przyciskami, wynikiem na końcu i przyciskiem, aby zacząć od nowa.

Taką prostą stronę asystent pokazuje za pomocą wbudowanego serwera WWW aplikacji. Wynik pojawia się we wbudowanej przeglądarce: przycisk Przeglądarka (ikona globu) po prawej stronie górnego paska. Więcej przeczytasz w sekcji Lokalne serwery i wbudowana przeglądarka.

Coś ci nie odpowiada? Po prostu powiedz, co trzeba zmienić:

Zmień kolor przycisków na zielony, a przy błędnej odpowiedzi pokaż poprawną.

Własne zdjęcia i podgląd asystenta

Dołącz zdjęcie do wiadomości i poproś:

Umieść to zdjęcie na stronie.

Asystent zapisze zdjęcie w folderze projektu, na przykład w img/, i umieści je na stronie. Działa to też z obrazem, który asystent właśnie dla ciebie utworzył.

Coś jest nie tak ze stroną we wbudowanej przeglądarce? Poproś:

Zobacz, co jest nie tak na stronie.

Asystent sprawdzi wtedy tekst, zrzut ekranu i komunikaty o błędach strony. Zobacz Podgląd strony przez asystenta.

Gdy asystent sam otwiera stronę we wbudowanej przeglądarce, czeka, aż się załaduje, i widzi jej komunikaty o błędach, np. błąd skryptu albo plik, który się nie ładuje. Poprawia je, zanim powie, że działa. Potem wypróbowuje stronę jak użytkownik: klika przyciski, wypełnia pola, naciska klawisze i poprawia błędy, które się przy tym pojawią. To, czy wszystko działa tak, jak chcesz, sprawdzasz sam.

3. Większe aplikacje

Jeśli chcesz czegoś większego, na przykład aplikacji z kilkoma ekranami, asystent może utworzyć projekt, na przykład z Vite i React:

Utwórz w tym folderze aplikację React z Vite, w której współpracownicy mogą rezerwować salę konferencyjną. Zainstaluj wszystko, uruchom aplikację i pokaż wynik.

Utworzenie takiego projektu (na przykład przez npm create vite@latest) zatwierdzasz na karcie polecenia. Potem asystent instaluje pakiety. To też zatwierdzasz albo włączasz Zezwalaj na instalację pakietów bez pytania. Zobacz Instalowanie pakietów. Nie chcesz karty dla każdego polecenia? Wybierz Zaufaj temu projektowi na pierwszej karcie.

4. Zapisuj wersje

Wersja to migawka twojego projektu. Jeśli zmiana ci się nie spodoba, możesz wrócić do wcześniejszej wersji. W dogodnym momencie poproś asystenta:

Zapisz wersję.

Za pierwszym razem asystent zakłada historię wersji dla folderu. Pliki, które wyglądają na sekrety, takie jak hasła czy klucze (także klucze API Google), nigdy nie trafiają do wersji. Asystent informuje, gdy coś pominie.

5. Umieść projekt na GitHubie

Na GitHubie przechowujesz projekt online. Masz wtedy kopię zapasową i możesz kontynuować pracę na innym komputerze.

Łączenie z GitHubem

Każdy łączy własne konto GitHub. Nie masz jeszcze konta? Najpierw załóż bezpłatne konto na github.com/signup.

1. Przejdź do Ustawienia i w sekcji Status pulpitu znajdź panel GitHub.
2. Kliknij Połącz GitHub. Aplikacja pokaże kod i otworzy github.com/login/device w przeglądarce.
3. Wpisz kod na GitHubie (przyciskiem Kopiuj kod skopiujesz go) i udziel zgody. Jeśli strona się nie otworzyła, kliknij Otwórz GitHub.
4. Panel pokazuje teraz Połączono jako @twoja-nazwa.

O co pyta GitHub. GitHub pokazuje aplikację AI-School Desktop od HandiHow-B-V i prosi o dostęp do twoich repozytoriów (repo): odczyt i zapis, także w repozytoriach prywatnych. Ten dostęp jest potrzebny, aby utworzyć i aktualizować projekt. Zgódź się tylko wtedy, gdy strona jest na github.com.

Kod wygasł? Kod jest ważny około 15 minut. Jeśli wygasł, kliknij ponownie Połącz GitHub.

Repozytoria organizacji:

• Jeśli organizacja ogranicza aplikacje firm trzecich, kliknij na ekranie zgody Request (poproś o dostęp) obok organizacji. Możesz to zrobić także później na github.com/settings/applications > AI-School Desktop.
• Właściciel organizacji zatwierdza to w Settings > Third-party access > OAuth application policy organizacji.
• Bez tej zgody działają twoje własne repozytoria, ale repozytoria organizacji nie.

Inne konto? Kliknij Rozłącz i wyloguj się z github.com w przeglądarce (albo użyj okna prywatnego), zanim połączysz ponownie. W przeciwnym razie GitHub użyje konta, na które jesteś już zalogowany.

notatka

Starsze wersje aplikacji pokazują „Logowanie przez GitHub nie jest jeszcze dostępne w tej wersji aplikacji.” Zaktualizuj wtedy aplikację.

Publikowanie online i aktualizowanie

Następnie poproś na przykład:

Umieść ten projekt na GitHubie.

Asystent pokaże kartę z dokładnym adresem oraz etykietami Wbudowane w aplikację i Sieć wł.. Kliknij Uruchom, aby kontynuować, lub Odrzuć, aby przerwać. Nowe repozytorium jest prywatne, chyba że poprosisz o publiczne. Jeśli adres to nie github.com albo repozytorium ma być publiczne, karta ostrzega. Przy publikowaniu online widzisz, które pliki zostaną wysłane.

Później możesz używać na przykład:

• "Opublikuj nową wersję online." Asystent wysyła twoje nowe wersje na GitHuba.
• "Pobierz najnowszą wersję." Asystent pobiera zmiany z GitHuba.
• "Pobierz projekt https://github.com/nazwa/projekt do tego folderu." Asystent pobiera istniejący projekt.

Publiczny projekt możesz pobrać także bez połączenia. Do publikowania online i tworzenia nowego repozytorium połączenie jest potrzebne.

6. Wskazówki dotyczące bezpieczeństwa

• Nowe repozytoria są prywatne. Zmieniaj repozytorium na publiczne tylko wtedy, gdy każdy może widzieć kod.
• Nigdy nie umieszczaj w aplikacji haseł, kluczy ani innych sekretów.
• Używasz klucza API Google (zaczyna się od AIza, np. klucz webowy aplikacji Firebase)? Umieść go w pliku, który asystent pomija w wersjach, np. .env. Jeśli klucz zostanie w kodzie, ten plik nie trafi online.
• Zawsze sprawdzaj adres na karcie, zanim klikniesz Uruchom.
• Połączenie jest zapisywane w postaci zaszyfrowanej na twoim koncie użytkownika na tym komputerze. Asystent nigdy nie widzi twojego klucza GitHub. Jeśli pracujesz na wspólnym komputerze, po zakończeniu pracy kliknij Rozłącz.
• Rozłącz usuwa połączenie tylko z tego komputera. Jeśli chcesz całkowicie cofnąć dostęp, zrób to na GitHubie w Settings > Applications.