Magazín KPI
Časopis Katedry počítačov a informatiky FEI TUKE
kpi

Informačná obrazovka s automatickým zobrazovaním zaujímavých informácii

Aplikácia pre automatické zobrazovanie zaujímavých informácií získavaných zo sietí Facebook a YouTube. Informácie sú vyhodnotené automaticky na základe vopred definovaných metrík. Zobrazené sú len príspevky a videá, ktoré sú aplikáciou vyhodnotené ako najlepšie.

Motivácia

Pôvodnou myšlienkou bolo vytvoriť aplikáciu, ktorá bude zbierať, vyhodnocovať a zobrazovať informácie na zobrazovacích jednotkách umiestnených v budove Technickej univerzity v Košiciach a to v rámci pripravovaného projektu otvoreného laboratória a interaktívnej zóny s využitím nových technologických postupov vo vestibule piateho poschodia, na ktorom sa zdržiavajú najmä študenti technických smerov ako informatika alebo elektrotechnika.

Tento koncept sme rozšírili a pridali sme možnosť vybrať si, na akú cieľovú skupinu chceme obsah našej aplikácie smerovať.

Predstavte si bežnú situáciu, nielen z vysokoškolského života, kedy sedíte niekde na chodbe a čakáte. Či už čakáte na prednášku, na cvičenie alebo niekde na obede, čakanie je často čas, ktorý nie je dostatočne využitý. No ak by sme sa počas tohoto času mohli dozvedieť niečo nové a najlepšie z nášho oboru, určite by to mnohých z nás zaujalo.

Preto sme sa rozhodli vytvoriť túto aplikáciu. Aplikáciu, ktorá bude spustená na veľkoplošnej obrazovke niekde vo vestibule budovy, jedálne alebo aj v čakárni u doktora. Táto obrazovka bude neustále zobrazovať aktuálne informácie z oblasti ktorú si zvolíme.

Príprava

Aby bolo možné zobrazovať len informácie, ktoré nás naozaj zaujímajú a sú pre nás relevantné bolo nutné nájsť metódu, ktorou aplikácia rozlíši kvalitu informácií nachádzajúcich sa na sociálnych médiách. Na určovanie kvality obsahu môžeme použiť nasledovné metriky:

  1. Hodnotenie podľa autora
    • hodnosť používateľa
    • počet sledovateľov
  2. Hodnotenie podľa aktivity používateľov
    • zdieľanie
    • likovanie
    • komentovanie
  3. Podľa aktuálnosti
    • dátum uverejnenia alebo úpravy príspevku

Získavanie dát

Po určení spôsobov, ktorými môžeme dáta ohodnotiť, bolo potrebné nájsť metódu ktorou budeme tieto dáta získavať. Keďže bežný prístup, ktorý ako používatelia týchto sociálnych sietí poznáme je cez grafické užívateľské rozhranie určené pre ľudí, musíme nájsť iný spôsob.

Najvhodnejším prostredníkom pre komunikáciu dvoch programov je API - aplikačné programové rozhranie. Využitím služieb API sa môže naša aplikácia automaticky dotazovať na dáta týchto sociálnych sietí.

Sociálna sieť Facebook poskytuje pre prístup k dátam Graph API. Ide o nízko-úrovňové rozhranie založené na HTTP. Umožňuje nám vytvárať dotazy na sťahovanie a uverejňovanie príspevkov, fotiek, statusov ako aj vykonávanie všetkých možných akcií, ktoré sú schopní používatelia vykonávať pomocou grafického rozhrania.

Sociálne médium YouTube poskytuje rozhranie s názvom YouTube Data API. Aj toto API založené na HTTP nám umožňuje využívať funkcionality tejto siete, ktoré sú dostupné jej používateľom prostredníctvom grafického rozhrania a to na vlastnej webovej stránke alebo aplikácii.

