Nejc Rebernjak RAZVOJ MOBILNE APLIKACIJE SHOPLY Diplomsko delo Maribor, september 2018

Nejc Rebernjak RAZVOJ MOBILNE APLIKACIJE SHOPLY Diplomsko delo Maribor, september 2018

RAZVOJ MOBILNE APLIKACIJE SHOPLY Diplomsko delo Študent: Študijski program: Smer: Mentor: Lektor: Nejc Rebernjak visokošolski strokovni program Računalništvo in informacijske tehnologije doc. dr. Matej Črepinšek, univ. dipl. inž. rač. in inf. Špela Mlinar, univ. dipl. slov.

ZAHVALA Zahvaljujem se mentorju doc. dr. Mateju Črepinšku za vso strokovno pomoč in podporo pri ustvarjanju te diplomske naloge. Prav tako se zahvaljujem vsem prijateljem in družini, ki so mi stali ob strani in me podpirali čez celoten študij. I

Razvoj mobilne aplikacije Shoply Ključne besede: MVC, REST, mobilna aplikacija, zaledni sistem, spletna aplikacija, črtne kode UDK: 004.352.246:621.397.7-026.364(043.2) Povzetek V sklopu diplomskega dela smo izdelali aplikacijo, ki uporabniku omogoča prijavo/registracijo, skeniranje črtne kode, iskanje izdelkov, dodajanje izdelkov iz mobilne aplikacije, ocenjevanje/komentiranje izdelkov in dodajanje izdelkov v njegovo košarico. Prav tako smo naredili preprost sistem za upravljanje vsebine za skrbnike, kjer je možno upravljanje uporabnikov, komentarjev, izdelkov in kategorij. Diplomsko delo zajema mobilno aplikacijo, izdelano v orodju Android Studio. Povezana je na podatkovno bazo MySQL preko vmesnika, ki temelji na trenutno priljubljeni tehnologiji za hiter razvoj spletnih aplikacij in vmesnikov Laravel. V uvodnem poglavju bomo na kratko opisali črtne kode, predstavili, kaj je vzorec modelpogled-krmilnik, kaj predstavlja tehnologija REST in zakaj potrebujemo sistem za upravljanje vsebine. II

The development of the mobile application Shoply Key words: MVC, REST, mobile application, back-end, web application, barcodes UDK: 004.352.246:621.397.7-026.364(043.2) Abstract As a part of the diploma work, we created an application that allows user to login/register into the application, scan barcodes, search for products, add new products via mobile application, rate/comment products and add them to their personal shopping cart. We have also created a simple content management system allowing administrators to manage users, comments, products and product categories. Diploma work includes a mobile application created in Android studio. It is connected to database MySQL via a framework based on the current most popular technology for rapid development of web applications and interfaces, Laravel. As in the introduction, we will briefly describe barcodes, present what is Model-View- Controller, what REST technology represents and why do we need a content management system. III

KAZALO VSEBINE 1 UVOD... 1 2 OSNOVNI POJMI... 2 2.1 Dinamična spletna stran... 2 2.2 CMS... 2 2.3 Zaledni sistem... 3 2.4 MVC... 3 2.5 Tehnologija REST oz. RESTful... 4 2.6 JSON... 5 2.7 HTTP... 5 3 ČRTNE KODE... 6 3.1 Kaj so in za kaj se uporabljajo?... 6 3.2 Zajem črtne kode... 6 3.3 Zajem črtne kode v Androidu... 7 3.4 EAN-13 in EAN-8... 8 4 ZALEDNI SISTEM... 9 4.1 Zakaj potrebujemo zaledni sistem?... 9 4.2 Zakaj PHP?... 9 4.3 Okvirji PHP... 9 4.4 Izbira okvirja PHP... 10 5 IMPLEMENTACIJA... 12 5.1 Razvojna ogrodja... 12 5.2 Arhitektura aplikacije... 13 5.3 Zaledni sistem... 14 5.3.1 Podatkovna baza in podatkovni modeli... 14 5.3.2 REST API... 16 5.4 Mobilna aplikacija... 20 5.4.1 Glavna dejavnost... 20 5.4.2 Zajem črtne kode... 21 5.4.3 Pridobitev informacij o izdelku... 23 5.4.4 Prikaz informacij o izdelku... 25 6 SKLEP... 30 7 VIRI... 32 IV

