Spis treści[Ukryć][Pokazać]
- Co to jest Bubble.io?
- Co to jest programowanie wizualne?
- Jakie typy aplikacji możesz tworzyć?
Tworzenie aplikacji za pomocą Bubble (samouczek)+-
- 1. Pierwsze kroki
- 2. Konfiguracja bazy danych
- 3. Budowanie przepływów pracy
- 4. Tworzenie historii wiadomości
- 5. Wyświetlanie treści dynamicznych w kanale
- 6. Przesyłanie danych między stronami
- 7. Wyświetlanie dynamicznej zawartości na stronie opowieści
- 8. Wyświetlanie artykułu wydawcy
- 9. Śledzenie wydawców
- 10. Dodatkowe funkcje, które możesz dodać
- 11. Wynik
- ZALETY
- Wady
- Cennik
- Wnioski
Ostatnio interesowałem się podejściami do tworzenia stron internetowych innymi niż HTML, CSS i JavaScript.
Wraz z rosnącym krajobrazem braku kodu nie było zaskoczeniem odkrycie, że istnieje kilka alternatyw dla bardziej standardowych podejść do tworzenia aplikacji internetowych.
Musisz znać niektóre z bardziej znanych platform CMS, takich jak WordPress, które są prawie wolne od kodu. Ale jeśli chcesz tworzyć aplikacje internetowe, takie platformy mogą wydawać się restrykcyjne.
Tutaj przedstawiam wam Bubble.io, potężny narzędzie bez kodu która pozwala tworzyć aplikacje internetowe jak nigdy dotąd.
Przyjrzyjmy się temu dogłębnie!
Co to jest Bubble.io?
Bubble to nietechniczna platforma, która łączy w sobie wizualny język programowania i framework do tworzenia stron internetowych.
Użytkownicy mogą używać tych narzędzi programistycznych do konstruowania unikalnych aplikacji online, modyfikowania baz danych i procesów, dodawania składników strony (obrazów, tekstu, formularzy wejściowych, map) oraz projektowania interfejsów.
To rynek, na którym możesz odkryć idealne szablony, wtyczki i usługi, które pomogą Ci w tworzeniu silnych produktów.
Bez konieczności tworzenia typowego frameworka programistycznego, za pomocą Bubble możesz stworzyć wszystko, od marketplace przez sieć społecznościową po CRM (Customer Relationship Management).
Daje klientom możliwość tworzenia i personalizowania swoich aplikacji za pomocą przyjaznego dla użytkownika interfejsu i edytora typu „wskaż i kliknij”.
Można go używać w połączeniu z usługami udostępniającymi interfejs API REST, takimi jak Facebook, SQL, aplikacje analityczne i płatnicze. Pozwala użytkownikom poświęcić czas na poprawę funkcjonalności i wyglądu swoich aplikacji tak, aby dobrze prezentowały się na tabletach i urządzeniach mobilnych.
Jest odpowiedni dla wszystkich rozmiarów firm, od małych do średnich i dużych; i dostępne dla systemów Windows, Mac i Internetu.
Co to jest programowanie wizualne?
Programowanie wizualne jest zasadniczo takie, jak brzmi. Zamiast ręcznie programować przez pisanie kodu, robisz to graficznie, klikając i przeciągając komponenty na strony.
Nie daj się zwieść temu krótkiemu opisowi.
To nie jest jak żadna inna aplikacja do wycinania ciasteczek lub narzędzie do tworzenia stron internetowych, na które natknąłeś się w Internecie. Większość twórców aplikacji wymaga polegania na podstawowych szablonach i ma bardzo ograniczoną funkcjonalność; pozwalają tylko tworzyć określone rodzaje aplikacji i ograniczają personalizację.
Chociaż pojęcie „programowania wizualnego” oraz „przeciągania i upuszczania” wydaje się łatwe w Bubble, jest niezwykle potężne.
Jego wizualne środowisko programistyczne nie tylko umożliwia przeciąganie obiektów, takich jak tekst, grafika, dane wejściowe i inne, na stronę, ale także umożliwia skonfigurowanie działania tych elementów.
Co robi Bańka?
Głównym celem Bubble jest umożliwienie każdemu tworzenia aplikacji internetowych bez konieczności pisania kodu.
Jednak, chociaż zapewnia to łatwe do zapamiętania określenie celu, pomija znaczną część opowieści. Droga od pomysłu do rynku jest bardziej skomplikowana niż samo tworzenie linii kodu.
W przypadku programowania konwencjonalnego wymagany jest zespół wysoko wykwalifikowanych specjalistów pracujących nad niektórymi sekcjami tworzenia, rozwoju i konserwacji aplikacji. Rozważ to.
Czego wymaga każda aplikacja?
- Bezpieczeństwo zapewniające, że nikt nie ma nieuprawnionego dostępu do danych.
- Baza danych do przechowywania i wyszukiwania informacji, takich jak przedmioty, artykuły i aktualizacje mediów społecznościowych.
- Skalowalność umożliwiająca nieskrępowany rozwój bazy użytkowników i wolumenu danych.
- Przyjemny interfejs użytkownika, dzięki któremu aplikacja jest atrakcyjna i łatwa w użyciu.
- Integracja z różnymi usługami i systemami.
Bubble zastępuje znacznie więcej niż koder. Zapewnia wszystkie te usługi w atrakcyjny wizualnie i wysoce zautomatyzowany sposób, dzięki czemu można sobie wyobrazić, jeśli nie jest to proste, aby jedna osoba mogła zajmować się wszystkim.
Podczas gdy poprzednie platformy bez kodu próbowały zastąpić kodowanie na różne sposoby. Jego koncepcja polega na usunięciu jak największej liczby barier, aby aplikacja mogła dotrzeć na rynek, obsługując wszystko, od responsywnego projektowania i animacji po hosting, wdrażanie wersji, zabezpieczenia i operacje na bazach danych.
Używanie łącznika API do łączenia Bubble z innymi usługami
Jego API Connector jest prawdopodobnie najważniejszą wtyczką na rynku. Jak sama nazwa wskazuje, umożliwia to łączenie się z innymi aplikacjami i usługami w celu udostępniania działań i danych.
Zamiast zagłębiać się w szczegóły techniczne tego, jak to działa, rozważ poniższe przykłady tego, co mogą osiągnąć interfejsy API:
- Uzyskanie dostępu do uczenie maszynowe metody, takie jak rozpoznawanie i tłumaczenie obrazu.
- Uzyskaj najnowsze informacje o pogodzie z dowolnego miejsca na ziemi.
- Gdy zdarzenie jest wyzwalane w Bubble, informacje są wymieniane między systemami, na przykład ustanawianie potencjalnego klienta w Twoim CRM lub spotkanie w Kalendarzu Google.
- Zarezerwuj lot lub pobyt w hotelu w dowolnym miejscu na świecie.
- Uzyskaj numer telefonu, lokalizację, zdjęcia, logo i recenzje dowolnej firmy w Mapach Google.
Używanie wtyczek do ulepszania natywnych funkcji
Technicznie łączy moduły kodu JavaScript, CSS i HTML w funkcjonalny węzeł. Aplikacja napisana w JS.JSON służy jako podstawa własnego języka.
Chociaż nie musisz w pełni rozumieć tej terminologii, aby tworzyć aplikacje, wskazują one jeden kluczowy fakt: jest zgodny ze znanymi i uznanymi standardami sieciowymi, umożliwiając programistom znaczne ulepszenie swojej natywnej funkcjonalności.
Widać to już na stronie wtyczek, gdzie dostępne są setki darmowych i płatnych rozszerzeń podstawowej funkcjonalności. Oznacza to również, że jeśli dojdziesz do punktu, w którym jego podstawowe możliwości są niewystarczające, będzie wielu ekspertów JavaScript, którzy zaproponują Ci rozwiązanie na zamówienie.
Jakie typy aplikacji możesz tworzyć?
Możesz stworzyć szeroką gamę aplikacji, niektóre z nich są podane poniżej.
- Aplikacje dla wyspecjalizowanych rynków ze społecznością.
- Aplikacje na ogłoszenia o pracę w różnych sektorach.
- Oprogramowanie dla personelu szpitalnego.
- Oprogramowanie POS dla sklepów fizycznych.
- Oprogramowanie gabinetu dentystycznego z białą etykietą.
- Oprogramowanie do osobistej inwentaryzacji firm i obsługi klienta.
- Aplikacje do agregacji nieruchomości dla brokerów i klientów.
- Aplikacje na imprezy i kursy na rynku (a nawet łodzie).
- Certyfikaty zawodowe wymagają wewnętrznych aplikacji testowych.
- Wnioski o udzielenie pierwszej pomocy.
- Oprogramowanie do zarządzania pracownikami do użytku wewnętrznego.
Szczerze mówiąc, platforma nie jest przeznaczona do wszystkiego. Może to nie być idealny wybór, jeśli projektujesz aplikację do gier ze złożoną grafiką i ruchem. Poza tym, jeśli tworzysz natywną aplikację (jedną dla sklepów z aplikacjami), musisz zintegrować ją z inną usługą innej firmy.
Kluczowe cechy
Bubble jest pełen funkcji. Nie będziemy w stanie omówić ich wszystkich tutaj, ale postaramy się omówić najważniejsze.
1. Wtyczki
Pozwala na włączenie funkcjonalności z wielu narzędzi w Internecie do Twojego Aplikacja internetowa. Na przykład, jeśli chcesz, aby Twoi użytkownicy logowali się za pomocą swojego konta na Facebooku, możesz to zrobić za pomocą wtyczki Facebook.
2. Rozwijaj się
Pozwala na konstruowanie dynamicznych, wielu użytkowników aplikacji dla przeglądarek stacjonarnych i mobilnych, a także wszystkich narzędzi wymaganych do zbudowania strony podobnej do Instagrama czy Airbnb.
3. projekt
Możesz tworzyć układy dostosowane do urządzeń mobilnych i dynamiczną zawartość, aby nadać produktowi ostateczny szlif, który z przyjemnością pokażesz innym.
4. Hosting
Nigdy więcej nie musisz się martwić o utrzymanie serwera, infrastrukturę lub operacje.
Dba o wdrożenie i hosting w bezpieczny sposób. Liczba użytkowników, natężenie ruchu i przechowywanie danych są nieograniczone.
Tworzenie aplikacji za pomocą Bubble (samouczek)
Przejdźmy teraz do działania i dowiedzmy się, jak zbudować aplikację z wiadomościami w Bubble.
1. Pierwsze kroki
Aby rozpocząć, musisz najpierw załóż darmowe konto na Bubble.
Zaczniemy od użycia narzędzia do projektowania wizualnego Bubble, aby ukształtować naszą platformę UI. Niektóre z kluczowych stron, które należy uwzględnić, podano poniżej:
- Strona przesyłania — witryna, w której wydawcy będą opracowywać i rozpowszechniać artykuły.
- Strona główna — wyświetlana jest lista ostatnio opublikowanych artykułów.
- Strona narracyjna — strona, na której można znaleźć każdą unikalną historię.
- Strona wydawcy — strona wyświetlająca listę opowieści określonego wydawcy.
2. Konfiguracja bazy danych
Po rozplanowaniu wyświetlacza produktu możesz skupić się na tworzeniu pól danych, które będą napędzać Twoją aplikację. Użyjemy tych pól, aby połączyć przepływy pracy leżące u podstaw Twojego produktu.
W tym przykładzie ustalimy dwa różne typy danych dla każdej wiadomości. Jeden typ danych będzie zawierał podstawowe fakty dotyczące historii (takie jak tytuł, polecane zdjęcie i wydawca), podczas gdy drugi typ danych będzie zawierał większe pliki treści, takie jak cała narracja.
Definiując je jako dyskretne typy danych, możemy ładować tylko te informacje, które są wymagane, gdy jest to wymagane, ograniczając ilość materiału, który będzie musiał wyprodukować edytor Bubble.
Zostaną utworzone następujące typy danych i pola:
Typ danych: Użytkownik
Pola:
- Imię
- Następujący wydawcy to lista wydawców. Ważna uwaga: utworzenie pola jako listy opartej na odrębnym typie danych umożliwia bezproblemowe włączenie wszystkich jego podstawowych pól danych bez konieczności tworzenia dodatkowych pól.
Typ danych: Historia
Pola:
- Tytuł
- Przedstawiony obraz
- Pisarz
- Kategoria
- wydawca
- Treść historii
Typ danych: Treść historii
Pola:
- Treść historii
Typ danych: wydawca
Pola:
- Imię
- logo
- Obserwuje
3. Budowanie przepływów pracy
Teraz, gdy masz już uporządkowany projekt i bazę danych aplikacji, nadszedł czas, aby zacząć składać wszystko razem i sprawić, by działały.
Przepływy pracy są podstawową metodą osiągnięcia tego w Bubble.
Każdy przepływ pracy ma miejsce, gdy wystąpi zdarzenie (np. użytkownik kliknie przycisk), a następnie w odpowiedzi wykonuje sekwencję „działań” (np. „zarejestruj użytkownika”, „wprowadź zmianę w bazie danych” itd.) .
4. Tworzenie historii wiadomości
Pierwszą oferowaną przez nas funkcją jest narzędzie umożliwiające wydawcom pisanie i publikowanie wiadomości w witrynie.
Na stronie przesyłania zaczniemy od włączenia wielu elementów wejściowych, które zostaną zastosowane do wprowadzania danych do naszej bazy danych. Przykładami tych pól są wpisy tekstowe, narzędzie do przesyłania zdjęć i menu rozwijane.
Musimy również dostosować menu rozwijane wydawcy, aby wyświetlało listę opcji dynamicznych. Ponieważ każdy nowy artykuł zostanie dodany do listy wszystkich artykułów wydawcy, musimy wybrać istniejącego wydawcę z naszej bazy danych.
Podczas ustawiania tego menu rozwijanego wybierzemy typ opcji dla wydawcy.
Następnie nasze źródło danych przeskanuje naszą bazę danych i zwróci listę wszystkich aktualnych publikacji. Na koniec zmienimy podpis źródła, aby zawierał nazwę wydawcy.
Gdy pisarz wprowadzi niezbędne informacje do każdego wpisu na stronie, kliknie przycisk publikowania, aby wygenerować nową opowieść.
Następnie w bazie danych utworzysz nową rzecz z typem danych ustawionym na narrację.
Następnie będziemy musieli rozpocząć wypełnianie naszej bazy danych niezbędnymi polami. Połącz każdy ze składników wejściowych na stronie z odpowiednimi kolumnami bazy danych.
Najpierw stworzymy rodzaj zawartości opowieści, która ostatecznie zostanie połączona z samą opowieścią.
Następnie dodamy kolejny etap do tej procedury, generując coś innego – tym razem samą opowieść.
Możliwe jest bezproblemowe zintegrowanie tych danych na całej platformie, integrując pierwszy materiał narracyjny, który opracowaliśmy z tą opowieścią.
Nowa opowieść będzie tworzona za każdym razem, gdy ta procedura jest aktywowana.
5. Wyświetlanie treści dynamicznych w kanale
Gdy wydawcy zaczną przesyłać materiały do Twojej aplikacji mobilnej, będziemy musieli zacząć tworzyć logikę na Twojej stronie głównej, która wyświetla każdy artykuł jako listę dynamiczną. Można to osiągnąć za pomocą naszego powtarzającego się elementu grupy.
Powtarzające się grupy pracują z Twoją bazą danych, aby zaprezentować i odświeżyć listę materiałów dynamicznych.
Stosując powtarzającą się grupę, musisz najpierw połączyć element z typem danych w Twojej bazie danych.
W tym przypadku zaklasyfikujesz rodzaj materiału jako opowieści. Musisz również podać źródło danych w postaci listy wszystkich tabel w Twojej bazie danych.
Uporządkujemy również tę cykliczną grupę według daty rozpoczęcia każdej historii, pokazując listę w odwrotnej kolejności chronologicznej. Możesz teraz rozpocząć organizowanie materiału dynamicznego, który pojawi się w każdej siatce.
Po prostu wypełnij górny wiersz odpowiednim materiałem, który chcesz wyświetlić, a ten potężny element wypełni pozostałe kolumny danymi z Twojej aktualnej bazy danych.
6. Przesyłanie danych między stronami
Możliwe jest również konstruowanie zdarzeń w każdym wierszu powtarzającej się grupy. Przy opracowywaniu funkcji nawigacyjnych dla Twojej platformy ta funkcjonalność przyda się.
Strona główna naszej aplikacji z wiadomościami zawiera jedynie podgląd każdego artykułu, w tym wydawcę, wyróżniony obraz i tytuł artykułu.
Jednak nie wyświetla całej treści artykułu, dopóki użytkownik nie kliknie na stronę z artykułem. Użyjemy naszego edytora przepływu pracy do przesyłania danych między stronami w celu wyświetlenia tego materiału.
Aby rozpocząć, utwórz proces, który wysyła użytkownika do strony narracji po kliknięciu obrazu narracji.
Użyj zdarzenia nawigacyjnego, aby przenieść użytkownika na inną stronę podczas opracowywania tego procesu.
Wybierz typ strony docelowej, która ma być stroną narracyjną z menu rozwijanego. Następnie musisz podać dalsze informacje na tej stronie, aby edytor Bubble zrozumiał, którą unikalną opowieść ma pokazać.
Informacje, które musisz podać, pochodzą z aktualnej opowieści o komórkach.
7. Wyświetlanie dynamicznej zawartości na stronie opowieści
Możesz łatwo pobrać te dane o wydarzeniu i pokazać odpowiedni materiał z narracji, gdy użytkownik zostanie wysłany na określoną stronę opowieści.
Aby utworzyć tę funkcję, musisz najpierw sprawdzić, czy typ strony docelowej jest zgodny z właściwością danych dostarczaną w ramach przepływu pracy. W takiej sytuacji należy powiązać stronę narracji z właściwością narracji.
Może po prostu pobierać i dostarczać odpowiednie dane z istniejących źródeł, kategoryzując rodzaj treści na stronie.
Możesz teraz rozpocząć wstawianie materiału dynamicznego do pól, które wyświetlają informacje z jednej tabeli.
8. Wyświetlanie artykułu wydawcy
Po przeczytaniu wiadomości użytkownik może przejrzeć cały katalog artykułów wydawcy. Jeśli opracowałeś typ danych wydawcy, utworzenie osobnej strony dla wydawców jest tak proste, jak utworzenie naszej oryginalnej strony głównej.
Na tej stronie musimy zacząć od ustawienia typu strony na wydawca.
Następnie skopiuj powtarzającą się grupę ze strony głównej i edytuj ustawienia.
W takim przypadku źródło danych naszej powtarzalnej grupy będzie szukać wszystkich istniejących artykułów, których wydawcą jest obecny wydawca strony.
9. Śledzenie wydawców
Trzecią podstawową funkcją, którą zbudujemy dla naszego MVP, jest możliwość śledzenia wydawcy na platformie. Dodamy przycisk obserwowania na stronie wydawcy. Kiedy klikniemy tę ikonę, uruchomimy nowy proces, który modyfikuje rzecz.
Dodanie aktualnego wydawcy strony do listy kolejnych publikacji spowoduje zmianę bieżącego użytkownika.
Następnie musimy zaktualizować listę obserwatorów aktualnego wydawcy strony, dodając bieżącego użytkownika.
10. Dodatkowe funkcje, które możesz dodać
Teraz, gdy już wiesz, jak tworzyć niestandardowe pola danych i prezentować dynamiczne informacje, możesz wykazać się kreatywnością, korzystając ze środowisk, które tworzysz dla swojego produktu. Możesz również uwzględnić:
- Utwórz funkcję, która umożliwia użytkownikom zapisywanie treści do późniejszego przeczytania.
- Na dole każdego kawałka podaj cykliczną kolekcję sugerowanych artykułów.
- Utwórz narzędzie wyszukiwania, aby pomóc ludziom znaleźć nowe treści w witrynie.
11. Wynik
Twoja ostateczna aplikacja będzie wyglądać mniej więcej tak.
ZALETY
- Możliwość łączenia się z wieloma API i wtyczkami.
- Łatwa w użyciu aplikacja bez kodu.
- Skorzystają na tym osoby bez doświadczenia w programowaniu.
- Narzędzia projektowe, które są zarówno wszechstronne, jak i potężne.
- Szybkie przetwarzanie zapytań.
Wady
- Zwiększona niezawodność.
- Szybkość przetwarzania danych jest niska.
- Wydajność jest ograniczona.
Cennik
Bezpłatny abonament pozwala poznać platformę i rozwijać swoją aplikację.
Płatne subskrypcje obejmują dodatki, takie jak white-labeling, niestandardowa domena, dostęp do Bubble API i zarezerwowana pojemność serwera, które są wymienione poniżej.
- Osobiste – 25 USD/miesiąc (płatne rocznie) lub 29 USD/miesiąc (płatne miesięcznie).
- Professional – 115 USD/miesiąc (płatność roczna) lub 129 USD/miesiąc (płatność miesięczna).
- Produkcja – 475 USD/miesiąc (płatne rocznie) lub 529 USD/miesiąc (płatne miesięcznie).
Zacznij korzystać z Bubble za darmo
Wnioski
Bubble to doskonała alternatywa dla tworzenia aplikacji internetowych, które mogą wyświetlać tylko informacje lub mają minimalny interfejs użytkownika.
Jest dość prosty w użyciu, a samouczki dostarczone przez Bubble są niezwykle pomocne. Jego edytor wizualny online, który umożliwia projektowanie aplikacji internetowych w oparciu o Twoje preferencje.
A najlepsze jest to, że nie potrzebujesz żadnego doświadczenia ani wiedzy programistycznej. Bubble jest odpowiedni dla każdego, niezależnie od tego, czy umiesz kodować, czy nie.
Jednak wcześniejsze zrozumienie języków frontendowych może dać ci przewagę, ponieważ pozwala szybko dowiedzieć się, co robi w zakresie obsługi zdarzeń.
Więc co myślisz o możliwościach Bubble?
Daj nam znać w komentarzach!
Arbehi
Czy za pomocą narzędzia bubble.io można stworzyć sklep do sprzedaży produktów?