uvod u izradu hibridnih mobilnih aplikacija ionic...

32
Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkom 1 MOBILE APP 2 3 4 5 6

Upload: others

Post on 04-Jun-2020

7 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

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

Page 2: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

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

Anketa ???Let me get to know you first

Web developmentQ

AngularJSQ

SmartsonQ

Vlastita aplikacijaQ

Page 3: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

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

Agenda PredavanjaIlitiga, o čemu ćemo govoriti

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

Page 4: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

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

C TIM d.o.oSW za kladionice

Page 5: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

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”

Page 6: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

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

Who are you, again?

Page 7: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

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

Page 8: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

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

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

Page 9: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

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

Getting started with IonicTechnical editor for a book:

Page 10: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

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

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

Page 11: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

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

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

Page 12: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

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

Page 13: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

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

Page 14: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

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

Full stack SupermanWait, where’s Batman?!

A što je s mobilnim aplikacijama?

Page 15: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

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

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

Page 16: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

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

Page 17: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

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

Yes Cool stroy bro

Page 18: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

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

Page 19: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

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

Page 20: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

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

Page 21: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

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

Page 22: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

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

Page 23: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

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

Page 24: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

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

ionic share & Ionic ViewHey you, feedback please 2

Page 25: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

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

Page 26: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

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

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

Page 27: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

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

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

Page 28: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

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

Page 29: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

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

Page 30: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

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

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

Page 31: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

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

Page 32: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkomnikola-breznjak.com/portfolio/IonicFramework-GettingStarted.pdf · Brežnjak Nikola univ.mag.ing.comp C TIM d.o.o. Uvod

Eat first, ask later