Hibridne mobilne aplikacije

Šta su hibridne mobilne aplikacije? Mobilne aplikacije su više od običnih web aplikacija, jer za razliku od browsera mobilni uređaji imaju senzore i specifične funkcionalnosti (kamera, žiroskop, vibracija i dr.). Upravo mogućnost pristupa tim funkcionalnostima odvaja mobilne aplikacije od obične responzivne web stranice. Nastanak hibridnih mobilnih aplikacija Da biste razvili „nativne mobilne aplikacije“ na više … Read more

Chrome DevTools

Uvod

chrome devtools

U ovome članku je napravljen pregled specijalizovanih alata u okviru „Chrome“ browsera, pod nazivom „DevTools“. Chrome DevTools su nezamenjivi set alatki namenjeni web developerima kao pomoć u svakodnevnom radu. Kroz DevTools je omogućen pregled HTML stranice i rad sa DOM elementima, kao i pristup svim CSS svojstvima elemenata.
U ovom paketu alata je naručita pažnja posvećena delu za debagovanje JavaScript koda. Koristeći ovoj alat je omogućeno definisanje raznih načina prekidanja izvršavanja progamskog koda (tzv. breakpoint), što znatno olakšava rad web developerima pri otklanjanju bagova na vebsajtovima. Pri svakom prekidu je omogućen uvid u vrednosti promenjiva kao i njenih oblasti definisanosti.
Pored ovoga postoje sekcije vezane za praćenje performansi web aplikacije, kao i pregled razmene podadaka izmedju klijenta i servera.

Read more

Webpack (osnove)

Uvod Prednosti i mane modularnog programiranje Organizacija koda samo u jednom fajlu, čini programiranje veoma komplikovanim. Iz tog razloga se u JavaScript-u kao i u mnogim drugim programskim jezicima, programski kod deli u manje celine tzv. module. Podela se vrši prema odredjenoj šemi, koja omogućava dobru organizaciju i olakšava vizuelnu i strukturnu preglednost. Pri deljenju … Read more

npm & yarn osnove

Uvod

npm vs yarn

Package manager je alat zadužen da automatizuje procese vezane za rad sa paketima. Softverski paketi se nalaze u arhivnim fajlovima, i svaki paket sadrži meta-data koji opisuju dati softver (kao što je naziv softvera, verzija i lista svih dependencies).
Najčešća primena package manager-a je kod instaliranja paketa i njihovih dependecies. Package manager eliminiše potrebu za ručnim instaliranjem softvera. Pored toga package manager može da se bavi ažuriranjem, konfigurisanjem i na kraju uklanjanjem svih tih komponenti.

Najveći package menadžer je npm, koji je primarno pravljen za node.js (serversko) okruženje, stoga da bi radio u browser-u potrebno je da se pored njega koristi module bundler (browserify ili webpack). Yarn package manager je „novi klinac je u gradu“, facebook-ovo čedo, može da koristi sve npm pakete i ima veoma sličnu sintaksu ali se smatra da brže izvršava naredbe od npm-a.

Read more

Front-End alati (pregled)

Package manager

Uvod

frontend

Današnji web development se zasniva na skupu različitih tehnologija koje se istovremeno koriste na jednom projektu, kao što je: Typescript (jezik), Sass (CSS ekstenzija), JSCS (code style linter and formater), JSHint ili TSLint (alat za detekciju grešaka i potencijalnih problema), BrowserSync (alat za sihronizaciju promena u kodu i u browser-u – Live reload )… Za jedan projekat je potrebna instalacija svakog od navedenih programa ali i svih programa (dependencies) od kojih zavise isti a prethode njihovoj instalaciji.
Package manager eliminiše potrebu za ručnim instaliranjem softvera sa svim neophodnim pratećim softverom (dependencies) kao i za ažuriranje svih tih komponenti. Package manager je skup alata zaduženih da automatizuju procesa instaliranja, konfigurisanja i uklanjanja programa. Package manageri rade sa packages tj. sa softwerom ili podacima koji se nalaze u arhivnim fajlovima. Package sadrže meta-data koji opisuju dati softver kao što je naziv softvera, verzija i lista svih dependencies (drugi softver neophodan za rad datog sofvera). Najpoznatiji package menadžeri su:

  • npm
  • bower
  • JSPM (JavaScript Package Manager)
  • Yarn

