Tworzenie aplikacji

Aby zbudować aplikację, należy utworzyć układy, strony, wypełnić je treścią i skonfigurować interakcję z aplikacją internetową.

Układy

Wcześniej przedstawiliśmy koncepcję układów . Aby rozpocząć tworzenie układu, należy najpierw nakreślić strukturę aplikacji i określić szablony stron, które mają zostać wykorzystane.

Jeśli coś przegapisz, nie martw się. Listę układów można rozszerzać w razie potrzeby.

Lista układów

Lista układów zawiera wszystkie układy aplikacji internetowej. Tutaj możesz wykonywać różne operacje i zarządzać układami.

Aby uzyskać dostęp do listy układów , wybierz czwartą zakładkę na lewym pasku narzędzi w zakładce projektanta interfejsu użytkownika lub użyj klawisza skrótu 4 . Tutaj zostaną wyświetlone wszystkie układy aplikacji.

Każda aplikacja musi mieć przynajmniej jeden układ. Kiedy tworzysz nową aplikację, automatycznie utworzony zostanie jeden lub kilka układów, w zależności od wybranego szablonu aplikacji. Jeden z nich jest oznaczony jako **domyślny**.

Na liście układów możesz wykonać następujące czynności na układach:

• wybierać,
• Dodaj nowe,
• Przemianować,
• duplikować,
• usuwać.

Domyślny układ

Układ domyślny jest automatycznie wybierany z listy układów podczas tworzenia nowej strony. W razie potrzeby można to jednak zastąpić innym układem.

Domyślne użycie układu zwiększa szybkość programowania, dlatego zalecamy użycie najczęściej używanego układu jako domyślnego. Należy pamiętać, że w danym momencie tylko jeden układ może być ustawiony jako domyślny. Zastąpienie układu domyślnego nie ma wpływu na istniejące strony, chyba że układ początkowy zostanie usunięty.

Układ domyślny jest oznaczony ikoną niebieskiej gwiazdki na liście układów.

Utwórz nowy układ

Możesz zaprojektować różne układy dla różnych typów stron. Wykonaj poniższe kroki, aby utworzyć nowy układ:

• Naciśnij CTRL/⌘+L lub otwórz Listę układów (skrót 4 ) z lewego paska narzędzi projektanta interfejsu użytkownika i kliknij przycisk Plus w nagłówku panelu.
• Podaj nazwę układu w wyświetlonym trybie modalnym. Zalecamy stosowanie czytelnego tytułu, odzwierciedlającego strukturę układu w celu szybkiej identyfikacji podczas przypisywania układów do stron.
• Wybierz szablon układu:
  • Baza: pusty szablon bez dodatkowych elementów, dobry dla stron bez nawigacji, takich jak strony uwierzytelniające lub strony błędów.
  • Pasek boczny po lewej stronie: szablon z menu na pasku bocznym, dobry do paneli administracyjnych, CMS, ERP itp.
  • Top Menu: szablon z górnym menu, odpowiedni dla stron internetowych lub stron docelowych.
• Włącz ustawienie Układ domyślny, jeśli ten układ ma być domyślny.
• Kliknij przycisk Utwórz .

Nie ma ograniczeń co do liczby układów, które możesz utworzyć.

Zmiana nazwy układu

Aby zmienić nazwę układu, kliknij dwukrotnie nazwę układu, dokonaj niezbędnych zmian i naciśnij Enter , aby zapisać, lub Esc aby cofnąć zmiany.

Powielanie układu

Aby powielić układ wraz z jego zawartością i ustawieniami:

1. Najedź kursorem na układ, który chcesz powielić.
2. Kliknij ikonę Duplikuj.

Zduplikowane układy automatycznie pojawiają się na liście z dodanym indeksem do ich nazw. Jeśli powielisz układ ustawiony jako domyślny, układ źródłowy nie zostanie zastąpiony przez nowo utworzony.

Usuwanie układu

Aby usunąć układ:

1. Najedź kursorem na układ, który chcesz usunąć.
2. Kliknij ikonę Kosza.
3. Potwierdź usunięcie.

Aby usunąć układ połączony z dowolnymi stronami, należy ponownie przypisać układ wszystkich połączonych stron przed jego usunięciem. Można to zrobić poprzez modalne potwierdzenie lub ręcznie dla każdej strony.

