Mobile development

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
Nativne Aplikacije Web Aplikacije
Web Aplikacije Hibridne Aplikacije
Hibridne Aplikacije

10110110101101111
10110110101101111 <!DOCTYPE html PUBLIC <!DOCTYPE html
<!DOCTYPE html PUBLIC PUBLICPUBLIC
01101101101101101
01101101101101101
<html>
<!<html>
- - created 2003-12-12 - - >
101101101<html>
<! - - created 2003-12-
10110110101101101
10110110101101101
<head><title>XYZ</title> - - >
<! - - created 2003-12-12
<head><title>XYZ</title>
01101111012 - - >
</head>
01101101101101101
01101101101101101
</head>
<body> 110110110<head><title>XYZ</titl
e>
<body>
10110110111010111
10110110111010111


Voluptatem accusantium do 110110110</head>
<body>

01111110110110110 Totam rem aperiam eaque do
Voluptatem accusantium
110110101
01111110110110110 Totam rem aperiam eaque

Voluptatem

10110100000110101
10110100000110101

</body>
</body>
101 
</body>
</html> </html>
11 </html>

3
3

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 Resources
Code (e.g. images)
Application Source Code

SDK Tools
Executable
Compiler, Linker Packager
(Binary)

Distributable Package

App Stores

6

iOS – Razvoj Nativnih aplikacija

Code (e.g. images)
Objective-C, Application Source Code
C++, C iOS
SDK Tools
Executable
(Binary)

Xcode
Xcode
.app

App Stores

7

Android – Razvoj Nativnih aplikacija

Code (e.g. images)
Java Application Source Code
(some C, C++)

SDK Tools
Executable
(Binary)

Android SDK
Android SDK
.apk

App Stores

8

BlackBerry – Razvoj Nativnih aplikacija

Code (e.g. images)
Java Application Source Code

SDK Tools
Executable
(Binary)

BlackBerry Java
BlackBerry Java
Plug-in for Eclipse
Plug-in for Eclipse Distributable Package
.cod

App Stores

9

Windows Phone – Razvoj Nativnih aplikacija

Code (e.g. images)
C#, VB.NET, etc. Application Source Code (Sliverlight)

SDK Tools
Executable
(Binary)

Visual Studio,
Visual Studio,
Windows Phone
Windows Phone Distributable Package
Developer Tools
Developer Tools
.xap

App Stores

10

Pregled razvoja Nativnih aplikacija

Java
Jezik Obj-C, C, C++ Java C#, VB.NET, etc
(Some C, C++)

Visual Studio,
BB Java Eclipse
Alati Xcode Android SDK Windows Phone Dev
Plug-In
Tools

Izvršne datoteke .app .apk .cod .xap

BlackBerry App Windows Phone
Prodaja putem Apple iTunes Android Market
World Market

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
Graphics Touch Screen,
Mobile Operating Keyboard
System Touch Events

WiFi
Data

Calls, Data GSM Network

Microphone
Audio
OS-Specific APIs
Audio Speaker

Native API Calls Wide Range of
Images, Video Camera
App Services

Activation Vibration

Accelerometer,
Orientation Compass

Location GPS

Data Storage

13
13

Nativne Aplikacije – “Osnovne” API funkcije
Skinute Aplik.

Osnovne

API Apps
Calls
APIs
API High-Level GUI Calendar Contacts, Browser
Calls PushAPI More
APIs Toolkit API Email API API

API
Calls

Low-Level Multi-
File System Network Graphics Camera Audio More
APIs tasking

14

GUI Toolkit - aplikacije s “Nativnim” izgledom

Skinute Apl.

Ugrađene

API Apps
Calls
APIs
GUI
Toolkit Browser
API

15

Mobilne Web Aplikacije i Mobilno Surfanje

Downloaded Apps
Built-in Apps
AP

API Calls
I Ca
lls Apps
APIs
High-Level GUI Calendar Contacts, Browser
PushAPI More…
APIs Toolkit API Email API API

Rendering
Engine
(e.g., Webkit)

16

Mobilno surfanje i Mobilne Web aplikacije

Google, Wikipedia: 2B: Web App
Dremel:
pokretanje preko
QR-Codes YouTube: Web App

17

Mobilno Surfanje vs. Web Aplikacije

Mobilne Web Stranice Mobilne Web Aplikacije
• Visited by browsing •Installed and launched
• Static, navigational UI •Interactive UI
• Generic look & feel … siva zona … •Touch optimized
• Server-side rendering •Client-side rendering
• Require connectivity •Available offline
18

JavaScript Toolkits - Mobil. Web Aplikacije

SenchaTouch Example: jQuery Mobile:
Crossword Puzzles for Boston Event App
iPad

19

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
Touch-optimiziran look & feel
21 • Nema address bar-a

Nativne Aplikacije – Iterakcija s uređajima
Mobile Operating Keyboard
System Touch Events

WiFi
Data


Microphone
Audio
OS-Specific APIs
Audio Speaker

Native API Calls Wide Range of
App Services


Accelerometer,
Orientation Compass

Location GPS

Data Storage

22

Web App – Iterakcija s uređajima
Browser Mobile Operating Keyboard
System Touch Events

WiFi
Data
Web
App Calls, Data GSM Network

(HTML, CSS, JS) Microphone
Audio
OS-Specific APIs
Audio Speaker

Wide Range of
W3C Services
Calls

Accelerometer,
Orientation Compass
Rendering API Calls
Location GPS
Engine
Data Storage

23

Native vs. Web
Pristup Trošak Postupak
Brzina App Store
uređaju razvoja odobrenja

Native Full Very Fast Expensive Available Mandatory

Web Partial Fast Reasonable Not None

24

Predstavljamo Hibridne Aplikacije
Brzina App Store


Hybrid Partial Fast Reasonable Not None

Web Partial Fast Reasonable Not None

25

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

Hibridne Aplikacije – Iterakcija s uređajem
Hybrid App Mobile Operating Keyboard
System Touch Events
Web Portion WiFi
Data
of App

HTML, CSS, JS
Microphone
HTML Audio
API
calls OS-Specific APIs Audio Speaker

Wide Range of
Rendering Engine API Calls Services


API PhoneGap
PhoneGap Accelerometer,
Orientation Compass

Native Portion Location GPS
API Calls
of App
Data Storage

27
27

Hibridne aplikacije - primjeri

Facebook app

Lotte Card (Korea)
Morgan Stanley
28

Razvoj Hibridnih aplikacija

Serve
Native Sources
Native Sources HTML Sources
HTML Sources

Software Source
Code
Application Source Code
Resources
(e.g. images)
r
SDK Tools
Executable
(Binary)


App Stores

29

Usporedba razvoja aplikacija
Brzina App Store


Native Speed Low
Hybrid Full
as Necessary
Reasonable Available
Overhead

Not
Web Partial Fast Reasonable
Available
None

30

Što je najbolje za vas?
Nativne Web Hybrid
• Mogućnost zarada
putem App Store-a
• Jednostavna • Mogućnost zarada
distribucija gomili putem App Store-a
• Ciljanje na samo 1
korisnika
platformu
• Potrebne jednostavne
• Pilot aplikacija developerske vještine
• 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/arti

32

Adobe Flash Builder
http://refcardz.dzone.co

34

Mobile development

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (11)

More from Kruno Ris

More from Kruno Ris (12)

Mobile development