Read more

Git naredbe

.gitignore

Pre aktiviranja Git-a potrebno je sprečiti čuvanje i praćenje izmena nepotrebih fajlova. Najčešće su to fajlovi koje koristi editor ili fajlovi koji nastaju kompajliranjem i sl. Fajlove ili cele direktorijume koje ne želimo da pratimo definišemo u okviru .gitignore. .gitignore fajl se smešta u okviru projektnog foldera.
Ovaj fajl se popunjava odgovarajućim naredbama uz čiju pomoć Git saznaje koje fajlove ne treba da prati. Princip obeležavanja fajlova i foldera koje ne želimo da pratimo unutar .gitignore je sledeći:

  • Upišemo ekstenzije fajlova sa razmakom koje ne želimo da pratimo kao npr.

    .swo .swp

  • Upišemo foldere koje ne želimo da pratimo:

    ime_foldera

    U slučaju da unutar foldera postoji fajl koji ipak treba da se prati upišemo:

    !nekiFajl.txt

  • Upišemo folder i njegove podfoldere koje ne želimo da pratimo:

    ime_foldera/ime_podfoldera

    Pregled grana

  • Upišemo folder i sve njegove podfoldere koje ne želimo da pratimo:

    ime_foldera/*

  • Upišemo sve objekate i arhive koje želimo da ignorišemo:

    *.[oa]

Postoji na internetu veliki broj primera .gitignore u zavisnosti kakav je projekat u pitanju (WordPress, Android….), a odličan sajt za nalaženje adekvatnog možete naći na sledećem linku: toptal/.gitignore.

Prekid praćenja

Veoma je bitno napraviti .gitignore file pre iniciranja Git-a jer ukoliko Git već započene praćenje odredjenog fajla on neće prestati da ga prati čak i ako taj neželjeni fajl naknadno ubacimo u .gitignore. U nastavku su opisane potrebne radnje za prekid prećenja nekog fajla.

a) Prekid praćenja bez fizičkog brisanja

Ukoliko su greškom commit-ovani neki nebitni fajlovi za projekat, čije promene ne želimo da čuvamo, ali ne želimo ni da ih fizički obrišemo iz radnog direktorijuma, potrebno je da naredimo git-u da prestane da ih prati (tj. da ih izbaci iz repozitorijuma) sa naredbom:

Naredba za prestanak praćenja direktorijuma je:

gde -r govori Git-u da stane da prati sve podirektorijume i fajlove unutar njega.

Nakon naredbe za prekid praćenja, fajl se nalazi u prostoru pripreme (index). Da bi sprečili da fajlovi na sledećem commit-u ponovo ne udju u repozitorijum, potrebno je te fajlove pre commit-ovanja, ubaciti u .gitignore fajl.

NAPOMENA:
Obratiti pažnju da ukoliko naziv fajla sadrži razmak izmedju reči, neophodno je staviti ga u znake navoda, kao na sledećem primeru:
git rm "neki naziv fajla sa razmacima.ekstenzija"

b) Prekid praćenja sa fizičkim brisanjem

Ukoliko postoji potreba da se fajl pored izbacivanja iz repozitorijuma i obriše iz radnog direktorijuma koristimo naredbu:

Ukoliko je u pitanju direktorijum koristimo naredbu:

gde -r govori Git-u da stane da prati sve podirektorijume i fajlove unutar njega. Nakon naredbe za brisanja fajlova je takodje neophodno uraditi commit (bez prethodnog slanja u index).

Više o ovoj naredbi pogledajte na oficijelnoj stranici

Lokalni repozitorijum

Kada želimo da aktiviramo Git tj. da počnemo da pratimo izmene u projektu, potrebno je da unutar projektnog folder-a iniciramo pravljenje „radnog git repozitorijuma“ koji se vrši na sledeći način:

Ova naredba unutar našeg projekta kreira novi folder .git (tzv. „repozitorijum“) i u njemu će se nalaziti celokupna baza o našem projektu. Od tog trenutka Git prati projekat i radi snapshot-ove stanja kad uradimo commit. Ukoliko želimo da Git više ne prati naš projekat dovoljno je da obrišemo ovaj folder.

pregled grana nakon kloniranja

Lokalni repozitorijum je u specifičnoj vezi sa udaljenim jer je on „svestan“ postojanja udaljenog repozitorijuma. U okviru lokalnog repozitorijuma uvek postoje minimum dve grane (vidi sliku):

  1. Grana pod nazivom „origin/master“ koja je lokalna verzija (kopija) udaljenog repozitorijuma. Na ovu granu se ne mogu slati naše izmene, već ona služi da sa nje uzmemo izmene (merge) jer je ona praktično posrednik tj. medjukorak za dobijanje izmena sa udaljenog repozitorijuma.
  2. Grana pod nazivom „master“ je naša lokalna grana direktno povezana za projekat (u kojoj pravimo commit-e).

Read more

Domen i hosting

Zakup domena Zakup domena je jedan od prvih koraka neophodnih za web prezentaciju. Kupovina se vrši preko ovlašćenih prodavaca (registara). Registri domena su kompanije koje prodaju domene. One moraju imati sertifikat odobren od strane ICANN, Internet Corporation for Assigned Names and Numbers (Internet Korporacija za Pripisana Imena i Brojeve). Spisak ovalašćenih registra u Srbiji možete … Read more

Grunt

Uvod Grunt je alat napisan u Node.js, stoga je pre instaliranja Grunt-a potrebno instalirati Node.js i njegov package manager npm. Ukoliko su već instalirani potrebno je proveriti da li su ažurne verzije i ako je potrebno uraditi njihov update. Pošto je jedano od čestih zadataka Grunt-a kompajliranje SASS-a u CSS, potrebno je imati instaliran SASS. … Read more

JSON (format za razmenu podataka)

JSON opšte

JSON (JavaScript Object Notation) je jedan od lakših tekstualnih otvorenih standarda dizajniran za čitljivu razmenu podataka. Ekstenzija datoteke s podacima u JSON-ovom formatu je .json, dok je meta oznaka (MIME format) application/json.

JSON je format koji polako zamenjuje XML jer ima nekolicinu prednosti u odnosu na XML. JSON ne koristi tagove pa stoga ima kraći kod koji je lakši za pisanje i razumljiviji za čitanje. Mada je najbitnija prednost JSON-a u odnosu na XML je ta što se JSON parsira kroz standardnu JavaScript funkciju dok se XML parsira kroz XML parser.

Read more

Web servisi (osnove)

Šta su web servisi?

Web servis je aplikacija smeštena na nekom serveru, koja je pored osnovne namene dizajnirana da podrži interakciju izmedju dve mašine preko mreže i omogući razmenu informacija izmedju njih. Smatra se da je svaki servis i web servis ako je:

  • Dostupan preko interneta ili (interne mreže)
  • Koristi stadndardizovan sistem poruka
  • Prepoznatiljv je od strane mehanizma za pretragu
  • Nije vezan za operativni sistem ili programski jezik
Pretraga web servisa

Web Servisi se objavljuju na jedinstvenoj lokaciji gde se nude kao usluge. UDDI (Universal Description, Discovery and Integration) predstavlja centralizoanu lokaciju koja obezbeđuje mehanizam za registrovanje i pronalaženje Web servisa. UDDI koristi SOAP za komunikaciju i omogućava klijentima da pronađu servis, kao i serveru da ga objavi.

Servisi mogu biti zatvoreni (privatni) ali i javno dostupni. Listu javno dostupnih servisa možete pogledati na više sajtova:

Opis web servisa

Web servisi imaju mogućnost da opišu sebe, a za opis servisa se koristi WSDL (eng. Web Service Description Language). WSDL je napisan XML-om i sadrži informacije gde se web servis nalazi i koji protokol za komunkaciju koristi.

Saradnja sa GUI aplikacijom

Web servisi u saradnji sa GUI aplikacijom su nešto izmedju web i desktop aplikacije. Web servis na serveru daje funkcionalnost i podatke a desktop aplikacija samo daje prilagodljivi grafički interfejs koji popunjava sa dobijenim podacima od servisa. Web servis u saradnji sa GUI aplikacijom je fleksibilniji od web aplikacije jer korisnik može da prilagodi izgled aplikacije na klijentu dok korisnik web aplikaciie mora da koristi web browser i nema uticaja na to kako će aplikacija izgledati na ekranu.

Prednosti u odnosu na web aplikaciju:
  • Štedljiviji su po pitanju opterećenja mreže i resursa servera jer pri komunikaciji šalju samo odgovor dok web aplikacije pored odgovora šalju i HTML sa formom i opisom kako ogovor treba da bude prikazan. Web servisi su idealni su za „male“ uredjaje koji nisu PC tj. mobilne Pocet PC… jer je na takvom uredjaju instalirana samo front-end aplikacija a teži deo se odradjuje na serveru.
  • Lakši su za razvoj, testiranje i održavanje. Kod Web aplikacije pored neophodne funkcionalnosti je potrebno istestirati i dizajn na svim browserima i platformama dok kod web servisa autor brine samo o funkciji dok o prikazu brine klijentska aplikacija.

klijent server

Kod servisa se komunikacija odvija izmedju klijenta i servera tako što klijent pošalje zahtev serveru koji onda server taj zahtev primi i obradi ga pa u odnosu na njega formira odgovor koji zatim pošalje nazad klijentu. Klijent-server stil arhitekture odvaja problematiku dve strane komunikacijskog kanala, što znači da klijentsku stranu uopšte ne zanima način čuvanja informacija na serveru jer uvijek postoji uniforman način pristupa tim resursima. S druge strane, server je nezavisan od klijenta i ne zanima ga kako je implementirano korisnički interfejs niti u kojem je stanju pojedini klijent, čime je serverska strana znatno pojednostavljena. Ovime je postignuta njihov nezavisnost i lakše razdvojeno razvijanje obe strane, odnosno moguće je npr. unaprediti serversku stranu ili potpuno izmeniti njegovu logiku, a da klijent to uopšte ne primieti dok god je način pristupa resursima isti.

Šta je API?

Da bi se ostvarila komnikacija izmedju dva sistema potrebno je da imaju „tačku“ za kontakt, tzv. interfejs. Interfejs je posrednik (veza) pri komunikaciji izmedju dva odvojena sistema koji zajedno rade i može biti:

  • Hardverski interfejs (npr. volan, gas i menjač su „tačke pristupa vozilu“ i predstavlju posrednika između automobila i osobe koja upravlja sa njim)
  • Programski interfejs tzv. „API“ koje predstavlja „tačke pristupa“ pri komunikaciju izmedju dva programa

Rad sa servisima podrazumeva da se resursima pristupa na udaljenom serveru (pristup je putem interenet mreže), ovakva mrežna komunikacija sa sobom donosi problem pristupa i prenosa složenih struktura podataka kao i same organizacije resursa na serveru. Programeri su tokom vremena kreirali komunikaciju izmedju dva programa na razne načine tj. pravli različite tipove API-ja ali su u jednom trenutku standardizovali način komunikacije tj. napravili su skup pravila koja mrežne aplikacije trebaju pratiti pri medjusobnoj komunikaciji (npr. jedan od takvih standardizovanih api-ja je „REST API“).
Ono na šta moramo obratiti pažnju je da kada se jednom definiše API i pusti u „promet“, u slučaju da je nakon nekog vremena potrebno napraviti izmene, nije pametno menjati do sada postavljene „end point-e“ jer bi bilo u najmanju ruku neljubazno prisiljavati potrošače API-ja da menjaju već izradjene programe da bi se prilagodili na promenu. Kada se napravi promena uvek treba težiti da nastavite s podrškom za postojeća svojstva (end point-e), a da za promene dodate nova svojstva umesto menjanja postojećih.

Read more