Mashup webová aplikace
-
Upload
ladislav-kubes -
Category
Documents
-
view
1.214 -
download
0
Transcript of Mashup webová aplikace
LADISLAV KUBEŠ
ČVUT FEL: Softwarové technologie a management – WAM 1
Mash-up webová aplikace
vedoucí: Mgr. Petr Matyáš
Ladislav Kubeš | Softwarové technologie a management – WAM | ČVUT FEL 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 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 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 5
Vývojový cyklusSběr
požadavků
Analýza
Implementace jádra
aplikace
Integrace
API
Testování
Ladislav Kubeš | Softwarové technologie a management – WAM | ČVUT FEL 6
Vývojový cyklusSběr
požadavků
Analýzaa návrh
Implementace jádra
aplikace
Integrace
API
Testování
4. kapitola- funkční požadavky- obecné požadavky
Ladislav Kubeš | Softwarové technologie a management – WAM | ČVUT FEL 7
Vývojový cyklusSběr
požadavků
Analýza
Implementace jádra
aplikace
Integrace
API
Testování
3. kapitola - analýza API4. kapitola - dokumentace integrace
Ladislav Kubeš | Softwarové technologie a management – WAM | ČVUT FEL 8
Vývojový cyklusSběr
požadavků
Analýza
Implementace jádra
aplikace
Integrace
API
Testování
5. kapitola
Ladislav Kubeš | Softwarové technologie a management – WAM | ČVUT FEL 9
Přihlášení identitou služby Facebook
Ladislav Kubeš | Softwarové technologie a management – WAM | ČVUT FEL 10
Přihlášení identitou služby Facebook
<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>
Vytvoření cookie proměnné s využitím Facebook JS SDK:
Facebook JS SDK
Databáze
Aplikace
Ladislav Kubeš | Softwarové technologie a management – WAM | ČVUT FEL 11
Přihlášení identitou služby Facebook
Úspěšná autentifikace = vytvoření cookie
Vytvoření sezení aplikace
Prihlášení uživatele příslušného IDnebo registrace nového.
Ladislav Kubeš | Softwarové technologie a management – WAM | ČVUT FEL 12
Integrace API: Google Maps
Zobrazení uživatelů aplikace do mapy:
Ladislav Kubeš | Softwarové technologie a management – WAM | ČVUT FEL 13
Integrace API: Google Maps
Ladislav Kubeš | Softwarové technologie a management – WAM | ČVUT FEL 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 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 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 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
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 19
Děkuji za pozornost.
Ladislav Kubeš | Softwarové technologie a management – WAM | ČVUT FEL 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 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?