Otvori web stranicu sa testovima | Preuzmi mobilnu aplikaciju za Android



Razvijajući novu verziju SpesDrivera fokusirao sam se na nekoliko stvari:

• da test bude stabilniji, brži i sa više opcija,


• da se lako koristi u Cordovi


• bolje optimizovan za mobilne uređaje,


• posjeduje više država,


• posjeduje spisak autoškola,


• posjeduje novi, moderniji, dizajn.

 

Serverski dio
Krenuo sam skoro od "nule", kopirao 3 - 4 modela i možda neki kontroler. Sada sam koristio Yii2 tako da sam i sa kopiranim dijelovima imao dosta posla.

 

Klijentski dio

Bilo je jako bitno odabrati prave tehnologije, jer je ista aplikacija trebala da radi na različitim rezolucijama i browserima, ali i da sa Cordovom napravim aplikacije za različite platforme. Polymer je bila tehnologija koja mi je privlačila pažnju, ali s obzirom da dosta browsera ne podržava WebComponente odustao sam.

Izabrao sam Angular i Angular Material koji je još bio u ranoj Alpha fazi razvoja. Trenutno sam razočaran, aktuelna verzija je 0.8.3, na Android Browseru i IE <= 11 se raspada. Aplikacija je skoro gotova ali je ne mogu objaviti, jer još nema podršku za pomenute browsere, a nisam siguran ni da li će imati. Ali glavu gore i idemo dalje.

Koristio sam Gulp, odlična stvar. Uspio sam minifovati i kombinovati fajlove. Angular templati se zahvaljujući Gulpu nalaze u JS fajlu. Slike linkovane u CSS su base64 enkodovane. Smanjio sam broj zahtjeva, pa se nadam i opterećenje na serveru.

Sa Angularom sam vrlo lako odradio deep routing, veliki broj linkova se kešira i to storageu. Prezadovoljan sam Angularom, ali vrlo je bitno voditi računa od stilu pisanja koda. Zbog toga sam u početku nekoliko puta počeo sve iznova. Dobar "Style Guide" pronašao sam na ovom linku:
https://github.com/johnpapa/angularjs-styleguide
Nemojte se zanositi video tutorijalima, brže se savladaju neki osnovni koncepti, kontroleri, servisi, direktive, $scope... Ali tu je kod optimizovan za male aplikacije, UVIJEK pratite style guide iskusnih programera. Angular2 je potpuno izmijenjen tako da pretpostvaljam da će biti lakše.

Mobilna aplikacija
S obzirom da sam jedini developer odlučio sam se za Cordovu. Dok sam pravio web aplikaciju razmišljao sam da sebi olakšam pravljenje mobilne aplikacije, tako da je web aplikacija brzo pretočena u mobilnu. Problem je nastao kada sam je testirao na Android 4.3 i manje. Te, starije verzije koriste Stock Browser za WebView tako da aplikacija zbog Angular Material nije radila. Namučio sam se Crosswalkom i sad imam dvije verzije aplilacije za Android. Muka!

Link za preuzimanje:

https://play.google.com/store/apps/details?id=com.lukicdarkoo.spesdriver

Zaključci
Nadam se skoroj podršci Angular Materiala za starije browsere. Sljedeći put biram isprobane tehnologije. Klijentski dio je najteže razviti, super stvari su tu, ali ako ih odaberete gubite dio korisnika.

Došao sam na fakultet, "naučio" gomilu gluposti, izgubio pola godine života i tek sam sada počeo raditi nešto korisno. Iz Arhitekture računara imao sam priliku da radim projekat kod kuće za 30 bodova što sam jedva dočekao. Nakon duže rasprave sa asistentom odlučio sam da pravim igricu u C++ koristeći SDL biblioteku.

Moram napomenuti da mi je ovo prva igrica i da sam posljednji put sa OOP u C++ susreo u trećem razredu srednje iz Programiranja. S obzirom na to ovaj projekat je bio odličan način da se podsjetim nekih stvari i naučim nešto novo. Ovo je prvi put da nešto korisno naučim na fakultetu, tačnije dok sam na fakultetu, jer ovaj projekat radim "kod kuće".

