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 mocno teoretycznej lekcji
i postaram się, aby takich lekcji było jak najmniej, ponieważ doskonale zdaję sobie
sprawę z tego, że to nie jest to, co tygryski lubią najbardziej.
Niemniej jednak proszę zostań ze mną,
ponieważ chciałbym poruszyć tutaj kilka bardzo ważnych kwestii.
Więc przede wszystkim, aby rozpocząć naszą
przygodę z Bubble przechodzimy pod stronę Bubble.io widoczną tutaj w pasku adresu.
Ponieważ mamy tutaj kilka stron, chciałbym
je pokrótce omówić, abyś wiedział czego one dotyczą.
Strona features omawia funkcjonalności jakie są dostępne w samym edytorze.
Więc jeżeli już teraz jesteś ciekaw co
będziemy omawiać w ramach kursu, możesz zapoznać się tutaj z tymi materiałami.
Kolejna to strona pricing'u, czyli cennika korzystania z samego Bubble.
Tak, że mamy tutaj informacje o wszystkich
planach, jakie są dostępne w ramach edytora Bubble.
My będziemy wykorzystywać tylko i
wyłącznie plan free, dzięki czemu będziesz mógł odwzorować wszystkie funkcjonalności
bez ponoszenia żadnych dodatkowych kosztów za korzystanie właśnie z samego Bubble.
Jeżeli jesteś ciekaw czym różnią się te plany, wystarczy, że klikniemy tutaj ten
przycisk Compare plans i otrzymamy bardziej szczegółowe informacje.
Do omówienia takiego cennika wrócimy nieco później w jednych z kolejnych lekcji.
Natomiast na chwilę obecną chcę tylko,
żebyś pamiętał, że wykorzystujemy wyłącznie plan free.
Kolejna strona to strona showcase'u, czyli przykłady aplikacji stworzonych przez
innych użytkowników z wykorzystaniem Bubble.
Jest to niesamowicie przydatne miejsce, jeżeli szukasz
inspiracji do jakiegoś swojego kolejnego projektu lub po prostu chcesz sprawdzić
jak można wykorzystać Bubble i co w nim zbudować.
Kolejna strona to strona marketplace, czyli sklepu, gdzie będziesz mógł kupić
gotowe templatki, czyli szablony takich gotowych aplikacji, pluginy
lub nawet zatrudnić zewnętrzną agencję, która zbuduje dla Ciebie Twoją aplikację.
Jeżeli chciałbyś się zapoznać tutaj z tymi
templatkami, wystarczy, że zjedziemy niżej np.
na jedziemy na tą templatkę i wyświetlimy bardziej szczegółowe informacje.
Znajdujemy tutaj informacje właśnie o funkcjonalnościach, która taka
templatka zawiera oraz info o tym, pod jaki typ aplikacji została
przygotowana i co możemy za jej pomocą właśnie zbudować.
Aby wykorzystać taką templatkę w swoim edytorze,
wystarczy, że klikniesz tutaj w ten przycisk use template.
Jeżeli chcesz sprawdzić, jak wygląda taka
gotowa aplikacja stworzona za jej pomocą, klikamy przycisk preview.
Jak widzisz, jesteśmy już tutaj w samej
aplikacji, w tym przypadku stworzonej za pomocą templatki o nazwie tasky.
Pozamykajmy teraz te okna i przejdźmy do
omówienia kolejnej strony, czyli strony academy.
Znajdziesz tutaj przede wszystkim
materiały wideo omawiające jakieś poszczególne funkcjonalności Bubble.
Jeżeli jesteś ciekawy, to oczywiście
zapraszam Cię do tego, abyś się z nimi zapoznał.
Link manual będzie nas prowadził do dokumentacji.
Jest ona fantastycznie napisana, o czym wspominałem już wcześniej.
Ja bardzo często tutaj zaglądam, aby sprawdzić do czego służy dana
funkcjonalność i jak ją wykorzystać w swoim projekcie.
Mamy tutaj również dostęp do bootcamp'ów organizowanych przez samo Bubble.
Są one niestety dosyć drogie, ale jeżeli
chciałbyś zwiększyć swój skill w korzystaniu z Bubble, to oczywiście
zapraszam Cię do tego, abyś z nich skorzystał.
Natomiast tą sekcję radzę pominąć.
Są to takie interaktywne lekcje, które
będą Cię wprowadzać w podstawy korzystania z Bubble.
Tak, moim zdaniem są one bardzo ogólne i
radzą Ci raczej mgliste pojęcie o tym jak działa sam edytor.
Ja natomiast postaram się to wszystko
wyjaśnić właśnie w ramach samego kursu, abyś lepiej to zrozumiał.
Tu z kolei masz dostęp do bardzo ciekawych artykułów, które omawiają jak np.
zbudować właśnie klony takich aplikacji
jak Tinder, Zillow, Zendesk z wykorzystaniem właśnie samego Bubble.
Wchodźmy sobie na stronę główną i to co musimy zrobić teraz, aby rozpocząć
korzystanie z Bubble, to oczywiście kliknąć tutaj ten przycisk lub ten.
Wykorzystajmy ten.
Wszystko nam się tutaj jak widzisz, rozjechało.
Spróbujmy odświeżyć stronę i może wykorzystać jednak ten.
Od teraz wygląda to dużo lepiej.
Możesz podać swój adres e-mail oraz hasło,
aby założyć nowe konto lub wykorzystać do tego Twoje konto Google.
Ja wykorzystam właśnie tą opcję.
Klikam tylko tutaj.
I musimy chwilkę poczekać aby przejść do samego dashboard'u.
Jak widzisz mamy tutaj odnośniki do lekcji, dokumentacji, bootcamp'ów, a więc to co
przewijaliśmy tutaj właśnie po stronie academy.
Dodatkowo mamy tutaj jeszcze link do samego community skupionego wokół Bubble.
Natomiast nas będzie interesować ten
guzik, który służy do stworzenia nowej aplikacji.
Ale tym zajmiemy się już w lekcji kolejnej.