KAZALO SLIK Slika 2.1: MVC... 4 Slika 2.2: Primer JSON... 5 Slika 3.1: Primer črtne kode EAN-13 z razlago... 8 Slika 3.2: Primer črtne kode EAN-8... 8 Slika 4.1: Pogostost iskanja najbolj priljubljenih okvirjev PHP v Googlu 29. 8. 2018... 10 Slika 6.1: Arhitektura aplikacije Shoply... 13 Slika 6.2: Laravelove migracije podatkovne sheme... 14 Slika 6.3: Primer migracije za tabelo izdelkov... 15 Slika 6.4: Osnovna oblika podatkovnega modela za izdelke... 15 Slika 6.5: Primer definicije povezav API za aplikacijo... 16 Slika 6.6: Primer metode krmilnika ProductsAPIController za zahtevek na povezavo /product_lookup... 17 Slika 6.7: Koda metod "getreviews()" in "toapiarray()" v modelu izdelkov... 18 Slika 6.8: Primer odzivnega sporočila za neuspešno poizvedbo o izdelku v formatu JSON... 18 Slika 6.9: Primer odzivnega sporočila za uspešno najden izdelek v formatu JSON... 19 Slika 6.10: Zaslonske slike glavne dejavnosti aplikacije... 20 Slika 6.11: Dodajanje knjižnice ZXing v Gradle... 21 Slika 6.12: Primer gumba za skeniranje v obliki XML... 21 Slika 6.13: Koda za klicanje skenerja ZXing... 22 Slika 6.14: Zaslonska slika skeniranja črtne kode s knjižnico ZXing... 22 Slika 6.15: Koda za pridobitev črtne kode iz skenerja Zxing... 23 Slika 6.16: Koda za klicanje metode zahtevka... 23 Slika 6.17: Koda za dodajanje ključev HTTP v poizvedbo Volley... 24 Slika 6.18: Koda za poizvedbo Volley in poslušalca onresponse... 24 Slika 6.19: Prva različica dizajna prikaza informacij o izdelku... 25 Slika 6.20: Koda za prikaz slike izdelka s pomočjo knjižnice Picasso... 26 Slika 6.21: Videz razdelka Osnovne informacije o izdelku... 26 Slika 6.22: Koda za izračun in prikaz povprečja ocen izdelka... 27 Slika 6.23: Koda za izračun deležev ocen izdelka... 27 Slika 6.24: Koda adapterja za komentarje uporabnikov... 28 Slika 6.25: Koda za definicijo adapterja za mnenja in komponente RecyclerView... 29 Slika 6.26: Zadnja različica prikaza dizajna informacije o izdelku... 29 KAZALO TABEL Tabela 2.1: Primerjava tehnologij SOAP z REST... 4 Tabela 4.1: Primerjava treh najpopularnejših okvirjev PHP z našimi kriteriji... 11 V

UPORABLJENE KRATICE API Application Programming Interface CMS Content Management System EAN European Article Numbering HTML Hyper Text Markup Language ios iphone Operating System JSON JavaScript Object Notation MVC Model View Controller PHP PHP: Hypertext Preprocessor REST Representational State Transfer SOAP Simple Object Access Protocol SQL Structured Query Language UI User Interface UPC Universal Product Code XML Extensible Markup Language VI

1 UVOD V današnjih časih imamo na trgovskih policah na voljo ogromno vrst izdelkov različnih proizvajalcev po različnih cenah. Večina ljudi bolj verjame mnenjem potrošnikov kot trgovcev, zato se po informacije o izdelkih odpravijo na spletne forume, spletne strani... Zaradi razpršenosti informacij na internetu je postopek običajno zelo zamuden. Redkokje se danes ne srečamo s črtnimi kodami. Trgovci jih uporabljajo za hitro in zanesljivo identifikacijo izdelkov pri prodaji, skladiščenju, inventuri... [1]. Kupcu črtna koda običajno predstavlja informacijo brez pomena, kar pa ni res. V sebi skriva veliko informacij. Ker dandanes čas predstavlja denar, razvijalci programskih rešitev pogosto posegajo po takšnih, ki dosegajo dobre rezultate v čim bolj optimalnem času, zato smo se v sklopu zalednega sistema spoznali s priljubljenimi metodami in orodji, ki nam lahko skrajšajo čas in olajšajo delo pri pisanju zalednih sistemov. Poznamo ogromno vrst operacijskih sistemov za mobilne naprave, tablice... Najbolj znani so ios, Android in Windows Phone. Za potrebe diplomske naloge smo kot uporabnik našega zalednega sistema ustvarili mobilno aplikacijo, ki temelji na operacijskem sistemu Android. Med izdelavo diplomskega dela smo se želeli na kratko spoznati z črtnimi kodami ter preučiti metode in načine za izdelavo celovite rešitve, ki zajema: mobilno aplikacijo, podatkovno bazo, zaledni sistem in CMS. 1

2 OSNOVNI POJMI Za lažjo predstavo in razumevanje nadaljevanja bomo v tem poglavju na kratko predstavili vse osnovne pojme, s katerimi se bomo srečali v diplomski nalogi. 2.1 Dinamična spletna stran Dinamična spletna stran je spletno mesto, katerega vsebina se v realnem času nenehno spreminja in posodablja. Večina spletnih strani, ki jih obiskujemo, je dinamična. Izjema so navadno t. i. ciljne strani, ki se pogosto uporabljajo za predstavitev podjetij ali izdelkov. Primeri dinamičnih spletnih mest: družbena omrežja, blogi, novice. 2.2 CMS Sistem za upravljanje vsebine (angl. Content Management System CMS) predstavlja programsko aplikacijo ali niz povezanih programov, ki se uporabljajo za ustvarjanje in upravljanje digitalnih vsebin. Navadno se uporablja za upravljanje vsebine v podjetju in spletnih vsebin [7]. Osnovne funkcionalnosti CMS so: indeksiranje digitalnih vsebin in iskanje po njih, možnost ustvarjanja in spreminjanja digitalnih vsebin, možnost odobritev objavljanja vsebine uporabnikov, revizija upravljanja vsebin (zgodovina sprememb). V naši aplikaciji bomo CMS uporabili za preprost nadzor nad aplikacijo in urejanje njene vsebine. 2

