Wtorek, 21 kwietnia, rano. W aplikacji mobilnej nie ma żadnej mapy. Jest lista ogłoszeń, lista wydarzeń, lista grup — wszystko w formie scroll’owanej po ekranie. Na produkcie sąsiedzkim, gdzie cała sprawa polega na gdzie, to jest dziwne. Wiem o tym od miesięcy. Po prostu nie miałem na to dnia.
Środa wieczór, 22 kwietnia. W aplikacji jest mapa. Można na niej zobaczyć pinki ogłoszeń lokalnej wymiany, prac dorywczych i wydarzeń. Można narysować okrąg, żeby ustalić, w jakim zasięgu dana rzecz ma być widoczna. Z dowolnej listy można jednym przyciskiem przeskoczyć na mapę z tym samym filtrem. Wszystko ma testy wizualne.
Pomiędzy tymi dwoma momentami jest dwanaście commitów. Tak naprawdę wygląda nowa funkcja w aplikacji — i to jest historia, której zwykle nie pokazuję na blogu, bo wydaje się techniczna. Ale to jest pokazanie, jak pisze się solo z AI: małymi krokami, każdy commit jest jednym wnioskiem.
Krok 6 i 8 — pierwsze, co użytkownik widzi
Nie zacząłem od kroku 1. Numeracja wzięła się stąd, że pierwsze pięć kroków zrobiłem w trzech wcześniejszych sesjach pracy (research, podpięcie biblioteki mapowej, pusty komponent). Pierwszy widzialny efekt — ekran mapy z prawdziwym kafelkiem i pinami — to dopiero krok szósty.
Krok ósmy, ten sam wieczór, dodał ten ekran do nawigacji jako osobną zakładkę w głównej belce. Tu już można było odpalić apkę i zobaczyć, że coś nowego pojawiło się obok listy.
Każdy z tych kroków to był osobny branch w gicie. Nie z paranoii — z prozaicznego powodu: każda sesja pracy zaczyna się od czystego miejsca i kończy zamknięciem brancha. To zmusza mnie do tego, żeby krok miał jeden cel, i żeby na koniec dnia było widać, co się zmieniło.
Krok 7 — okrąg, który wygląda prosto, a nie jest
Krok siódmy — tryb rysowania, w którym użytkownik palcem zaznacza okrąg na mapie. Wygląda jak banał. Nie jest.
Po pierwsze: trzeba wiedzieć, gdzie ma być środek (tam, gdzie zaczął rysować) i jak duży ma być promień (tam, gdzie podniósł palec). Po drugie: użytkownik nie ma znać metrów — operuje ekranem. Trzeba mu pokazać liczby: „obejmie około 600 metrów”. Po trzecie: nie wszystkie okręgi mają sens — 1 km to dzielnica, 50 km to pół województwa. Musi być bariera, która nie wpuszcza absurdów.
Ten jeden krok zajął najwięcej z całej dwudniówki, bo było w nim trzy małe problemy do rozwiązania, nie jeden.
Kroki 9, 10, 11 — wpinanie się w resztę aplikacji
Mapa sama sobie nie wystarcza. Musi gadać z tym, co już jest. Krok dziewiąty podłączył ekrany tworzenia treści — kiedy dodajesz lokalne ogłoszenie albo quick joba, możesz teraz przejść do mapy w trybie rysowania i wrócić z ustalonym zasięgiem.
Krok dziesiąty dodał maleńki, ale ważny detal: po dodaniu treści użytkownik dostaje toast z mapką pokazującą, gdzie ta treść jest widoczna. Wcześniej toast mówił „dodane”. Teraz pokazuje. Inna jakość informacji.
Krok jedenasty zrobił przejście w drugą stronę: na każdej liście (ogłoszenia, prace, wydarzenia) pojawił się przycisk „pokaż na mapie” zachowujący aktualny filtr. Adres URL ekranu mapy przyjmuje typy treści jako parametr — żeby deep link z innego miejsca aplikacji prowadził od razu do właściwego widoku.
Krok 12 — testy, które chronią to wszystko
Ostatni krok, dwunasty, dorzucił trzy warstwy testów: testy komponentów mapy w izolacji, testy wizualne (porównanie obrazu ekranu z punktem odniesienia — wymuszają, żeby wygląd nie ucierpiał przy refaktorach) i test integracyjny, który symuluje użytkownika otwierającego apkę, klikającego na mapę, rysującego okrąg i wracającego do listy.
Testy wizualne są kosztowne na początku — generujesz „złoty obrazek” dla każdego ekranu — ale potem stoją na straży tego, że nikt przypadkowo nie zmieni odstępu o 2 piksele, koloru o cień, czy nie przesunie przycisku o pół centymetra. Dla aplikacji, która ma być spójna wizualnie i czytelna dla seniora, to nie jest luksus.
Co z tego dla foundera, który czyta
Pytanie, które tu się nasuwa: „skąd masz na to czas?”. Nie mam. Po prostu trzymam się jednej zasady: krok to ma być jedna decyzja, jeden commit, jedno zamknięte zadanie. Bez tego dwudniowe okno znika na refaktor, debug, próbę ogarnięcia trzech rzeczy naraz.
Nie wymyśliłem tej mapy z góry, przed pierwszą linią kodu. Wymyśliłem ją po drodze — krok ósmy wynikał z kroku szóstego, kroku dziewiątego nie było w planie do momentu, w którym kończyłem siódmy. To nie jest „bo solo, bo nie planuję”. To jest świadome — przy nowym ekranie trudno zaprojektować wszystko z góry, bo nie wiesz jeszcze, co użytkownik będzie próbował zrobić po zobaczeniu pierwszej wersji.
Kiedy ktoś otworzy mapę i zobaczy pin oddany sąsiada cztery ulice dalej, nie zauważy, że ta funkcja powstała w dwie doby z dwunastu malutkich decyzji. Zobaczy po prostu, że ten ktoś coś oddaje. To jest cała różnica.