Keďže oba API sú založené na HTTP, je možné ich použiť s akýmkoľvek programovacím jazykom, ktorý dokáže pracovať s HTTP. Pre získavanie dát používame GET request a pre uverejňovanie POST request. Odpoveď je vo formáte JSON. Tento formát slúži pre uchovávanie a prenos dát, typicky objektov, popísaných štandardizovanou formou. Dáta je tak možné jednoducho previesť na objekty akéhokoľvek programovacieho jazyka.

Príklad požiadavky a odpovede

Facebook:

Request: "https://graph.facebook.com/kpi.fei.tuke?
          fields=bio,link,birthday,name,location"
Respond: {
  "link": "https://www.facebook.com/kpi.fei.tuke/",
  "birthday": "09/01/1989",
  "name": "Katedra počítačov a informatiky KPI FEI TUKE",
  "location": {
    "city": "Kosice",
    "country": "Slovakia",
    "latitude": 48.730577463883,
    "longitude": 21.245230436325,
    "street": "Letná 9",
    "zip": "042 00"
  },
  "id": "1017923091578229"
}

YouTube:

Request: GET https://www.googleapis.com/youtube/v3/search?
              part=id&channelId=UCcJFOmxCzDqIeF76SKw_dnQ&
              maxResults=1&type=video&key={YOUR_API_KEY}
 Respond:{
    "kind": "youtube#searchListResponse",
    "etag": "\"_gJQceDMxJ8gP-8T2HLXUoURK8c/
            05ekvXaMt5Ysf1QfkYkLZ0SFfPE\"",
    "nextPageToken": "CAEQAA",
    "regionCode": "SK",
    "pageInfo": {
      "totalResults": 239,
      "resultsPerPage": 1
    },
    "items": [
    {
      "kind": "youtube#searchResult",
      "etag": "\"_gJQceDMxJ8gP-8T2HLXUoURK8c/
              2H7iYQwZJevuy5noyZX3Wi85mv0\"",
      "id": {
        "kind": "youtube#video",
        "videoId": "UmVxMYhoxcM"
      }
     }
    ]
   }

Oba zo spomínaných API potrebujú, aby bola naša aplikácia zaregistrovaná na ich stránke. To nám umožní získať prístupové práva, tzv. Access Token. Ten potom autentizuje našu aplikáciu pri vykonávaní HTTP požiadavky.

Vizuálny návrh aplikácie

Aplikácia má sledovateľa zaujať, no nemá obsahovať zbytočné rušivé elementy. Preto sme zvolili prístup, ktorý môžeme charakterizovať aj slovným spojením “V jednoduchosti je krása”.

Na nasledujúcich obrázkoch zobrazíme, ako vyzerajú jednotlivé typy príspevkov v aplikácii.

Aplikácia - zobrazenie Facebook príspevku: Aplikácia - zobrazenie Facebook príspevku

Aplikácia - zobrazenie Facebook videa: Aplikácia - zobrazenie Facebook videa

Aplikácia - zobrazenie YouTube videa: Aplikácia - zobrazenie YouTube videa

Administrácia aplikácie

Ako sme už spomínali, naša aplikácia bude stavaná tak, aby zobrazovala len aktuálne informácie pre nami definovanú cieľovú skupinu. Aby sme vedeli zadefinovať niečo také, potrebujeme zvoliť niekoho kto bude zodpovedný za správu tejto aplikácie po jej nasadení- tým bude administrátor - a dať mu možnosť tieto zmeny vykonať.

Preto sme sa rozhodli do aplikácie pridať aj stránku, ktorá bude slúžiť administrátorovi. Tú nazveme administračné rozhranie a bude obsahovať nasledujúce funkcionality:

1. Výber zdrojov

Ako sme už naznačili, bude len a len na administrátorovi aby zadefinoval cieľovú skupinu pre ktorú sa bude zobrazovať obsah. To zabezpečí práve tým, že zadefinuje Facebookové stránky a YouTube kanály, z ktorých bude aplikácia čerpať.