Organizacija koda i datoteka je bio prvi problem sa kojim sam se suočio. Vjerovatno zbog neiskustva u pravljenju ovakvih aplikacija, nepoznavanja SDLa i lošeg znanja OOPa u C++ bilo je mi je jako teško da napravim dobru strukturu. Iz tog razloga često sam dosta stvari mijenjao i počinjao iz početka. Sada, kada je projekat završen uviđam greške i imam mnogo jasniju sliku strukture koja je bila pogodna za ovakve aplikacije. Sigurno bih narpravio klasu za rad sa tekstovima koja bi obavezno sadržala podrazumjevane vrijednosti, veličinu, boju i naziv fonta, zatim funkciju za prelamanje teksta i destruktor koji bi oslobađao zauzetu memoriju.

Za grafiku nisam smio koristiti slike sa Interneta, pa sam odlučio da ih sam napravim. Prvo sam nacrtao na papiru kako bi neka slika trebala da izgleda, zatim fotografisao telefonom i tu forografiju koristio kao "pozadinski layer" u GIMPu. Preko toga u novim layerima sa Paintbrushom crtao sam novu sliku. Ograničenja C/C++ i same SDL biblioteke su me dosta usporavali. C/C++ ne posjeduje standardnu bibloteku sa funkcijom koja konvertuje integer u string, pa sam je morao sam napisati. Takođe, SDL nema mogućnost prelamanja teksta, pa sam morao napisati i funkciju za to koja nije radila dovoljno dobro.

Realistično kretanje olovke sam pokušao da realizujem tako što bi se olovka u prvom frejmu pomjerila za x tačaka, a sljedećem za (x – y) tačaka. Na sličan način napravio sam i naginjanje olovke zavisno od djelovanja sila.

Link za preuzimanje igrice

Iako sam "fan" modernih programskih jezika ovog puta zbog zahtjeva srednje škole morao sam da programiram PIC mikrokontrolere u PicBasicu. Elektroniku i programator za PIC sam kupio na eBayu. Uspio sam sve sam sklopiti, i hardver i softver.

Najveći problem je što u Bijeljini nema da se kupi 30% hidrogen, pa sam ga morao potražiti u Novom Sadu. Tačnije, prema riječima apotekarke nije dozvoljeno prodavanje 30% hidrogena ali mi je ipak dala shvativši za šta mi treba. O ovome vjerovatno ne bih smio ni pisati :)

Ništa posebno, PIC16F84A, rezonator na 4MHz, LCD, regulator napona, potenciometar, nekoliko otprnika i blok kondenzatora. Projekat je značajan za mene jer je prvi koji sam radio sve sam, herdver i softver i završio ga.

