Web crawling-ul [307393]

[anonimizat] o aplicație web de tip web crawler.

[anonimizat], este o aplicatie/un script ce acceseaza o [anonimizat], apoi colecteaza si structureaza informatii relevante intr-o baza de date. Informatiile pot fi texte(titluri, descrieri, paragrafe, etc), fisiere multimedia(imagini, videoclipuri, melodii, etc) sau structuri HTML(body, head, div, form, etc). Procesul de colectare a acestor informatii se numeste web scraping.

Aplicatiile de tip web crawler sau web scraper sunt din ce in ce mai folosite in mediul online de antrepenori deoarece reprezinta solutia nevoilor lor. Cu ajutorul aplicatiei acestia pot accesa si colecta automat informatii de pe pagini de internet specializate. Un exemplu concret ar putea fi pagina de internet a unei agentii imobiliare proaspat deschisa. Problema acestora este lipsa unei baze de date solide ce contine oferte imobiliare. Crawlerul va popula acea baza de date cu oferte imobiliare gasite pe alte pagini web mai populare ce dispun de informatia dorita. [anonimizat] “tinta”, [anonimizat].

[anonimizat]. Cele mai des intalnite si cele mai folosite crawlere sunt motoarele de cautare. Google este cel mai popular motor de cautare. Acesta se foloseste de crawlere pentru a colecta si organiza informatiile de pe world wide web(www). Cel mai cunoscut crawler Google se numeste “Googlebot”. Acesta, [anonimizat] a returna serverelor Google date despre respectivele pagini web. Toate paginile web gasite de crawler sunt indexate. Indexul Google depaseste 100.000.000 de gigaocteti si i-au fost dedicate peste un milion de ore de calcul in scopul creării acestuia. Deci, [anonimizat]. Din aceasta cauza pot aparea diferente intre rezultatele cautarii aceluiasi cuvant cheie pe doua motoare de cautare diferite. In anexa documentului va putea fi consultat si un video explicativ.

Fig. 1 – Arhitectura unui web crawler

https://en.wikipedia.org/wiki/Web_crawler#/media/File:WebCrawlerArchitecture.svg

Starea actuala si justificarea lucrarii

Dupa un scurt research am constatat ca pe internet exista un singur serviciu asemanator aplicatiei mele. Acesta se numeste “Scrape Box” si este o aplicatie pentru SEO(search engine optimization). Aplicatiei “Scrape Box” i se poate adauga un addon ce imita functionalitatea platformei Google img Crawler.

Principala problema a aplicatiei “Scrape Box” este ca e o [anonimizat] a o descarca va trebui sa platesti(aproximativ 100$).

Luand aceste aspecte in considerare am ales sa dezvolt o platforma in mediul online pentru a permite gratuit oricarei persoane ce are acces la internet folosirea ei.

Deoarece in ziua de azi majoritatea celor ce au acces la internet detin si cel putin un smart gadget(smartphone, tableta, tv), iar trendul de a [anonimizat]-[anonimizat] “responsive” pentru a putea facilita accesul indiferent daca acesta se face de pe o statie desktop, un laptop, telefon, tableta sau televizor.

In afara de aplicatia mentionata mai sus, nu am gasit nici o alta platforma/aplicatie care sa faca data scraping din Google.

Scurta descriere a aplicatiei

Lucrarea consta intr-o platforma web in care urmand cativa pasi utilizatorul va putea creea albume ordonate pe categorii cu imagini descarcate automat de pe Google images.

Utilizatorul v-a intra pe www.site.dev, un virtual host creat pe baza serverului Apache din cadrul aplicatiei XAMPP menit sa gazduiasca aplicatia. Prima pagina va fi pagina de login numita “Home” unde utilizatorul va observa o interfata grafica cu doua taburi care pot fi afisate pe rand sub forma a doua formulare. Un formular este pentru inregistrare si altul pentru logare in aplicatie.

Dupa ce utilizatorul completeaza primul formular, acestuia i se va face automat un cont cu datele introduse, ce va fi salvat in baza de date. Dupa crearea contului acesta poate accesa formularul de logare. In cazul in care datele introduse nu corespund cu datele din baza de date, in interfata grafica ii va aparea un mesaj ce il avertizeaza ca datele introduse nu sunt corecte si este rugat sa completeze din nou formularul de logare. In cazul in care datele introduse sunt corecte in interfata va aparea un mesaj de felicitare si un link pentru a putea fi directionat in aplicatie

Dupa logare, utilizatorul va putea vizualiza interfata grafica a aplicatiei formata din cinci pagini web. Fiecare pagina este structurata in 3 parti, headerul, continutul paginii si footerul. Prima pagina va fi pagina numita “Dashboard”. Aici utilizatorul va putea vizualiza ultima cautare introdusa si ultimul album creat. Tot aici va fi si un buton numit simbolic “Continua” menit sa conduca utilizatorul prin pasii necesari creari unui album.

Dupa apasarea butonului “Continua” utilizatorul va fi redirectionat catre pagina “Categories”, pagina in care va putea crea categorii cu ajutorul unui formular pe care il va completa. Aici, acesta va putea crea, modifica si sterge categorii. Toate modificarile vor fi salvate in baza de date. Vom face un exercitiu de imaginatie si ne vom imagina ca utilizatorul a creat categoria numita “Masini”. Dupa ce categoria dorita a fost creata utilizatorul poate trece la pasul urmator apasand un alt buton “Continua”.

A treia pagina pe care va ajunge utilizatorul se numeste “Crawler”. Aici utilizatorul va intalni un formular in care va putea introduce un numar(exemplu: “5”), un cuvant cheie(exemplu: “ferrari”), si va putea alege dintr-o lista, categoria in care vor fi incadrate imaginile. Dupa apasarea butonului din pagina curenta numit “Colectare imagini” scriptul de crawling va colecta 5 imagini cu masini ferrari din Google images. Dupa incarcarea scriptului, in pagina vor aparea sub forma unui carousel slider cele cinci imagini cu masini pentru a putea fi previzualizate. Imaginile vor fi salvate in baza de date si intr-un folder creat special pentru asta din cadrul serverului. Automat se va crea si un album cu cele cinci imagini care la randul lui va fi salvat in baza de date si va putea fi accesat in urmatoarea pagina.

Urmatoarea pagina, numita “Albume”, va contine toate albumele create automat in urma cautarilor utilizatorului. In fiecare album se vor afla galerii cu imaginile cautate anterior. Utilizatorul va putea vizualiza sau sterge albumele.

Ultima pagina este pagina “Contact” in care utilizatorul va putea completa un formular cu datele personale si un mesaj in care acesta va putea sa transmita un mesaj sau sa isi scrie o problema/nemultumire in legatura cu aplicatia. Dupa apasarea butonului “Send” administratorul aplicatiei va primi automat un email cu datele utilizatorului si problema acestuia.

De asemenea acesta va avea acces la panoul de control al utilizatorului unde va putea face diferite operatii precum schimbarea numelui, modificarea parolei de la cont, etc.

