Tak! Wygraliśmy Facebook World Hack 2012: Warsaw. To była pierwsza tego typu impreza organizowana przez Facebook w Polsce. Warszawa obok Buenos Aires i Vancouver była jedną z 12 lokacji na mapie, w których zmagali się developerzy z wielu stron świata implementując nietuzinkowe rozwiązania z wykorzystaniem Facebook API.
Teraz, kiedy emocje już trochę opadły i powoli wracamy do naszych codziennych obowiązków w Megafoni.pl chcieliśmy przedstawić Wam nasz projekt, który zdobył nagrodę dla najlepszej implementacji Open Graph oraz główną nagrodę w konkursie World Hack 2012 w Warszawie.
Dziel się akcją na Facebooku
Na konferencji f8 w 2011 roku Mark Zuckenberg zdefiniował i spopularyzował określenie frictionless sharing. W skrócie chodzi o to, że użytkownicy mogą podzielić się swoją aktywnością po prostu ją wykonując – bez szukania i klikania przycisku “Podziel się” lub innego podobnego. Wystarczy, że zaczną czytać jakiś artykuł (na przykład ten – Blog Megafoni ma zaimplementowane frictionless sharing :) lub odtworzą piosenkę w Spotify lub Deezer, a informacja o tym znajdzie się na ich Timeline.
Image may be NSFW.
Clik here to view.
Kilka dni przed Facebook World Hack zaczęliśmy myśleć nad projektem, który moglibyśmy tam stworzyć. Zaczęliśmy się zastanawiać czy można pójść jeszcze o krok dalej i zintegrować akcje wykonywane w rzeczywistym świecie z Facebookiem za pomocą Open Graph. Wyobraźcie sobie, że przejście przez próg Waszego biura automatycznie uruchomi ekspres do kawy i opublikuje checkin na Facebooku, albo że montujecie w swoim rowerze dynamo zintegrowane z komputerem, które każdego dnia pozwala Wam się pochwalić przed znajomymi ilością wygenerowanego prądu. Może brzmieć nieziemsko? To dobrze :).
Istnieje wiele pożytecznych akcji, którymi rzeczywiście chcielibyśmy się w ten sposób dzielić: na przykład tym, że podlewamy nasze kwiaty…
Panie i Panowie: “Flower Power”!
“Flower Power” jest aplikacją, która za pomocą Arduino i czujników wilgotności gleby informuje znajomych, że Twój kwiatek został podlany a w przypadku jego zaniedbania właściciel otrzymuje powiadomienie na Facebooku. Cały system składał się z kilku elementów: Arduino, serwera odbierającego wyniki przez USB i serwera z aplikacją webową.
Dzięki Arduino badanie wilgotności było banalnie proste. Tak wygląda kod odczytujący wilgotność i wysyłający pomiar co 2 sekundy:
Proste, prawda? :) Arduino podłączyliśmy do komputera, który odbierał dane z pomocą phpserial i przesyłał je dalej do serwera głównego w chmurze Amazon Web Services. Mając już dane mogliśmy określić kiedy wykonywać poszczególne akcje.
Czujniki wilgotności działają w skali od 0 do 1000 gdzie 0 oznacza bardzo sucho, a 1000 bardzo wilgotno. Czujniki skalibrowane były tak, że podlanie identyfikowaliśmy kiedy nowy pomiar był większy od poprzedniego o 100 jednostek, natomiast kwiatek ma suchą glebę gdy pomiar wynosi mniej niż 300 jednostek. Bardzo uproszczony algorytm wyglądał następująco:
Do zakodowania pozostała jeszcze aplikacja webowa, która zajęła nam większość dostępnego czasu. Wytwarzanie kodu przeplataliśmy grą w ping ponga i piłkarzyki (które były do dyspozycji programistów).
Aplikację zdeployowaliśmy na Amazon Web Services – na co dzień używamy tej chmury. Projekt strony i struktura html i css była oparta na frameworku Bootstrap, co pozwoliło nam tak na prawdę skupić się na szczegółach graficznych projektu. Do przesyłania danych na żywo użyliśmy Pushera do websocketów, Moment.js do wyświetlania czasu i Google Charts do narysowania wykresu wilgotności gleby, a samą aplikację dzięki możliwości wstawiania znaków unicode do URL, uruchomiliśmy pod adresem: ⚘.megafoni.pl czyli {kwiatek}.megafoni.pl, używając klawiatury można wpisać: xn--w7h.megafoni.pl.
Zdecydowaliśmy się nadać kwiatkom, które będziemy prezentować jakąś tożsamość. Uważamy że humorystyczna interakcja nie tylko wzbudzi zainteresowanie ale również skłoni samego właściciela kwiatka do jego zauważenia i, mamy nadzieje, podlania. Każdy kwiatek miał własne imię jak np. Anna, która gdy nie została podlana i nie miała wystarczająco dużo wody umieszczała wiadomość w serwisie.
Image may be NSFW.
Clik here to view.
W chwili gdy właściciel podlał kwiatek i czujnik zarejestrował odpowiednią wilgotność system reagował i publikowana była wiadomość na Facebook w postaci postu OpenGraph, że Anna została właśnie podlana przez właściciela.
Projekt udało nam się zakończyć w 6 godzin, jednak nie w całości – planowaliśmy jeszcze użyć Scores i Achievements API jednak nie starczyło już czasu. Jesteśmy bardzo zadowoleni z tego, że mogliśmy uczestniczyć w tak zacnym wydarzeniu (i przy okazji zgarnąć iPada, Apple TV i kilka innych gadżetów ;)).
Wracając z Warszawy do Krakowa postanowiliśmy, że naszym kolejnym zakupem do biura musi być stół do ping ponga. Jeżeli chcecie zobaczyć “Flower Power” na żywo i pograć w pingla to już niebawem zapraszamy do naszego nowego biura. Więcej szczegółów wkrótce.
Pamiętajcie o swoich roślinkach.
Flower Power!
P.S. Więcej zdjęć z imprezy Facebooka znajdziecie na naszym FanPage’u.