KREATOR KLIENTÓW

KONIEC OGLĄDANIA. DZIŚ BUDUJESZ

Zbuduj swój pierwszy automat z AI w 30 minut

Robisz zdjęcie paragonu, a AI zapisuje wydatek: kwotę, sklep i kategorię. Twoja własna aplikacja, pod Twoim adresem.

Nie chodzi o paragony. Chodzi o to, żebyś raz zbudował coś, co działa, i zobaczył, że umiesz.

Zdjęcie paragonu i ten sam wydatek zapisany w aplikacji — Na tym paragonie są dwie różne kwoty. Aplikacja wzięła właściwą, choć nikt jej tego nie kazał. Niżej pokazuję którą i dlaczego.

Za pół godziny Kieszonkowy Księgowy działa u Ciebie

Osiem kroków, 27 zrzutów ekranu z zaznaczonym, w co kliknąć, i gotowy kod do skopiowania.

Otworzy się od razu na tej stronie. Nie musisz nigdzie iść ani niczego instalować.

30 minut 0 zł Bez karty Bez programowania

Na jaki adres wysłać Ci link, żebyś mógł do tego wrócić przy komputerze?

Zero spamu. Wypisujesz się jednym kliknięciem, link jest w każdym mailu. Jak przetwarzam dane.

Gotowe. Instrukcja otwiera się poniżej.

„Nie jestem programistą. Zbudowałem to wieczorem po trasie i opisałem każde miejsce, w którym sam się zaciąłem. Jak ja to zrobiłem po 12 godzinach za kółkiem, to Ty tym bardziej.”
Łukasz Niesyto, kierowca TIR-a

Jak to działa, krok po kroku

To nie jest zapowiedź. Poniżej jest paragon, który dostałem wczoraj w sklepie, i dokładnie to, co zrobiła z nim aplikacja. Kliknij w każdy obrazek, żeby powiększyć.

Paragon z Delikatesów Centrum trzymany w dłoni — 1 **Robisz zdjęcie telefonem.** Byle było widać dół z sumą. Nie prostujesz, nie kadrujesz, nie przepisujesz niczego.

Aplikacja z zaznaczonym przyciskiem Zdjęcie paragonu — 2 **Klikasz „Zdjęcie paragonu”.** Otwiera się aparat w telefonie. To jedyny przycisk, który naciskasz.

Aplikacja podczas odczytu ze zdjęcia, napis Czytam paragon — 3 **Czekasz dwie sekundy.** Zdjęcie leci do AI, które szuka kwoty, nazwy sklepu i tego, co to właściwie było.

Zapisany wydatek: Delikatesy Centrum, 39,55 zł, kategoria jedzenie — 4 **Wydatek jest na liście.** „Delikatesy Centrum, 39,55 zł, jedzenie, zakupy spożywcze i napoje”. Liczniki tygodnia i miesiąca same się przeliczyły.

Zerknij na kwotę. Na paragonie są dwie: „SUMA PLN 35,05” i niżej „DO ZAPŁATY 39,55”, bo doszła kaucja za butelki. Aplikacja wzięła 39,55, czyli tyle, ile naprawdę wyszło z portfela. Nikt jej tego nie kazał. Tak samo sama dopisała kategorię, choć na paragonie nigdzie nie ma słowa „jedzenie”.

Co dostajesz

Osiem kroków, jeden ekran na krok. Z paskiem postępu, a nie ściana tekstu, w której gubisz miejsce.
27 zrzutów ekranu. Na każdym zaznaczone na pomarańczowo, w co dokładnie kliknąć. Zrobione na czystym koncie, więc widzisz to samo co Ty.
Gotowy kod. Kopiujesz jednym przyciskiem i wklejasz. Nie zmieniasz w nim ani litery. Najtrudniejsza rzecz na całej drodze to Ctrl+V.
Sekcja „coś nie działa”. Wypisane komunikaty, które aplikacja potrafi pokazać, i co każdy z nich znaczy. Utknięcie nie kończy się porażką, tylko zajrzeniem do listy.
Trzy krótkie maile przez kolejne dni: gdzie ludzie utykają, jak przerobić aplikację pod siebie i co jeszcze da się zbudować tym samym sposobem.

Kto to pisze i dlaczego za darmo