Aplicatia va putea fi accesata si de un administrator care va avea functii diferite fata de utilizator. In panoul de control ii va fi afisata o lista cu toate conturile de utilizatori, iar acesta va putea modifica, sterge, sau adauga utilizatori in timp real din baza de date.

Toate operatiile descrise mai sus vor folosi tehnologia Ajax, aceasta accelerand intregul proces pana la ultimul pas, deoarece permite trimiterea formularelor in timp real fara a mai fi nevoie ca pagina sa se reincarce. Astfel se salveaza timp, iar utilizatorii au parte de o experienta mai placuta.

Structura lucrarii

In continuare, capitolele acestei lucrari sunt structurate astfel:

In primul capitol sunt prezentate cerintele si specificatiile tehnice ce au fost necesare in vederea realizarii proiectului.

In capitolul doi voi prezenta analiza problemei impreuna cu un studiu al pietei existente si tipurile de utilizatori.

In capitolul trei voi prezenta proiectarea sistemului. Aici, ca si subcapitole vor fi proiectarea bazei de date, in care voi prezenta cateva date generale, modelul conceptional si cel logic si proiectare aplicatiei cu proiectarea interfetei si diagramele aplicatiei.

In capitolul patru voi prezenta implementarea sistemului unde voi vorbi despre tehnologiile folosite in elaborarea aplicatiei si implementarea aplicatiei.

In capitolul cinci voi prezenta metodele de testare pe care le-am folosit pentru a ma asigura ca aplicatia este in conformitate cu standardele actuale.

Ultimul capitol este capitolul 6. Aici voi prezenta un manual de utilizare a aplicatiei prin figuri, util confortului utilizatorului.

Cerinte si specificatii

Deoarece in domeniul IT tehnologia avanseaza extrem de repede pe zi ce trece cerintele utilizatorilor au crescut odata cu aceasta. Pentru a satisface nivelul ridicat al asteptarilor venit din partea utilizatorului, in dezvoltarea acestei platforme am folosit cele mai noi instrumente informatice, browser web si extensiile necesare dezvoltarii de aplicatii(Firebug Lite), server XAMP, Apache, MySQL, PHP, phpMyAdmin, HTML, CSS, Ajax, JavaScrip si jQuery. Utilizarea tuturor acestor instrumente plus folosirea conceptului de responsive design s-a facut urmarind ultimele reglementari la nivel de programare web, utilizate pentru dezvoltarea aplicatiilor.

Obiectivele lucrarii

Scopul acestui proiect este de a implementa design-ul și funcționalitatea unui platforme menite sa usureze munca graphic designerilor. Dupa ce isi vor crea un cont pe website, acestia vor putea sa-si organizeze munca in galerii de imagini pe categorii in cativa pasi simpli. Utilizatorii vor putea creea categorii si albume, apoi salva imagini de pe Google prin intermediul crawlerului in albume. Platforma poate fi vizualizata de asemenea de pe un cont de administrator, acesta avand anumite beneficii in plus precum adaugarea, stergerea si editarea conturilor de utilizatori. Imaginile, albumele, categoriile si conturile vor fi stocate intr-o baza de bate SQL conectata la un server de MySQL.

Responsive Design

Ethan Marcotte, un foarte bun proiectant si autor, intr-o serie de articole publicate intr-o revista de specialitate “A list apart”, a publicat o tehnica, pe nume RWD (Responsive Web Design). Aceasta tehnologie a avut un mare succes, atragand atentia celor de la World Wide Web Consortium, unde ideea si rolul acestei tehnici au fost descrise in conferinta “Mobile Web Best Practices”, cu subtitlul “One Web” (realizarea unui “web pentru toti”, fiind accesibil de pe orice tip de dispozitiv).

RWD (Responsive Web Design) este o tehnologie folosita pentru adaptarea aparitiei de pagini web pentru dispozitivul utilizat pentru vizualizare. Smartphone-urile, cartile electronice, calculatoarele, sunt doar cateva dintre tipurile de dispozitive pe care sunt afisate paginile web, iar RWD, avand un design unic, permite vizualizarea paginilor web pe orice dispozitiv, indiferent de dimensiunea ecranului, rezolutie sau capacitate de memorie, atat pe un dispozitiv desktop, cat si pe un dispozitiv mobil.

Modul de functionare al RWD: se introduce de Media Queries (comenzi ce se include in pagina de stiluri ce poate indica documentului HTML cum trebuie sa se comporte pe diferite tipuri de ecrane), in proprietatile stilurilor CSS in versiunea numarul 3. Pentru a oferi o intelegere mult mai sigura al acestei tehnologii, se poate folosi urmatorul exemplu: RWD se bazeaza pe coloane, iar numarul de coloane este direct proportional cu rezolutia si dimensiunea ecranului fiecarui device (PC – 5 coloane, tableta – 4 coloane, smartphone – 3 coloane).

In concluzie, crearea acestei tehnologii poate aduce multiple avantaje si beneficii, atat dezvoltatorilor web, cat si utilizatorilor:

Site-ul creat, va fi optimizat pentru toate tipurile de dispozitive: PC, tablete, telefoane mobile, etc.;

Se evita erorile ce deriva din accesarea site-urilor web, in special de pe social links, de pe link-urile pe care utilizatorii le distribuie pe retelele sociale de genul Facebook sau Twitter si care pot sa sfarseasca eronat, depinzand de link-ul ce a fost copiat si de dispozitivul de pe care se acceseaza (un singur URL pentru toti utilizatorii – simple sharing);

Accesibilitate;

Experienta buna de navigare;

Printre atatea beneficii, exista si un non-beneficiu prin utilzarea acestei tehnologii, acela fiind cresterea volumului de munca, implicit costuri mai ridicate (imagini la mai multe dimensiuni, uploadate pe server, de unde se va descarca imaginea potrivita in functie de rezolutie).

Analiza problemei

Demararea acestui proiect a fost o urmare naturala, in urma constatarii a faptului ca nu exista nici un serviciu online gratuit care sa faca image scraping din Google.

Fig. 2 – Functiile unui graphic designer

http://www.dragosalexa.ro/wp-content/uploads/designer-graphic.jpg

In figura 2 putem observa multitudinea functiilor unui graphic designer. Aceasta este direct proportionala cu volumul de munca. Google img Crawler este serviciul ce poate ajuta designerii grafici sa trieze acest volum de munca, in felul acesta scazand timpul de lucru si automat crescand eficacitatea acestora.

Studiul pietei existente

Dupa cum am spus si mai sus in urma cautarilor pe internet pe care le-am facut, am gasit o singura aplicatie ce face image scraping din Google.

Aplicatia se numeste “Scrape Box”, dar partea ce colecteaza imaginile este de fapt o extensie a aplicatiei, ce trebuie de asemenea instalata, numita “Image Grabber”.

Fig. 2.1 – Interfata extensiei Image Grabber din ScrapeBox

