Jak stworzyłem mój pierwszy program .exe dla Windows z Claude Code i Codexem?

Minęły dwa miesiące, odkąd vibe-koduję, najpierw z Claude Code , potem z Codex CLI. W ostatnich tygodniach miałem sporo tokenów pod ręką i mało projektów, więc rzuciłem się, dla czystej przyjemności, w tworzenie narzędzia do słuchania dokumentów audio i jednoczesnego ich adnotowania (coś jak połączenie Audible i Kindle). Ostatecznie okazało się naprawdę przydatne: moi rodzice, których wzrok dość mocno się pogorszył, potrzebują go, aby czytać im książki na głos dzięki AI. Postanowiłem zrobić wersję jako program dla Windows (prosty .exe), żeby mogli go zainstalować na swoim komputerze.

To pierwszy raz, kiedy tworzę oprogramowanie. Chociaż mam trochę doświadczenia, absolutnie nie jestem programistą, wiem, co to algorytm, i napisałem sporo skryptów do automatyzacji pracy (w marketingu). Ale nigdy niczego nie kompilowałem i nawet nie wiem, czym jest Electron.

Kiedy pracowałem (w marketingu) dla firmy software’owej, szczególnie podziwiałem zespoły Product Management (które wymyślają funkcje) i zespół QA (quality assurance których praca polega tylko na znajdowaniu błędów i luk). Z moim własnym oprogramowaniem w końcu mogłem „pobawić się” w product management i QA. Tak!!

Wpisuję ten prompt do chatGPT.

Chcę stworzyć oprogramowanie typu audible działające jako lokalna aplikacja webowa w Windows. Można przesyłać URL-e, ale także pliki epub, html, txt, pdf. Po przesłaniu pliku rozdziały będą automatycznie wykrywane. W lewej kolumnie mamy przyciski "prześlij plik", "prześlij URL", "przejdź do biblioteki", po kliknięciu na bibliotekę po prawej stronie widzimy listę już przesłanych plików; można je sortować według daty dodania lub od A do Z, lub od Z do A, można też zmienić tytuł pliku, można łatwo usunąć każdy plik. Aby rozpocząć słuchanie pliku, klikamy na tytuł pliku, wyświetla się tekst pliku plus przyciski odtwarzania, przejścia o paragraf/rozdział, lista rozdziałów, plus wybór języków (EN, FR, VN), głosów (mężczyzna/kobieta), typów głosów, szybkości, tonacji. Oprogramowanie musi wyświetlać aktualnie odtwarzany paragraf i zapisywać pozycję, jeśli zatrzymamy lub zamkniemy program. Zaproponuj odpowiedni UI, masz jakieś dodatki lub sugestie ulepszeń? 
  

chatGPT proponuje kilka ulepszeń, wprowadzam pewne zmiany, troszkę wyzwanie. Dochodzimy do szczegółowego planu, potem generuje makiety, które bardzo mi się podobają:

Uważam je za naprawdę dobre i pytam o prompt dla Claude Code , aby faktycznie napisać oprogramowanie. Zaczynamy od trybu planowania, żeby zatwierdzić plan techniczny, a potem ruszamy!

Projekt jest podzielony na kilka faz, Claude Code koduje każdą fazę, zatrzymuje się, sprawdzam, daję opinie, poprawia, a potem przechodzimy do następnej fazy.

Szkielet oprogramowania powstaje bardzo szybko i za każdym razem mogę go „dotknąć” przed sugerowaniem zmian.

Bardzo, bardzo lubię ten proces, wymaga dużo myślenia, aby UI było łatwe w użyciu i logiczne, i dodawanie funkcji, o których nikt nie myśli, ale każdy uważa je za przydatne! To nie znaczy, że mało przycisków to mało pracy, bo właśnie praca została wykonana z wyprzedzeniem, aby było jak najmniej przycisków i kliknięć.

