Razvoj mobilnih aplikacija

Uvod

Mobilna aplikacija je program koji je dizajniran da radi na mobilnom uređaju kao što je mobilni telefon, tablet ili wearable (pametni sat…). Te aplikacije imaju pristup senzorima i specifičnim funkcionalnostima uredjaja (kamera, žiroskop, vibracija i dr.). Razvijanje aplikacija za mobilne uređaje zahteva razmatranje karakteristika ovih uređaja i njihovih ograničenja (rade na bateriji i imaju slabije procesore i manje RAM memorije nego desktop računari). Programeri takođe moraju imati u vidu širok spektar: dimenzija ekrana, hardverske specifikacije i konfiguracije različitih uredjaja. Na većini mobilnih uredjaja se nalazi jedan od sledeća dva operativna sistema: Android i IOS.

mobile apps

Različiti pristupi izradi mobilnih aplikacija

Mobilne aplikacije se ponekad kategorizuju u zavisnosti od toga koji je pristup korišćen pri izradi aplikacije, pa stoga možemo razvoj mobilnih aplikacija podeliti na sledeće grupe:

  • Izvorne (native) mobilne aplikacije:
    • iOS app development
    • Android app development
  • Kvazi-izvorne mobilne aplikacije:
    • React Native
    • NativeScript
    • Xamarin
  • Hybridne mobilne aplikacije
    • Ionic + Android.js
    • Quasar + Vue.js
    • Framework7 + React.js
  • Responsivne web aplikacije

Izvorne (native) mobilne aplikacije

android & iOS

Izvorna aplikacija je softverski program koji je razvijen za upotrebu na određenoj platformi ili uređaju. Budući da je izvorna aplikacija izgrađena samo za upotrebu na određenom uređaju i njegovom operativnom sistemu, ona ima mogućnost da maksimalno iskoristi hardver i softver specifičan za uređaje tako da mogu pružiti najbolje performanse.
Native aplikacije moraju biti napisane u odgovarajućem programskom jeziku za svaki operativni sistem, stoga se za iOS aplikacije koristi Objective-C ili Swift, dok se nativne Android aplikacije pišu u Javi ili Kotlin-u.

Da bi ste razvili “nativne mobilne aplikacije” na više različitih platformi, potrebno je da u timu imate softverske inženjere za svaki operativni sistem. Pored velike (čitaj “skupe”) zavisnosti od specifičnog kadra, treba naglasiti da je otežavajuća okolnost što ne možemo da iskoristimo i podelimo programski kod između različitih verzija iste aplikacije. Zaključak je da nativne aplikacije imaju superiorne perfomanse ali i veliku cenu.

Kvazi izvorne mobilne aplikacije

nativescript

Za izradu kvazi izvornih mobilnih aplikacija se koriste frejmvorci (ReactNative i NativeScript) koji se baziraju na web konceptima pri razvoju mobilnih aplikacija. ReactNative i NativeScript koriste JavaScript, dok Xamarin koristi C# pri razvoju ovih aplikacija. Tako pisan kod se naknadno kompajlira u izvorni programski jezik (u zavisnosti od platforme), a rezultat je nešto što funkcioniše kao prava izvorna aplikacija.

reactnative

Ovaj način izrade mobilnih aplikacija nam omogućava da istovremeno (sa istim kodom) kreiramo aplikacije za iOS i Android. Koristeći ovaj pristup pravimo veliku uštedom u vremenu i troškovima proizvodnje uz minimalan gubitak perfomansi. Trenutno ReactNative, NativeScript i Xamarin, kažu da kroz svoje API-je imaju 100% podršku izvorne funkcionalnosti. Xamarin je u mogućnosti da pravi iOS, Android, Windows, MacOS i Linux, dok ReactNative i NativeScript su ograničeni samo na iOS i Android.