Nazywam się Łukasz Niesyto. Jeżdżę TIR-em, a wieczorami po robocie buduję firmom strony i automaty, gadając z AI. Nie jestem programistą i nie udaję.

Tę aplikację zbudowałem dla siebie, bo miałem dość paragonów w szufladzie. Instrukcję napisałem, bo przechodząc tę drogę od zera zapisywałem każde miejsce, w którym sam się zaciąłem.

Niczego Ci nie sprzedaję. Zbieram adresy, bo buduję kolejne takie automaty i chcę mieć komu je wysłać. Tyle. Jak Ci się nie spodoba, wypisujesz się jednym kliknięciem.

Zanim zapytasz

Po co mi to, skoro bank kategoryzuje mi wydatki

Bank widzi tylko płatności kartą i dzieli je po swojemu. Ta aplikacja łapie też gotówkę i bazarek, a kategorie ustawiasz swoje. Ale powiem szczerze: nie robisz tego dla paragonów. Robisz to, żeby raz przejść całą drogę, kod, bazę i AI, i wiedzieć, że następny automat zbudujesz już sam.

Naprawdę za darmo? Gdzie jest haczyk

Nie ma haczyka. Cloudflare i Google dają darmowe plany, które są dużo za duże na taką aplikację, a karty nie podajesz ani razu, w żadnym kroku. Jak w którymś miejscu pojawi się cokolwiek płatnego, instrukcja mówi o tym wprost.

Nie umiem programować

To dobrze, bo nie będziesz musiał. Kod kopiujesz jednym przyciskiem i wklejasz w jedno miejsce. Nie zmieniasz w nim ani litery i nie musisz rozumieć, co jest w środku. Ja przy pierwszej swojej aplikacji też nie rozumiałem.

A paragony w euro

Czyta je tak samo. Paragon z niemieckiego sklepu zapisuje się w euro, dostaje przy sobie znaczek EUR i widzisz obok, ile to wyszło po przeliczeniu. Sumy tygodnia i miesiąca są w złotówkach, po kursie Europejskiego Banku Centralnego z dnia zakupu, a pod spodem masz osobny licznik, ile z tego poszło w euro.

Ile to naprawdę zajmuje

Około 30 minut, jak się nie spieszysz i nic Ci nie przerywa. Najdłuższe kroki to zakładanie konta i podpięcie bazy, po cztery minuty. Resztę robisz szybciej.

Mogę to zrobić na telefonie

Możesz, ale nie rób. Klikanie w panelu i wklejanie kodu na telefonie to droga przez mękę. Budujesz przy komputerze, a używasz potem na telefonie i tam robisz zdjęcia paragonów. Ostatni krok to właśnie przeniesienie tego na telefon.

Co, jeśli utknę w połowie

Odpisujesz na maila, którego dostaniesz, i piszesz, co się dzieje. Zrzut ekranu wystarczy. To nie jest skrzynka-automat, czytam i odpisuję sam.

Czy moje wydatki są bezpieczne

Aplikacja stoi na Twoim koncie, baza jest Twoja, ja nie mam do niej dostępu. Wejście jest na PIN, który sam ustawiasz. Ja dostaję tylko Twój adres e-mail. Samo zdjęcie paragonu leci do AI od Google i wraca jako trzy słowa i kwota. Instrukcja mówi o tym wprost, niczego nie ukrywam.

Jutro rano przy kasie: paragon, zdjęcie, telefon do kieszeni. Zanim dojdziesz do auta, wydatek jest zapisany, a liczniki przeliczone. A wieczorem pokazujesz to komuś i mówisz zdanie, które zmienia wszystko: „to zbudowałem ja”.

Ta strona za miesiąc będzie tu wisieć tak samo. Różnica jest po Twojej stronie: możesz być wtedy miesiąc po pierwszym automacie albo dalej przed nim.

To tyle. Zaczynamy?

Najgorszy scenariusz: tracisz pół godziny i wiesz, że to nie dla Ciebie. Najlepszy: przestajesz być widzem.

Otworzy się od razu na tej stronie.

Na jaki adres wysłać Ci link?

Zero spamu. Wypisujesz się jednym kliknięciem. Jak przetwarzam dane.

Gotowe. Instrukcja otwiera się poniżej.

