SlideShare une entreprise Scribd logo
1  sur  18
Télécharger pour lire hors ligne
Twet

                  Paul Craciun, Florin Parascan, Adrian Peruc si George Scutariu

                                        Facultatea de Informatica



       Abstract. Aplicatie web care ofera un mash-up cu resurse obtinute de pe Twitter(Tweets)
       si/sau Flickr(imagini) si/sau YouTube(video). Functionalitatea consta, in mare, in cautarea,
       pornind de la un set de termeni, a resurselor corespunzatoare de pe site-urile mentionate mai
       sus. Vizualizarea rezultatelor se face folosindu-se serviciile cartografice Google Maps.

       Cuvinte cheie: Folksonomii, Tezaure, WordNet, Twitter, Flickr, YouTube, Google Maps,
       Geo-location, Java EE, IceFaces.


1     Tehnologii Folosite

Proiectul a fost realizat folosind tehnologii Java EE, tehnologia IceFaces, javascript, API-urile java
pentru WordNet, Google Maps si pentru aplicatiile Twitter, Flickr, YouTube.


2     Tehnologii - Detalii de Implementare

2.1    Java EE

Mediul de programare folosit pentru realizarea proiectului a fost NetBeans IDE 6.7, care este
disponibil open source. JDK folosit: jdk1.6, dezvoltat de SUN Microsystems si disponibil gratuit
conform GNU GPL(la fel ca NetBeans IDE). Serverul pe care l-am folosit: Apache Tomcat 6.0.18.
Modulul de Logica aplicatiei este compus din componentele de tip BackingBeans(clase java care
respecta o anumita conventie): FlickrBean, TwitterBean, WordNetBean, YouTubeBean.

    La apasarea primului buton de cautare(<ice:commandButton value="Search"..., din cadrul
paginii de start welcomICEfaces.jspx), este invocata metoda submit(), metoda a clasei WordNetBean().
Aceasta initializeaza datele clasei si apeleaza o metoda a clasei search(), care gaseste synseturile
pentru termenii de cautare, in functie de optiunile selectate(Substantive, Adjective, Verbe, Adverbe)
si populeaza vectorul de String-uri tags cu sinonimele setului de termeni.


Datele Clasei WordNetBean:

 1. private String keyword: memoreaza termenii de cautare. Este setata in momentul in care
    este apasat butonul Search, folosind mecanisme specifice BackingBean-urilor.
 2. private List<String> selectedItems: memoreaza ce parti de vorbire sa fie considerat setul
    de termeni in cautarea WordNet. Este setat in momentul in care este apasat butonul Search.
 3. private List<String> nouns: memoreaza sinonimele pentru setul de termeni, considerat drept
    substantiv( Analog pentru adjectives, adverbs, verbs);
4. private boolean nounsChecked: setat true daca utilizatorul a bifat optiunea Substantive,
    false altfel( Analog pentru adjectivesChecked, adverbsChecked, verbsChecked);
 5. private String nounsConcat: memoreaza elementele lui nouns, despartite prin spatii, intr-un
    obiect de tip String(Analog pentru celelalte 3);
 6. private ArrayList<String> tags: memoreaza toate sinonimele.


Constructorul Clasei WordNetBean: Este lasat implicit.


Metodele Clasei WordNetBean:

 1. public String submit(): initializeaza datele membre, apeleaza metoda search(), returneaza
    String-ul ""
 2. public void Search(string keyword): in functie de optiunile bifate, cauta in dictionarul
    WordNet sinonimele corespunzatoare si populeaza datele: nouns, adjectives, verbs, adverbs,
    nounsConcat, adjectivesConcat, verbsConcat, adverbsConcat, in functie de optiunile bifate,
    tags.
 3. public String submit2(): apelata cand este apasat butonul <ice:commandButton value=
    "Search on twitter, flickr, youtube"... de pe pagina welcomeICEfaces.jspx; Apeleaza
    metoda javascript Initialize(). Apeleaza metodele din clasele TwitterBean, FlickrBean si
    YouTubeBean, care cauta elementele din tags(setul de termeni + sinonimele) pe site-urile core-
    spunzatoare.


2.2   IceFaces

Framework-ul ICEfaces este o extensie open source a standardului JSF oferit de Sun si permite
dezvoltarea de aplicatii RIA utilizand limbajul de programare Java, fara a scrie nici macar o singura
linie de cod JavaScript.


Arhitectura si concepte Principiul de functionare este bazat pe arhitectura MVC. Controller-ul
este reprezentat de un servlet, View-ul de o tehnologie de genul JSP sau Facelets, iar Model-ul de
componente JavaBeans denumite si backing-bean-uri.

    Pe langa faptul ca ICEfaces extinde setul de componente standard ale JSF-ului, diferenta majora
intre cele doua framework-uri este legata de modul de renderizare a raspunsului. Principalul scop al
arhitecturii ICEfaces este de a-i feri pe dezvoltatorii de aplicatii Java Enterprise de complexitatea
low-level a dezvoltarii Ajax in JavaScript. Intreaga logica a aplicatiei este scrisa in Java si executata
pe un server de aplicatie gen Tomcat sau GlassFish.

    In JSF, pentru a afisa starea curenta a aplicatiei se reincarca intreaga pagina in browser, in
timp ce in ICEfaces doar schimbarile care trebuie efectuate in pagina sunt transmise browser-ului
clientului prin intermediul Ajax Bridge.
    Ajax Bridge are elemente atat pe partea de server, cat si pe partea de client care coordoneaza
comunicatiile Ajax intre browser si serverul de aplicatie. Bridge-ul este responsabil cu transmiterea
schimbarilor prezentarii catre client, al carui browser reasambleaza DOM-ul pentru a fi in concor-
danta cu actuala stare a aplicatiei. De asemenea, Bridge-ul detecteaza interactiunea utilizatorului
cu partea de prezentare si trimite aceste evenimente inapoi la aplicatie, pentru a fi procesate.

    ICEfaces suporta stilul Ajax Push, permitand astfel partii de view sa se updateze instantaneu
in concordanta cu schimbarile efectuate pe partea de server sau bazandu-se pe interactiunea cu
utilizatorul. In acest mod, clientul nu mai este cel care verifica starea serverului, ci serverul ii
trimite un mesaj acestuia, chiar si in cazul in care clientul nu a cerut in mod explicit acest lucru.
Astfel se realizeaza in timp real update-ul prezentarii.


Timpul de invatare O problema care apare la orice framework este curba de invatare, care poate
fi destul de abrupta la inceputul utilizarii lui. In timp, cunoasterea acestuia va usura dezvoltarea,
aplicand in mod repetat aceleasi concepte in chestiuni asemenatoare.

  Timpul de invatare a conceptelor de baza poate varia de la cateva zile pana la una-doua sapta-
mani in functie de bagajele de cunostinte ale dezvoltatorului.


2.3   WordNet

WordNet este o baza de date lexicala voluminoasa de limba engleza. Proiectul a fost dezvoltat sub
supervizarea lui George A. Miller. Substantive, verbe, adjective si adverbe sunt grupate in multimi
de sinonime cognitive, denumite synsets, fiecare exprimand un concept diferit. Aceste synset-uri
sunt interconectate in functie de semantica conceptuala si relatii lexicale. Proiectul este disponibil
in mod gratuit ca serviciu web sau poate fi copiat de la adresa http://wordnet.princeton.edu/
wordnet/download/. Pe serverul pe care ruleaza aplicatia este necesar sa fie instalat dictionarul
WordNet.

   Pentru folosirea WordNet in proiectul nostru a fost nevoie de adaugarea referintei, jar-ului
edu.mit.jwi_2.1.5.jar. Acesta este o librarie java folosita ca interfata pentru dictionarul Word-
Net. Printre functionalitatile implementate de aceasta se numara functii pentru obtinerea de cuvinte
indexate, synseturi si exceptii morfologice din baza de date a WordNet. De asemenea, contine clase
pentru procesare morfologica simpla.
Softwareul este usor de extins, majoritatea claselor avand interfete cu ajutorul carora sunt ma-
nipulate in cod. Versiunea gratuita a librariei si materialele aferente sunt facute disponibile, pentru
scopuri non-comerciale, de catre Oficiul de Licentiere a Tehnologiilor MIT.

    Interfata principala pentru accesarea datelor din dictionar este IDictionary(interfata a clasei
Dictionary). Instantierea unui obiect de tip Dictionary este realizata, in cazul cel mai simplu,
folosinduse un singur argument: un obiect de tip URL, care ne spune unde este localizata baza de
date a dictionarului WordNet.

   Pentru a construi obiectul de tip URL am creat o variabila de sistem, denumita WNHOME, care
memoreaza calea pana la directorul de baza al WordNet. In fragmentul de cod de mai jos se va
observa ca la calea din WNHOME se ataseaza la sfarsit folderul dict, deoarece acesta este directorul
care contine datele dictionarului si se gaseste in folderul indicat de WNHOME.

    Metoda search() din backbean-ul java WordNetBean cauta fiecare cuvant din setul de termeni