Poznato je da aplikacije pravljenje za istu namenu ipak na iOS i Android platformama izgledaju malo drugačije, jer svaka platforma prati sopstvene smernice. Ova činjenica je najveći problem kvazi izvornih aplikacija pošto se kod piše jednom a koristi za obe platforme. Postoji slučaj kada se elementi grafički podudaraju sa smernicama specifične platforme, ali se njihov položaj na ekranu ne podudara tj. položaj na ekranu je različit na različitim platformama.

Hibridne aplikacije

hibridne mobilne aplikacije

Radi se o web aplikacijama koje koriste klasične web tehnologije (HTML, JavaScript, i CSS) i “Cordova” kao wrapper koji im daje mogućnost za komunikaciju sa sistemskim komponentama i kompajlira ih u aplikacije dostupne kroz tzv. webView (ogoljeni browser).
Slično kao i kod kvazi izvornih aplikacija i ovde programski kod pišemo samo jednom, a ostale verzije (za svaku od željenih platformi) se generišu iz tog koda. Ovakve aplikacije se zovu “hibridne”, jer ipak nisu čisto nativne mobilne aplikacije, (sve prikazivanje vrši preko tzv. “WebView” umesto platforme korisničkog interfejsa), ali takodje nisu ni čisto Web-based (jer imaju pristup izvornim API-ima uređaja i pripremljene su za distribuciju na odgovarajućoj platformi).

Problem hibridnih aplikacija je što nemaju pristup svim sistemskim funkcijama a imaju slabije performanse od nativnih aplikacija. Ovaj problem je izražen kod starijih telefona (pogotovo na Android platformi pre verzije 4.0) kod kojih se sporo renderovuje korisnički interfejs a pri izvršavanju animaceije dolazi do seckanje. Iako je trenutno situacija bolja, uglavnom zbog značajne procesorske snage aktuelnih aparata, a delom zbog alata koje se koriste za razvoj i napretka u optimizaciji mobilnih operativnih sistema. Ne treba zanemariti da gradeći hibridne aplikacije mi automatski nasledjujemo sve probleme koje dolaze sa programiranjem na web-u (različita podržanost funkcionalnosti za različite browsere…). Više o ovome pročitajte u članku “Uvod u hibridne mobilne aplikacije”

Responsive web aplikacije

javascript

Web aplikacije se takodje mogu tretirti kao mobilne jer se izvršavaju na mobilnom uredjaju ali imaju najlošije perfomase i nemaju mnoge funkcionalnosti koje imaju aplikacije kreirane na jednom od prethodno pomenutih načina. Web aplikacije pružaju tzv. “application-like” iskustvo pri čemu se ne instaliraju lokalno već su dostupne izvršavajući aplikaciju u okviru browser-a na mobilnom uredjaju.

Progressive Web App

“Progressive Web App” se mogu smatrati naprednijom verzijom web aplikacija, jer koriste service workers koji rade u pozadini aplikacije i deluju kao posrednici između internet mreže i aplikacije, pa su u mogućnosti da presretnu mrežne zahteve u pozadini. Progresivne web aplikacije (PWA) se mogu izvršavati kada je uredjaj van mreže (koristeći service workers), i imaju izvesni hardverski pristup uređaju (npr. obaveštenja na uradjaju) koji su tradicionalno dostupni samo izvornim mobilnim aplikacijama. PWA su uvek “up-to-date” zahvaljujući “service worker update process”. PWA omogućavaju korisnicima da “sačuvaju” aplikacije koje smatraju najkorisnijim na svom početnom ekranu kreirajući prečicu bez korišćenja neke od prodavnica aplikacija (GooglePlay, App Store).


Uvod u 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

hibridne mobilne aplikacije

Da biste razvili “nativne mobilne aplikacije” na više različitih platformi, potrebno je da u timu imate softverske inženjere za svaki operativni sistem. Pored velike (čitaj “skupe”) zavisnosti od specifičnog kadra, treba naglasiti da je otežavajuća okolnost što ne možemo da iskoristimo i podelimo programski kod između različitih verzija iste aplikacije. Sve navedeno utiče da je cena i vreme razvoja nativnih aplikacija velika.

