mobile development
DESCRIPTION
Kod mnogih tvrtki, priča počinje s iPhone aplikacijom. Obično su čuli da neka od konkurentskih tvrtki nudi to isto. Primijetite da ovdje nije riječ o želji za mobilnom nego upravo o iPhone aplikaciji potpuno zanemarujući ostale mobilne platforme, poput rastućeg Androida Koje su razlike u samim mobilnim platforma, sto je potrebn za razvoj, pogledajte u ovoj prezentacijiTRANSCRIPT
![Page 1: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/1.jpg)
Nativne, Web ili Hibridne ? - Mobile App Development-
![Page 2: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/2.jpg)
2
Kazalo
Uvod
Razumijevanje tipa aplikacija
• Nativne aplikacije
• Web i HTML5
• Hibridne aplikacije
Stavljanje u poslovni kontekst
Q&A
2
![Page 3: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/3.jpg)
3
Uvod
3
Nativne AplikacijeNativne Aplikacije Web AplikacijeWeb Aplikacije Hibridne AplikacijeHibridne Aplikacije
1011011010110111110110110101101111011011011011011010110110110110110110110110101101101101101101011011010110110110110110101101101101101101101101101110101111011011011101011101111110110110110011111101101101101011010000011010110110100000110101
11
1011011010110111110110110101101111011011011011011010110110110110110110110110101101101101101101011011010110110110110110101101101101101101101101101110101111011011011101011101111110110110110011111101101101101011010000011010110110100000110101
11
<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<html><html><! - - created 2003-12-12 - - ><! - - created 2003-12-12 - - ><head><title>XYZ</title><head><title>XYZ</title></head></head><body><body><p><p>Voluptatem accusantium doVoluptatem accusantium doTotam rem aperiam eaqueTotam rem aperiam eaque</p></p></body></body></html></html>
<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<html><html><! - - created 2003-12-12 - - ><! - - created 2003-12-12 - - ><head><title>XYZ</title><head><title>XYZ</title></head></head><body><body><p><p>Voluptatem accusantium doVoluptatem accusantium doTotam rem aperiam eaqueTotam rem aperiam eaque</p></p></body></body></html></html>
101101101101101101011011110011011110110110110110110110110110110110110110110110101110110101
101101
<!DOCTYPE html <!DOCTYPE html PUBLICPUBLIC<html><html><! - - created 2003-12-<! - - created 2003-12-12 - - >12 - - ><head><title>XYZ</titl<head><title>XYZ</title>e></head></head><body><body><p><p>VoluptatemVoluptatem</p></p></body></body></html></html>
![Page 4: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/4.jpg)
4
Primjeri Nativnih mobilnih aplikacija
4
![Page 5: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/5.jpg)
5
Karakteristike Nativnih mobilnih aplikacija
izvršavaju se iz izvršne datoteke koja je spremljena lokalno na klijentskom uređaju.
Distribuiraju se kroz popularne trgovine. AppStore ili Android Market.
Izvršavaju se na razini operativnog sustava• Pokreču se s “Home” ekrana• Ne treba im “nositeljska aplikacija” za pokretanje
Eksplicitno koriste APIe od OS-a
5
![Page 6: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/6.jpg)
6
Razvoj Nativnih aplikacija
6
SDK Tools
Application Source Code
Resources(e.g. images)
Software Source Code
Compiler, LinkerExecutable
(Binary)Packager
Distributable Package
App Stores
![Page 7: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/7.jpg)
7
iOS – Razvoj Nativnih aplikacija
7
SDK Tools
Application Source Code
Resources(e.g. images)
Software Source Code
Executable(Binary)
Packager
Distributable Package
App Stores
XcodeXcode
Objective-C, C++, C
.app
Compiler, Linker
iOSiOS
![Page 8: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/8.jpg)
8
Android – Razvoj Nativnih aplikacija
8
SDK Tools
Application Source Code
Resources(e.g. images)
Software Source Code
Executable(Binary)
Packager
Distributable Package
App Stores
Java(some C, C++)
.apkAndroid SDKAndroid SDK
Compiler, Linker
![Page 9: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/9.jpg)
9
BlackBerry – Razvoj Nativnih aplikacija
9
SDK Tools
Application Source Code
Resources(e.g. images)
Software Source Code
Executable(Binary)
Packager
Distributable Package
App Stores
BlackBerry Java Plug-in for Eclipse
BlackBerry Java Plug-in for Eclipse
Java
.cod
Compiler, Linker
![Page 10: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/10.jpg)
10
Windows Phone – Razvoj Nativnih aplikacija
10
SDK Tools
Application Source Code
Resources(e.g. images)
Software Source Code
Executable(Binary)
Packager
Distributable Package
App Stores
Visual Studio, Windows Phone Developer Tools
Visual Studio, Windows Phone Developer Tools
C#, VB.NET, etc.
.xap
Compiler, Linker
(Sliverlight)
![Page 11: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/11.jpg)
11
Pregled razvoja Nativnih aplikacija
11
Jezik Obj-C, C, C++Java
(Some C, C++)Java C#, VB.NET, etc
Alati Xcode Android SDKBB Java Eclipse
Plug-In
Visual Studio, Windows Phone Dev
Tools
Izvršne datoteke .app .apk .cod .xap
Prodaja putem Apple iTunes Android MarketBlackBerry App
WorldWindows Phone
Market
Sličan pristup, drugačiji izvorni kod, i znanja rezultiraju skupim razvojem i održavanjem.
![Page 12: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/12.jpg)
12
Karakteristike Nativnih mobilnih aplikacija
Binarni “izvršni dokument”, koji je skinut i pohranjen na mobilni uređaj
Distribuiran kroz Online trgovine (AppStore, Android Market), ili kroz poslovne kanale (za poslovne korisnike)
Izvršavaju se na razini operativnog sustavaPokreču se s “Home” ekrana
Ne treba im “nositeljska aplikacija” za pokretanje
Eksplicitno koriste APIe od OS-a
12
![Page 13: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/13.jpg)
13
Nativne Aplikacije – Iterakcija s uređajem
13
Touch Screen,Keyboard
Graphics
Touch Events
GPSLocation
MicrophoneAudio
Speaker
GSM NetworkCalls, Data
VibrationActivation
Accelerometer, CompassOrientation
Camera
WiFiData
Images, Video
Storage
Mobile Operating System
Data
Native App
OS-Specif ic A
PIs
Wide Range of Services
Audio
API Calls
![Page 14: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/14.jpg)
14
Nativne Aplikacije – “Osnovne” API funkcije
14
File System Network Graphics CameraLow-Level
APIsMulti-tasking
More
High-Level APIs
GUI Toolkit
Calendar API
PushAPIContacts, Email API
Browser API
More
Audio
Osnovne
Skinute Aplik.
Apps
APIsAPI
Calls
API Calls
API Calls
![Page 15: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/15.jpg)
15
GUI Toolkit - aplikacije s “Nativnim” izgledom
15
GUI Toolkit
Apps
APIs
Browser API
API Calls
Ugrađene
Skinute Apl.
![Page 16: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/16.jpg)
16
Mobilne Web Aplikacije i Mobilno Surfanje
16
High-Level APIs
GUI Toolkit
Calendar API
PushAPIContacts, Email API
Browser API
More…
Apps
APIs
Rendering Engine
(e.g., Webkit)
Built-in AppsDownloaded Apps
API Calls
API C
alls
![Page 17: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/17.jpg)
17
Mobilno surfanje i Mobilne Web aplikacije
17
Google, Wikipedia:Dremel:
pokretanje preko QR-Codes
2B: Web App
YouTube: Web App
![Page 18: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/18.jpg)
18
Mobilno Surfanje vs. Web Aplikacije
18
Mobilne Web Stranice
• Visited by browsing• Static, navigational UI• Generic look & feel• Server-side rendering• Require connectivity
Mobilne Web Aplikacije
•Installed and launched•Interactive UI•Touch optimized•Client-side rendering•Available offline
… … siva zona …siva zona …
![Page 19: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/19.jpg)
19
JavaScript Toolkits - Mobil. Web Aplikacije
19
SenchaTouch Example: Crossword Puzzles for
iPad
jQuery Mobile:Boston Event App
![Page 20: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/20.jpg)
20
HTML5 i slične tehnologije
20
Statične stranice Dinamične stranice Web Aplikacije
w3c.orgwhatwg.org
•Glavna HTML5/CSS3 obilježija na mobitelu
•Bitmap i vektorska grafika, s animacijama
•Offline podrška
•Geolokacija
•Video i Audio
•Komunikacija sa serverom
•Više…
![Page 21: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/21.jpg)
21
Karakteristike Mobilnih Web Aplikacija
Napisane u web tehnologijama• HTML, CSS i JavaScript
Kod se izvršava unutar browsera, ne iz OS-a
Nekoliko metoda za pokretanje• unošenjem URL, klikanjem na hyperlink, skeniranjem QR Code-a ili klikanjem na
home-screen prečicu
Instalacija nije potrebna
Cross-platform developmont HTML5Touch-optimiziran look & feel
• Nema address bar-a• Offline dostupnost
21
![Page 22: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/22.jpg)
22
Nativne Aplikacije – Iterakcija s uređajimaTouch Screen,
KeyboardGraphics
Touch Events
GPSLocation
MicrophoneAudio
Speaker
GSM NetworkCalls, Data
VibrationActivation
Accelerometer, CompassOrientation
Camera
WiFiData
Images, Video
Storage
Mobile Operating System
Data
Native App
OS-Specif ic A
PIs
Wide Range of Services
Audio
API Calls
22
![Page 23: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/23.jpg)
23
Web App – Iterakcija s uređajimaBrowser
Touch Screen,Keyboard
GPS
Microphone
Speaker
GSM Network
Vibration
Accelerometer, Compass
Camera
WiFi
Storage
Mobile Operating System
OS-Specif ic A
PIs
Wide Range of Services
WebApp
(HTML, CSS, JS)
W3C Calls
Rendering Engine
API Calls
Graphics
Touch Events
Location
Audio
Calls, Data
Activation
Orientation
Data
Images, Video
Data
Audio
23
![Page 24: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/24.jpg)
24
Native vs. Web
24
Native
Pristupuređaju
Brzina App StoreTrošakrazvoja
Postupakodobrenja
Full Very Fast AvailableExpensive Mandatory
Partial Fast NotReasonable NoneWeb
![Page 25: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/25.jpg)
25
Hybrid
Predstavljamo Hibridne Aplikacije
25
Native Full Very Fast Available Mandatory
Partial Fast Not None
Expensive
Reasonable
Partial Fast NotReasonable NoneWeb
Pristupuređaju
Brzina App StoreTrošakrazvoja
Postupakodobrenja
![Page 26: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/26.jpg)
26
Karakteristike Hibridnih Aplikacija
Hibrid je nativna app, s pozivima HTML-a
Svi benefiti nativnih aplikacija: dostupnost svih APIa, app-store dostupnost, itd.
Djelovi aplikacije pozivaju se unutar integriranog web preglednika
Jednostavno ažuriranje web dijela aplikacije
26
![Page 27: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/27.jpg)
27
Hibridne Aplikacije – Iterakcija s uređajem
27
Hybrid App
Web Portionof App
Native Portion of App
Touch Screen,Keyboard
Graphics
Touch Events
GPSLocation
MicrophoneAudio
Speaker
GSM NetworkCalls, Data
VibrationActivation
Accelerometer, CompassOrientation
Camera
WiFiData
Images, Video
StorageData
Audio
Web Portionof App
HTML, CSS, JS
HTML API calls
Rendering Engine
API
Mobile Operating System
OS-Specif ic A
PIs
Wide Range of Services
API Calls
API Calls
PhoneGapPhoneGap
API Calls
API Calls
![Page 28: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/28.jpg)
28
Hibridne aplikacije - primjeri
28
Morgan Stanley
Lotte Card (Korea)
Facebook app
![Page 29: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/29.jpg)
29
Razvoj Hibridnih aplikacija
29
SDK Tools
Application Source CodeResources
(e.g. images)Software Source
Code
Compiler, LinkerExecutable
(Binary)Packager
Distributable Package
App Stores
Native SourcesNative Sources HTML SourcesHTML Sources
Server
![Page 30: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/30.jpg)
30
FullNative Speed as Necessary
Reasonable AvailableLow
OverheadHybrid
Usporedba razvoja aplikacija
30
Native Full Very Fast Available MandatoryExpensive
Partial FastNot
AvailableReasonable NoneWeb
Pristupuređaju
Brzina App StoreTrošakrazvoja
Postupakodobrenja
![Page 31: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/31.jpg)
31
Što je najbolje za vas?
31
• Mogućnost zarada putem App Store-a
• Ciljanje na samo 1 platformu
• Korištenje naprednih funkcija uređaja (grafika, video, audio, akcelometar, senzori, itd...)
• Bogat UI
Nativne
• Jednostavna distribucija gomili korisnika
• Pilot aplikacija
• Out-of-store vidljivost, kao i vidljivost preko tražilica
Web
• Mogućnost zarada putem App Store-a
• Potrebne jednostavne developerske vještine
• Hibridne aplikacije su budućnost, najbolje od oba svijeta :)
Hybrid
![Page 32: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/32.jpg)
32
Kako započeti i s čime?
32
http://www.adobe.com/devnet/flex/articles/mobile-development-flex-flashbuilder.html
![Page 33: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/33.jpg)
33
Adobe Flash Builder
33
![Page 34: Mobile development](https://reader031.vdocuments.mx/reader031/viewer/2022020218/559595061a28abf2798b46d0/html5/thumbnails/34.jpg)
34
Adobe Flash Builder
34
http://refcardz.dzone.com/refcardz/flex-mobile-development-build