Aby usunąć układ domyślny, należy ustawić inny układ jako domyślny.

❗️Ważne: operacji usuwania układu nie można cofnąć.

Ustawienia układu

Kliknij układ docelowy na liście układów, aby uzyskać dostęp do jego ustawień z lewego paska bocznego ustawień.

W nagłówku paska bocznego Ustawienia możesz zmienić nazwę wybranego układu, klikając nazwę lub usunąć go.

Możesz ustawić wybrany układ jako domyślny i wyświetlić tutaj wszystkie połączone strony. Aby edytować połączoną stronę, kliknij ją na liście.

Ponadto możesz zbudować logikę biznesową dla układu.

Układ logiki biznesowej

Na karcie logiki biznesowej wybierz wyzwalacz, aby ustawić akcję. Spowoduje to otwarcie edytora procesów biznesowych skupionego na wybranym wyzwalaczu.

Tutaj możesz utworzyć przepływ akcji dla jednego lub większej liczby wyzwalaczy, takich jak implementacja nawigacji, warunkowa zmiana właściwości, przełączanie widoczności, wysyłanie danych i nie tylko. Więcej informacji znajdziesz w naszym przewodniku dotyczącym budowania procesu biznesowego.

🔔 Dla optymalnej wydajności aplikacji buduj złożone procesy biznesowe po stronie backendu.

Edycja układu

Układy, jako komponenty globalne i szablony stron, automatycznie stosują wszystkie modyfikacje do wszystkich połączonych stron.

Aby edytować układ, wybierz element docelowy na liście układów i dodaj niezbędne komponenty z panelu Elementy interfejsu użytkownika, przeciągając je i upuszczając na obszar roboczy.

Edytując układ, pamiętaj, że szablon zawiera niezmienny komponent Kontenera Stron. Określa to rozmieszczenie zawartości strony w szablonie. Kontener strony jest podświetlony na zielono i nie może zawierać komponentów wewnętrznych w trybie edycji układu. Treść jest definiowana bezpośrednio na stronie, a rozmiar kontenera strony jest określany przez jego komponent nadrzędny.

Strony

Po utworzeniu niezbędnych układów jest najlepszy czas na rozpoczęcie tworzenia stron aplikacji internetowych. Po utworzeniu niezbędnych układów jest najlepszy czas na rozpoczęcie tworzenia stron aplikacji internetowych. Każda strona aplikacji internetowej udostępnia treść wyświetlaną w przeglądarce użytkownika pod docelowym adresem URL.

Drzewo stron

Drzewo stron pokazuje strukturę Twojej witryny — strony witryny i foldery, w których znajdują się te strony. Tutaj możesz wykonywać różne operacje oraz porządkować strony i foldery.

Aby otworzyć drzewo stron, wybierz trzecią zakładkę z lewego paska narzędzi projektanta interfejsu użytkownika lub naciśnij 3. Tutaj zostaną wyświetlone wszystkie strony twojej aplikacji.

Każda aplikacja musi mieć przynajmniej jedną stronę. Kiedy tworzysz nową aplikację, tworzy się już jedną lub kilka stron, w zależności od wybranego szablonu aplikacji.

Na stronach i folderach możesz wykonywać następujące czynności:

• wybierać,
• dodaj nową stronę lub folder,
• Przemianować,
• przenieś stronę i foldery do/z folderu,
• duplikować,
• usuwać.

Strona indeksu

Strona indeksu jest stroną początkową aplikacji. Po uruchomieniu aplikacji ta strona zostanie wyrenderowana jako pierwsza, jeśli nie utworzono żadnych przekierowań.

Strona Indeksu została oznaczona ikoną Domu w drzewie stron i nie można jej przełączyć na inną stronę. Domyślnie ta strona jest połączona z domyślnym układem utworzonym automatycznie, ale możesz go zmienić w Ustawieniach strony.

Utwórz nową stronę

Aby dodać stronę do aplikacji internetowej:

