Nastoletni
Programiści

Logo Nastoletnich Programistów

Wakadog – devlog aplikacji internetowej na Hack Heroes

Wpis ten będzie miał charakter dziennika.

Hack Heroes to hackathon z okazji Code Weeka, czyli długiego tygodnia od 15. do 23. października. Więcej możecie o nim poczytać tutaj: http://apki.org/news/hack-heroes-wez-udzial-w-codeweekowym-hackathonie .

Pierwsza doba

23:53

Już od początku doby, tj. od północy do jakiejś czwartej zabrałem się za rozpoczynanie projektu. Odpalenie phpStorma, załadowanie wszystkich zależności na composerze i npm-ie. Rozrysowanie na kartce czegoś, na czym będę mógł się opierać podczas pisania i kodowania frontendu i backendu. Obmyślałem podstawowe funkcjonalności aplikacji i zabrałem się za pisanie najprostszego szkieletu backendu, żeby móc się skupić na frontendzie. Dlaczego tak? Lubię widzieć do czego piszę backend, a taki gotowy frontend motywowałby mnie do dalszego pisania. Z racji czasu na backend wybrałem Slim-a , a na frontend nic, prócz frameworka Materialize.css (który swoją drogą jest dużo słabszy niż wygląda, przez jedną dobę zdążył mi już sprawić nie jedną bolączkę).

Sama aplikacja nazywa się Wakadog . Inspirowane lekko Wakatime. Czytane łakadog , wymową podobnie do walk a dog . Do tego właśnie służyć będzie moja aplikacja, do wyprowadzania psów. Mamy na mapie obszar z markerami, które oznaczają psy, których właściciele nie mają czasu lub nie mogą z nimi wyjść i potrzebują z tym pomocy. Porównałbym to do bazy ogłoszeń, jak OLX, z ogłoszeniami psów do wzięcia na spacer. Odpłatnie czy nie, to już kwestia leżąca poza odpowiedzialnością aplikacji. Potencjalny wyprowadzacz dostaje całkiem kompletny zbiór informacji o psie oraz numer telefonu do kontaktu. Po spacerze wyprowadzacz może wystawić psu ocenę, do pięciu gwiazdek. Na dzień dzisiejszy wygląda to tak:

Mój cel na nadchodzącą noc to dokończyć podstawowe widoki we froncie, żeby móc się skupić na backendzie.

Druga doba

01:53

Formularz dodawania psiaka ukończony, jednak nie jestem specjalnie zadowolony z jego aspektów wizualnych. Cóż, jak będzie czas to się coś wymyśli.

Naciśnięcie na mapę w dowolnym miejscu tworzy marker i wpisuje kordynaty do pola poniżej. UX tego rozwiązania jest zdecydowanie do poprawy. Nie podoba mi się rozkład poszczególnych pól. Te dwie sekcje można by jakoś sensownie pod względem wizualnym zgrupować.

Narazie zostawiam frontend i zaczynam klepać pehapa. Jakieś podstawowe encje i repozytoria, jednak najpierw, biorę kartkę i długopis i rozpiszę sobie bazę danych co by później nie mieć z zaprojektowaniem relacji problemów, w końcu jest coraz późniejsza godzina w nocy.

Czwarta doba

20:02

Oj ciężko w dni szkolne; zdecydowanie mniej czasu na to przeznaczam, co widać na WakaTime (screen obok).

Wczoraj siedziałem nad Wakadog tylko jakieś półtorej godziny. Trochę czasu zajęło mi za to przygotowywanie obrazu wirtualnej maszyny z linuksem skonfigurowanym do moich potrzeb, aby jutro móc w szkole kontynuować moją pracę. Nic prócz drobnej optymalizacji, dodaniu kontrolera od landing page oraz napisaniu dwóch widoków, formularza logowania i rejestracji nie zrobiłem. Obmyślałem za to sposób, w jaki będe w Wakadog uwierzytelniał i autoryzował użytkownika. Wszystko rozpisałem na kartce, trochę pogumkowałem, popoprawiałem i ostatecznie wyszło mi to, co widać na zdjęciu w tym issue na GitLabie .

Dzisiaj natomiast wcielam w kod (hmm, ciekawy zwrot) to, co rozpisałem na kartce. Planuję skontaktować się z jednym z mentorów w celu porozmawiania na temat bezpieczeństwa pewnego rozwiązania nad którym się zastanawiam. Tyle na teraz, lecę dalej pisać.

Szósta doba

21:39

Minął dzień odkąd pisałem. Postaram się opisać co przez te dni robiłem.

Przedwczoraj udało mi się wcielić moje rozpiski w kod, z którego jestem na moment obecny zadowolony, a może i nawet dumny. Po hackathonie dopracuję go pod względem elastyczności, napiszę testy i opublikuję w oddzielnym repozytorium, żeby móc w przyszłości z niego korzystać.