2.3 Zaledni sistem Zaledni sistem je sistem, ki opisuje način delovanja dinamičnega spletnega mesta/aplikacije, posodobitev in njegovih sprememb. To se nanaša na stvari, kot so podatkovne baze in strežniki, ki jih uporabnik v aplikaciji ne vidi. Razvijalci zalednih sistemov se večinoma ukvarjajo z varnostjo, strukturo in upravljanjem podatkov [3]. Pogosto je predstavljen tudi kot sistem za upravljanje vsebine spletne strani CMS. 2.4 MVC Model-pogled-krmilnik (angl. Model-View-Controller MVC) je arhitekturni vzorec. Trenutno je eden najpogosteje uporabljenih industrijskih standardnih spletnih razvojnih okvirov za ustvarjanje prilagodljivih in razširljivih rešitev [4]. Priporočljiv je tako za manjše kot tudi večje projekte, saj nam omogoča boljši pregled nad kodo in njeno večkratno uporabo. MVC ločuje aplikacijo v tri logične komponente: model (angl. Model) predstavlja logiko, ki je povezana s podatki, s katerimi razpolaga uporabnik. To lahko predstavlja bodisi podatke, ki se pošiljajo med pogledom in krmilnikom, ali katerekoli druge podatke, povezane z logiko poslovnega modela [4]; pogled (angl. View) predstavlja logiko uporabniškega vmesnika oz. kar uporabnik vidi. Pogosto so uporabniku namenjeni strukturirano predstavljeni podatki, razna polja za vnos, gumbi...; krmilnik (angl. Controller) predstavlja vmesnik med modelom in pogledom. Skrbi za upravljanje podatkov, preden se prenesejo v pogled. Primer osnovnega MVC-scenarija uporabnikovega zahtevka (Slika 2.1) Uporabnik zahteva podatke s strežnika in s tem kliče krmilnik, ki pripravi zahtevek, nato pa kliče model, ki podatke pod določenimi pogoji pridobi iz podatkovne baze. Nato se podatki prenesejo v pogled, kjer se s pomočjo programske logike strukturirajo in pokažejo uporabniku. 3

Slika 2.1: MVC 2.5 Tehnologija REST oz. RESTful RESTful je vmesnik aplikacijskih programov (angl. API), ki uporablja zahtevke HTTP tipov GET, PUT, POST in DELETE. Temelji na tehnologiji reprezentativnega prenosa (angl. REST), arhitekturnem slogu in pristopu k sporočilom, ki se pogosto uporablja v razvoju spletnih servisov. Zasnovan je tako, da izkoristi obstoječe protokole, kar pomeni, da razvijalcem ni potrebna namestitev knjižnic ali dodatne programske opreme. Glavni prednosti tehnologije REST sta sposobnost upravljanja več vrst klicev in vračanje podatkov v različnih formatih. SOAP Protokol, zasnovan na podlagi XML Ne vrača uporabniku berljivih podatkov. Omogoča prenos po protokolih HTTP, SMTP, FTP... REST Arhitekturni slog protokola Vrača uporabniku berljive podatke v več oblikah XML, JSON, CSV... Omogoča prenos samo po HTTP. Slabša zmogljivost v primerjavi z REST Boljša zmogljivost (računsko učinkovitejša, preglednejša koda...) Tabela 2.1: Primerjava tehnologij SOAP z REST 4

2.6 JSON JSON (JavaScript Object Notation) je odprt standardiziran datotečni format, ki uporablja berljiv tekst za prenos objektov, ki so sestavljeni iz atributov in njihovih vrednosti. 2.7 HTTP Slika 2.2: Primer JSON HTTP (angl. HyperText Transfer Protocol) predstavlja najbolj uporabljeno metodo za prenos informacij preko spleta. Zajema uporabnika, ki pošilja zahtevke strežniku, in strežnik, ki čaka na uporabnikove zahtevke in mu ob njihovem prejetju odgovori s povratnim sporočilom. Zahtevek je običajno sestavljen iz treh stvari: naslova zahtevka, metode prenosa, podatkov s ključem in vrednostjo. 5

3 ČRTNE KODE V poglavju o črtnih kodah bomo na kratko opisali, kaj predstavljajo, za kaj se uporabljajo in kako jih lahko uporabimo v svoji aplikaciji. Preučili bomo tudi možnosti, kako si lahko implementacijo čitalnika črtnih kod olajšamo s pomočjo knjižnic. 3.1 Kaj so in za kaj se uporabljajo? Redkokje se danes ne srečamo s črtnimi kodami. Uporabljamo jih v proizvodnji, trgovini, zdravstvu, šolstvu, kulturi, turizmu... Trgovci jih uporabljajo za hitro in zanesljivo identifikacijo izdelkov pri prodaji, skladiščenju, inventuri... [1]. Kupcu običajno črna koda predstavlja informacijo brez pomena, kar pa ni res. Je tudi univerzalna številka za vse embalažirane izdelke v širši regiji. Primer: EAN predstavlja evropsko oznako za izdelke, kar pomeni, da je določen izdelek povsod po Evropi označen z enako črtno kodo. 3.2 Zajem črtne kode Črtno kodo je mogoče zajeti s pomočjo čitalnikov črtne kode, povezanih z računalniškim sistemom, in samostojnih naprav z vgrajenim pomnilnikom. Zadnje čase so vedno bolj priljubljeni tudi čitalniki črtnih in QR-kod s pomočjo kamere na mobilnih napravah [1]. Seveda pa ima branje črtne kode s pomočjo kamere na mobilni napravi tudi slabosti. Največji prednosti zajema črtnih kod s pomočjo mobilnih naprav sta dostopnost in cena, saj ima pametni telefon danes večina ljudi. Slabosti, ki se pojavljajo s tovrstnim zajemom črtnih kod, sta natančnost in hitrost, ki sta odvisni od naslednjih dejavnikov: kakovosti kamere, hitrosti fokusiranja kamere, padca svetlobe na črtno kodo (kontrast), kakovosti črtne kode. 6