introdusi de utilizator in elementul de tip ice:inputText din cadrul paginii welcomeICEfaces.jspx(pagina
de start), adica din textul de interogare, in dictionarul WordNet. In alte metode, eventualdin alte
backbeanuri, in functie de optiunile bifate(substantiv, verb, adverb, adjectiv), sunt gasite synse-
turile corespunzatoare si pentru fiecare termen(inclusiv pentru termenii introdusi de utilizator)
sunt apelate alte metode pentru identificarea si obtinerea:

 1. Tweet-urilor celor mai recente;
 2. imaginilor de pe Flickr;
 3. url-urilor de pe YouTube corespunzatoare resurselor video.

    Deoarece printre synseturile gasite se regasesc si termeni compusi, formati din 2 sau mai multe
cuvinte legate prin underscore , de exemplu pentru mouse, computer mouse si astfel de termeni se
regasesc pe site-urile de pe care aducem resurse multimedia fara ( computer mouse), eliminam ,
inainte de a apela metodele de cautare de pe site-urile vizate.

//Construirea url-ului catre directorul cu dictionarul WordNet
String wnhome = System.getenv(”WNHOME”);
String path = wnhome + File.separator + ”dict”;
URL url = new URL(”file”, null, path);

//Construirea si deschiderea obiectului de tip dictionar
IDictionary dict = new Dictionary(url);
dict.open();

...

//Specificarea functiei(ilor) morfologice dorite
idxWord = dict.getIndexWord(keyword, POS.NOUN);
...
2.4     Twitter

Twitter este o aplicatie web, care functioneaza ca o retea de informare in timp real, bazata pe folk-
sonomii(AAA). Astfel oricine are acces la internet isi poate crea un cont pe Twitter, posta mesaje
scurte, genul de mesaje specifice acestei aplicatii, sau urmari mesajele postate de alti utilizatori(nu
e nevoie de cont pentru a vedea mesajele celorlalti). Mesajele se numesc Tweets si au cel mult 140
de caractere lungime, dar au atasate si alte informatii in diverse formate multimedia, in cadrul
panoului de detalii atasat fiecarui Tweet.

   Pentru a gasi Tweets despre diverse subiecte sau postate de anumiti utilizatori, se poate folosi
motorul de cautare integrat in aplicatie.
   Pentru a va face o idee despre popularitatea acestei aplicatii urmatoarele informatii au fost
obtinute de pe Twitter:

        Pe data de 14 Septembrie 2010:

 – 175 de milioane de utilizatori inregistrati pe Twitter;
 – 300 de angajati si mai angajau;
 – 95 de milioane de Tweets erau scrise in fiecare zi;

   Pentru integrarea aplicatiei cu serviciul twitter, am folosit jar-urile(Twitter4J):
twitter4j-core-2.1.11-SNAPSHOT.jar, twitter4j-examples-2.1.11-SNAPSHOT.jar,
twitter4j-media-support-2.1.11-SNAPSHOT.jar, dezvoltate de Yusuke Yamamoto. Aceasta li-
brarie java pentru API-ul Twitter este disponibila open-source, conform licentei BSD.

      In vederea folosirii API-ului twitter este necesara folosirea unui cont twitter.


Beanul TwitterBean

Datele :

 1. private int first: folosit pentru a se seta in pagina welcomeICEfaces.jspx, in tabelul in
    care se afiseaza Tweets, de la ce element din tweets se face afisarea;
 2. private static ArrayList<beans.Tweet> tweets: memoreaza Tweets si este static pentru
    a nu se reinitializa cu dimensiunea 0 si asfel sa nu mai fie afisat niciun rezultat.
 3. private Twitter twitter:folosit pentru autentificare si dialogul cu Twitter.

Constructorul : Implicit.

Metodele :

 1. public String back(): folosit pentru paginarea in pagina welcomeICEfaces.jspx, a tabelului
    in care se afiseaza Tweets;
 2. public String forward(): folosit pentru paginarea in pagina welcomeICEfaces.jspx, a tabelu-
    lui in care se afiseaza Tweets;
 3. public void init(): initializeaza datele membre;
4. public void search(String[] tags): populeaza vectorul tweets cu tweets obtinute dupa
    ocautare Twitter, folosind ca termeni de interogare valorile text din parametrul primit de
    metoda( fie setul de termeni initial, fie sinonimele corespunzatoare ale setului de termeni, gasite
    in dictionarul electronic WordNet). Aceasta metoda este apelata de metoda submit2() a clasei
    WordNetBean.


Query q = new Query(tag);
//Setam numarul de tweets de pe o pagina
q.setRpp(10);

/*Populam vectorul tweets cu rezultatele cautarii
Folosim un BackBean Tweet, pentru a memora doar datele care trebuie afisate si acestea sa fie
trimise paginii welcomeICEfaces.jspx pentru a fi completat tabelul corespunzator */
QueryResult qr = twitter.search(q);
for (Object o : qr.getTweets()) {
Tweet t = (Tweet) o;
beans.Tweet tw = new beans.Tweet();
tw.setText(t.getText());
tw.setCreatedAt(t.getCreatedAt().toString());
tw.setImage(t.getProfileImageUrl());
tweets.add(tw);
tweets.add(tw);
}



2.5   Flickr
Flickr este o aplicatie web cu un plan general orientat pe retele sociale folosita pentru partajarea
de imagini. Imaginile pot fi insotite de meta-date, oferindu-se informatii suplimentare, cum ar fi:
titluri, tag-uri, locatii si altele. Un utilizator poate sa-si creeze cont, sa incarce poze pe contul sau
si sa exploreze pozele de pe site in mod gratuit.

   Flickr ofera utilizatorilor un API public, acestia avand posibilitatea sa afiseze si sa manipuleze
pozele diverse moduri. Pentru a folosi API-ul este necesar un cont Flickr pentru obtinerea unei
chei in vederea autentificarii si comunicarii dintre aplicatia proprie si Flickr. API-ul poate fi folosit
pentru scopuri non-comerciale.
   Pentru folosirea API-ului Flickr am folosit libraria flickrj dispnibila open-source.

Beanul FlickrBean

Datele
 1. private Flickr flickr: autentificare si dialog cu Flickr;
 2. private SearchParameters searchParams: parametrii folositi pentru cautarea pe Flickr;
 3. private final static String KEY = "********************": cheia pt comunicarea cu
    Flickr;
4. private final static String SVR = "www.flickr.com": adresa web a aplicatiei Flickr ;
 5. rivate REST rest: pentru a specifica tipul comunicarii;

Metodele

 1. public void flickrInit(): initializarea datelor membre, parametrii de cautare se seteaza ca
    sortarea rezultatelor sa se face in ordine descrescatoare in functie de cat de interesante sunt si
    sa fie obtinute doar pozele care au coordonate geografice;
 2. public void flickrSearch(String[] tags): cauta si obtine rezultatele cautarii setului de
    parametri si a sinonimelor acestuia pe Flickr(meta-date asociate obtinute: titlul, latitudine si
    longitudine, folosite pentru localiarea pe harta, folosind serviciile Google Maps); Apoi apeleaza
    functia javascript addMark, aceasta primind ca parametri meta-datele pe care le-am enumerat
    mai sus plus url-ul pozei, pentru afisarea acesteia, in momentul selectarii avatarului corespun-
    zator pe harta google.


//Initializarea obiectului PhotosInterface si executarea cautarii cu tagurile date ca parametri
//Libraria FlicrJ ascunde API-ul Flickr bazat pe REST.
searchParams.setTags(tags);
PhotosInterface photosInterface = flickr.getPhotosInterface();
PhotoList photoList = photosInterface.search(searchParams, 20, 1);

...

//Trimiterea pozelor corespunzatoare, titlurilor si informatiile despre localizarea //geografica fun-
tiei addMark
for (int i = 0; i < photoList.size(); i++) {
Photo photo = (Photo) photoList.get(i);
GeoInterface g = new GeoInterface(KEY, SVR, REST);
GeoData gd = g.getLocation(photo.getId());
//Parsari a rezultatelor in cazul in care poza are titlu( eliminarea unor caractere //din rezultatul
primit ca titlu)
if(photo.getTitle() != null && !””.equals(photo.getTitle())) title = photo.getTitle().replace(”’”, ”
”).replace(”””, ” ”);
String flickre = ”flickr”;

JavascriptContext.addJavascriptCall(FacesContext.getCurrentInstance(), ”addMark(’” + title +
”’,’” + gd.getLatitude() + ”’,’” +
gd.getLongitude() + ”’,’” + photo.getMediumUrl() + ”’,’” + flickre + ”’);”);
}



2.6   YouTube

YouTube este cea mai populara comunitate video online din lume, in care utilizatorii au posibil-
itatea sa vizioneze si sa distribuie videoclipuri. Fiecarui videoclip ii pot corespunde comentariile
altor utilizatori, o harta care afiseaza statistici referitoarea la cat de vizionat este videoclipul si la
profilul persoanelor care l-au vizionat(unde locuiesc, varsta etc.) si alte informatii.

    Am folosit API-ul YouTube in scopul comunicarii cu Youtube. Acesta permite programatorilor