Jedan interesantan projekat, vjerovatno ilegalan, pa je to jedan od razloga zašto ga vjerovatno neću nikada ni završiti. Sastoji se od dvije aplikacije, klijenta (web aplikacija gdje se nalazi interfejs za upravljanje drugim) računarom i servera (desktop aplikacije pisane u C# koja izvršava sve naredbe na žrtvinom računaru). Ovo znači da postoji web aplikacije, gdje se prijavite (sa bilo kog uređaja) i imate pristup drugom računaru čiji korisnik ne zna da ga neko prati. Popularan naziv ove vrste programa je RAT, ali se uglavnom realizuje sa dvije desktop aplikacije i koristi se Socket što zahtjeva port-forward.

Inače, ovo je moj prvi projekat sa Yii2, započet kada je Yii2 bio u ranoj Aplha fazi razvoja. Yii2 posjeduje sve ono što je falilo Yii 1.1. Sada je sve namespaceovano, posjeduje composer, integrisan je Bootstrap i još mnogo stvari koje ubrzavaju razvoj.

Način rada SpesSpy je prilično teško objasniti tako da ću se potruditi da nekad napravim sliku. Osnova je da klijent ostavlja kod koji je potrebno izvršiti, a zatim server preuzima taj kod, kompajlira i izvršava. Ovakav način čini da server bude "lakši" od 7KB.



Ovo nije moj prvi program ove vrste, pa bi se moglo reći da imam iskustva sa pisanjem ovakvih programa. Prije nekoliko godina napravio sam LokiRAT.

Imao sam priliku da prebiram zrna kokičara, razdvajam loše od dobrih, ručno, zrno po zrno. Izuzetno dosadan i težak posao, pa sam se odmah bacio na traženje rješenja. Potražio sam na Internetu da li postoji takva mašina i našao odličnu stvar, zove se Camera Sorter, međutim ovakve mašine su skupe i prave se samo po naruđbi. Oduševio sam se kako je pametno osmišljena mašina
http://www.bestsorting.com/sorting-food/sorters/genius-optical-sorter/working-principle-of-the-genius-dual-sorter/

S obzirom da sam se nekada ranije igrao sa procesuranjem slike odlučio sam da napraivim svoj Camera Sorter. Naravno, bio sam svjestan da neće biti upotrebljiv, pogotovo ako imate velike količine. Htio sam samo da vidim da li sam sposoban da napravim :)  Zrna kokiračara trebalo je da se raspoređuju po traci koja je ovom slučaju kaiš sa alternatora. Kaiš se nalazio na dva ležaja, a na jedan ležaj bio je spojen sa zupčanikom. Jedan step motor pokretao je zupčanik, a drugi je služio za izbacivanje dobrih zrna (dobro zrno je izbacivano, a loše je ostajalo na traci). Iznad trake sam smjestio običnu web kameru sa nekoliko LEDova kako bih dobio bolju osvjetljenost, a samim tim i bolju sliku.

Za kontrolu step motora zadužen je Arduino sa H mostom. Slike iz kamere prenoslila se u C# aplikaciju gdje obrađivana slika. Za obradu slike koristio sam AForge biblioteku. Program je prvo sjekao sliku na veličinu trake, pravio blobove prema boji (samo dobra zrna su naranđaste boje) i selektovao samo blobove veličine u zadatom opsegu.

Kordinate zrna koje treba izbaciti prosleđivane su Arduinu. Arduino nema biblioteku za rad sa nizovima kao što je vector u C++, a trebala mi je, pa sam morao napraviti svoju klasu. Sljedeći problem odnosio se na prosljeđivanja koridnata zrna Arduinu. Bilo je teško uzeti u obzir proklizavanje kaiša i rotiranje kamere.

Jednostavan naziv, ne znam zašto nisam smislio ništa pametnije, valjda zbog ćirilice . Imao sam pametni telefon, Android, postojao je WiFi, a telefon je imao akcelerometar, pa sam pukušao naći aplikaciju na Play Storeu da koristim telefon kao volan. Međutim nisam imao sreće, aplikacije koje su koristile akcelerometar ostvarivale su komunikaciju sa računarom preko bluetootha (a to nisam imao na desktopu), a one koje komunicarale preko WiFia nisu koristile akcelerometar. Želio sam malo da se uživim u igru i da iskoristim telefon, pa sam odlučio da napravim svoju aplikaciju shodno mojim potrebama.

Postoje dvije aplikacije, C# aplikacija koja se nalazila na računaru i naravno Java aplikacija na Androidu. Windows i Android se baš i ne slažu, ne postoji jednostavan način da se ove dvije platforme povežu, tako da sam morao improvizovati. Koristio sam HttpListener kako bih "osluškivao" HTTP zahtjeve sa Android aplikacije. Ovim sam bio razočaran u Javu, jer obične, jednostavne stvari mora da se koristi try/catch. Ako izuzmemo ovaj nedostatak Jave (subjektivno mišljenje nekog ko ne zna Javu) izrada Android aplikacije nije bio problem. Teži dio bio je natjerati C# aplikacije da simulira JoyStick. Pronašao sam vJoy koji je je radio upravo ono što je meni trebalo, posjedovao je virtuelni drajver i biblioteku za C#.

Aplikaciju sam iskoristio kao projekat za Računarske mreže. Bilo je zanimljivo gledati kako se profesori igraju :)