Zaradi navedenih slabosti tovrstni zajem s pomočjo mobilnih naprav trenutno ne more nadomestiti čitalnikov črtnih kod, kot jih srečamo v trgovinah, vseeno pa je za potrebe navadnega uporabnika dovolj hiter in učinkovit, zato ga bomo tudi mi uporabili v projektu. 3.3 Zajem črtne kode v Androidu Zaradi kompleksnosti naloge smo se odločili, da bomo za zajem črtnih kod uporabili že pripravljene in uveljavljene knjižnice, ki so nam na voljo za Android. ZXing (Zebra Crossing) je izvorno projekt podjetja Google iz leta 2007, ki še vedno prejema redne posodobitve. Od vseh je najbolj priljubljen, obstaja tudi kot samostojna aplikacija, ki jo najdemo pod imenom Barcode Scanner in ima več kot 100 milijonov prenosov. ZXing je zaradi priljubljenosti dobro podprt, dokaj hiter in zanesljiv bralnik črtnih kod. Njegov problem je zahtevnejša integracija v mobilno aplikacijo [10]. ZBar je med vsemi tremi najhitrejši pri zajemu črtne kode, včasih jo zajame še pred izostritvijo kamere. Problem knjižnice pa je, da se večkrat zgodi, da črtno kodo prebere prehitro, rezultat pa je napačna številka, ki jo dobimo ob zajemu. Za razliko od knjižnice ZXing programerju omogoča lažjo integracijo v aplikacijo, problem pa nastane ob konfiguracijah, saj dokumentacija za ZBar skoraj ne obstaja [10]. Google Mobile Vision je projekt, ki ga je podjetje Google najavilo leta 2015. Velika pričakovanja so tudi upravičili, saj je hitra, zanesljiva in prilagodljiva knjižnica. Razlog, da je razvijalci ne uporabljajo, je, da je za njeno delovanje potreben prenos tretje aplikacije, ki je ni možno namestiti, če ima uporabnik na mobilni napravi na voljo malo prostora [10]. Zaradi želje po samostojni aplikaciji, ki bo dokaj zanesljiva, bomo v našem projektu uporabili knjižnico ZXing. 7

3.4 EAN-13 in EAN-8 Koda EAN-13 je uveljavljena in najpogosteje uporabljena črtna koda za embalažirane izdelke na evropskem tržišču. Z njeno pomočjo lahko ugotovimo, v kateri državi je bil izdelek narejen in katero podjetje ga je naredilo. Slika 3.1: Primer črtne kode EAN-13 z razlago Pomen oznak (Slika 3.1) številka države: 2- ali 3-mestna številka; primer: 383 za Slovenijo; koda proizvajalca: 4- ali 5-mestna številka; dodeli jo organizacija GS1; šifra produkta: 5-mestna številka; dodeli jo proizvajalec; kontrolna številka: 1-mestna številka; izračuna se glede na vrednost predhodnjih številk. Koda EAN-8 (Slika 3.2) je bila uvedena za uporabo na majhnih paketih, kjer je črtna koda EAN-13 prevelika. Primer so cigareti, svinčniki, paket žvečilnih gumijev... Slika 3.2: Primer črtne kode EAN-8 V nadaljevanju bomo črtne kode uporabljali kot celoto v smislu identifikacijske številke izdelka. 8

4 ZALEDNI SISTEM V tem poglavju bomo na kratko predstavili, zakaj za delovanje aplikacije potrebujemo zaledni sistem in zakaj smo si izbrali programski jezik PHP. Pogledali si bomo razlike med okvirji PHP in izbrali enega, ki ga bomo uporabili v svoji aplikaciji. 4.1 Zakaj potrebujemo zaledni sistem? Zaledni sistem potrebujemo za komunikacijo aplikacije s podatkovno bazo, v našem primeru pa bomo pojem predstavili tudi kot vmesnik CMS za upravljanje podatkov, ki nam za razliko od neposrednega urejanja podatkovne baze omogoča večjo prilagodljivost, varnost vnosov in možnost poljubnih omejitev urejanja. V diplomski nalogi smo želeli v sklopu funkcionalnosti administratorske plošče pokriti nekaj osnovnih funkcionalnosti, ki jih ponuja sistem za upravljanja vsebine CMS. 4.2 Zakaj PHP? PHP je trenutno eden izmed najbolj priljubljenih programskih jezikov po vsem svetu, nedavna izdaja PHP 7 pa je ta programski jezik za strežnik izboljšala in postal je stabilnejši kot kdaj prej. PHP trenutno poganja več kot 82 % spletnih strani [9]. PHP je pogosto uporabljen v velikih projektih: Facebook ga uporablja za vzdrževanje in ustvarjanje svojih notranjih sistemov; WordPress ga uporablja za poganjanje notranjih informacij. 4.3 Okvirji PHP Ker smo si na začetku naloge zadali cilj narediti robustno in uporabno aplikacijo v čim bolj optimalnem času, smo se odločili, da za njeno implementacijo uporabimo okvir PHP, ki nam bo prihranil veliko časa pri implementaciji osnovnih stvari (npr. prijava v aplikacijo) s pomočjo že pripravljene kode ter nam zaradi arhitekture MVC omogočil pisanje pregledne kode in metod za večkratno uporabo. 9

Na tržišču poznamo ogromno vrst okvirjev PHP, ki se večinoma med sabo razlikujejo po sintaksi, funkcionalnostih in hitrosti. Slika 4.1: Pogostost iskanja najbolj priljubljenih okvirjev PHP v Googlu 29. 8. 2018 4.4 Izbira okvirja PHP Za izbiro našega okvirja PHP smo si s pomočjo ciljev aplikacije zadali naslednje kriterije: omogoča arhitekturo MVC, pregledna sintaksa, omogoča REST API, podpora MySQL, modularnost, uporabna in pregledna dokumentacija, brezplačna uporaba. Po več pregledanih izdelkih s pomočjo iskalnega niza najboljših 10 php okvirjev 2018 smo ugotovili, da so mnenja ljudi precej različna, zato smo se odločili, da primerjamo tri trenutno najbolj priljubljene okvirje in se odločimo za enega. Prav tako smo ugotovili, da so vsi najdeni okvirji brezplačni za uporabo, zato smo ta kriterij izključili iz primerjalne tabele (Tabela 4.1). 10

