Kreator Stron i Aplikacji AI pozwala przeglądać i edytować pliki projektu bezpośrednio w przeglądarce. Ten artykuł jest przeznaczony dla osób, które znają podstawy programowania stron. Do zbudowania strony w Kreatorze nie musisz korzystać z kodu.
SPIS TREŚCI
- Dla kogo jest edytor kodu?
- Jak otworzyć edytor kodu?
- Z czego składa się projekt?
- Jak edytować plik?
- Jak pobrać pliki projektu?
- Co zrobić, gdy po zmianach coś przestanie działać?
Dla kogo jest edytor kodu?
Wszystkie zmiany na stronie możesz wprowadzać poleceniami w czacie i narzędziami w podglądzie. Edytor kodu przyda się, jeśli chcesz:
- sprawdzić, jak zbudowana jest Twoja strona,
- wprowadzić drobną zmianę bezpośrednio w kodzie,
- pobrać projekt i pracować z nim we własnym środowisku.
Kod projektu w Kreatorze Stron i Aplikacji AI jest zbudowany inaczej niż tradycyjna strona internetowa. Jeśli znasz tylko HTML i CSS, kod będzie wyglądał inaczej, niż się spodziewasz.
Treść i wygląd strony znajdziesz głównie w plikach JavaScript, a nie w plikach HTML.
Jeśli chcesz zmieniać dane, z których korzysta strona, np. pozycje menu czy ceny, nie potrzebujesz do tego kodu. Zobacz: Jak zmieniać dane na stronie w bazie danych projektu.
Jak otworzyć edytor kodu?
Na pasku nad podglądem kliknij ikonę Kod (<>). Po lewej stronie zobaczysz Eksplorator z plikami projektu, a po prawej obszar edycji.
Aby otworzyć plik, kliknij go w eksploratorze. Aby wrócić do strony, kliknij zakładkę Podgląd.
Z czego składa się projekt?
Wszystkie pliki znajdują się w folderze app. Najważniejsze z nich to:
- folder src: kod strony, w tym treści i układ sekcji,
- folder public: pliki, które strona wykorzystuje bez zmian, np. ikona strony wyświetlana na karcie przeglądarki,
- pliki konfiguracyjne w folderze głównym,
- pliki AGENTS.md: informacje dla Kreatora. Plik w folderze głównym zawiera ogólne zasady platformy, a plik w folderze src opis Twojego projektu, który Kreator aktualizuje po zmianach.
Projekt korzysta z bibliotek zapewnianych przez platformę, dlatego nie instaluj dodatkowych pakietów.
Jak edytować plik?
- Kliknij plik w eksploratorze. Otworzy się w nowej karcie edytora.
- Wprowadź zmiany. Kropka przy nazwie pliku na karcie oznacza, że plik ma niezapisane zmiany.
- Kliknij Zapisz w prawym dolnym rogu albo naciśnij Ctrl+S. Aby zrezygnować ze zmian, kliknij Odrzuć.
- Przejdź do zakładki Podgląd i sprawdź efekt.
Ręczne zmiany w kodzie nie tworzą nowej wersji w historii wersji. Zanim zmienisz plik, pobierz jego kopię: kliknij Eksportuj plik.
Jeśli po zmianie coś przestanie działać, wkleisz poprzednią treść z kopii.
Jak pobrać pliki projektu?
- Cały projekt: kliknij Eksportuj wszystko nad listą plików w eksploratorze.
- Jeden plik: otwórz go w edytorze i kliknij Eksportuj plik w lewym dolnym rogu obszaru edycji.
Pobrany projekt możesz otworzyć we własnym edytorze kodu. Pamiętaj jednak, że korzysta on z bibliotek i bazy danych zapewnianych przez platformę Kreatora.
Aby uruchomić projekt w innym miejscu, musisz samodzielnie przygotować odpowiednie środowisko.
Co zrobić, gdy po zmianach coś przestanie działać?
Jeśli masz kopię pliku sprzed zmiany, otwórz ją, skopiuj jej treść do edytora i zapisz plik.
Możesz też opisać problem w czacie, np. „Po mojej zmianie w pliku App.jsx strona przestała się wyświetlać. Napraw to”. Pamiętaj, że takie polecenie zużywa kredyty AI.
Ostatecznie możesz przywrócić wcześniejszą wersję projektu. Przywrócisz wtedy kod z chwili, gdy ta wersja powstała.
Stracisz wtedy wszystkie późniejsze ręczne zmiany w kodzie, również te, które działały poprawnie. Zobacz: Jak cofnąć zmiany i przywrócić wcześniejszą wersję projektu.
