JavaScript rešenja za veb – primeri rada

Rešenja koja rade u pregledaču: parser izraza koji se ugrađuje u tuđu platformu, interfejs za uređivanje podataka bez diranja u izvorni fajl, doterivanje postojećeg alata za obradu slika, obrazac koji pamti unete podatke, filter kategorija koji radi bez osvežavanja stranice i skeniranje bar-kodova kamerom telefona. Zajedničko im je da se korisniku čini da sve radi samo od sebe, a da je iza toga pažljivo napisan JavaScript koji se uklapa u ono što već postoji. Ovakve poslove radim u okviru usluge programiranja veb sajtova.

Samostalan JavaScript parser za proračune i uslovne izraze

Rađeno u trećem kvartalu 2022.

Problem

Klijent je zamislio brz i jasan JavaScript parser za aritmetičke proračune, koji bi se ugradio kao dodatak u platformu bez programiranja. Parser je trebalo da preuzme promenljive prosleđene u JSON obliku — brojeve, nizove i objekte — i da ih koristi u izrazima koji ostaju jasni i jednostavni za prikaz, na primer (a+b) (c[1]+c[2]) * (d.green + d.blue). Poželjni su bili i uslovni izrazi, poput if(a>3, d.green, d.blue). Najveći izazov bio je uslov da cela funkcionalnost stane u jednu biblioteku, bez ijedne spoljne zavisnosti.

Rešenje

Napravljen je samostalan parser koji izvodi aritmetičke operacije nad JSON promenljivama, razume i izvršava uslovne izraze:

  • tumačenje promenljivih: pouzdano se čitaju i razdvajaju promenljive prosleđene kroz JSON, uključujući nizove i ugnežđene objekte;
  • jasni izrazi: korisnički interfejs omogućava lako sastavljanje i tumačenje izraza;
  • uslovna logika: uslovni izrazi daju parseru znatno veću fleksibilnost;
  • bez zavisnosti: parser je potpuno samostalan, pa se bez prepreka ugrađuje u platformu bez programiranja.

Korišćene tehnologije

Rezultat

Platforma je dobila biblioteku koja računa izraze sa promenljivama i uslovima, a da ne povlači nijednu spoljnu zavisnost.

Interfejs za uređivanje XML rasporeda aktivnosti

Rađeno u prvom kvartalu 2021.

Problem

Nedeljni raspored aktivnosti i njihovi parametri čuvali su se u XML dokumentu. Klijent je tražio jednostavan i pregledan interfejs u pregledaču kroz koji se aktivnosti za svaki dan menjaju i čuvaju. Zahtev je obuhvatao i to da se polja za unos menjaju u zavisnosti od vrste medija koja se bira za aktivnost.

Rešenje

Napravljen je veb interfejs koji se tačno uklapa u postojeću XML strukturu:

  • izbor dana: korisnik bira bilo koji dan od nedelje do subote i menja aktivnosti za taj dan;
  • podešavanje aktivnosti: vreme početka i zvuk, koji se za svaku aktivnost uključuje ili isključuje;
  • izbor vrste medija iz padajuće liste za svaku aktivnost;
  • polja koja se prilagođavaju izboru: za video sa interneta pojavljuje se polje za link, a za prezentaciju podešavanja koja se odnose na nju;
  • čuvanje izmena nazad u XML dokument na serveru.

Korišćene tehnologije

Rezultat

Raspored aktivnosti menja se kroz obrazac u pregledaču, sa poljima koja se sama prilagođavaju izboru, umesto ručnim uređivanjem XML fajla.

Unapređenje alata za sečenje slika

Rađeno u četvrtom kvartalu 2020.

Problem

Klijent je imao gotov alat u pregledaču kojim korisnici otpremaju sliku, menjaju joj veličinu, pomeraju je i iseku željeni deo, a alat izmene verno prikazuje na izlaznoj slici. Osnovne funkcije i raspored stranice radili su dobro i nisu smeli da se menjaju, ali je klijentu trebalo dva značajna unapređenja da bi alat bio korisniji. Posao je, dakle, bio rad u tuđem, postojećem kodu, uz dostupnu dokumentaciju i izvorni kod.

Rešenje

Cilj je bio da se mogućnosti alata prošire, a da se osnovne funkcije ne diraju:

  • očuvane osnovne funkcije: promena veličine, pomeranje i sečenje delova slike rade kao i pre;
  • dva nova unapređenja, urađena prema zahtevima klijenta;
  • uklapanje u postojeći kod, uz zadržan zadati HTML raspored;
  • jednostavna upotreba: nova unapređenja koriste se jednako intuitivno kao i ostatak alata.

Korišćene tehnologije

