od Podstaw
6 godz. 34 min · Bubble · Full-stack i Programowanie
Krzysiek PiekarzAutomation Specialist / No-code DeveloperZapomnij o ręcznym pisaniu kodu i żmudnym tworzeniu stron www lub aplikacji! Wykorzystując przejrzysty edytor Bubble będziemy w stanie rozpocząć naszą pracę od czystej kartki i wyklikać cały układ bezpośrednio w interfejsie. Dodatkowo pokażę Ci w jaki sposób można wdrożyć do projektu w pełni funkcjonalną logikę obsługi użytkowników nawet wtedy, gdy nie posiadasz żadnej wiedzy programistycznej. A to wszystko w niemal ekspresowym tempie i bez zbędnych konfiguracji, które bywają zmorą programistów.
Edytor zapewnia spójny i intuicyjny interfejs, dzięki któremu stworzenie nawet skomplikowanej aplikacji staje się wyjątkowo proste. Dodatkowo wbudowana baza danych sprawia, że nie musimy korzystać z żadnych zewnętrznych rozwiązań a zarządzanie nią jest na tyle intuicyjne, że poradzi sobie z tym nawet niedoświadczony użytkownik. Kolejną zaletą jest dostęp do ogromnej biblioteki pluginów, dzięki którym będziemy mogli wzbogacić naszą aplikację o obsługę płatności, analitykę, SEO i wiele więcej.
Niemal wszystko, z wykorzystaniem Bubble bezproblemowo stworzymy klony takich serwisów jak: Twitter, Asana, Todoist, AirBnB, Trip Advisor lub Yelp. Edytor pozwala stworzyć w pełni funkcjonalną aplikację w ciągu nawet kilku dni! Dzięki temu nie będziemy musieli przepalać naszego budżetu na zewnętrzne software house, którym wdrożenie podobnych rozwiązań może zająć tygodnie pracy.
W tym kursie skupimy się na podstawach pracy z edytorem, tak aby korzystanie z niego stało się dla Ciebie naturalne. Wykorzystamy w praktyce zakładkę Design, która jest odpowiedzialna za front-end naszej strony oraz zapoznamy się z działaniem workflows, które "tchną życie" w nasz projekt. Efektem naszej pracy będzie nowoczesny landing page oraz w pełni funkcjonalna strona logowania/rejestracji. Dodatkowo zadbamy również o to, by całość była w pełni responsywna i dobrze prezentowała się zarówno na ekranach desktopowych, jak i urządzeniach mobilnych.
Jedną z zalet edytora Bubble jest to, że nie stanowi on hermetycznego środowiska, w którym jesteśmy skazani na korzystanie jedynie z rozwiązań zaprojektowanych przez jego twórców. To niesamowicie funkcjonalna platforma, którą w prosty sposób możemy połączyć również z zewnętrznymi usługami wykorzystując gotowe pluginy. Pokażę Ci w jaki sposób możemy zaimplementować do naszego projektu opcję logowania i rejestracji z wykorzystaniem Google, tak, aby użytkownik mógł utworzyć konto w naszym serwisie za pomocą jednego kliknięcia. A kolejnym bonusem będzie przesyłanie adresów e-mail z formularza zapisu na newsletter bezpośrednio do bazy w Airtable!
Ten kurs powstał z myślą o osobach, które chcą poznać edytor Bubble i nowy kierunek rozwoju aplikacji no-code. Będzie również doskonałym punktem startowym dla tych wszystkich, którzy nie posiadają żadnej wiedzy programistycznej ale nadal chcą tworzyć w pełni funkcjonalne serwisy i strony internetowe. Poziom kursu został dopasowany zarówno do osób, które do tej pory nie korzystały z Bubble, jak i tych, którzy posiadają już przynajmniej podstawowe doświadczenie w tym zakresie. Dzięki zdobytej w nim wiedzy będziesz mógł postawić pierwszy krok na drodze, która pozwoli Ci przekuć Twój pomysł w działający startup.
Cześć, Witam Cię w kolejnej, tym razem dosyć krótkiej lekcji, w której omówimy
sobie, co w zasadzie będziemy budować w ramach naszego kursu.
Otóż naszym celem będzie zaprojektowanie
dwóch stron dla fikcyjnej aplikacji o nazwie projecto.
Pierwsza z tych stron to landing page,
czyli strona indeksowa, a więc ta na której teraz jesteśmy.
Pokażę Ci jak odpowiednio rozmieszczać tutaj te treści, jak tworzyć sekcja
oraz jak definiować cały ten content, aby on dobrze prezentował się zarówno na
dużych ekranach desktopowych, jak i na małych ekranach telefonów komórkowych.
Możemy to nawet sprawdzić.
Wystarczy, że najadę gdziekolwiek tutaj na stronę kliknę prawy przycisk myszy
i wybiorę opcję zbadaj, jak widzisz zostałem przeniesiony
teraz tutaj do podglądu i za pomocą tego
suwaka będę mógł zmieniać tutaj szerokość okna przeglądarki.
Zerknij jak to wszystko tutaj teraz działa.
Jak widzisz, wszystko dostosowuje się automatycznie.
Wraz ze zmianą tutaj szerokości okna
przeglądarki nic nam się nie jest rozjeżdża.
A nasza strona wygląda po prostu dobrze, niezależnie od rozdzielczości.
Możemy tutaj teraz to zamknąć i wrócić do samej strony.
Pokażę Ci również jak dodawać takie efekty jak np.
tutaj właśnie zmiana koloru tekstu po najechaniu.
Tak samo zmiana tutaj kolorów obramowania i tekstu po najechaniu na przycisk.
Jak dodać opcje tutaj linkowania bezpośrednio do danej sekcji.
Jeżeli ja teraz kliknąbym tutaj features
to jak widzisz zostałem odpowiednio przeniesione do właściwej sekcji.
Kiedy nasza strona główna będzie już
gotowa, kolejnym krokiem będzie utworzenie strony logowania i rejestracji.
Aby do niej przejść, użytkownik będzie
musiał kliknąć jeden z tych dwóch przycisków, wybierzmy np.
Signup.
I jesteśmy już tutaj właśnie na stronie
rejestracji, którą również zaprojektujemy od podstaw.
Pokażę Ci jak stworzyć taki własny
custom'owy formularz, dzięki któremu będziemy mogli
zarejestrować użytkownika w naszej aplikacji.
Aby to zrobić, użytkownik będzie musiał tutaj podać swoje imię, nazwisko, adres
e-mail oraz password, a także dodatkowo pokaże Ci, w jaki sposób możemy uprościć
cały ten proces, czyli proces logowania i rejestracji.
Za pomocą podłączenia serwisu Google.
Wówczas wystarczy, że użytkownik będzie klikał
tylko w ten jeden guzik, a my go odpowiednio zalogujemy bądź zarejestrujemy.
A skoro już wiemy co będziemy budować,
to oczywiście możemy przystąpić do działania i widzimy się już za chwilę.