Strony WWW bez Kodowania: Integracje z usługami
Dzięki narzędziom no-code
8 godz. 15 min · Make · Biznes i Automatyzacje
Grzegorz RógIdea ArchitectCzego się nauczysz
- Opanujesz proste edytory stron
- Najważniejsze narzędzia no-code
- Szereg praktycznych scenariuszy stron
- Publikowanie pod własną domeną
- Zaawansowane automatyzacje
- I wiele więcej!
Jak działają Web Buildery?
W kursie dowiesz się, czym jest no-code i jak działają proste rozwiązania do tworzenia stron WWW w oparciu o tą technologię. Wyjaśnię Ci, jakie możliwości są teraz dostępne i które z web builderów warto rozważyć przy tworzeniu kolejnego projektu. Będziesz tworzyć strony głównie z użyciem wizualnych edytorów, co nie wymaga znajomości kodowania na start i umożliwi Ci przygotowanie landing page'a promocyjnego, portfolio, wizytówki, prostego MVP i wiele więcej!
Praca z edytorem Carrd
Na przykładzie prostego edytora, jakim jest Carrd, pokażę Ci jak w praktyce przygotować prosty landing page dla pierwszej wersji produktu, do sprzedaży e-booka czy dowolnych innych zastosowań. Carrd jest niezwykle przyjazny i nawet osoby, które wcześniej nie miały żadnej styczności z tworzeniem stron WWW będą w stanie opublikować swoje pierwsze witryny! Ma też szereg przydatnych opcji, które pozwolą nam wyjaśnić kluczowe pojęcia no-code i tworzenia stron w ogóle, bez wchodzenia w szczegóły techniczne i koncentrowania się na wyglądzie. To właśnie z tego powodu wybrałem Carrd, ale Ty możesz też skorzystać z dowolnego innego edytora jak Wix czy Squarespace.
Integracje strony WWW
Kolejna sekcja nauczy Cię wdrażać na stronę liczne integracje i rozbudowywać jej funkcje. Dowiesz się między innymi jak podpiąć na stronę analitykę np. z pomocą Google Analytics, wykorzystać gotowe Widgety, zadbać o optymalizację pod kątem SEO czy dołożyć kolejne, własne skrypty. To wszystko bez napisania ani jednej linii kodu!
Najważniejsze narzędzia No-Code
W tej sekcji omówimy szczegółowo najważniejsze narzędzia, które wykorzystują technologie no-code i pozwalają nam rozszerzyć możliwości stron WWW tworzonych w ten sposób. Dzięki ich wykorzystaniu będziemy mogli rozszerzyć naszą stronę o "bazę danych", wykorzystując Airtable, bez konieczności korzystania z jakichkolwiek technologii serwerowych. Narzędzia takie jak Zapier czy Integromat dadzą nam z kolei możliwość rozbudowania naszej witryny o niezliczone funkcjonalności, takie jak podłączenie list mailowych, ankiet, płatności i wiele, wiele więcej!
Scenariusze Konkretnych Zastosowań
Ten rozdział uświadomi Ci prawdziwą potęgę narzędzi i technologii no-code, ponieważ przygotowałem dla Ciebie szereg praktycznych scenariuszy, które bez kodowania pozwalają wdrożyć najbardziej popularne rozwiązania biznesowe i uruchomić je w połączeniu ze stroną WWW. Przygotujemy scenariusze między innymi dla Landing Page'a sprzedającego produkt, gdzie zapiszemy dane klienta, wyślemy stosowne maile a nawet udostępnimy nasz produkt; będziemy też pracować nad prostą stroną do generowania leadów, na przykład umożliwiającą pobranie PDF czy produktu w zamian za email; pokażę Ci także, jak wykonać stronę usługową, gdzie klienci mogą zlecać Ci rozmaite prace; Przygotujemy także rozbudowany scenariusz pod Marketplace czy Job Board, wykorzystujący bardziej złożone automatyzacje. Wykorzystamy do tego mnóstwo dodatkowych, ciekawych narzędzi i technik No-code!
Dla kogo jest ten kurs?
Kurs przeznaczony jest dla osób, które chcą tworzyć strony w nowym podejściu, bez kodowania. Skorzystają z niego zwłaszcza osoby, które chcą uruchomić swój projekt w sieci, stworzyć MVP produktu czy aplikacji, ale niekoniecznie same programują lub mają zasoby i czas na przygotowanie projektu przez programistów. Ponadto z kursu skorzystają ci z Was, którzy tworzą strony, np. w WordPress i chcą zobaczyć, jak można przyspieszyć sobie pracę a nawet front-endowcy, którzy usprawnią wiele procesów z pomocą automatyzacji.
W tej lekcji chciałbym przybliżyć ideę integracji i tego, jak z pomocą integracji
można wyposażyć naszą stronę stworzoną bez kodu w supermoce.
Przede wszystkim zastanówmy się nad tym, jakie są potrzeby współczesnych stron, bo
okazuje się, że strona, która jest pod jakimś adresem
obecnie to jest jedynie element jakiejś ogromnej machiny i całej infrastruktury,
która jest dookoła, która pozwala robić rozmaite rzeczy.
Nawet najprostsze strony obecnie spełniają jakieś konkretny cel.
Jeśli mamy wizytówkę firmy usługowej w
internecie, to ona jest po to, żeby zbierać jakichś klientów, czyli żeby mogli
wypełnić przykładowo formularz, zapytać o cenę no i później coś z takim formularzem
musi się staćon musi zostać przetworzony,
wysłany do nas, ktoś musi się zająć odpowiedzią na takiego maila.
Być może będziemy potrzebowali jakiegoś
systemu CRM, do którego ci klienci będą wpadać tak, żebyśmy mogli oznaczyć np.
tych, do których wysłaliśmy jakiś follow up czy wysłaliśmy jakąś ofertę.
Więc zawsze jest coś głębiej.
Następnie zmiana danych na tej stronie.
Jeśli zmieni się w takiej wizytówce numer telefonu, to jak to zrobić?
Więc musimy zapiąć do tego jakiś system CMS np.
WordPress albo umożliwić naszemu klientowi
czy nam jakieś proste podmiany treści, czy podmianę rzeczy na tej stronie.
Jeżeli mamy stronę produktową, która przykładowo w zamian za adres email daje
nam przykładowy rozdział ebooka albo jakiś sampel produktu,
to nawet tak prosty landing page do zbierania lead'ów musi pod spodem mieć
jakiś mechanizm obsługi tych zebranych lead'ów.
Czyli gdzieś się te maile muszą zapisywać, w jakąś sekwencję muszą trafiać.
No i to jest jakby częścią tej całej maszyny.
Tak samo strony, które coś sprzedają.
Oczywiście musi tam być koszyk, muszą obsługiwać zakupy produktów czy nawet
zakupy usług subskrypcyjnych i wtedy musimy obsłużyć powiadomienia, czyli tzw.
maile transakcyjne.
Jeżeli ktoś dokona zakupu, to przecież takiej osobie musimy wysłać maila z
potwierdzeniem, że się udało, a jak się nie uda, to że się nie udało itd.
Musimy też tę strony pospinać
z różnymi usługami, które dadzą nam dostęp do rozmaitych danych o naszych użytkownikach.
Czyli musimy spiąć analitykę, musimy powpinać sobie różne pixele, które będą
sprawdzały, czy reklamy, które przykładowo robimy w social media są skuteczne.
Czyli na naszej stronie musi być pixel,
który śledzi, czy ktoś np. coś kupił, a w razie potrzeby jest w stanie powiązać to z
reklamą, którą puściliśmy na Facebooku po to, żebyśmy wiedzieli jaka jest konwersja
z tej reklamy i czy w ogóle opłaca nam się inwestować.
To do czego zmierzam, to wyjaśnienie Ci,
że strona to tak naprawdę wierzchołek góry lodowej i jedynie niewielki procent tego,
co musimy zrobić w kontekście całej infrastruktury do prowadzenia
współczesnego biznesu online, czyli tego, żeby ta strona w ogóle miała sens.
I dzięki temu, że my korzystamy z narzędzi no-code
do generowania tych stron, to możemy je robić w rekordowym czasie.
I to dobrze, bo możemy szybko iterować.
Możemy robić A/B testy, możemy tworzyć takie landing page, które po
prostu lepiej konwertują, są lepiej dopasowane do klientów.
I to właśnie o to tutaj chodzi.
Ale pamiętajmy o tym, że tak naprawdę łatwość tworzenia stron w tym momencie
pomaga nam w iterowaniu , ale nie zastąpi i nie pomoże nam w tym, żeby zbudować sobie
całą infrastrukturę tego współczesnego biznesu online.
Na szczęście to, o czym rozmawiamy w tej
lekcji, czyli integracje, pozwalają nam to zrobić bez kodowania.
No bo w zasadzie istnieją dwie drogi do stworzenia takiego złożonego systemu.
Czyli możemy to wszystko napisać sami.
No przecież możemy zatrudnić programistów albo sami nauczyć się programować
i napisać wszystkie te rozwiązania samodzielnie.
Przykładowo zbierać lead'y
do jakiejś bazy MySQL'owej czy SQL'owej, przetwarzać wszystkie maile z pomocą
języka serwerowego, wysyłacie samodzielnie itd, itd.
No i jeszcze do niedawna musieliśmy to tak robić.
Musieliśmy zatrudnić sztab osób, stracić mnóstwo czasu i pieniędzy na to, żeby
wytworzyć taki swój custom'owy system, a dopiero później testowaliśmy go na rynku.
Natomiast z pomocą narzędzi no-code możemy odwrócić ten proces.
Nie musimy płacić i poświęcać mnóstwo
czasu na stworzenie czegoś, co dopiero chcemy przetestować.
I to głównie tej idei przyświeca to, co chcę zrobić.
Albo temu, że tworzymy wokół naszego biznesu jakieś różne rzeczy.
Przykładowo sprzedajemy jakieś dodatkowe produkty, tworzymy kampanie reklamowe.
Wtedy nie musimy poświęcać mnóstwa czasu na to,
żeby sztab programistów mógł ogarnąć wszystko dla nas customowe.
Możemy użyć narzędzi no-code i właśnie
integracji po to, żeby takie rzeczy zrobić.
Więc czym te integracje są?
Otóż chodzi tutaj o wykorzystanie gotowych
narzędzi, które istnieją na rynku do tego, żeby obsługiwało nam takie różne elementy
procesu naszej strony, czyli posklejać to wszystko do kupy z
pomocą jakiś TED Party tools, czyli narzędzi, które właśnie już istnieją.
I to nie jest absolutnie jakaś nowa idea,
ponieważ to do niektórych rzeczy my już mamy tą świadomość, że powinniśmy użyć
innych narzędzi, powinniśmy użyć integracji.
No przykładowo
nie będziesz sam pisał programu, jakiegoś fakturowego czy do obsługi księgowości.
No bo lepiej zatrudnić firmę księgową albo
kupić od jakiegoś Comarch'a czy Insert'a czy czegoś innego.
Po prostu gotowy system, gdzie wklepujesz
dane faktur i ono jakoś wypluwa rozliczenia itd.
w związku z tym, godzimy się na to, że no np.
ta część nie musi być napisana przez naszych programistów.
Godzimy się na to, że jakiś system CRM sami go nie napiszemy.
To jest ogromna sprawa, gdzieś wprowadzanie danych klientów itd, itd.
Więc co do pewnych rzeczy zgadzamy się, że i tak używamy jakiś zewnętrzny narzędzi.
Natomiast istnieje mnóstwo rzeczy, co do
których nie mamy takiej świadomości, że powinniśmy użyć zewnętrznych narzędzi.
Ba, my nawet nie zdajemy sobie sprawy, że może istnieć narzędzie, które pozwala nam
zintegrować się z nim i zastąpi coś na stronie internetowej, np.
proces logowania. Nie zdajemy sobie sprawy z tego, że gdzieś
tam użytkownicy mogą być w ogóle poza naszym systemem, poza naszą bazą danych.
Tymczasem jest to możliwe.
Proces wysyłania jakiś maili,
samouczków, maili on boarding'owych też nam się wydaje, że to przecież nasz system
powinien to robić, ale w zasadzie nie musi.
Że rozmaite notyfikacje, wszystkie formularze możemy
zdjąć z naszej strony i skorzystać z jakiegoś zewnętrznego rozwiązania.
Ponieważ formularze są trudną częścią,
trzeba gdzieś te dane zapisać, trzeba zależności od nich, coś tam wysłać itd.
Więc możemy to wszystko
zrobić z wykorzystaniem jakiegoś innego narzędzia, takiego jak program księgowy do
księgowości i po prostu pospinać wszystkie rzeczy, na których nam zależy.
I dopiero wtedy, kiedy będziemy mieli taki mindset i będziemy mieli pointegrowane
różne narzędzia, ale one w jakiś sposób przestaną nam wystarczać, bo nie będą w
stanie obsłużyć naszego ruchu, nie będą dość customowe, to wtedy się zastanawiamy
nad tym, żeby zatrudnić programistów, napisać swoje własne rozwiązanie, ale
wtedy prawdopodobnie już biznesowo staje się to dla nas opłacalne.
No dobrze, ale skąd w ogóle te narzędzia
wziąć i jak je połączyć z naszą stroną, którą przygotujemy bez kodu?
Tutaj słowem klucz jest API, czyli Application Programming Interface, czyli
coś, co nam pozwala podpiąć się do takiego narzędzia i korzystać z jego możliwości.
Natomiast narzędzia są bardzo mocno
wyspecjalizowane i robią jedną rzecz świetnie.
Przykładowo obsługują świetnie formularze
albo świetnie obsługują logowanie, rejestrację, notyfikacje dla użytkowników,
albo on boarding, albo jeszcze cokolwiek innego, co potrzebujemy.
Ostatnio trendem jest, że te narzędzia
wystawiają taki interfejs, czyli wystawiają w zasadzie możliwość wpięcia
się do nich przez API i wysyłania odpowiednich poleceń po to, żeby móc z
tego narzędzia wydobyć to, co ono potrafi zrobić.
Weźmy na przykład MailChimp'a.
Jeżeli chcielibyśmy, aby MailChimp obsługiwał
naszą listę mailową, to możemy zrobić to w prosty sposób, np.
korzystając z tych landing page'y MailChimp'a i wtedy automatycznie to jest z tą
listą połączone, ale jednocześnie jest to rozwiązanie bardzo nas limitujące.
Możemy na drugi, w drugi sposób po prostu wejść na MailChimp'a, zalogować się tutaj,
utworzyć nową kampanię, utworzyć nową listę, ręcznie zapisać do niej osoby itd.
No ale oczywiście to jest bardzo pracochłonne i tego byśmy nie chcieli.
Trzeci sposób to właśnie połączenie z
pomocą API, gdzie my możemy wysłać do MailChimp'a jakieś polecenie, które np.
zapisze kogoś na listę, albo usunie go z
listy, albo wyśle mail, albo stworzy kampanię, albo stworzy listę itd.
I to wszystko dostępne jest w tym tak zwanym API reference.
No i teraz ta referencja API
zawiera informacje o tym przykładowo jak tworzyć nowe kampanie.
Chodzi o to, że pod jakiś adres do MailChimp'a
musimy wysłać kawałek kodu, który taką kampanię automatycznie założy, czyli
odpowiednio sformatowane polecenie, które wyślemy pod ten adres do MailChimp'a
pozwoli na naszym koncie po zautoryzowaniu się utworzyć np.
nowego użytkownika.
No i to jest dla nas rozwiązanie idealne,
bo możemy na naszym landing page w momencie gdy ktoś kliknie guzik wyślij
po wpisaniu adresu email właśnie wysyłać taki kawałek kodu do MailChimp'a i dzięki
temu dopisywać go automatycznie do tej naszej listy.
Problem w tym, że jest to w sekcji Developers.
W związku z tym, jak sama nazwa wskazuje jest przeznaczone dla programistów.
No i rzeczywiście można to zrobić z pomocą
kodu, ale można też to zrobić na inne sposoby.
O pierwszym sposobie już wspomniałem.
Jest to tak zwana integracja wewnątrz narzędzia.
Czyli jeśli mamy MailChimp'a, on może też oferować nam np.
możliwość postawienia landing page'a i
możemy za pomocą jednego kliknięcia te landing page spiąć tak, aby rejestracje z
niego szły na odpowiednią listę do MailChimp'a.
Tak naprawdę pod spodem jest napisane
rozwiązanie w oparciu o API, które te adresy nam zapisuje.
No ale to jest wewnątrz tego jednego narzędzia.
Okazuje się, że różne narzędzia także mogą gadać między sobą.
I prawdopodobnie znasz to np.
z wtyczek na WordPressie.
Jeśli do WordPressa diinstalujesz sobie wtyczkę MailChimp'a ona automatycznie
pozwoli Ci dopisywać ludzi do listy. Jak to robi taka wtyczka?
No właśnie przez API.
Czyli wykorzystuje tą dokumentację
MailChimp'a wysyła pod jakiś określony adres np.
users czy jakiś inny odpowiedni kawałek kodu.
Który osobę z Twojego formularza w WordPressie zapisuje do listy na MailChimp'ie.
I taka integracja to też jest integracja
wewnątrz narzędzia, w tym przypadku WordPressa, która łączy się z MailChimp'em.
Jeżeli stawiasz przykładowo sklep na shopify to też możesz doinstalować sobie do
niego jakąś integrację z MailChimp'em, która automatycznie
pozwoli Ci zapisywać osoby np.
które kupują coś u Ciebie w sklepie na listę mailingową i ta integracja, która
została przez kogoś zrobiona też korzysta z API MailChimp'a.
W ten sposób można łączyć się z rozmaitymi usługami.
No dobrze, czyli poznaliśmy dwa sposoby na integracje.
Pierwszy to integracja wewnątrz narzędzia,
którą ktoś już dla nas po prostu napisał i jest dostępna np.
w postaci jakiegoś pluginu czy aplikacji,
które możemy doinstalować, ale czasem taka integracja nie jest dla nas dostępna.
Wtedy musimy no, pierwszą opcją jest sami
ją napisać, czyli samodzielne stworzenie integracji z pomocą kodu.
Jeżeli dane narzędzie ma API.
No bo to jest taki warunek, że takie
narzędzie ma API, które jest dostępne na zewnątrz, czyli przez API możemy
dodawać tych ludzi do listy czy tworzyć nowe listy.
No to wtedy nasz programista może sprawdzić taką referencję API.
No i nasz formularz z pomocą tego API
spiąć w taki sposób, że te maile będą się tam zapisywać.
Natomiast wymaga to kodowania i wymaga to tego, żeby dane narzędzie miało API.
I trzecim sposobem, które poznamy jest
samodzielna integracja, ale bez pomocy kodu.
Czyli jeśli dane narzędzie ma API, a np.
nie da się go zintegrować na sposób pierwszy, czyli wewnątrz narzędzia, bo
nikt nie napisał jakiejś takiej wtyczki do WordPressa albo do Shopify
pod to konkretne narzędzie, którego chcemy użyć, to możemy to zrobić bez pomocy kodu.
Z pomocą narzędzi takich jak np. Zapier.
Można powiedzieć, że Zapier jest takim meta narzędziem, które operuje na poziomie
jeszcze wyżej i pozwala spiąć API jednego narzędzia z innym narzędziem.
Zapier działa w ten sposób, że on po
prostu potrafi przekazać dane pomiędzy tym jednym a drugim albo wieloma narzędziami.
Wyobraź sobie, że masz taką listę na MailChimp'ie,
ale chcesz, żeby adresy mailowe z tej listy automatycznie również wpadały do
jakiegoś Twojego CRM'a przykładowo do HubSpota,
bo w tym CRM możesz sobie wygodnie
zarządzać klientami, mieć tam ich dane biznesowe itd.
No i właśnie Zapier pozwala Ci to zrobić,
czyli pozwala znaleźć sobie narzędzie takie jak przykładowo MailChimp.
I w momencie gdy połączymy go do MailChimp'a on zaczyna rozumieć dane które tam są?
Czyli zna te adresy email, zna wszystkie
listy, które tam stworzyliśmy i może te dane przetworzyć w taki sposób,
żeby wysłać je przez API do innego narzędzia, no przykładowo do tego HubSpota
albo nawet do Google Sheets, czyli do jakiegoś arkusza na Google Sheets, który
zrobimy możemy automatycznie przekazać dane np.
Add subscriber to MailChimp from a Googl Sheets czyli w jedną stronę to zrobi, czyli z
Google Sheets'a przekazać dane i zapisać ludzi do MailChimp'a.
Albo w drugą stronę np. z
MailChimp'a zapisywać sobie dodatkowo ludzi w Google Sheet.
I takie integracje możemy robić, ponieważ Zapier rozumie wszystkie te API i pozwala nam
łatwo przerzucać dane między jedną a drugą usługą.
I co ciekawe w ten sposób możesz robić naprawdę bardzo złożone integracje.
Przykładowo możesz odebrać dane z Twojej strony, wysłać je do MailChimp'a
jednocześnie wysłać je do HubSpot'a, jednocześnie do jakiejś jeszcze innej usługi.
Przykładowo istnieją takie usługi, które pozwalają na podstawie adresu email
sprawdzić, czy ktoś pracuje w dużej firmie czy w małej firmie.
I jeżeli np.
pracuje w dużej firmie to możesz jeszcze wysłać powiadomienie na Slack'u do Twojego
handlowca, że ktoś taki się zapisał, albo ewentualnie ustawić jakiś, jakieś zadanie
na Todoist'cie czy na Nozbe aby ktoś z taką osobą się skontaktował i indywidualnie
jakoś z nią przywitał się w ramach Twojej listy mailowej.
Także możliwości są tutaj nieskończone, ale co ważniejsze wszystko co ma API my
możemy w zasadzie zintegrować z pomocą właśnie takich narzędzi jak Zapier.
Na pewnym meta poziomie.
No i warto, żebyś złapał taki punkt widzenia tego, co można zrobić.
Nie trzeba odkrywać świata na nowo, nie
trzeba samodzielnie pisać z tych wszystkich rozwiązań.
Wystarczy znaleźć odpowiednie narzędzie,
sprawdzić czy ma API, a jeśli tak, to jesteśmy w domu, to możemy użyć np.
Zapier'a bez kodu po to, żeby połączyć się z tym co chcemy osiągnąć.
Ja nie będę tutaj uczył Cię jak funkcjonuje API, ale uważam, że to jest
bardzo ważna wiedza i znajdziesz tą wiedzę w innym kursie na Eduweb.pl, do którego odsyłam.
A tymczasem najbardziej zależało mi na tym, abyś na ten moment potrafił zrozumieć
to jak to może działać, jak to z tymi usługami się możemy łączyć.
I to na teraz wystarczy.
W kolejnym kroku przejdziemy do budowania naprawdę bardzo prostych landing page i
później będziemy rozbudowywać tą swoją wiedzę w kierunku również tych integracji,
o których wspomniałem, czyli w edytorze landing page'y sprawdzimy czy
ma on wbudowane te natywne integracje, takie, które mogą nam pomóc i np.
zapisywać kogoś na listę
i użyjemy tych natywnych, ale później okaże się, że niektórych nam brakuje i te
integracje będziemy już musieli zrobić sami np.
właśnie z pomocą Zapiera.
Także dziękuję Ci za uwagę w tej części i
mam nadzieję, że otworzyłem Twoją głowę na pewne możliwości, które dają nam zarówno
Web Builder'y, jak również integracje, które pomogą nam posklejać z różnych usług
wszystko to, co nam jest potrzebne do obsługi jakiegoś projektu, jakiejś strony.
Możemy przejść do kolejnych lekcji. Do usłyszenia.