P.S. Doczytałeś tutaj i dalej się wahasz? To jest 30 minut. Jeden odcinek serialu. Tylko że po serialu nie zostaje Ci działająca aplikacja.

TWÓJ PIERWSZY AUTOMAT

Kieszonkowy księgowy

Robisz zdjęcie paragonu. AI odczytuje kwotę, sklep i kategorię. Aplikacja zapisuje wydatek i pokazuje, ile poszło w tym tygodniu. Wszystko na Twoim koncie, pod Twoim adresem.

Aplikacja z zapisanym wydatkiem: Orlen, 287,45 zł, kategoria paliwo

Tak wygląda po skończeniu. Kategorię „paliwo” dopisało AI samo.

Usiądź przy komputerze. Klikanie w panelu i wklejanie kodu na telefonie to droga przez mękę. Budujesz przy komputerze, a używasz potem na telefonie i tam robisz zdjęcia paragonów. Ostatni krok to właśnie przeniesienie tego na telefon.

Osiem kroków, po kolei

Załóż darmowe konto (2 min)
Stwórz aplikację (3 min)
Wklej kod (3 min)
Podepnij bazę danych (4 min)
Weź darmowy klucz do AI (3 min)
Wklej klucz i ustaw PIN (4 min)
Pierwszy wydatek (2 min)
Wrzuć na ekran telefonu (1 min)

Możesz przerwać w dowolnym momencie. Zapamiętam, gdzie skończyłeś.

1

Załóż darmowe konto

Miejsce, w którym stanie Twoja aplikacja.

Twoja aplikacja będzie stała na Cloudflare. To ta sama firma, która trzyma pół internetu. Darmowy plan starcza na 100 000 otwarć aplikacji dziennie, a karty nie podajesz.

Otwórz stronę rejestracji

Otworzy się w nowej karcie, żebyś nie zgubił tej instrukcji. Strona jest po angielsku, ale wypełniasz dwa pola.

Wpisz swój adres e-mail.
Wymyśl hasło. Jeśli masz menedżer haseł, niech on je wygeneruje.
Kliknij niebieski Sign up.

Nie przegap kwadracika „Potwierdź, że jesteś człowiekiem” nad przyciskiem. Bez niego rejestracja nie ruszy. Zgodę na oferty (to niżej) możesz spokojnie zostawić pustą.

Potwierdź adres e-mail

Cloudflare wyśle Ci maila. Bez kliknięcia w niego panel będzie zablokowany, więc zrób to od razu.

Mail od Cloudflare z zaznaczonym przyciskiem Verify your email — Kliknij pomarańczowy **Verify your email**. Jeśli maila nie ma, sprawdź spam.

Zobaczysz okno „Verify your account”? To nie błąd. Panel tak wygląda do momentu kliknięcia w mail.

Po kliknięciu w mail wylądujesz w panelu Cloudflare, na stronie z pytaniem „What are we building today?”. Nic tam nie klikaj i nie wpisuj, wracaj tutaj.

Skąd wiesz, że gotowe

Jesteś w panelu Cloudflare i nie wyskakuje już żadne okno z prośbą o potwierdzenie.

2

Stwórz aplikację

Pusta aplikacja pod własnym adresem w internecie.

Zaraz zrobisz coś, co brzmi poważnie, a zajmie pięć kliknięć: postawisz w internecie działającą aplikację pod własnym adresem. Na razie pustą, kod wkleimy w następnym kroku.

Panel Cloudflare z zaznaczonym menu Workers and Pages oraz przyciskiem Create application — 1 - menu po lewej. 2 - przycisk tworzenia.

W menu po lewej wejdź w Compute, a pod nim Workers & Pages. Lista będzie pusta i tak ma być.
Kliknij niebieski Create application w prawym górnym rogu.
Wybierz Start with Hello World!. Reszta opcji jest dla programistów.
Skasuj wymyśloną nazwę i wpisz swoją, na przykład moje-wydatki.
Kliknij niebieski Deploy.

Lista sposobów utworzenia aplikacji z zaznaczoną opcją Start with Hello World — Punkt 3: opcja **Start with Hello World!**.

Pole nazwy aplikacji z wpisanym moje-wydatki oraz przycisk Deploy — Punkty 4 i 5: 1 - nazwa. 2 - Deploy.