Kriterij Codeigniter Symfony Laravel Omogoča arhitekturo MVC da da da Pregledna in preprosta sintaksa ne da da Omogoča REST API da da da Podpora MySQL da da da Modularnost 3 5 4 Priljubljenost vodniki 2 3 5 Uporabna in pregledna dokumentacija 3 4 5 Tabela 4.1: Primerjava treh najpopularnejših okvirjev PHP z našimi kriteriji Kot je razvidno iz tabele 4.1, se okvirji glede na naše kriterije ne razlikujejo zelo, zato smo se odločili za najbolj priljubljenega Laravel, ker bomo najlažje dostopali do informacij in vodnikov. 11

5 IMPLEMENTACIJA 5.1 Razvojna ogrodja Za razvoj mobilne aplikacije smo uporabili Android Studio, za razvoj zalednega sistema pa primarno Visual Studio Code, pri čemer nam je za potrebe hitrejšega razvoja pomagal upravljalnik paketov za PHP Composer. Svoje REST API-je smo testirali s pomočjo orodja Postman, logotipe in ikone pa smo izdelali v priljubljenem oblikovalniku Adobe Photoshop. Android Studio je priljubljeno orodje za izdelavo mobilnih aplikacij Android. Temelji na programskem jeziku Java (za pisanje logike aplikacije), dizajn pa je opisan v obliki XML. Android Studio smo si izbrali, ker je odprtokodno in brezplačno programsko okolje ter hkrati omogoča razvoj naprednih aplikacij. Visual Studio Code je odprtokodni in brezplačen urejevalnik izvorne kode, ki ga je razvil Microsoft za operacijske sisteme Windows, Linux in MacOS. Izbrali smo si ga zaradi dobrega samodejnega zaznavanja napak in vgrajenega terminala, ki nam je skupaj z upravljalnim paketom Composer omogočil hitrejšo implementacijo zalednega sistema. Composer je upravljalnik paketov na ravni aplikacij za programski jezik PHP, ki nam omogoča namestitev knjižnic preko ukazne vrstice. Njegova glavna prednost je, da nam omogoča dobro prenosljivost projektov, saj nam s projektom ni treba prenašati vseh knjižnic, ampak Composer vse prenese z enim ukazom. Postman je orodje, ki nam omogoča testiranje programskih vmesnikov API. Omogoča nam testiranje njihovih funkcionalnosti, zanesljivosti, učinkovitosti in varnosti. Sprva je bil na voljo kot razširitev brskalnikov, nedavno nazaj pa tudi kot samostojni program. Adobe Photoshop je zelo dobro poznano orodje za računalniško obdelavo fotografij in grafik. Uporabili smo ga za izdelavo logotipa in nekaterih ikon v aplikaciji. 12

5.2 Arhitektura aplikacije Arhitektura aplikacije temelji na treh glavnih tehnologijah: Android, Laravel, MySQL. Podatkovna baza, v katero shranjujemo podatke, temelji na tehnologiji MySQL. Vmesnik med podatkovno bazo in uporabnikom predstavlja aplikacija Laravel, ki temelji na vzorcu model-pogled-krmilnik. Ta skrbi tako za delovanje storitev REST API kot tudi našega spletnega vmesnika CMS. Mobilna aplikacija temelji na tehnologiji Java (Android) in predstavlja uporabnika za aplikacijo REST. Slika 6.1: Arhitektura aplikacije Shoply Vsaka poizvedba se izvede preko vmesnika Laravel, ki najprej preveri poslane podatke, jih obdela in vrne odgovor v obliki JSON (Android) ali pogleda (CMS). 13

5.3 Zaledni sistem 5.3.1 Podatkovna baza in podatkovni modeli Za ustvarjanje podatkovne baze smo uporabili Laravelove migracije za podatkovne baze. Njihova glavna prednost je, da omogočajo preprosto ustvarjanje podatkovne sheme, prenos podatkovne sheme in pregled nad spremembami. V tem primeru smo migracije uporabili samo za ustvarjanje tabel, lahko pa bi jih tudi za vsako spremembo v podatkovni shemi. Tako smo ustvarili šest migracijskih datotek (Slika 6.2). Slika 6.2: Laravelove migracije podatkovne sheme V podatkovni shemi imamo tako naslednje tabele: uporabniki (angl. Users), zahtevki za spremembo gesla (angl. PasswordResets), aktivacije uporabnikov (angl. UserActivates), kategorije izdelkov (angl. Categories), izdelki (angl. Products), mnenja (angl. Reviews). Datoteka migracija predstavlja opis sprememb oz. v našem primeru tabele, ki smo jo dodali v podatkovno shemo. V spodnjem primeru (Slika 6.3) je predstavljena migracija za tabelo izdelki, ki ima primarni ključ id, tuj ključ user_id (številka uporabnika, ki je dodal izdelek), tuj ključ category_id (številka kategorije), naziv izdelka, proizvajalca, opis, črtno kodo, 14

atribut active (pove nam, ali je izdelek aktiven, neaktiven ali v čakanju na potrditev) in pot do slike. Slika 6.3: Primer migracije za tabelo izdelkov Za vsako tabelo smo naredili tudi model, v katerem smo opisali, katero tabelo vsebuje in kateri atribut predstavlja primarni ključ, ter vanj dodali metode, ki so vezane na model in jih uporabljajo tako API kot navadni krmilniki. Slika 6.4: Osnovna oblika podatkovnega modela za izdelke 15

