JavaScript решења за веб – примери рада

Решења која раде у прегледачу: парсер израза који се уграђује у туђу платформу, интерфејс за уређивање података без дирања у изворни фајл, дотеривање постојећег алата за обраду слика, образац који памти унете податке, филтер категорија који ради без освежавања странице и скенирање бар-кодова камером телефона. Заједничко им је да се кориснику чини да све ради само од себе, а да је иза тога пажљиво написан JavaScript који се уклапа у оно што већ постоји. Овакве послове радим у оквиру услуге програмирања веб сајтова.

Самосталан JavaScript парсер за прорачуне и условне изразе

Рађено у трећем кварталу 2022.

Проблем

Клијент је замислио брз и јасан JavaScript парсер за аритметичке прорачуне, који би се уградио као додатак у платформу без програмирања. Парсер је требало да преузме променљиве прослеђене у JSON облику — бројеве, низове и објекте — и да их користи у изразима који остају јасни и једноставни за приказ, на пример (a+b) (c[1]+c[2]) * (d.green + d.blue). Пожељни су били и условни изрази, попут if(a>3, d.green, d.blue). Највећи изазов био је услов да цела функционалност стане у једну библиотеку, без иједне спољне зависности.

Решење

Направљен је самосталан парсер који изводи аритметичке операције над JSON променљивама, разуме и извршава условне изразе:

  • тумачење променљивих: поуздано се читају и раздвајају променљиве прослеђене кроз JSON, укључујући низове и угнежђене објекте;
  • јасни изрази: кориснички интерфејс омогућава лако састављање и тумачење израза;
  • условна логика: условни изрази дају парсеру знатно већу флексибилност;
  • без зависности: парсер је потпуно самосталан, па се без препрека уграђује у платформу без програмирања.

Коришћене технологије

Резултат

Платформа је добила библиотеку која рачуна изразе са променљивама и условима, а да не повлачи ниједну спољну зависност.

Интерфејс за уређивање XML распореда активности

Рађено у првом кварталу 2021.

Проблем

Недељни распоред активности и њихови параметри чували су се у XML документу. Клијент је тражио једноставан и прегледан интерфејс у прегледачу кроз који се активности за сваки дан мењају и чувају. Захтев је обухватао и то да се поља за унос мењају у зависности од врсте медија која се бира за активност.

Решење

Направљен је веб интерфејс који се тачно уклапа у постојећу XML структуру:

  • избор дана: корисник бира било који дан од недеље до суботе и мења активности за тај дан;
  • подешавање активности: време почетка и звук, који се за сваку активност укључује или искључује;
  • избор врсте медија из падајуће листе за сваку активност;
  • поља која се прилагођавају избору: за видео са интернета појављује се поље за линк, а за презентацију подешавања која се односе на њу;
  • чување измена назад у XML документ на серверу.

Коришћене технологије

Резултат

Распоред активности мења се кроз образац у прегледачу, са пољима која се сама прилагођавају избору, уместо ручним уређивањем XML фајла.

Унапређење алата за сечење слика

Рађено у четвртом кварталу 2020.

Проблем

Клијент је имао готов алат у прегледачу којим корисници отпремају слику, мењају јој величину, померају је и исеку жељени део, а алат измене верно приказује на излазној слици. Основне функције и распоред странице радили су добро и нису смели да се мењају, али је клијенту требало два значајна унапређења да би алат био кориснији. Посао је, дакле, био рад у туђем, постојећем коду, уз доступну документацију и изворни код.

Решење

Циљ је био да се могућности алата прошире, а да се основне функције не дирају:

  • очуване основне функције: промена величине, померање и сечење делова слике раде као и пре;
  • два нова унапређења, урађена према захтевима клијента;
  • уклапање у постојећи код, уз задржан задати HTML распоред;
  • једноставна употреба: нова унапређења користе се једнако интуитивно као и остатак алата.

Коришћене технологије

Резултат

Алат је добио тражене могућности, а корисници и даље раде на исти начин и у истом распореду на који су навикли.

Образац који памти унете податке