http://www.scrapebox.com/wp-content/uploads/2015/05/google-images-scraper.png

In figura 2.1 se poate observa interfata si functiile extensiei Image Grabber din ScrapeBox.

Dezavantajul aplicatiei mele, Google img Crawler, fata de Scrape Box este faptul ca, momentan, filtrele de cautare nu au fost implementate. Am luat acest aspect in considerare, iar pe viitor, acestea vor fi implementate, deoarece consider ca aduce un plus, din punct de vedere al functionalitatii, utilizatorului.

Avantajul principal al aplicatiei mele este faptul ca, aceasta este o platforma online gratuita. Aplicatia Scrape box este o aplicatie desktop(ruleaza pe sistemul de operare dupa ce a fost descarcata) platita(pentru a o putea descarca, utilizatorul va trebui sa plateasca o anumita suma).

Un alt avantaj al aplicatiei Google img Crawler este ca utilizatorul isi poate organiza pozele descarcate in albume online(nemaifiind nevoie de descarcarea imaginilor inutile, astfel salvandu-se spatiu pe unitatea de stocare a utilizatorului).

Tipuri de utilizatori

Platforma Google img Crawler poate fi accesata si folosita de orice utilizator ce dispune de o statie desktop, un laptop sau un smart gadget conectat la internet, indiferent de sexul, varsta sau hobby-urile acestuia.

Principalul public tinta ar fi barbatul/femeia cu o varsta cuprinsa intre 18 si 40 de ani ce are ca hobby lucrul cu imaginile sau munceste in domeniul design-ului digital, dar dupa cum am spus si mai sus datorita faptului ca este o aplicatie flexibila, aceasta poate fi accesata de oricine si oriunde.

Proiectarea sistemului

Proiectarea bazei de date

Date generale

Pentru a functiona in parametrii normali, platforma Google img Crawler trebuie sa fie conectata in permanenta la baza de date. Baza de date a fost creata in urma analizei problemei folosind SGBD-ul MySQL.

Baza de date ii permite aplicatiei sa stocheze informatii despre utilizatori cum ar fi: nume, prenume, adresa de email, parola contului, orasul in care acesta locuieste sau linkul canalelor de social media si informatii despre categoriile si albumele create. De asemenea, aceasta stocheaza si imaginile descarcate de catre utilizator.

Fiecare tabela are in componenta campul id care reprezinta identificatorul unic al fiecarui rand din tabela si cheia primara a acesteia.

Modelul conceptual

Pentru realizarea bazei de date, in prima faza este nevoie de analiza datelor si crearea unei diagrame conceptuale(modelul conceptual) a acestor date.

Obiectivul acestui nivel îl reprezintă modelarea realității considerate într-o schemă de structuri de date interconectate care sunt independente de orice restrângere tehnologică. Aici sunt luate în calcul toate cerințele și specificațiile considerate.

Diagrama conceptuala a bazei de date

Fig. 3 – Diagrama conceptuala

Campurile uid din tabelele albums, images si categories reprezinta user id-ul fiecarui utilizator si sunt legate de campul id din tabela users.

Campurile cat_id din tabelele albums si images reprezinta id-ul categoriei in care albumul si imaginile au fost repartizate si sunt legate de campul id din tabela categories.

Campul album_id din cadrul tabelei images reprezinta id-ul albumului din care imaginile fac parte si este legat de campul id din tabela albums.

Modelul logic

Baza de date a fost dezvoltata in MySQL folosind phpMyAdmin si contine un numar total de 4 tabele. Acestea sunt:

Users

Categories

Albums

Images

Tabela Users

Tabel 3.1

Campul Id reprezinta id-ul unic atribuit automat fiecarui utilizator, acesta este cheia primara a tabelei

Campul nume reprezinta numele utilizatorului

Campul prenume reprezinta prenumele utilizatorului

Campul email reprezinta emailul cu care utilizatorul s-a inregistrat

Campul level_access reprezinta nivelul de acces prin care utilizatorul este diferentiat de administrator

Campul password reprezinta parola cu care utilizatorul s-a inregistrat

Campul google reprezinta link-ul contului de Google+ al utilizatorului

Campul facebook reprezinta link-ul contului de Facebook al utilizatorului

Campul twitter reprezinta link-ul contului de Twitter al utilizatorului

Campul dribble reprezinta link-ul contului de Dribble al utilizatorului

Tabela Categories

Tabel 3.2

Campul Id reprezinta id-ul unic atribuit automat fiecarei categorii create, acesta este cheia primara a tabelei

Campul uid reprezinta id-ul userului asociat categoriei

Campul Category_name reprezinta numele categoriei

Campul Created_at reprezinta data la care a fost creata categoria

Tabela Albums

Tabel 3.3

Campul Id reprezinta id-ul unic atribuit automat fiecarui album creat, acesta este cheia primara a tabelei

Campul cat_id reprezinta id-ul categoriei asociat albumului

Campul album_name reprezinta numele albumului

Campul uid reprezinta id-ul userului asociat albumului

Tabela Images

Tabel 3.4

Campul Id reprezinta id-ul unic atribuit automat fiecarei imagini introduse, acesta este cheia primara a tabelei

Campul uid reprezinta id-ul userului asociat imaginii

Campul img_name reprezinta numele imaginii

Campul album_id reprezinta id-ul albumului asociat imaginii

Campul cat_id reprezinta id-ul categoriei asociat imaginii

Proiectarea aplicatiei

Proiectarea interfetei

Pentru proiectarea interfetei m-am folosit de cateva tool-uri pentru a creea asa numitele wireframe-uri. Acestea reprezinta de fapt schitele grafice create in prealabil cu scopul de a prezenta vizual structura paginilor de internet. Popularitatea procesului de a crea in prealabil wireframe-uri pentru aplicatii a crescut din ce in ce mai mult, datorita beneficiilor aduse de acesta. Arhitectul aplicatiei poate construi si modifica, in faza incipienta, cu usurinta structura viitoarei aplicatii. Acest proces ajuta la micsorarea timpului de productie(ajuta clientul sa se hotarasca mai usor) astfel reducandu-se cheltuielile.

Tool-urile pe care le-am folosit atunci cand am creat wireframe-urile sunt: platforma online https://moqups.com/ si programul de editare grafica Photoshop CC 2015 din cadrul suitei Adobe.

In continuare voi prezenta si explica, cu ajutorul acestor wireframe-uri, structura aplicatiei.

Fig. 3.1 – Pagina de inregistrare

In figura 3.1 putem observa structura primei pagini pe care utilizatorul o va vedea atunci cand va accesa platforma online.

Aici, acesta isi va putea crea un cont(necesar utilizarii aplicatiei) completant campurile observate in figura si apasand butonul “Inregistreaza”.

Fig. 3.2 – Pagina de logare

In figura 3.2 avem structura paginii de logare in care, dupa ce utilizatorul si-a facut cont, poate completa campurile cu adresa de email si parola pentru a se putea loga in aplicatie.