5.3.2 REST API V Laravelu je treba definirati vse povezave, zato smo v datoteko routes/web.php definirali vse povezave, ki jih bomo uporabili za komunikacijo Laravela z Androidom: /login za prijavo v aplikacijo, /register za registracijo v aplikacijo, /password_email za pošiljanje zahtevka za pozabljeno geslo, /product_lookup za iskanje vseh informacij o izdelku po črtni kodi, /product_search za iskanje izdelkov po imenu izdelka ali proizvajalca, /shopping_list za iskanje izdelkov po uporabnikovi košarici, /product_add za uporabnikovo dodajanje novih izdelkov, /review za dodajanje/spreminjanje uporabnikovih mnenj o izdelku. Spodnji izsek kode (Slika 6.5) predstavlja vse povezave REST, ki so v skupini s predpono api, kar pomeni, da se bo njihov naslov v našem primeru začel z /api. Pri tem smo vsaki povezavi dodali metodo prenosa HTTP (v tem primeru so vse post ), naslov, ime ter kateri krmilnik in metodo krmilnika kliče ob prejemu zahtevka na povezavo. Slika 6.5: Primer definicije povezav API za aplikacijo Vsaka metoda API najprej preveri potrebne atribute s pomočjo vgrajenega sistema preverjanja Validate, nato nabere podatke s pomočjo Laravelove knjižnice Collections, jih obdela in vrne sporočilo z napako ali podatke o poizvedbi. Ob tem zaradi večkratne uporabe kode kliče metode modela. Primer: na spodnji sliki (Slika 6.6) se za najden izdelek kliče metoda toapiarray(). 16

Slika 6.6: Primer metode krmilnika ProductsAPIController za zahtevek na povezavo /product_lookup Ob klicu metode toapiarray() (Slika 6.7) ta najprej preveri, ali je izdelek potrdil administrator, nato se oblikuje izpis sporočila glede na informacije o izdelku, ki smo ga našli v metodi krmilnika. Ob tem se kliče tudi metoda getreviews() (Slika 6.7), ki dobi vsa mnenja uporabnikov o izdelku. V primeru poizvedbe, kot jo imamo v metodi getreviews(), smo morali naknadno dobiti imena lastnikov mnenj, saj poizvedba preko modela ne omogoča pridružitev tabel v poizvedbi. 17

Slika 6.7: Koda metod "getreviews()" in "toapiarray()" v modelu izdelkov V primeru napake brez atributa barcode se nam izpiše sporočilo z neuspešnostjo, kodo napake in sporočilom napake (Slika 6.8). Slika 6.8: Primer odzivnega sporočila za neuspešno poizvedbo o izdelku v formatu JSON Koda napake omogoča lažjo identifikacijo napake pri uporabniku, kjer jo pretvorimo v uporabniku razumljivo sporočilo. V primeru najdenega izdelka se nam izpiše sporočilo z uspešnostjo in podatki o izdelku (Slika 6.9). 18

Slika 6.9: Primer odzivnega sporočila za uspešno najden izdelek v formatu JSON V primeru odzivnega sporočila našega API-ja smo za pridobitev informacij o izdelku na podlagi črtne kode dobili sporočilo JSON, ki vsebuje atribut uspeha in objekt product, ki predstavlja izdelek. Objekt product : product_id unikatna številka izdelka v sistemu, title naziv izdelka, company proizvajalec, confirmed pove, ali je izdelek potrdil administrator, pic_url pot do slike izdelka, name ime uporabnika, ki je dodal izdelek. Objekt review v zbirki objektov reviews : user_id unikatna številka lastnika mnenja v sistemu, rating ocena uporabnika, comment komentar uporabnika, created_at datum nastanka mnenja, name ime in priimek lastnika mnenja. 19

5.4 Mobilna aplikacija V poglavju implementacije zalednega sistema smo predstavili način pridobitve podatkov iz naše podatkovne baze in način njihovega pošiljanja aplikaciji, v tem poglavju pa bomo predstavili, kako do njih pride mobilna aplikacija in kako jih predstavi uporabnikom. 5.4.1 Glavna dejavnost Po prijavi uporabnika se odpre glavna dejavnost (Slika 6.10), ki je sestavljena iz treh elementov: orodna vrstica (Toolbar), vsebina (Fragment), spodnji navigacijski meni. Slika 6.10: Zaslonske slike glavne dejavnosti aplikacije Fragment predstavlja notranji del oz. vsebino okna. V prvem primeru je to začetni zaslon z dvema gumboma za iskanje in skeniranje, v drugem primeru pa predstavlja komponento RecyclerView, ki vsebuje izdelke, dodane v košarico. 20

5.4.2 Zajem črtne kode Zajem črtne kode v mobilni aplikaciji smo implementirali s pomočjo knjižnice ZXing. Ob tem smo ugotovili, da je pri knjižnici ZXing za skeniranje črtne kode v prvi vrsti potrebna tretja aplikacija Barcode Scanner. Po kratki raziskavi smo ugotovili, da za potrebe samostojne aplikacije obstaja knjižnica ZXing Android Embedded. Najprej smo knjižnico dodali pod zavihkom dependencies v datoteko Gradle (Slika 6.12), ob tem se nam je samodejno prenesla iz repozitorija. Slika 6.11: Dodajanje knjižnice ZXing v Gradle Nato smo na domači fragment in spodnji menu dodali gumb za skeniranje črtne kode. Gumbe na domačemu fragmentu predstavljajo tri linearne postavitve (zunanja, gravitacijska in notranja). Notranja linearna postavitev vsebuje ikono in tekst. Slika 6.12: Primer gumba za skeniranje v obliki XML 21