Rešenje za navedene probleme su takozvane “hibridne mobilne aplikacije”. Radi se o web aplikacijama pisanim sa klasičnim web tehnologijama (HTML, JavaScript, i CSS), čiji programski kod se kompajlira u aplikaciju koja se izvršava u webviw-u. Kod hibridnih mobilnih aplikacija programski kod pišemo samo jednom, a ostale verzije (za svaku od željenih platformi) se dobijaju kompajliranjem tog koda. Ovakve aplikacije se zovu “hibridne”, jer ipak nisu čisto nativne mobilne aplikacije, (sve prikazivanje vrši preko tzv. “WebView” umesto platforme korisničkog interfejsa), ali takodje nisu ni čisto Web-based (jer imaju pristup izvornim API-ima uređaja i pripremljene su za distribuciju na odgovarajućoj platformi).

Mane hibridnih aplikacija

Pisanje programskog koda samo jednom a da automatski dobijemo verzije za svaku od željenih platformi zvuči idealno, medjutim i hibridne aplikacije sa sobom nose određena ograničenja.
Najveći problem hibridnih aplikacija su njene performanse. Kod starijih telefona (pogotovo na Android platformi pre verzije 4.0) se javlja problem ne dovoljno brzog renderovanja korisničko interfejsa i seckanje efekata animacije ili tranzicije. Iako je trenutno situacija bolja, uglavnom zbog značajne procesorske snage aktuelnih aparata, a delom zbog alata koje se koriste za razvoj i napretka u optimizaciji mobilnih operativnih sistema. Ipak za neke funkcionalnosti (npr. widget na Android platformi) hibridne web aplikacije i dalje nemaju adekvatno rešenje. Ne treba zanemariti da gradeći hibridne aplikacije mi automatski nasledjujemo sve probleme koje dolaze sa programiranjem na web-u (različita podržanost funkcionalnosti za različite browsere…)

Tehnologije za razvoj hibridnih aplikacija

Kao i pri izradi standardnih web aplikacija za izradu hibridnih mobilnih aplikacija, se koriste frontend tehnologije: HTML, CSS, i JavaScript (najčešće se ne koristi plain JavaScript već neki od framework-a: Angular, React, Vue.js…). Medjutim pored pomenutog seta tehnologija je potrebno:

  1. Omogućiti pristup sistemskim funkcijama uredjaja (Cordova)
  2. Obezbediti alat za kompajliranje aplikacije u native kod željene platforme (Cordova)
  3. Stilizovati izgled i funkcionalnost korisničkog okruženja kao na originalnim platformama (IOS, Android) sa nekom od specijalizovanih UI biblioteka: Ionic, Framework7, OnsenUI, Quasar…

Cordova

Šta je Cordova a šta PhoneGap?

Kompanija “Nitobi” je 2009 kreirala Open Source projekat pod nazivmom “PhoneGap”. Medjutim 2011 Adobe kupuje firmu Nitobi. Pošto je PhoneGap u trenutku kupovine bio besplatan a njegov softver je već koristilo više proizvođača u svojim softverskim proizvodima (Oracle, IBM…), da bi zaštitili dugovečnost projekta PhoneGap, Nitobi je pre prodaje donirao PhoneGap “Apache Softvare” fondaciji. Pošto je sa kupovinom firme Nitobi Adobe kupio pravo i na ime “PhoneGap”, stoga je Apache fondacija generisala novo ime, pa naziv “Apache Cordova” predstavlja open source project a “PhoneGap” je Adobeova distribucija istog proizvoda. U medjuvremenu je Adobe dodao nove funkcionalnostima (uglavnom vezane za olakšavanje developmenta), kao što je PhoneGap Build Service, PhoneGap Developer App i Adobe PhoneGap Enterprise.

Namena Cordove

Apache Cordova sistem omogućuje dve stvari hibridnim mobilnim aplikacijama:

  • Funkcije za komunikaciju sa sistemskim komponentama direktno iz JavaScripta
  • Kompajliranje web aplikacije u native code

a) Pristup sistemskim funkcijama uređaja