1. Naciśnij CTRL/⌘+P lub otwórz Drzewo stron (skrót 3 ) z lewego paska narzędzi projektanta interfejsu użytkownika i kliknij przycisk Plus w nagłówku panelu.
2. Podaj adres URL strony w wyświetlonym oknie modalnym.
3. Wybierz folder nadrzędny strony lub pozostaw pole puste, aby umieścić stronę w katalogu głównym.
4. Wybierz Układ strony .
5. Kliknij przycisk Utwórz .

💡 Aby zbudować zagnieżdżoną trasę bez tworzenia folderów, w polu Adres strony podaj pełną ścieżkę do strony docelowej, np. ustawienia/profil. W tym przypadku strona Profil zostanie utworzona zagnieżdżona w folderze Ustawienia.

Możesz tworzyć nieograniczoną liczbę stron i folderów dla swojej aplikacji internetowej.

🔔 Aplikacje internetowe zbudowane w AppMaster Studio generują routing aplikacji według adresu URL strony, dlatego w formularzu generowania strony użyj adresu URL strony w odpowiednim formacie i, dla najlepszego zrozumienia, użyj przyjaznego adresu URL.

Stwórz nowy folder

Możesz tworzyć foldery, aby organizować nawigację i budować odpowiedni router dla stron. Aby utworzyć nowy folder:

• Naciśnij CTRL/⌘+SHIFT+P lub otwórz Drzewo stron (skrót 3) z lewego paska narzędzi projektanta interfejsu użytkownika i kliknij przycisk Folder w nagłówku panelu.
• Podaj nazwę folderu w wyświetlonym trybie modalnym.
• Jeśli to konieczne, wybierz Folder nadrzędny , aby utworzyć router zagnieżdżony
• Kliknij przycisk Utwórz .

Elementy interfejsu użytkownika

Interfejs użytkownika aplikacji składa się z elementów: pól wejściowych, przycisków, obrazów, pól wyboru, kalendarzy, obrazów i ikon, z których każda służy określonemu celowi.

AppMaster oferuje edytor wizualny typu „przeciągnij i upuść”, który umożliwia wybieranie i umieszczanie elementów bezpośrednio na stronie, zamiast pisać kod i natychmiastowo wyświetlać jego podgląd.

Dodawanie elementów

Aby dodać element do obszaru roboczego:

1. Otwórz panel elementów interfejsu użytkownika z listą elementów interfejsu użytkownika (skrót 1 ).
2. Wybierz potrzebny element lub użyj paska wyszukiwania.
3. Przeciągnij wybrany element na kanwę strony lub układu.

Aby umieścić przeciągany element wewnątrz celu, upuść element nad elementami docelowymi.

Aby dodać element przed lub za elementem, przeciągnij element nad granicę elementu docelowego, aż pojawi się separator.

Dzielnik zależy od kierunku kontenera nadrzędnego:

• Jeśli kierunek kontenera nadrzędnego to Vertical , elementy zostaną dodane od góry lub od dołu.
• Jeśli kierunek kontenera nadrzędnego to Poziomo , elementy zostaną dodane od lewej lub prawej strony.

Dostosuj elementy

Każdy komponent dodawany do obszaru roboczego jest wyposażony w kompleksowy zestaw dostosowywalnych ustawień. Dzięki właściwościom elementu możesz zarządzać zarówno wyglądem elementu, jak i danymi, które będą wyświetlane.

Aby skonfigurować element:

• Wybierz komponent docelowy na kanwie.
• Przejdź do panelu Wygląd, pierwszej karty na prawym pasku bocznym.
• W panelu wybierz konkretny element ustawień, który chcesz zmodyfikować.
• Wpisz preferowane wartości w wyznaczonych polach.

Płótno reaguje w czasie rzeczywistym, natychmiast prezentując wprowadzone zmiany.

Aby uzyskać dodatkowe wskazówki, najedź na chwilę kursorem myszy na ustawienie, aby wyświetlić podpowiedź zawierającą zwięzły opis funkcji tego ustawienia.

Oprócz tych interaktywnych funkcji AppMaster zwiększa możliwości dostosowywania poprzez specjalne bloki procesów biznesowych, Ustaw właściwości i Ustaw dane . Bloki te zapewniają zaawansowany poziom dostępu, umożliwiając programową zmianę ustawień każdego komponentu w aplikacji internetowej.