Dupa logare utilizatorul va acces la interfata aplicatiei web. Aplicatia este structurata pe clase. Fiecare pagina din interfata este formata din 3 bucati(header, content si footer).

Partea de sus numita header este formata din logo-ul pozitionat in partea stanga a paginii si meniul de navigare aflat in partea dreapta.

Partea de mijloc este partea de continut al paginii. Aceasta este diferita pentru fiecare pagina, continutul fiind partea unica a paginii.

Partea de jos este numita footer. In footer vom putea gasi cateva informatii generale, o scurta descriere si o harta a site-ului.

Headerul si footerul sunt prezente pe fiecare pagina din interfata aplicatiei, iar pentru a nu le integra manual in fiecare pagina, acestea au fost salvate sub forma de fisiere php respectiv header.php si footer.php si apoi incluse in structura celorlalte pagini.

Fig. 3.3 – Pagina de intampinare “Dashboard”

Prima pagina a aplicatiei pe care utilizatorul o va vedea, dupa logare, va fi o pagina de intampinare numita “Dashboard”.

In figura 3.3 putem observa structura acestei pagini.

Aici utilizatorii vor putea vedea ultima lor cautare, ultimul lor album creat si ultimii utilizatori inregistrati.

Fig. 3.4 – Pagina “Categorii”

Structura urmatoarei pagini numite “Categorii” se poate observa in figura 3.4.

Dupa cum se poate observa, aici utilizatorul are posibilitatea de a isi gestiona categoriile. Poate crea categorii noi sau edita(modifica numele sau sterge) categoriile deja existente.

Fig. 3.5 – Pagina “Crawler”

In figura 3.5 ne este prezentata structura paginii numita “Crawler”. Asa cum se poate observa si din subtitlul, aici utilizatorul poate configura crawler-ul pentru cautarea imaginilor. Acesta va putea alege numarul de imagini, cuvantul cheie dupa care se va face cautarea si categoria in care vor fi incadrate imaginile.

Dupa cautare, imaginile vor putea fi previzualizate sub forma unui slider de tip carousel.

Fig. 3.6 – Pagina “Albume”

Figura cu numarul 3.6 ne prezinta structura paginii “Albume”. Aici utilizatorul va putea vizualiza toate albumele ce au fost create automat, in urma cautarilor acestuia.

Dupa cum se poate observa fiecare album prezinta cateva informatii, cum ar fi numarul de imagini pe care il detine, cuvantul cheie folosit in cautare si categoria la care a fost incadrat acesta. Utilizatorul poate vizualiza sau sterge un album. Daca doreste sa vizualizeze un album, i se va deschide o noua pagina in care va gasi o galerie cu imagini, aici fiindui permisa studierea imaginilor mai in detaliu.

Fig. 3.7 – Pagina “Profil”

In figura 3.7 putem observa structura paginii de profil a utilizatorului. Aici acesta isi va putea personaliza sau modifica profilul completand sau editand campurile ce contin date cu caracter personal si campurile pentru profilele de Social Media. Tot aici utilizatorul isi va putea modifica avatarul incarcand o imagine de pe device-ul cu care este conectat la aplicatie. Acesta va avea de asemenea posibilitatea de a naviga printr-un meniu unde isi va putea vizualiza istoricul de cautari, desfinta contul sau se va putea deloga.

Meniul de administrator ce vine impreuna cu cateva functii si privilegii specifice, va putea fi vizualizat doar de administrator .

Fig. 3.8 – Pagina “Contact”

Ultima pagina a aplicatiei este pagina de contact numita sugestiv “Contact”. Strictura acesteia poate fi observata in figura 3.8. Pagina de contact este modul prin care utilizatorul va putea lua legatura cu administratorul platformei.

Acesta va putea transmite o sugestie, propune o colaborare, raporta o problema de functionalitate sau transmite mesaje de alta natura ce nu au legatura cu subiectele enumerate mai sus. Toate aceste posibilitati vor fi incluse in meniul drop down numit “Alege un subiect”.

Diagramele aplicatiei

Diagrama use case

Diagrama use case este un tip de diagrama din care reiese modul de utilizare a sistemului informatic – modul în care utilizatorii interacționează cu acesta (în corespondență directă cu task-urile acestor utilizatori). Aceasta este utila pentru a crea o imagine generala a sistemului.

Fig. 3.9 – Diagrama use case

Diagrama site-ului

Fig. 3.1.1 – Diagrama site-ului

Implementarea sistemului

Tehnologii informatice utilizate in elaborarea aplicatiei

Browser web

Browser-ul web sau navigatorul web in traducere este o aplicatie software desktop ce permite utilizatorilor sa afiseze text, grafica, video, muzia si alte informatii aflate pe o pagina din WWW(World Wide Web).

World Wide Web(abreviat www) reprezinta totalitatea paginilor, documentelor si informatiilor ce pot fi accesate prin reteaua mondiala de internet.

Browser-ul folosit in dezvoltarea aplicatiei este Google Chrome. In momentul de fata acesta este cel mai utilizat browser, avand o cota de piata de 52.1% din totalul utlizatorilor de internet. Am ales sa folosesc acest browser datorita preferintelor personale, vitezei de incarcare a paginilor si posibilitatea personalizarii acestuia cu extensii folositoare dezvoltarii aplicatiilor web.

Extensiile folosite in dezvoltarea acestei aplicatii sunt:

Firebug Lite(varianta pentru Google Chrome) este un tool gratuit dezvoltat de cei de la Mozilla Firefox. Acesta permite editarea in timp real a codurilor html, css sau javascript din paginile de internet.

ColorZilla este un tool cu ajutorul caruia putem “culege” culorile prezente intr-o pagina web cu usurinta. Acesta identifica, copiaza culorile si ni le ofera sub forma modelului cromatic RGB(red, green, blue) sau sub forma codurilor hexadecimale.

Measureit este o extensie ce permite masurarea inaltimii, latimii si aliniamentul ecranelor sau a elementelor prezente in pagina web.

XAMPP

XAMPP actioneaza ca un web server capabil de a servi pagini dinamice si este descris ca avand un pachet de programe cu urmatoarele caracteristici:

Free software;

Open source;

Cross-platform web server.

Actioneaza ca un suport pentru crearea si manipularea bazelor de date in MySQL si SQLite intre utilizatori.Numele XAMPP reprezinta un acronim pentru:

X – cross/ cross-platform;

APACHE HTTP Server

MySQL;

PHP;

Perl.

Utilizarea numai ca utilitar de dezvoltare, a fost prima intentie a designerilor si programatorilor XAMPP, pentru a permite posibilitatea testarii muncii lor pe calculatoare proprii, fara a fi nevoie de acces la internet.

Apache