Ak by sme chceli napríklad zobrazovať obsah pre študentov Fakulty elektrotechniky a informatiky, tak vhodnými zdrojmi sú stránky a kanály venujúce sa technologickým objavom, informatike, robotike a podobne.

Administračné rozhranie - správa FB zdrojov: Administračné rozhranie - správa FB zdrojov.

2. Správa prístupových údajov

Pre úspešné získavanie dát z API potrebuje aplikácia poznať prístupové údaje, ktoré používa pre získanie prístupového tokenu. Týmito údajmi sú:

  • Facebook App ID
  • Facebook App Secret
  • YouTube Api Key

3. Správa konfiguračných údajov

V tejto časti administračného rozhrania dokáže administrátor prispôsobiť správanie aplikácie tak, aby čo najviac spĺňala jeho požiadavky.

Administrátorovi dáme možnosť voľby, aké dáta a z akého zdroja zobrazovať. Konkrétne možnosť zapnúť/vypnúť zobrazovanie Facebook príspevkov, Facebook videí a YouTube videí podľa vlastného uváženia. Pri YouTube videách bude mať možnosť výberu medzi možnosťami pri vyhľadávaní podľa kľúčových slov alebo všeobecne pre daný kanál a nastavenie poradia videí. Ďalej bude možné nastaviť poradie zobrazovania noviniek a to na základe dátumu alebo popularity, nastavenie maximálneho počtu dní (od jeho vytvorenia) pre facebookový príspevok - teda ak nastavíme napríklad dobu 30 dní, tak aplikácia bude zobrazovať len príspevky novšie ako 30 dní. Poslednou možnosťou je nastavenie počtu príspevkov ktoré sa majú načítať a zobrazovať a tak isto počet videí pre načítanie a zobrazenie.

Administračné rozhranie - konfiguračná stránka: Administračné rozhranie - konfiguračná stránka.

4. Sledovanie spätnej väzby od používateľov

V tejto časti aplikačného rozhrania dokáže administrátor sledovať výsledky hlasovania, ktoré je používateľom umožnené na samostatnej stránke. Výsledky hlasovania vidí administrátor vo forme tabuliek, t.j. 3 tabuľky. Každá tabuľka pre iný typ príspevku - Facebook príspevky, Facebook videá a YouTube videá.

Hlasovanie za príspevky

Sledovateľov aplikácie je umožnené hlasovať za práve zobrazovaný obsah. Hlasovacia stránka je umiestnená na vlastnom internetovom odkaze a jedná sa o jednoduchú stránku, na ktorej používateľ vidí 2 tlačidlá - Like / Dislike a názov príspevku, ktorý je práve zobrazený aplikáciou a za ktorý môže v tom momente hlasovať.

Hlasy sa ukladajú do databázy v nasledujúcej forme:

  • ID príspevku,
  • časová známka,
  • typ príspevku a
  • príznak true/false pre Like alebo Dislike

Výsledky hlasovania je potom možné využiť na štatistiky, t.j. aké typy príspevkov sa používateľom najviac páčia, aké zdroje sú najpopulárnejšie alebo napríklad či nejaký zdroj nezobrazuje veľa príspevkov, ktoré sú podľa používateľov nevhodné. Správa týchto údajov je na administrátorovi a dá sa namieru doimplementovať do aplikácie. Tak isto je možné hlasovanie používať aj pri hodnotení kvality príspevkov, ktoré sme spomínali na začiatku tohoto článku.

Použité technológie

Kedže sa jedná o webovú aplikáciu s prístupom k databáze a oddelenou logikou pre zobrazovanie a výber dát, rozhodli sme sa pri implementácii využiť architektúru klient-server.

Technológie použité pri implementácii FrontEnd-u:

  • HTML + CSS - štruktúra a štýl stránky
  • JavaScript - logika stránky
  • jQuery - logika stránky
  • Bootstrap - zabezpečenie responzivity

