Article featured  image

LIČNI PROJEKAT

Razvijanje projekta: Raspored

PWA aplikacija za pregled rasporeda Mitrovačke Gimnazije

Mladen Draganović | Wednesday, 5/1/2019

Još od osnovne škole na poleđinu sveska smo lepili raspored časova kako bi redovno pregledali za koji časove treba da se pripremimo, neki su odlazili korak dalje i zapisali su i kada se koji čas završava i kada počinje sledeći. Malo je onih koji svoje rasporede uče napamet, tako da problem rasporeda preneo i u srednju školu. Srećom, u Mitrovačkoj Gimnaziji postoji digitalni zapis rasporeda časova na veb-sajtu škole.

Učenici bi preuzeli svoj raspored i sačuvali ga u galeriju ili stavili kao pozadinu na zaključanom ekranu svoga telefona.

Ove metode nisu efikasne, imajući u vidu da je potrebno preuzimati novi raspored svaki put kada se izvrši neka promena, došao sam na ideju da napravim aplikaciju koja bi bila laka za instalaciju i pristup.

Slika projekta

Nabavljanje svih rasporeda

Кako bih uštedeo na veličini sajta, umesto PNG datoteka sa sajta, preuzeo sam dve PDF datoteke sa rasporedima za učenike i profesore sa sajta gimnazije. Slike moraju biti vektorskog formata kako bi sajt bio ispod 5MB (Što sam sebi postavio kao cilj ovog projekta).

Prikaz PDF stranica je mnogo komplikovaniji nego prikaz recimo SVG slike, tako da sam konvertovao oko 97 stanica PDF-a u posebne SVG datoteke. U poređenju sa PNG datotekama, SVG je zauzimao oko 80% manje mesta.

“Vue.js” – Javaskript okvir

Da bi pojednostavio proces razvijanja i kako bi umanjio nepotreban rad na standardne veb-principe, odlučio sam da aplikacija razvijam u modularnom okviru zvanom „Vue.js”.

Butstrep – Stilovi i kontrole

Za dizajniranjem posebnih kontroli i stilova u ovakvom projektu nije bilo potrebe, sve je lako regulisano korišćenjem Butstrep biblioteke kontroli i stilova.

Pored standardnih stilova, korišćene su i sledeće kontrole:

  • Button.
  • Modal (iskočna poruka).
  • Forma Grupe.
  • Radio dugme.
  • Selektor element.
  • Input element.
  • Dugme na štikliranje.

Butstrep isecak Pomenuti elementi su dodati u „main.js” datoteci projekta.

Fajerbejs – Hosting i servisiranje

Radi brzine distribucije i lakog održavanja servera, za hosting je izabran servis Gugl Fajerbejs koji nudi besplatni veb-hosting i podržava sve potrebne standarde za „PWA“ tehnologiju.

Google Lighthouse

Gugl lajthaus ocena

Кorišćenjem Gugle alatke za testiranje performansi i kompatibilnosti veb-aplikacija projekat raspored postiže sledeće rezultate:

Pristupačnost

Optimizovano 91% (ovo poglavlje je jedino koje ne dostiže 100% - glavni razlog tome je što Butstrep dugmad ispod prikaza rasporeda imaju istu pozadinu kao i veb-stranica, ali to ne bi trebalo da predstavlja problem jer imaju jasnu boju ivica – prilog 4 i prilog 6)

Pogledajte rad uživo

Aplikacija „Raspored“ se nalazi na domenu rs.draganovik.com, a izvorni kod rada je postavljen i na GitHub mreži.