Jak korzystać z Bubble: samouczek krok po kroku w 2025 roku

Chcesz stworzyć aplikację, ale uważasz, że musisz znać mnóstwo kodu?

To jest duży problem.

Wielu użytkowników chce tworzyć własne treści, projektować własne strony, a nawet uruchamiać własne aplikacje, ale czują się uwięzieni.

Chcą korzystać z funkcji sztucznej inteligencji i uczyć się, jak coś zrobić, oglądając samouczki wideo, ale to wydaje się zbyt odległe.

A oto rozwiązanie: Bubble. 

Pokażemy Ci jak używać bubble.

Bańka

Przestań zmagać się ze skomplikowanymi bazami danych. Bubble pozwala wizualnie zarządzać danymi Twojej aplikacji. Zacznij tworzyć swoją aplikację opartą na danych już dziś!

Wypróbuj Bubble za darmo Przeczytaj całą recenzję

Konfigurowanie konta Bubble

Dotarcie do witryny Bubble

Pierwszym krokiem w tworzeniu aplikacji jest wejście na stronę Bubble.

Otwórz swoją ulubioną przeglądarkę internetową — to program, którego używasz do przeglądania stron internetowych.

Najpopularniejsze przeglądarki to Chrome, Firefox, Safari i Edge. W pasku adresu u góry wpisz „bubble.io” i naciśnij Enter.

Zostaniesz przeniesiony bezpośrednio na stronę główną Bubble.

Rozejrzyj się za przyciskiem z napisem „Zarejestruj się”, „Rozpocznij” lub „Utwórz konto”.

To jest Twój bilet do rozpoczęcia budowy.

Rejestracja bezpłatnego konta

Kliknięcie tego przycisku rozpocznie proces rejestracji.

Podobnie jak przy zakładaniu konta e-mail lub gry, musisz podać pewne informacje.

Bubble potrzebuje Twojego adresu e-mail, aby móc się z Tobą skontaktować. Aby zapewnić bezpieczeństwo swojego konta, musisz ustalić hasło.

Wybierz silne hasło — najlepiej takie, które będzie zawierać litery, cyfry i symbole — i zapisz je w bezpiecznym miejscu, aby go nie zapomnieć.

Bubble może zadać Ci kilka dodatkowych pytań, na przykład do czego planujesz używać Bubble.

Nie martw się, po prostu wybierz opcję, która wydaje Ci się najbliższa temu, co chcesz zrobić.

Zrozumienie interfejsu Bubble

Po zalogowaniu zobaczysz interfejs Bubble.

To jest główny ekran, na którym zbudujesz swoją aplikację. Na początku może wydawać się trochę zatłoczony, ale jest podzielony na sekcje.

Najważniejsze części to:

• Karta Projekt: Tutaj wizualnie tworzysz strony swojej aplikacji. Przeciągasz i upuszczasz elementy, takie jak przyciski, tekst pola i obrazy na tym obszarze.
• Karta Przepływ pracy: W tym miejscu wydajesz swojej aplikacji polecenia. Tworzysz „przepływy pracy”, które są jak instrukcje dla Twojej aplikacji, gdy ktoś kliknie przycisk lub coś wpisze.
• Karta Dane: Tutaj zarządzasz bazą danych swojej aplikacji. Baza danych to coś w rodzaju cyfrowej szafki na dokumenty, w której przechowujesz informacje.
• Drzewo Elementów: Tutaj możesz zobaczyć wszystkie elementy dodane do swojej strony, zorganizowane w formie listy.
• Edytor nieruchomości: Po kliknięciu elementu w tym obszarze wyświetlane są wszystkie sposoby zmiany jego wyglądu i działania.

Tworzenie pierwszej strony aplikacji

Poznajemy edytor wizualny

Edytor wizualny to miejsce, w którym możesz zaprojektować wygląd swojej aplikacji.

To jak puste płótno. Po lewej stronie ekranu zobaczysz zestaw narzędzi o nazwie „elementy”.

„To elementy, które możesz przeciągać i upuszczać na swojej stronie. Pomyśl o nich jak o cyfrowych klockach.

Masz pola tekstowe na słowa, przyciski do klikania, obrazy do wyświetlania zdjęć i wiele więcej.

Dodawanie tekstu i przycisków

Zacznijmy od czegoś prostego.

Aby dodać tekst, kliknij element „Tekst” i przeciągnij go na środek strony.

Teraz możesz wpisać tam cokolwiek chcesz. 

Może coś w stylu „Witamy w mojej aplikacji!” lub „Kliknij przycisk poniżej”.

Następnie dodajmy przycisk.

Kliknij element „Przycisk” i przeciągnij go pod tekst. Możesz zmienić treść przycisku, wpisując ją w polu tekstowym wewnątrz przycisku.

Spróbuj czegoś takiego jak „Start” lub „Kliknij tutaj”.

Projektowanie układu strony