Serverul Apache este folosit de unele din cele mai mari site-uri din lume, printre care si Google. Este caracterizat ca fiind un server HTTP de tip open source si un software gratuit, care a ajuns incepand cu anul 1996 sa fie cel mai popular server HTTP. Apache joaca un rol foarte important pentru dezvoltarea webului, el fiind utilizat in circa 65,2% din paginile web, evoluand rapid din punct de vedere al performantei si functionalitatii, fiind un rival competitiv pentru alte servere web.

Functionalitatea ii este extinsa cu ajutorul a unei mari varietati de module, acestea variind de la server side programming pana la scheme de autentificare.

Apache are o calitate destul de importanta, si anume gazduirea virtuala (virtual hosting), care consta in posibilitatea de a gazdui mai multe site-uri simultan pe acelasi server.

MySQL

Este cel mai popular SGBD open-source de la ora actuala, reprezentand o componenta chei a sistemului LAMP (Linux, Apache, MySQL, PHP). Este strans legat de PHP, iar prin combinatie sunt denumite Duo-ul Dinamic. MySQL are ca si comenzi de iesire “exit” sau “quit”, ceea ce face actiunea mult mai usoara.

“MySQL este un sistem client/server de gestiune a bazelor de date relationale originar din Scandinavia. MySQL include un server SQL, programe client pentru accesul la server, instrumente administrative si o interfata de programe pentru scrierea propriilor programe. De asemenea, MySQL poate fi folosit in mod batch, plasand interogarile intr-un fisier care apoi este executat (Marin, 2002, p. 23)”.

PhpMyadmin

PhpMyAdmin este un sistem de gestiune a bazelor de date MySQL cu urmatoarele caracteristici: open source, liber, scris in PHP, destinat administrarii bazelor de date prin intermediul unui browser web.

PhpMyAdmin ajuta la realizarea multor operatii:

Executarea de comenzi/intergogari SQL;

Crearea, modificarea sau stergerea bazelor de date, a tabelelor, campurilor sau randurilor

Am ales sa fac baza de date cu acest tool datorita interfetei user friendly si a faptului ca, creare tabelelor, coloanelor si a legaturilor intre tabele se face cu usurinta.

PHP

Istoria limbajului PHP

Prima versiune a limbajului PHP a fost descoperita de catre Rasmus Lerdorf la sfarsitul anul 1994, reprezentand un proiect personal, iar de atunci si pana in prezent, a avut loc o ascensiune semnificativa, asa cum este prezentat in continuare: “Limbajul PHP este facut public la inceputul anului 1995 sub denumirea de Personal Home Page Tools, fiind considerat un analizator simplist care interpreta cateva macrouri ce puteau fi incluse in cadrul documentelor HTML, permitand contorizarea accesului la paginile Web sau accesarea unei carti de oaspeti. Analizatorul a fost rescris la mijlocul aceluiasi an si denumit PHP/FI 2.0, unde FI era o alta aplicatie scrisa de Rasmus Lerdorf, un interpretor de formulare HTML. A fost adaugat si suportul pentru bazele de date mSQL si astfel PHP/FI a inceput sa aiba success, fiind indisponibil gratuit pe Web (Marin, 2002, p. 169)”.

Ce este PHP?

Numele provine din limba engleza si reprezinta un acronim. Este unul dintre cele mai importante limbaje de programare Web open-source (cod-sursa deschis) si server-side. In codul sursa PHP sunt incorporate instructiuni de procesare de inceput si de sfarsit, care permit, desigur, intrarea si iesirea din modul PHP, asemeni exemplului de mai jos:

<!DOCTYPE HTML>

<html>

<head>

<title>Exemplu</title>

</head>

<body>

<?php

Echo “Lucrare de licenta”;

?>

</body>

</html>

S-a estimat ca, la sfarsitul anului 1996, dupa ascensiunea de succes a limbajului PHP, numarul site-urilor care utilizau PHP/FI, ajunsese la cel putin 15 000, iar cu un an mai tarziu, numarul acestora ajunsese deja la 50 000. Insa cererea extreme de mare, ii provoaca pe partenerii de colaborare Zeev Suraski si Andi Gutmans, sa rescrie analizatorul PHP si sa formeze o noua versiune, si anume PHP 3.0. Ulterior, in anul 2000, a aparut si ultima versiunea a acestui limbaj de programare PHP 4.0, care ofera suport pentru serverul Apache si nu numai, dar ofera si posibilitatea accesarii documentelor XML si DOM. In prezent, succesul utilizarii acestui limbaj este atat de mare, incat s-a ajuns la peste un million de utilizatori.

Ce poate PHP sa faca?

Limbajul PHP (Hypertext Preprocessor), reprezinta un pachet puternic ce ofera un limbaj de programare accesibil din cadrul fisierelor HTML (asemanator cu Perls sau C). Deasemenea, ofera suport pentru manipularea bazelor de date intr-un dialect SQL.

Limbajul PHP se imparte in trei mari domenii:

Scripting de partea serverului (domeniu traditional de baza al PHP); pentru o buna functionare, e nevoie de un analizator PHP, un server Web si un navigator Web; ulterior, serverul web se ruleaza prin instalarea PHP conectata la el; se pot accesa iesirile programului PHP cu navigatorul web, vizualizand pagina PHP prin server;

Scripting in linia de comanda – acest tip de scripting sunt mai des utilizate pentru realizarea de lucrari simple de procesare a textelor, iar pentru realizarea acestora, este nevoie doar de un analizator PHP;

Scrierea aplicatiilor de birou (ofera posibilitatea de a scrie aplicatii ce pot rula pe mai multe platforme).

Limbajul de programare ofera multe beneficii in utilizarea lui. PHP iti ofera libertatea alegerii sistemului de operare si a serverului web, ofera posibilitatea de a utiliza ori o programare procedural, ori orientate pe obiecte, de asemenea, acestea doua se pot combina. Limbajul PHP nu se limiteaza doar la afisarea HTML, ci din contra, permite afisarea imaginilor, fisierelor PDF, filme Flash, afisarea textelor (XHTML, XML); un alt avantaj al limbajului de programare PHP, este acela ca interconecteaza aproape toate limbajele de programare web; sustine instantierea obiecetelor Java si utilizarea lor transparenta ca obiecte PHP.

“Marea calitate si cel mai mare avantaj al limbajului PHP este suportul cu un numar mare de baze de date. Este extreme de simplu sa se realizeze o pagina Web dinamica folosind o baza de date (Marin, 2002, p. 170)”.

In lucrarea prezenta PHP-ul a fost folosit pentru crearea diferitor functii si a scriptului de colectare a datelor.

HTML

Ce este HTML?

HTML (Hypertext Markup Language) a fost dezvoltat de Tim Bernes-Lee la CERN in 1989, avand ca utilitate schimbul de informatii dintre fizicieni de la un calculator la un altul, fiind conectate la internet. Ca sa se poata intampla acest lucru, erau necesare cateva trasaturi:

Independenta de platform (un document poate fi afisat in mod asemanator de computer diferite, acest lucru implicand fonte, grafica si culori diferite);

