Strony WWW bez Kodowania: Strona Usługowa
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.
Cześć, witaj w kolejnej lekcji, w której
tym razem przerobimy scenariusz strony usługowej, czyli Service Scenario.
To będzie strona, która umożliwia
użytkownikowi po wejściu wypełnienie formularza i uzyskanie jakiejś wyceny.
Chodzi tutaj o wszystkie takie strony, które są np.
wizytówkami firmowymi, w które ktoś może
się skontaktować, a dodatkowo zadania mają być rozdzielone pomiędzy zespół.
Zrobimy to w takiej bardzo uproszczonej formie, ale mam nadzieję, że da Ci to
inspirację do rozbudowywania tej automatyzacji.
Więc dana osoba wypełnia formularz.
W naszym przypadku będzie to formularz sprzedaży samochodu.
Następnie my będziemy chcieli wykonać
automatyzację dodania tego do bazy danych i wysłania jej maila z potwierdzeniem.
Kolejno będziemy chcieli przydzielić to
konkretnemu agentowi i posłużymy się w tym celu Trello, a także
wrzucimy post na Slack'a tak, aby mu o tym przypomnieć.
No i zrobimy jeszcze jedną automatyzację,
która po rozwiązaniu tego przez agenta, czyli po załatwieniu
tej sprawy i wysłaniu oferty również odfiltruje taką osobę w naszej
bazie danych i być może jeszcze wykona jakąś inną akcję.
No dobrze, to zabieramy się do pracy, a praca już jest w zasadzie zrobiona po
stronie właśnie przygotowania takiego formularza.
Zrobiłem znów na Carrd bardzo prosty landing page, który ma tylko formularz.
Czyli tutaj przeszli byśmy już np.
po przeczytaniu jakiejś wstępnej
informacji na Landing page'u po to, żeby wypełnić swoimi danymi
formularz w celu uzyskania wyceny samochodu.
No i teraz ten formularz jest skonstruowany w taki sposób.
Przejdźmy do jego ustawień, że jest to custom'owy formularz.
Nie będzie wysyłał maila, tylko będzie
znowu wysyłał coś do URL, a możesz zrobić to wysyłanie do Zapiera i w Zapierze
sobie przygotować całą automatyzację,
my będziemy wykonywali to z pomocą Integromata.
I teraz w polach mamy pola name, email, make, model itd.
Są one odpowiednio polami tekstowymi.
Pole email ma typ email.
Wszystkie mają też nadane identyfikatory pisane z małej litery.
Nazwa tego pola a w miejscu gdzie dotyczy to konkretnego samochodu np.
jak mamy mileage czy to mamy przedrostek
car-mileage w tym ID, żeby było łatwiej się połapać.
No i mamy jeszcze takie pola jak registered.
To pole jest typem select i tutaj po prostu jest kilka państw, które wpisałem.
Można oczywiście dodawać tych pól więcej, jakiś numer telefonu itd.
Dodałem też pole a Attach photos i to pole ma
typ file, czyli zmieniłem typ na plik można z pomocą takiego pola
dołączać tutaj pliki obrazków zip'y, PDF'y albo wybrać opcję custom.
My będziemy chcieli, żeby taki klient dołączał ewentualnie obrazki swojego
samochodu, a pola damaged oraz first owner są zrobione,
oznaczone jest ich typ jako checkbox i zobacz, że
pojawiają się właśnie tutaj w ten sposób. No i świetnie.
To co możemy jeszcze ewentualnie dodać to
jest tutaj takie fixed value i czasem może Ci się to przydać.
Przykładowo gdybyś wiedział skąd np.
klient przychodzi na Twoją stronę, żeby wypełnić formularz.
Mógłbyś tutaj przekazać jakieś taki parametry np.
ref jak refrence i wpisać, że on przychodzi od np.
Google, bo znalazł Twoją stronę w wyszukiwarce.
To jest o tyle ciekawe, że można w tym
miejscu przekazać jakieś custom'owe dane, nie te wpisane przez
klienta, tylko takie, które my mamy, bo np.
zostało to gdzieś przekazane w parametrze,
w którym ten użytkownik wszedł na tę stronę.
To jest oczywiście opcjonalne. Ja wybieram
teraz polecenie Done tutaj więcej ustawień nie musimy znać i publikuję tą
stronę i opublikujemy ją pod adresem service-cars.carrd.co
i takie same damy tytuł i description.
No dobra, no to jak zwykle jak się strona
publikuje, nie tracimy czasu i przechodzimy do Integromatu.
Ale zanim, zanim zrobimy nowy scenariusz, warto sprawdzić, czy
przypadkiem jakiś scenariusz nie może nam posłużyć do tego, żeby go sklonować.
I ten scenariusz Lead Generation doskonale
nam się do tego przyda, żeby zrobić pierwszą automatyzację.
Więc wybieram tą małą strzałkę, a następnie klonuje
ten scenariusz i powiem, że to jest Services get form
Czyli teraz będziemy pobierali te dane z formularza no i nie będziemy zapisywać takiej
osoby do MailChimp'a, więc mogę to od razu usunąć.
Usunąć ten model prawy przycisk myszy, ale
będziemy dodawali go do Airtable i będziemy wysyłali mu email.
Oczywiście webhook też musimy zmienić zamiast tego webhook'a, Capture Leads
z którego korzystamy zrobimy tutaj nowy, czyli serwis Service Cars.
I wybierzemy polecenie Save
skopiujemy teraz adres tego webhook'a do schowka.
No właśnie tak czy inaczej będziemy
musieli jeszcze raz opublikować stronę, no bo przecież musimy teraz przekazać URL
tego webhook'a do Carrd i jeszcze raz opublikujemy zmiany na naszej stronie.
W międzyczasie przechodzę jak zwykle do
Integromatu i teraz tak odpinam sobie te rzeczy, czyli odpinam na razie Airtable i
maile zostawiam tago webhook'a, który będzie działał, bo on kieruje na serwis Cars,
więc wybieram polecenie Run once po to, żeby czekać na dane.
Teraz wracam do formularza i zobacz, że wypełniłem już formularz przykładowymi
danymi wybrałem, a tutaj Państwo a nawet wgrałem obrazek.
Wystarczy kliknąć, a następnie załadować sobie obrazek.
Zostanie on tutaj wgrany oznaczyłem damaged
oraz first owner i teraz wybieram polecenie Get a Quate.
Formularz jest wysyłany, a ja dostałem dane i te dane wyglądają następująco.
Wszystko tutaj się zgadza, mamy nawet
nazwę pliku i ten plik został przesłany jako takie dane binarne.
Będziemy musieli go najpierw gdzieś zapisać, żeby uzyskać do niego link, ale
na początku po prostu połączmy te moduły, żeby mieć już dane dostępne.
I teraz tak jeśli chodzi o Airtable to
najpierw jeszcze powinniśmy gdzieś zapisać ten plik graficzny.
Może to być Google Drive, może to być
Dropbox i polecam skorzystanie właśnie z Dropbox'a.
Wybieram polecenie Add module i wybiorę sobie Dropbox.
Z dostępnych modułów, kolejno wybierzemy polecenie Upload a file,
czyli po prostu do konkretnego folderu na Dropbox'ie wrzucimy ten plik.
Po połączeniu się z Dropbox'em wskazujemy odpowiedni folder np.
u mnie mam folder automation i to do tego folderu będę chciał wrzucać pliki.
Nazwa pliku to będzie taka jak tutaj mamy.
Czyli akurat ja wrzuciłem jakiś pexels photo i data
to właśnie będą dane, które przychodzą tutaj w tej tablicy jako data.
To są te dane binarne, one zostaną przetworzone przez Dropbox'a i
będziemy mogli później z takiego pliku skorzystać.
Wybrałem opcję auto-aligne
i teraz w Airtable korzystam z tych danych aby je właśnie zapisać.
Czyli idziemy teraz do Airtable wybierzmy inną bazę czyli serwis.
Będziemy chcieli do tabeli submissions zapisywać te wyniki.
No i mamy wszystkie rekordy, które trzeba uzupełnić.
Teraz zobacz, że ponieważ po drodze mamy
i Dropbox'a i odebrane dane z formularza, to będziemy mieli po pierwsze dane z
Dropbox'a, po drugie dane z webhook'a, a jako imię przekazujemy
pierwsze dane z webhook'a, później email, później make, tu mamy car model, następnie
car make, car model, później mileage i registered country, następnie zdjęcie.
I teraz jeśli
chodzi o file URL to przekażemy to zdjęcie zapisane już na Dropbox'a.
Tutaj musimy podać URL.
W niektórych modułach można przekazać do, jako zdjęcie na Facebook'u coś takiego jak
data i wtedy moglibyśmy rzeczywiście wrzucić to data bezpośrednio.
Natomiast w momencie gdy mamy URL, no to nie możemy wrzucić binarnych danych.
Musimy wcześniej mieć je gdzieś zapisane po to, żeby móc przekazać tutaj link.
Więc w API Airtable po prostu jest wymagany link.
W związku z tym nie można przekazać binarnych danych.
Dlatego też zapisaliśmy to wcześniej do
Dropbox'a, więc teraz wybieram File URL i z Dropbox'a wybieram sobie polecenie Path.
Wybierzmy Path Lower, a następnie jako
file name wybierzemy nazwę tego pliku, czyli name stąd.
Ok.
Możemy teraz wybrać
Add, żeby to dodać i zobaczmy jeszcze jakie mamy pola damaged i first owner
i mamy możliwość zaznaczenia ich na yes albo no, ponieważ w Airtable
one są właśnie w ten sposób sformatowane, bo tutaj damaged i first owner jest jako checkbox,
więc możemy zaznaczyć yes albo no, aczkolwiek my chcemy to
zmapować, czyli przełączyć ten przycisk, chcemy to przełączyć na pole, które
zostało wypełnione w formularzu i car damaged i first owner mamy.
Zrobiłem tutaj zarówno opcję true i false
przesłałem jeszcze raz dane, żeby było je widać.
I car damaged zobacz, że zwróci nam w tym momencie true.
I właśnie żeby zobaczyć jakie, jakich
danych potrzebuje tutaj Airtable możemy najpierw coś zaznaczyć np. no
i później przełączyć się na map i zobaczymy, że on oczekuje takiego słowa
wprost false i to się zgadza z naszym formularzem, więc ja to usunę i po prostu
przekażę tutaj false, więc nie musimy tutaj nic inaczej konwertować.
Po prostu te checkbox'y zwrócą nam true
albo false I rzeczywiście true albo false to jest coś, co Airtable przyjmuje jako dane.
Gdyby jednak tak nie było, mogę podpowiedzieć Ci co zrobić, tzn.
gdyby tutaj przychodziły jakieś inne dane przykładowo checked i unchecked i wtedy
Airtable nie mógłby tego zrozumieć i jakby przełożyć na język tych checkboks'ów.
Wtedy moglibyśmy skorzystać z takiego modułu. Dodam sobie
tutaj moduł, który jest jak znajdziemy narzędzia tools.
To w tym module będziemy mogli zrobić coś takiego jak switch i switch
pomoże nam wziąć dane jako input.
Przekażemy np.
te dane car damaged i teraz będziemy, gdyby np.
zamiast true było tutaj checked to wtedy
dodalibyśmy taki case, gdzie pattern to byłoby checked, a output to by było true.
Z kolei unchecked zmielnilibyśmy na false.
Czyli zrobilibyśmy jeszcze jeden taki
switch i przełączyli dane tym razem nie z car damaged
a z car first owner i wtedy rezultatem takiego tool'a byłoby
przetłumaczenie frazy checked na true, a unchecked na false.
I zamiast tego zamiast tego checked i unchecked
po prostu użyli byśmy to co zwróciłyby nam te narzędzia, tools.
Ale to podpowiadam tylko
natomiast nie musimy tego robić, bo jest to tak zrobione, że dane
są poprawnie już sformatowane, więc Airtable mamy wypełnione w całości.
Powinno być ok.
I teraz możemy to jeszcze raz podejrzeć i zatwierdzić.
Jeśli chodzi o email,
to tutaj musimy podać właściwy adres email, czyli ten, który nam przyszedł stąd
akurat to pole nazwałem tak samo,
więc mogłoby nawet zadziałać, ale przełączmy to na właściwe.
No i tutaj jakaś wiadomość do osoby, która
zgłasza nam thank you for sending, czyli jakiś mail z potwierdzeniem do tej osoby.
Możemy znowu w blind copy dać siebie, aczkolwiek
w tym przypadku będziemy chcieli zrobić jeszcze coś, będziemy chcieli wrzucić
wiadomość na Slack'a, a także przekazać zadanie na Trello do agenta.
OK, no to spróbujmy to zrobić teraz.
Czyli dodajemy kolejny moduł.
Będzie to moduł Slack, wybieram Slack'a, a następnie polecenie Create a message.
I teraz będziemy np. mieli taki ogólny kanał
na naszym Slack'u, w którym będą wszyscy nasi agenci np.
do którego możemy postować.
Ja mam kanał automation, na który mogę po prostu wrzucić informacje.
Wybieram show advanced settings i jako nazwę czyli username wpisuję quote request.
A tu jako icon emoji można podać jakąś emotkę np.
wyszukamy sobie samochodu, car i wrzucimy po prostu takie emoji.
Wybiera polecenie Ok.
I ostatnia część naszej automatyzacji to
Trello, czyli kolejny moduł, który tutaj dodamy Trello.
I zanim to zrobimy, to spójrzmy na Trello.
Możesz założyć nowe, darmowe konto na Trello,
w którym stworzysz nawy board z pomocą plusa.
Ja nazwałem nasz board Services
i umieściłem tutaj trzy stosiki todo, in progress, offer sent i
w związku z tym my będziemy chcieli przydzielić to do tego stosiku todo.
Przechodzę do stworzenia nowej karty z listy
w związku z tym wybierzemy Create a card.
Następnie wskażemy z pomocą Select
identyfikator listy, czyli board to będzie services lista, to będzie todo i
ewentualnie możemy jeszcze dodać do tego jakiś label np. purpurowy
i oznaczyć ewentualnie osobę czy jakiegoś agenta, któremu chcemy to przyporządkować.
Możemy to zrobić.
Nie musimy.
Jeżeli taka osoba będzie oznaczona zobaczysz jak to będzie wyglądało i description.
No i jeszcze możemy przejść do opcji
zaawansowanych, wybrać Show advanced settings i wybrać np.
pozycję.
Możemy to umieścić na szczycie stosu albo np. na dole stosu.
Możemy dodać jakieś due date.
I teraz chciałbym żeby data wymagalności tego zadania to było na 1 dzień od teraz.
Dlatego, że obiecujemy naszemu klientowi, że w ciągu 24 godzin wrócimy do niego z wyceną.
W związku z tym przechodzimy do sekcji
Daty i tutaj będziemy mogli skorzystać z now, żeby pobrać bieżącą datę.
Jednak chcemy do tej bieżącej daty dodać
jeszcze jeden dzień, więc możemy albo 24 godziny np.
możemy skorzystać z Add hours, albo możemy skorzystać z Add days.
Możemy wybrać Add hours.
I teraz zobacz, że tutaj trzeba przekazać w nawiasie najpierw przed tym średnikiem
datę, od której zaczynamy, czyli dzisiaj, bieżącą datę, a później numer.
To będzie ilość godzin, które chcemy dodać albo odjąć, jeśli to będzie liczba ujemna.
Tutaj są przykłady napisane, że możesz przekazać właśnie datę w ten sposób i
dodać do tego dwie godziny, albo przekazać datę i odjąć od tego dwie godziny.
Więc my postawimy kursor przed średnikiem i wstawimy dzisiejszą datę.
Czyli now, czyli teraz w zasadzie, kiedy to zlecenie
przyszło i dodamy do tego 24 godziny kolejno, mamy takie coś jak file URL.
I tutaj możemy również przekazać zdjęcie samochodu.
Problem polega na tym, że moduł Dropbox jest jakby poza scope'em tego modułu.
Ponieważ on się z nim nie łączy, nie
przechodzi przez niego, więc moglibyśmy zrobić to w ten sposób, że wybiorę
polecenie Ok i po prostu przeniosę, wybiorę unlink i
przeniosę ten moduł za Airtable o tutaj i wtedy zaraz to poukładam.
Ale wtedy powinienem mieć już dostęp do tego modułu Dropbox, który jest po drodze.
Ewentualnie moglibyśmy po prostu Dropbox'a
wsadzić tutaj to też zaraz Ci mogę pokazać, ale zobacz, że mamy eco file URL .
Teraz możemy podać już z Dropbox'a tą path lower.
Wybieram na razie polecenie Ok.
Ułożyę sobie to wszystko w ten sposób.
Zapiszę i spróbuję to przetestować.
Wybierzmy Run once.
Następnie musimy wypełnić jeszcze raz formularz.
Ustawiłem damaged na true a first owner na false.
Zobaczymy, get a quote. Zobaczymy jak to
przejdzie teraz w automatyzacji.
Powinienem zaraz otrzymać dane.
Wysłał się email, zapisuje się zdjęcie na Dropbox'ie.
Coś poszło nie tak z Airtable, mamy invalid URL.
No właśnie, dlaczego? Dlatego, że
zobaczmy jak wygląda teraz ten URL z Dropbox'a.
Jakby celowo też
nie pokazuje to na takim modelu idealnym, że wszystko działa po to, żebyś mógł,
żebyś wiedział jak zdebugować, bo to jest naprawdę bardzo ważne.
Więc my przekazaliśmy tutaj to path lower.
Teraz zobaczmy co to jest to path lower w tym miejscu.
My mamy jako output taki bundle i mamy rzeczywiście zwróconą ścieżkę, aczkolwiek
to jest ścieżka taka relatywna do folderu, którego to nie jest poprawne URL, prawda?
Musielibyśmy wyciągnąć w jakiś sposób taki link do tego pliku na Dropbox'ie,
który moglibyśmy osadzić tutaj jako absolutny.
W tym celu stwórzmy sobie po drodze jeszcze jeden moduł prawy przycisk myszy
na kubeczkach i wybieram polecenie Add module.
Jeszcze raz korzystam z Dropbox'a a
następnie mam tutaj coś takiego jak Create update a share link.
Czyli możemy stworzyć taki link do tego
pliku, który da się share'ować, który da się udostępniać.
Prawdopodobnie to będzie właśnie to czego szukamy, czyli file path.
Teraz podajemy ścieżkę do pliku, wybierzmy path lower,
następnie requested visibility czy to ma być publiczny plik czy team only itd.
Zostawimy sobie publiczny, nie będzie
wygasać ten link, choć mógłby tak naprawdę za chwilę, bo nie będzie nam już później
potrzebne i access level jeszcze możemy zrobić sobie np.
viewre editor itd.
To jest wszystko opcjonalne, więc zostawiam to na razie na ok.
I teraz spróbuję zrobić na następującej zasadzie może się uda.
Że skopiuję sobie tę ścieżkę, która jest
tutaj w path lower i zamiast wypełniać wszystko jeszcze raz, wybiorę polecenie
Run this module only i wkleję tą ścieżkę path lower, żeby zobaczyć czy rzeczywiście ten
moduł zadziała i utworzy dla mnie taki share'owany link.
Okazuje się, że tak.
To co zwrócił mi ten moduł jako output
jest to m.in. URL, który jest bezpośrednim linkiem
już zaczyna się od HTTPs i prowadzi do tego pliku jpg.
Więc to co mógłbym zrobić to teraz albo
przekazywać ten link, albo przekazywać cały plik.
W sumie przekazywanie całego pliku to też jest transfer danych, więc np.
możemy przekazywać cały plik
tam, gdzie mamy na Trello nasz stosik, a przykładowo do tego dokumentu moglibyśmy
zamiast pliku jako Attachment przekazać po prostu URL i wtedy zawsze będziemy mogli
ten plik pobrać albo zobaczyć go sobie na Dropbox'ie stąd.
Zobaczmy jak w integromacie można by było skonfigurować
wtedy Airtable. Do photos przekażemy po prostu URL.
Jest tutaj też ewentualnie download URL,
czyli coś co pozwoli nam od razu ściągnąć sobie to na dysk.
Ja przekaże tu URL i tak samo zrobię dla
Trello i zobaczysz, że na Trello to powinno dołączyć jako zdjęcie.
Wybierzmy w tej sekcji path, gdzie mamy File URL
path lower usunę i skorzystam tu z modułu create a share link i wkleję URL.
Wybieram polecenie Ok.
Teraz trzeba będzie jeszcze raz wypełnić ankietę.
Wybieram Run once i wklejam, wypełniam.
Zrobiłem to z pomocą magii kina, a teraz tylko czekam na dane.
Przyjdą przez Webhook, a następnie wysyła się mail, zapisuje się na Dropbox'a, tworzy
się link, zapisuje się z samym URL'em na Airtable i to widzisz
krócej trwa i też nie przesyła tak wielu danych i zapisuje się z obrazkiem na
Trello, jak również mam informacje, powiadomienia na Slack'a
no dobra, to zobaczmy najpierw na Trello jak to wygląda i został dodany taki,
taka kartka z obrazkiem ze zdjęciem, które możemy podejrzeć w dużej rozdzielczości
również. Greg requests a quote a Porshe.
I tutaj wszystkie dane są przekazane.
Nazwa tej karty to jest adres email osoby zlecającego.
No i jeszcze dodatkowo został dodany due date
na jutro na 13:40, czyli dokładnie za 24 godziny.
A także fioletowy label.
On też pojawia się tutaj, więc można powiedzieć, że tutaj działa ok.
Następnie jeśli zerkniemy na Airtable to tutaj też dodało się dobrze i
zamiast dołączać zdjęcia po prostu wrzuciłem tutaj link do Dropbox'a, który
można otworzyć i powinno wyświetlić nasze zdjęcie.
Ok i damaged zobacz, że przeszło
poprawnie czyli zostało oznaczone na true a first owner było oznaczone na false.
W związku z tym nie jest zaznaczone. Świetnie.
No to mamy działającą bazę danych, mamy działające zadania.
Jeszcze sprawdźmy czy przyszła wiadomość na Slack'a.
No i zgadza się, ona też tutaj jest quote request, a następnie Greg request
to the quote. Możemy oczywiście przekazać więcej danych.
I nie mam tu dobrej ikonki.
W związku z tym przejdę jeszcze na moment
do naszej automatyzacji i pokażę Ci jak wygląda Slack.
Wrzuciłem ikonkę emoji, ale czasem ona
rzeczywiście nie działa, więc możemy jako icon URL tutaj wrzucić jakieś emoji.
I mam do tego fajną stronkę, z której zwykle korzystam, czyli emojipedia.org.
Stąd możesz wybrać sobie te kategorię np.
Travel and Places albo po prostu czegoś wyszukać,
czyli znajdziemy car i będziemy mieli
wiele różnych emotek z rozmaitych systemów.
Ta, która nam się podoba.
Możemy po prostu kliknąć prawym przyciskiem myszy, następnie wybrać copy
image address i teraz wstawić ten icon URL jako po prostu link do emojipedii.
Teraz zapisać i powinno, powinna ta ikonka dużo lepiej wyglądać.
Co jeszcze potrzebujmey sprawdzić?
Czy przyszedł do nas email?
Sprawdzam inbox i mamy rzeczywiście: Thank you for sendind request.
Wszystkie moje próby doszły i mamy na razie prostą wiadomości: We'll reply in 24h.
Dobra, to mamy pierwszą część naszej automatyzacji gotową,
czyli dodajemy do Airtable, wysyłamy
mail z potwierdzeniem, wysyłamy task na Trello i pastujemy na Slack'a.
Teraz chcemy zrobić drugą część automatyzacji.
W momencie, gdy ten task zostanie rozwiązany przez agenta,
chcemy odfiltrować takie wpisy z bazy danych.
Co to znaczy? Teraz agent przyjął takie zgłoszenie.
Patrzy, że ma to do zrobienia na jutro i w momencie, gdy zacznie się tym zajmować,
powiedzmy, wrzuca sobie to w tą sekcję in progress.
Ja to oczywiście zamodelowałem w ten
sposób po to, żeby dać przykład, ale chodzi o to, że łatwo sobie można
zaaranżować i zorganizować pracę dzięki Trello i właśnie takiej liście.
Więc on przerzuca sobie to w in progress i powiedzmy, że kontaktuje się
z klientem, bierze od niego jakieś dodatkowe dane itd.
No i na pewnym etapie wysyła ofertę, czyli przerzuca to do offer sent.
I w tym momencie, gdy zostanie to przerzucone na ten stosik, chcielibyśmy na
naszej bazie Airtable w jakiś sposób odfiltrować te z tego widoku.
TODO.
Ściślej mówiąc chcielibyśmy stworzyć sobie nowy widok, czyli stworzę nowe widok grid.
To się albo tak wyświetla, albo trochę inaczej.
I teraz zrobimy tutaj taki widok, gdzie są np.
offer sent.
Gdzie mamy wysłane ofertę i dodatkowo zrobię takie pole.
Tutaj offer sent.
Które będzie również checkbox'em.
Teraz w momencie gdy ten checkbox offer sent
zostanie oznaczony, będę chciał to przerzucić do
właśnie do tego widoku, czyli będziemy mieli automatyzację, która nam
automatycznie to zaznaczy i w widoku offer sent, będę chciał
wyfiltrować tylko te oferty, które zostały wysłane.
Czyli gdzie mamy offer sent jest zaznaczone.
A w tym widoku todo
będę chciał mieć tylko i wyłącznie te rzeczy, które są do zrobienia.
W związku z tym dodam odwrotny filtr, gdzie offer sent jest puste.
Ok, no to świetnie.
To teraz jeszcze trzeba zrobić taką
automatyzację, która nam to automatycznie zaznaczy.
W momencie gdy agent przerzuci to do offer sent.
Przechodzimy do Integromatu, zapiszemy sobie to i możemy to włączyć.
Będzie odpalane automatycznie w momencie gdy formularz zostanie odebrany.
Ponieważ jest to webhook,
a my możemy stworzyć nowy scenariusz, wybieram polecenie Create new scenario.
Wybieram Trello, bo od niego chcę zacząć, czyli
zawsze od czego chcemy najpierw rozpocząć naszą pracę.
No chcemy zacząć od Trello, bo chcemy
sprawdzić, czy agent przerzucił to na stosik
rozwiązane, na stosik offer sent.
W związku z tym będziemy musieli nasłuchiwać kiedy card
zostanie przerzucany do listy, konkretnej i to się odpali, kiedy właśnie
rzeczywiście przywrócimy to na specyficzny stosik, czyli w nomenklaturze Trello
do listy. Wybieram watch cards moved to the list i teraz wybieram board services, następnie
listę offer sent to do niej chcemy słuchać, czy coś zostało przerzucone.
Limit może być np. dwie naraz.
Możemy sobie go zwiększyć, jeśli wielu
agentów naraz wypracowało i coś przeczytało.
Natomiast chcemy nasłuchiwać od teraz from now on, to nam pozwoli też
nie nasłuchiwać automatycznie tych rekordów, które już wcześniej zostały
przerzucane, Tylko nowe będą dodawane więc tak jak chcemy.
I teraz co ma się stać, kiedy je rzucimy do tego stosu?
Chcemy w Airtable znaleźć rekord.
Będziemy chcieli finalnie zrobić coś
takiego jak update record, czyli zmienić to pole offer sent na zaznaczone, ale najpierw
musimy go wyszukać, więc najpierw musimy wybrać polecenie Search records, no bo
ta automatyzacja w żaden sposób nie wie,
który rekord chcemy oznaczyć, a tych rekordów oczywiście mogłoby być wiele.
Więc możemy nawet sobie to zaprototypować w taki sposób, że duplikujemy ten rekord.
Tyle, że tutaj zrobimy hello@codeless.com
Ok.
I zobaczysz, że ten rekord prawidłowy, tylko zostanie odfiltrowany,
czyli ten z odpowiednim mailem powinien rzeczywiście zostać odfiltrowany.
Wybieramy Airtable, wybieramy bazę serwis.
Stąd tabela submissions.
No i taki search działa na zasadzie formuły.
Pokazywałem Ci wcześniej w Airtable, że
można dodać tam taką kolumnę formula i w to pole
można było wpisywać różne formuły, nawet instrukcje warunkowe.
I to jest dokładnie to pole formula, które możemy odfiltrować.
Tutaj jest kilka przykładów, ale możemy
też przejść na stronę Airtable, żeby zobaczyć jak tę formułę się definiuje.
Oczywiście jest to bardzo zbliżone,
podobne do tego, co znamy z Excela jako formuły.
Żeby zaadresować jakieś pole, po prostu podajemy jego nazwę.
Jeżeli ta nazwa zawiera spacje albo jakieś
inne znaki, to podajemy ją w nawiasach klamrowych.
Czyli to co my będziemy chcieli zrobić, to
sprawdzić czy pole email zawiera email, które jest na karcie.
Czyli przejdźmy jeszcze raz do automatyzacji i wystarczy wpisać tutaj
email równa się i sprawdzić to z adresem email, czyli
innymi słowy z nazwą tej karty, bo właśnie w nazwie karty przejdźmy do niej,
znajduje się adres email: codelesshow@gmail.com i po tym emailu będziemy szukać.
Przechodzimy więc do właściwości card i
tutaj w środku jest list ID, card ID, name.
To jest właśnie to, o co nam chodzi.
Sprawdzamy czy email jest równy name i jak przekażemy tak adres email to on
zostanie potraktowany jak liczba, ponieważ nie jest ujęty w cudzysłów, tak jak tutaj
zresztą mamy informację o tym, że Airtable
powinno ciągi znaków przyjąć w cudzysłowie, więc pamiętajmy, żeby jeszcze
zrobić pojedynczy cudzysłów wybieram polecenie Ok.
Nie muszę tych innych rzeczy dopasowywać.
Prawy przycisk myszy i Run this module only. Następnie emuluje sobie nazwę tej karty,
żeby zobaczyć czy moja formuła działa i zwróci mi poprawnie rekord.
Wygląda na to, że tak.
Output mam tutaj cały zestaw danych, czyli cały ten rekord został znaleziony.
A co jeszcze ciekawe, będę miał coś
takiego jak identyfikator tego rekordu, który został odnaleziony.
Czyli szukałem takiego rekordu, który w polu email ma coś takiego jak:
codelesshow@gmail.com
został ten rekord znaleziony i zostało mi zwrócone jego ID.
W związku z tym teraz mogę stworzyć
kolejne Airtable, które będzie tym razem update'ował record, czyli aktualizował go
i jako bazę wybierzemy znowu serwis, tabelę wybierzemy submission.
No i teraz będę potrzebował identyfikator
tego rekordu, który właśnie już mogę tutaj przekazać, bo go mam,
odnalazłem go wcześniej, więc z search records przekazujemy ID identyfikator.
I teraz co chcemy w tym rekordzie zmienić?
Chcemy zmienić tylko jedną rzecz, mianowicie offer sent chcemy zmienić na yes.
Wybieram polecenie Ok i to powinno zakończyć moją automatyzację.
Jeśli przejdziemy do ustawień schedule
to możemy to uruchamiać taką automatyzację co 15 minut np.
no niestety w przypadku Trello tego nie będziemy
mieli tej instant notyfikacji, że coś się wydarzyło.
W związku z tym możemy ustawić sobie właśnie jakiś regularny interwał, kiedy
będzie to sprawdzane i przenoszone do odpowiedniego miejsca w tabeli.
Natomiast teraz można np.
wykonać, żeby zobaczyć czy w ogóle zwróci te jakieś wyniki.
Nie wraca, nie zwraca zgodnie z oczekiwaniami, ponieważ żadnej,
żadnej karty nie ma przeniesionej do tego, do tej sekcji offer sent do stosiku.
Natomiast jeśli to przerzucę na offer sent,
to teraz powinienem po uruchomieniu dostać jedno zgłoszenie,
jedną informacja i w Airtable zostały wyszukane i zmieniony,
zaktualizowany ten konkretny rząd.
Przechodzimy w związku z tym do Airtable.
I rzeczywiście w sekcji todo, mam tylko kopie
czyli to co zrobiłem skopiowałem wcześniej z innym adresem email.
Natomiast w sekcji offer sent będę miał tą wysłaną zaznaczoną opcję offer sent.
W związku z tym wszystko jest ok.
Tutaj w tym rekordzie, który zduplikowałem offer sent jest włączone,
więc wszystko jest w porządku i mamy zakończoną naszą automatyzację.
W ten sposób stworzyliśmy taki prosty mini CRM do zarządzania rekordami.
Dlaczego jest osobno to Trello i osobno baza danych.
Na pewno Trello jest lepszym narzędziem jeśli chodzi o tego typu pracę, np.
pracę agentów czy kogoś, kto zajmuje się
wysłaniem oferty, ponieważ można Trello przeglądać sobie, przerzucać między
poszczególnymi stosami bardzo łatwo rzeczy.
Co prawda w Airtable też taki widok oczywiście
jest, czyli moglibyśmy dorobić sobie ten widok kanban
i też w ramach tego widoku pracować musiałbym jakieś stworzyć dodatkowe pola,
ale moglibyśmy właśnie sobie w ten sposób ułożyć to, co w Trello.
Aczkolwiek wydaje mi się, że Trello jest dużo lepsze, jeśli chodzi o współpracę.
Można tutaj łatwo komentować, zostawiać różne komentarze pod kartkami i patrzeć
sobie na activity, przydzielać do różnych osób, ustalać due date'y.
No po prostu jest to lepsze do tego rodzaju pracy.
Natomiast w Trello nie musi oczywiście być wszystkiego.
Jest tak, że następnego dnia po wysłaniu oferty moglibyśmy już tą kartę prawym
przyciskiem myszy po prostu zarchiwizować i tyle.
I byłyby tutaj tylko bieżące rzeczy.
Czasem nasz mini CRM, czyli Airtable zachowałby całą historię naszych klientów,
gdybyśmy chcieli w razie czego ją kiedyś przeszukać.
Więc wydaje mi się, że taki podział jest naprawdę sensowny.
No i w zasadzie mógłbyś wymyślić jeszcze
mnóstwo rzeczy dodając do tej automatyzacji.
Przykładowo nawet sama oferta mogłaby się
wysyłać automatycznie na podstawie jakiś danych, które w karcie uzupełnił by agent.
Mamy już taką automatyzację, która działa w momencie, gdy
przenoszone jest do offer sent i mamy tam wszystkie dane klienta, więc w
tym samym miejscu możnaby było zrobić moduł, który po prostu tą ofertę do
klienta wysyła i wypełnia ją właściwymi danymi, które uzupełnił agent.
Więc na pewno można tutaj dorobić jeszcze masę różnych rzeczy.
Natomiast chciałem pokazać Ci taki
przykładowy schemat strony takiej usługowej, gdzie rzeczywiście klient
wysyła zapytanie ofertowe i co może się z tym stać.
Proszę, potraktuj to jako pewnego rodzaju inspirację, ale mam nadzieję, że przy
okazji też dowiedziałeś się wiele jeśli chodzi o automatyzację, Integromat
jakieś dodatkowe narzędzia, które możemy wykorzystać.
Wszystkie narzędzia, z których tutaj skorzystaliśmy w darmowej wersji są w
zupełności wystarczające, żeby taki scenariusze obsłużyć.
Także to wszystko na teraz.
Do usłyszenia w kolejnej lekcji.