V domačem fragmentu smo najprej definirali gumb za skeniranje, nato smo v metodi oncreateview nastavili naše gumbe in jim nastavili referenco na XML na zunanje linearne postavitve, ki v našem primeru predstavljajo gumbe. Nato smo gumbu za skeniranje dodelili poslušalca onclicklistener (Slika 6.13), ki bo ob kliku na gumb ustvaril in klical IntentIntegrator oz. čitalnik črtne kode ZXing. Slika 6.13: Koda za klicanje skenerja ZXing V našem primeru (Slika 6.13) smo skenerju nastavili nekaj stvari, kot so katere formate naj podpira (v tem primeru kode izdelkov, ki zajemajo EAN-13, EAN-8, UPC itd.), kakšno sporočilo naj se prikaže, katero kamero naj uporabi (0 pomeni privzeta zadnja kamera) ipd. Slika 6.14: Zaslonska slika skeniranja črtne kode s knjižnico ZXing 22

Na drugi strani smo v naši glavni dejavnosti dodali poslušalca onactivityresult (Slika 6.15), ki ob koncu skeniranja razčleni rezultat v številko, ki predstavlja celotno številko skenirane črtne kode. Ta se nato pošlje kot dodaten atribut scancode v novo dejavnost, v kateri pridobimo in prikažemo informacije o izdelku. Slika 6.15: Koda za pridobitev črtne kode iz skenerja Zxing 5.4.3 Pridobitev informacij o izdelku Do zdaj smo pridobili samo številko črtne kode, za katero smo morali v naši bazi podatkov poiskati, ali so nam o njej na voljo informacije o izdelku. Najprej smo jo sprejeli v svojo dejavnost ProductInfoActivity in klicali metodo za klic aplikacije REST (Slika 6.16). Slika 6.16: Koda za klicanje metode zahtevka Za klicanje naše aplikacije REST smo uporabili priljubljeno knjižnico za upravljanje zahtevkov HTTP Volley, ki omogoča tudi nadzor nad čakalno vrsto zahtevkov. 23

Za pošiljanje zahtevka HTTP za iskanje informacij o izdelku smo ob poizvedbi s knjižnico Volley nastavili: naslov API-ja: https://shoply.si/api/product_lookup, metodo prenosa: POST, ključ barcode z vrednostjo 3868999151581. Zaradi lažjega urejanja naših naslovov aplikacije REST smo jih predstavili v objektu Config, katerega niz smo sestavili iz spremenljivke strežnik in naslova za metodo. Primer: strežnik ( https://shoply.si/api/ ), naslov ( product_lookup ). Zahtevku Volley smo nato dodelili vrednost barcode (Slika 6.17), katere vrednost je črtna koda, ki smo jo zajeli s pomočjo knjižnice ZXing. Slika 6.17: Koda za dodajanje ključev HTTP v poizvedbo Volley Nato smo ustvarili poslušalca onresponse (Slika 6.18), ki se izvede ob odgovoru strežnika. Vanj se iz sporočila ustvari objekt JSON, iz katerega kasneje pridobimo vse podatke o izdelku. Slika 6.18: Koda za poizvedbo Volley in poslušalca onresponse 24

Podobno kot pri strežniku smo tudi v aplikaciji ustvarili objekte ProductInfo za informacije o izdelku in Review za mnenja o izdelkih, ki smo jih ob odgovoru strežnika s pomočjo objekta JSON napolnili po enaki strukturi, kot je bila prikazana v poglavju o implementaciji zalednega sistema (Slika 6.9). 5.4.4 Prikaz informacij o izdelku Da bi naše podatke o izdelkih čim bolje predstavili uporabnikom, smo naredili dizajn za prikaz informacij o izdelku (Slika 6.19). Slika 6.19: Prva različica dizajna prikaza informacij o izdelku V obdobju razvoja aplikacije smo ugotovili, da je na zaslonu predstavljenih preveč podatkov naenkrat, zato smo se jih odločili predstaviti s pomikanjem navzdol in tako smo dejavnost razdelili na naslednje razdelke, ki si sledijo po vrsti: slika izdelka, osnovne informacije o izdelku, ocene izdelka, oddaj mnenje, mnenja uporabnikov o izdelku. 25

Vsak razdelek predstavlja linearni pogled s celotno širino naprave, njegovo višino pa predstavlja višina vsebine. Vsak drugi razdelek ima zeleno barvo ozadja, da jih lažje ločimo med sabo. Za prikaz slike izdelka smo uporabili knjižnico Picasso (Slika 6.20), ki smo ji nastavili pot do slike s pomočjo našega objekta. Če poti do slike ni v objektu ali slika ni najdena, nastavimo sliko napake, ki prikaže ikono za izdelek brez slike. Sliki smo zaradi različnih velikosti spremenili velikost in jo centrirali. S tem smo rešili problem podolgovatih in širokih slik. Slika 6.20: Koda za prikaz slike izdelka s pomočjo knjižnice Picasso Razdelek osnovne informacije o izdelku (Slika 6.21) smo naredili s pomočjo linearne postavitve, v kateri smo dodali štiri spremenljive in štiri statične elemente TextView. Vrednosti spremenljivih elementov se nastavijo potem, ko dobimo objekt za informacije o izdelku. Slika 6.21: Videz razdelka Osnovne informacije o izdelku V razdelku ocene izdelka smo povprečno oceno izdelka (Slika 6.22) izračunali tako, da smo sešteli vse ocene mnenj uporabnikov in jih delili s številom ocen. Povprečno oceno smo na koncu zaradi prikaza zaokrožili na dve decimalni mesti. 26