Posibilitati hypertext (aceste posibilitati usureaza navigarea intre mai multe documente sau in interiorul aceluiasi document pentru ca hypertext inseamna ca orice fraza, element, cuvant sau imagine al unui document vazut de un utilizator, poate face referinta la un alt document);

Structurarea documentelor (permite convertirea documentelor dintr-un format in altul si interogarea unor baze de date formate din aceste documente).

HTML este prescurtarea de la “Hyper Text Mark-up Language” si este codul care sta la baza paginilor web. HTML este un limbaj care nu face deosebire intre litere majuscule si minuscule, iar paginile sunt formate din etichete in pereche (una de deschidere si alta de inchidere) sau tag-uri cu extensia “html” sau “htm”.

Structura limbajului HTML

Componenta unui document HTML este urmatoare:

Versiunea HTML a documentului;

Zona head cu etichetele <head> </head>;

Zona body cu etichetele <body> </body> sau <frameset> </frameset>

Fig. 4.1 – Structura limbajului HTML

World Wide Web Consortium (W3C), este standardul official HTML si a enuntat cateva versiuni ale specificatiei HMTL:

HTML 2.0 – aparut in 1994, HTML 2.0 reflecta conceptia originala a HTML ca un limbaj de marcare independent de obiectele existente pentru asezarea lor in pagina, in loc de a specifica exact cum ar trebui sa arate acestea;

HTML 3.0 – aparut in anul urmator, 1995, a adaugat unele facilitate la HTML 2.0, precum tabelele si un mai mare control asupra textului din jurul imaginilor;

HTML 3.2 – aparut in 1996, a fost proiectat pentru a reflecta si a standardiza practicile acceptate la o scara mai larga, incluzand tagurile HTML 3.0, adoptate de autorii de browsere ca Netscape si Microsoft;

HTML 4.0 – este o aplicatie SGML ce se conformeaza standardului international;

HTML 5.0 . – ultima si cea mai puternica versiune de HTML.

CSS

CSS(Cascading Style Sheets) ajuta la formatarea si stilizarea elementelor unui document HTML, iar stilurile se pot atasa elementelor HTML prin intermediul unor fisiere externe sau in cadrul documentului, prin intermediul <style> sau/ si atributul style. Elementele XHTML, XML si SVGL, se pot formata cu ajutorul CSS.

Ulterior, s-a realizat un upgrade care aduce noi imbunatatiri si ajuta la dezvoltarea noilor concepte in domeniul de webdesign, ajungandu-se crearea unei variante noi si anume CSS3. CSS3 anumite avantaje, si anume ca poate crea bordure cu colturile rotunjite fara a folosi elemente grafice de fundal, asa cum folosea CSS si de asemenea, defineste prin valorile in pixeli, cat de rotunjite vor fi colturile unui element HTML sau unei imagini.

Materialize

Este un framework front-end gratuit de tip responsive dezvoltat de Google. Acesta se bazeaza pe ultimul trend in materie de design si anume flat design.

Framework-ul contine un fisier CSS și un fișier Javascript cu reguli predefinite, care se aplică pe codul HTML prin folosirea anumitor clase si id-uri.

JavaScript

Ce este JavaScript (JS) ?

A fost dezvoltat pentru prima data de catre Brendan Eich de la firma Netscape Communications Corporation, purtand diverse denumiri, incepand de la “Mocha”, apoi “LiveScript”, finalizand cu cea mai buna denumire “JavaScript” fiind un limbaj de script care extindea capacitatile HTML, adaugand un dinamism in paginile web prin oferirea unei alternative partial la utilizarea unui numar mare de scripturi CGI pentru prelucrarea informatiilor. Ulterior, din nevoia ca logica si inteligenta sa fie si pe partea de client si nu doar pe partea de server, a aparut JavaScript.

Dupa cele spuse, JS este un limbaj de programare orientat pe conceptual prototipurilor. Este un limbaj folosit pentru contruirea siturilor web, dar si pentru accesul la obiecte incastrate (embedded objects) in alte aplicatii.

Se considera ca exista zece aspecte fundamentale ale limbajului JavaScript pe care orice programator in acest limbaj ar trebui sa le cunoasca. Se vor enumera in continuare cele 10 aspecte fundamentale:

JavaScript nu poate fi introdus in HTML;

JavaScript este dependent de mediu;

JavaScript este un limbaj in totalitate interpretat (interpretarea de catre browser inainte de a fi executat);

JavaScript este bazat pe obiecte (obiecte HTML, cum sunt butoanele);

JavaScript nu este Java;

JavaScript este multifunctional;

JavaScript evolueaza;

JavaScript acopera context diverse

Ce poate face limbajul JavaScript?

Sunt multe lucruri care se pot face cu JS, pentru a adauga un plus de interactivitate paginilor web, de asemenea, pentru a oferi vizitatorilor de pagini web, o experienta mult mai placuta si interesanta. Mai jos, voi enumera cateva dintre beneficiile pe care ni le poate oferi limbajul de programare JavaScript:

Permite crearea unei interfete activa cu utilizatorul si un ofera un feed-back vizitatorilor de pagini web pe masura ce navigheaza;

Ne poate asigura ca utilizatorul introduce informatii valide in formulare (prin aceasta metoda se pot economisi timp si bani);

Ofera posibilitatea de a crea pagini HTML dinamice si personalizate in raport cu optiunile utilizatorului;

De asemenea, poate controla browserul, poate deschide ferestre noi, se pot afisa mesaje de avertizare si se pot pune mesaje proprii in bara de stare a ferestrei browserului.

Ce nu poate face limbajul JavaScript?

Ca oricarui limbaj de programare, ii sunt impuse anumite limitari de functionare, majoritatea din ratiuni de securitate, la fel se intampla si pentru JS, pentru ca este un limbaj de tip client-side, adica ruleaza doar pe calculatorul propriu si nu si pe server. Se vor enumera mai jos cateva exemple de ceea ce nu poate face limbajul JavaScript:

Nu permite citirea sau scrierea de fisiere pe calculatorul utilizatorului;

Nu permite citirea sau scrierea de fisiere pe server;

Nu poate inchide o fereastra de browser care nu a fost deschisa de el;

Nu poate citi informatii dintr-un browser care contine o pagina web de pe un alt server.

Metodele de inserare a script-urilor JavaScript

Pentru inserarea script-urilor in documentele HTML, pot fi folosite 4 modele, care sunt enumerate mai jos:

Metoda 1 – se plaseaza script-ul in antet-ul paginii (intre <head> si </head>);

Metoda 2 – se plaseaza script-ul in corpul paginii (intre <body> si </body>);

Metoda 3 – se utilizeaza fisierele sursa externa;

Metoda 4 – se creeaza un gestionar de evenimente.

JQuery

JQuery este o platforma de dezvoltare JavaScript, un software liber, open-source licentiate sub licenta MIT si GNU General Public License. El a fost gandit, in asa fel incat sa fie cat mai mic posibil ca si structura, pentru a putea fi disponibil pentru toate versiunile de browsere importante existente si pentru a respecta filosofia “Unobtrusive JavaScript”.