Cordova vam obezbedjuje API za pristup sistemskim funkcijama uredjaja, tako da iz web aplikacije možemo da aktiviramo kameru, izbacimo notifikaciju, očitamo koordinate i dr. Ove funkcionalnosi se obezbedjuju instaliranjem odgovarajućeg Cordova plugina:

  • Battery Status
  • Camera
  • Console
  • Contacts
  • Device
  • Device Motion
  • Device Orientation
  • Dialogs
  • File
  • File Transfer
  • Geolocation
  • Globalization
  • InAppBrowser
  • Media
  • Media Capture
  • Network Information
  • Splashscreen
  • Vibration
  • Statusbar
  • Whitelist

b) Kompajliranje web aplikacije u native kod

Kompajliranje web aplikacije podrazumeva, generisanje aplikacije koja sadrži ogoljeni browser (tzv. webview) i web aplikaciju koja se izvršava u takvom browser-u. Takodje pored toga sadrži konfiguracione fajlove, manifest mobilnog operativnog sistema i dr. Tako generisana aplikacija je pripremljna za distribuciju kroz odgovarajuću mrežu (Google Play ili Apple store).

Izbor UI biblioteka za oponašanje native mobilnih aplikacija?

Jasno je da za izradu aplikacija (kod kojih se većina logike nalazi na klijentu) može da se koristi i samo plain JavaScript, medjutim progameri zbog bržeg i jednostavnijeg programiranja koriste frontend framework-e. U moru frontend frameworka trenutno se ističu: Angular, React i Vue.js. Ok, izabrali smo jedan od frameworka i sa njim ćemo odraditi svu “logiku” aplikacije na klijentu medjutim tu dolazi “teži” deo, jer svaki od operativnih sitema (IOS, Android, Windows, Blackberry…) ima svoj prepoznatljiv korisnički interfejs, pa je izrada interfejsa ogroman posao. Upravo tada na scenu stupaju UI biblioteke za oponašanje native mobilnih aplikacija.

Tabelarni pregled karakteristika biblioteka

U ovom delu ću napraviti pregled nekih ui bibloteka za mobilne aplikacije, a jedini uslov da se nadju na listi je da podržavaju oba operativna sistema i IOS i Andorid material dizaj.

Framework Datum kreiranja Trenutna verzija Wrapper type Matični framework Podržani framework Podržana platforma Podržana ver. platforme Broj komponenata Github stars Github contributors
Ionic 2 Januar 2017 3.9.2 Cordova Angular Angular Hybrid mobile app Android 4.1+, iOS 8+ 30+ 33207 254
Framework7 Feb. 2014 2.0.7 Cordova / Vue.js, React Hybrid mobile app Android ~4.1, iOS 7+ 55+ 11706 81
Quasar Oktobar 2015 0.14 Cordova Vue.js Vue.js PWA, Hybrid mobile, Electron apps Android ~4.1, iOS 7+ 60+ 5007 87
OnsenUI Januar 2010 3.9.2 Cordova / Angular, React, Vue.js Hybrid mobile app Android 4.4+, iOS 8+ 25 5984 87

Lični utisak

Ionic je najpopularniji i najozbiljniji sa najviše saradnika na projektu, ali podržava samo Angular. Quasar je bibloteka sa rastućnom popularnosti koji pored hibridnih aplikacija o istom trošku može da generiše (sa istim kodom) i PWA i desktop aplikacije (Windows, IOS). Ima ogroman broj komponenti ali i zamerke na dizajn koji ne liči dovoljno ni na IOS ni na Android. Takodje treba naglasiti da ga je moguće koristiti jedino u saradnji sa Vue.js framework-om. Framework7 podržava i React i Vue.js, prilično je popularan i ima verovatno najbolji dizajn (naručito za IOS). Pored toga ima pristojan broj komponenti, medjutim preferira lični način rutiranja i lični DOM management sistem. OnsenUi jedini podržava sva tri glavna frameworka podjednako, i ima odličan dizajn, ali je mana mali broj komponenti (npr. nema date-time picker).