Teraz możesz zauważyć, że jest tu pewien bałagan.

Nie martw się, możemy to naprawić. Możesz klikać i przeciągać elementy, aby je przesuwać.

Widzisz te niebieskie linie, które pojawiają się, gdy przeciągasz?

Pomagają Ci wszystko uporządkować. 

Spróbuj przesuwać tekst i przycisk, aż będą wyglądać dobrze.

Możesz również zmienić rozmiar elementów, klikając małe kwadraciki w rogach i przeciągając je. Możesz też powiększyć lub pomniejszyć tekst albo rozciągnąć przycisk.

Dodawanie podstawowej funkcjonalności

Zrozumienie przepływów pracy

Ok, więc sprawiliśmy, że nasza aplikacja wygląda ładnie.

Ale jak to zrobić? Do coś?

Tu właśnie pojawiają się przepływy pracy. Przepływ pracy jest czymś w rodzaju zestawu instrukcji.

Informuje aplikację, co ma zrobić, gdy ktoś kliknie przycisk lub wykona jakąś inną czynność.

Sprawienie, aby przycisk coś robił

Zróbmy tak, aby nasz przycisk wykonywał coś prostego.

Kliknij utworzony przycisk. Następnie poszukaj zakładki „Przepływ pracy”.

Kliknij tutaj. Zobaczysz przycisk z napisem „Kliknij tutaj, aby dodać wydarzenie”.

" Jakiś wydarzenie To jest to, co rozpoczyna przepływ pracy. Kliknij ten przycisk.

Wybierz „Akcje elementu”, a następnie „Kliknij”.

Teraz musimy poinformować aplikację, co ma robić po kliknięciu przycisku.

Zróbmy tak, żeby wyświetlał komunikat. Kliknij „Dodaj akcję”.

Zobaczysz listę funkcji, które może wykonywać Twoja aplikacja. Znajdź i kliknij „Alert”. W polu tekstowym wpisz komunikat, który chcesz wyświetlić. Na przykład: „Kliknięto przycisk!”.

Teraz, gdy ktoś kliknie przycisk, pojawi się małe okienko z Twoją wiadomością. To Twój pierwszy przepływ pracy!

Dodawanie pól wejściowych

Pola wprowadzania danych służą użytkownikom do wpisywania informacji.

Można je porównać do pól tekstowych, w których ludzie mogą wpisać swoje imię, adres e-mail lub cokolwiek innego.

Aby dodać pole wejściowe, kliknij element „Input” i przeciągnij go na stronę.

Podobnie jak w przypadku tekstu i przycisków, możesz je przesuwać i zmieniać ich rozmiar.

Można również zmienić rodzaj informacji, jakich oczekuje pole wejściowe.

Spójrz na edytor właściwości. Możesz wybrać, czy ma on dotyczyć tekstu, liczb, adresów e-mail czy haseł.

Łączenie stron i nawigacja

Tworzenie wielu stron

Większość aplikacji ma więcej niż jedną stronę.

Możesz mieć stronę główną, stronę profilu lub stronę ustawień.

Aby utworzyć nową stronę, poszukaj przycisku lub łącza z napisem „Nowa strona” lub podobnym.

Kliknij, a otrzymasz nową, pustą stronę.

Podaj nazwę, np. „Profil” lub „Ustawienia”.

Łączenie stron za pomocą przycisków

Teraz zróbmy tak, aby ludzie mogli poruszać się między stronami.

Możemy to zrobić za pomocą przycisków. Wróć do pierwszej strony.

Przeciągnij przycisk na stronę. W procesie działania przycisku dodaj nową akcję.

Tym razem wybierz „Nawigacja”, a następnie „Przejdź do strony”.

Następnie wybierz stronę, do której przycisk będzie odsyłał użytkowników. 

Teraz, gdy ktoś kliknie ten przycisk, zostanie przeniesiony na inną stronę.

Tworzenie menu nawigacyjnego

Jeśli masz dużo stron, przydatne może okazać się menu nawigacyjne.

To po prostu rząd przycisków u góry lub u dołu aplikacji, który umożliwia użytkownikom łatwe poruszanie się między stronami.

Aby utworzyć menu nawigacyjne, dodaj element „Grupa” na górze strony.

Następnie dodaj kilka przycisków wewnątrz grupy.

Ustaw każdy przycisk jako link do innej strony, tak jak robiliśmy to wcześniej. Teraz możesz łatwo poruszać się po aplikacji.

Przesyłanie danych między stronami

Czasami zachodzi potrzeba przesłania informacji z jednej strony na drugą.

Na przykład, jeśli masz stronę profilową, możesz chcieć wysłać imię użytkownika ze strony głównej na stronę profilową.

Aby tego dokonać, należy skorzystać z czegoś, co nazywa się „parametrami strony”.

Tworząc przycisk przekierowujący do innej strony, możesz dodać parametr do adresu URL. 