Slika 6.22: Koda za izračun in prikaz povprečja ocen izdelka Za prikazovanje števila posameznih ocen smo uporabili knjižnico Android RoundCornerProgressBar. Da bi dobili delež ocen, ki ga predstavlja vsaka ocena, smo za vsako oceno prej izračunali njen seštevek. Tako smo dobili seštevke ocen od 1 do 5, iz katerih smo za vsako od ocen izračunali njen delež v odstotkih in nastavili napredek na dobljen delež (Slika 6.23). Slika 6.23: Koda za izračun deležev ocen izdelka S pomočjo atributa user_id v objektih mnenj smo ugotavljali, ali je prijavljen uporabnik že oddal mnenje o izdelku (ob prijavi v aplikacijo dobimo številko uporabnika, ki jo shranimo v SharedPreferences ). Če je uporabnik to že storil, se samodejno napolnita komponenti za oceno in komentar z vrednostmi uporabnikovega mnenja, ime gumba pa se spremeni v Spremeni mnenje. 27

Razdelek z mnenji o izdelku predstavlja komponenta RecyclerView, ki smo jo implementirali tako, da smo naprej s pomočjo XML-ja naredili novo postavitev, ki predstavlja uporabnikovo mnenje, nato smo ustvarili svoj razred za adapter (Slika 6.24), ki razširja privzeti adapter za komponento RecyclerView. Slika 6.24: Koda adapterja za komentarje uporabnikov Nazadnje smo v dejavnosti za informacije o izdelku ustvarili adapter in mu dodelili seznam mnenj. Na koncu smo naši komponenti RecyclerView dodelili še adapter, ki smo ga ustvarili prej (Slika 6.25). Po oblikovanju seznama mnenj adapterju kličemo metodo notifydatasetchanged(). 28

Slika 6.25: Koda za definicijo adapterja za mnenja in komponente RecyclerView Slika 6.26: Zadnja različica prikaza dizajna informacije o izdelku 29

6 SKLEP Med razvojem aplikacije Shoply smo spoznali veliko novih pristopov upravljanja podatkov, kot tudi programiranja. Podrobno smo se spoznali z okvirji PHP in ugotovili, da so zaradi svoje prilagodljivosti kljub že vnaprej pripravljeni kodi primerni tako za manjše kot večje projekte. V sklopu mobilne aplikacije smo se seznanili z modernimi načini rešitev, kot tudi s celotno sliko arhitekture mobilnih aplikacij, ki komunicirajo s spletom. Temo smo si izbrali zaradi ideje, ki se nam je zdela uporabna za vsakdanjega uporabnika, ki tako kot mi rad bere mnenja uporabnikov na internetu. V procesu izdelave aplikacije smo se soočili z veliko vprašanji glede njene uporabnosti (npr. kako bodo uporabniki dodajali izdelke in kdo jih bo preverjal). Zaradi teh vprašanj smo poleg ostalih funkcionalnosti s pomočjo orodja Laravel v aplikacijo dodali tudi spletno stran za administracijo (Slika 7.). Slika 7.1: Administracijska plošča za upravljanje izdelkov v aplikaciji 30

V sklopu zalednega sistema nam je največji izziv predstavljalo programiranje po arhitekturnem vzorcu MVC, v sklopu mobilne aplikacije pa sta nam največji izziv predstavljala koncept aplikacije s pomočjo fragmentov in način, kako uporabniku preprosto in učinkovito predstaviti informacije o izdelkih. Proces učenja orodja Laravel zaradi popularnosti orodja, dobro napisane dokumentacije in številnih vodnikov, ki so nam na volju na spletu, ni bil zahteven. Po končani implementaciji celotne aplikacije smo bistveno nadgradili znanje o izdelavi mobilnih aplikacij Android in načinih komuniciranja mobilne aplikacije s strežnikom. Z doseganjem cilja diplomske naloge smo zadovoljni, saj smo uspeli narediti veliko več, kot smo si zadali na začetku. 31

7 VIRI [1] Kaj je črtna koda?, dostopno na: https://leoss.si/strokovnjak_svetuje/24/kaj_je_crtna_koda/ 16. 8. 2018 [2] An Overview of PHP Framework Guides for Developers, dostopno na: https://onextrapixel.com/an-overview-of-php-framework-guides-for-developers/ 16. 8. 2018 [3] Back-End System, dostopno na: https://www.techopedia.com/definition/1405/back-end-system 16. 8. 2018 [4] MVC Framework Introduction, dostopno na: https://www.tutorialspoint.com/mvc_framework/mvc_framework_introduction.htm 16. 8. 2018 [5] RESTful API, dostopno na: https://searchmicroservices.techtarget.com/definition/restful-api 19. 8. 2017 [6] JSON Wikipedija, dostopno na: https://en.wikipedia.org/wiki/json 19. 8. 2017 [7] What is content management system (CMS)?, dostopno na: https://searchcontentmanagement.techtarget.com/definition/content-managementsystem-cms 22. 8. 2017 [8] What is REST API?, dostopno na: https://www.mulesoft.com/resources/api/what-is-rest-api-design 22. 8. 2017 [9] How to choose PHP Framework?, dostopno na: https://opensource.com/business/16/6/which-php-framework-right-you 31. 8. 2017 [10] Android Barcode Scanning Library Landscape Bryan Herbst, dostopno na: https://medium.com/@bherbst/android-barcode-scanning-library-landscape- 109292b81b65 31. 8. 2017 32