Conceperea sa a fost pentru a usura si pentru a imbunatati procesele urmatoare: traversarea arborelui DOM in HTML, managamentul inter-browser al evenimentelor, animatii, cereri de tip AJAX, manipularea elementelor CSS, inregistrarea si modificarea evenimentelor din browser si extensii (denumite si plugin-uri, sunt unele dintre cele mai interesante aspect ale jQuery; poate permite programatorilor sa dezvolte subaplicatii bazate in biblioteca principala care extind functiile de baza jQuery cu functii specific plugin-ului).

Ajax

AJAX (Asynchronus JavaScript si XML), nu este tocmai o tehnologie in sine, ci o tehnica de programare care ajuta la crearea aplicatiilor web de tip remote scripting (se utilizeaza impreuna mai multe tehnologii existente in scopul crearii aplicatiilor Web) si de tip interactiv (interactivitate crescuta si viteza de executie ridicata).

Asa cum s-a precizat anterior, ca AJAX este o tehnica de tip remote scripting care utilizeaza mai multe tehnologii existente, acestea sunt urmatoarele:

HTML/XHTML – ajuta la prezentarea datelor;

CSS – ajuta la prezentarea informatiilor;

DOM (Document Object Model) – redare dinamica si interactiune;

JavaScript – interactivitate si procearea informatiilor prezentate;

ECMAScript – ajuta la procesarea informatiilor;

XML/JSON – ajuta la schimbul de date si pentru manipularea acestora;

Obiectul XMLHttpRequest – transfer asincron al datelor.

In anul 2005, este anul in care s-a afirmat AJAX, fiind un termen introdus de catre James Garret, spus si Mr. Ajax, de la Adaptive Path. “AJAX a fost utilizat pentru prima oara (dar nu sunt acest nume) dup ace Microsoft a implementat obiectul COM Microsoft.XMLHTTP in Microsoft XML Parser. De asemenea, AJAX a fost utilizat pentru navigare in MSDN Documentation (Anghel, 2006, p. 22)”.

Traian Anghel, in cartea sa “Introducere in AJAX”, spune ca AJAX are anumite caracteristici care ne pot ajuta sa intelegem mult mai bine procesul utilizat de aceasta tehnica, acestea fiind urmatoarele:

Interactivitate scazuta – asteptarea de catre utilizator pentru reincarcarea intregii pagini dupa fiecare interactiune cu serverul;

Lipsa de responsivitate – desi doar o mica parte al unui continut al unui formular inclus intr-o pagina este usor modificat, aplicatiile Web transfera serverului intregul continut;

Interfete cu utilizatorul relativ simple;

Utilizabilitate scazuta – atunci cand utilizatorul realizeaza o noua selectie intr-o lista, aplicatia Web ajuta la reincarcarea intregii pagini, iar acest lucru, uneori, poate crea confuzie.

Implementarea aplicatiei

Nivelul fizic al bazei de date

Nivelul fizic (intern) conține schema fizică ce specifică modul de stocare al datelor pe suportul de memorie (extern) în funcție de SGBD și reprezintă o bază de date fizică, ce există material, organizată în unul sau mai multe fișiere. Schema fizică reflectă organizarea datelor în fișier și în cadrul componentelor lui.

Modul de creare a tabelelor in baza de date, folosind MySQL:

Crearea tabelei „Albums”

