Středoškolská technika Ownea webový portál se službami pro uživatele

Středoškolská technika 2015 Setkání a prezentace prací středoškolských studentů na ČVUT

Ownea – webový portál se službami pro uživatele

Aleš Dopita

VOŠ a SPŠE Olomouc Božetěchova 3, Olomouc

ANOTACE Webová aplikace s názvem Ownea vznikla za účelem nabídnou uživateli přívětivé prostředí s mnoha užitečnými službami. V práci je obsažen rozpis jednotlivých doplňků – služeb - s popisem jejich fungování. Web jsem vytvořil také z důvodu osvojení moderních technologií a možností v IT světě. Rád bych z webu postupně vybudoval webovou aplikaci, nabízenou v mnoha zemích světa. Časem by mohla nahradit domovské stránky jako je Seznam.cz, nebo Centrum.cz. Možnosti vývoje doplňků jsou téměř neomezené a chci z tohoto konceptu vytěžit maximum.

ANNOTATION The web application named Ownea was created for the purpose to offer a friendly interface with a lot of services to the user. This study contains a list of particular addons – services with the description of their functionality. I also made this web for the reason of learning different modern technology and options in the IT world. I would like to gradually build up a web application offered in multiple countries. Later it could replace homepages like Seznam.cz or Centrum.cz. The development options of addons are almost endless.


O BSAH Obsah ............................................................................................................................ 3 Úvod ............................................................................................................................. 4 1. Struktura .................................................................................................................... 7 1.1. Složky ................................................................................................................. 7 1.2. Databáze ............................................................................................................. 9 2. Uživatelský systém .................................................................................................. 10 2.1. Autentifikace .................................................................................................... 10 2.1.1. Registrace .................................................................................................. 10 2.1.2. Přihlášení ................................................................................................... 11 2.1.3. Ověření emailové schránky ....................................................................... 12 2.2. Nastavení .......................................................................................................... 13 2.2.1. Profil .......................................................................................................... 13 2.2.2. Vzhled ....................................................................................................... 13 2.2.3. Doplňky ..................................................................................................... 14 2.2.4. Rozmístění ................................................................................................. 15 2.3. Design ............................................................................................................... 15 2.4. Kompatibilita .................................................................................................... 15 3. Doplňky ................................................................................................................... 16 3.1. Emailový klient................................................................................................. 17 3.1.1. Přidávání účtů ............................................................................................ 17 3.1.2. Propojení přes imap ................................................................................... 18 3.1.3. Rozhraní .................................................................................................... 18 3.2. RSS čtečka ........................................................................................................ 20 3.2.1. Přidávání kanálů ........................................................................................ 20 3.2.2. Rozhraní .................................................................................................... 20 3.3. SPŠEOL doplněk .............................................................................................. 21 3.3.1 Rozvrh ............................................................................................................... 21 3.3.2. Změny v rozvrhu ....................................................................................... 22 3.3.3. Obědy ........................................................................................................ 23 3.4. Další doplňky.................................................................................................... 24 3.4.1. Hodiny, poznámky a odkazy ..................................................................... 24 3.4.2. Počasí ........................................................................................................ 25 3.4.3. Rádio ......................................................................................................... 26 3.4.4. Mapy a překladač ...................................................................................... 27 Závěr ........................................................................................................................... 28 Seznam studijních materiálů ....................................................................................... 29 Seznam obrázků a tabulek .......................................................................................... 30

Strana 3 / 30


Ú VOD Prvotní záměr bylo vytvoření webové stránky, která dá uživateli přehled informací z nastavených webů a poskytne mu nejčastěji využívané služby. Nápad vznikl kvůli strádání nad iGooglem, který byl založen v roce 2005 a zrušen v roce 2013. Nabízel širokou nabídku „widgetů“ s ajaxovým ovládáním. Můžeme objevit mnoho alternativ, které se snaží iGoogle napodobit či nahradit. Mezi nejznámější patří Netvibes nebo uStart. obr.1 – ukázka iGoogle

Českou lokalizaci bychom hledali u alternativních služeb marně a proto (díky tomu) jsem se odhodlal vytvořit projekt, který by nabídl jednoduché ovládání, potřebné funkce, českou lokalizaci a služby, které jinde nenajdeme. Byla to výzva, protože jsem začínal bez předchozích zkušeností pouze s vidinou, že na to mám a chci sám sobě udělat radost. Vzhledem k dlouhým večerům u počítačových her to byla skvělá volba.

Strana 4 / 30

Ownea – webový portál se službami pro uživatele U serverové části jsem se rozhodl pro programovací jazyk PHP. Lze pro něj nalézt mnoho návodů a typů, které jsem ze začátku tolik potřeboval. Podporují jej všechny webové hostingy oproti např. Pythonu, který zatím v Česku není natolik rozšířen. obr.2 – loga využívaných produktů

V červenci 2014 jsem začal se studováním PHP a MySQL. Na přelomu září a října 2014 jsem se rozhodl pro použití PHP frameworku. Frameworky všeobecně nabízejí praxí otestovaný a funkční model celé aplikace, starají se o bezpečnostní díry a v některých případech usnadňují programátorovi práci. Jasnou volbou byl Nette Framewok díky české komunitě a podpoře spolužáků. Až začátkem roku 2015 jsem začal pracovat na samotném projektu. V únoru jsem plánoval rozchodit první testovací verzi přímo na internetu, tím pádem musel vzniknout název. Projekt dostal jméno Ownea. Název vznikl „zkomolením“ anglického slova own – vlastní. Součástí celé aplikace je také javascriptová vrstva, která pracuje s uživatelským rozhraním. Hojně využívám knihovny jQuery a jQueryUI a to kvůli jejich využitelnosti v dalších knihovnách a snadné manipulaci s elementy, ajaxovými požadavky, tooltipy apod. O vzhled aplikace se starají CSS styly, které generuji pomocí php každému uživateli zvlášť, podle nastavení a použitých doplňků (jestliže uživatel nepoužívá doplňek Počasí, nenastaví se mu ani css styly pro počasí). Tímto způsobem se částečně šetří data a počet požadavků na server.