Рађено у трећем кварталу 2021.

Проблем

Клијент је имао HTML5 образац на сајту и желео је да корисницима уштеди поновно куцање. Подаци из два одређена поља требало је да се запамте, у колачићима или у LocalStorage-у, и да се при следећој посети сами упишу у та поља. Клијент је веровао да образац можда већ делимично користи LocalStorage, али није био сигуран да ли то заиста ради.

Решење

Циљ је био да се одређени уноси сачувају и без икаквих проблема поново искористе при наредним посетама:

  • чување у LocalStorage-у: подаци из два поља поуздано се чувају чим се унесу у образац;
  • аутоматско попуњавање: при отварању странице проверава се да ли сачувани подаци постоје, па се одговарајућа поља попуњавају;
  • брзо и тачно читање података, без застоја и без грешака у раду обрасца.

Коришћене технологије

Резултат

Посетилац који се врати на страницу затиче већ попуњена поља, а проблем је решен брзо.

Утисак клијента

★★★★★5/5

“Одлично је обавио посао решавајући проблем и био је веома одзиван и брз.”

Вишестепени филтер категорија на WordPress-у

Рађено у трећем кварталу 2021.

Проблем

На WordPress сајту је требало направити филтер категорија у два корака: избор главне категорије у првој листи треба одмах да попуни другу листу њеним поткатегоријама, без освежавања странице. Поткатегорије остају скривене док се не изабере главна категорија, а после избора поткатегорије дугме „даље" води на страницу са садржајем те категорије. Посао је морао да се уради без додатака (плагинова), са нагласком на функционалности, а не на изгледу.

Решење

Направљен је интерактиван вишестепени филтер, без иједног додатка:

  • динамичко учитавање: поткатегорије се учитавају у позадини, на основу изабране главне категорије;
  • без освежавања странице током целог филтрирања, па је рад са филтером гладак;
  • скривене поткатегорије док се не изабере главна категорија;
  • прелазак на страницу категорије: дугме „даље" води на страницу са садржајем изабране поткатегорије.

Коришћене технологије

  • JavaScript програмски језик (programiranje.co.rs): интеракције на страни корисника.
  • AJAX: преузимање и приказ података без поновног учитавања странице.
  • WordPress: платформа на којој је филтер направљен.

Резултат

Посетилац до жељеног садржаја стиже кроз два брза избора, а сајт није оптерећен још једним додатком.

Скенирање бар-кодова камером у мобилној веб апликацији

Рађено у трећем кварталу 2019.

Проблем

Клијент је имао постојећу веб апликацију, направљену у Visual Studio 2017 уз jQuery и Bootstrap, која се користи на Android и iOS телефонима. Апликацији је недостајало скенирање бар-кодова, а клијент је уз то желео и дискретне додатке на екрану док је камера укључена, као што су датум и текст који зависи од контекста. Све је морало да ради подједнако добро на обе мобилне платформе.

Решење

Скенирање бар-кодова уграђено је у постојећи пројекат, уз очуван респонзиван рад на телефонима:

  • скенирање бар-кодова камером телефона, једноставно за употребу;
  • респонзиван рад: нове функције раде на Android и iOS уређајима;
  • додаци на екрану камере: приказ датума и текст који зависи од контекста појављују се преко слике камере док је активна.

Коришћене технологије

Резултат

Апликација је добила скенирање бар-кодова на телефонима обе платформе, уз јасне податке на екрану док је камера укључена.

Утисак клијента

★★★★★5/5

“Допринос Дејана нашем пројекту је био изванредан. Његова стручност и посвећеност су очигледни у квалитету рада који је испоручио. Било је привилегија радити са тако вештим фрилансером. Топла препорука! Сјајан посао, Дејане!”

Треба вам слично решење?

Шта улази у израду, како се одређује цена и како изгледа ток посла, пише на страници програмирање веб сајтова. Целе сајтове израђене на мојим платформама погледајте међу сајтовима на НоЕмСтилОК ЦМС-у и сајтовима на Дозет WordPress теми, а остале радове међу референцама за веб апликације и JavaScript.