Rezultat

Alat je dobio tražene mogućnosti, a korisnici i dalje rade na isti način i u istom rasporedu na koji su navikli.

Obrazac koji pamti unete podatke

Rađeno u trećem kvartalu 2021.

Problem

Klijent je imao HTML5 obrazac na sajtu i želeo je da korisnicima uštedi ponovno kucanje. Podaci iz dva određena polja trebalo je da se zapamte, u kolačićima ili u LocalStorage-u, i da se pri sledećoj poseti sami upišu u ta polja. Klijent je verovao da obrazac možda već delimično koristi LocalStorage, ali nije bio siguran da li to zaista radi.

Rešenje

Cilj je bio da se određeni unosi sačuvaju i bez ikakvih problema ponovo iskoriste pri narednim posetama:

  • čuvanje u LocalStorage-u: podaci iz dva polja pouzdano se čuvaju čim se unesu u obrazac;
  • automatsko popunjavanje: pri otvaranju stranice proverava se da li sačuvani podaci postoje, pa se odgovarajuća polja popunjavaju;
  • brzo i tačno čitanje podataka, bez zastoja i bez grešaka u radu obrasca.

Korišćene tehnologije

Rezultat

Posetilac koji se vrati na stranicu zatiče već popunjena polja, a problem je rešen brzo.

Utisak klijenta

★★★★★5/5

“Odlično je obavio posao rešavajući problem i bio je veoma odzivan i brz.”

Višestepeni filter kategorija na WordPress-u

Rađeno u trećem kvartalu 2021.

Problem

Na WordPress sajtu je trebalo napraviti filter kategorija u dva koraka: izbor glavne kategorije u prvoj listi treba odmah da popuni drugu listu njenim potkategorijama, bez osvežavanja stranice. Potkategorije ostaju skrivene dok se ne izabere glavna kategorija, a posle izbora potkategorije dugme „dalje" vodi na stranicu sa sadržajem te kategorije. Posao je morao da se uradi bez dodataka (pluginova), sa naglaskom na funkcionalnosti, a ne na izgledu.

Rešenje

Napravljen je interaktivan višestepeni filter, bez ijednog dodatka:

  • dinamičko učitavanje: potkategorije se učitavaju u pozadini, na osnovu izabrane glavne kategorije;
  • bez osvežavanja stranice tokom celog filtriranja, pa je rad sa filterom gladak;
  • skrivene potkategorije dok se ne izabere glavna kategorija;
  • prelazak na stranicu kategorije: dugme „dalje" vodi na stranicu sa sadržajem izabrane potkategorije.

Korišćene tehnologije

Rezultat

Posetilac do željenog sadržaja stiže kroz dva brza izbora, a sajt nije opterećen još jednim dodatkom.

Skeniranje bar-kodova kamerom u mobilnoj veb aplikaciji

Rađeno u trećem kvartalu 2019.

Problem

Klijent je imao postojeću veb aplikaciju, napravljenu u Visual Studio 2017 uz jQuery i Bootstrap, koja se koristi na Android i iOS telefonima. Aplikaciji je nedostajalo skeniranje bar-kodova, a klijent je uz to želeo i diskretne dodatke na ekranu dok je kamera uključena, kao što su datum i tekst koji zavisi od konteksta. Sve je moralo da radi podjednako dobro na obe mobilne platforme.

Rešenje

Skeniranje bar-kodova ugrađeno je u postojeći projekat, uz očuvan responzivan rad na telefonima:

  • skeniranje bar-kodova kamerom telefona, jednostavno za upotrebu;
  • responzivan rad: nove funkcije rade na Android i iOS uređajima;
  • dodaci na ekranu kamere: prikaz datuma i tekst koji zavisi od konteksta pojavljuju se preko slike kamere dok je aktivna.

Korišćene tehnologije

Rezultat

Aplikacija je dobila skeniranje bar-kodova na telefonima obe platforme, uz jasne podatke na ekranu dok je kamera uključena.

Utisak klijenta

★★★★★5/5

“Doprinos Dejana našem projektu je bio izvanredan. Njegova stručnost i posvećenost su očigledni u kvalitetu rada koji je isporučio. Bilo je privilegija raditi sa tako veštim freelancerom. Topla preporuka! Sjajan posao, Dejane!”

Treba vam slično rešenje?

Šta ulazi u izradu, kako se određuje cena i kako izgleda tok posla, piše na stranici programiranje veb sajtova. Cele sajtove izrađene na mojim platformama pogledajte među sajtovima na NoEmStilOK CMS-u i sajtovima na Dozet WordPress temi, a ostale radove među referencama za veb aplikacije i JavaScript.