Knihovny 2020: Praktické využití principů sémantického webu (projekt Dáme práci)
Mashup webová aplikace
1. Mash-up webová aplikace Ladislav Kubeš vedoucí: Mgr. Petr Matyáš 1 ČVUT FEL:Softwarové technologie a management – WAM
2. Cíl práce a oficiální zadání Analyzujte možnosti dostupných aplikačních rozhraní (API) známých webových komunitní služeb. Prostudujte standardy pro přenos dat mezi aplikací a veřejným API (XML, JSON, XML-RPC, REST). S využitím webových technologií (PHP, Smarty, (X)HTML, CSS, JavaScript) implementujte funkční prototyp webové aplikace zaměřené na TV seriály a pořady. Integrujte do navrhovaného prototypu API webových služeb Facebook, Twitter, Last.fm a Flickr. Aplikaci důkladně otestujte. Ladislav Kubeš | Softwarovétechnologie a management – WAM | ČVUT FEL 2
3. Specifikace implementované aplikace Cílem bylo vytvořit aplikaci, která poskytne uživatelům přehled televizních seriálů s názory jejich diváků na jejich kvalitu. Aplikaci jsem nazval Aplikace umožnuje následující základní funkcionality: prohlížet informace k seriálům, psát názory na jejich kvalitu, upravit uživatelský profil, zobrazit uživatele služby na Google mapě, profily osobností s fotografiemi služby Flickr. Ladislav Kubeš | Softwarovétechnologie a management – WAM | ČVUT FEL 3
4. Studium standardů Nastudoval jsem, a ve své práci také popsal, standardy pro výměnu dat mezi různými webovými službami. Zejména standardy XML-RPC, REST, XML a JSON. Implementační část využívá kombinaci REST a JSON. Podrobněji rozebráno v kapitole dva. Ladislav Kubeš | Softwarovétechnologie a management – WAM | ČVUT FEL 4
10. Přihlášení identitou služby Facebook Vytvoření cookie proměnné s využitím Facebook JS SDK: <script src="https://connect.facebook.net/.../all.js"></script> <script> FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true}); FB.Event.subscribe ('auth.sessionChange', function(response) { if (response.session) { // uživatel přihlášen a vytvořena cookie proměnná. } else { // uživatel odhlášen a cookie odstraněna. } }); </script> Ladislav Kubeš | Softwarovétechnologie a management – WAM | ČVUT FEL 10
11. Přihlášení identitou služby Facebook Úspěšná autentifikace = vytvoření cookie Prihlášení uživatele příslušného ID nebo registrace nového. Vytvoření sezení aplikace Ladislav Kubeš | Softwarovétechnologie a management – WAM | ČVUT FEL 11
12. Integrace API: Google Maps Zobrazení uživatelů aplikace do mapy: Ladislav Kubeš | Softwarovétechnologie a management – WAM | ČVUT FEL 12
13. Integrace API: Google Maps Ladislav Kubeš | Softwarovétechnologie a management – WAM | ČVUT FEL 13
14. Integrace API: Flickr Zobrazení fotek ze službyFlickr.com na: - stránce osobnosti - profilu uzivatele Ladislav Kubeš | Softwarovétechnologie a management – WAM | ČVUT FEL 14
15. Použité technologie naprogramováno v PHP jazyku na straně serveru. k oddělení aplikační části od precentační využit systém SMARTy. použitý databázový systém MySQL. klientská část webu v HTML5, s využitím CSS3. skriptování na straně klienta v JavaScriptu, za využitíframeworku jQuery. použity oficiální JavaScriptové rozhraní pro integraciGoogle Map a Facebook napojení. Nepoužity žádné PHP knihovny, které nejsou součástí standardní instalace. Veškeré použité technologie jsou šířeny jako open source. Ladislav Kubeš | Softwarovétechnologie a management – WAM | ČVUT FEL 15
16. Provedené testování Provedeno kognitivní testování aplikace. Testování na kvalitativním vzorku uživatelů. Testování kompatibility aplikace napříč různými prohlížeči. Predikce testování oční oční kamerou (eye-tracking test). Provedeny změny na základě testování. Ladislav Kubeš | Softwarovétechnologie a management – WAM | ČVUT FEL 16
17. Testování použitelnosti Kvalitativní vzorek 7 uživatelů. Stanoveny scénáře průchodu aplikací. Průzkum ohledně chybějících funkcionalit. Ladislav Kubeš | Softwarovétechnologie a management – WAM | ČVUT FEL 17
18. Testování použitelnosti Při registraci nebyl uživatel informován o následcích provedené akce. Hvezdičkové hodnocení primárně přednastaveno na pět hvězdiček. Většina uživatelů měla problém při nastavování adresy. Nebyly dostatečně upozorněny na přetahovací ikonu. Někteří uživatelé nezaznamenali přítomnost administračního panelu s administrátorskými akcemi. Ladislav Kubeš | Softwarovétechnologie a management – WAM | ČVUT FEL 18
19. Děkuji za pozornost. Ladislav Kubeš | Softwarovétechnologie a management – WAM | ČVUT FEL 19
20. Vysvětlení (ne)validity HTML a CSS Základní oproštěný HTML dokument je validní. Nevaliditu způsobují značky FBML (Facebook Markup Language) v kombinaci s HTML5. <fb:login-button></fb:login-button> Ladislav Kubeš | Softwarovétechnologie a management – WAM | ČVUT FEL 20
21. Reflexe posudků Vysvětlení ohledně validity HTML a CSS. Proč jsem zvolil standard HTML5, který je zatím jen doporučením? Jak je to s bezpečností přihlášení přes Facebook? Umožnují vámi užívané služby spolupráci s javovskými aplikacemi? Jak byste musel změnit přístup k jejich rozhraním? Pomocí jakého nástroje jste vytvářel test s kamerou? Ladislav Kubeš | Softwarovétechnologie a management – WAM | ČVUT FEL 21
