Mash-up webová aplikace<br />Ladislav Kubeš<br />vedoucí: Mgr. Petr Matyáš<br />1<br />ČVUT FEL:Softwarové technologie a m...
Cíl práce a oficiální zadání<br />Analyzujte možnosti dostupných aplikačních rozhraní (API) známých webových komunitní slu...
Specifikace implementované aplikace<br />Cílem bylo vytvořit aplikaci, která poskytne uživatelům přehled televizních seriá...
Studium standardů<br />Nastudoval jsem, a ve své práci také popsal, standardy pro výměnu dat mezi různými webovými službam...
Vývojový cyklus<br />Ladislav Kubeš | Softwarovétechnologie a management – WAM | ČVUT FEL<br />5<br />
Vývojový cyklus<br />4. kapitola- funkční požadavky<br />- obecné požadavky<br />Ladislav Kubeš | Softwarovétechnologie a ...
Vývojový cyklus<br />3. kapitola - analýza API4. kapitola - dokumentace integrace<br />Ladislav Kubeš | Softwarovétechnolo...
Vývojový cyklus<br />5. kapitola<br />Ladislav Kubeš | Softwarovétechnologie a management – WAM | ČVUT FEL<br />8<br />
Přihlášení identitou služby Facebook<br />Ladislav Kubeš | Softwarovétechnologie a management – WAM | ČVUT FEL<br />9<br />
Přihlášení identitou služby Facebook<br />Vytvoření cookie proměnné s využitím Facebook JS SDK:<br /><script src="https://...
Přihlášení identitou služby Facebook<br />Úspěšná autentifikace = vytvoření cookie<br />Prihlášení uživatele příslušného I...
Integrace API: Google Maps<br />Zobrazení uživatelů aplikace do mapy:<br />Ladislav Kubeš | Softwarovétechnologie a manage...
Integrace API: Google Maps<br />Ladislav Kubeš | Softwarovétechnologie a management – WAM | ČVUT FEL<br />13<br />
Integrace API: Flickr<br />Zobrazení fotek ze službyFlickr.com na:<br />       -  stránce osobnosti<br />       -  profilu...
Použité technologie<br />naprogramováno v PHP jazyku na straně serveru.<br />k oddělení aplikační části od precentační vyu...
Provedené testování<br />Provedeno kognitivní testování aplikace.<br />Testování na kvalitativním vzorku uživatelů.<br />T...
Testování použitelnosti<br />Kvalitativní vzorek 7 uživatelů.<br />Stanoveny scénáře průchodu aplikací.<br />Průzkum ohled...
Testování použitelnosti<br />Při registraci nebyl uživatel informován o následcích provedené akce.<br />Hvezdičkové hodnoc...
Děkuji za pozornost.<br />Ladislav Kubeš | Softwarovétechnologie a management – WAM | ČVUT FEL<br />19<br />
Vysvětlení (ne)validity HTML a CSS<br />Základní oproštěný HTML dokument je validní.<br />Nevaliditu způsobují značky FBML...
Reflexe posudků<br />Vysvětlení ohledně validity HTML a CSS.<br />Proč jsem zvolil standard HTML5, který je zatím jen dopo...
Upcoming SlideShare
Loading in...5
×

Mashup webová aplikace

1,220

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,220
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Mashup webová aplikace

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

    Clipping is a handy way to collect important slides you want to go back to later.

×