Jest to coś w rodzaju dodania małego znacznika, który wskazuje stronie, jakie informacje ma wyświetlać.

Na stronie, na którą wysyłasz dane, możesz użyć parametru, aby wyświetlić informacje.

Możesz na przykład dodać element tekstowy i nakazać mu wyświetlanie nazwy użytkownika określonej w parametrze.

Teraz na stronie profilu będzie wyświetlana prawidłowa nazwa.

Testowanie i podgląd aplikacji

Jak wyświetlić podgląd swojej pracy

Ok, utworzyłeś kilka stron i dodałeś kilka akcji. 

Teraz chcesz zobaczyć, jak wygląda Twoja aplikacja i jak działa.

Bubble ułatwia to zadanie. Poszukaj przycisku z napisem „Podgląd” lub podobnym.

Zazwyczaj wygląda jak przycisk odtwarzania.

Kliknij go, a Bubble otworzy nową kartę w Twojej przeglądarce, wyświetlając Twoją aplikację.

To tak, jakbyś oglądał swoją aplikację na żywo. Możesz klikać przyciski, wypełniać pola i sprawdzać, czy wszystko działa zgodnie z planem.

Testowanie różnych scenariuszy

Podczas podglądu aplikacji nie klikaj po prostu losowo.

Spróbuj pomyśleć o różnych sposobach, w jakie ludzie mogą korzystać z Twojej aplikacji.

Kliknij każdy przycisk. Wpisz dane w każdym polu. Zobacz, co się stanie, gdy wykonasz różne czynności.

Na przykład, jeśli masz stronę logowania, spróbuj wpisać nieprawidłowe hasło.

Sprawdź, czy Twoja aplikacja wyświetla komunikat o błędzie.

Jeśli posiadasz przycisk zapisywania danych, sprawdź swoją bazę danych, aby upewnić się, że dane są zapisywane prawidłowo.

Debugowanie typowych problemów

Czasami coś nie działa tak, jak powinno. To normalne.

Zdarza się każdemu. Kiedy znajdziesz problem, nazywa się to „błędem”. Aby naprawić błąd, musisz go „debugować”.

Bubble ma narzędzia, które mogą pomóc Ci znaleźć błędy.

Poszukaj narzędzia o nazwie „Debugger”.

Może pokazać Ci, co dzieje się za kulisami, gdy Twoja aplikacja jest uruchomiona. Dzięki temu możesz dowiedzieć się, dlaczego coś nie działa.

Do typowych problemów należą:

• Przyciski nie działają.
• Dane nie są zapisywane prawidłowo.
• Strony się nie ładują.
• Komunikaty o błędach.

Alternatywy dla Bubble

Szukam czegoś innego Alternatywy dla bąbelków w obszarze tworzenia aplikacji bez kodu i z niskim kodem?

Oto kilka popularnych opcji:

• Softr: Ta platforma doskonale nadaje się do szybkiego przekształcania arkuszy kalkulacyjnych i baz danych (takich jak Airtable i Arkusze Google) w aplikacje internetowe i portale klienckie. Jest znana z łatwości obsługi i gotowych szablonów.
• Buzzy: Potężna platforma bez kodu, która umożliwia tworzenie złożonych aplikacji internetowych o wysokim stopniu personalizacji. Posiada rozbudowany ekosystem wtyczek, ale może wymagać bardziej zaawansowanej nauki.
• Poślizg: To narzędzie stawia na prostotę, umożliwiając tworzenie aplikacji mobilnych bezpośrednio z Arkuszy Google. Świetnie nadaje się do tworzenia narzędzi wewnętrznych i prostych aplikacji.
• Softgen: Ta oparta na sztucznej inteligencji platforma ma na celu uproszczenie tworzenia aplikacji poprzez interpretację opisów użytkowników i generowanie aplikacji. Została zaprojektowana z myślą o szybkim prototypowaniu i iteracyjnym udoskonalaniu.
• Adalo: Platforma bez kodu, której celem jest tworzenie natywnych aplikacji mobilnych z łatwym w obsłudze interfejsem typu „przeciągnij i upuść” oraz rynkiem gotowych komponentów.

Wniosek

Udało Ci się! Teraz rozumiesz, jak korzystać z podstaw Bubble.

Ten przewodnik to zaledwie krótki kurs, ale nadal możesz zrobić o wiele więcej.

Nie potrzebujesz ani jednej linijki kodu.

Jeśli chcesz od razu zająć się swoim kolejnym projektem, zapamiętaj te wskazówki: Ćwicz nieustannie.

Nie bój się szukać YouTube lub zapoznaj się z samouczkami Bubble.io, w których znajdziesz więcej wskazówek.

Znajdziesz mnóstwo materiałów i wskazówek dla początkujących.

Rynek Bubble jest świetnym miejscem, w którym można znaleźć pomoc.

Często zadawane pytania