uvod u izradu hibridnih mobilnih aplikacija ionic...

Brežnjak Nikolauniv.mag.ing.compC TIM d.o.o.

Uvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom

1

MOBILE APP

2 3 4

5 6

2www.nikola-breznjak.comUvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom

Anketa ???Let me get to know you first

Web developmentQ

AngularJSQ

SmartsonQ

Vlastita aplikacijaQ

3www.nikola-breznjak.comUvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom

Agenda PredavanjaIlitiga, o čemu ćemo govoriti

Izrada demo aplikacijeOsnovni pojmoviKako, što, zaštoIonic framework

4www.nikola-breznjak.comUvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom

C TIM d.o.oSW za kladionice

5www.nikola-breznjak.comUvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom

Questions FTW!„Neki ljudi ugrađuju jače motore u aute, a neki stavljaju ALU felge i naljepnice”

6www.nikola-breznjak.comUvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom

Who are you, again?

7www.nikola-breznjak.comUvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom

Pluralsight tutorialsAparently my writing is not that bad after all

1 2

How to create a calculator application with Ionic framework by using Ionic Creator for UI

How to get started with Ionicframework on Windows and Mac

3 4How to publish our calculatorapplication to the Apple's AppStore and Google's Play Store

How to polish, create iconsand splash screen images,

add ads, share and test ourcalculator application

8www.nikola-breznjak.comUvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom

Blog2Book, via LeanpubLook ma, I wrote a book: https://leanpub.com/ionic-framework

9www.nikola-breznjak.comUvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom

Getting started with IonicTechnical editor for a book:

10www.nikola-breznjak.comUvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom

I’m a full StackOverflow developerSometimes I ask, a lot of times I answer

11www.nikola-breznjak.comUvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom

Mobile is everywhereI love my mobile phone, and so should you

12www.nikola-breznjak.comUvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom

Aplikacije prevladavaju

100

50

30

80

10

20

4060

70

90

85

85% vremena na mobitelima je provedeno u aplikacijama

13www.nikola-breznjak.comUvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom

Full stack developersWill rule the world

99%

HTML

99%

CSSSASS, LESS

99%

JavaScriptAngularJS, Ember, React

99%

MEANMongoDB, Express.js, AngularJS,

Node.js

14www.nikola-breznjak.comUvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom

Full stack SupermanWait, where’s Batman?!

A što je s mobilnim aplikacijama?

15www.nikola-breznjak.comUvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom

Blog2Book, via Leanpub #2Look ma, I wrote another book: https://leanpub.com/meantodo

1

2 3 4

5 6

Želite izraditi mobilnu aplikacju?

„Nativne” aplikacije za iOS i Android

Dvije verzije

Solo developer?

Velike firme?

Ionic framework, PhoneGap, OnsenUI,...Settings

17www.nikola-breznjak.comUvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom

Yes Cool stroy bro

18www.nikola-breznjak.comUvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom

Načini izrade mobilnih aplikacija„Valentino i Renato, tako slatka su mi oba, al odabrat neznam koga” ~ Novi Fosili

HibridniNativni Web

19www.nikola-breznjak.comUvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom

Nativne aplikacijeYou never go full native

Nativni SDKiOS: { Mac, X Code, Dev licenca, Swift/Objective C }

Android: { Dev licenca }

Brzina, nativni API pristup

Dvije aplikacije, Cijena izrade

Nativni

20www.nikola-breznjak.comUvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom

Web

Mobilni webOnce upon a time a big player, now a big neeh

„Obična” web stranicaKoristenje opada, m.domena.com,

responzivni web dizajn, jQuery mobile

Update bilo kad

Opada korisnost, PN, kontakti, kamera

21www.nikola-breznjak.comUvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom

Hibridne aplikacijeA woolf in sheep’s clothing

Hibridni

„Obična” web aplikacijaWebView, Cordova

Pristup kontaktima, kameriWeb dev skillset, „izgleda” native

Brzina WebView-a

22www.nikola-breznjak.comUvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom

Ionic frameworkWe’re awesome, and we’re free

Open-source front-end SDK ionic serve --lab

ionic emulate android / iosionic resources

ionic build android / ios ionic run android / ios

1

23www.nikola-breznjak.comUvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom

Svaki projekt svaki putI’ll just code now and worry about the domain architecture later, OK? 2

24www.nikola-breznjak.comUvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom

ionic share & Ionic ViewHey you, feedback please 2

25www.nikola-breznjak.comUvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom

Ionic.io servisiI like this Ionic thingy even more now 3

Deploy

Push Package

Creator

Market Lab

26www.nikola-breznjak.comUvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom

Apache Cordova & ngCordovaSo many tools, so little time... 4

27www.nikola-breznjak.comUvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom

Ionic 2 & Angular 2The force is strong with this one 5

28www.nikola-breznjak.comUvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom

Ionic

Instalacija Ionic-aNext, Next, Next, Yes to all malware, Finish

npm install –g cordova ionic

http://nodejs.org/

http://git-scm.com

29www.nikola-breznjak.comUvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom

Ionic

Pokretanje jednostavne Ionic aplikacijeSimple, you say?

ionic start devUg tabs

cd devUg

ionic serve --lab

30www.nikola-breznjak.comUvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom

DEMOYou know something is going to go wrong, don’t you?

31www.nikola-breznjak.comUvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom

Kamo dalje?I like it - I want to learn more! ?

Ionic in Action - http://amzn.to/1P7TzoW

Getting Started with Ionic - http://amzn.to/1JkiyFf

http://ionicframework.com/docs/

http://www.nikola-breznjak.com/blog/ionic

Eat first, ask later