Skasuj nazwę, którą Cloudflare wymyślił. Proponuje coś w stylu „bold-sunset-72ba”, a to będzie adres Twojej aplikacji. Wpisz coś, co zapamiętasz, na przykład moje-wydatki. Same małe litery i myślniki.

Strona gotowej aplikacji z zaznaczonym adresem kończącym się na workers.dev — To jest adres Twojej aplikacji. Zapisz go sobie, będzie potrzebny na końcu.

Zgubisz ten adres? Zawsze znajdziesz go tak samo: Workers & Pages w menu po lewej, potem kliknij nazwę swojej aplikacji. Adres jest na samej górze.

Skąd wiesz, że gotowe

Widzisz stronę swojej aplikacji, a na górze adres kończący się na .workers.dev. Po kliknięciu w niego otwiera się biała strona z napisem „Hello World!”.

3

Wklej kod

Twoja aplikacja zaczyna być księgowym, a nie napisem „Hello World”.

Teraz wstawiasz gotowy kod. Nie musisz go rozumieć ani niczego w nim pisać. Kopiujesz i wklejasz, tak jak przeklejasz numer konta do przelewu.

Podejrzyj kod

Edytor kodu Cloudflare z zaznaczonym obszarem kodu i przyciskiem Deploy — 1 - tu jest kod. 2 - przycisk Deploy.

W swojej aplikacji kliknij Edit code w prawym górnym rogu.
Kliknij w środek kodu po lewej stronie, potem Ctrl + A (na Macu Cmd + A). Cały stary kod się podświetli.
Ctrl + V. Twój kod wchodzi na miejsce starego.
Kliknij niebieski Deploy.

Edytor z wklejonym polskim kodem aplikacji i zaznaczonym przyciskiem Deploy — Po wklejeniu na górze zobaczysz polski opis. To znaczy, że trafiło dobrze.

Na dole edytora ma być zero błędów. Jeśli świeci się czerwona cyfra, kod wkleił się tylko częściowo. Powtórz od Ctrl + A.

Po kliknięciu Deploy zobaczysz napis, że wersja została zapisana. To wszystko, tak ma być. Aplikacja pod Twoim adresem pokaże teraz komunikat o braku PIN-u, bo PIN ustawiamy dopiero w kroku 6.

Chcesz coś zmienić? Na samej górze pliku jest sekcja USTAWIENIA: nazwa aplikacji, waluta, kategorie wydatków i miesięczny budżet. Jest tam też lista walut, które aplikacja rozpoznaje na paragonach, na start złotówki i euro. Tylko tam warto grzebać. Poniżej linii „Od tego miejsca w dół nie musisz nic rozumieć” niczego nie ruszaj.

Skąd wiesz, że gotowe

Na dole edytora świeci się zero błędów, a po kliknięciu Deploy pojawił się napis o zapisanej wersji.

4

Podepnij bazę danych

Miejsce, w którym aplikacja zapamięta Twoje wydatki.

Baza to po prostu miejsce na dane. Zakładasz ją raz i więcej do niej nie zaglądasz.

Najpierw załóż bazę

W menu po lewej wejdź w Storage & databases, a pod tym D1.
Kliknij Create Database.
Nazwij ją wydatki. Reszty ustawień nie ruszaj i zatwierdź przyciskiem Create.

Formularz tworzenia bazy danych z zaznaczonym polem nazwy — Wpisz nazwę i przewiń niżej po przycisk **Create**.

Teraz połącz ją z aplikacją

Wróć do swojej aplikacji: menu Workers & Pages, potem kliknij jej nazwę.
Wejdź w zakładkę Bindings.
Kliknij Add binding, wybierz z listy D1 database i zatwierdź niebieskim Add Binding.
W polu Variable name wpisz DB, wybierz bazę wydatki i zatwierdź.

Okno wyboru rodzaju połączenia z zaznaczoną pozycją D1 database i przyciskiem Add Binding — 1 - wybierz **D1 database** z listy. 2 - **Add Binding**.

Formularz połączenia z zaznaczonym polem Variable name, listą baz i przyciskiem Add Binding — 1 - wpisz DB. 2 - wybierz bazę **wydatki**. 3 - zatwierdź.