sa incorporeze functionalitate de pe YouTube in aplicatia proprie. Se pot realiza cautari, incarcari
de videoclipuri, se pot crea liste de redare s.a.. Librariile java pentru API-ul YouTube pe care le-am
folosit pot fi folosite conform licentei Apache 2.0.



2.7     Google Maps

Google Maps a fost pentru prima data anuntat pe Google Blog pe 8 februarie 2005, si a fost local-
izat la http://maps.google.com/. Initial suporta doar utilizatorii de Internet Explorer si Mozilla,
iar suportul pentru Opera si Safari a fost adaugat la 25 februarie 2005. in prezent, sunt acceptate,
Internet Explorer 7.0 +, Firefox 2.0.0.12 +, Safari 3 +, Mozilla 1.8 +, Chrome 0.2 si Opera 8.02 +.
Aceasta a fost folosit in versiune beta timp de sase luni inainte de a deveni parte a Google Local
pe 6 octombrie 2005.

    In principal, interfata de baza Google Local (si Google Maps API) este incredibil de intuitiva si
simpla. Confera posibilitatea de a selecta o harta, de a te misca, posibilitatea de marire inauntru si
in afara si gasirea zonei pe care doriti sa o vizualizati.
    Compania Google a creat Google Maps API pentru a permite dezvoltatorilor de a integra Google
Maps in site-urile lor cu propriile puncte de date. Acesta este un serviciu gratuit, iar in prezent nu
contine anunturi, dar Google declara in termeni de utilizare ca isi rezerva dreptul de a afisa anunturi
in viitor. Prin utilizarea Google Maps API, este posibila incorporarea completa intr-un web-site a
Google Maps. Programatorilor le este necesar sa solicite o cheie API, care face legatura intre site si
directorul introdus la crearea cheii. Crearea unei harti cu interfata personalizata necesita adaugarea
de cod Java Script Google intr-o pagina, apoi folosind functii Javascript sa se adauge puncte de pe
harta.

    Cand API a fost prima data lansat, era lipsit de capacitatea de a cauta adrese (geocoding), nece-
sitand din partea utilizatorilor adaugarea manuala de puncte in format (latitudine, longitudine).
Aceasta facilitate a fost adaugata in octombrie 2006, cand punerea in aplicare a Google Gadgets, a
facut Google Maps Geocoding mai simplu de utilizat, necesitand doar o singura linie de cod.

      Google Maps API este bazat pe JavaScript.
      Elementul fundamental in orice aplicatie Google Maps API este ”harta” in sine.

<script src=”http://maps.google.com/maps?file=api&v=2&key=abcdefg&sensor=true or false”
type=”text/javascript”>
</script>


    URL-ul http://maps.google.com/maps?file=api&v=2&key=abcdefg, directioneaza catre loca-
tia fisierului JavaScript care include toate simbolurile si definitiile de care este nevoie pentru a
utiliza Google Maps API. Pagina utilizatorului trebuie sa contina un script care sa indice catre
aceasta adresa URL, folosind cheia primita la inscrierea pentru API. in exemplu cheie este afisata
ca ”abcdefg”. De asemenea, se transmite un parametru: sensor, care indica daca aceasta aplicatie
utilizeaza un senzor pentru a determina locatia utilizatorului.

   Pentru ca harta sa se afiseze pe o pagina web, trebuie sa se rezerve un loc pentru ea. De obicei,
acest lucru se face prin crearea unui tag div si obtinerea une referinte la acest element in documentul
Object Model (DOM) a browserului.

<div id=”map canvas” style=”width: 500px; height: 300px”> </div>

    In acest exemplu, am definit un tag div numit ”map canvas” si am stabilit marimea acesteia,
folosind atributul style. Cu exceptia cazului in care se specifica o dimensiune in mod explicit pen-
tru harta, utilizand GMapOptions in constructor, harta utilizeaza implicit marimea containerului
pentru a-si seta dimensiunea.

var map = new GMap2(document.getElementById(”map canvas”));

    Clasa JavaScript care reprezinta o harta este clasa GMap2. Obiecte din aceasta clasa definesc o
singura harta pe o pagina. Se pot crea mai multe instante a acestei clase, fiecare clasa reprezentand
o harta diferita. Pentru a crea o noua instanta a acestei clase se foloseste operatorul new din
JavaScript.

map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.setUIToDefault();

    Odata creata o harta, prin intermediul constuctorului GMap2, trebuie initializata. Acesta ini-
tializare se realizeaza prin utilizarea metodei setCenter() a hartii. Metoda setCenter() necesita ca
argumente o instanta a clasei GLatLng, care reprezinta coordonatele unui punct de pe harta, si un
nivel de zoom. Aceasta metoda trebuie sa fie trimisa inainte de orice alta operatiune efectuata de
pe harta, inclusiv setarea oricaror alte atribute ale hartii.

<body onload=”initialize()” onunload=”GUnload()”>

   In timp ce pagina HTML se afiseaza, este construit documentul Object Model (DOM), orice
imagini externe si script-urile sunt primite si sunt incorporate in documentul DOM. Pentru ca harta
sa fie plasata doar atunci cand pagina este incarcata complet, se executa functia care construieste
obiectul GMap2 atunci cand elementul <body> a HTML-ului primeste evenimentul onload.
   Exista mai multe tipuri de harti disponibile in cadrul API-ului Google Maps. in mod implicit,
hartile standard sunt cele rutiere. Cu toate acestea, Google Maps API suporta, de asemenea si alte
tipuri de harti.

Tipuri de harti API-ul Google Maps foloseste urmatoarele tipuri de harti:
 1.   G NORMAL MAP afiseaza harta rutiera standard;
 2.   G SATELLITE MAP afiseaza imaginile capturate prin satelit din API-ul Google Earth;
 3.   G HYBRID MAP afiseaza o combinatie dintre tipul de harta normala si cel pozat din satelit;
 4.   G DEFAULT MAP TYPES contine o un vector cu cele trei tipuri de harti de mai sus, utile
      pentru prelucrarea iterativa;
5. G PHYSICAL MAP afiseaza o harta bazata pe informatiile despre teren (linii de altitudine).
Tipul hartii se poate schimba folosind metoda setMapType() a obiectului GMap2. Urmatorul cod
schimba tipul hartii in tipul din Google Earth:

var map = new GMap2(document.getElementById(”map canvas”));
map.setMapType(G SATELLITE MAP);




Event Listeners (Ascultarea Evenimentelor) Evenimente in Google Maps API sunt gestionate
prin utilizarea de functii in cadrul spatiului de nume GEvent. Fiecare obiect al API-ului exporta o
serie de evenimente. De exemplu, un obiect GMap2 exporta evenimente precum click, dublu-click,
evenimente de miscare si altele. Fiecare eveniment se intampla intr-un anumit context, care este
verificat prin argumente. De exemplu, evenimentul mousemove se activeaza atunci cand utilizatorul
misca mouse-ul intr-un obiect de tip harta, si depaseste de coordonatele geografice din obiectul
GlatLng.
    Pentru primi notificari a acestor evenimente, se utilizeaza metoda statica GEvent.addListener().
Aceasta metoda are ca parametri un obiect, un eveniment pentru care sa asculte, si o functie pentru
a o apela in cazul in care se produce evenimentul.

Adaugarea unui Overlay (Desenarea De Figuri) Pe Harta Pentru a desena o figura pe
harta se foloseste un obiect de tip Overlay care este legat de harta prin coordonate de latitudine
si longitudine, deci se misca odata cu harta la miscare si zoom. Obiectele de tip Overlay reflecta
obiecte, cum ar fi puncte, linii, arii care sunt adaugate pe harta la coordonatele dorite.

   Tipuri de afisare a obiectelor Overlay in cadrul hartilor:
1. Punctele se afiseaza pe harta folosind markeri, iar infatisarea lor poate fi modificata de catre
   utilizator. Markerii sun obiecte de tipul GMarker si se pot folosi de obiecte de tipul GIcon.
2. Liniile pe harta se afiseaza folosind obiecte de tipul GPolyline, care reprezinta o colectie de
   puncte;
3. Ariile sunt afisate pe harta cu ajutorul poligoanelor. Poligoanele sunt similare cu liniile deoarece
   si ele constau dintr-o colectie de puncte, cu o bucla inchisa si poate lua orice forma.
4. Ferestrele de informatii sunt si ele un tip special de obiecte Overlay.
    Obiectele de tip Overlay pot fi adaugate folosind metoda GMap2.addOverlay() si pot fi scoase
folosind metoda GMap2.removeOverlay().

Obiecte de Tip GPolyline Obiecte de tip GPolyline creaza un strat desenat prin linii pe harta. Un
obiect GPolyline consta dintr-o serie de puncte si creeaza o serie de segmente de linie care leaga
aceste puncte intr-o succesiune ordonata.