Strana 5 / 30

Ownea – webový portál se službami pro uživatele Pro vývojové prostředí jsem nejdříve zvolil NetBeans IDE a aktuálně vyvíjím na doporučení v JetBrains PhpStorm 8. Všem studentům nabízejí licenci zdarma, na které lze ušetřit přes 1500Kč. Webhosting pro Ownii momentálně technicky zajišťuje Wedos, který se dostal na první pozici českých webhostingů. V blízké budoucnosti plánuji přejít na francouzské servery firmy OVH, která nabízí výborné parametry za bezkonkurenční cenu. Otevřou se mi další možnosti a technologie pro rozvoj aplikace. Rád bych zkusil pracovat s WebSockety, které nabízejí pokročilé možnosti v komunikaci mezi serverem a klientem. obr.3 – ukázka možného vzhledu Ownie po nastavení

Strana 6 / 30


1. S TRUKTURA Aplikace je postavená na softwarové architektuře MVC (Model-view-controller). Tato architektura nám rozděluje aplikaci na datový model, uživatelské rozhraní a řídící logiku. Jednotlivé vrstvy by měly pracovat nezávisle na ostatních. Obr.4 – blokové schéma MVC modelu (zdroj: http://www.zdrojak.cz/ ) Model představuje datovou vrstvu aplikace což je v praxi relační databáze - případně jsou v něm obsaženy metody na získávání dat z externích serverů (emailové servery, google servery..). View je vrstva, která se stará o zobrazení dat uživateli. Patří do ní korektní vypisování proměnných a vykreslování stránky. Controller

se

stará

o

zpracování

a

„rozdávání“ úkolů. Zajišťuje funkčnost celé aplikace. Jestliže uživatel bude chtít vykonat akci, controller ji zachytí, zpracuje, požádá model o změnu dat a násladně překreslí view. Nette Framework, ve které je aplikace psána, tento model mírně upravuje. Controlleru říkáme presenter a view nemá přímý přístup k modelu. V praxi tak z view zavoláme akci presenteru, který si načte data z modelu a vrátí výstup zpět do view. Ownea má mnoho presenterů, view a modelů. Máme modely „globální“, které slouží pro přísup do databáze, obsahují základní funkce pro cachování a správu uživatelů. Dále má každý doplňek svůj vlastní model s funkcemi potřebnými pro svůj provoz. Stejně tak view a presenter má každý doplněk svůj a tím pádem jsou následné úpravy jednotlivých doplňků velmi snadné a neovlivňují funkčnost ostatních částí aplikace.

1.1. S LOŽKY Adresářová struktura vychází z použitého modelu (MVC) a ze základního logického a bezpečnostního uspořádání. K celé aplikaci se přistupuje ze souboru index.php, který je umístěn ve veřejné složce www, tím pádem se „z venku“ nikdo k jednotlivým částem aplikace nemůže dostat. Podrobný rozpis je včetně komentářů zapsán v následující tabulce.

Strana 7 / 30

Ownea – webový portál se službami pro uživatele tab.1 – adresářová struktura aplikace

Cesta adresářů/souborů

Poznámky main.php

controller doplňku

view.latte

view doplňku

app_1/ apps/ ...

složky dalších doplňků

apps_temp/

...

adresář pro cache doplňků

config/

config.neon

soubor s konfigurací

app_1/

Ap1_model.php model pro doplněk další složky s modely pro

...

doplňky

models/ app/

BaseModel.php

„globální“ model

...

další globální modely

BasePresenter.php

controller aplikace

...

další controllery

router.php

konfigurace cest url

presenters/ router/

default.latte

view pro controller

...

další view pro controller

Homepage/ templates/ ...

další složky pro controllery

bootstrap.php

zaváděcí soubor aplikace

log/

...

adresář pro logování chyb

temp/

...

adresář pro cachování adresář obsahující všechny

vendor/ ...

knihovny potřebné k běhu

main.js

hlavní script pro klienta

...

další scripty

...

adresář pro obrázky

js/ www/

img/ index.php

soubor, který spouští aplikaci

Strana 8 / 30


1.2. D ATABÁZE Jako relační databázi celé aplikace používám MySQL s ovládáním přes Nette/Database, které umí skládat jednoduché dotazy. Při použití náročnějších dotazů jsem je musel psát manuálně pomocí SQL dotazů. Nette/Database je třída, která tvoří nadstavbu standartního PDO a reprezentuje připojení k databázi. Přes tuto třídu se provádí všechny dotazy na databázi a tím lze snadno získávat data. Pokládá efektivní dotazy, díky kterým databáze vrací pouze potřebná data. Implementace Nette nám řeší většinu bezpečnostích děr (například přístupové údaje nejsou psané volně v php souboru, ale přímo v config.neon – viz adresářová struktura). PDO je standartně používaná třída, která nám reprezentuje připojení mezi PHP a databázovým serverem. Valná většina hostingů jej podporuje a jedná se o nejběžnější způsob připojení k databázi. SQL je dotazovací jazyk používající se pro práci s relačními databázemi. SQL příkazy lze rozdělit do 4 skupin: 1.

Pro práci s daty – čtení, zapisování, mazání..

2.

Pro definici dat – vytváření tabulek, odstraňování tabulek..

3.

Pro nastavení přístupových práv – nastavování a odebírání práv

4.

Pro řízení transakcí – zahájení nebo ukončení transakce

Databáze nemá pevně daný počet tabulek, protože s přibývajícími doplňky se jejich počet zvyšuje a databáze roste. Tabulky můžeme rozdělit do dvou skupin. Bohužel zatím nemám optimalizované přístupy k databázi, a tak počet dotazů závisí na nastaveném počtu doplňků. Při zobrazení hlavní stránky s doplňky se musí zjistit název uživatele a jeho nastavené doplňky. Poté většina doplňků pošle dotaz pro zjištění informací (např. nastavené město u počasí, nastavené emailové účty, třída apod.). V ideálním případě bych chtěl stáhnout počet dotazů na 2-3 při zobrazení hlavní stránky. Zde mám více možností řešení. První je cachovat výsledky dotazů a invalidovat je až ve chvíli, kdy uživatel změní nějaké nastavení. Tím by se ušetřily dotazy na databázi při běžném používání a vyšší nápor by byl pouze při nějaké změně. Druhou možností je poslat složený dotaz pro zjištění uživatele a zároveň nastavených doplňků a z výsledku tohoto dotazu složit druhý dotaz pro zjištění informací pro všechny doplňky najednou.

Strana 9 / 30


2. U ŽIVATELSKÝ SYSTÉM Po základním návrhu databáze přišel na řadu uživatelský systém. Ten se stará o registrace a přihlašování uživatelů. Zatím zde chybí vygenerování nového hesla, tuto funkci budu řešit v následujících měsících. Celý autentifikační systém usnadňuje implementace Nette frameworku, který se stará o hashování hesel, jejich ověřování, přihlašování do systému, nastavení práv atd. Do budoucna také plánuji přepis třídy, která se stará o ukládání relace (session). Každý přihlášený počítač vytvoří na serveru jednu relaci. Bohužel nyní nemám k relacím podrobný přístup a nemohu je nijak ovládat. Cílem bude uživateli nabídnout výpis všech jeho relací a jejich případné odstranění.

2.1. A UTENTIFIKACE Celý autentifikační systém je z principu velmi jednoduchý. Při registraci uživatele se do databáze uloží zvolené jméno, email a zakódované heslo. Při přihlášení se tyto informace pouze porovnají a jestliže se shoduje jméno a heslo, uživatel je přihlášen. Tento princip se používá standartně na téměř všech internetových stránkách, ale může se lišit mírou zabezpěčení. Proti odcizení hesel se používají různé hashovací funkce a principy.

2.1.1.

REGISTRACE

Na registrační stránce je uživatel vyzván k zadání: -

přihlašovacího jména

-

celého jména

-

emailu

-

hesla

Přihlašovací jméno slouží k přihlašování uživatele. Systém ověřuje zda již zvolené jméno neexistuje a pokud ano, řekne uživateli ,aby zvolil jiné . Musí se splňovat validační pravidla ,která porovnávají řetězec vstupu s regulerním výrazem. Tento výraz povolí písmena abecedy, číslice, pomlčky a podtržítka. Celé jméno může mít délku 4 až 16 znaků. V případě nesplnění těchto podmínek je uživateli nabídnuto vyzkoušení jiného jména. Vstup s názvem Celé jméno se ukládá z důvodu budoucí potřeby kontaktovat uživatele emailem, nebo v případě využití systému zpětné vazby. Nevztahují se na něj žádná validační pravidla a vstup není povinný. Uživatel jej může vynechat.

Strana 10 / 30

Ownea – webový portál se službami pro uživatele Email se zadává ze dvou důvodů. Prvním je možnost přihlášení pomocí emailu. Tato funkce může být pro některé uživatele lepším řešením, protože si email pamatují lépe než přihlašovací jména od různých stránek. Druhým důvodem je ověření emailu pro následné kontaktování o změnách aplikace, obnovování hesla nebo zablokování přístupu. Heslo musí uživatel zadat dvakrát z důvodu možného překlepu. Jediným validačním pravidlem je minimální délka 6 znaků. Díky tomu si může uživatel nastavit téměř cokoliv. Jestliže se obě zadaná hesla shodují, musí se před uložením zahashovat (zakódovat). K tomuto účelu se za originální heslo přidá tzv. sůl. Sůl je náhodně vygenerovaný řetězec, aby se zmenšila šance zpětného rozhashování. Až máme heslo „osolené“ , můžeme jej teprve hashovat. PHP nám nabízí mnoho funkcí, v našem případě opět volím třídu Nette frameworku, která využívá funkci crypt(). Jestliže všechny zadané údaje projdou validačními pravidly, zapíší se do databáze a systém okamžitě přihlásí uživatele a přesměruje jej na hlavní stránku s přehledem. Samotná registrace nezabere déle než minutu. Časem přidám do registračního formuláře ochranu proti botům. S největší pravděpodobností využiji opis Captcha kódu.

2.1.2.

PŘIHLÁŠENÍ

Přihlašovací formulář naleznete na titulní straně v levé části. Z mého pohledu je to nejrychlejší řešení – nemusíme rozklikávat další stránku, ani vysouvací formulář. Uživatel si může vybrat, zda bude přihlášen pomocí uživatelského jména, nebo emailu, který zadával u registrace. Opět platí validační pravidla u jména i hesla o minimální délce 6 znaků. Jestliže vstupy projdou validací, přihlašovací systém zahashuje vstupní heslo. Poté se pokusí v databázi najít řádek se zadaným jménem, nebo emailem a porovná se zahashované heslo ze vstupu se zahashovaným heslem v databázi. Jestliže hesla souhlasí, je vytvořena nová relace a uživatel je přesměrován do hlavní stránky s přehledem.

Strana 11 / 30

Ownea – webový portál se službami pro uživatele obr.5 – ukázka přihlašovací (úvodní) stránky

2.1.3.

OVĚŘENÍ

EMAILOVÉ SCHRÁNKY

Při registraci uživatele se odesílá na zadaný email odkaz s aktivací. Ownea zatím neřeší zda je uživatelský email ověřený, ale pro budoucí použití jsem již tuto funkci zakomponoval. V prvním kroku se vygeneruje náhodný řetězec o délce 32 znaků. Tento řetězec se uloží do databáze i s uživatelským id. Poté se vytvoří odkaz a odešle se jednoduchý email přes SMTP server na email uživatele. Po rozkliknutí odkazu se porovná řetězec z emailu s řetězcem v databázi a pokud souhlasí, označí se uživatelský email jako ověřený.

Strana 12 / 30


2.2. N ASTAVENÍ Do nastavení se uživatel dostane přes ozubené kolečko v pravém horním rohu webové stránky. Nastavení se dá rozdělit do 2 kategorií. Obecné nastavení účtu a nastavení jednotlivých doplňků. Finální verze se mírně liší od původního návrhu nastavení. Většina doplňků nepotřebuje mnoho nastavení a proto je pro usnadnění přesunuto přímo do doplňku na hlavní obrazovce.

2.2.1.

PROFIL

V nastavení profilu můžeme měnit přihlašovací jméno, kontaktní email, nebo nastavit nové heslo. Políčka pro jméno a email jsou vyplněná již při vstupu na stránky, heslo se z bezpečnostních důvodů nevyplňuje. Pro mírné odlehčení databáze se při stisku tlačítka uložit ukládají pouze změněné položky. V případě zadání nového uživatelského jména systém ověří zda je dostupné a splňuje validační podmínky. Stejný proces se provádí u změny kontaktního emailu. U hesla je postup složitější. Jestliže nevyplníme ani jedno z polí, uživateli zůstává heslo původní. Naopak, když uživatel vyplní staré heslo, zapínají se validační podmínky pro hesla. Opět se musí shodovat nové heslo s kontrolním a musí mít délku minimálně 6 znaků. Při nesplnění podmínek je uživatel upozorněn.

2.2.2.

VZHLED

Nastavení vzhledu je rozsáhlejší než nastavení profilu a umožňuje každému uživateli přizpůsobit stránku podle jeho představ. Podle zvolených nastavení se uživateli generuje css styl pomocí php scriptu a dosazuje do proměnných nastavené barvy, pozadí atd. Na výběr máme ze dvou základních odstínů – světlý a tmavý. Každý odstín podporuje průhlednost, kterou si může uživatel nastavit v rozmezí 30-95%. Po nastavení průhlednosti je pozadí všech doplňků průhledné. Toho docílíme přidáním alpha kanálu. Pro plné přizpůsobení byla přidána možnost zvolit z předvolených obrázků a volba vlastního obrázku výběrem z počítače. Uživatelský obrázek musí být ve formátu png, jpg, nebo gif. Maximální povolená velikost je 5MB. Po nahrátí na server systém změní velikost na 1920x1080 pixelů (v případě jiného poměru stran se řídí podle kratší strany) a uloží se do adresáře s názvem .jpg. Jestli si uživatel nahraje nové pozadí, staré se tím automaticky přepíše a už jej není možné bez opětovného nahrátí znovu nastavit. Další drobností je možnost skrývání panelů u nastavených doplňků. Tato funkce se provádí uložením určité proměnné do cookies uživatele a následné zpracování javascriptem. Skryté panely se zobrazí při najetí myší nad daný doplněk. Tato možnost je velmi nepraktická na dotykových zařízeních z důvodu neschopnosti „najet myší“. Nejnovější volbou je rozostření pozadí doplňků. Tato volba se zobrazí pouze v případě nastavení průhlednosti. Tohoto efektu jsem dosáhl pomocí css filtrů, které jsou dostupné od verze css3. Podporují je skoro všechny nejnovější prohlížeče s vyjímkou Internet Exploreru, kde je Strana 13 / 30

Ownea – webový portál se službami pro uživatele rozmazání jednoduchou cestou prakticky nemožné. Zkoušel jsem také rozostřit obrázek přímo při nahrávání a uložit jej jako kopii, ale tento proces byl pro php velmi náročný a výsledný vzhled nebyl tak dobrý.

2.2.3.

DOPLŇKY

Pro změnu nastavení doplňků byly dva koncepty. Prvním byla změna nastavení přímo v sekci s ostatními nastaveními. Postupem času se tato možnost ukázala jako zbytečně zdlouhavá a složitá v případě, že jsme chtěli nastavit pouze jinou třídu pro rozvrh. Proto v sekci Nastavení nalezneme jen složitější doplňky – Email a RSS čtečka. Nastavení emailů nabízí přidávání nových účtů (více informací v kapitole 3.1.1.) a správu nastavených účtů. Můžeme měnit pořadí nastavených emailů, vybírat složky pro synchronizaci, změnit servery a porty pro IMAP a SMTP nebo nastavit emailový účet pro zobrazování v samostatném okně. V budoucnu plánuji některé z těchto funkcí integrovat přímo do hlavní stránky s přehledem – v režimu úprav. Doplňek RSS čtečky má nastavení velmi jednoduché. Obsahuje přehled nastavených kanálů a jejich přidávání. Lze nastavovat pořadí, název, upravovat url adresu feedu a odstraňovat je. O funknci přidávání získáte bližší informace v kapitole 3.2.1. Přidávání samotných doplňků provádíme přes Správu doplňků, kterou nalezneme v pravém horním rohu hlavní obrazovky. Nalezneme zde karty s názvem a jednoduchým popisem doplňku. Nastavené doplňky jsou označeny zatržítkem. Do budoucna plánuji každému doplňku udělat zvláštní hodnocení uživatelů s podrobnějším popisem a obrázky.

Strana 14 / 30


2.2.4.

ROZMÍSTĚNÍ

Jak jsou doplňky rozmístěny, si „říká“ sám uživatel. Můžeme je jednoduše přesouvat a měnit jejich velikosti v režimu úprav. Do tohoto režimu se dostaneme ikonkou puzzle v pravém horním rohu. Přechodem do tohoto režimu zmizí podrobné informace z doplňků a objeví se pouze názvy. Rozmístění měníme jednoduše přesunutím pomocí myši a velikost měníme táhnutím za šipku v pravém dolním rohu každého doplňku. Virtuální mřížka má 12 sloupců a neomezený počet řádků. Každý doplněk má v databázi nastaveny výchozí, minimální a maximální rozměry. Každý uživatel má uloženy nastavené doplňky, jejich rozmístění a velikosti. O mřížku se stará javascriptová plugin Gridstack.js, která maximálně vyhovuje potřebám a nárokům Ownie. Použití je velmi jednoduché a implementace mi zabrala asi 3 dny.

2.3. D ESIGN Vzhledem k možnostem nastavení vzhledu, změnám obrázků a doplňků se pro jednodušší manipulaci generují css každému uživateli zvlášť pomocí php funkce. Tato možnost má 2 hlavní výhody: – spojí se mnoho css souborů do jednoho, tím se ušetří počet požadavků odeslaných na server – nezahrnou se soubory, které nejsou potřebné. V praxi to znamená, že si nenastavíme doplněk Rádio, nenačtou se nám ani css styly. Je vyřešeno cachování, to znamená, že prohlížeč si stáhne styly pouze jednou a nechá si je ve svojí paměti (nemusí je stahovat stále dokola). Při přidání doplňků, změně obrázku na pozadí apod. se musí styly invalidovat a stáhnout znovu.

2.4. K OMPATIBILITA Ownea je funkční ve všech operačních systémech (Windows, Linux, OS X), včetně mobilních (WindowsPhone, Android, iOS), které mají jakýkoliv moderní webový prohlížeč podporující javascript. Do budoucna plánuji zlepšit podporu mobilních zařízení vytvořením mobilní verze webu, nebo přímo aplikace pro jednotlivé platformy, která by svými funkcemi nahrazovala celou řadu jiných aplikací.

Strana 15 / 30


3. D OPLŇKY Nyní se podíváme na konkrétní doplňky pod lupou. V současné době jsou k dispozici : Email, RSS čtečka, SPŠEOL, Poznámky, Hodiny, Odkazy, Rádio, Počasí, Mapy, Překladač a Vyhledávač. V budoucnu bude jejich počet narůstat a díky nezávislosti se může na vývoji podílet bez větších komplikací více lidí. Každý z doplňků má svůj presenter, view i model – tedy jestliže jej potřebují. Například hodiny nepotřebují žádný přístup k databázi, ani k jiné stránce, takže nepotřebují model. Součástí většiny aplikací jsou i funkce v javascriptové vrstvě. Funkce jsou pojmenovány např. app_2, app_7 apod. Volány jsou pouze funkce nastavených doplňků. Informace si předáváme pomocí cookies, které server posílá při každém požadavku. Všechny scripty pro aplikace se volají pouze na hlavní stránce (jinak se stávalo, že hrálo rádio i v nastavení a nemohli jsme jej vypnout). Struktura je vymyšlená tak, aby jsme mohli ovládat všechny doplňky bez překreslení stránky (ajaxem). Tato funkce je základem a bez ní by byl uživatelský komfort na velmi nízké úrovni. obr.6 – náhled centra doplňků

Strana 16 / 30


3.1. E MAILOVÝ KLIENT Emailový klient dokáže získat emilové zprávy z nastavených emailových účtů, jestliže je povolený přístup přes IMAP. V součastnosti nedokáže odesílat zprávy, ale tato funkce bude dostupná již brzy. Použitelný je zatím pouze pro kontrolování a čtení doručené pošty. Z ostatních složek si při prvním prohlédnutí začne stahovat emailové zprávy, ale již nekontroluje, zda jsou zprávy nové. Tato funkce přibude zároveň s odesíláním zpráv. V prvních verzích jsem narazil na problém s přístupovou dobou emailových serverů. Prováděl jsem malé testy přístupových časů k různým serverům. Výsledky si můžete prohlédnout v následující tabulce. Script se pouze připojil a zjistil dostupné složky. Časy jsem měřil z mého počítače i přímo ze serveru a byly velmi podobné. tab. 4 – přístupové doby k serverům přes IMAP

Server elektronické pošty

Doba vykonání celého scriptu

Google – Gmail

670 ms

Seznam

1750 ms

Microsoft - Outlook

7,5 s

Z naměřených hodnot je jasné, že se Ownea nemůže napojovat při každém zobrazení stránky. Uživatel musí požádat o stažení nových zpráv. Ownea se následně připojí k emilovému serveru, stáhne zprávy k sobě do cache paměti a zobrazí je uživateli.

3.1.1.

PŘIDÁVÁNÍ

ÚČTŮ

Uživatel může mít zatím neomezený počet emailových účtů, ale v budoucnu plánuji omezit počet schránek na 5-6 pro každého uživatele. Samotné přidávání je velmi jednoduché a nalezneme jej v nastavení emailů. Po vepsání účtu a hesla se systém pokusí rozpoznat doménu. Toho docílí nalezením zavináče @ a rozdělením v daném místě. Jestliže Ownea doménu již zná (má ji ve své databázi), automaticky nastaví potřebné porty a servery. Pokud však doménu nerozezná, uživatel si musí tyto informace zjistit u svého provozovatel emailu a dopsat je po přidání sám. Do databáze se ukládají data zahashovaná, takže při případném úniku databáze kvůli útoku hackerů nedojde k odcizení soukromých údajů. Používá se oboustranná metoda hashování, kdy se jako klíč používá část zahashovaného hesla. Díky tomu má každý uživatel unikátní klíč. Při jakékoliv práci s emaily se musí rozkódovat informace z databáze. Celý tento proces si provádí Ownia bez vědomí uživatele.

Strana 17 / 30


3.1.2.

PROPOJENÍ

PŘES IMAP

IMAP je protokol ke vzdálenému přístupu k emailové schánce. Je nástupcem staršího POP3 a nabízí více možností práce se schránkou. Dnes je hojně využíván ve většině emailových klientech, přestože je složitější na implementaci neže POP3. Aktuálně se využívá IMAP verze 4 revize 1, který je definován v RFC 3501. Tato verze se používá již od roku 1996, tím pádem s předchozími verzemi se již téměř nesetkáme. Většina emailových serverů poskytuje zakódovanou komunikaci pomocí SSL. Tím se zabrání odposlechům mezi Ownií a serverem, odkud se stahují potřebné informace. Samotná synchonizace (načtení emailů) se provádí kliknutím na šipky v panelu nástrojů emailového doplňku. Celý proces je vcelku složitý. Ownia nejdříve rozkóduje uložené jméno a heslo k emailové schánce a pokusí se navázat spojení. Jesliže se úspěšně připojí, zjistí celkový počet zpráv v aktuální složce (doručená pošta – INBOX) a poté se postupně ptá na informace nejnovějších 14ti zpráv. Tyto infomace si uloží do cache a poté překreslí uživateli doplněk. U každé zprávy se načítají veškeré infomace kromě obsahu. Po rozkliknutí emailu se znovu naváže spojení a Ownea se zeptá na obsah konkrétního emailu. Ten si uloží do cache na dobu 10 minut od posledního zobrazení. Tuto funkci jsem vytvořil jako kompromis mezi náročností na paměť Ownie a uživatelskou pohodlností.

3.1.3.

ROZHRANÍ

Emailový doplněk má jednoduchý design. V horní části máme záložky s nastavenými emailovými účty. Pod nimi je výpis posledních emailů z právě rozkliknutého účtu a ve spodní části máme informace o poslední synchronizaci a nástrojovou lištu, odkud můžeme synchronizovat aktivní účet, rychle se dostat do nastavení a otevřít celoobrazovkový režim. Tento režim má emailový klient jako jediný (zatím). Je navrhnut tak, aby při otevření zůstaly doplňky v pozadí a dále vykonávaly jejich činnost. V praxi to znamená že jestliže nám hraje rádio, tak přechodem do celoobrazovkového režimu bude nadále hrát, mohou se na pozadí načítat nové zprávy z RSS kanálů atd. Poskytuje nám rozsáhlejší výpis zpráv, můžeme se pohybovat ve složkách a otevírat dané zprávy. Zpět na přehled všech doplňků se dostaneme kliknutím na ikonku domečku v levém horním rohu.

Strana 18 / 30

Ownea – webový portál se službami pro uživatele obr.7 – náhled doplňku pro e-maily v základním módu

obr.8 – náhled doplňku pro e-maily v módu celé obrazovky

Strana 19 / 30


3.2. RSS ČTEČKA RSS čtečka jednoduše zobrazuje zprávy z nastavených kanálů. Většina dnešních zpravodajských deníků generuje dokument xml s danými standardy pro čtení novinek, kterým se říká RSS. První verze RSS vznikla v roce 1999 a dnes již máme několik verzí a RSS je velmi rozšířený. Parsování (syntaktické analyzování) je v PHP velmi jednoduché a při procházení XML souborů jsem nenarazil na větší komplikace.

3.2.1.

PŘIDÁVÁNÍ

KANÁLŮ

Nové kanály lze přidávat dvěma způsoby. Jesliže je uživatel zdatnější a umí si na určité webové stránce vyhledat odkaz na RSS sám, může zadat přímo jeho adresu s názvem kanálu. Pokud se mu hledání nezdaří, nebo je neznalý této problematiky, může vyzkoušet vyhledávač RSS. Vyhledávač se pokusí načíst webovou stránku, poté v ní vyhledá všechny odkazy a postupně se dívá na nastavené typy odkazů. V případě odkazu na RSS by měl být nastavený typ „application/rss+xml“. Bohužel většina webových zpravodajů tuto skutečnost nedodržuje a tak Ownea hledá i v názvech tříd. Z tohoto důvodu vyhledávač někdy nenajde potřebný odkaz, nebo nenalezne všechny, ale základní fuknci to ve většině případů splní (lepší než nic). Po vyhledaní odkazů směřujících na RSS je uživatel vyzván k vybrání jednoho, který chce přidat. Po přidání je možné opět navolit název, který se objevuje v liště záložek s kanály.

3.2.2.

ROZHRANÍ

Rozhraní je podobné jako u emailového doplňku. V horní části je lišta se záložkami nastavených kanálů. Pod ní je výpis nejnovějších osmi zpráv. U první zprávy ve výchozím stavu vidíme i obrázek (je-li dostupný) a odstavec podrobnějšího sdělení. U dalších zpráv vidíme pouze nadpis. Podrobný popis může být pouze u jedné zprávy, proto když rozklikneme libovolnou zprávu, popis od původní zmizí a zobrazí se u požadované. Jestliže zprávy obsahují obrázky, stahují se až po rozkliknutí podrobného popisu. Tím se šetří požadavky na uživatelském počítači. Dokud tato možnost nebyla dostupná, tak se při zobrazení hlavní stránky odeslalo mnoho požadavků na stažení obrázků, které jsem ve finále neviděli. Pro otevření celého článku stačí kliknout na podrobný popis a v prohlížeči se otevře nová záložka se článkem na zpravodajském webu. V budoucnu plánuji zavést celoobrazovkový režim i u tohoto doplňku, ve kterém uvidíme podrobné popisy u všech zpráv. Ownea se automaticky stará o udržování aktuálních zpráv. Jestliže uživatel otevře stránku a zprávy jsou starší než 10 minut, okamžitě se odešle požadavek na aktualizace. Pokud jsou aktuální, nastaví se časovač a každých 10 minut dojde k automatické aktualizaci. Uživatel se proto nemusí starat o čas poslední aktualizace a klikat na načítání jako u emailů, kde tato funkce přibude v následujích měsících také. Strana 20 / 30


obr.9 – náhled doplňku pro čtení RSS kanálů

3.3. SPŠEOL DOPLNĚK Tento doplněk byl vytvořen speciálně pro studenty Střední průmyslové školy elektrotechnické v Olomouci. Nabízí rychlý náhled rozvrhu i se změnami a zobrazení školního jídelníčku. Rozvrh je funkční jak pro studenty středního stupně, tak i vyššího odborného. Rozhraní je velmi jednoduché, v horní části si uživatel přepíná mezi náhledem rozvrhu a jídelníčku. V pravém dolním rohu nalezne tlačítko na načtení změn a nastavení třídy. U tohoto doplňku se poprvé setkáváme s nastavením přímo v okně doplňku a nejsme zbytečně přesměrováváni do nastavení.

3.3.1 ROZVRH Po nastavení třídy a odkliknutí načtení rozvrhu Ownea nejdříve zjistí ze seznamu tříd odkaz na rozvrh zvolené třídy. Pokud je odkaz nalezen, hledají se v tabulce řádky s největším počtem buněk. Z nich se odvodí o jaký se jedná den a po načtení celého týdne se celý rozvrh uloží do databáze k aktuálnímu uživateli. Bohužel tato fuknce nepodporuje možnost skupin v rámci jedné třídy, protože se skupiny pokaždé značí jinak (4Ba, 4B1) a parsování by bylo velmi složité. Systém bakaláři není pro tento účel vytvořen. Proto se načte pouze první řádek z každého dne.

Strana 21 / 30

Ownea – webový portál se službami pro uživatele Ownea se automaticky stará o přepínání dnů. V pracovní dny je zobrazen do 15.00 hod. rozvrh pro aktuální den a po 15 hodině se zobrazí na následující den. Například v pátek večer (i celý víkend) budeme vidět rozvrh již na pondělí. Po najetí na určitou hodinu se zobrazí infomace o učebně a učiteli předmětu. Časy hodin jsou pevně dané a nenačítají se z rozvrhu na stránkách školy.

3.3.2.

ZMĚNY

V ROZVRHU

Změny hledám přímo v souboru změn ze stránek školy. Parser najde první den ve změnách, uloží si jeho datum a pokračuje v prohledávání změn tříd. Jestliže narazí na řádek se třídou shodující se s nastavenou, uloží si celý řádek do databáze. Vyzkouší, jestli je na dalším řádku jiná třída, jestliže ano, proces ukončí. Když třída není vypsána, opět uloží řádek do databáze. Po ukončení parsování ověří zda den ze změn odpovídá dnu zobrazovaného rozvrhu. V případě načtení jiného dne nebo nenalezení změn, zobrazí uživateli upozornění sdělující stav. Změny jsou úspěšně načteny, jestliže jsou na stránkách školy zobrazeny právě na následující den. Změny se nehledají v nepřítomných třídách, takže na exkurze a podobné záležitosti Ownea neupozorní, ovšem tuto funkci nebude složité dodělat. Jestliže jsou na příští den změny v rozvrhu, uživateli se u konkrétních hodin zobrazí vykřičník a přímo se přepíše daná hodina. Po najetí myší se zobrazí podrobné informace o skupině, učiteli, učebně apod.

Strana 22 / 30


3.3.3.

OBĚDY

Obědy jsou načítány na dva týdny dopředu. Bohužel jsem nepoužil žádné specifické formátování a jídelníček je jen přepsát z webu školy do Ownie, z důvodu neschopnosti parsovat a rozpoznávat jednotlivé dny (někdy má týden pouze 3 dny, někdy máme jen jeden oběd apod.). V pravém spodním rohu nalezneme lištu nástrojů, kde je tlačítko na opětovné načtení obědů (při překlopení týdne), odkaz na odhlašování obědů a tlačítko na zobrazí příštího/aktuálního týdne. Obědy se ukládají pro všechny uživatele do jedné cache, takže stačí, aby v pondělí první uživatel kliknul na ikonku načtení a ostatní se tímto již nemusí zabývat. obr.10 – náhled doplňku pro SPŠE, zobrazení rozvrhu

obr.11 – náhled doplňku pro SPŠE, zobrazení obědů

Strana 23 / 30


3.4. D ALŠÍ DOPLŇKY Další doplňky nejsou součástí zadání, tak podám jen zjednodušené info o každém z nich. V součastnosti je dostupných celkem 11 doplňků a do budoucna bude jejich počet narůstat.

3.4.1.

HODINY,

POZNÁMKY A ODKAZY

Sada nejzákladnějších doplňků pro každodenní používání. Hodiny zobrazují aktuální čas přímo z počítače uživatele, aktuální datum a svátek. Do budoucna by bylo vhodné zakomponovat načítání času přímo ze serveru. Poznámky jsou velmi jednoduché a neobsahují rozdělení do složek, ani podporu více souborů. Ukládají se automaticky, když uživatel přestane psát. Proces ukládání indikuje ikonka mráčku v levém dolním rohu. Odkazy tvoří stejnou funkci jako „oblíbené stránky“ v prohlížeči, ale nejsou vázané na konkrétní počítač. Výhodou může být dostupnost, ať se přihlásíme kdekoliv. Při rozkliknutí se nám zobrazí nastavená stránka v nové záložce prohlížeče. obr.12 – náhled doplňků pro hodiny, poznámky a odkazy

Strana 24 / 30


3.4.2.

POČASÍ

Počasí je velmi užitečný doplněk pro uživatele, kteří nesledují televizi ani nečtou noviny. Nabízejí rychlý náhled aktuálního počasí, kde při najetí myší vidíme podrobnější informace o vlhkosti, tlaku a východu/západu slunce. Dále nabízí hodinovou předpověď na následujích 15 hodin rozdělenou po 3 hodinách. Poslední funkcí je denní předpověď na 5 dní. Město si může každý uživatel nastavit kliknutím na název města. Zdroj informací poskytuje firma OpenWeatherMap, která dostává informace z letišť. Jestliže v daném městě letiště není, dopočítává počasí z dostupných informací. Prozatím využívám jejich FREE plán, který povoluje až 3000 požadavků za minutu, což je pro potřeby Ownie více než dostačující. Data pro lokalitu nastavenou každým uživatelem aktualizuji cca každou hodinu. Při potřebě větší zátěže vychází nejlevnější plán na cca 4500Kč na měsíc. obr.13 – náhled doplňku pro počasí

Strana 25 / 30


3.4.3.

RÁDIO

Rádio je spíše záležitost javascriptové vrstvy. Server Ownie pouze ukládá nastavené stanice a poskytuje vyhledávání stanic. Všechny dostupné stanice jsou uloženy v databázi a zatím jich není mnoho, ale pro testovací účely to stačí. Rádio si pamatuje poslední stav, hlasitost a spuštěné rádio pomocí cookies, které jsou na uživatelském počítači. V praxi to znamená, že když večer vypneme Owniu se zapnutým rádiem a ráno ji otevřeme, rádio se opět automaticky spustí. obr.14 – náhled doplňku Rádio

Strana 26 / 30


3.4.4.

MAPY

A PŘEKLADAČ

Zde používám API poskytované Googlem. Poplatky jsou nízké vzhledem k poskytovaným službám. Překladač nabízí velmi širokou škálu jazyků a je limitován na 100 znaků v jednom dotazu. Slouží spíše na překlad příležitostných slovíček. Mapy zatím nabízejí pouze vyhledávání podle zadaného místa, ale v budoucnu plánuji zprovoznit také vyhledávání podle souřadnic, streetview módu, navigace atd. obr.15 – náhled doplňku Mapy

obr.16 – náhled doplňku Překladač

Strana 27 / 30


Z ÁVĚR Výsledný projekt svými funkcemi přesáhl původní návrh. Z uživatelských profilů, zobrazování emailů a čtení novinek se vyklubala celkem rozsáhlá webová stránka, která začíná být slušným každodenním pomocníkem. Uživatelský systém je plně funkční, včetně změny původních údajů z registrace. Chybí pouze možnost vygenerování nového hesla, kterou zakomponuji po dokončení maturity. Registrace nejsou v součastné době povoleny z důvodu testování webové aplikace. Přihlašování dovoluje uživateli přihlásit se jménem, nebo e-mailem. Emailový klient je plně funkční pro čtení nových emailů s podporou více e-mailových účtů. Zde jsem narazil na velké problémy s odezvou emailových serverů a neschopností rozkódovat některé e-maily. Dlouhou odezvu jsem vyřešil cachováním, kódování se mi zatím vyřešit nepodařilo. Možnost odesílat/přeposílat emaily plánuji dát do provozu co nejdříve. Bohužel můj emailový klient zatím nemůže plně nahradit jiné e-mailové klienty z důvodu nemožnosti otevřít emailové přílohy. Tento problém bude mít pravděpodobně složitější řešení, ale v budoucnu tento nedostatek budu řešit. RSS čtečka je plně funkční včetně automatické aktualizace novinek, podpory více zpravodajských serverů i obrázků. Snad jedinou chybějící možností je zobrazení jednotlivých serverů do samostatných oken (jako samostatné doplňky). U školního doplňku jsem čerpal z vlastních zkušeností, proč nejčastěji chodím na školní web. Nejčastějším důvodem je rozvrh a změny v rozvrhu. Proto jsem tyto funkce zaimplementoval do projektu. Rozvrh nevynechává svátky ani volna, ovšem pro běžný týden bez vyjímek funguje bez problémů. Změny se inteligentně zapisují přímo do zobrazeného rozvrhu a tak uživatel nemůže nic přehlédnout. Do finální komerční verze vyžaduje tento projekt mnoho úprav, ale již jsem se na něm mnoho naučil a Ownea vznikla za dobu 4 měsíců. Prozatím si Ownea nic nevydělala, ale pokusím se sehnat možné sponzory, nebo alespoň zabezpečit finance pomocí reklam. Celkové výdaje za celý projekt jsou zatím okolo 800Kč – hosting s doménou. Dalšími výdaji bude VPS, vlastní IPv4 a SSL certifikát na zabezpečení celé aplikace. V budoucnu plánuji zahrnout do projektu více lidí a dokončit jeho funkčnost pro běžné uživatele. Ownea by mohla být náhradou aktuálních domovských stránek jako Seznam nebo Centrum díky službám a možnostem přizpůsobení.

Strana 28 / 30


S EZNAM STUDIJNÍCH MATERIÁLŮ 1) http://php.net/ - dokumentace jazyka PHP 2) http://doc.nette.org/cs/2.2/ - dokumentace Nette frameworku 3) http://stackoverflow.com/ - fórum s tipy a řešeními 4) http://jquery.com/ - dokumentace jQuery 5) http://jqueryui.com/ - dokumentace jQueryUI 6) https://github.com/ - sdílení repozitářů od různých vývojařů 7) https://bitbucket.org/ - alternativa pro Github 8) http://openweathermap.org/ - popis API pro počasí 9) https://developers.google.com/ - centrum pro vývojaře služeb Google 10) https://getcomposer.org/ - manažer závislostí PHP knihoven 11) https://github.com/PHPMailer/PHPMailer - PHPMailer repozitář 12) https://github.com/paquettg/php-html-parser - HTML parser repozitář 13) http://troolee.github.io/gridstack.js/ - Gridstack plugin 14) https://icomoon.io/ - ikony ve formě písma