Dwie duże litery: DB. Nie „db”, nie „baza”, nie „DB1”. Kod szuka dokładnie tej nazwy. Jak wpiszesz dobrze, przykład po prawej stronie okna sam zmieni się na env.DB. To Twoje potwierdzenie.

Schemat pokazujący aplikację połączoną z bazą D1 pod nazwą DB — Tak wygląda gotowe połączenie.

Nie szukaj przycisku zapisu. Po kliknięciu Add Binding połączenie jest gotowe od razu, a na schemacie od razu widać nowe pudełko.

Skąd wiesz, że gotowe

Na schemacie widzisz swoją aplikację połączoną z pudełkiem „D1 database” i podpisem DB obok.

5

Weź darmowy klucz do AI

To AI będzie czytało Twoje paragony.

Klucz to hasło, którym Twoja aplikacja przedstawia się Google. Darmowy poziom jest bezterminowy i nie prosi o kartę, a Twój automat zrobi kilkanaście zapytań dziennie przy limicie liczonym w tysiącach.

Otwórz Google AI Studio

Logujesz się swoim zwykłym kontem Google.

Przy pierwszym wejściu Google pokaże regulamin. Zaznacz tylko ten jeden wymagany kwadracik, zgody na oferty zostaw puste.
Kliknij Create API key w prawym górnym rogu. Otworzy się małe okno.
W oknie możesz nazwać klucz po swojemu, np. „Kieszonkowy księgowy”, żeby za pół roku wiedzieć, do czego jest.
Kliknij Create key. Klucz pojawi się na liście.

Okno tworzenia klucza z zaznaczonym polem nazwy i przyciskiem Create key — 1 - nazwa klucza. 2 - **Create key**.

Lista kluczy z zaznaczoną ikoną kopiowania — Tą ikonką kopiujesz klucz. Możesz to zrobić w dowolnym momencie, także jutro.

Nie musisz go nigdzie zapisywać. Wbrew temu, co piszą stare poradniki, klucz jest do skopiowania z tej listy zawsze.

Klucz jest jak hasło. Nie wysyłaj go nikomu, nie wklejaj w czacie i nie wrzucaj na zrzut ekranu.

Okno wygląda inaczej niż na obrazku? Google pokazuje różne wersje zależnie od tego, czy używałeś już jego narzędzi. Jeśli poprosi o wybór projektu, wybierz utworzenie nowego i nazwij go dowolnie. Reszta jest taka sama.

Skąd wiesz, że gotowe

Na liście masz swój klucz, a przy nim napis „Free tier”. Ikonka kopiowania działa.

6

Wklej klucz i ustaw PIN

Aplikacja dostaje dostęp do AI, a Ty zamek na drzwi.

Klucza nie wklejasz do kodu. Gdyby tam był, każdy, kto zobaczy Twój plik, mógłby go używać, zużywając Twój darmowy limit. Wklejasz go w osobne miejsce w panelu, do którego dostęp masz tylko Ty, a aplikacja bierze go sobie stamtąd.

W swojej aplikacji wejdź w zakładkę Settings. Na górze jest sekcja Variables and secrets.

Pusta sekcja Variables and secrets z zaznaczonym przyciskiem Add variable — Kliknij **Add variable**.

Okno dodawania zmiennej z zaznaczonym polem nazwy, wartości i przełącznikiem Secret — 1 - nazwa. 2 - wartość. 3 - przełącznik **Secret**.

W polu Key wpisz KLUCZ_AI, w polu Value wklej klucz skopiowany z Google. Zaznacz Secret. Kliknij Add 1 variable.
Kliknij Add variable jeszcze raz. Key: PIN, Value: cztery cyfry, które sam wymyślasz. Też zaznacz Secret i zatwierdź.

Nie szukaj przycisku „Zapisz”. Po kliknięciu Add 1 variable zmiana jest już zapisana, na stronie nie ma żadnego przycisku zapisu i nie musi być. Pasek „Unsaved changes” z przyciskiem Deploy pojawia się tylko wtedy, gdy coś kasujesz albo poprawiasz. Wtedy trzeba go kliknąć.

Nazwy przepisz co do litery, wielkimi literami, z podkreślnikiem. To nie ozdoba, aplikacja szuka dokładnie tych słów.