Desenarea Liniilor Liniile sunt desenate pe harta ca o serie de segmente drepte. Se pot seta culori
si grosimi diferite si se poate alege nivelul de opacitate a liniilor. Culorile trebuie sa fie date ca
numere hexazecimale in stilul formatului HTML, de exemplu se foloseste #ff0000 pentru culoarea
rosie. Obiectele de tip Gpolyline folosesc capacitatile de desenare vectori ale browserilor daca
sunt disponibile. in Internet Explorer, hartile Google folosesc VML pentru a desena liniile, in alte
browsere se foloseste SVG daca este disponibil.
Geocoding (Codare Geografica) Geocoding este procesul de conversie a adreselor (ca de exem-
plu ”Facultatea de Informatica, Universitatea ”Al. I. Cuza”, General Berthelot, 16, IASI 700483,
ROMANIA”) in coordonatele geografice (cum ar fi 47.1473105 latitudine si 27.59843 longitudine),
care se pot utiliza pentru a plasa markeri sau de pozitii pe harta. API-ul Google Maps include un
serviciu de codare geografica care poate fi accesat direct, printr-o cerere HTTP sau prin utilizarea
unui obiect GClientGeocoder.
    API-ul Google Maps asigura un client de codare grafica a adreselor de la input-ul utilizatorului.

Obiectul de tip Geocoding Serviciul de codare a adreselor din API-ul Google Maps poate fi accesat
cu ajutorul unui obiect de tip GClientGeocoder. Metoda GClientGeocoder.getLatLng() pentru
a converti o adresa (sir de caractere) intr-un obiect de tip GLatLng.


3   Descrierea Functionalitatii

Prima pagina a aplicatiei web este compusa dintr-un banner cu numele aplicatiei: Twet, 2 grupuri,
unul format dintr-un textbox si un buton si celalalt dintr-un buton, un grup de 4 checkboxuri(
Substantiv, Verb, Adjectiv, Adverb).

   Cand se navigheaza pe site initial, sunt vizibile: bannerul, textbox-ul si butonul aferent pentru
cautarea de Tweets si cele 4 checkbox-uri.
Bannerul a fost realizat folosind-se o aplicatie web disponibila gratuit: http://www.pixlr.com/.
Acesta reprezinta numele aplicatiei, iar literele care compun cuvantul incadreaza o zona din Roma-
nia gasita cu Google Maps.

    Primul grup format dintr-un textbox si un buton este destinat cautarii de Tweets corespunza-
toare setului de termeni si sinonimelor WordNet ale setului. Termenii sunt introdusi de utilizator in
textbox, in functie de resursele pe care doreste sa le gaseasca. Sinonimele sunt gasite de aplicatie.
Acestea reprezinta sinonimele setului de termeni luati impreuna ca expresie sau ca sintagma si nu
sinonimele fiecarui termen luat separat. Am preferat aceasta varianta, avand in vedere acuratetea
cautarilor. Astfel am sacrificat numarul de rezultate primite, pentru acuratete.

    Grupul format din 4 checkboxuri este destinat selectarii functiei morfologice pe care o are ter-
menul de cautare sau sintagma formata din setul de termeni. Astfel aplicatia va sti ce sinonime
trebuie sa gaseasca in WordNet. Pot fi selectate mai multe checkboxuri pentru o cautare, indicandu-
se astfel faptul ca se doreste ca sintagma sa fie considerata ca avand oricare din functiile morfologice
selectate.

    In momentul in care se introduce un set de termeni de interogare in textbox si se apasa butonul
Search, pe pagina este afisat un tabel, format din cel mult 4 linii, fiecare pentru partea de vorbire
corespunzatoare. Astfel, pe linia Nouns, vor fi afisate sinonimele pentru set de termeni introdusi,
luat ca substantiv. Analog pentru celelalte 3 linii: Adjectives, Verbs, Adverbs, vizibile doar in cazul
in care, inainte de a se apasa butonul search, au fost bifate checkbox-urile corespunzatoare.
Pentru termenul cat, considerat ca avand oricare dintre cele 4 functii morfologice(toate checkbox -
urile sunt bifate), este afisat un tabel cu doar 2 linii, deoarece, conform WordNet, cat nu poate
indeplini in limba engleza decat functiile de substantiv(noun) si de verb(verb):




   Multumita utilizarii tehnologiilor ICEfaces si a javascript, pe pagina se face refresh doar in
zonele in care este nevoie(folosind tehnici AJAX, incorporate in tehnologia ICEfaces).

   Stilizarea aplicatiei si designul au fost obtinute folosind stiluri css.
Dupa apasarea primului buton de cautare, in afara de rezultatele cautarii pe WordNet, devine
vizibil pe pagina si un nou buton: Search on Twitter, Flickr, YouTube. Dupa apasarea acestuia,
sub el sunt afisate rezultatele cautarii. In stanga o lista de Tweets( fiecare afisand poza utiliza-
torului, un Tweet, si cate minute au trecut de cand mesajul a fost postat), aceasta fiind paginata
folosind javascript. In dreapta este afisata o harta focusata pe zonele geografice unde au fost gasite
rezultatele, acestea fiind indicate pe harta cu logo-urile Flickr, respectiv YouTube. Daca un logo se
apasa, este afisata poza, respectiv este incarcat videoclipul corespunzator intr-un pop-up.
Dupa ce a fost selectat un logo Flickr
Dupa ce a fost selectat un logo YouTube(intai am facut zoom-in)
Prezentare Video Twet




                              (Loading twetvideo.avi)




                           Slow Normal Fast Play/Pause Stop



Acest videoclip este disponibil si pe www.youtube.com/twetmashup.
4   Bibliografie
1. http://profs.info.uaic.ro/~busaco/teach/courses/wade/web.html

2. http://wordnet.princeton.edu/

3. http://projects.csail.mit.edu/jwi/

4. http://twitter.com/

5. http://www.flickr.com/

6. http://www.youtube.com/

7. http://code.google.com/

8. http://www.icefaces.org/

Contenu connexe

En vedette

H σκοπιµότητα της ένταξης εργαλείων ψηφιακής τεχνολογίας στη μαθηµατική εκπαί...
H σκοπιµότητα της ένταξης εργαλείων ψηφιακής τεχνολογίας στη μαθηµατική εκπαί...H σκοπιµότητα της ένταξης εργαλείων ψηφιακής τεχνολογίας στη μαθηµατική εκπαί...
H σκοπιµότητα της ένταξης εργαλείων ψηφιακής τεχνολογίας στη μαθηµατική εκπαί...makrib
 
Locatieve Diensten Context 12-1-2010
Locatieve Diensten Context 12-1-2010Locatieve Diensten Context 12-1-2010
Locatieve Diensten Context 12-1-2010Fabrique
 
Նատրիում
ՆատրիումՆատրիում
Նատրիումmskh00
 
โครงงานครั้งที่ 2 (Guava Cake)
โครงงานครั้งที่ 2 (Guava Cake)โครงงานครั้งที่ 2 (Guava Cake)
โครงงานครั้งที่ 2 (Guava Cake)NattAA
 

En vedette (8)

Att秘密基地
Att秘密基地Att秘密基地
Att秘密基地
 
H σκοπιµότητα της ένταξης εργαλείων ψηφιακής τεχνολογίας στη μαθηµατική εκπαί...
H σκοπιµότητα της ένταξης εργαλείων ψηφιακής τεχνολογίας στη μαθηµατική εκπαί...H σκοπιµότητα της ένταξης εργαλείων ψηφιακής τεχνολογίας στη μαθηµατική εκπαί...
H σκοπιµότητα της ένταξης εργαλείων ψηφιακής τεχνολογίας στη μαθηµατική εκπαί...
 
Bab 8
Bab 8 Bab 8
Bab 8
 
Locatieve Diensten Context 12-1-2010
Locatieve Diensten Context 12-1-2010Locatieve Diensten Context 12-1-2010
Locatieve Diensten Context 12-1-2010
 
Նատրիում
ՆատրիումՆատրիում
Նատրիում
 
โครงงานครั้งที่ 2 (Guava Cake)
โครงงานครั้งที่ 2 (Guava Cake)โครงงานครั้งที่ 2 (Guava Cake)
โครงงานครั้งที่ 2 (Guava Cake)
 
1º ablog
1º ablog1º ablog
1º ablog
 
¿Cómo estas?
¿Cómo estas?¿Cómo estas?
¿Cómo estas?
 

Similaire à Twet

Fii linked data
Fii linked dataFii linked data
Fii linked datateodora001
 
Fii linked data
Fii linked dataFii linked data
Fii linked datateodora001
 
Cautaera multilingva
Cautaera multilingvaCautaera multilingva
Cautaera multilingvabringiton
 
Dezvoltarea Aplicatiilor Web
Dezvoltarea Aplicatiilor WebDezvoltarea Aplicatiilor Web
Dezvoltarea Aplicatiilor Webdanielnastase
 
Web 2020 04/12: Programare Web – Dezvoltarea aplicaţiilor Web în PHP
Web 2020 04/12: Programare Web – Dezvoltarea aplicaţiilor Web în PHP Web 2020 04/12: Programare Web – Dezvoltarea aplicaţiilor Web în PHP
Web 2020 04/12: Programare Web – Dezvoltarea aplicaţiilor Web în PHP Sabin Buraga
 
