Tygodniowe wyzwanie programistyczne — #7

By 20 October 2016 October 21st, 2016 Bez kategorii

Ostat­ni dzień zadań! Podekscy­towani? My bard­zo! Dzisi­aj, przed­staw­imy Wam zupełnie inne pode­jś­cie do pro­gramowa­nia. Pamię­ta­j­cie, by jutro również odwiedz­ić naszego blo­ga — czekać na Ciebie będzie pod­sumowanie całego tygodnia!

Dzisiejszy wstęp jest dla obu grup jest taki sam ;)

Pro­gra­mu­jąc najcześ­ciej zas­tanaw­iamy się jak to zro­bić, a znacznie rzadziej co mamy zro­bić. Jest prze­cież klient, biznes, anal­i­tyk, to oni opowiedzą nam o swoich potrze­bach. Jed­nak pię­kno kodu to to, że może zro­bić naprawdę wszystko.

Kodowanie może być piękne, inspiru­jące i artysty­czne! Cre­ative cod­ing to pro­gramowanie, którego celem jest ekpres­ja a nie funkc­ja. Wiz­ual­iza­c­je, muzy­ka, rekla­ma, prototypowanie…
Piękne przykłady tego pode­jś­cia zna­jdziecie na devart i cre­ative appli­ca­tions.

Wyzwanie dla początkujących

Przed przys­tąpi­e­niem do zada­nia, zas­tanów się nad rezul­tatem Two­jej wczo­ra­jszej pra­cy: Czego dowiedzi­ałeś się o swoich umiejęt­noś­ci­ach? Czego się nauczyłeś? Co zro­bisz z tą wiedzą?

Wybierz jed­ną z aplikacji z podanych wyżej stron, a następ­nie zas­tanów się, co musi­ałabyś zro­bić, żeby ją zaimplementować:
  • jaki był­by mod­el Two­jej aplikacji, z jakich ele­men­tów by się składała,
  • z jakich znanych Ci tech­nologii mogłabyś skorzystać,
  • jakie tech­nolo­gie (doty­czące czego) musi­ałabyś poz­nać, by móc ją zaimplementować?
  • co stanow­iło by najwięk­sze wyzwanie?
  • od czego tu i ter­az mogłabyś zacząć?
Wyko­rzys­taj to ostat­nie pytanie i pozostały czas i zacznij kodować. 

Nasza odpowiedź

My wybral­iśmy pro­jekt ‚społecznego’ mal­owa­nia: https://devart.withgoogle.com/#/project/17830303

W pro­jek­cie tym jest robot z pęd­zlem, którym może sterować (instru­u­jąc rob­o­ta, aby odt­warzał nasze ruchy) każdy zain­tere­sowany za pomocą odpowied­niej aplikacji.

Aplikac­ja składała by się z trzech komponentów:

  • sterowa­nia robotem
  • ‚zbiera­nia’ pole­ceń od użytkowników
  • aplikacji instalowanej na urządze­niu użytkown­ików pozwala­jącej na podgląd na żywo i przesyłanie swoich ruchów

Pier­wszy kom­po­nent musi­ał­by mieć coś wspól­nego z elek­tron­iką, najpraw­dopodob­niej użyli byśmy np. Rasp­ber­ryPi (dzię­ki temu moż­na by sterować nim z poziomu języ­ka Java). Część mechan­iczną z pewnoś­cią także byśmy wyko­rzys­tali gotową (np taką: https://shop.mime.co.uk/collections/frontpage/prod­uct­s/mearm-your-robot-nuka-cola-blue).

Dru­gi mod­uł pole­gał­by na zbiera­niu pole­ceń od użytkown­ików i wykony­wa­niu ich w określonej kole­jnoś­ci. Do tego mogli byśmy wyko­rzys­tać Spring MVC i ser­wisy RESTowe oraz bazę danych np. MySQL.

Trze­ci kom­po­nent — aplikac­ja zbier­a­ją­ca ruchy i polece­nia od użytkown­ików, z pewnoś­cią musi­ała­by dzi­ałać na urządzeni­ach mobil­nych. Jako pro­gramis­tom Javy, zapewne najproś­ciej by nam było stworzyć aplikację na Androida.

Dwa najtrud­niejsze ele­men­ty to obsłu­ga rob­o­ta i aplikac­ja mobil­na (która pozwalała­by na inter­akc­je graficzne i zbieranie oraz przesyłanie ‚gestów’). Z pewnoś­cią musielibyśmy nauczyć się, jak moż­na sterować robot­em za pomocą Rasp­ber­ryPi, a także jak tworzyć aplikac­je na Android (lub inne platformy).

Część, którą moglibyśmy zacząć już ter­az to ele­ment do zbiera­nia pole­ceń od różnych użytkown­ików przed przesłaniem ich do rob­o­ta. Moglibyśmy wyko­rzys­tać do tego nasz kurs Javy ( ;) ), ale z pewnoś­cią czekało by nas sporo pra­cy :) Może kiedyś, w następ­nym cyklu? :>