Przypomina mi to lunch, podczas którego mój były menedżer powiedział mi 13 lat temu, że widzi mnie w zawodzie, w którym byłbym mostem między ekspertami a programistami, czyli tłumaczyłbym potrzeby „biznesowe” na specyfikacje dla programistów… coś w rodzaju wewnętrznego Product Managera. W tamtym czasie timing nie był dobry, żebym znowu się przekwalifikował, ale to pokazuje, że był tak wizjonerski i intuicyjny, że widział dla mnie właściwą ścieżkę. Jeśli masz w swoim otoczeniu kogoś tak wizjonerskiego i intuicyjnego, zaproponuj mu lunch, to będzie skuteczniejsze niż bilans kompetencji.

Ryzyko z tego typu oprogramowaniem to bezpieczeństwo. Pliki pdf i epub znalezione w Internecie mogą zawierać skrypty, które się wykonują i mogą zniszczyć komputer, więc trzeba poprosić Claude Code o maksymalne zabezpieczenie.

W tym celu stworzyłem agenta specjalizującego się w cyberbezpieczeństwie, agenta specjalizującego się w UX/UI oraz agenta QA – którzy audytują każdą fazę projektu, śledzą i poprawiają błędy.

Do głosów używam zarówno głosówEdge TTS (darmowe, wymaga połączenia z Internetem), jak i Microsoft (darmowe, offline, ale mniej naturalne).

Odkryłem, że „kompilacja oprogramowania” jest na końcu procesu. Electron pozwala spakować interfejs webowy z Chromium i Node.js, aby zrobić z niego klasyczną aplikację Windows. Na końcu procesu otrzymuje się plik instalacyjny w formacie .exe, ale pozostaje jeszcze przetestować oprogramowanie na innym komputerze (moich rodziców), automatycznie raportować błędy i zarządzać aktualizacjami (wkrótce).

Moje ulubione rzeczy

1. Automatyczne dzielenie dokumentu na rozdziały: to był delikatny i trudny punkt, ponieważ trzeba pokryć szeroki wachlarz formatów i źle sformatowanych plików. Użyłem kilku programów do czytania AI i wszystkie mają duże trudności z rozdziałami.
2. Zaznaczanie i adnotacje: uwielbiam zaznaczać i robić adnotacje – i uwielbiam wchodzić w tryb „pełnego zaznaczania”, mysz zamienia się w zakreślacz. To punkt, który poprawiłem w porównaniu z Kindle, gdzie trzeba było 2 kliknięcia, aby zaznaczyć cokolwiek. Można łatwo eksportować zaznaczenia i adnotacje.
3. Wietnamskie głosy : jestem bardzo zadowolona z jakości wietnamskich głosów, testowałam inne aplikacje i nie podobało mi się to tak bardzo jak moje oprogramowanie 🙂 mam nadzieję, że moi rodzice też będą zadowoleni
4. A poza kosztami rozwoju, które zapłaciłem AI, to oprogramowanie będzie GRATIS w użyciu
5. Czysty design, nie jestem profesjonalistą w UX UI, ale uważam, że AI i ja poradziliśmy sobie dobrze!
6. Oprogramowanie zarządza biblioteką książek na komputerze, ale otwiera także dostęp do smartfona przez sieć lokalną (ponieważ nie mam ochoty tworzyć aplikacji na iPhone’a ani strony internetowej). Na smartfonie to wersja lekka, która zachowuje się prawie jak Audible. Ale z możliwością śledzenia tekstu jednocześnie z audio (jeśli się chce).

Nie znałam żadnej z tych technologii (poza SQL i CSS) do 3 dni temu 😀 Vibe coding nie polega tylko na napisaniu wielkiego promptu i czekaniu, aż AI zrobi wszystko. Trzeba podzielić projekt na małe kroki, przetestować każdą funkcję, wychwycić dziwne zachowania i precyzyjnie przeformułować to, czego chcemy (można też zmienić zdanie w międzyczasie).

Wciąż brakuje zaawansowanych funkcji, ale jestem bardzo zadowolona z wersji v1. Zostawmy bardziej zaawansowane funkcje na v1.1, 1.2… Przewidziałam również podstawy niezbędne do przyszłego zarządzania raportami błędów i aktualizacjami, na wypadek gdybym zdecydowała się rozpowszechnić oprogramowanie szerszemu gronu odbiorców.