Web Application Designer to wizualny konstruktor z wygodnym interfejsem drag & drop. Nie musisz znać programowania, aby go zrozumieć - podobnie jak inne narzędzia no-code na naszej platformie, jest on intuicyjny.

Aby zacząć, przejdź do zakładki Web Apps - wyświetlą się wszystkie aplikacje utworzone w ramach Twojego projektu. Tutaj możesz je otworzyć do edycji, usunąć lub stworzyć nowe.

Aby skonfigurować wybraną aplikację - kliknij na jej podgląd.

AppMaster.io Web Designer select web application

Okno edycji

Okno edycji aplikacji internetowej pozwala na dostosowanie jej wyglądu, wymiany danych z backendem, a także kilku ogólnych parametrów.

W polu informacji o projekcie (1) zobaczysz jego nazwę, możesz przejść do ustawień, udostępnić go, otworzyć dokumentację API, a także zobaczyć opublikowaną wersję aplikacji webowej. Przycisk Publikuj (2) pozwala opublikować projekt - zastosować wszystkie zapisane zmiany, które wprowadziłeś w projektancie aplikacji internetowej i innych sekcjach AppMaster.io Studio.

AppMaster.io Web Designer Interface

Poniżej znajduje się nazwa Twojej aplikacji (1). Niżej znajdują się zakładki (2) służące do przejścia między ustawieniami aplikacji a jej formularzami autoryzacji i rejestracji (są one konfigurowane osobno).

Po prawej stronie (3) możesz wyeksportować plik konfiguracyjny (config.json) lub przywrócić go do ustawień domyślnych, otworzyć ustawienia bieżącej aplikacji internetowej i zapisać wprowadzone w niej zmiany (bez publikowania).

AppMaster.io Web Designer Components

Komponenty

Obszar komponentów zawiera bloki wymagane do tworzenia i dostosowywania interfejsu aplikacji internetowej. Aby dodać komponent do interfejsu, przeciągnij go za pomocą myszy do jednej z sekcji ekranu.

Komponenty podzielone są na 3 grupy:

  1. Tworzenie struktury i elementów menu - dodawanie stron i grup stron.
  2. Znaczniki stron i dodawanie formularzy, przycisków, list, map itp.
  3. Okna modalne (pop-up).

AppMaster.io Web Designer Drag&Drop UI Components

Kolor komponentu odpowiada kolorowi sekcji, do której można go dodać. Na przykład komponent Page jest dla menu głównego, a Modal dla komponentów App.

Wkrótce dodamy listę komponentów i ich szczegółowy opis do systemu dokumentacji.

Sekcje

Sekcja Page (1) pojawia się po dodaniu do aplikacji przynajmniej jednej strony (2).

Page Content Section Web Apps Builder AppMaster.io

Znajduje się nad główną kanwą w nagłówku (1). Będzie ona wyświetlana na samej górze okna aplikacji internetowej, na wszystkich jej stronach. Tutaj możesz dodać przyciski wyjścia i powrotu, logo, kontakty, przełącznik języków itp.

Po lewej stronie znajduje się menu (2). W sekcji App components (3) możesz dodać modale, które będą dostępne na wszystkich stronach aplikacji. Modele nie są widoczne dla użytkowników do momentu wystąpienia zdarzenia, które je wywołuje.

Poniżej znajduje się "kosz" (4) do szybkiego usuwania komponentów ze strony poprzez przeciąganie i upuszczanie (możesz również kliknąć ikonę kosza w oknie ustawień).

AppMaster.io Web Designer Interface Sections

Poniżej sekcji głównej znajdują się komponenty strony (1). Modale, które tu dodasz, będą dostępne tylko na bieżącej stronie.

Najniższa sekcja, stopka (2), działa w podobny sposób jak nagłówek.

AppMaster.io Web Designer Interface Section Footer

Początek pracy

Najlepszy sposób pracy: Przed stworzeniem aplikacji internetowej w AppMaster.io przemyśl jej układ i zaprojektuj backend. Następnie możesz dodać niezbędne komponenty i od razu połączyć je z bazą danych i procesami biznesowymi. Szczegółowe informacje o naszej platformie no-code znajdują się w docs. Konkretne przykłady ustawień są na blogu i na kanale YouTube.