Wczoraj z rana, w szkole, przez dwie lekcje implementowałem funkcjonalności formularza do logowania się. Swoją drogą pierwszy raz używałem linuksa jako systemu gościa do faktycznego developmentu i pracowało mi się całkiem przyjemnie. Postawiłem 64bitowego Debiana na Cinnamonie, jeżeli ktoś byłby ciekaw. Na iMacu 2015 27″ z przydzielonymi 4GB RAM działał bardzo dobrze.

Wieczorem zabrałem się za obackendowywanie formularza rejestracji, razem z tym doszedł też wybór walidatora. Wybór padł na symfony/validator jak niektórzy mogli się domyśleć. To, co popełniłem tamtego wieczoru było syfem i nie chcę o tym pamiętać. Cóż, teraz nie jest wspaniale, ale to za chwilę. Skończyłem wczoraj dosyć wcześnie, bo koło 22:00.

Przechodząc do dnia dzisiejszego, poprawiłem wczorajszy kod rejestracji na coś bardziej znośnego. Winę zwaliłem na slim/flash , który rozszerzyłem i zmodyfikowałem tak, aby akceptował coś innego niż tylko stringi. Możesz dowiedzieć się o co mi chodzi przeglądając commity z tego dnia. Dowiedziałem się telefonicznie, że termin oddawania prac został przesunięty o jedną dobę, a więc oddać projekt trzeba przed poniedziałkową północą.

Na ten moment udało mi się dodać dodawanie, usuwanie i moderację ocen. Lekko zmieniłem wygląd mapy, który będzie punktem wyjściowym nawigacji po stronie. Przede mną stoi obackendowanie dodawania psa. Gdy to zrobię, będę już na prostej do finiszu głównych funkcjonalności aplikacji i będę mógł się zabrać za drobne refaktoryzacje, optymalizacje czy poprawki wizualne.

Ósma doba

12:17

Dzisiaj już nie wieczorem tylko z rana.

Wczoraj dodałem edycję oraz usuwanie psiaków. Walidacja tego wszystkiego to jest jeden wielki syf , na który nie mam pomysłu jak go ogarnąć. Jednak działa dobrze. Poprawiłem też pole date w psiakach, które nie ma teraz jakiejś dziwnej wartości, gdy wyborem jest Kiedykolwiek , a wynosi po prostu null . Dodałem ustawienia konta, w których można zmienić pola konta (aktualnie tylko widoczna nazwa), zmienić hasło lub bezpowrotnie usunąć konto.

Na mojej liście todo pozostał widok psów, których jesteśmy właścicielami oraz strona landing. Biorę się za pracę. A, i swoją drogą, podrzucam tydzień z WakaTime, ponieważ mam darmowe konto i statystyki mi zaczną już znikać.

Po wysłaniu projektu

01.11.2016 00:19

Projekt ukończyłem na przeddzień terminu, nie jestem specjalnie dumny z kodu w poszczególnych kontrolerach, mówiąc ściślej chodzi mi o ten, związany z walidacją. To jest porażka. Jednak cała aplikacja działa. Ma sporo dziur bardzo banalnych do odkrycia, o których pomyślałem już po terminie oddawania projektów. Na GitLabie pozostało parę issues otwartych i nieukończonych. Jednak jestem zadowolony z tego, że skończyłem ten projekt w terminie. Gdyby przysiąść do tego już na spokojnie, można by poprawić wszystkie niedociągnięcia i stworzyć całkiem udany produkt.

Na planowanie, programowanie oraz przeglądanie dokumentacji przeznaczyłem w 10 dni około 50 godzin, czyli średnio 5h dziennie, co jest przy takim okresie czasu moim osobistym rekordem. Na WakaTime załapałem się nawet do top100. Dzięki temu projektowi dowiedziałem się co to znaczy pracować z deadlinem .

Pojutrze (tj. 03.11.2016) rozpoczyna się głosowanie internetowe na najlepszy projekt. Na moment obecny pozostaje mi czekać na otwarcie głosowania oraz na oficjalne wyniki. Małe statystyki odnośnie hackathonu: udział wzięły 62 drużyny reprezentowane przez 193 zawodników, projekty końcowe złożyło finalnie 38 drużyn, czyli 61% drużyn złożyło ukończone projekty.

Na dole posta zdjęcie, które zrobiłem sobie podczas pisania. Bardzo mi się podoba.

Podsumowanie

Cały kod znajduje się na GitLabie pod tym linkiem . Wersja online będzie pod tym linkiem (jeżeli prowadzi do 404, już ją zdjąłem, jednak dodałem parę stron na https://archive.org/ ).

Wręczenie nagród

Cały hackathon został oficjalnie zakończony wręczeniem nagród w budynku Taurus w Warszawie na Mokotowie. Filmik (niestety ze słabym audio) możecie obejrzeć:

Albert

Główny admin Nastoletnich Programistów. Czuje się dobrze w webdeveloperce. Lubi jeździć na rowerze. Na co dzień uczeń technikum informatycznego.

Zobacz wszystkie posty tego autora →

Komentarze