Documentatie Your Academic Tasks
Documentatie Your Academic TasksDocumentatie Your Academic Tasks
Documentatie Your Academic TasksAlice Burdujanu
 
Node.js: aspecte esențiale
Node.js: aspecte esențialeNode.js: aspecte esențiale
Node.js: aspecte esențialeSabin Buraga
 
J boss seam framework
J boss seam frameworkJ boss seam framework
J boss seam frameworkbeatrisrusu
 
J boss seam framework
J boss seam frameworkJ boss seam framework
J boss seam frameworkbeatrisrusu
 
Javascript ajax tutorial
Javascript ajax tutorialJavascript ajax tutorial
Javascript ajax tutorialVlad Posea
 
Folosirea instumentului Zemanta in recomandarea de continut
Folosirea instumentului Zemanta in recomandarea de continutFolosirea instumentului Zemanta in recomandarea de continut
Folosirea instumentului Zemanta in recomandarea de continutElena-Oana Tabaranu
 
STAW 06/12: JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uri
STAW 06/12: JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uriSTAW 06/12: JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uri
STAW 06/12: JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uriSabin Buraga
 
Biblioteci JavaScript pentru Ajax.pptx
Biblioteci JavaScript pentru Ajax.pptxBiblioteci JavaScript pentru Ajax.pptx
Biblioteci JavaScript pentru Ajax.pptxCostea112
 

Similaire à Twet (20)

Fii linked data
Fii linked dataFii linked data
Fii linked data
 
Fii linked data
Fii linked dataFii linked data
Fii linked data
 
Fii linked data
Fii linked dataFii linked data
Fii linked data
 
Cautaera multilingva
Cautaera multilingvaCautaera multilingva
Cautaera multilingva
 
Dezvoltarea Aplicatiilor Web
Dezvoltarea Aplicatiilor WebDezvoltarea Aplicatiilor Web
Dezvoltarea Aplicatiilor Web
 
Webappdev
WebappdevWebappdev
Webappdev
 
Web 2020 04/12: Programare Web – Dezvoltarea aplicaţiilor Web în PHP
Web 2020 04/12: Programare Web – Dezvoltarea aplicaţiilor Web în PHP Web 2020 04/12: Programare Web – Dezvoltarea aplicaţiilor Web în PHP
Web 2020 04/12: Programare Web – Dezvoltarea aplicaţiilor Web în PHP
 
Documentatie Your Academic Tasks
Documentatie Your Academic TasksDocumentatie Your Academic Tasks
Documentatie Your Academic Tasks
 
Node.js: aspecte esențiale
Node.js: aspecte esențialeNode.js: aspecte esențiale
Node.js: aspecte esențiale
 
Fii linked data
Fii linked dataFii linked data
Fii linked data
 
Fii linked data
Fii linked dataFii linked data
Fii linked data
 
J boss seam framework
J boss seam frameworkJ boss seam framework
J boss seam framework
 
Music Finder
Music FinderMusic Finder
Music Finder
 
J boss seam framework
J boss seam frameworkJ boss seam framework
J boss seam framework
 
Hotel booking Programare Web
Hotel booking Programare WebHotel booking Programare Web
Hotel booking Programare Web
 
Javascript ajax tutorial
Javascript ajax tutorialJavascript ajax tutorial
Javascript ajax tutorial
 
Folosirea instumentului Zemanta in recomandarea de continut
Folosirea instumentului Zemanta in recomandarea de continutFolosirea instumentului Zemanta in recomandarea de continut
Folosirea instumentului Zemanta in recomandarea de continut
 
STAW 06/12: JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uri
STAW 06/12: JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uriSTAW 06/12: JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uri
STAW 06/12: JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uri
 
Biblioteci JavaScript pentru Ajax.pptx
Biblioteci JavaScript pentru Ajax.pptxBiblioteci JavaScript pentru Ajax.pptx
Biblioteci JavaScript pentru Ajax.pptx
 
Flori x
Flori xFlori x
Flori x
 

