Ionic Bonding (Part II) Ionic Compounds: The Compounds that Result from Ionic Bonding.
Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkom · How to get started with Ionic...
Transcript of Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkom · How to get started with Ionic...
![Page 1: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/1.jpg)
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 frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/2.jpg)
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 frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/3.jpg)
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 frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/4.jpg)
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 frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/5.jpg)
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 frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/6.jpg)
6www.nikola-breznjak.comUvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom
Who are you, again?
![Page 7: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/7.jpg)
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 frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/8.jpg)
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 frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/9.jpg)
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 frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/10.jpg)
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 frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/11.jpg)
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 frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/12.jpg)
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 frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/13.jpg)
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 frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/14.jpg)
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 frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/15.jpg)
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 frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/16.jpg)
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 frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/17.jpg)
17www.nikola-breznjak.comUvod u izradu hibridnih mobilnihaplikacija Ionic frameworkom
Yes Cool stroy bro
![Page 18: Uvod u izradu hibridnih mobilnih aplikacija Ionic frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/18.jpg)
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 frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/19.jpg)
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 frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/20.jpg)
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 frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/21.jpg)
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 frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/22.jpg)
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 frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/23.jpg)
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 frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/24.jpg)
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 frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/25.jpg)
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 frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/26.jpg)
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 frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/27.jpg)
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 frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/28.jpg)
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 frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/29.jpg)
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 frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/30.jpg)
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 frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/31.jpg)
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 frameworkom · How to get started with Ionic framework on Windows and Mac 3 4 How to publish our calculator application to the Apple's](https://reader036.fdocuments.us/reader036/viewer/2022070806/5f04f5717e708231d4108e3e/html5/thumbnails/32.jpg)
Eat first, ask later