Strana 29 / 30


S EZNAM OBRÁZKŮ A TABULEK Dostupné obrázky obrázek 1 - ukázka iGoogle obrázek 2 - loga využívaných produktů obrázek 3 - ukázka možného nastavení vzhledu Ownie po nastavení obrázek 4 - blokové schéma MVC modelu obrázek 5 - ukázka přihlašovací (úvodní) stránky obrázek 6 - náhled centra doplňků obrázek 7 - náhled doplňku pro e-maily v základním módu obrázek 8 - náhled doplňku pro e-maily v módu celé obrazovky obrázek 9 - náhled doplňku pro čtení RSS kanálů obrázek 10 - náhled doplňku pro SPŠE, zobrazení rozvrhu obrázek 11 - náhled doplňku pro SPŠE, zobrazení obědů obrázek 12 - náhled doplňků pro hodiny, poznámky a odkazy obrázek 13 - náhled doplňku pro počasí obrázek 14 - náhled doplňku Rádio obrázek 15 - náhled doplňku Mapy obrázek 16 - náhled doplňku Překladač Dostupné tabulky tabulka 1 - adresářová struktura aplikace tabulka 2 - přístupové doby k serverům přes IMAP

Strana 30 / 30

Středoškolská technika Ownea webový portál se službami pro uživatele

Recommend Documents