Twet

  • 1. Twet Paul Craciun, Florin Parascan, Adrian Peruc si George Scutariu Facultatea de Informatica Abstract. Aplicatie web care ofera un mash-up cu resurse obtinute de pe Twitter(Tweets) si/sau Flickr(imagini) si/sau YouTube(video). Functionalitatea consta, in mare, in cautarea, pornind de la un set de termeni, a resurselor corespunzatoare de pe site-urile mentionate mai sus. Vizualizarea rezultatelor se face folosindu-se serviciile cartografice Google Maps. Cuvinte cheie: Folksonomii, Tezaure, WordNet, Twitter, Flickr, YouTube, Google Maps, Geo-location, Java EE, IceFaces. 1 Tehnologii Folosite Proiectul a fost realizat folosind tehnologii Java EE, tehnologia IceFaces, javascript, API-urile java pentru WordNet, Google Maps si pentru aplicatiile Twitter, Flickr, YouTube. 2 Tehnologii - Detalii de Implementare 2.1 Java EE Mediul de programare folosit pentru realizarea proiectului a fost NetBeans IDE 6.7, care este disponibil open source. JDK folosit: jdk1.6, dezvoltat de SUN Microsystems si disponibil gratuit conform GNU GPL(la fel ca NetBeans IDE). Serverul pe care l-am folosit: Apache Tomcat 6.0.18. Modulul de Logica aplicatiei este compus din componentele de tip BackingBeans(clase java care respecta o anumita conventie): FlickrBean, TwitterBean, WordNetBean, YouTubeBean. La apasarea primului buton de cautare(<ice:commandButton value="Search"..., din cadrul paginii de start welcomICEfaces.jspx), este invocata metoda submit(), metoda a clasei WordNetBean(). Aceasta initializeaza datele clasei si apeleaza o metoda a clasei search(), care gaseste synseturile pentru termenii de cautare, in functie de optiunile selectate(Substantive, Adjective, Verbe, Adverbe) si populeaza vectorul de String-uri tags cu sinonimele setului de termeni. Datele Clasei WordNetBean: 1. private String keyword: memoreaza termenii de cautare. Este setata in momentul in care este apasat butonul Search, folosind mecanisme specifice BackingBean-urilor. 2. private List<String> selectedItems: memoreaza ce parti de vorbire sa fie considerat setul de termeni in cautarea WordNet. Este setat in momentul in care este apasat butonul Search. 3. private List<String> nouns: memoreaza sinonimele pentru setul de termeni, considerat drept substantiv( Analog pentru adjectives, adverbs, verbs);
  • 2. 4. private boolean nounsChecked: setat true daca utilizatorul a bifat optiunea Substantive, false altfel( Analog pentru adjectivesChecked, adverbsChecked, verbsChecked); 5. private String nounsConcat: memoreaza elementele lui nouns, despartite prin spatii, intr-un obiect de tip String(Analog pentru celelalte 3); 6. private ArrayList<String> tags: memoreaza toate sinonimele. Constructorul Clasei WordNetBean: Este lasat implicit. Metodele Clasei WordNetBean: 1. public String submit(): initializeaza datele membre, apeleaza metoda search(), returneaza String-ul "" 2. public void Search(string keyword): in functie de optiunile bifate, cauta in dictionarul WordNet sinonimele corespunzatoare si populeaza datele: nouns, adjectives, verbs, adverbs, nounsConcat, adjectivesConcat, verbsConcat, adverbsConcat, in functie de optiunile bifate, tags. 3. public String submit2(): apelata cand este apasat butonul <ice:commandButton value= "Search on twitter, flickr, youtube"... de pe pagina welcomeICEfaces.jspx; Apeleaza metoda javascript Initialize(). Apeleaza metodele din clasele TwitterBean, FlickrBean si YouTubeBean, care cauta elementele din tags(setul de termeni + sinonimele) pe site-urile core- spunzatoare. 2.2 IceFaces Framework-ul ICEfaces este o extensie open source a standardului JSF oferit de Sun si permite dezvoltarea de aplicatii RIA utilizand limbajul de programare Java, fara a scrie nici macar o singura linie de cod JavaScript. Arhitectura si concepte Principiul de functionare este bazat pe arhitectura MVC. Controller-ul este reprezentat de un servlet, View-ul de o tehnologie de genul JSP sau Facelets, iar Model-ul de componente JavaBeans denumite si backing-bean-uri. Pe langa faptul ca ICEfaces extinde setul de componente standard ale JSF-ului, diferenta majora intre cele doua framework-uri este legata de modul de renderizare a raspunsului. Principalul scop al arhitecturii ICEfaces este de a-i feri pe dezvoltatorii de aplicatii Java Enterprise de complexitatea low-level a dezvoltarii Ajax in JavaScript. Intreaga logica a aplicatiei este scrisa in Java si executata pe un server de aplicatie gen Tomcat sau GlassFish. In JSF, pentru a afisa starea curenta a aplicatiei se reincarca intreaga pagina in browser, in timp ce in ICEfaces doar schimbarile care trebuie efectuate in pagina sunt transmise browser-ului clientului prin intermediul Ajax Bridge. Ajax Bridge are elemente atat pe partea de server, cat si pe partea de client care coordoneaza comunicatiile Ajax intre browser si serverul de aplicatie. Bridge-ul este responsabil cu transmiterea schimbarilor prezentarii catre client, al carui browser reasambleaza DOM-ul pentru a fi in concor- danta cu actuala stare a aplicatiei. De asemenea, Bridge-ul detecteaza interactiunea utilizatorului
  • 3. cu partea de prezentare si trimite aceste evenimente inapoi la aplicatie, pentru a fi procesate. ICEfaces suporta stilul Ajax Push, permitand astfel partii de view sa se updateze instantaneu in concordanta cu schimbarile efectuate pe partea de server sau bazandu-se pe interactiunea cu utilizatorul. In acest mod, clientul nu mai este cel care verifica starea serverului, ci serverul ii trimite un mesaj acestuia, chiar si in cazul in care clientul nu a cerut in mod explicit acest lucru. Astfel se realizeaza in timp real update-ul prezentarii. Timpul de invatare O problema care apare la orice framework este curba de invatare, care poate fi destul de abrupta la inceputul utilizarii lui. In timp, cunoasterea acestuia va usura dezvoltarea, aplicand in mod repetat aceleasi concepte in chestiuni asemenatoare. Timpul de invatare a conceptelor de baza poate varia de la cateva zile pana la una-doua sapta- mani in functie de bagajele de cunostinte ale dezvoltatorului. 2.3 WordNet WordNet este o baza de date lexicala voluminoasa de limba engleza. Proiectul a fost dezvoltat sub supervizarea lui George A. Miller. Substantive, verbe, adjective si adverbe sunt grupate in multimi de sinonime cognitive, denumite synsets, fiecare exprimand un concept diferit. Aceste synset-uri sunt interconectate in functie de semantica conceptuala si relatii lexicale. Proiectul este disponibil in mod gratuit ca serviciu web sau poate fi copiat de la adresa http://wordnet.princeton.edu/ wordnet/download/. Pe serverul pe care ruleaza aplicatia este necesar sa fie instalat dictionarul WordNet. Pentru folosirea WordNet in proiectul nostru a fost nevoie de adaugarea referintei, jar-ului edu.mit.jwi_2.1.5.jar. Acesta este o librarie java folosita ca interfata pentru dictionarul Word- Net. Printre functionalitatile implementate de aceasta se numara functii pentru obtinerea de cuvinte indexate, synseturi si exceptii morfologice din baza de date a WordNet. De asemenea, contine clase pentru procesare morfologica simpla.
  • 4. Softwareul este usor de extins, majoritatea claselor avand interfete cu ajutorul carora sunt ma- nipulate in cod. Versiunea gratuita a librariei si materialele aferente sunt facute disponibile, pentru scopuri non-comerciale, de catre Oficiul de Licentiere a Tehnologiilor MIT. Interfata principala pentru accesarea datelor din dictionar este IDictionary(interfata a clasei Dictionary). Instantierea unui obiect de tip Dictionary este realizata, in cazul cel mai simplu, folosinduse un singur argument: un obiect de tip URL, care ne spune unde este localizata baza de date a dictionarului WordNet. Pentru a construi obiectul de tip URL am creat o variabila de sistem, denumita WNHOME, care memoreaza calea pana la directorul de baza al WordNet. In fragmentul de cod de mai jos se va observa ca la calea din WNHOME se ataseaza la sfarsit folderul dict, deoarece acesta este directorul care contine datele dictionarului si se gaseste in folderul indicat de WNHOME. Metoda search() din backbean-ul java WordNetBean cauta fiecare cuvant din setul de termeni introdusi de utilizator in elementul de tip ice:inputText din cadrul paginii welcomeICEfaces.jspx(pagina de start), adica din textul de interogare, in dictionarul WordNet. In alte metode, eventualdin alte backbeanuri, in functie de optiunile bifate(substantiv, verb, adverb, adjectiv), sunt gasite synse- turile corespunzatoare si pentru fiecare termen(inclusiv pentru termenii introdusi de utilizator) sunt apelate alte metode pentru identificarea si obtinerea: 1. Tweet-urilor celor mai recente; 2. imaginilor de pe Flickr; 3. url-urilor de pe YouTube corespunzatoare resurselor video. Deoarece printre synseturile gasite se regasesc si termeni compusi, formati din 2 sau mai multe cuvinte legate prin underscore , de exemplu pentru mouse, computer mouse si astfel de termeni se regasesc pe site-urile de pe care aducem resurse multimedia fara ( computer mouse), eliminam , inainte de a apela metodele de cautare de pe site-urile vizate. //Construirea url-ului catre directorul cu dictionarul WordNet String wnhome = System.getenv(”WNHOME”); String path = wnhome + File.separator + ”dict”; URL url = new URL(”file”, null, path); //Construirea si deschiderea obiectului de tip dictionar IDictionary dict = new Dictionary(url); dict.open(); ... //Specificarea functiei(ilor) morfologice dorite idxWord = dict.getIndexWord(keyword, POS.NOUN); ...
  • 5. 2.4 Twitter Twitter este o aplicatie web, care functioneaza ca o retea de informare in timp real, bazata pe folk- sonomii(AAA). Astfel oricine are acces la internet isi poate crea un cont pe Twitter, posta mesaje scurte, genul de mesaje specifice acestei aplicatii, sau urmari mesajele postate de alti utilizatori(nu e nevoie de cont pentru a vedea mesajele celorlalti). Mesajele se numesc Tweets si au cel mult 140 de caractere lungime, dar au atasate si alte informatii in diverse formate multimedia, in cadrul panoului de detalii atasat fiecarui Tweet. Pentru a gasi Tweets despre diverse subiecte sau postate de anumiti utilizatori, se poate folosi motorul de cautare integrat in aplicatie. Pentru a va face o idee despre popularitatea acestei aplicatii urmatoarele informatii au fost obtinute de pe Twitter: Pe data de 14 Septembrie 2010: – 175 de milioane de utilizatori inregistrati pe Twitter; – 300 de angajati si mai angajau; – 95 de milioane de Tweets erau scrise in fiecare zi; Pentru integrarea aplicatiei cu serviciul twitter, am folosit jar-urile(Twitter4J): twitter4j-core-2.1.11-SNAPSHOT.jar, twitter4j-examples-2.1.11-SNAPSHOT.jar, twitter4j-media-support-2.1.11-SNAPSHOT.jar, dezvoltate de Yusuke Yamamoto. Aceasta li- brarie java pentru API-ul Twitter este disponibila open-source, conform licentei BSD. In vederea folosirii API-ului twitter este necesara folosirea unui cont twitter. Beanul TwitterBean Datele : 1. private int first: folosit pentru a se seta in pagina welcomeICEfaces.jspx, in tabelul in care se afiseaza Tweets, de la ce element din tweets se face afisarea; 2. private static ArrayList<beans.Tweet> tweets: memoreaza Tweets si este static pentru a nu se reinitializa cu dimensiunea 0 si asfel sa nu mai fie afisat niciun rezultat. 3. private Twitter twitter:folosit pentru autentificare si dialogul cu Twitter. Constructorul : Implicit. Metodele : 1. public String back(): folosit pentru paginarea in pagina welcomeICEfaces.jspx, a tabelului in care se afiseaza Tweets; 2. public String forward(): folosit pentru paginarea in pagina welcomeICEfaces.jspx, a tabelu- lui in care se afiseaza Tweets; 3. public void init(): initializeaza datele membre;
  • 6. 4. public void search(String[] tags): populeaza vectorul tweets cu tweets obtinute dupa ocautare Twitter, folosind ca termeni de interogare valorile text din parametrul primit de metoda( fie setul de termeni initial, fie sinonimele corespunzatoare ale setului de termeni, gasite in dictionarul electronic WordNet). Aceasta metoda este apelata de metoda submit2() a clasei WordNetBean. Query q = new Query(tag); //Setam numarul de tweets de pe o pagina q.setRpp(10); /*Populam vectorul tweets cu rezultatele cautarii Folosim un BackBean Tweet, pentru a memora doar datele care trebuie afisate si acestea sa fie trimise paginii welcomeICEfaces.jspx pentru a fi completat tabelul corespunzator */ QueryResult qr = twitter.search(q); for (Object o : qr.getTweets()) { Tweet t = (Tweet) o; beans.Tweet tw = new beans.Tweet(); tw.setText(t.getText()); tw.setCreatedAt(t.getCreatedAt().toString()); tw.setImage(t.getProfileImageUrl()); tweets.add(tw); tweets.add(tw); } 2.5 Flickr Flickr este o aplicatie web cu un plan general orientat pe retele sociale folosita pentru partajarea de imagini. Imaginile pot fi insotite de meta-date, oferindu-se informatii suplimentare, cum ar fi: titluri, tag-uri, locatii si altele. Un utilizator poate sa-si creeze cont, sa incarce poze pe contul sau si sa exploreze pozele de pe site in mod gratuit. Flickr ofera utilizatorilor un API public, acestia avand posibilitatea sa afiseze si sa manipuleze pozele diverse moduri. Pentru a folosi API-ul este necesar un cont Flickr pentru obtinerea unei chei in vederea autentificarii si comunicarii dintre aplicatia proprie si Flickr. API-ul poate fi folosit pentru scopuri non-comerciale. Pentru folosirea API-ului Flickr am folosit libraria flickrj dispnibila open-source. Beanul FlickrBean Datele 1. private Flickr flickr: autentificare si dialog cu Flickr; 2. private SearchParameters searchParams: parametrii folositi pentru cautarea pe Flickr; 3. private final static String KEY = "********************": cheia pt comunicarea cu Flickr;
  • 7. 4. private final static String SVR = "www.flickr.com": adresa web a aplicatiei Flickr ; 5. rivate REST rest: pentru a specifica tipul comunicarii; Metodele 1. public void flickrInit(): initializarea datelor membre, parametrii de cautare se seteaza ca sortarea rezultatelor sa se face in ordine descrescatoare in functie de cat de interesante sunt si sa fie obtinute doar pozele care au coordonate geografice; 2. public void flickrSearch(String[] tags): cauta si obtine rezultatele cautarii setului de parametri si a sinonimelor acestuia pe Flickr(meta-date asociate obtinute: titlul, latitudine si longitudine, folosite pentru localiarea pe harta, folosind serviciile Google Maps); Apoi apeleaza functia javascript addMark, aceasta primind ca parametri meta-datele pe care le-am enumerat mai sus plus url-ul pozei, pentru afisarea acesteia, in momentul selectarii avatarului corespun- zator pe harta google. //Initializarea obiectului PhotosInterface si executarea cautarii cu tagurile date ca parametri //Libraria FlicrJ ascunde API-ul Flickr bazat pe REST. searchParams.setTags(tags); PhotosInterface photosInterface = flickr.getPhotosInterface(); PhotoList photoList = photosInterface.search(searchParams, 20, 1); ... //Trimiterea pozelor corespunzatoare, titlurilor si informatiile despre localizarea //geografica fun- tiei addMark for (int i = 0; i < photoList.size(); i++) { Photo photo = (Photo) photoList.get(i); GeoInterface g = new GeoInterface(KEY, SVR, REST); GeoData gd = g.getLocation(photo.getId()); //Parsari a rezultatelor in cazul in care poza are titlu( eliminarea unor caractere //din rezultatul primit ca titlu) if(photo.getTitle() != null && !””.equals(photo.getTitle())) title = photo.getTitle().replace(”’”, ” ”).replace(”””, ” ”); String flickre = ”flickr”; JavascriptContext.addJavascriptCall(FacesContext.getCurrentInstance(), ”addMark(’” + title + ”’,’” + gd.getLatitude() + ”’,’” + gd.getLongitude() + ”’,’” + photo.getMediumUrl() + ”’,’” + flickre + ”’);”); } 2.6 YouTube YouTube este cea mai populara comunitate video online din lume, in care utilizatorii au posibil- itatea sa vizioneze si sa distribuie videoclipuri. Fiecarui videoclip ii pot corespunde comentariile altor utilizatori, o harta care afiseaza statistici referitoarea la cat de vizionat este videoclipul si la
  • 8. profilul persoanelor care l-au vizionat(unde locuiesc, varsta etc.) si alte informatii. Am folosit API-ul YouTube in scopul comunicarii cu Youtube. Acesta permite programatorilor sa incorporeze functionalitate de pe YouTube in aplicatia proprie. Se pot realiza cautari, incarcari de videoclipuri, se pot crea liste de redare s.a.. Librariile java pentru API-ul YouTube pe care le-am folosit pot fi folosite conform licentei Apache 2.0. 2.7 Google Maps Google Maps a fost pentru prima data anuntat pe Google Blog pe 8 februarie 2005, si a fost local- izat la http://maps.google.com/. Initial suporta doar utilizatorii de Internet Explorer si Mozilla, iar suportul pentru Opera si Safari a fost adaugat la 25 februarie 2005. in prezent, sunt acceptate, Internet Explorer 7.0 +, Firefox 2.0.0.12 +, Safari 3 +, Mozilla 1.8 +, Chrome 0.2 si Opera 8.02 +. Aceasta a fost folosit in versiune beta timp de sase luni inainte de a deveni parte a Google Local pe 6 octombrie 2005. In principal, interfata de baza Google Local (si Google Maps API) este incredibil de intuitiva si simpla. Confera posibilitatea de a selecta o harta, de a te misca, posibilitatea de marire inauntru si in afara si gasirea zonei pe care doriti sa o vizualizati. Compania Google a creat Google Maps API pentru a permite dezvoltatorilor de a integra Google Maps in site-urile lor cu propriile puncte de date. Acesta este un serviciu gratuit, iar in prezent nu contine anunturi, dar Google declara in termeni de utilizare ca isi rezerva dreptul de a afisa anunturi in viitor. Prin utilizarea Google Maps API, este posibila incorporarea completa intr-un web-site a Google Maps. Programatorilor le este necesar sa solicite o cheie API, care face legatura intre site si directorul introdus la crearea cheii. Crearea unei harti cu interfata personalizata necesita adaugarea de cod Java Script Google intr-o pagina, apoi folosind functii Javascript sa se adauge puncte de pe harta. Cand API a fost prima data lansat, era lipsit de capacitatea de a cauta adrese (geocoding), nece- sitand din partea utilizatorilor adaugarea manuala de puncte in format (latitudine, longitudine). Aceasta facilitate a fost adaugata in octombrie 2006, cand punerea in aplicare a Google Gadgets, a facut Google Maps Geocoding mai simplu de utilizat, necesitand doar o singura linie de cod. Google Maps API este bazat pe JavaScript. Elementul fundamental in orice aplicatie Google Maps API este ”harta” in sine. <script src=”http://maps.google.com/maps?file=api&v=2&key=abcdefg&sensor=true or false” type=”text/javascript”> </script> URL-ul http://maps.google.com/maps?file=api&v=2&key=abcdefg, directioneaza catre loca- tia fisierului JavaScript care include toate simbolurile si definitiile de care este nevoie pentru a utiliza Google Maps API. Pagina utilizatorului trebuie sa contina un script care sa indice catre aceasta adresa URL, folosind cheia primita la inscrierea pentru API. in exemplu cheie este afisata
  • 9. ca ”abcdefg”. De asemenea, se transmite un parametru: sensor, care indica daca aceasta aplicatie utilizeaza un senzor pentru a determina locatia utilizatorului. Pentru ca harta sa se afiseze pe o pagina web, trebuie sa se rezerve un loc pentru ea. De obicei, acest lucru se face prin crearea unui tag div si obtinerea une referinte la acest element in documentul Object Model (DOM) a browserului. <div id=”map canvas” style=”width: 500px; height: 300px”> </div> In acest exemplu, am definit un tag div numit ”map canvas” si am stabilit marimea acesteia, folosind atributul style. Cu exceptia cazului in care se specifica o dimensiune in mod explicit pen- tru harta, utilizand GMapOptions in constructor, harta utilizeaza implicit marimea containerului pentru a-si seta dimensiunea. var map = new GMap2(document.getElementById(”map canvas”)); Clasa JavaScript care reprezinta o harta este clasa GMap2. Obiecte din aceasta clasa definesc o singura harta pe o pagina. Se pot crea mai multe instante a acestei clase, fiecare clasa reprezentand o harta diferita. Pentru a crea o noua instanta a acestei clase se foloseste operatorul new din JavaScript. map.setCenter(new GLatLng(37.4419, -122.1419), 13); map.setUIToDefault(); Odata creata o harta, prin intermediul constuctorului GMap2, trebuie initializata. Acesta ini- tializare se realizeaza prin utilizarea metodei setCenter() a hartii. Metoda setCenter() necesita ca argumente o instanta a clasei GLatLng, care reprezinta coordonatele unui punct de pe harta, si un nivel de zoom. Aceasta metoda trebuie sa fie trimisa inainte de orice alta operatiune efectuata de pe harta, inclusiv setarea oricaror alte atribute ale hartii. <body onload=”initialize()” onunload=”GUnload()”> In timp ce pagina HTML se afiseaza, este construit documentul Object Model (DOM), orice imagini externe si script-urile sunt primite si sunt incorporate in documentul DOM. Pentru ca harta sa fie plasata doar atunci cand pagina este incarcata complet, se executa functia care construieste obiectul GMap2 atunci cand elementul <body> a HTML-ului primeste evenimentul onload. Exista mai multe tipuri de harti disponibile in cadrul API-ului Google Maps. in mod implicit, hartile standard sunt cele rutiere. Cu toate acestea, Google Maps API suporta, de asemenea si alte tipuri de harti. Tipuri de harti API-ul Google Maps foloseste urmatoarele tipuri de harti: 1. G NORMAL MAP afiseaza harta rutiera standard; 2. G SATELLITE MAP afiseaza imaginile capturate prin satelit din API-ul Google Earth; 3. G HYBRID MAP afiseaza o combinatie dintre tipul de harta normala si cel pozat din satelit; 4. G DEFAULT MAP TYPES contine o un vector cu cele trei tipuri de harti de mai sus, utile pentru prelucrarea iterativa;
  • 10. 5. G PHYSICAL MAP afiseaza o harta bazata pe informatiile despre teren (linii de altitudine). Tipul hartii se poate schimba folosind metoda setMapType() a obiectului GMap2. Urmatorul cod schimba tipul hartii in tipul din Google Earth: var map = new GMap2(document.getElementById(”map canvas”)); map.setMapType(G SATELLITE MAP); Event Listeners (Ascultarea Evenimentelor) Evenimente in Google Maps API sunt gestionate prin utilizarea de functii in cadrul spatiului de nume GEvent. Fiecare obiect al API-ului exporta o serie de evenimente. De exemplu, un obiect GMap2 exporta evenimente precum click, dublu-click, evenimente de miscare si altele. Fiecare eveniment se intampla intr-un anumit context, care este verificat prin argumente. De exemplu, evenimentul mousemove se activeaza atunci cand utilizatorul misca mouse-ul intr-un obiect de tip harta, si depaseste de coordonatele geografice din obiectul GlatLng. Pentru primi notificari a acestor evenimente, se utilizeaza metoda statica GEvent.addListener(). Aceasta metoda are ca parametri un obiect, un eveniment pentru care sa asculte, si o functie pentru a o apela in cazul in care se produce evenimentul. Adaugarea unui Overlay (Desenarea De Figuri) Pe Harta Pentru a desena o figura pe harta se foloseste un obiect de tip Overlay care este legat de harta prin coordonate de latitudine si longitudine, deci se misca odata cu harta la miscare si zoom. Obiectele de tip Overlay reflecta obiecte, cum ar fi puncte, linii, arii care sunt adaugate pe harta la coordonatele dorite. Tipuri de afisare a obiectelor Overlay in cadrul hartilor: 1. Punctele se afiseaza pe harta folosind markeri, iar infatisarea lor poate fi modificata de catre utilizator. Markerii sun obiecte de tipul GMarker si se pot folosi de obiecte de tipul GIcon. 2. Liniile pe harta se afiseaza folosind obiecte de tipul GPolyline, care reprezinta o colectie de puncte; 3. Ariile sunt afisate pe harta cu ajutorul poligoanelor. Poligoanele sunt similare cu liniile deoarece si ele constau dintr-o colectie de puncte, cu o bucla inchisa si poate lua orice forma. 4. Ferestrele de informatii sunt si ele un tip special de obiecte Overlay. Obiectele de tip Overlay pot fi adaugate folosind metoda GMap2.addOverlay() si pot fi scoase folosind metoda GMap2.removeOverlay(). Obiecte de Tip GPolyline Obiecte de tip GPolyline creaza un strat desenat prin linii pe harta. Un obiect GPolyline consta dintr-o serie de puncte si creeaza o serie de segmente de linie care leaga aceste puncte intr-o succesiune ordonata. Desenarea Liniilor Liniile sunt desenate pe harta ca o serie de segmente drepte. Se pot seta culori si grosimi diferite si se poate alege nivelul de opacitate a liniilor. Culorile trebuie sa fie date ca numere hexazecimale in stilul formatului HTML, de exemplu se foloseste #ff0000 pentru culoarea rosie. Obiectele de tip Gpolyline folosesc capacitatile de desenare vectori ale browserilor daca sunt disponibile. in Internet Explorer, hartile Google folosesc VML pentru a desena liniile, in alte browsere se foloseste SVG daca este disponibil.
  • 11. Geocoding (Codare Geografica) Geocoding este procesul de conversie a adreselor (ca de exem- plu ”Facultatea de Informatica, Universitatea ”Al. I. Cuza”, General Berthelot, 16, IASI 700483, ROMANIA”) in coordonatele geografice (cum ar fi 47.1473105 latitudine si 27.59843 longitudine), care se pot utiliza pentru a plasa markeri sau de pozitii pe harta. API-ul Google Maps include un serviciu de codare geografica care poate fi accesat direct, printr-o cerere HTTP sau prin utilizarea unui obiect GClientGeocoder. API-ul Google Maps asigura un client de codare grafica a adreselor de la input-ul utilizatorului. Obiectul de tip Geocoding Serviciul de codare a adreselor din API-ul Google Maps poate fi accesat cu ajutorul unui obiect de tip GClientGeocoder. Metoda GClientGeocoder.getLatLng() pentru a converti o adresa (sir de caractere) intr-un obiect de tip GLatLng. 3 Descrierea Functionalitatii Prima pagina a aplicatiei web este compusa dintr-un banner cu numele aplicatiei: Twet, 2 grupuri, unul format dintr-un textbox si un buton si celalalt dintr-un buton, un grup de 4 checkboxuri( Substantiv, Verb, Adjectiv, Adverb). Cand se navigheaza pe site initial, sunt vizibile: bannerul, textbox-ul si butonul aferent pentru cautarea de Tweets si cele 4 checkbox-uri.
  • 12. Bannerul a fost realizat folosind-se o aplicatie web disponibila gratuit: http://www.pixlr.com/. Acesta reprezinta numele aplicatiei, iar literele care compun cuvantul incadreaza o zona din Roma- nia gasita cu Google Maps. Primul grup format dintr-un textbox si un buton este destinat cautarii de Tweets corespunza- toare setului de termeni si sinonimelor WordNet ale setului. Termenii sunt introdusi de utilizator in textbox, in functie de resursele pe care doreste sa le gaseasca. Sinonimele sunt gasite de aplicatie. Acestea reprezinta sinonimele setului de termeni luati impreuna ca expresie sau ca sintagma si nu sinonimele fiecarui termen luat separat. Am preferat aceasta varianta, avand in vedere acuratetea cautarilor. Astfel am sacrificat numarul de rezultate primite, pentru acuratete. Grupul format din 4 checkboxuri este destinat selectarii functiei morfologice pe care o are ter- menul de cautare sau sintagma formata din setul de termeni. Astfel aplicatia va sti ce sinonime trebuie sa gaseasca in WordNet. Pot fi selectate mai multe checkboxuri pentru o cautare, indicandu- se astfel faptul ca se doreste ca sintagma sa fie considerata ca avand oricare din functiile morfologice selectate. In momentul in care se introduce un set de termeni de interogare in textbox si se apasa butonul Search, pe pagina este afisat un tabel, format din cel mult 4 linii, fiecare pentru partea de vorbire corespunzatoare. Astfel, pe linia Nouns, vor fi afisate sinonimele pentru set de termeni introdusi, luat ca substantiv. Analog pentru celelalte 3 linii: Adjectives, Verbs, Adverbs, vizibile doar in cazul in care, inainte de a se apasa butonul search, au fost bifate checkbox-urile corespunzatoare.
  • 13. Pentru termenul cat, considerat ca avand oricare dintre cele 4 functii morfologice(toate checkbox - urile sunt bifate), este afisat un tabel cu doar 2 linii, deoarece, conform WordNet, cat nu poate indeplini in limba engleza decat functiile de substantiv(noun) si de verb(verb): Multumita utilizarii tehnologiilor ICEfaces si a javascript, pe pagina se face refresh doar in zonele in care este nevoie(folosind tehnici AJAX, incorporate in tehnologia ICEfaces). Stilizarea aplicatiei si designul au fost obtinute folosind stiluri css.
  • 14. Dupa apasarea primului buton de cautare, in afara de rezultatele cautarii pe WordNet, devine vizibil pe pagina si un nou buton: Search on Twitter, Flickr, YouTube. Dupa apasarea acestuia, sub el sunt afisate rezultatele cautarii. In stanga o lista de Tweets( fiecare afisand poza utiliza- torului, un Tweet, si cate minute au trecut de cand mesajul a fost postat), aceasta fiind paginata folosind javascript. In dreapta este afisata o harta focusata pe zonele geografice unde au fost gasite rezultatele, acestea fiind indicate pe harta cu logo-urile Flickr, respectiv YouTube. Daca un logo se apasa, este afisata poza, respectiv este incarcat videoclipul corespunzator intr-un pop-up.
  • 15. Dupa ce a fost selectat un logo Flickr
  • 16. Dupa ce a fost selectat un logo YouTube(intai am facut zoom-in)
  • 17. Prezentare Video Twet (Loading twetvideo.avi) Slow Normal Fast Play/Pause Stop Acest videoclip este disponibil si pe www.youtube.com/twetmashup.
  • 18. 4 Bibliografie 1. http://profs.info.uaic.ro/~busaco/teach/courses/wade/web.html 2. http://wordnet.princeton.edu/ 3. http://projects.csail.mit.edu/jwi/ 4. http://twitter.com/ 5. http://www.flickr.com/ 6. http://www.youtube.com/ 7. http://code.google.com/ 8. http://www.icefaces.org/