Tygodniowe wyzwanie programistyczne – #7

By 20 października 2016Bez kategorii
1

Ostatni dzień zadań! Podekscytowani? My bardzo! Dzisiaj, przedstawimy Wam zupełnie inne podejście do programowania. Pamiętajcie, by jutro również odwiedzić naszego bloga – czekać na Ciebie będzie podsumowanie całego tygodnia!

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

Programując najcześciej zastanawiamy się jak to zrobić, a znacznie rzadziej co mamy zrobić. Jest przecież klient, biznes, analityk, to oni opowiedzą nam o swoich potrzebach. Jednak piękno kodu to to, że może zrobić naprawdę wszystko.

Kodowanie może być piękne, inspirujące i artystyczne! Creative coding to programowanie, którego celem jest ekpresja a nie funkcja. Wizualizacje, muzyka, reklama, prototypowanie…
Piękne przykłady tego podejścia znajdziecie na devart i creative applications.

Wyzwanie dla początkujących

Przed przystąpieniem do zadania, zastanów się nad rezultatem Twojej wczorajszej pracy: Czego dowiedziałeś się o swoich umiejętnościach? Czego się nauczyłeś? Co zrobisz z tą wiedzą?

Wybierz jedną z aplikacji z podanych wyżej stron, a następnie zastanów się, co musiałabyś zrobić, żeby ją zaimplementować:
  • jaki byłby model Twojej aplikacji, z jakich elementów by się składała,
  • z jakich znanych Ci technologii mogłabyś skorzystać,
  • jakie technologie (dotyczące czego) musiałabyś poznać, by móc ją zaimplementować?
  • co stanowiło by największe wyzwanie?
  • od czego tu i teraz mogłabyś zacząć?
Wykorzystaj to ostatnie pytanie i pozostały czas i zacznij kodować. 

Nasza odpowiedź

My wybraliśmy projekt ‚społecznego’ malowania: https://devart.withgoogle.com/#/project/17830303

W projekcie tym jest robot z pędzlem, którym może sterować (instruując robota, aby odtwarzał nasze ruchy) każdy zainteresowany za pomocą odpowiedniej aplikacji.

Aplikacja składała by się z trzech komponentów:

  • sterowania robotem
  • ‚zbierania’ poleceń od użytkowników
  • aplikacji instalowanej na urządzeniu użytkowników pozwalającej na podgląd na żywo i przesyłanie swoich ruchów

Pierwszy komponent musiałby mieć coś wspólnego z elektroniką, najprawdopodobniej użyli byśmy np. RaspberryPi (dzięki temu można by sterować nim z poziomu języka Java). Część mechaniczną z pewnością także byśmy wykorzystali gotową (np taką: https://shop.mime.co.uk/collections/frontpage/products/mearm-your-robot-nuka-cola-blue).

Drugi moduł polegałby na zbieraniu poleceń od użytkowników i wykonywaniu ich w określonej kolejności. Do tego mogli byśmy wykorzystać Spring MVC i serwisy RESTowe oraz bazę danych np. MySQL.

Trzeci komponent – aplikacja zbierająca ruchy i polecenia od użytkowników, z pewnością musiałaby działać na urządzeniach mobilnych. Jako programistom Javy, zapewne najprościej by nam było stworzyć aplikację na Androida.

Dwa najtrudniejsze elementy to obsługa robota i aplikacja mobilna (która pozwalałaby na interakcje graficzne i zbieranie oraz przesyłanie ‚gestów’). Z pewnością musielibyśmy nauczyć się, jak można sterować robotem za pomocą RaspberryPi, a także jak tworzyć aplikacje na Android (lub inne platformy).

Część, którą moglibyśmy zacząć już teraz to element do zbierania poleceń od różnych użytkowników przed przesłaniem ich do robota. Moglibyśmy wykorzystać do tego nasz kurs Javy ( ;) ), ale z pewnością czekało by nas sporo pracy :) Może kiedyś, w następnym cyklu? :>

Wyzwanie dla praktyków

Przed przystąpieniem do zadania, zastanów się nad rezultatem wczorajszej pracy: Czego dowiedziałeś się o swoich umiejętnościach? Czego się nauczyłeś? Co zrobisz z tą wiedzą?

Zaimplementuj swój własny creative coding. Skup się na efekcie, ekspresji, nie myśl o funkcjonalnościach, clean code. Liczy się efekt wizualny/audio, a nie kod czy sposób działania.
Po 45 min takiego programowania zastanów się:
  • co było najtrudniejsze w takim podejściu?
  • czy jesteś zadowolony z efektu jaki uzyskałeś?
  • co interaktywnego mógłbyś dodać do swojej aplikacji?
  • co musiałbyś zmienić, żeby była ona interesująca dla Twoich znajomych.

 

Nasza odpowiedź

Nasz projekt ‚Creative Coding’ to prosty edytor, który pokazuje jak bardzo jesteśmy zdenerwowani lub spokojni.  Całość znajdziesz tutaj: https://gist.github.com/jderda/ced39f6923598733ab5a27889e947588

Założeniem było, żeby na podstawie szybkości pisania kolejnych znaków pokazać, czy użytkownik jest w danym momencie spokojny czy nie. Aby całość maksymalnie uprościć, zdecydowaliśmy się wykorzystać przeglądarkę internetową i ‚czysty’ JavaScript. 

Algorytm działania jest bardzo prosty – za każdym razem, kiedy naciśnięto przycisk, zapisujemy dokładny czas (z dokładnością do milisekund). Następnie co 50 milisekund sprawdzamy, ile czasu upłynęło od ostatniego naciśnięcia przycisku i dzielimy tą wartość przez 1000 (ponieważ operujemy przy użyciu milisekund, oznacza to, że całkowita zmiana z jednego koloru na drugi nastąpi w ciągu jednej sekundy). Kolor tła wyznaczany jest przez obliczenie koloru pomiędzy niebieskim a czerwonym, proporcjonalnie do wyliczonej wcześniej różnicy czasu. Dzięki temu widoczny jest efekt płynnego przejścia pomiędzy tymi dwoma kolorami.

Sam kod przez osoby zajmujące się na codzień frontendem zostanie pewnie wydrukowany i powieszony jako halloween’owy straszak ;) Niemniej nie o jakość kodu chodziło, ale o osiągnięcie efektu w jakiś sposób wizualnego :)

Pamiętaj, że nowe zadania będą się pojawiać codziennie o godzinie 11. Rozwiązania będziemy umieszczać pod zadaniami kolejnego dnia o godzinie 18. Nie zapomnij podzielić się swoimi odpowiedziami i przemyśleniami na wydarzeniu na facebooku, a jak masz ochotę to też w komentarzu ;)!

Linki do wszystkich zadań znajdziesz w innym wpisie na naszym blogu. Powodzenia!

  •  
  •  
  •  
  •  
  •