Nativne, Web ili Hibridne ? - Mobile App Development- Kazalo Uvod Razumijevanje tipa aplikacija • Nativne aplikacije • Web i HTML5 • Hibridne aplikacije Stavljanje u poslovni.

Download Report

Transcript Nativne, Web ili Hibridne ? - Mobile App Development- Kazalo Uvod Razumijevanje tipa aplikacija • Nativne aplikacije • Web i HTML5 • Hibridne aplikacije Stavljanje u poslovni.

Nativne, Web ili Hibridne ?
- Mobile App Development-
Kazalo
Uvod
Razumijevanje tipa aplikacija
• Nativne aplikacije
• Web i HTML5
• Hibridne aplikacije
Stavljanje u poslovni kontekst
Q&A
2
Uvod
Nativne Aplikacije
10110110101101111
01101101101101101
10110110101101101
01101101101101101
10110110111010111
01111110110110110
10110100000110101
1
33
Web Aplikacije
<!DOCTYPE html PUBLIC
<html>
<! - - created 2003-12-12 - - >
<head><title>XYZ</title>
</head>
<body>
<p>
Voluptatem accusantium do
Totam rem aperiam eaque
</p>
</body>
</html>
Hibridne Aplikacije
<!DOCTYPE html
101101101PUBLIC
<html>
2003-12011011110<!12-- --created
>
110110110<head><title>XYZ</titl
e>
110110110</head>
<body>
110110101<p>
Voluptatem
101 </p>
</body>
</html>
Primjeri Nativnih mobilnih aplikacija
4
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
Razvoj Nativnih aplikacija
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable Package
App Stores
6
iOS – Razvoj Nativnih aplikacija
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
iOS
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Xcode
Distributable Package
.app
App Stores
7
Android – Razvoj Nativnih aplikacija
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Android SDK
Executable
(Binary)
Packager
Distributable Package
.apk
App Stores
8
BlackBerry – Razvoj Nativnih aplikacija
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable Package
.cod
App Stores
9
Windows Phone – Razvoj Nativnih aplikacija
Software Source
Code
Resources
(e.g. images)
(Sliverlight)
Application Source Code
C#, VB.NET, etc.
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable Package
.xap
App Stores
10
Pregled razvoja Nativnih aplikacija
Jezik
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone Dev
Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
Alati
Izvršne datoteke
Prodaja putem
Sličan pristup, drugačiji izvorni kod, i znanja rezultiraju
skupim razvojem i održavanjem.
11
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 sustava
•
•
Pokreču se s “Home” ekrana
Ne treba im “nositeljska aplikacija” za pokretanje
Eksplicitno koriste APIe od OS-a
12
Nativne Aplikacije – Iterakcija s uređajem
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
13
Touch Screen,
Keyboard
Storage
Nativne Aplikacije – “Osnovne” API funkcije
Skinute Aplik.
Osnovne
Apps
APIs
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
PushAPI
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File System
Network
Graphics
Camera
Multitasking
GUI Toolkit - aplikacije s “Nativnim” izgledom
Skinute Apl.
Ugrađene
Apps
APIs
API
Calls
GUI
Toolkit
15
Browser
API
Mobilne Web Aplikacije i Mobilno Surfanje
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering
Engine
(e.g., Webkit)
16
PushAPI
Browser
API
More…
Mobilno surfanje i Mobilne Web aplikacije
Google, Wikipedia:
17
2B: Web App
Dremel:
pokretanje preko
QR-Codes
YouTube: Web App
Mobilno Surfanje vs. Web Aplikacije
Mobilne Web Aplikacije
Mobilne Web Stranice
•
•
•
•
•
18
Visited by browsing
Static, navigational UI
Generic look & feel
Server-side rendering
Require connectivity
… siva zona …
•Installed and launched
•Interactive UI
•Touch optimized
•Client-side rendering
•Available offline
JavaScript Toolkits - Mobil. Web Aplikacije
SenchaTouch Example:
Crossword Puzzles for
iPad
19
jQuery Mobile:
Boston Event App
HTML5 i slične tehnologije
Statične stranice
Dinamične stranice Web Aplikacije
w3c.org
whatwg.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…
20
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 HTML5
21
Touch-optimiziran look & feel
•
Nema address bar-a
•
Offline dostupnost
Nativne Aplikacije – Iterakcija s uređajima
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Iterakcija s uređajima
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Pristup
uređaju
Brzina
Trošak
razvoja
App Store
Postupak
odobrenja
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Predstavljamo Hibridne Aplikacije
25
Pristup
uređaju
Brzina
Trošak
razvoja
App Store
Postupak
odobrenja
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
Karakteristike Hibridnih Aplikacija
Hibrid je nativna app, s pozivima HTML-a
Svi benefiti nativnih aplikacija: dostupnost svih APIa, appstore dostupnost, itd.
Djelovi aplikacije pozivaju se unutar integriranog web
preglednika
Jednostavno ažuriranje web dijela aplikacije
26
Hibridne Aplikacije – Iterakcija s uređajem
Mobile Operating
System
Hybrid App
Touch Events
Touch Screen,
Keyboard
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
HTML
API
calls
Audio
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
Web Portion
of App
Rendering Engine
27
27
Graphics
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
Storage
Hibridne aplikacije - primjeri
Facebook app
Lotte Card (Korea)
Morgan Stanley
28
Razvoj Hibridnih aplikacija
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable Package
App Stores
29
Serve
r
Usporedba razvoja aplikacija
30
Pristup
uređaju
Brzina
Trošak
razvoja
App Store
Postupak
odobrenja
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native Speed
as Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not Available
None
Što je najbolje za vas?
Nativne
• Mogućnost zarada
putem App Store-a
• Ciljanje na samo 1
platformu
Web
• Jednostavna
distribucija gomili
korisnika
Hybrid
• Mogućnost zarada
putem App Store-a
• Potrebne jednostavne
developerske vještine
• Pilot aplikacija
• Korištenje naprednih
funkcija uređaja
• Out-of-store vidljivost, • Hibridne aplikacije su
(grafika, video, audio,
kao i vidljivost preko
budućnost, najbolje
akcelometar, senzori,
tražilica
od oba svijeta :)
itd...)
• Bogat UI
31
Kako započeti i s čime?
http://www.adobe.com/devnet/flex/a
rticles/mobile-development-flexflashbuilder.html
32
Adobe Flash Builder
33
Adobe Flash Builder
http://refcardz.dzone.co
m/refcardz/flex-mobiledevelopment-build
34