Cześć. prawdopodobnie wielu z was w szkole miało klasowe “mikołajki”. Na czym to polegało? Na początku było losowanie. Była jedna wielka pula w której znajdowały się losy z imieniem i nazwiskiem każdej osoby w klasie. Następnie, każda osoba losowała jedną osobę, której miała kupić prezent. Oczywiście, ta osoba nie może się dowiedzieć od kogo ten prezent dostanie (hehehe). Kolejny warunkiem było to, iż nie można kupić prezentu samemu sobie.
AKTUALIZACJA! Nowa wersja aplikacji Santa App na rok 2018 pod tym samym linkiem Po więcej informacji zapraszam tutaj.
Dlaczego o tym mówię?
W tym roku, z paroma kolegami postanowiliśmy zrobić w naszym gronie takie same mikołajki. Sentymentalna podróż w czasie, miły gest i tak dalej. Problemem jednak jest to, iż “nie chodzimy razem do klasy” i takie losowanie przeprowadzić gdy wszyscy są wręcz w rozjazdach jest ciężkie… Na szczęście, znaleźliśmy rozwiązanie, które i wam może się przydać
Zrobiłem prostą aplikację – SantaApp!
SantaApp – jest to prosta aplikacja webowa, w której możemy tworzyć grupy mikołajkowe i robić wewnętrzne losowania. O tym, komu kupujemy prezent, dowiemy się tylko my. Od strony technicznej, pierwszy raz skorzystałem z Firebase. Dzięki temu nie musiałem tworzyć zaawansowanego back-endu + logowanie dzięki facebooka jest banalnie proste. Manipulowanie danymi wg mnie nie do końca jest intuicyjne, ale to już rozmowa na inny temat. Aplikacja była stworzona w 2-3 wieczory, 6 grudnia tuż tuż, więc zaimplementowałem to używając znanego mi frameworka – Angular (już w wersji 5). Implementacja skomplikowana nie jest, część rzeczy można było pewnie uprościć. Niemniej, aplikacja swoją rolę spełnia. Strona z aplikacją jest hostowana na GitHub Pages, a każda nowa wersja jest automatycznie uploadowana na stronę dzięki odpowiedniej konfiguracji Travis CI. Kod źródłowy jest oczywiście “otwarty”, dostępny tutaj.
Jak używać aplikacji?
Użycie aplikacji jest bardzo proste. Warunkiem jest konto na facebooku, gdyż jego będziemy używać w losowaniach. Po przejściu na stronę główną aplikacji – https://arturczopek.github.io/santa-app/ – zobaczymy prostą i klimatyczną stronę logowania. Oczywiście, aby się zalogować, należy wcisnąć przycisk “Sign in with Facebook”
Po logowaniu możemy zobaczyć dwie kolumny – kolumna z losowaniami do których dołączyć możemy oraz kolumnę z losowaniami w których uczestniczymy bądź uczestniczyliśmy. Obie kolumny prawdopodobnie będą puste. Przykładowo, kolumna z dostępnymi losowaniami.
Załóżmy, iż chcemy stworzyć nasze pierwsze losowanie. Nie ma problemu. W prawym dolnym rogu jest przycisk z ikonką plusa, znany jako “floating action button”.
Po naciśnięciu przycisku, możemy ujrzeć bardzo prosty kreator giełdy, który wymaga tylko tytułu, prostego opisu oraz hasła. Nie zapomnij hasła! Hasło jest potrzebne do uruchomienia losowania, które może przeprowadzić tylko twórca oraz do dołączenia do losowania.
Dla przykładu, stworzę losowanie z nazwą, hasłem oraz opisem “blog”. Po utworzeniu losowania, powinniśmy zobaczyć komunikat, iż tworzenie przebiegło pomyślnie, okno modalne zniknie, a w kolumnie z naszymi losowaniami powinniśmy zobaczyć odpowiednią kartę z losowaniem.
Jak widzimy, mamy status “ownera” (posiadacza), a więc możemy uruchomić losowanie. Każdy uczestnik natomiast (zielony tag “participate”) może zobaczyć listę uczestników.
No dobrze, ale jak takim uczestnikiem zostać. Załóżmy, iż logujemy się jako drugi użytkownik i chcemy dołączyć do losowania “blog”. Potrzebujemy znać hasło. Załóżmy, iż je znamy. o ile losowanie jeszcze się nie odbyło to w dostępnych losowaniach powinniśmy ujrzeć bardzo podobną kartę.
Widzimy, iż jest tylko tag “active”, który informuje nas o tym, iż losowanie jeszcze się nie odbyło. Jedyną akcją, jaką możemy wykonać jest “join”, czyli dołączenie do losowania. Spróbujmy więc dołączyć. Powinno nam ukazać się okienko z prośbą o podanie hasła, które znamy.
Po kliknięciu przycisku “join”, powinniśmy ujrzeć komunikat o powodzeniu wykonania akcji, a następnie lista z naszymi losowaniami powinna być zaaktualizowana:
Widzimy, iż uczestniczymy w tym losowaniu, oraz iż losowanie pozostało aktywne. Statusu “ownera” nie mamy, a więc nie możemy losowania uruchomić. Możemy natomiast podejrzeć innych uczestników.
Dobrze, przejdźmy ponownie do roli twórcy losowania. Załóżmy, iż kilka osób w międzyczasie dołączyło. Najwyższy czas aby uruchomić losowanie. W tym celu należy kliknąć link z napisem “draw”, a następnie podać hasło, które ustawiliśmy wcześniej:
Po udanym losowaniu, zaaktualizowana karta z losowaniem powinna pojawić się w naszych losowaniach i powinna wyglądać tak:
Jak widać, losowanie jest już zakończone (tag “finished”), natomiast w akcjach możemy zobaczyć wszystkich uczestników oraz naszego wylosowanego szczęśliwca Nie będę pokazywać jak to okienko wygląda, niech pozostanie to niespodzianką
Podsumowanie
Jak widzicie, na każdy problem można znaleźć rozwiązanie. Problem był dość prosty, ja mogłem trochę się podszkolić oraz poznać nową technologię, a reszta znajomych jest zadowolona z zaproponowanego rozwiązania. Kto wie, może macie podobny problem i wam go właśnie rozwiązałem? Programistów zapraszam do robienia review i pull requestów