Ideja se javila još u prvom ili drugom razredu srednje, ali smo sa realizacijom počeli tek u četvrtom, s obzirom da ranije nismo imali dovoljno znanja, podrške i novca. Skupili smo znanje, ali niko nije vjerovao u nas, pa smo ponovo oskudevali sa novcem i podrškom.

Drug je napravio konsktrukciju. Međutim bila je od gvožđa, teška i samim tim nepraktična. Nekoliko sedmica kasnije drug kontrusisao novi plastenik, ali ovaj put od pleksiglasa. Potrošili smo 30e za prvu konstrukciju i oko 200KM za drugu. Izgledalo je dobro i počeli smo da ubacujemo senzore i aktuatore.

Senzore i aktuatore nabavljao sam sa eBaya pošto kod nas nije bilo. Sada smo imali problem sa iskustvom, mnoge dijelove nikada nismo koristili niti vidjeli kako se koriste, nismo znali šta nam odgovara. Informacije koje smo pronašli na Internetu o svim tim dijelovima nisu bile dovoljne. Ovaj dio projekta sam ja sam finansirao, a novac sam zaradio radeći kao programer na Freelanceru. Krajem 2012. uspjeli smo osposobiti osnovne stvari, a upravljanje makete preko telefona bilo je nevjerovatno.

Sada su profesori već postali zaintresovani, vidjeli su da smo sposobni da napravimo ono što smo zamislili i konačno dobili smo podršku i nešto novca. Drug je već stekao iskustva, shvatio je da može bolje i od škole smo tražili da nam kupi novi pleksiglas. Ovaj je sada bio debeo 5mm i sa dodatnim unapređenima plastenik je izgledao mnogo bolje.

Softver sam ja radio. Bilo je potrebno napisati tri aplikacije, C/C++ aplikaciju za Arduino, web aplikaciju sa koje pristupalo plasteniku i C# aplikaciju za glasovnu kontrolu i komunikaciju sa web aplikacijom. Koristio sam najnovije tehnologije koje sam poznavao.

Za izradu korisničkog interfejsa web aplikacije koristio sam jQuery Mobile koji mi se uopšte nije svidio. Bio je prenatrpan nepotrebnim stvarima, a s obzirom da je "mobile first" na računaru nije izgledalo onako kako sam ja to zamišljao.

C# aplikacija je napisana u OOP stilu. Tu sam takođe napravio grešku, jer sam koristio "getere" i "setere". Problem je nastao kada sam pored demetra21.heater = true trebao demetra21.setHeater(true, true). Arduino platforma mi je djelovala neozbiljno, ali su je ljudi sasvim drugačije vidjeli, projekat je čak dobio na značaju zbog Arduina.

Prvo takmičenje i prezentacija našeg projekta bila je na INOSTu u Banjaluci. Nismo očekivali, ali osvojili smo nagradu za najbolju projekat, najveća nagrada na tom takmičenju. Spavali u kasarni, upoznali ljude, stekli iskustvo, odlično za početak :)

Shvatili smo da smo napravili nešto što ljude zanima, spojili smo mehaniku, softver i elektroniku, imali smo za svakoga po nešto. Stekli smo i "medijsku popularnost". To nas je sve inspirisalo da idemo da tražimo sponzora. Ali nakon što smo obišli najmanje 20tak firmi i nakon što su nama obećali da će nam sigurno poslati novac za dalji razvoj projekta nismo dobili ni pfeninga. Opština naravno nije dala ništa, ali to smo i predpostavljali. Ali nije ni crkva! Crkva koja se predstavlja da svima pomaže, oličje morala nije se udostojila da da barem 50KM. Dobili smo 100KM od drugarice koja se priključila projektu i 100KM od jedne stranke.

Napravio sam veliki update cijelog softvera. Za izradu web aplikacije koristio sam Yii framework i bootstrap. Odlična kombinacija, MVC šablon iz Yii frameworka omogućio mi je da jednostavno integrišem dosta opcija. Registracija/prijava, automatska regulacija, spremanje svih dešavanja u plasteniku u bazu, mala socijalna mreža, korisnik je sada imao mogučnost da kontroliše više plastenika, i još mnogo toga. Neke klase u C# aplikaciji sam ponovo napisao od nule i cijeli sistem bio mnogo stabilniji, brži i sa više mogućnosti.