Wyzwanie dla praktyków

Przed przys­tąpi­e­niem do zada­nia, zas­tanów się nad rezul­tatem wczo­ra­jszej pra­cy: Czego dowiedzi­ałeś się o swoich umiejęt­noś­ci­ach? Czego się nauczyłeś? Co zro­bisz z tą wiedzą?

Zaim­ple­men­tuj swój włas­ny cre­ative cod­ing. Skup się na efek­cie, ekspresji, nie myśl o funkcjon­al­noś­ci­ach, clean code. Liczy się efekt wizualny/audio, a nie kod czy sposób działania.
Po 45 min takiego pro­gramowa­nia zas­tanów się:
  • co było najtrud­niejsze w takim podejściu?
  • czy jesteś zad­owolony z efek­tu jaki uzyskałeś?
  • co inter­ak­ty­wnego mógłbyś dodać do swo­jej aplikacji?
  • co musi­ałbyś zmienić, żeby była ona intere­su­ją­ca dla Twoich znajomych.

 

Nasza odpowiedź

Nasz pro­jekt ‚Cre­ative Cod­ing’ to prosty edy­tor, który pokazu­je jak bard­zo jesteśmy zden­er­wowani lub spoko­jni.  Całość zna­jdziesz tutaj: https://gist.github.com/jderda/ced39f6923598733ab5a27889e947588

Założe­niem było, żeby na pod­staw­ie szy­bkoś­ci pisa­nia kole­jnych znaków pokazać, czy użytkown­ik jest w danym momen­cie spoko­jny czy nie. Aby całość maksy­mal­nie uproś­cić, zde­cy­dowal­iśmy się wyko­rzys­tać przeglą­darkę inter­ne­tową i ‚czysty’ JavaScript. 

Algo­rytm dzi­ała­nia jest bard­zo prosty — za każdym razem, kiedy naciśnię­to przy­cisk, zapisu­je­my dokład­ny czas (z dokład­noś­cią do milisekund). Następ­nie co 50 milisekund sprawdza­my, ile cza­su upłynęło od ostat­niego naciśnię­cia przy­cisku i dzie­limy tą wartość przez 1000 (ponieważ ope­ru­je­my przy uży­ciu milisekund, oznacza to, że całkowi­ta zmi­ana z jed­nego koloru na dru­gi nastąpi w ciągu jed­nej sekundy). Kolor tła wyz­naczany jest przez oblicze­nie koloru pomiędzy niebieskim a czer­wonym, pro­por­cjon­al­nie do wylic­zonej wcześniej różni­cy cza­su. Dzię­ki temu widoczny jest efekt płyn­nego prze­jś­cia pomiędzy tymi dwoma kolorami.

Sam kod przez oso­by zaj­mu­jące się na codzień fron­ten­dem zostanie pewnie wydrukowany i powies­zony jako halloween’owy straszak ;) Niem­niej nie o jakość kodu chodz­iło, ale o osiąg­nię­cie efek­tu w jak­iś sposób wizualnego :)

Pamię­taj, że nowe zada­nia będą się pojaw­iać codzi­en­nie o godzinie 11. Rozwiąza­nia będziemy umieszczać pod zada­ni­a­mi kole­jnego dnia o godzinie 18. Nie zapom­nij podzielić się swoi­mi odpowiedzi­a­mi i prze­myśle­ni­a­mi na wydarze­niu na face­booku, a jak masz ochotę to też w komentarzu ;)!

Lin­ki do wszys­t­kich zadań zna­jdziesz w innym wpisie na naszym blogu. Powodzenia!