mobile development

Nativne, Web ili Hibridne ? - Mobile App Development-

2

Kazalo

Uvod

Razumijevanje tipa aplikacija

• Nativne aplikacije

• Web i HTML5

• Hibridne aplikacije

Stavljanje u poslovni kontekst

Q&A

2

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>Voluptatem accusantium doVoluptatem accusantium doTotam rem aperiam eaqueTotam rem aperiam eaque</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>Voluptatem accusantium doVoluptatem accusantium doTotam rem aperiam eaqueTotam rem aperiam eaque</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>VoluptatemVoluptatem</body></body></html></html>

4

Primjeri Nativnih mobilnih aplikacija

4

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

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

7

iOS – Razvoj Nativnih aplikacija

7

SDK Tools




Executable(Binary)

Packager


App Stores

XcodeXcode

Objective-C, C++, C

.app

Compiler, Linker

iOSiOS

8

Android – Razvoj Nativnih aplikacija

8

SDK Tools




Executable(Binary)

Packager


App Stores

Java(some C, C++)

.apkAndroid SDKAndroid SDK

Compiler, Linker

9

BlackBerry – Razvoj Nativnih aplikacija

9

SDK Tools




Executable(Binary)

Packager


App Stores

BlackBerry Java Plug-in for Eclipse

BlackBerry Java Plug-in for Eclipse

Java

.cod

Compiler, Linker

10

Windows Phone – Razvoj Nativnih aplikacija

10

SDK Tools




Executable(Binary)

Packager


App Stores

Visual Studio, Windows Phone Developer Tools

Visual Studio, Windows Phone Developer Tools

C#, VB.NET, etc.

.xap

Compiler, Linker

(Sliverlight)

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.

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

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

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

15

GUI Toolkit - aplikacije s “Nativnim” izgledom

15

GUI Toolkit

Apps

APIs

Browser API

API Calls

Ugrađene

Skinute Apl.

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

17

Mobilno surfanje i Mobilne Web aplikacije

17

Google, Wikipedia:Dremel:

pokretanje preko QR-Codes

2B: Web App

YouTube: Web App

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 …

19

JavaScript Toolkits - Mobil. Web Aplikacije

19

SenchaTouch Example: Crossword Puzzles for

iPad

jQuery Mobile:Boston Event App

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…

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

22

Nativne Aplikacije – Iterakcija s uređajimaTouch Screen,

KeyboardGraphics

Touch Events

GPSLocation

MicrophoneAudio

Speaker


VibrationActivation


Camera

WiFiData

Images, Video

Storage


Data

Native App

OS-Specif ic A

PIs


Audio

API Calls

22

23

Web App – Iterakcija s uređajimaBrowser


GPS

Microphone

Speaker

GSM Network

Vibration

Accelerometer, Compass

Camera

WiFi

Storage


OS-Specif ic A

PIs


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

24

Native vs. Web

24

Native

Pristupuređaju

Brzina App StoreTrošakrazvoja

Postupakodobrenja

Full Very Fast AvailableExpensive Mandatory

Partial Fast NotReasonable NoneWeb

25

Hybrid

Predstavljamo Hibridne Aplikacije

25

Native Full Very Fast Available Mandatory

Partial Fast Not None

Expensive

Reasonable

Partial Fast NotReasonable NoneWeb

Pristupuređaju


Postupakodobrenja

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

27

Hibridne Aplikacije – Iterakcija s uređajem

27

Hybrid App

Web Portionof App

Native Portion of App


Graphics

Touch Events

GPSLocation

MicrophoneAudio

Speaker


VibrationActivation


Camera

WiFiData

Images, Video

StorageData

Audio

Web Portionof App

HTML, CSS, JS

HTML API calls

Rendering Engine

API


OS-Specif ic A

PIs


API Calls

API Calls

PhoneGapPhoneGap

API Calls

API Calls

28

Hibridne aplikacije - primjeri

28

Morgan Stanley

Lotte Card (Korea)

Facebook app

29

Razvoj Hibridnih aplikacija

29

SDK Tools

Application Source CodeResources

(e.g. images)Software Source

Code

Compiler, LinkerExecutable

(Binary)Packager


App Stores

Native SourcesNative Sources HTML SourcesHTML Sources

Server

30

FullNative Speed as Necessary

Reasonable AvailableLow

OverheadHybrid

Usporedba razvoja aplikacija

30

Native Full Very Fast Available MandatoryExpensive

Partial FastNot

AvailableReasonable NoneWeb

Pristupuređaju


Postupakodobrenja

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

32

Kako započeti i s čime?

32

http://www.adobe.com/devnet/flex/articles/mobile-development-flex-flashbuilder.html

http://www.adobe.com/devnet/flex/articles/mobile-development-flex-flashbuilder.html

33

Adobe Flash Builder

33

34

Adobe Flash Builder

34

http://refcardz.dzone.com/refcardz/flex-mobile-development-build

http://refcardz.dzone.com/refcardz/flex-mobile-development-build

mobile development

Documents