Bili smo u Goraždu i osvojili prvo mjesto, ali ono bitnije je da smo otišli na prvu Olimpijadu inovacija za jugoistočnu Evropu. Tu smo upoznali dosta ljudi iz drugih krajeva Balkana. Ljudi iz Bugarske, Rumunije, Crne Gore, Bosne, Srbije, Hrvatske, Makedonije bili su na jednom mjestu, sedam timova predstavljali su svoje projekte. Ponovo smo uspjeli osvojiti prvo mjesto.

Bili smo u Bijeljini na poljoprivrednom sajmu, u Novom Sadu na Tesla festu i BalConu, gostovali u mnogim emisijama, pisali su o nama i sve to nas je podstaklo da počnemo sa razvojem novog projekta.

Autori: Mile Savić, Dragutin Marjanović i ja.

Otvori stranicu za pripremu testova za polaganje vozačkog

S obzirom da mi je tata radio u auto školi, a ja sam se bavio programiranjem htio sam da pomognem njemu i njegovim kandidatima tako što ću napraviti aplikaciju gdje će kandidati moći da vježbaju. Odlučio sam da to bude web aplikacija zbog dostupnosti, jednostavnosti, lakog ažuriranja pitanja, a i dobro sam poznavao web tehnologije.

Prvu aplikaciju napravio sam 2011. ali vjerovatno zbog nemotivisanosti nisam imao volje da ručno unosim pitanja u bazu. Pokušao sam kontaktirati ljude iz ministarstva koji su objavili testove, međutim kako je i očekivati od ove države nisam dobio odgovor. Sedam ljudi je primilo email sa zahtjevom da mi pošalju bazu pitanja kako bih ih mogao unijeti u aplikaciju i koristiti ih u edukativne svrhe, bez da komercijalizujem aplikaciju, ali se niko nije ni potrudio da mi odgovori. Ponovo razočaran u vlast.

Sljedeće godine došlo je vrijeme da i ja polažem. Učenje iz knjige bilo je naporno, sporo i dosadno, te sam odlučio da završim aplikaciju. Napravio sam skriptu koja je "izvukla" sva pitanja iz PDF dokumenata i smjestila ih u bazu. Ručno sam morao ispraviti neke greške, ubacim slike, ali nije bilo teško, usput sam i učio. Doradio sam aplikaciju, kupio jeftin domen i postavio na besplatan hosting. Iz ovoga sam izvukao pouku, besplatan hosting znači da će vam pasti za nekoliko dana, a jeftin domen da će vas prudužavanje koštati četiri puta više od realne cijene. Svejedno, vježbao sam na svojoj aplikaciji i položio.

Projekat iskoristio kao referencu za konkurs na dva posla na kojima sam zaradio oko $1500. Poslove sam dobio, jer su poslodavci vidjeli da sam radio na sličnoj aplikaciji. Poslije sam isti projekat odabrao za maturski rad. Nije loše, položen ispit, $1500, maturski rad od aplikacije na koju nisam polagao nikakve nade

Vremenom aplikacije je postala relativno popularna, 5000 posjeta nije bila mala stvar s obzirom na reklamu. Zanimljivo mi je bilo da je prosjek "ostajanja" na stranici bila oko 12 minuta, a procenat posjete samo jedne stranice ispod 20%. Odlučio sam da napravim novu aplikaciju, s istom namjerom, ali da ovaj put proširim mogučnosti. Nova aplikacija nalazi se na domeni spesdriver.com. Nisam više koristio Core PHP, odlučio sam se za Yii framework i pokazao se kao vrlo jednostavan i dobar PHP framework. Responsive design, aplikacija za mobilne telefone, mogućnost embedovanja, multijezičnost, testovi za Bosnu i Srbiju su samo neke od mogučnosti sa kojima se nova verzija izdvaja od prethodne.

SpesDriver sada ima preko 20000 posjeta mjesečno, i raste, a ja planiram uskoro da počnem sa izradom nove verzije.