Your SlideShare is downloading. ×
Mashup webová aplikace
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mashup webová aplikace

1,191

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 5. Vývojový cyklus
    Ladislav Kubeš | Softwarovétechnologie a management – WAM | ČVUT FEL
    5
  • 6. Vývojový cyklus
    4. kapitola- funkční požadavky
    - obecné požadavky
    Ladislav Kubeš | Softwarovétechnologie a management – WAM | ČVUT FEL
    6
  • 7. Vývojový cyklus
    3. kapitola - analýza API4. kapitola - dokumentace integrace
    Ladislav Kubeš | Softwarovétechnologie a management – WAM | ČVUT FEL
    7
  • 8. Vývojový cyklus
    5. kapitola
    Ladislav Kubeš | Softwarovétechnologie a management – WAM | ČVUT FEL
    8
  • 9. Přihlášení identitou služby Facebook
    Ladislav Kubeš | Softwarovétechnologie a management – WAM | ČVUT FEL
    9
  • 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

×