Post on 10-Jun-2020
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