Na planetu živi 6,8 milijardi ljudi, od kojih 5,1 milijarda posjeduje mobitel. I danas je sve veći postotak tih uređaja pametnih telefona. Prema nedavnom Studija Pew istraživačkog centra , broj korisnika koji pristupaju Internetu na svojim pametnim telefonima više se nego udvostručio u posljednjih 5 godina, kao i broj korisnika koji preuzimaju i koriste mobilne aplikacije . Od onih koji koriste Internet ili e-poštu na svojim telefonima, više od trećine ih je na mreži prvenstveno putem svojih ručnih uređaja.
Doista, mobilno računanje postaje sveprisutnije ... i to je sjajno.
Osim, naravno, kada nije.
Kao korisnik mobilnog uređaja, malo je stvari frustrirajuće i teško ih je nadoknaditi prstima kao loše dizajnirana mobilna web aplikacija ili čak nativna aplikacija.
I kao a programer mobilne aplikacije , malo stvari može biti toliko intenzivno iritantno kao nastojanje podržati što širi raspon mobilnih klijenata, od kojih svaki ima svoj frustrirajući niz idiosinkrazija. Bilo da se odlučite za razvoj mobilne mreže, izvorne ili hibridne aplikacije, potraga za podrškom više mobilnih preglednika, egzotičnijih uređaja i pristupanje raznim platformama zaista može biti prilično neukusno iskustvo.
Naravno, ne mora se svaki programer danas brinuti o podršci mobilnim klijentima. No, sveprisutnija priroda mobilnih uređaja i aplikacija snažno sugerira da će oni koji danas ne trebaju podržavati mobilne klijente to više vjerojatno učiniti u ne tako dalekoj budućnosti. Pa ako već ne razmišljate o tome razvoj mobilne aplikacije , vjerojatno biste trebali biti.
Kao što je istina s većinom odabira tehnologija, ne postoji jednoznačan odgovor kada je u pitanju vrsta mobilne aplikacije koju treba razviti. Postoje brojni najbolji primjeri iz prakse za web aplikacije, koji nisu svi tehnički. Tko je vaša ciljana publika? Jesu li vjerojatnije da više vole mobilni web ili izvornu aplikaciju? Koja je razlika između izvornih i hibridnih aplikacija? Koje razvojne resurse imate i koje su im mobilne tehnologije najpoznatije? Koji je model licenciranja i prodaje koji predviđate za svoj proizvod?
Općenito govoreći (iako uvijek postoje iznimke), ruta mobilne web-aplikacije brža je i jeftinija od izvorne rute mobilne aplikacije, posebno kada je cilj podržati širok raspon uređaja. Suprotno tome, možda postoje mogućnosti izvorne za mobilni uređaj (poput senzora pokreta i tako dalje) koje su ključne za vašu aplikaciju, ali kojima se može pristupiti samo putem izvorne aplikacije (što bi, prema tome, odabir mobilne web-aplikacije učinilo ne- starter za vas).
napredni tutorial za c ++
I pored pitanja starih web aplikacija i nativnih aplikacija, hibridna mobilna aplikacija može biti pravi odgovor za vas, ovisno o vašim zahtjevima i ograničenjima resursa. Hibridne aplikacije, poput izvornih aplikacija, izvode se na samom uređaju (za razliku od unutar preglednika), ali napisane su pomoću web tehnologija (HTML5, CSS i JavaScript) i obično su poduprte okvirom hibridnih aplikacija. Preciznije, hibridne aplikacije pokreću se unutar izvornog spremnika i koriste mehanizam preglednika uređaja (ali ne i preglednik) za generiranje HTML-a i lokalnu obradu JavaScript-a. Sloj apstrakcije s interneta na izvorni omogućuje pristup mogućnostima uređaja koje nisu dostupne u mobilnim web aplikacijama, kao što su akcelerometar, kamera i lokalna pohrana.
No bez obzira na odabir - bilo da se radi o mobilnoj web-aplikaciji, izvornoj ili hibridnoj aplikaciji, budite oprezni da na odgovarajući način istražite i potvrdite svoje pretpostavke. Kao primjer, u svrhe ovog vodiča za razvoj mobilne aplikacije, možda ste odlučili razviti izvornu mobilnu aplikaciju za e-trgovinu za prodaju svojih proizvoda. Ali, prema Hubspot , 73% korisnika pametnih telefona kaže da koriste mobilni web više od izvornih aplikacija za kupovinu ... Dakle, u ovom slučaju možda ste se kladili na pogrešnog konja.
No bez obzira na odabir - bilo da se radi o mobilnoj mreži, izvornoj ili hibridnoj aplikaciji - budite oprezni da na odgovarajući način istražite i potvrdite svoje pretpostavke.A tu su, naravno, i praktična razmatranja vremena i proračuna. Kao što kaže jedna od mojih najdražih izreka, 'Brže, bolje, jeftinije ... odaberite bilo koje dvije' . Iako su ograničenja vremena za stavljanje na tržište i troškova od presudne važnosti u razvoju web aplikacija, presudno je ne prekomjerno kompromitirati kvalitetu u procesu. Prilično je teško vratiti povjerenje korisnika koji je imao loše prvo iskustvo.
Doista, mobilne web, izvorne i hibridne aplikacije radikalno su različite zvijeri, svaka sa svojim jedinstvenim nizom prednosti i izazova. Ovaj vodič za mobilni web razvoj posebno se fokusira na metodologije i alate koje treba upotrijebiti te zamke koje treba izbjegavati u razvoju visoko funkcionalnih, intuitivnih i jednostavnih mobilnih web aplikacija.
Prepoznavanje vaših zahtjeva (ili zahtjeva vašeg kupca) jedan je od najvažnijih najboljih primjera iz prakse u razvoju aplikacija, za mobilne uređaje ili na neki drugi način. Pažljivo istražite ciljane mogućnosti kako biste utvrdili jesu li ostvarive u vašoj mobilnoj web aplikaciji. Prilično je frustrirajuće i krajnje je neproduktivno shvatiti da jedna ili više vaših osnovnih funkcija klijenta nisu podržane kad ste već uložili vrijeme i resurse za dizajn web sučelja i prateće infrastrukture.
Još jedna uobičajena poteškoća za početnike razvojnih mobilnih aplikacija je pretpostavka da će internetski kôd za preglednik na stolnom računalu raditi 'onakav kakav je' u mobilnom pregledniku. Ne. Tamo definitivno jesu razlike i, ako ih niste svjesni, oni vas definitivno mogu ugristi. Na primjer, funkcija automatske reprodukcije HTML5tag ne radi na mobilnim preglednicima. Slično tome, CSS transition
i opacity
svojstva danas nisu podržana (ili barem nisu dosljedno) u većini mobilnih preglednika. Također ćete imati problema s nekim metodama web API-ja na mobilnoj platformi, poput API-ja za streaming glazbe SoundCloud koji zahtijeva Adobe Flash koji nije podržan na većini mobilnih uređaja.
Naročito komplicirajući čimbenik u razvoju mobilnih web aplikacija jest da je životni vijek mobilnih uređaja obično puno kraći od životnog zaslona (prosječni životni vijek mobitela u SAD-u je oko 21 mjesec). Ovi kraći životni vijekovi uređaja, popraćeni stalnim izdanjima novih mobilnih uređaja i tehnologija, daju neprestano mijenjajući se izgled ciljanih uređaja. Iako rad u pregledniku donekle ublažava ovaj problem štiteći vas od brojnih problema specifičnih za uređaj, i dalje ćete trebati dizajnirati prikaz zasnovan na pregledniku koji podržava mnogo različitih rezolucija zaslona (kao i odgovarajuće prilagođavanje pejzažnoj i portretnoj orijentaciji ).
Treba razmisliti i o podršci Appleovim mrežnim zaslonima (zasloni s tekućim kristalima koji imaju gustoću piksela dovoljno visoku da ljudsko oko ne može razabrati pojedinačne piksele na tipičnoj udaljenosti gledanja). Nekoliko Appleovih proizvoda - uključujući iPhone, iPod Touch, iPad, MacBook Pro, iPad Mini i iPad Air - nude Retina zaslone. Posebno za mobilnu web-aplikaciju, važno je imati na umu da Retina zaslon čini da slike niske rezolucije (koje se obično poslužuju na mobilnim uređajima) izgledaju mutno i pikselizacija može se dogoditi. Najbolje rješenje za razvoj aplikacija u tim slučajevima je da poslužitelj prepozna da zahtjev dolazi s Retina uređaja i da klijentu zatim pruži zamjensku sliku veće rezolucije.
Ako želite koristiti neke od sjajnih HTML5 stvari, ne zaboravite unaprijed provjeriti podržava li funkcionalnost koju tražite u cijelom okruženju uređaja koju će vaši kupci vjerojatno koristiti. Na primjer, u iOS 6 i novijim verzijama nema podrške za navigator getUserMedia
funkcionalnost jer je kameri dostupan samo putem izvornih aplikacija. Dva su izvrsna resursa za provjeru podržanih na određenim uređajima i preglednicima caniuse.com i html5test.com .
CSS3 medijski upiti također vam mogu pomoći u pružanju prilagođenog sadržaja za svaki uređaj. Evo nekoliko primjera koda za bilježenje različitih karakteristika uređaja, poput gustoće piksela, razlučivosti zaslona i orijentacije:
/* For lower than 700px resolutions */ @media (max-width: 700px) { ... } /* Same as last but with the device orientation on land scape */ @media (max-width: 700px) and (orientation: landscape) { ... } /* Including width and orientation you can add a media type clause, in this case 'tv' */ @media tv and (min-width: 700px) and (orientation: landscape) { ... } /* for low resolution display with background-image */ .image { background-image: url(/path/to/my/image.png); background-size: 200px 300px; height: 300px; width: 200px; } /* for high resolution (Retina) display with background-image */ @media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { -repeat; background-size: 200px 400px; /* rest of your styles... */ } }
'OMG, ovo je jakooooo sporo!' Kao programeru web-aplikacija za mobilne uređaje, to su vjerojatno posljednje riječi koje ikada želite čuti od jednog od svojih korisnika. Stoga morate dobro razmisliti kako smanjiti i optimizirati svaki bajt i prijenos poslužitelja kako biste smanjili vrijeme čekanja korisnika. Nerealno je očekivati da će se prijenosi uvijek obavljati putem WiFi mreže, a to biste trebali znati 60% korisnika mobilnog weba kažu da očekuju da će se stranica učitati na njihovom mobilnom telefonu za 3 sekunde ili manje (izvor). Slično tome, Google je otkrio da je, za svakih dodatnih pet sekundi vremena učitavanja, promet opao za 20% (a također je vrijedno napomenuti da tražilice vrijeme učitavanja gledaju kao dio svog izračuna rezultata ocjene kvalitete stranice).
60% korisnika mobilnog weba kaže da očekuje da će se stranica učitati na njihov mobilni telefon za 3 sekunde ili manje.Kao dio ovog vodiča za razvoj mobilnih web aplikacija, evo nekoliko savjeta koji vam mogu pomoći u optimizaciji izvedbe vaših mobilnih web aplikacija i smanjenju kašnjenja:
'Pravi alati za pravi posao' je prastara poslovica koja se primjenjuje na razvoj softvera koliko i na bilo koju drugu domenu. Ovaj tutorial pruža i uvod u neke od popularnijih i široko korištenih alata za razvoj web aplikacija za mobilne uređaje, ali imajte na umu da mogu postojati i drugi alati koji su „pravi“ za razvoj vaše mobilne web aplikacije, ovisno o tome vaše zahtjeve i dostupne resurse.
Kako razvoj web aplikacija za mobilne uređaje stvara brojne iste zajedničke izazove - poput kompatibilnosti s različitim preglednicima i nedosljednih HTML-a i CSS-a u mobilnim preglednicima, razvijeni su okviri (temeljeni na HTML5 i CSS3) koji su posebno dizajnirani za rješavanje ovih problema i da rade što besprijekornije na širokom spektru pametnih telefona i tableta. Većina ovih okvira mobilnih web aplikacija lagana je, što pomaže brzom pregledavanju mobilnih web stranica bez ugrožavanja izgleda i stila vaše web stranice.
Šireći naš pogled izvan mobilnog krajolika, ako postoji jedan popularan JavaScript okvir vrijedan spomena, jest jQuery . Ako ste upoznati s verzijom za radnu površinu, preporučujem pokušaj jQuery Mobile za vašu mobilnu web-aplikaciju. Ima biblioteku dodataka koja pretvara semantičke oznake u format pogodan za pokrete, čineći radnje jednostavnim na dodirnim zaslonima. Najnovija verzija sastoji se od doista lagane baze koda koja sadrži puno grafičkih elemenata koji stvarno mogu poboljšati vaše korisničko sučelje.
Druga alternativa, Sencha Touch , također brzo stječe tržišni udio. Nudi izvrsne performanse u cjelini i pomaže u stvaranju mobilnog web korisničkog sučelja koje uglavnom izgleda i osjeća se kao izvorno. Njegova biblioteka widgeta s punim značajkama temelji se na Senchinoj ExtJS JavaScript knjižnica.
Evo nekoliko ključnih razlika koje treba uzeti u obzir prilikom usporedbe jQuery Mobile i Sencha Touch:
Sve veći broj responzivnih okvira počeo se pojavljivati posljednjih godina, a dva su trenutno najpopularnija Bootstrap i Temelj . Ukratko, responzivni okviri pojednostavljuju i pojednostavljuju internetski dizajn responzivnog korisničkog sučelja i implementacija, obuhvaćajući najčešće rasporede i paradigme korisničkog sučelja u okvir za ponovnu upotrebu, optimiziran za izvedbu. Uglavnom se temelje na CSS-u i JavaScript-u, mnogi od tih okvira su otvorenog koda, besplatni za preuzimanje i lako prilagodljivi. Ako nemate vrlo neobičan skup zahtjeva, vjerojatno će upotreba jednog od ovih okvira smanjiti razinu napora u dizajniranju i implementaciji vaše mobilne web aplikacije.
Ispitujući dvije vodeće opcije, Bootstrap i Foundation, nekoliko ključnih razlika koje treba uzeti u obzir uključuju:
Otklanjanje pogrešaka u mobilnim web aplikacijama može biti nezgodno i donekle frustrirajuće, posebno ako trebate potražiti različite uređaje na kojima se mogu testirati ili instalirati SDK-ove za (obično nesavršenu) emulaciju ciljanih klijentskih platformi.
U tom kontekstu, jedna jasna prednost razvoja web-stranica za mobilne uređaje (u usporedbi s razvojem izvornih aplikacija) je ta što za uklanjanje pogrešaka u svojoj aplikaciji možete koristiti standardne alate za programere temeljene na pregledniku. Na temelju moje osobne preferencije za uklanjanje pogrešaka na daljinu, onaj koji preporučujem u ovom vodiču za razvoj aplikacija je Chrome sa svojim DevTools. Ostale standardne opcije uključuju Firefox s Firebug ili Opera Dragonfly alatima.
Neki od razloga koje više volim Chrome sa svojim DevTools uključuju:
Da biste testirali izgled i kompatibilnost internetskog pregledavanja vaše web aplikacije, možete upotrijebiti i neke korisne mrežne alate, poput BrowserStack . Samo unesite URL za svoju aplikaciju, odaberite preglednik, verziju i operativni sustav i dobit ćete emulirani prikaz (i brzinu učitavanja) vaše web lokacije u tom okruženju. Još jedan koristan alat u ove svrhe je CrossBrowserTesting .
koji se programski jezik koristi za robotiku
S kontinuiranim brzim širenjem broja, raznolikosti i sofisticiranosti mobilnih uređaja na tržištu i danas u upotrebi, vjerovatno će se znatno povećati potreba za učinkovitim, user-friendly, mobilnim aplikacijama visokih performansi. Sposobnost inteligentnog i efikasnog razvoja ovih aplikacija i dalje će biti od iznimne važnosti.
Pri odabiru između web, izvornih i hibridnih opcija mobilne aplikacije za mobilne uređaje moraju se uzeti u obzir mnogi čimbenici. Svaka od njih ima svoje prednosti, ali mobilne web-aplikacije često će predstavljati vašu najučinkovitiju razvojnu (a time i vremensku dostupnost) opciju. Ako odlučite krenuti tim putem, nadam se da će vam ovaj vodič za razvoj mobilne aplikacije pomoći da vas izravnije i uspješnije odvedemo do odredišta.
Povezano: Učinite svoju aplikaciju profitabilnom - iskoristite mobilnu analitikuMobilne web aplikacije web su aplikacije optimizirane za dobro telefonsko iskustvo. Oni nisu mobilne aplikacije, već web stranice napisane u HTML / CSS-u i koje pokreće preglednik. Iako su možda dizajnirani da nalikuju osjećaju aplikacija za pametne telefone, nemaju puno zajedničkog.
Izvorna aplikacija je aplikacija napisana za određenu platformu, koristeći API-je specifične za platformu.
Hibridna aplikacija je aplikacija napisana korištenjem web tehnologija i umotana u tanki izvorni web-preglednik. Hibridna aplikacija može se brzo prenijeti na razne platforme na kojima dijele istu osnovnu kodnu bazu.
Izvorne aplikacije napisane su na jezicima specifičnim za platformu pomoću API-ja za platformu, poput Java ili Kotlin za Android i Objective C ili Swift za iOS. Hibridne aplikacije napisane su pomoću web tehnologija poput HTML5 / CSS i Javascripta
Mobilna web aplikacija je web stranica optimizirana za upotrebu na mobitelu. Ako je dobro izvedeno, iskustvo je nevjerojatno poput izvorne ili hibridne aplikacije. Kao primjer pogledajte https://paperplanes.world/.
Hibridne aplikacije obično su pogrešne i sporije od izvornih aplikacija, jer izvorne aplikacije ne prolaze kroz obruče i slojeve spremnika da bi radile. Izvorne aplikacije puno su učinkovitije. React Native je ipak uspio promijeniti igru.