+ All Categories
Home > Documents > Mashup webová aplikace

Mashup webová aplikace

Date post: 12-May-2015
Category:
Upload: ladislav-kubes
View: 1,214 times
Download: 0 times
Share this document with a friend
21
LADISLAV KUBEŠ ČVUT FEL: Softwarové technologie a management – WAM 1 Mash-up webová aplikace vedoucí: Mgr. Petr Matyáš
Transcript
Page 1: Mashup webová aplikace

LADISLAV KUBEŠ

ČVUT FEL: Softwarové technologie a management – WAM 1

Mash-up webová aplikace

vedoucí: Mgr. Petr Matyáš

Page 2: Mashup webová aplikace

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.

Page 3: Mashup webová aplikace

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.

Page 4: Mashup webová aplikace

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.

Page 5: Mashup webová aplikace

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í

Page 6: Mashup webová aplikace

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

Page 7: Mashup webová aplikace

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

Page 8: Mashup webová aplikace

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

Page 9: Mashup webová aplikace

Ladislav Kubeš | Softwarové technologie a management – WAM | ČVUT FEL 9

Přihlášení identitou služby Facebook

Page 10: Mashup webová aplikace

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:

Page 11: Mashup webová aplikace

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.

Page 12: Mashup webová aplikace

Ladislav Kubeš | Softwarové technologie a management – WAM | ČVUT FEL 12

Integrace API: Google Maps

Zobrazení uživatelů aplikace do mapy:

Page 13: Mashup webová aplikace

Ladislav Kubeš | Softwarové technologie a management – WAM | ČVUT FEL 13

Integrace API: Google Maps

Page 14: Mashup webová aplikace

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

Page 15: Mashup webová aplikace

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.

Page 16: Mashup webová aplikace

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í.

Page 17: Mashup webová aplikace

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.

Page 18: Mashup webová aplikace

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.

Page 19: Mashup webová aplikace

Ladislav Kubeš | Softwarové technologie a management – WAM | ČVUT FEL 19

Děkuji za pozornost.

Page 20: Mashup webová aplikace

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>

Page 21: Mashup webová aplikace

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?


Recommended