CREATE TABLE `albums` (

`id` int(11) NOT NULL,

`cat_id` int(11) NOT NULL,

`album_name` varchar(64) NOT NULL,

`uid` int(11) NOT NULL,

PRIMARY KEY (`ID`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Crearea tabelei „Categories”

CREATE TABLE `categories` (

`id` int(11) NOT NULL,

`uid` int(11) NOT NULL,

`category_name` varchar(64) DEFAULT NULL,

`created_at` varchar(32) NOT NULL,

PRIMARY KEY (`ID`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Crearea tabelei „Images”

CREATE TABLE `images` (

`id` int(11) NOT NULL,

`uid` int(11) NOT NULL,

`img_name` varchar(40) NOT NULL,

`album_id` int(11) NOT NULL,

`cat_id` int(11) NOT NULL,

PRIMARY KEY (`ID`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Crearea tabelei „Users”

CREATE TABLE `users` (

`id` int(11) NOT NULL,

`nume` varchar(64) NOT NULL,

`prenume` varchar(64) NOT NULL,

`email` varchar(60) NOT NULL,

`level_access` tinyint(2) DEFAULT NULL,

`password` varchar(32) NOT NULL,

`oras` varchar(64) NOT NULL,

`google` varchar(128) NOT NULL,

`facebook` varchar(128) NOT NULL,

`twitter` varchar(128) NOT NULL,

`dribble` varchar(128) NOT NULL,

PRIMARY KEY (`ID`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Implementarea paginilor web

Folderele aplicatiei sunt structurate in felul urmator:

– /site

– /assets

– /css

– /images

– /js

– /application

– /inc

– /views

– /layouts

– /login

– /main

In continuare voi introduce screenshot-uri cu paginile aplicatiei dupa implementare si voi detalia procesele importante.

Fig. 4.2 – Pagina de inregistrare

Fig. 4.3 – Pagina de autentificare

In figurile 4.2 si 4.3 se poate observa rezultatul final dupa implementare si design a formularelor de inregistrare si autentificare.

Codul functiilor de inregistrare si autentificare vor putea fi consultate in anexa.

Fig. 4.4 – Pagina “Dashboard”

Pagina „Dashboard” este prima pagina pe care utilizatorul o vede dupa logare. In figura 4.4 se poate observa rezultatul final dupa design-ul si implementarea acestei pagini.

Dupa ce va face prima cautare utilizatorului ii va aparea pe prima pagina ultima cautare pe care acesta a facut-o. De asemenea tot aici va putea vizualiza ultimii utilizatori inregistrati pe platforma

Fig. 4.5 – Pagina “Categorii”

Figura 4.5 este rezultatul implementarii paginii web numita sugestiv „Categorii”.

Utilizatorul poate adauga categorii noi sau modifica categoriile deja existe. Categoriile existente pot fi redenumite sau sterse.

Fig. 4.6 – Pagina “Crawler”

Pagina „Crawler” este pagina ce indeplineste functia cea mai importanta a aplicatiei. In figura 4.6 se poate observa aspectul si functionalitatile acesteia.

Aici utilizatorul poate seta crawler setand anumiti parametrii pentru a colecta imaginile din Google.

Dupa cautare, dupa cum se poate observa in figura 4.6, acesta poate previzualiza imaginile colectate.

Fig. 4.7 – Pagina “Albume”

Fig. 4.8 – Vizualizarea unui album

Figura 4.7 si figura 4.8 reprezinta pagina de albume respectiva pagina in care utilizatorul vizualizeaza un album.

Albumele sunt create automat dupa efectuarea colectarii imaginilor. Utilizatorul poate vizualiza sau sterge un album

Fig. 4.9 – Pagina “Contact”

In figura 4.9 se poate observa rezultatul final dupa design-ul si implementarea paginii de contact.

Aici utilizatorul poate lua legatura cu administratorul aplicatiei

Fig. 4.9.1 – Pagina de setari a utilizatorului

Ultima pagina pe care utilizatorul sau administratorul o poate accesa in cadrul acestei aplicatii este pagina de setari a profilului.

Aici utilizatorul are cateva posibilitati de personalizare a profilului, iar administratorul de administrare a bazei de date.

Testarea aplicatiei

Testarea software este un proces important din dezvoltarea aplicatiei ce poate salva timp si implicit reduce costurile dezvoltarii aplicatiei.

In scopul testarii deseori se include atat examinarea statica a codului sursa cat si examinarea codului in executie in diferite imprejurari si sub diferite conditii.

Etapele procesului de testare software sunt:

Planificarea

Analiza

Proiecarea

Implementarea

Executia

Evaluarea

Testarea functionala

In testarea functionala am testat functionalitatea tuturor paginilor web ale aplicatiei.

Aici am avut in vedere:

Testarea tuturor link-urilor din aplicatie(fie ca sunt catre o alta pagina, catre o pagina din afara aplicatiei sau catre aceasi pagina)

Testarea functionalitatii formularelor prezente in aplicatie, cum ar fi: formularul de inregistrare, formularul de logare, formularul de configurarea a crawler-ului, formulare de informatii sau formularele de social media.

Testarea functiilor din aplicatie, cum ar fi: functia ce face conexiunea la baza de date, functiile de inregistrare si logare, functiile de manipulare a categoriilor si albumelor, functiile crawler-ului pentru colectarea datelor.

Testarea compatibilitatii

Aici am realizat testarea functionalitatii aplicatiei de pe mai multe browsere, acest aspect fiind foarte important deoarece utilizatorii ce folosesc browser-e diferite fata de cel pe care aplicatia a fost dezvoltat pot intampina diferite probleme la vizualizuarea aplicatiei, asezarea in pagina a elementelor HTML fiind uneori diferita.

Browser-ele pe care aplicatia a fost testata sunt: Google Chrome, Mozilla Firefox, Opera, Safari, Internet Explorer si Microsoft Edge. Am ales aceste browsere datorita popularitatii acestora.

Nu am intampinat probleme pe nici unul din browser-ele enumarate mai sus.

Testarea design-ului responsive

Pentru a testa design-ul responsive al aplicatiei am folosit un soft online gratuit ce permite vizualizarea aplicatiei de pe diferite rezolutii de ecrane si diferite gadget-uri.

Aici am intampinat cateva probleme, cum ar fi suprapunerea anumitor elemente din aplicatie, pe care le-am rezolvat ulterior.

De asemenea in testare am avut in vedere timpul de raspuns si timpul de incarcare a paginilor web pe diferite conexiuni de internet.

Manual de utilizare

Aplicatia are o interfata user friendly, datorita acestui lucru este si foarte usor de folosit. Utilizatorul va avea de urmat cativa pasi simpli de urmat pentru a o utiliza.

Fig. 6 – Pasul 1

Primul pas este inregistrarea, pentru aceasta este necesara completarea campurilor, apoi apasarea butonului incercuit din figura 6.

Fig. 6.1 – Pasul 2

Pasul 2 este logare, aceasta se poate realiza prin completarea campurilor cu datele cerute si apasarea butonului incercuti din figura 6.1

Fig. 6.2 – Pasul 3

Pentru pasul 3, dupa logare utilizatorul are 2 variante de a continua. Acesta poate alege tabul „Categorii” din meniul de navigatie sau poate apasa butonul „Continua” exemplificate in figura 6.2. Ambele il vor redirectiona pe utilizator pe pagina de categorii unde va putea crea prima galerie. Crearea cel putin a unei galerii este necesara pentru a incadra viitorul album cu imagini intr-o galerie. In caz contrar utilizatorul nu va putea folosi scriptul de colectare a imaginilor, aplicatia avertizandu-l ca inca nu a creat nicio categorie.

Fig. 6.3 – Pasul 4

Categoria se poate crea completand campul „Denumire” cu denumirea dorita si apasand butonul „Adaugare” incercuit in figura 6.3.

Dupa crearea categoriei utilizatorul poate proceda ca la pasul 3. Mai exact acesta poate apasa butonul „Continua” sau selecta tabul „Crawler” din meniul de navigatie.

Fig. 6.4 – Pasul 5

Ultimul pas, pasul cu numarul 5 este pasul in care utilizatorul configureaza crawler-ul pentru a putea colecta imaginile. Configurarea se poate face in mod asemanator figurii 6.3 apoi se poate apasa butonul „Colectare imagini” pentru executarea scriptului.

Albumul cu imaginile colectate se va crea automat, iar utilizatorul il va putea vizualiza dupa ce va alege tabul „Albume” din meniul de navigatie.

CONCLUZII

Dezvoltarea aplicatiei Google img Crawler a necesitat utilizarea multor cunostinte practice si teoretice invatate in facultate, cum ar fi: programarea orientata pe obiecte, proiectarea si manipularea bazelor de date sau programarea web. In plus, acumularea unor noi cunostiinte teoretice si practice au fost necesare, cat si invatarea utilizarii unor tehnologii noi.

De asemenea pentru a putea dezvolta aplicatia a fost necesar sa invat si sa inteleg cum functioneaza motorul de cautare Google si cum functioneaza un script de colectare a datelor, acesta stand la baza platformei.

In momentul de fata Google img Crawler se afla la varianta 1.0, pe viitor aplicatia poate fi dezvoltata, pentru a permite aparitia unor noi facilitati. In viziunea mea, ideal ar fi ca aceasta sa se indrepte undeva in partea de social media unde utilizatorii ar putea interactiona unul cu celalalt, isi vor putea vizualiza profilele unii celorlalti, isi vor putea impartasi munca, albumele cu ceilalti si vor putea comunica intre ei printr-un sistem de mesaje personale.

De asemenea pe viitor mi-as dori ca utilizatorii sa-si poata personaliza si mai mult profilele, sa aiba posibilitatea sa-si incarce lucrarile de design personale si sa le poata organiza in albume si portofolii.

Alte imbunatatiri care ar putea fi aduse aplicatiei sunt la scriptul de colectare a imaginilor. Aici s-ar putea adauga cateva filtre la cautare pentru ca aceasta sa fie mai precisa.

Atat lucrarea cat si aplicatia de fata indeplineste toate obiectivele formulate initial si cu siguranta ar putea fi lansate in mediul online.

In concluzie, pentru ca in domeniul IT este nevoie de o adaptare rapida, tehnologia avansand pe zi ce trece, in dezvoltarea aplicatiei prezentate mai sus, am reusit sa combin cele mai noi instrumente informatice, tocmai pentru a aduce noi beneficii utilizatorilor.