Zapomniałeś zaznaczyć „Secret”? Poznasz po tym, że w kolumnie Type widnieje Text, a wartość widać gołym okiem. Skasuj wtedy wiersz koszem po prawej, kliknij Deploy na pasku, który wyskoczy, i dodaj zmienną jeszcze raz.

PIN to zamek do Twojej aplikacji, nie hasło do Cloudflare ani do Google. Bez niego każdy, kto zna adres, zobaczyłby Twoje wydatki.

Lista z dwoma sekretami KLUCZ_AI i PIN, wartości ukryte — Tak ma wyglądać koniec. Wartości są ukryte, bo to sekrety.

Skąd wiesz, że gotowe

Na liście są dwie pozycje, KLUCZ_AI i PIN, obie z typem Secret i wartością „Value encrypted”.

7

Pierwszy wydatek

Sprawdzasz, czy AI naprawdę czyta.

Otwórz adres swojej aplikacji, ten kończący się na .workers.dev. Aplikacja poprosi o PIN, który przed chwilą ustawiłeś.

Aplikacja po zalogowaniu, zaznaczone pole tekstowe i przycisk zdjęcia paragonu — 1 - tu wpisujesz wydatek słowami. 2 - tu robisz zdjęcie paragonu.

Najpierw bez zdjęcia

Wpisz w pole coś takiego jak orlen tankowanie 287,45 i kliknij Zapisz. Kategorii nie podajesz, AI dopisze ją samo.

Zapisany wydatek: Orlen, 287,45 zł, kategoria paliwo — AI samo rozpoznało sklep, kwotę i kategorię „paliwo”.

Teraz paragon, i tu przesiądź się na telefon

Zdjęcie wygodnie zrobisz tylko telefonem. Prześlij sobie adres aplikacji, na przykład na Messengerze albo mailem, otwórz go na telefonie i wpisz ten sam PIN.

Potem kliknij Zdjęcie paragonu i pstryknij tak, żeby było widać dolną część z sumą. Najlepiej wychodzi przy dobrym świetle, z góry, bez zagięć.

Lista z trzema wydatkami odczytanymi ze zdjęć paragonów — Trzy prawdziwe paragony, każdy z jednego zdjęcia. Nazwy sklepów i kategorie AI dopisało samo.

Nie odczytało kwoty? Zrób zdjęcie jeszcze raz, ostrzej i z sumą w kadrze. Zawsze możesz też wpisać wydatek jednym zdaniem, tak jak wyżej.

Skąd wiesz, że gotowe

Wydatek pojawił się na liście, a liczniki „Ten tydzień” i „Ten miesiąc” przestały pokazywać zero.

8

Wrzuć na ekran telefonu

Żeby używać tego codziennie, a nie raz.

Żeby nie szukać adresu za każdym razem, dodaj aplikację na ekran główny. Będzie wyglądać i działać jak zwykła apka, tylko że niczego nie instalujesz i nie zajmuje miejsca.

Android (Chrome): trzy kropki w prawym górnym rogu, potem „Dodaj do ekranu głównego” (w nowszych wersjach „Zainstaluj aplikację”, to to samo).
iPhone (Safari): kwadracik ze strzałką na dole ekranu, potem „Do ekranu początkowego”.

Po co to komu. Automat, który wymaga szukania linku, umiera po trzech dniach. Ikona na ekranie to różnica między zabawką na jeden wieczór a czymś, czego naprawdę używasz.

Skąd wiesz, że gotowe

Na ekranie telefonu masz ikonę, która otwiera Twoją aplikację jednym dotknięciem.

✓

Zrobione

Masz działającą aplikację pod własnym adresem, z bazą danych i AI w środku. Nie kurs o tym, jak to działa. Działającą rzecz, której możesz używać jutro rano przy kasie.

Napisz mi, jak poszło. Odpowiadam na każdy mail, a jak coś się wysypało po drodze, wyślij zrzut ekranu, to zobaczę gdzie.

Napisz do mnie

Co dalej z tym zrobić

Ten sam sposób działa dla innych rzeczy: powiadomienie, gdy strona firmy przestanie działać, codzienne podsumowanie na telefon, formularz, który wysyła zgłoszenia tam, gdzie chcesz. Zmienia się treść, nie sposób.