Technológie použité pri implementácii BackEnd-u:

  • Java - hlavný programovací jazyk
  • Spring Boot - hlavný framework
  • Spring Data - práca s dátovou vrstvou
  • RestFb - knižnica pre prácu s Graph API
  • Google API Client - knižnica pre prácu s Google API
  • MySQL - databáza

Overenie použiteľnosti aplikácie experimentom

Aby sme boli schopný povedať, či je naša aplikácia využiteľná v praxi sme potrebovali poznať názor jej budúcich používateľov. Preto sme sa rozhodli vykonať experiment. Podrobiť vzorku ľudí tesovaniu, pri ktorom im odprezentujeme našu aplikáciu a oni budú mať možnosť ohodnoťiť ju.

Experiment vyžadoval zhromaždiť vybranú skupinu ľudí na jednom mieste. Ďalej bolo potrebné zabezpečiť dostatočne veľkú zobrazovaciu jednotku a prístup na internet pre všetkých zúčastnených. Preto sme sa rozhodli zvoliť ako miesto konania experimentu spoločenskú miestnosť školského internátu Technickej univerzity - Študentský domov, Jedlíkova ulica v Košiciach. Väčšina zúčastnených bola v čase konania experimentu ubytovaná v priestoroch internátu a preto bolo zvolené práve toto miesto. Spoločenská miestnosť tak isto disponuje veľkou obrazovkou s vysokým rozlíšením a poskytuje prístup na internet. Po zhromaždení tejto skupiny ľudí, boli všetci účastníci oboznámený s funkciami testovanej aplikácie v plnom rozsahu a teda aj s časťou venovanej administrácii aplikácie, aby mohli subjektívne hodnotiť celú aplikáciu a nie len jej časť.

Akonáhle mali všetci zúčastnení prístup do aplikácie, tak sme spustili premietanie noviniek na veľkej obrazovke. Každý účastník experimentu dostal možnosť zmeniť jeden z konfiguračných údajov v administračnom rozhraní, aby si tak vyskúšali aj rolu administrátora. Po každej zmene všetci spoločne sledovali, ako sa daná zmena v aplikácii prejaví. Popri tejto interakcií s aplikáciou tak mohli všetci účastníci sledovať dostatočne dlho aj samotné zobrazovanie noviniek a všímať si detaily, ktoré potom môžu opísať v dotazníku. Experiment prebiehal približne 30 minút a po jeho skončení dostali všetci zúčastnení odkaz, na ktorom sa nachádzal dotazník, ktorý mali následne vyplniť.

Zhrnutie

Výsledkom je aplikácia, ktorá je schopná automaticky stiahnuť, vyhodnotiť a zobraziť tie najlepšie, najpopulárnejšie a najzaujímavejšie informácie. Aby bolo možné si aplikáciu prispôsobiť, pridali sme do aplikácie aj administračné rozhranie, kde je možné nastaviť rôzne atribúty ovplyvňujúce správanie aplikácie, ale aj konfiguračné údaje ktoré sú nevyhnuté pre správne fungovanie aplikácie. A aby sme našim používateľom poskytli možnosť vyjadriť sa k práve zobrazovanému obsahu, pridali sme aj možnosť hlasovať za jednotlivé príspevky pomocou responzívnej webovej aplikácie.

Výsledkom experimentu bolo, že vo viac ako 90% prípadoch boli účastníci experimentu absolútne spokojný so vzhľadom a použiteľnosťou aplikácie. Až 100% zúčastnených sa vyjadrilo, že aplikácia má pre nich určitý prínos, či už informačný alebo aspoň ako spestrenie ich času. Niektorí zo zúčastnených dokonca poskytli užitočné nápady na vylepšenie aplikácie, ktoré by mohli byť implementované v ďalšej verzii aplikácie.

Linkovať