Ionic Framework

Ionic framework
step by step from idea through prototyping to the app

stores
Nikola Brežnjak
This book is for sale at http://leanpub.com/ionic-framework
This version was published on 2015-12-15
This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing
process. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools and
many iterations to get reader feedback, pivot until you have the right book and build traction once
you do.
©2015 Nikola Brežnjak

Contents
How to get started with Ionic framework on Mac and Windows . . . . . . . . . . . . . . 1

Why should you listen to me? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Ways you can make an app these days . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
What is Ionic and why it’s so good . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Installing prerequisites for both Mac and Windows . . . . . . . . . . . . . . . . . . . . . 8
Installing Ionic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Using Ionic CLI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Starting a project with Ionic by using the existing templates . . . . . . . . . . . . . . . . 14
Running the Ionic application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
How to create a calculator application with Ionic framework by using Ionic Creator for
UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Calculator interface mockup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Calculator interface prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Starting a project with Ionic CLI by using the template made in Ionic Creator . . . . . . 30
Ionic application folder structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Refactoring our application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Calculator logic with controllers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Finishing the calculator template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Run the application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
How to polish our existing calculator application . . . . . . . . . . . . . . . . . . . . . . . 51

Sanitization check . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Design changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
How to create icons and splash screen images automatically in Ionic framework . . . . . 58
How to implement Google AdMob ads . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
How to use Ionic.io cloud service to share our application with other users without going
through the app store . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
How to test our application on the real physical devices and emulators . . . . . . . . . . 84
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
CONTENTS
How to publish our calculator application to the Apple’s App Store and Google’s Play
Store . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Google Play Store . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Apple App Store . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
How to get help with Ionic framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

How to get started with Ionic
framework on Mac and Windows
This is the first post in a series of posts which will teach you how to take advantage of your web
development knowledge in building hybrid applications for iOS and Android.
This first post explains:
• How to make an app these days

• What actually is Ionic framework
• How to install Ionic on both Mac and Windows
• How to use Ionic CLI to start an Ionic project
• How to run an Ionic application
Why should you listen to me?

If you’re like
1
How to get started with Ionic framework on Mac and Windows 2
Then let me share with you my current (YMMV¹ based on the time of your visit) StackOverflow
profile² image:
You can clearly see that I’m the top answerer in the ionic tag for the last month and in the top 10
answerers of all time. If you want to see what those answers actually are, you can take a look at
my StackOverflow profile³. Also, I’m the guy behind the MEAN stack series⁴ here on HackHands,
¹http://www.urbandictionary.com/define.php?term=ymmv
²http://stackoverflow.com/users/534755/nikola?tab=profile
³http://stackoverflow.com/users/534755/nikola?tab=answers
⁴https://hackhands.com/how-to-get-started-on-the-mean-stack/
with a self-published (pay what you want) Getting MEAN with MEMEs⁵ blog2book at Leanpub. If
that’s not enough, I’m currently a technical reviewer for the book “Getting started with Ionic” by
PacktPub, and also a technical reviewer for the video “Rapid Ionic”, also by PacktPub. Anyways, if
nothing else, give it a shot with my unique “humorly” approach, and you just might like it and learn
something.
Ok, enough about me, let’s teach you some Ionic, since
Introduction
85% of mobile time is spent in apps
You’re bombarded with reports all⁶ over⁷ the⁸ web⁹ that users tend to spend way more time on their
⁵https://leanpub.com/meantodo
⁶http://www.theguardian.com/technology/appsblog/2014/apr/02/apps-more-popular-than-the-mobile-web-data-shows
⁷http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
⁸http://venturebeat.com/2013/04/03/the-mobile-war-is-over-and-the-app-has-won-80-of-mobile-time-spent-in-apps/
⁹http://techcrunch.com/2015/06/22/consumers-spend-85-of-time-on-smartphones-in-apps-but-only-5-apps-see-heavy-use/
phones and especially in apps (rather than surfing the web using their phones) and you decided that
it’s time to learn how to make an app.
If you’re a web developer, you have a decent knowledge of HTML, CSS, and JavaScript; also, you’re
most likely using one of the ever so slightly popular frameworks these days like AngularJS, Ember
or React, just to name a few. If you’re even proficient enough with the MEAN stack, you are a
well-rounded full stack developer, and you basically have it all. Well, except the apps part, right?
If you want to see what’s all that fuss about the MEAN stack, you can check out the
free four part tutorial series here on HackHands, starting with the first post on How to
get started on the MEAN stack¹⁰.
But, where to start with making an app? Could you use some of your existing skills? Up until
fairly recently, if you wanted to make an app for (currently) two most popular mobile operating
systems (iOS and Android) your only bet was to make the, so-called, native application by using
the SDKs of the intended platforms.
This, of course, meant that you needed to make two versions of your application; one for iOS and
one for Android. If you are a solo developer, chances that you’re proficient in both are not so great.
Therefore, for some time, developers were opting for either iOS or Android, whereas big firms had
two developing departments, one for each platform (worth mentioning Windows phone here as
well).
Nowadays, luckily, with the Ionic Framework (and few others like PhoneGap¹¹, OnsenUI¹², Famo.us¹³)
you can create one application by using the skills you, as a web developer, already have (others, don’t
fret - this isn’t rocket science to be afraid of it) and then deploy this one codebase as an app to both
iOS and Android stores. How cool is that, right? You can see the comparison review between the
noted frameworks here¹⁴.
¹⁰https://hackhands.com/how-to-get-started-on-the-mean-stack/
¹¹http://phonegap.com/
¹²http://onsen.io/
¹³http://famous.org/
¹⁴https://www.airpair.com/ionic-framework/posts/hybrid-apps-ionic-famous-f7-onsen
Ways you can make an app these days

We’ve kind of touched all three in the Introduction section, but let’s keep it nice and concise and list
them here too. So, there are actually 3 ways that you can make an application for mobile devices
these days:
• Native app
• Mobile website
• Hybrid app
Now, let’s talk a bit more about the pros and cons of each of them.
Native app
As mentioned previously, you can make an app specifically for iOS and Android by using their
specific SDKs. If you want to build a native application for iOS you have to:
• have a Mac computer. Sure, there are ways around it, but I honestly don’t recommend them;
for starters, a cheap Mac Mini will do just fine - at least it did so in my case
• download Xcode¹⁵ from the App Store (it’s actually free)

• buy the Apple Developer license¹⁶ that costs 99$ per year (if you want to publish to the App
Store; and dooh!, you do)
You can write the apps by using the language Swift¹⁷, or it’s predecessor ObjectiveC¹⁸.
If we’re honest here, I think that Swift is a great step up from the clunky ObjectiveC, but that’s
just my own opinion (some people, of course, disagree¹⁹). Anyways, if you ever decide to go native
just make sure you go with Swift as you’ll get to know your way around it way sooner than with
ObjectiveC, especially if you have a background in web development.
If you want to build a native application for Android you have to:
• have any computer

• download the appropriate SDKs (we’ll cover this in the next section)
• buy the Google Developer license²⁰ which is 25$ per year
One of the pros of a native applications would be it’s speed and direct access to a native API
(you don’t have to use any middleman wrappers, like in hybrid apps). A definite con of a native
applications is that you need to build two (or more) applications, one for each desired platform.
¹⁵https://developer.apple.com/xcode/
¹⁶https://developer.apple.com/programs/
¹⁷https://developer.apple.com/swift/
¹⁸https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html
¹⁹http://www.infoworld.com/article/2968287/application-development/stop-the-funeral-apple-swift-versus-objective-c-alive-and-kicking.html
²⁰https://play.google.com/apps/publish/signup/
Mobile website
Mobile website is actually a “normal” website (yeah, don’t go jumping because of the terminology;
you’re smart, you get the point) that you visit with your browser on your phone, designed specifically
to adapt to your phone’s screen. As we’ve noted in the Introduction section, researches show that
in todays world mobile websites tend to have a way lower engagement than they used to.
Developers used to make specific sites just for mobile browsers (on it’s own domain; usually
m.domain.com) but this proved to be hard to maintain. A practice called responsive website
design²¹ is used these days, where you basically have one HTML codebase, and you determine
the look for specific devices (based on resolutions) by using the so-called media queries²².
A great example of a mobile framework is jQuery mobile²³ that is soon coming out with its new 1.5
version, so we’ll see if they bring something new to the table. From my personal experience with
the framework from two years ago, I have all but good words for it; so, definitely use it if you’re
“only” making a mobile version of your web application.
A definite advantage of the mobile websites is that you can update them as you see fit, without
waiting for the approval from Apple or Google. One of the disadvantages are definitely the fact that
the mobile websites these days have way lower engagement than they used to, and that you can’t
basically use any of the additional phone features like for example camera or GPS.
Hybrid app
A hybrid app is a bassicaly a mobile application, written with the same languages that you use when
building websites, with the addition that it contains an isolated browser instance, called WebView,
which runs this web application inside of a native app. Hybrid apps can access the mobile device
and use the additional phone features like for example camera or GPS.
Definite advantage of the hybrid apps is the fact that you can access the additional phone features
via plugins and that you can do all the development with the same set of skills as you use when
developing “normal” web applications. One of the disadvantages is the fact that, even though it’s
improving, the so-called Web View has it’s limitations in terms of speed. So, it might not be best
suited if you’re on a quest to make the next best game with full blown 3D graphics.
What is Ionic and why it’s so good

As I gave an answer on StackOverflow²⁴:
²¹https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/
²²https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
²³https://jquerymobile.com/
²⁴http://stackoverflow.com/questions/31179211/use-ionic-or-cordova/31180666
Disclaimer: This will sound like advertisement, so I have to say I’m in no way affiliated
with Ionic, I just happen to like it so much that I’m sharing the love for it.
Ionic is so much more than “just” an UI framework. Ionic allows you to:
• generate icons and splash screens for all devices and device sizes with a single
command: ionic resources. This alone saves you at least a day of image
preparing for various sizes.
• instantly update your apps with code changes, even when running directly on
your device with ionic run --livereload
• build and test iOS and Android versions side-by-side and see changes instantly
with ionic serve --lab
• share your Ionic apps with clients, customers, and testers all around the world
without ever going through the App Store with ionic share
• easily access the full native functionality of the device using ngCordova (here
you get to use any Cordova plugin) Also, Drifty²⁵ (the team behind the Ionic
framework) is building a full-stack backend services and tools for your Ionic app
like Deploy (for deploying a new version without going through Apple review
process! - this is huge!), Analytics²⁶, Push notifications²⁷. Ionic CLI (command line
interface) uses Cordova in the backend and allows you to build (directly using
Ionic CLI) apps for iOS and Android (just by doing ionic build ios or ionic
build android). Ionic uses Angular as a frontend framework so if you’re familiar
with it, it will come as a bonus. They’re working closely with the Angular 2.0
team²⁸ too. All in all, I personally think Ionic framework has a bright future, so if
nothing else – give it a try I bet you’ll like the ease of making an app with it.
Do I have your attention now? Great, let’s install all the needed prerequisites in the next section and
start using Ionic!
Installing prerequisites for both Mac and Windows

We need to have Node.js and Git installed in order to install both Ionic and Cordova. If you already
have (and if you’re a web developer chances are that you do) these tools installed, you can skip this
section, and go straight to installing Ionic.
Installing Node.js
In order to download Node.js, visit http://nodejs.org/download/²⁹, where you’ll see the following
options:
²⁵http://drifty.com/
²⁶http://www.nikola-breznjak.com/blog/ionic/ionic-analytics-alpha-lets-you/
²⁷http://blog.ionic.io/announcing-ionic-push-alpha/
²⁸http://blog.ionic.io/angular-2-ionic/
²⁹http://nodejs.org/download/
Installation on Windows and Mac OS is simple as you just have to download and run the appropriate
installer and follow the familiar instructions (next, next, next, sure I accept, next, finish).
If you have brew on your Mac then you can also install Node.js with:
brew install node
In both cases, npm (Node Package Manager - used to install other packages) will be installed along
with Node.js.
To verify that you installed Node.js correctly on a Windows machine, run the following command
in your Command prompt (or, even better, use Console 2³⁰):

node -v
You should get an output similar to:
v0.12.7
To verify that you installed Node.js correctly on your Mac, run the same command as above in your
Terminal (or, even better, use iTerm³¹), and you should get the same similar output as above.
Installing Git
In order to install Git, visit http://git-scm.com/download³², where you’ll see the following options:
Installation on Windows and Mac OS is as simple as for Node.js as you just have to download and
run the appropriate installer and follow the, yet again, familiar instructions.
To verify that you installed Git correctly on your Windows/Mac machine, run the following
command in your Command prompt/Terminal:
git
³⁰http://www.nikola-breznjak.com/blog/quick-tips/customize-console-2-on-windows-machine/
³¹https://www.iterm2.com/
³²http://git-scm.com/download
1 usage: git [--version] [--help] [-C <path>] [-c name=value]

2 [--exec-path[=<path>]] [--html-path] [--man-path] [--info-path]
3 [-p|--paginate|--no-pager] [--no-replace-objects] [--bare]
4 [--git-dir=<path>] [--work-tree=<path>] [--namespace=<name>]
5 <command> [<args>]
6
7 The most commonly used git commands are:
8 add Add file contents to the index
9 bisect Find by binary search the change that introduced a bug
10 branch List, create, or delete branches
11 checkout Checkout a branch or paths to the working tree
12 clone Clone a repository into a new directory
13 commit Record changes to the repository
14 diff Show changes between commits, commit and working tree, etc
15 fetch Download objects and refs from another repository
16 grep Print lines matching a pattern
17 init Create an empty Git repository or reinitialize an existing one
18 log Show commit logs
19 merge Join two or more development histories together
20 mv Move or rename a file, a directory, or a symlink
21 pull Fetch from and integrate with another repository or a local branch
22 push Update remote refs along with associated objects
23 rebase Forward-port local commits to the updated upstream head
24 reset Reset current HEAD to the specified state
25 rm Remove files from the working tree and from the index
26 show Show various types of objects
27 status Show the working tree status
28 tag Create, list, delete or verify a tag object signed with GPG
29
30 'git help -a' and 'git help -g' list available subcommands and some
31 concept guides. See 'git help <command>' or 'git help <concept>'
32 to read about a specific subcommand or concept.
You don’t have to worry if you don’t know how to use Git since you won’t be needing it directly
(npm uses it download packages). However, if you would like to learn (and there’s no reason why
you shouldn’t expand your knowledge), you can check out this good interactive tutorial³³ made by
CodeSchool.
³³https://try.github.io/levels/1/challenges/1
Installing Ionic
If you’ve installed the needed prerequisites from the previous section, then in order to install Ionic
(both on Mac and Windows) you just have to run the following command:
npm install ionic cordova -g
Ionic uses Cordova in the background, thus the need for it. We’re using the -g flag here, in order to
install the packages ionic and cordova globally³⁴.
To verify that you’ve installed Ionic correctly on your Windows/Mac machine, run the following
ionic -v
1.6.4
To verify that you’ve installed Cordova correctly on your Windows/Mac machine, run the following
cordova -v
4.2.0
If you had Node.js installed before (and haven’t used it much since), you may get a notification like
this:
1 ******************************************************
2 Upgrade warning - for the CLI to run correctly,
3 it is highly suggested to upgrade the following:
4
5 Please update your Node runtime to version >=0.12.x
6 ******************************************************
To resolve this issue, just update Node.js; either by re-downloading it (on Windows) or by executing
the following command in the Terminal (on a Mac):
brew update; brew upgrade node
I would like to take a moment here and encourage you that you post a comment about
any problems you may have (and from my experience from StackOverflow there tends
to be quite of them) with these (seemingly simple) installation tasks. There always tends
to be some older version of Node.js installed, or problems with cache and npm, blah blah
blah… I will do my best to try to resolve your issue.
³⁴https://docs.npmjs.com/getting-started/installing-npm-packages-globally
Using Ionic CLI

If you run ionic in your Terminal/Command prompt you will get an output similar to the one below:
1 > ionic
2 _ _
3 (_) (_)
4 _ ___ _ __ _ ___
5 | |/ _ \| '_ \| |/ __|
6 | | (_) | | | | | (__
7 |_|\___/|_| |_|_|\___| CLI v1.6.4
8
9 Usage: ionic task args
10
11 =======================
12
13 Available tasks: (use --help or -h for more info)
14
15 start .......... Starts a new Ionic project in the specified PATH
16 serve .......... Start a local development server for app dev/testing
17 platform ....... Add platform target for building an Ionic app
18 run ............ Run an Ionic project on a connected device
19 emulate ........ Emulate an Ionic project on a simulator or emulator
20 build .......... Locally build an Ionic project for a given platform
21 plugin ......... Add a Cordova plugin
22 resources ...... Automatically create icon and splash screen resources (bet\
23 a)
24 Put your images in the ./resources directory, named splash or icon.
25 Accepted file types are .png, .ai, and .psd.
26 Icons should be 192x192 px without rounded corners.
27 Splashscreens should be 2208x2208 px, with the image centered in the\
28 middle.
29
30 upload ......... Upload an app to your Ionic account
31 share .......... Share an app with a client, co-worker, friend, or customer
32 lib ............ Gets Ionic library version or updates the Ionic library
33 setup .......... Configure the project with a build tool (beta)
34 io ............. Integrate your app with the ionic.io platform services (al\
35 pha)
36 push ........... Upload APNS and GCM credentials to Ionic Push (alpha)
37 config ......... Set configuration variables for your ionic app (alpha)
38 browser ........ Add another browser for a platform (beta)
39 service ........ Add an Ionic service package and install any required plug\
40 ins
41 add ............ Add an Ion, bower component, or addon to the project
42 remove ......... Remove an Ion, bower component, or addon from the project
43 list ........... List Ions, bower components, or addons in the project
44 ions ........... List available ions to add to your project
45 templates ...... List available Ionic starter templates
46 info ........... List information about the users runtime environment
47 help ........... Provides help for a certain command
48 link ........... Sets your Ionic App ID for your project
49 hooks .......... Manage your Ionic Cordova hooks
50 state .......... Saves or restores state of your Ionic Application using th\
51 e package.json file
52 docs ........... Opens up the documentation for Ionic
What you got is actually a nice summary of all the commands that you can run using the ionic CLI,
along with their short descriptions. Btw, if you’re wondering what this CLI thing is (and you haven’t
Googled it yet³⁵); it’s actually an acronym from Command Line Interface, and in Ionic terms it’s
actually a tool that makes it easier to start, build, run, and emulate, (and a lot more), Ionic apps³⁶.
In the following chapters we will cover most of these commands, but for now let’s not burden you too
much, and let’s do a quick skin deep dive by making a simple project using ionic start command.
Starting a project with Ionic by using the existing

templates
Cool, you’ve made it so far - I promise, you’re going to see some code now!
Ionic CLI allows us to start and initialize your project by using the aforementioned ionic start
command. If you take a look at the official documentation for the start command³⁷ you will see
something like the following definition:
ionic start appname [template]
If you just run ionic start appname the Ionic CLI will make a bootstrap application with all the
needed parts in the appname folder, with the so-called blank template.
There are three named template starters: blank, sidemenu, and tabs.
Additionally, you can use Github repo starters and Codepen URL starters. For a comprehensive list
of (currently 20) starter apps check out the post from my friend Dragan over at Gajotres³⁸.
³⁵https://en.wikipedia.org/wiki/Command-line_interface
³⁶http://ionicframework.com/docs/cli/
³⁷http://ionicframework.com/docs/cli/start.html
³⁸http://www.gajotres.net/a-comprehensive-list-of-ionic-starter-apps/
In our example, we will use the sidemenu template, so execute the following command from your
Terminal/Command prompt:
ionic start Ionic_1stTutorial sidemenu
You should see something similar to the following output:
1 C:\Users\Nikola\Desktop\IonicTesting>ionic start Ionic_1stTutorial sidemenu

2 Creating Ionic app in folder C:\Users\Nikola\Desktop\IonicTesting\Ionic_1stTutor\
3 ial based on sidemenu project
4 Downloading: https://github.com/driftyco/ionic-app-base/archive/master.zip
5 [=============================] 100% 0.0s
6 Downloading: https://github.com/driftyco/ionic-starter-sidemenu/archive/master.z\
7 ip
8 [=============================] 100% 0.0s
9 Updated the hooks directory to have execute permissions
10 Update Config.xml
11 Initializing cordova project
12
13 Your Ionic project is ready to go! Some quick tips:
14 * cd into your project: $ cd Ionic_1stTutorial
15 * Setup this project to use Sass: ionic setup sass
16 * Develop in the browser with live reload: ionic serve
17 * Add a platform (ios or Android): ionic platform add ios [android]
18 Note: iOS development requires OS X currently
19 See the Android Platform Guide for full Android installation instructions:
20 https://cordova.apache.org/docs/en/edge/guide_platforms_android_index.md.html
21 * Build your app: ionic build <PLATFORM>
22 * Simulate your app: ionic emulate <PLATFORM>
23 * Run your app on a device: ionic run <PLATFORM>
24 * Package an app using Ionic package service: ionic package <MODE> <PLATFORM>
25
26 For more help use ionic --help or ionic docs
27 Visit the Ionic docs: http://ionicframework.com/docs
28
29 New! Add push notifications to your Ionic app with Ionic Push (alpha)!
30 https://apps.ionic.io/signup
31 +---------------------------------------------------------+
32 + New Ionic Updates for August 2015
33 +
34 + The View App just landed. Preview your apps on any device
35 + http://view.ionic.io
36 +
37 + Invite anyone to preview and test your app
38 + ionic share EMAIL

39 +
40 + Generate splash screens and icons with ionic resource
41 + http://ionicframework.com/blog/automating-icons-and-splash-screens/
42 +---------------------------------------------------------+
Running the Ionic application

Now that we’ve initialized our Ionic application based on the sidemenu template, we have to run it
in order to see what Ionic CLI generated for us.
First, change the directory to the name of the application you gave in the ionic start command.
In our case, that is Ionic_1stTutorial:
1 C:\Users\Nikola\Desktop\IonicTesting\Ionic_1stTutorial>```
2
3 If you open up the project in your editor (I use [Sublime Text 3](http://www.sub\
4 limetext.com/3)) you will see the following folder structure:
5
6 ![](images/vKpZhByl.jpg)
7
8 In the following chapters, we will spend most of the time in the **www** folder.
9
10 > Since Ionic is based on [AngularJS](https://angularjs.org/) framework, you wil\
11 l need at least a basic understanding of it, and you can start exploring it with\
12 a [free interactive tutorial](http://angular.codeschool.com/) by CodeSchool. Al\
13 so, you can take a look at my [fourth tutorial in the MEAN stack](https://hackha\
14 nds.com/finishing-Angular-TODO-application-deploying-production/) series, which \
15 is all about AngularJS.
16
17 There are few ways in which you can get your Ionic application running:
18
19 + ìonic serve` - starts the app in a local web browser
20 + ìonic emulate android` - starts the app in an emulator (in this example andro\
21 id is used; you can also use **ios** if you're on a Mac and have all the prerequ\
22 isites installed)
23 + ìonic run android` - starts the app on the actual device that's plugged into \
24 your computer
25 + ìonic build android` - creates an **.apk** file which you can physically copy\
26 to your Android device and run it (this scenario doesn't work for iOS devices i\
27 n normal circumstances; you have to go through Xcode, as we'll describe in detai\
28 l in the next chapter)
29
30 So, now run the following command in your Terminal/Command prompt:
31
32 ìonic serve`
33
34 You should see the following similar output:
C:UsersNikolaDesktopIonicTestingIonic_1stTutorial>ionic serve Running live reload server: http://localhost:35729

Running dev server: http://localhost:8100 Ionic server commands, enter: restart or r to restart the
client app from the root goto or g and a url to have the app navigate to the given url consolelogs or
c to enable/disable console log output serverlogs or s to enable/disable server log output quit or q to
shutdown the server and exit
ionic $ “‘
Also, you should get your local browser started up automatically, pointing to the address http://localhost:8100/#/app
with an output similar to the one on the image below (I resized the window for clarity - if you’re
using Chrome³⁹, you can get the use the Window Resizer plugin⁴⁰, or use the Chrome Dev Tools
Emulate feature⁴¹):
³⁹https://www.google.com/chrome/
⁴⁰https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh
⁴¹https://developer.chrome.com/devtools/docs/device-mode
Awesome thing about this is that you have automatically set up live reload feature, which means
that as soon as you change the code in your www folder, the application will reload automatically
so that you don’t have to keep pressing the F5 (+R) key on your Windows (Mac) machine.
If you like, you can get this project on Github⁴².
Conclusion
In this chapter we’ve gone through the options that you have in making an app these days. Then we
explained what actually is Ionic framework and how to install it on both Mac and Windows. With
the use of the Ionic CLI we started a project based on the sidemenu template, and finally we ran it
locally in the browser with the use of ionic serve command. In the next chapter I’ll show you how
to create your own calculator application by making use of Ionic Creator.
⁴²https://github.com/Hitman666/Ionic_1stTutorial
How to create a calculator
application with Ionic framework by
using Ionic Creator for UI
This is the second post in a series of posts which will teach you how to take advantage of your web
development knowledge in building hybrid applications for iOS and Android. The first post in this
series was all about How to get started with Ionic framework on Windows and Mac⁴³.
This second post explains:
• How to create a calculator interface mockup

• How to create a calculator interface prototype without coding by using Ionic Creator
• How to start the Ionic application based on the created interface
• Which are the most important folders and files and what is the starting point of the application
• How to create the calculator logic by using controllers
Finished project:
• clone the code from Github⁴⁴

• in the project directory execute ionic serve to run the project locally in your browser
• you can check out the live example⁴⁵ of this application
Introduction
Since there are not so many Calculator applications in the App store (around 500 according to my
search shown on the image below), who knows, you just may create your own bestseller in this
category, if you add a needed tweak or two.
⁴³
⁴⁴https://github.com/Hitman666/Ionic_2ndTutorial
⁴⁵http://nikola-dev.com/IonicCalculator/mobile.html
19
How to create a calculator application with Ionic framework by using Ionic Creator for UI 20
All jokes and hopes aside, this seemed to be a decent “more serious”, but still easy to acomplish, task.
Let’s start this chapter by creating the interface for our application.
Calculator interface mockup

Before starting any application, we should know what we want (well, at least in general). We should
know what problem are we trying to solve with our application and how are we going to solve it.
Also, we would need to have a decent idea of how we would want our application to look like.
The answer to the first two questions would be rather easy; the problem is that we can’t do
calculations fast enough in our mind (well, except if you’re Arthur Benjamin⁴⁶) and we need a tool
to help us with that. Surely, there are specific calculator devices, but it would be too cumbersome
to carry one with us all the time.
Besides, since these days almost everyone has a smartphone, it turns out it would be an awesome
idea to make an app for it. Because, as they say:
there’s an app for that
where that is basically everything these days. If you find that there isn’t an app for some particular
problem that you may have, that just may be your lucky break. Who knows, you just may end up
having your 5 minutes of fame on the AppStore, until another clone of your app pushes you away.
Anyways, back to our calculator application; we don’t need any fancy options (at least not yet, in
this 1.0 version), we’ll just stick with the basic mathematical operations like adding, substracting,
dividing and multiplying.
These basic operations will be our MVP (Minimal Viable Product), as the author Eric Ries explains
in his awesome (and highly recommended) book Lean Startup⁴⁷. We can always add features later,
if it turns out that our idea was good. Or, we can pivot away from it, if it turns out it was not a next
best thing after Flappy Bird, by not spending too much time and money building the app with dozen
of features which in end would not be used at all.
As for the user interface, you can use various tools that help with mocking up your application’s user
interface (Balsamiq Mockups⁴⁸, Mockingbird⁴⁹, Mockup Builder⁵⁰, etc.), but I tend to be old school
about it and I made a little hand drawing of how I imagined the app should look like, and this is
what I came up with after few attempts:
⁴⁶https://www.youtube.com/watch?v=e4PTvXtz4GM
⁴⁷http://www.nikola-breznjak.com/blog/books/the-lean-startup-eric-ries/
⁴⁸https://balsamiq.com/products/mockups/
⁴⁹https://gomockingbird.com/home
⁵⁰http://mockupbuilder.com/
Note: As you can see there’s no comma in our mockup, basically because we’re just trying to keep it
simple here.
Calculator interface prototype

Now that we know what our application needs to do, and how it basically has to look like, lets start
by creating our interface.
We could create our interface by manually entering HTML, but we’re going to show a different
approach here - the one which uses Ionic Creator⁵¹, which is an awesome web application that lets
you drag&drop components that make up the user interface. As such, this is a great tool which helps
in quick user interface prototyping.
The best thing is that you can then just download the created HTML and use it directly in your Ionic
application. Of course, some additional changes will be needed later in the HTML and CSS code,
but for creating a quick prototype this will be great.
Worth noting is that there are currently on the market lots of other tools for interface prototyping
(InVision⁵², Flinto⁵³, Mockup Builder⁵⁴, etc.), however these tools don’t (at least not yet) have a “one-
⁵¹https://creator.ionic.io/
⁵²http://www.invisionapp.com/
⁵³https://www.flinto.com/
⁵⁴http://mockupbuilder.com/
click download and ready for your Ionic” option like Ionic Creator does.
Creating calculator interface with Ionic Creator

In order to use Ionic Creator⁵⁵ you have to signup/login on their website. The first time you log in,
you’ll be asked for additional info like Company or phone, but you can safely skip that. In the initial
screen you will be asked to name your application (I chose IonicCalculator):
The main screen of the Ionic Creator application looks like the one shown on the image below:
⁵⁵https://creator.ionic.io/
In the upper left hand side you’ll see the PAGES panel and inside it you’ll see Page item. Click on
Page, and on the right hand side change the TITLE to Calculator. Next, remove the PADDING by
switching off the slider. The way this should look like now is shown on the image below:
First, we need some kind of a “display” which will show the numbers that we’re clicking. Ideally,
we would use a <label> component, however it’s not available in the Ionic Creator as of yet. So, for
this we will use the <input> element, and we can easily adjust this later when we’ll download the
generated HTML code.
Ionic Creator works in a drag&drop kind of way, which basically means that you can
drag any component from the Componenes pane on the left hand side and drop it on
the actual Phone image in the center of the screen.
Since we concluded that we’ll use the Input element, we can try to drag&drop it to the Phone, but
that won’t work. First you need to drag the Form component on the page, and then on it you should
drag&drop the Input component as well.
Select the Input component (by clicking it in the PAGES panel in the upper left corner mentioned
before) and change its PLACEHOLDER to 0 (zero digit) and NAME to display. The way this should
look like now is shown on the image below:
Next, according to our mockup, we should add buttons that would represent the digits from 0 to 9,
and the buttons that would represent adding (+), substracting (-), multiplying (x) and dividing (/)
operations. Also, we will need the equals button (=) and a clear button (C).
In the first row we need to have 4 buttons, the ones representing digits 7, 8, 9 and one representing a
dividing operation. To acomplish this, we will use a Button Bar component from the Components
panel so that we’ll drag&drop it just below the Input field on the screen. You should see something
like this now in your Ionic Creator window:
As you can see from the previous image, three buttons were added inside the Button Bar component.
Click on a button with text 1 and change it to 7. Repeat the process for other two buttons by changing
the text to 8 and 9, respectively.
Ionic Creator adds 3 buttons within the Button Bar, but we need the 4th one. So, to add it, drag&drop
a Button component next to the button which you labeled as 9. Click on this newly added button
and change its text to /, and its style to Energized. Your interface should look like the one on the
image below:
Repeat the process by adding next three rows:
• buttons representing 4, 5, 6 and a button representing multiplication (x)

• buttons representing 1, 2, 3 and a button representing subtraction (-)
Your interface should look like the one on the image below:
In the last row you should also add four buttons:

• one button representing the Clear operation (C), with the Assertive style
• one button representing 0
• one button representing the equals operation (=), with the Positive style
• one button representing the addition operation (+), with the ‘Energized style
Your interface should look like the one on the image below:
Don’t worry about the slight missalignement or paddings, we’ll take care of this in the next chapter
when we’ll be polishing our application and preparing it for the App/Play store.
So, basically this is it, we have our interface ready and now we can export it by clicking on the
Export icon in the header, as shown on the image below:
After this a popup, with the following content, appears:

Starting a project with Ionic CLI by using the template

made in Ionic Creator
From the previous image we see that we have three options (Ionic CLI, ZIP file, and Raw HTML) to
start our application based on the mockup we created in Ionic Creator. We’re going to use the Ionic
CLI option, by running the following command from our Terminal/Command prompt:
ionic start Ionic_2ndTutorial creator:167ff268a01d
Note: if you followed this chapter by creating the interface in Ionic Creator yourself, then you will
have a different creator number. Of course, you’re free to use mine if you wish to do so. Also, you’re
free to name your project any way you want, I chose Ionic_2ndTutorial in this example.
After you execute the upper command in your terminal, you should see something similar to the
following output:
1 C:\Users\Nikola\Desktop\IonicTesting>ionic start Ionic_2ndTutorial creator:167ff\

2 268a01d
3 Creating Ionic app in folder C:\Users\Nikola\Desktop\IonicTesting\Ionic_2ndTutor\
4 ial based on creator:167ff268a01d project
5 Downloading: https://github.com/driftyco/ionic-app-base/archive/master.zip
6 [=============================] 100% 0.0s
7
8 Downloading Creator Prototype: https://apps.ionic.io\api\v1\creator\167ff268a01d\
9 \download\html
11 Update Config.xml
12 Initializing cordova project
13
14 Your Ionic project is ready to go! Some quick tips:
15 * cd into your project: $ cd Ionic_2ndTutorial
16 * Setup this project to use Sass: ionic setup sass
17 * Develop in the browser with live reload: ionic serve
18 * Add a platform (ios or Android): ionic platform add ios [android]
19 Note: iOS development requires OS X currently
20 See the Android Platform Guide for full Android installation instructions:
21 https://cordova.apache.org/docs/en/edge/guide_platforms_android_index.md.html
22 * Build your app: ionic build <PLATFORM>
23 * Simulate your app: ionic emulate <PLATFORM>
24 * Run your app on a device: ionic run <PLATFORM>
25 * Package an app using Ionic package service: ionic package <MODE> <PLATFORM>
26
27 For more help use ionic --help or ionic docs
28
29 Visit the Ionic docs: http://ionicframework.com/docs
30
31 New! Add push notifications to your Ionic app with Ionic Push (alpha)!
32 https://apps.ionic.io/signup
33 +---------------------------------------------------------+
34 + New Ionic Updates for August 2015
35 +
36 + The View App just landed. Preview your apps on any device
37 + http://view.ionic.io
38 +
39 + Invite anyone to preview and test your app
40 + ionic share EMAIL
41 +
42 + Generate splash screens and icons with ionic resource
43 + http://ionicframework.com/blog/automating-icons-and-splash-screens/
44 +---------------------------------------------------------+
As per the instruction in the output above let’s cd into our project:
cd Ionic_2ndTutorial
Now, let’s see how this application looks like in the browser by executing the following command
in the Terminal/Command prompt:
ionic serve
You should be familiar with this command from the first chapter, and if not please take
a look at it first. For those short in time, basically ionic serve starts up a local web
browser and shows how our application would look like; which, actually is great for
rapid development since you get to see changes instantly without needing to reload
your browser.
We should see something similar to the image below:
Btw, the ruller and the Device setting (Apple iPhone 6) are a part of an awesome Developer tools in
Chrome browser, which I highly recommend.
If you get an error similar to this: Unable to locate the ionic.project file. Are
you in your project directory? (CLI v1.6.4) then you didn’t run the ionic serve
command in the project directory (as the error clearly says), and so you should first cd
into that directory (as mentioned in the previous step).
Now, let’s go and see what our generated folder structure looks like and what is each folder
responsible for.
Ionic application folder structure

If you open up the project in your editor (I’m using Sublime Text 3 on the image below), you will
see something like:
Now we’re going to explain what each of these files and folders represent in Ionic framework.
hooks folder
hooks folder contains code for Cordova hooks, which are used to execute some code during the
Cordova build process. For example, Ionic uses Cordova’s after_prepare hook to inject platform
specific (iOS, Android) CSS and HTML code.
plugins folder
plugins folder contains Cordova plugins which are added to the project. You can add any available
Cordova plugin⁵⁶ to your project, and you can even create your own if you’re technical enough.
As you can see from the image above we currently have 5 installed plugins (com.ionic.keyboard,
cordova-plugin-console, cordova-plugin-device, cordova-plugin-splashscreen, and cordova-plugin-
whitelist).
scss folder
scss folder contains the ionic.app.scss file which is based on SASS⁵⁷. This file contains default
variables like for example theme colors.
SASS is an extension of CSS which adds additional features like nested rules, variables,
mixins, etc. There are few frameworks built with Sass like for example Compass⁵⁸,
Bourbon⁵⁹, and Susy⁶⁰. You can learn more about how to use Sass in the official guide⁶¹.
You don’t need to use Sass in Ionic if you don’t want to (it’s actually turned off by default), but if
you’re familiar with it, you can initialize Ionic to use it with the ionic setup sass, and Gulp (more
about it below) will automatically compile the Sass code into CSS.
www folder
www folder is the most important since it contains all the files our application is made of, and we
will be spending most of our development time in this folder. This folder contains few files and
additional subfolders which we’ll address in more detail in the next section titled Refactoring our
application.
⁵⁶http://plugins.cordova.io/#/
⁵⁷http://sass-lang.com/
⁵⁸http://compass-style.org/
⁵⁹http://bourbon.io/
⁶⁰http://susy.oddbird.net/
⁶¹http://sass-lang.com/guide
bower.json and .bowerrc files

bower.json is a configuration file for Bower⁶².
Bower is a package manager for front-end modules that are usually comprised of
JavaScript and/or CSS. It lets us easily search for, install, update, or remove these front-
end dependencies. If you want to learn more about Bower, you can check out my post
How to Manage Front-End JavaScript and CSS Dependencies with Bower⁶³.
The contents of my bower.json file is shown below (you will see the same content if you cloned
the project from Github or started it from my Ionic Creator template): { "name": "HelloIonic",
"private": "true", "devDependencies": { "ionic": "driftyco/ionic-bower#1.1.0" } }
Bower stores the downloaded front-end modules in a folder which is defined in a .bowerrc file, and
is set to www/lib by default.
The contents of the .bowerrc file is shown below: { "directory": "www/lib" }
config.xml file
config.xml is a configuration file for the Cordova⁶⁴ project (as you may remeber from the first
chapter, Ionic is built on top of Cordova). It contains some meta information about the app like
permissions and a list of Cordova plugins which are used in the app. To learn more about available
settings in the config.xml file, please refer to the official documentation⁶⁵.
gulpfile.js file
gulpfile.js is a configuration file for Gulp⁶⁶.
Gulp is a JavaScript task runner that helps with rapid development by making use of
its multiple plugins for different tasks like concatenation, minifying, automatic unit test
running, LESS/SASS to CSS compilation, copying modified files to different directories,
etc…
Another popular task runner is Grunt⁶⁷. However, from my personal experience I tend to favor Gulp
as well.
Note: you don’t need to learn Gulp in order to use Ionic. If, however, you want, you can check out the
official Getting started documentation⁶⁸.
⁶²http://bower.io/
⁶³http://www.nikola-breznjak.com/blog/codeproject/how-to-manage-front-end-javascript-and-css-dependencies-with-bower-on-ubuntu-14-
04/
⁶⁴https://cordova.apache.org/
⁶⁵https://cordova.apache.org/docs/en/4.0.0/config_ref_index.md.html
⁶⁶http://gulpjs.com/
⁶⁷http://gruntjs.com/
⁶⁸https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md
ionic.project
ionic.project is a configuration file for Ionic, used to store meta information about Ionic project and
the associated Ionic.io cloud account. We’re not going to use Ionic.io cloud account just yet, we’ll
show how to use it in the next chapter.
package.json
package.json is a file used by npm to store versions of the npm packages installed in the current
project.
npm (Node.js Package Manager) is a CLI tool which comes with Node.js installation and
it’s used for installing other tools like aftorementioned Bower, Gulp, etc…
Contents of my package.json file, shown below, is useful as we can see which Cordova plugins and
dependencies are installed for the project, as well as some meta information like name, version and
description:
1 {
2 "name": "ionic_2ndtutorial",
3 "version": "1.0.0",
4 "description": "Ionic_2ndTutorial: An Ionic project",
5 "dependencies": {
6 "gulp": "^3.5.6",
7 "gulp-sass": "^1.3.3",
8 "gulp-concat": "^2.2.0",
9 "gulp-minify-css": "^0.3.0",
10 "gulp-rename": "^1.2.0"
11 },
12 "devDependencies": {
13 "bower": "^1.3.3",
14 "gulp-util": "^2.2.14",
15 "shelljs": "^0.3.0"
16 },
17 "cordovaPlugins": [
18 "cordova-plugin-device",
19 "cordova-plugin-console",
20 "cordova-plugin-whitelist",
21 "cordova-plugin-splashscreen",
22 "com.ionic.keyboard"
23 ],
24 "cordovaPlatforms": []
25 }
.gitignore and README.md file

Both .gitignore and README.md are files related to GitHub⁶⁹.
I’m sure most of the readers know and use GitHub (and consequently Git⁷⁰), but just for brevity, let
see how Wikipedia defines GitHub⁷¹:
GitHub is a Web-based Git repository hosting service, which offers all of the distributed
revision control and source code management (SCM) functionality of Git as well as
adding its own features. Unlike Git, which is strictly a command-line tool, GitHub
provides a Web-based graphical interface and desktop as well as mobile integration.
It also provides access control and several collaboration features such as bug tracking,
feature requests, task management, and wikis for every project.
So, Git⁷² on the other hand is (quoted from the official site):
a free and open source distributed version control system designed to handle everything
from small to very large projects with speed and efficiency. Git is easy to learn and has a
tiny footprint with lightning fast performance. It outclasses SCM tools like Subversion,
CVS, Perforce, and ClearCase with features like cheap local branching, convenient
staging areas, and multiple workflows.
Now that we got the basics out of the way, let’s take a look at what the aftorementioned two files
represent.
.gitignore is a configuration file for GitHub. Contents of the .gitignore file, shown below, basically
instructs Git that it should not track folders node_modules, platforms and plugins when uploading
the code to GitHub. “‘ # Specifies intentionally untracked files to ignore when using Git # http://git-
scm.com/docs/gitignore
node_modules/ platforms/ plugins/ “‘
README.md is a Markdown⁷³ file used on GitHub to explain the purpose and usage of your project.
If you’re not using Git (and Github) in your workflow, I highly encourage you to do so,
as it will prove really useful in the long run.
⁶⁹https://github.com/
⁷⁰https://git-scm.com/
⁷¹https://en.wikipedia.org/wiki/GitHub
⁷²https://git-scm.com/
⁷³http://daringfireball.net/projects/markdown/
Refactoring our application

As said, we’ll be spending most of our development time in the www folder and that’s why we
mentioned it just briefly in the previous section. We’ll take a full deep dive in it here, by taking the
two most imporant files (index.html and app.js) and explain their contents step by step.
Also, we’ll refactor our code into separate files, since Ionic Creator put everything in one. Finally,
we’ll add the calculator logic so that our calculator will work as expected.
Generally, putting all the code in one file and mixing logic and presentation (JavaScript
and HTML code) is simply a big NO-NO, and often referred to as spaghetti code⁷⁴. You
can learn more about refactoring your code from the cult book Refactoring: Improving
the Design of Existing Code⁷⁵ by Martin Fowler, Kent Beck, and others. If you’re
searching for a bit lighter introduction to refactoring and good programing practices in
general I can’t recomment the classic Code Complete 2⁷⁶ by Steve McConnell enough.
index.html file
The starting point of our Ionic application is index.html, whose contents is as follows:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalab\
6 le=no, width=device-width">
7 <title></title>
8
9 <style>
10 .angular-google-map-container {
11 width: 100%;
12 height: 504px;
13 }
14 </style>
15
16 <link href="lib/ionic/css/ionic.css" rel="stylesheet">
17 <script src="lib/ionic/js/ionic.bundle.js"></script>
18
19 <link href="http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.c\
⁷⁴https://en.wikipedia.org/wiki/Spaghetti_code
⁷⁵http://amzn.to/1LWo4Ow
⁷⁶http://amzn.to/1LWomoq
20 ss" rel="stylesheet">
21
22 
26
27 <script>
28 // Ionic Starter App
29
30 // angular.module is a global place for creating, registering and retrie\
31 ving Angular modules
32 // 'starter' is the name of this angular module example (also set in a <\
33 body> attribute in index.html)
34 // the 2nd parameter is an array of 'requires'
35 // 'starter.services' is found in services.js
36 // 'starter.controllers' is found in controllers.js
37 angular.module('app', ['ionic'])
38
39 .run(function($ionicPlatform) {
40 $ionicPlatform.ready(function() {
41 // Hide the accessory bar by default (remove this to show the access\
42 ory bar above the keyboard
43 // for form inputs)
44 if(window.cordova && window.cordova.plugins.Keyboard) {
45 cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
46 }
47 if(window.StatusBar) {
48 // org.apache.cordova.statusbar required
49 StatusBar.styleDefault();
50 }
51 });
52 })
53
54 .config(function($stateProvider, $urlRouterProvider) {
55 // Ionic uses AngularUI Router which uses the concept of states
56 // Learn more here: https://github.com/angular-ui/ui-router
57 // Set up the various states which the app can be in.
58 // Each state's controller can be found in controllers.js
59 $stateProvider
60 .state('page1', {
61 url: '',
62 templateUrl: 'page1.html'
63 });
64
65 // if none of the above states are matched, use this as the fallback
66 $urlRouterProvider.otherwise('');
67 });
68 </script>
69 </head>
70
71 <body ng-app="app" animation="slide-left-right-ios7">
72 <div>
73 <div>
74 <ion-nav-bar class="bar-stable">
75 <ion-nav-back-button class="button-icon icon ion-ios7-arrow-back\
76 ">Back</ion-nav-back-button>
77 </ion-nav-bar>
78
79 <ion-nav-view></ion-nav-view>
80 </div>
81 </div>
82
83 <script id="page1.html" type="text/ng-template">
84 <ion-view title="Calculator">
85 <ion-content padding="false" class="has-header">
86 <form>
87 <label class="item item-input" name="display">
88 <span class="input-label">Input</span>
89 <input type="text" placeholder="0" />
90 </label>
91 </form>
92
93 <div class="button-bar">
94 <button class="button button-stable button-block ">7</button>
97 <button class="button button-energized button-block ">/</but\
98 ton>
99 </div>
104 <button class="button button-energized button-block ">x</but\

105 ton>
106 </div>
111 <button class="button button-energized button-block ">-</but\
112 ton>
113 </div>
115 <button class="button button-assertive button-block ">C</but\
116 ton>
118 <button class="button button-positive button-block ">=</butt\
119 on>
120 <button class="button button-energized button-block ">+</but\
121 ton>
122 </div>
123 </ion-content>
124 </ion-view>
125 </script>
126 </body>
127 </html>
Here we’ll go step by step throguh the index.html file by explaining the needed lines of
code. I’m expecting that you have a decent understanding of HTML so I won’t explain
each and every HTML tag. Also, we’ll remove the unnecessary pieces, and move some
other parts of the code to different files.
The <meta> element:
1 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=n\

2 o, width=device-width">
3 ``
4
5 is used to properly resize our application on mobile devices.
6
7 Next, you can safely remove the `<style>` element completely out of the file:
<style> .angular-google-map-container { width: 100%; height: 504px; } </style> “‘

This CSS style is for the map template example, which we don’t have here, so to be completely
honest I’m not sure why they included it in this template. I’m guessing that if you’ll be following
this book at a later stage this will be removed by the Ionic Creator team.
Since we’re not going to use SASS in this example (we will cover this in the later chapter), we can
safely remove the following <link> tag:
1 
Next, as you can see, there is nowhere a reference to the js/app.js file inside the index.html file,
thus meaning it’s not used anywhere. If by any chance you’ve looked around the file structure of
the application we created in the first chapter you will most likely find this strange. Indeed, Ionic
Creator needs some additional tweaking, but I’m sure this will all be dealt with in the future.
Since the code inside the <script> element is JavaScript (AngularJS to be more exact) and it’s mixed
with HTML, we don’t want to have that so we’re going to copy the contents of the <script> element
and paste it (by overwriting its whole contents) to the file app.js (resides in the js folder).
So, our js/app.js file should now look like this (first few lines of comments are ommited):
1 angular.module('app', ['ionic'])
4 // Hide the accessory bar by default (remove this to show the accessory bar \
5 above the keyboard
7 if(window.cordova && window.cordova.plugins.Keyboard) {
9 }
10 if(window.StatusBar) {
11 // org.apache.cordova.statusbar required
12 StatusBar.styleDefault();
13 }
14 });
15 })
16
17 .config(function($stateProvider, $urlRouterProvider) {
18 // Ionic uses AngularUI Router which uses the concept of states
19 // Learn more here: https://github.com/angular-ui/ui-router
20 // Set up the various states which the app can be in.
21 // Each state's controller can be found in controllers.js
22 $stateProvider
23 .state('page1', {
24 url: '',
25 templateUrl: 'page1.html'
26 });
27
28 // if none of the above states are matched, use this as the fallback
29 $urlRouterProvider.otherwise('');
30 });
Since we removed the contents of the <script> element and pasted it in the js/app.js file, we
need to add a reference to it from the index.html file, and we can do this by placing the following
<script> element just before the ending </head> element:
<script src="js/app.js"></script>
The next important thing is the ng-app directive which is added as an attribute on the <body> tag.
This is just a way to let AngularJS know how to bootstrap the application⁷⁷. Important thing to note
is that we have to use the same name in app.js file when we define the root angular module. As
you can see from the app.js file:
angular.module('app', ['ionic'])
and from the index.html file:

<body ng-app="app" animation="slide-left-right-ios7">
in our example this name is simply app.

There’s just one more thing we’re going to do in the index.html file. See the another script tag
inside our body tag:
<script id="page1.html" type="text/ng-template">
Well, this also looks like a good piece to take out and put into its own file. Again, if you saw the file
structure from the application in the first chapter you might remember that the default place to put
the template files is inside the templates folder.
Since we don’t have that folder in our example, let’s create it inside the www folder. Then, create the
calculator.html file and paste the contents of the previously mentioned <script> tag. This is how
our templates/calculator.html file should look like now:
⁷⁷https://docs.angularjs.org/guide/bootstrap
3 <form>
5 <span class="input-label">Input</span>
6 <input type="text" placeholder="0">
7 </label>
8 </form>
13 <button class="button button-energized button-block ">/</button>
14 </div>
19 <button class="button button-energized button-block ">x</button>
20 </div>
25 <button class="button button-energized button-block ">-</button>
26 </div>
28 <button class="button button-assertive button-block ">C</button>
30 <button class="button button-positive button-block ">=</button>
31 <button class="button button-energized button-block ">+</button>
32 </div>
33 </ion-content>
34 </ion-view>
Just for reference, here’s the contents of the index.html file, as it should look like now:
1 <!DOCTYPE html>
2 <html>
3 <head>
7 <title></title>
8
9 <link href="lib/ionic/css/ionic.css" rel="stylesheet">
13
14 <script src="js/app.js"></script>
15 </head>
16
18 <div>
19 <div>
23 </ion-nav-bar>
25 </div>
26 </div>
27 </body>
28 </html>
app.js file
Contents of the app.js file bootstraps our Ionic (well, more acurately AngularJS) application,
configures necessary plugings, and defines the states in our application. As we said before, the name
of the root module matches the value given to the ng-app directive in the index.html file (app in
our case). Also, we need to inject ‘ionic’ module dependency to our root module so that we can use
the Ionic library directives and other Ionic components.
$ionicPlatform.ready event is triggered after the device (your mobile phone on which the
application is started) is all set up and ready to use. This includes plugins which are used with this
project. If you would try to check if some plugin is available outside the ready function callback,
you could get wrong results due to the fact that it is possible that some plugin would not have been
set up just yet. Using the aforementioned $ionicPlatform.ready event and placing your code to
check for plugin instantiations solves these issues. You can learn more about ionicPlatform utility
methods here: http://ionicframework.com/docs/api/utility/ionic.Platform/⁷⁸.
Inside the $ionicPlatform.ready function’s callback, we’re detecting if a Keyboard plugin is
available in our Ionic application. If so, we’re hiding the keyboard accessory bar (buttons like next,
previous and done). You can change these settings, and quite a bit of additional ones (see a full list
here⁷⁹), as per your project’s requirements.
As we mentioned before, you can check the list of installed plugins in your package.json file.
But, also, you can check them from your Terminal/Command prompt by executing the following
command:
ionic plugin list
In our case, the output should be as follows:
1 com.ionic.keyboard 1.0.4 "Keyboard"

2 cordova-plugin-console 1.0.1 "Console"
3 cordova-plugin-device 1.0.1 "Device"
4 cordova-plugin-splashscreen 2.1.0 "Splashscreen"
5 cordova-plugin-whitelist 1.0.0 "Whitelist"
From the listing above we can see that there is no StatusBar plugin (org.apache.cordova.statusbar),
so we can safely remove the corresponding lines in the app.js file.
Inside the config function callback we’re setting the routes for our application. Ionic uses AngularUI
Router⁸⁰ which uses the concept of states. Since we moved our calculator UI into the calcula-
tor.html file inside the templates folder, we have to adjust the path to it accordingly. Also, we’ll
put our calculator logic inside the so called CalculatorCtrl controller. The state definition, with
the acompanying controller definition should now look like this:
1 $stateProvider
2 .state('calculator', {
3 url: '',
4 templateUrl: 'templates/calculator.html',
5 controller: 'CalculatorCtrl'
6 });
Calculator logic with controllers

We will put the code of our CalculatorCtrl inside a new file. So, create a file called Calcula-
torCtrl.js inside the js folder. In the index.html put the reference to this new controller file by
adding:
⁷⁸http://ionicframework.com/docs/api/utility/ionic.Platform/
⁷⁹https://github.com/driftyco/ionic-plugin-keyboard
⁸⁰https://github.com/angular-ui/ui-router
<script src="js/CalculatorCtrl.js"></script>
just after the app.js inclusion script tag.

There are really multiple ways that we could have realized the calculator logic, but we’ll keep it
simple here. The contents of our CalculatorCtrl.js file will be as follows:
1 angular.module('calculator', [])
2 .controller('CalculatorCtrl', function($scope){
3 $scope.result = '';
4
5 $scope.btnClicked = function(btn){
6 if (btn == 'C'){
8 }
9 else if (btn == '='){
10 $scope.result = eval($scope.result);
11 }
12 else{
13 $scope.result += btn;
14 }
15 };
16 });
So, basically, what were doing here is we’re defining a new AngularJS module called calculator,
and we’re defining a controller called CalculatorCtrl. In the CalculatorCtrl we’re injecting
AngularJS’s $scope variable so that we can access the DOM in the calculator.html file.
Before explaining this rather simple code, we must not forget to inject the calculator module to
our root app module in the app.js file, so that it will now look like this:
angular.module('app', ['ionic', 'calculator'])
Ok, so, back to our controller code; first, we’re defining a variable result on the $scope, so that we
can show it in our template file (calculator.html).
Next, we defined a new function called btnClicked which accepts one parameter named btn. Inside
the function we’re checking for the passed parameter and we have three cases based on the value of
the parameter that is passed:
• if the parameter equals C in that case we’re clearing the result

• if the parameter equals = in that case we calculate the equation and show the result
• in any other case we’re just appending the buttons value to the current equation
Please note that because of brevity we haven’t added any additional checks like if
someone accidentally clicks two times on a button which represents some operation.
We will “fix” this in the next chapter when we’ll be polishing the application. Also, you
may have read on the Internet that using eval is wrong or just bad. True, it can be bad
if used to evaluate some other user input, but in this case we’ll be fine.
Finishing the calculator template

The only thing which is left for us to do is to add the appropriate function calls on the buttons in
the calculator.html template. Basically, all that we have to do is add the ng-click="btnClicked()
function call to each button, and pass in the appropriate parameter. The way this should look like is
as follows:
3 <form>
5 <span class="input-label">Result</span>
6 <input type="text" placeholder="0" ng-model="result">
7 </label>
8 </form>
10 <button class="button button-stable button-block" ng-click="btnClick\
11 ed('7')">7</button>
13 ed('8')">8</button>
15 ed('9')">9</button>
16 <button class="button button-energized button-block" ng-click="btnCl\
17 icked('/')">/</button>
18 </div>
21 ed('4')">4</button>
23 ed('5')">5</button>
25 ed('6')">6</button>
27 icked('*')">x</button>
28 </div>
31 ed('1')">1</button>
33 ed('2')">2</button>
35 ed('3')">3</button>
37 icked('-')">-</button>
38 </div>
40 <button class="button button-assertive button-block" ng-click="btnCl\
41 icked('C')">C</button>
43 ed('0')">0</button>
44 <button class="button button-positive button-block" ng-click="btnCli\
45 cked('=')">=</button>
47 icked('+')">+</button>
48 </div>
49 </ion-content>
50 </ion-view>
As you can see from the code, we’re passing to the function an argument which basically represents
the button which was clicked.
Also, worth noting is that we used the
ng-model="result"
on the input element, so that we can access it from the controller through the AngularJS $scope
object.
Run the application

Now you can run the application by executing the command
ionic serve
and you should see your awesome calculator open up in your browser.
As mentioned in the begining of this chapter, you can take a look at the source code on GitHub⁸¹,
or you can take a look at the live example⁸² of this application.
⁸¹https://github.com/Hitman666/Ionic_2ndTutorial
⁸²http://nikola-dev.com/IonicCalculator/mobile.html
Conclusion
In this chapter we showed you how to create a calculator application step by step. We showed how
to create a mockup of our idea, then we showed how to create an interface by using Ionic Creator,
and finally how to refactor our application and create the logic with controllers.
In the next chapter we’re going to take a look at how to test your application on the real physical
devices, and also how to use Ionic.io cloud service to share our application with other users without
going through the app store. Also, we’re going to take a look how to implement Google Analytics
and Google Admob ads, and how to prepare our application for the stores. Also, we’ll take a look at
how to customize the icons and the application’s splash screen.
This is the third post in a series of posts which will teach you how to take advantage of your web
development knowledge in building hybrid applications for iOS and Android. The first post in this
series was all about How to get started with Ionic framework on Windows and Mac⁸³, the second
one was about How to create a calculator application with Ionic framework by using Ionic Creator
for UI⁸⁴.
This third post explains:
• How to polish our existing calculator application

• How to create icons and splash screen images automatically in Ionic framework
• How to implement Google AdMob ads
• How to use Ionic.io cloud service to share our application with other users without going
through the app stores
• How to test our application on the real physical devices and emulators
⁸³http://blog.pluralsight.com/ionic-framework-on-mac-and-windows
⁸⁴http://tutorials.pluralsight.com/review/how-to-create-a-calculator-application-with-ionic-framework-by-using-ionic-creator-for-
ui/article.md
How to polish our existing calculator
application
So, if you’ve been following this book chapter by chapter then you probably already have the
Calculator application ready and running on your machine in the web browser by using the ionic
serve command.
If you just dropped by, or you would like to “start anew” you can clone the finished version of the 2nd
tutorial from Github⁸⁵. After cloning, you should run npm install to install all the dependencies.
After this the command ionic serve should run the application locally on your computer, and you
should see it open up in your default browser.
So, what we have at this point is a working simple calculator application that lacks some sanitization
checks and design improvements. We’ll fix this in this section.
Sanitization check
In our current application, we don’t have a security measure against the possible malformed input.
For example, one could enter two plus (+) signs one after another, which would consequently produce
an error.
So, in order to handle this, we’re going to wrap our evaluation line of code in the try/catch block and
we’re going to show an alert to the user using the $ionicPopup⁸⁶ service (injected as a dependency
in the CalculatorCtrl controller). The whole contents of the CalculatorCtrl.js file should look
like this now:
2 .controller('CalculatorCtrl', function($scope, $ionicPopup){
5 if (btn == 'C'){
7 }
8 else if (btn == '='){
9 if ($scope.result == ''){
10 return;
⁸⁵https://github.com/Hitman666/Ionic_2ndTutorial
⁸⁶http://ionicframework.com/docs/api/service/\protect\char”0024\relaxionicPopup/
51
How to polish our existing calculator application 52
11 }
12 try {
13 $scope.result = eval($scope.result).toFixed(0);
14 }
15 catch (err) {
16 $ionicPopup.alert({
17 title: 'Malformed input',
18 template: "Ooops, please try again..."
19 });
21 }
22 }
23 else{
25 }
26 };
27 });
Additionally, we’re checking to see if the $scope.result variable contains anything at the time the
equals button is pressed, in order to avoid the undefined error that would otherwise happen. You
can test this yourself by running the application and then first clicking on the equal button (=) and
then on for example button 5, and you would see the text ‘undefined5’ appear in the Result area.
Also, you may have noticed that we added the toFixed⁸⁷ after our eval function call,
in order to show no decimal places in case of a division operation. At this point you
certainly realize the “problem” of our SuperSimple Calculator - it has no way of entering
the point (.), but I hope that by now you learned enough to add this option yourself, if
you would need it. If, however, you would like me to add this, please request it in the
comments and I’ll make sure to add it in the update of this book.
The way this should look like now if we intentionally make an error while inputting the formula is
shown on the image below.
⁸⁷http://www.w3schools.com/jsref/jsref_tofixed.asp
Clearly, there are multiple ways you could approach this problem further in order to
create a better user experience. One idea is to check on every button click if the current
formula would execute correctly with eval and if not then immediately inform the user,
or completely ignore the last clicked button. I encourage you to create your own way
of the “improved UX⁸⁸” and share it in the comments.
Design changes
If we’re being honest, our app currently doesn’t look quite representative. So, we’re going to change
that in order to make it a bit nicer. Most of the changes that we’re going to make will be in the CSS
files. However, if you talk with any web designer these days they will tell you that using purse CSS
is, well, outdated. Ionic, as awesome as it is, has a support for SASS⁸⁹. So, in order to take advantage
of the variables, nesting, mixins and all other great stuff that SASS provides, we’re going to prepare
our project to use SASS by entering the following command in the Terminal/Command prompt:
ionic setup sass
Along with some other npm install related output, you should see something like this:
⁸⁸https://en.wikipedia.org/wiki/User_experience
⁸⁹http://sass-lang.com/
1 Successful npm install

2 Updated C:\Users\Nikola\Desktop\IonicTesting\Ionic_3rdTutorial\www\index.html
3
4 Ionic project ready to use Sass!
5 * Customize the app using scss/ionic.app.scss
6 * Run ionic serve to start a local dev server and watch/compile Sass to CSS
7
8 [14:56:01] Using gulpfile ~\Desktop\IonicTesting\Ionic_3rdTutorial\gulpfile.js
9 [14:56:01] Starting 'sass'...
10 [14:56:02] Finished 'sass' after 1.76 s
11
12 Successful sass build
13 Ionic setup complete
Our main starting point in changing how our application looks like is the scss/ionic.app.scss
file. It’s contents is short, and even though you may not have used SASS before, I’m sure it will look
logical to you:
1 /*
2 To customize the look and feel of Ionic, you can override the variables
3 in ionic's _variables.scss file.
4
5 For example, you might change some of the default colors:
6
7 $light: #fff !default;
8 $stable: #f8f8f8 !default;
9 $positive: #387ef5 !default;
10 $calm: #11c1f3 !default;
11 $balanced: #33cd5f !default;
12 $energized: #ffc900 !default;
13 $assertive: #ef473a !default;
14 $royal: #886aea !default;
15 $dark: #444 !default;
16 */
17
18 // The path for our ionicons font files, relative to the built CSS in www/css
19 $ionicons-font-path: "../lib/ionic/fonts" !default;
20
21 // Include all of Ionic
22 @import "www/lib/ionic/scss/ionic";
As you can see, here we can override the default Ionic colors. Since you most probably have
programming background, I’m sure you realize how important and useful SASS is.
When, for example, you want to change the color you only need to change it in one place in one
variable, without having to trace it through all the files and change the certain color in all the places
that it is used.
Also, here you can see that we’re including (better said importing) the other Ionic SASS files, which
are nicely structured in different files. You don’t have to worry about multiple files because the
gulpfile task produces a single minified version of the CSS on every save. I encourage you to check
out the contents of the gulpfile.js file and see for yourself.
On the image below you can see what I came up with after changing few of the CSS rules (and a
slight addition to our HTML template that I’ll address additionally):
I’m sure that more design-inclined readers will come up with way more slick design than this and
I encourage you to share your images/scss changes with the rest of us, and I promise to incorporate
the best one in the version of the book (with the proper credits, of course).
Now we’re going to go through the parts that were changed so that you can follow along in your
example and see for yourself. But, before you start doing the changes you’ll need to add the following
link code to your index.html file just below the <title> tag in order to load the CSS file generated
through SASS (we removed this in the second chapter):
<link href="css/ionic.app.css" rel="stylesheet">
As for the changes, here is the final content of the templates/calculator.html file:
<ion-
view title="SuperSimple Calculator"> <ion-content padding="false" class="has-header"
scroll="false"> <section class = "home-container"> <div class="myInputRow"> <form>
<input type="text" placeholder="0" ng-model="result" class="myResultInput" /> </form>
</div> <div class="button-bar row"> <button class="button button-stable button-block"
ng-click="btnClicked('7')">7</button> <button class="button button-stable button-

block" ng-click="btnClicked('8')">8</button> <button class="button button-stable button-
block" ng-click="btnClicked('9')">9</button> <button class="button button-energized
button-block" ng-click="btnClicked('/')">/</button> </div> <div class="button-bar
row"> <button class="button button-stable button-block" ng-click="btnClicked('4')">4</button>
<button class="button button-stable button-block" ng-click="btnClicked('5')">5</button>
<button class="button button-energized button-block" ng-click="btnClicked('*')">x</button>
</div> <div class="button-bar row"> <button class="button button-stable button-block"
ng-click="btnClicked('1')">1</button> <button class="button button-stable button-
block" ng-click="btnClicked('2')">2</button> <button class="button button-stable button-
block" ng-click="btnClicked('3')">3</button> <button class="button button-energized
button-block" ng-click="btnClicked('-')">-</button> </div> <div class="button-bar
row"> <button class="button button-assertive button-block" ng-click="btnClicked('C')">C</button>
<button class="button button-positive button-block" ng-click="btnClicked('=')">=</button>
<button class="button button-energized button-block" ng-click="btnClicked('+')">+</button>
</div> </section> </ion-content> </ion-view> Here is the breakdown of the changes that I
made:
• I first removed the <span class="input-label">Result</span> and edited the form element
to just contain the following line of code:
<form><input type="text" placeholder="0" ng-model="result" class="myResultInput"></form>
• Notice the added class myResultInput on the input element

• Also, notice the scroll="false" on the ion-content tag, which disables content scrolling
• I changed the title to SuperSimple Calculator from just Calculator on the ion-view tag
• Then I wrapped this form element in a div element with the class myInputRow
• Next, on the every div element with the class button-bar I added the class row
• Finally, I wrapped this whole content in the div element with class home-container
In the scss/ionic.app.scss file I added the definitions for these new classes:
1 .myResultInput {
2 font-size: 36px !important;
3 text-align: right !important;
4 width: 100%;
5 line-height: 36px !important;
6 height: 54px !important;
7 padding: 10px !important;
8 }
9
10 .home-container {
11 display: -webkit-flex;
12 -webkit-flex-direction: column;
13 height: 100%;
14 }
15
16 .home-container > .row {
17 -webkit-flex: 2;
18 padding: 0px !important;
19 }
20
21 .home-container > .myInputRow{
22 -webkit-flex: 1 !important;
23 }
Flexbox is used here as a basis in making the layout which fills the whole content horizontally. You
can learn more about it from this Ionic specific tutorial⁹⁰, or you can learn more about Flexbox in
general from this tutorial⁹¹.
Next, in the lib/scss/_variables.scss file I changed the values of the following variables:
1 $button-block-margin: 0px !default;

2 $button-font-size: 32px !default;
3 $button-height: 70px !default;
Finally, in the lib/scss/_button-bar.scss file I changed the value of the following rule inside the
button-bar .button rule:
border-width: 1px;
This way we now have an interface which fills the whole available content.
⁹⁰http://www.joshmorony.com/how-to-create-complex-layouts-in-ionic/
⁹¹https://css-tricks.com/snippets/css/a-guide-to-flexbox/
How to create icons and splash screen images

automatically in Ionic framework
The icon is an important part of your application because it represents your application’s brand, and
it helps to identify quickly where the app is on your phone. In case you’re familiar with creating
apps then you will remember that it is a tedious process to create a lot of different size images both
for iOS and Android platforms. Also, the same goes for the so-called splash screen that shows up
every time the application starts. Although having a splash screen is not mandatory, it certainly
adds up to the feeling of a complete and professional application, which one would certainly want
to convey with his application.
Ionic helps tremendously with this by providing a single Ionic CLI command to generate all
the needed icon and splash screen sizes for us automatically. Also, Ionic created Photoshop Icon
Template⁹² and Photoshop Splash Screen Template⁹³, which you can download for free and use as a
guideline for creating an icon.
For when you’re creating a branded product having a custom made icon is definitelly a must.
However, in this case, we’ll show how to use one of the free services to search for a free icon which
we can use in our application (even if our application is a commercial application). I tend to use
IconFinder⁹⁴ a lot, and here are the setting which you have to use in order to filter out the calculator
images which are Free (PRICE) and can be used in commercial applications and which do not even
require a link back (LICENSE TYPE). Of course, you can also choose to buy an image if you happen
to find one that you like. You can additionally search by format, size and background. The filters
should look like this:
⁹²http://code.ionicframework.com/resources/icon.psd
⁹³http://code.ionicframework.com/resources/splash.psd
⁹⁴https://www.iconfinder.com
We’re going to use the first one in the second row. Simply click on it, and you should get to the
download page that looks like it’s shown on the image below:
To download it just click on the green PNG button. We’re going to alter it just a bit by making it a
size of 128x128px, so that it will finally look like this:
Now (download if you haven’t yet and) open up the Photoshop Icon Template⁹⁵ and you should see:
⁹⁵http://code.ionicframework.com/resources/icon.psd
Don’t worry if you don’t have Photoshop, you can use open source tools like for example
Gimp⁹⁶ or Paint.NET⁹⁷.
Now drag the calculator icon into the Photoshop and make sure you place the icon within the bounds
of the blue guides. You should have something like this:
Next, remove the guides by going to View->Show and remove the Guides option.
⁹⁶http://www.gimp.org/
⁹⁷http://www.getpaint.net/index.html
Also, you can remove the Grid in the same way if you like. Finally, remove the icon-cut-guide
layer by clicking on the eye icon next to it:
Now save the file by going to File->Save for Web and select PNG-24 and after that click the Save...
button and save the image to Desktop as icon.png:
Repeat the process to create the splash screen image and name is splash.png. The image I came up
with looks like this in Photoshop:
If you’ve followed the second chapter you should have the app. In case you don’t have
it, you can clone it from Github⁹⁸.
Now that you have both icon.png and splash.png images ready, you have to copy them in the
resources folder in the root of the application (next to the folders like www and plugins). If you
don’t have this folder, then create it. Next, navigate with your Terminal/Command prompt to the
root folder of the application and run the following command:
ionic resources
If at this point you get an error like this:
1 C:\Users\Nikola\Desktop\IonicTesting\Ionic_3rdTutorial>ionic resources
2 ? No platforms have been added.
3 ? Please add a platform, for example: ionic platform add ios
4 ? Or provide a platform name, for example: ionic resources android
that means that you haven’t added any platforms yet to which Ionic should build. Since we’re going
to build the app for both Apple Store and Android Play Store we’re going to use the following two
commands:
⁹⁸https://github.com/Hitman666/Ionic_2ndTutorial
1 ionic platform add android

2 ionic platform add ios
You should see an output similar to this:
1 C:\Users\Nikola\Desktop\IonicTesting\Ionic_3rdTutorial>ionic platform add android

3 Adding icons for platform: android
4 npm http GET https://registry.npmjs.org/cordova-android
5 npm http 304 https://registry.npmjs.org/cordova-android
6 npm http GET https://registry.npmjs.org/cordova-android
7 npm http 304 https://registry.npmjs.org/cordova-android
8 Adding android project...
9 Creating Cordova project for the Android platform:
10 Path: platforms\android
11 Package: com.ionicframework.ionic2ndtutorial616047
12 Name: Ionic_2ndTutorial
13 Activity: MainActivity
14 Android target: android-22
15 Copying template files...
16 Android project created with cordova-android@4.0.2
17 Running command: C:\NodeJS\node.exe C:\Users\Nikola\Desktop\IonicTesting\Ionic_3\
18 rdTutorial\hooks\after_prepare\010_add_platform_class.js
19
20 C:\Users\Nikola\Desktop\IonicTesting\Ionic_3rdTutorial
21 add to body class: platform-android
22 Installing "com.ionic.keyboard" for android
23 Installing "cordova-plugin-console" for android
24 Installing "cordova-plugin-device" for android
25 Installing "cordova-plugin-splashscreen" for android
26 Installing "cordova-plugin-whitelist" for android
27 Saving platform to package.json file
28
29 C:\Users\Nikola\Desktop\IonicTesting\Ionic_3rdTutorial>ionic platform add ios
31 Adding icons for platform: ios
32 WARNING: Applications for platform ios can not be built on this OS - win32.
33 npm http GET https://registry.npmjs.org/cordova-ios
34 npm http 200 https://registry.npmjs.org/cordova-ios
35 npm http GET https://registry.npmjs.org/cordova-ios
36 npm http 200 https://registry.npmjs.org/cordova-ios
37 npm http GET https://registry.npmjs.org/cordova-ios/-/cordova-ios-3.8.0.tgz
38 npm http 200 https://registry.npmjs.org/cordova-ios/-/cordova-ios-3.8.0.tgz

39 Adding ios project...
40 iOS project created with cordova-ios@3.8.0
41
42 Running command: C:\NodeJS\node.exe C:\Users\Nikola\Desktop\IonicTesting\Ionic_3\
43 rdTutorial\hooks\after_prepare\010_add_p
44 latform_class.js C:\Users\Nikola\Desktop\IonicTesting\Ionic_3rdTutorial
45 add to body class: platform-ios
46 Installing "com.ionic.keyboard" for ios
47 Installing "cordova-plugin-console" for ios
48 Installing "cordova-plugin-device" for ios
49 Installing "cordova-plugin-splashscreen" for ios
50 Installing "cordova-plugin-whitelist" for ios
51 Saving platform to package.json file
After this you can safely run the ionic resources command and you should get the following
output:
1 C:\Users\Nikola\Desktop\IonicTesting\Ionic_3rdTutorial>ionic resources
2 Ionic icon and splash screen resources generator
3 uploading icon.png...
4 uploading splash.png...
5 ? icon.png (192x192) upload complete
6 ? splash.png (2208x2208) upload complete
7 generating splash ios Default~iphone.png (320x480)...
8 generating splash ios Default@2x~iphone.png (640x960)...
9 generating splash ios Default-Portrait~ipad.png (768x1024)...
10 ? splash ios Default~iphone.png (320x480) generated
11 generating splash ios Default-Portrait@2x~ipad.png (1536x2048)...
12 ? splash ios Default@2x~iphone.png (640x960) generated
13 generating splash ios Default-Landscape~ipad.png (1024x768)...
14 ? splash ios Default-Portrait~ipad.png (768x1024) generated
15 generating splash ios Default-Landscape@2x~ipad.png (2048x1536)...
16 ? splash ios Default-Landscape~ipad.png (1024x768) generated
17 generating splash ios Default-Landscape-736h.png (2208x1242)...
18 ? splash ios Default-Portrait@2x~ipad.png (1536x2048) generated
19 generating splash ios Default-736h.png (1242x2208)...
20 ? splash ios Default-Landscape-736h.png (2208x1242) generated
21 generating splash ios Default-667h.png (750x1334)...
22 ? splash ios Default-667h.png (750x1334) generated
23 generating splash ios Default-568h@2x~iphone.png (640x1136)...
24 ? splash ios Default-736h.png (1242x2208) generated
25 generating splash android drawable-port-xxxhdpi-screen.png (1280x1920)...

26 ? splash android drawable-port-xxxhdpi-screen.png (1280x1920) generated
27 generating splash android drawable-port-xxhdpi-screen.png (960x1600)...
28 ? splash android drawable-port-xxhdpi-screen.png (960x1600) generated
29 generating splash android drawable-port-xhdpi-screen.png (720x1280)...
30 ? splash ios Default-568h@2x~iphone.png (640x1136) generated
31 generating splash android drawable-port-hdpi-screen.png (480x800)...
32 ? splash android drawable-port-hdpi-screen.png (480x800) generated
33 ? splash android drawable-port-mdpi-screen.png (320x480) generated
34 generating splash android drawable-port-ldpi-screen.png (240x320)...
35 ? splash android drawable-port-xhdpi-screen.png (720x1280) generated
36 generating splash android drawable-land-xxxhdpi-screen.png (1920x1280)...
37 ? splash android drawable-port-ldpi-screen.png (240x320) generated
38 generating splash android drawable-land-xxhdpi-screen.png (1600x960)...
39 ? splash ios Default-Landscape@2x~ipad.png (2048x1536) generated
40 generating splash android drawable-land-xhdpi-screen.png (1280x720)...
41 ? splash android drawable-land-xhdpi-screen.png (1280x720) generated
42 generating splash android drawable-land-hdpi-screen.png (800x480)...
43 ? splash android drawable-land-xxxhdpi-screen.png (1920x1280) generated
44 generating splash android drawable-land-mdpi-screen.png (480x320)...
45 ? splash android drawable-land-hdpi-screen.png (800x480) generated
46 generating splash android drawable-land-ldpi-screen.png (320x240)...
47 ? splash android drawable-land-ldpi-screen.png (320x240) generated
48 generating icon ios icon-small@3x.png (87x87)...
49 ? splash android drawable-land-xxhdpi-screen.png (1600x960) generated
50 generating icon ios icon-small@2x.png (58x58)...
51 ? icon ios icon-small@3x.png (87x87) generated
52 generating icon ios icon-small.png (29x29)...
53 ? icon ios icon-small.png (29x29) generated
54 generating icon ios icon-76@2x.png (152x152)...
55 ? splash android drawable-land-mdpi-screen.png (480x320) generated
56 generating icon ios icon-76.png (76x76)...
57 ? icon ios icon-small@2x.png (58x58) generated
59 ? icon ios icon-76@2x.png (152x152) generated
61 ? icon ios icon-76.png (76x76) generated

76 generating icon ios icon@2x.png (114x114)...
78 generating icon ios icon.png (57x57)...
80 generating icon android drawable-xxxhdpi-icon.png (192x192)...
81 ? icon ios icon@2x.png (114x114) generated
82 ? icon android drawable-xxhdpi-icon.png (144x144) generated
83 generating icon android drawable-xhdpi-icon.png (96x96)...
84 ? icon ios icon.png (57x57) generated
85 ? icon android drawable-hdpi-icon.png (72x72) generated
86 generating icon android drawable-mdpi-icon.png (48x48)...
87 ? icon android drawable-xxxhdpi-icon.png (192x192) generated
88 generating icon android drawable-ldpi-icon.png (36x36)...
89 ? icon android drawable-xhdpi-icon.png (96x96) generated
90 ? icon android drawable-ldpi-icon.png (36x36) generated
91 ? icon android drawable-mdpi-icon.png (48x48) generated
From the output you can see how much icons were created and hopefully now you can see how much
time this saved. All the needed configuration regarding the icons and splash screens was generated
by Ionic and placed in the config.xml file.
It’s worth noting that you will not see the icon nor the splash screen when using the browser testing
or Ionic View testing (discussed in more detail in the How to use Ionic.io cloud service to share our
application with other users without going through the app store section below). Instead, you will
only see these once you deploy them to the actual physical device or the emulator (which we’ll cover
in the How to test our application on the real physical devices and emulators section below).
You can add an iOS platform if your developing on a Windows machine, and ionic resources
command will generate icons and splash screens for it. However, keep in mind that you will not be
able to build the project for iOS on your Windows machine. Instead, you’ll need a Mac computer in
order to do so. We’ll cover building the app in more detail in the aforementioned How to test our
application on the real physical devices and emulators section below.
How to implement Google AdMob ads

There are multiple ways you can earn money with your app these days and here are just a few:
• Paid app - ask for a flat out price for your app on the App/Play Store
• Freemium - give the app for free but charge for in-app purchases like adding some extra
features (think more gold or faster production in game apps)
• Ad-based - show ads inside your application. Potentially offer the in-app purchase to remove
the adds
What we’re going to cover here is the Ad-based monetization option where we’ll show how to
add Google AdMob ads to our calculator application. There are two parts to implementing Google
AdMob ads to our Ionic project. I broke down the steps in two parts: AdMob settings and Ionic
settings.
I made a short video tutorial⁹⁹ about how to add AdMob to your Ionic project, so you
can check that out too.
AdMob settings
Let’s start with AdMob settings:
1. Sign in/Sign up for AdMob at https://www.google.com/admob/¹⁰⁰

2. Click the **Monetize new app **button:
⁹⁹https://www.youtube.com/watch?v=uvHW7Cb29lo
¹⁰⁰https://www.google.com/admob/
1. If your app is not yet published you can add it manually:

1. Create new tracking ID:
1. Configure the adds type, size, placement, style, name:

1. You can read additional info on how to implement GA and AdMob, but for now let’s just click
Done:
1. You will now see the following similar screen:
The most important thing to note here is this Ad unit ID, which in my test case is ca-app-pub-
7957971173858308/3599533362. Please make a note of this string as it’s the most important part of
this setting.
1. Create as much of the Ad units as you may need (for each platform[iOS, Android] and ad
format [Banner, Interstitial]). In my case, I just created the additional Interstitial ad and will
use them in both iOS and Android devices.
Ionic settings
Navigate to the root of the application with your Terminal/Command prompt and execute the
following command to add the cordova-plugin-admobpro¹⁰¹ plugin:
ionic plugin add cordova-plugin-admobpro
You should see the following output after running the command:
1 C:\Users\Nikola\Desktop\IonicTesting\Ionic_3rdTutorial>cordova plugin add cordov\

2 a-plugin-admobpro
3 Fetching plugin "cordova-plugin-admobpro" via npm
4 npm http GET https://registry.npmjs.org/cordova-plugin-admobpro
5 npm http 200 https://registry.npmjs.org/cordova-plugin-admobpro
6 npm http GET https://registry.npmjs.org/cordova-plugin-admobpro/-/cordova-plugin\
7 -admobpro-2.9.6.tgz
8 npm http 200 https://registry.npmjs.org/cordova-plugin-admobpro/-/cordova-plugin\
9 -admobpro-2.9.6.tgz
10 Installing "cordova-plugin-admobpro" for android
11 Fetching plugin "cordova-plugin-extension" via npm
12 npm http GET https://registry.npmjs.org/cordova-plugin-extension
13 npm http 304 https://registry.npmjs.org/cordova-plugin-extension
14 Installing "cordova-plugin-extension" for android
15 Fetching plugin "cordova-plugin-googleplayservices" via npm
16 npm http GET https://registry.npmjs.org/cordova-plugin-googleplayservices
17 npm http 200 https://registry.npmjs.org/cordova-plugin-googleplayservices
18 npm http GET https://registry.npmjs.org/cordova-plugin-googleplayservices/-/cord\
19 ova-plugin-googleplayservices-19.0.3.tgz
20 npm http 200 https://registry.npmjs.org/cordova-plugin-googleplayservices/-/cord\
21 ova-plugin-googleplayservices-19.0.3.tgz
22 cordova-plugin-googleplayservices" will not install due to "C:\Users\Nikola\Desk\
23 top\IonicTesting\Ionic_3rdTutorial\plugins\com.google.playservices" being instal\
24 led.
25 Installing "cordova-plugin-admobpro" for ios
26 Installing "cordova-plugin-extension" for ios
If you get an error like: Error: 404 Not Found: cordova-plugin-admobpro then please
check that you indeed have the latest version of cordova installed. You can update to
the newest version by executing npm install -g cordova
Now, add the following code to your app.js file, inside the .run function so that the run function
would now look like:
¹⁰¹https://github.com/floatinghotpot/cordova-admob-pro
3 // Hide the accessory bar by default (remove this to show the accessory \
4 bar above the keyboard
6 if (window.cordova && window.cordova.plugins.Keyboard) {
8 }
9 var admobid = {
10 banner: 'ca-app-pub-7957971173858308/9721191760',
11 interstitial: 'ca-app-pub-7957971173858308/3674658165'
12 };
13 if (AdMob) {
14 AdMob.createBanner({
15 adId: admobid.banner,
16 position: AdMob.AD_POSITION.BOTTOM_CENTER,
17 autoShow: true
18 });
19 }
20 })
21 })
Of course, change it according to your own admob_key which you obtained in the first part (step 8).
Also, you may want to have a different add for each platform and the way how you would initialize
the admobid object is this:
1 // select the right Ad Id according to platform

2 var admobid = {};
3 if( /(android)/i.test(navigator.userAgent) ) { // for android & amazon-fireos
4 admobid = {
5 banner: 'ca-app-pub-xxx/xxx',
6 interstitial: 'ca-app-pub-xxx/yyy'
7 };
8 }
9 else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) { // for ios
10 admobid = {
11 banner: 'ca-app-pub-xxx/zzz',
12 interstitial: 'ca-app-pub-xxx/kkk'
13 };
14 }
15 else { // for windows phone
16 admobid = {
17 banner: 'ca-app-pub-xxx/zzz',
18 interstitial: 'ca-app-pub-xxx/kkk'
19 };
20 }
The documentation of this plugin is awesome with detailed examples and finished example projects,
so if you run into any problems make sure to check it out. Of course, you can always ask below in the
comments if you get stuck. One common thing that you might have to do is to install some extras in
Android SDK manager (type android sdk in your Terminal/Command prompt to launch it) which
are marked as Installed on the image below:
For more information about the Android SDK manager, take a look at the section about How to test
our application on the real physical devices and emulators.
This plugin’s documentation states an interesting fact that it is strongly recommend to use the
Interstitial ad type, because it brings more than 10 times profit than the banner Ad. Here’s the
table from the official documentation¹⁰²:
Ad Format Banner Interstitial
Click Rate < 1% 3-15%
RPM (1k impressions) 0.5$ - 4$ 10-100$
Banner ad is the small add that is usually placed in the bottom of the screen, whereas
Interstitial ads are full screen ads that cover the interface of their host app. Therefore,
you may want rather to opt for this kind of an ad instead for the Banner one.
Of course, you can choose to use both also, which is exactly what we will do. First, add the following
line of code in the if (Admob) case in the app.js file which prepares the Interstitial Ad for showing:
1 AdMob.prepareInterstitial( {adId:admobid.interstitial, autoShow:false} );
Now, lets say we want to show the Interstitial ad every 10th time the user clicks on any of our
calculator buttons. To achieve this, we’re going to set up a counter in our CalculatorCtrl.js file
¹⁰²https://github.com/floatinghotpot/cordova-admob-pro#tips
and increase it every time the button is pressed. Once the counter reaches the value 10, we will show
the Interstitial Ad and reset the counter. This is how this looks like in the code:
4 $scope.counter = 1;
6 if (btn == 'C'){
8 }
9 else if (btn == '='){
11 return;
12 }
13 try {
15 }
16 catch (err) {
20 });
22 }
23 }
24 else{
26 }
27 if ($scope.counter++ == 10){
28 AdMob.showInterstitial();
30 }
31 };
32 });
So, the only novelties in this file are the $scope.counter variable and the added if statement inside
the $scope.btnClicked function.
We may need to play with the setting of after how many button presses we want to show the
Interstitial ad. We may even add it only after the users presses the equals (=) button every 5th time,
or we may even add it on a timer. Any way you choose, make sure you don’t get too jumpy on your
users or they’ll quit using your app.
Just for reference, here is the code which you would have to add to the if (AdMob) case in app.js
file in order to show the add every two minutes:
1 setInterval(AdMob.showInterstitial, 2*60*1000);
You can look at the accompanying StackOverflow question¹⁰³ which I answered which discusses
this matter in more detail.
Of course, you would then probably want to remove the Interstitial ad showing on every 10-th click.
Again, it’s important to note that there’s probably no exact formula here, but there are some best
practices, and this is what Google has to say about it:
Interstitial ads work best in apps with natural transition points. The conclusion of a task
within an app, like sharing an image or completing a game level, creates such a point.
Because the user is expecting a break in the action, it’s easy to present an interstitial
without disrupting their experience. Make sure you consider at which points in your
app’s workflow you’ll display interstitials, and how the user is likely to respond.
You can learn a bit more about it here¹⁰⁴.

The solution for which I personally opted for in the end was to show the banner ads all the
time and to show the Interstitial ad every 5th time when the equals (=) button has been pressed.
Additionally I wait for 1 second after the 5th button click has been reached before showing the
Interstitial ad. Here’s how my CalculatorCtrl.js file looks like now:
6 if (btn == 'C'){
8 }
9 else if (btn == '='){
11 return;
12 }
13 try {
15 }
¹⁰³http://stackoverflow.com/questions/31095303/show-interstitial-ad-via-admob-in-ionic-every-2-minutes
¹⁰⁴https://developers.google.com/admob/android/interstitial
16 catch (err) {
20 });
22 }
23 //on every 5th result show the Interstitial ad one second after the \
24 result appears
25 if ($scope.counter++ == 5){
26 setTimeout(function(){
27 if (AdMob){
28 AdMob.showInterstitial();
29 }
31 }, 1000);
32 }
33 }
34 else{
36 }
37 };
38 });
How to use Ionic.io cloud service to share our

application with other users without going through
the app store
Having the ability to immediately get feedback on something that you’re working on, without
having to install the app manually on your clients devices or waiting for the App Store/Play
Store approval is indispensable for constant feedback loop which is crucial in rapid application
development. This is something that Eric Ries stresses a lot in his book The Lean Startup¹⁰⁵, which I
already mentioned in the second chapter.
In Ionic this is actually easier than you may have thought. All you have to do is create the account on
https://apps.ionic.io¹⁰⁶ and after that in your Terminal/Command prompt in the root of the project
just type the following command:
ionic upload
¹⁰⁵http://www.nikola-breznjak.com/blog/books/the-lean-startup-eric-ries/
¹⁰⁶https://apps.ionic.io
This will prompt you to login with your username and password combination which you created in
the previous step. After successful login the app will be uploaded to the Ionic.io cloud service and
you will be able to view the app through an app called Ionic View¹⁰⁷, which you can download for
free on your smartphone from the App Store/Play Store.
The output of the above command is short: “‘ > ionic upload Uploading app…. Saved app_id, writing
to ionic.io.bundle.min.js… Successfully uploaded (a82ec345)
Share your beautiful app with someone:
$ ionic share EMAIL
Saved api_key, writing to ionic.io.bundle.min.js… “‘
And, as stated in the output, to share your app with a client or a friend, without first having to go
through the App Store/Play Store, just type:
ionic share EMAIL
where, of course, you change EMAIL with an actual email address.

On the image below it’s shown how the interface of https://apps.ionic.io/apps¹⁰⁸ looks like once
you’re logged in and you can see the list of your uploaded apps:
¹⁰⁷http://view.ionic.io/
¹⁰⁸https://apps.ionic.io/apps
After you entered the command for sharing your application the person gets an email like this:
After your client/friend clicks on the View app link he’s taken to the landing page shown on the
image below where they basically have to login or create an account:
Once the client/friend creates the account or logs in he will see the same app listed as we showed
before. As noted before, in order for them to test this application on their phone, all they have to do
is install the Ionic View¹⁰⁹ application, run it, login, click on the application and select View App as
shown on the image below:
¹⁰⁹http://view.ionic.io/
How to test our application on the real physical

devices and emulators
If you run the application (to which you added AdMob) in the browser, you will see an error in the
Console output (if you’re using Chrome¹¹⁰ or Firebug¹¹¹) that AdMob is not defined, as shown on
the image below:
¹¹⁰https://www.google.com/chrome/
¹¹¹http://getfirebug.com/
Also, if you view the app in Ionic View you will notice that no ads will show up. This is because
Cordova plugins don’t work in the browser, nor in the Ionic View. Instead, they have to be tested
on the real device or in an emulator (in iOS terminology the word simulator is used).
In this section, we’re going to show how to install the needed prerequisites and how to run our
application in an emulator and on the actual physical device for both iOS and Android.
Before we go any further, we have to add the cordova.js file.
In the previous versions of Ionic, during development in the browser, this file would
have resulted in a 404 Not found error, but once deployed on a real physical device
or emulator it would work fine. As of new versions of Ionic this is fixed so that the
cordova.js file has a simple content (when included in index.html and tested in
browser):
// mocked cordova.js response to prevent 404 errors during development
Add the following script tag just before the js/app.js script tag:
<script src="cordova.js"></script>
Just for reference, the whole contents of my index.html file is now as follows:
1 <!DOCTYPE html>
2 <html>
3 <head>
7 <title>SuperSimple Calculator</title>
12 <script src="cordova.js"></script>
13 <script src="js/app.js"></script>
14 <script src="js/CalculatorCtrl.js"></script>
15 </head>
16
18 <div>
19 <div>
23 </ion-nav-bar>
25 </div>
26 </div>
27 </body>
28 </html>
iOS settings
The main tool for developing native iOS applications is Xcode¹¹². Xcode is praiseworthily free for
download and it comes with a lot of simulators in which you can see how your app would look like
on a real device.
However, if you want to build and deploy iOS applications to the App Store, you need to have a Mac
computer¹¹³ since Xcode only works on their operating system. Yes, even if you’re using Ionic, you
need to use Xcode to build the application for iOS.
There are some ways around this, like for example with using a so-called Hackintosh¹¹⁴ computer,
but honestly from my experience this is just not worth it.
If you’re really anti-Apple :), then you’ll be happy to know that there are services which allow you to
rent a Mac in the cloud¹¹⁵, just for the time you need to build your application. Also, Ionic promissed
to build a service that will allow you to build mobile apps for any supported platform even if you
don’t have a Mac, but we have to wait for this to become available.
To publish an app in the App Store (or test it on your own iOS device) you’ll need
to purchase the Apple Developer Program license which costs US $99 per year. You’ll
need to sign up at http://developer.apple.com¹¹⁶, but don’t worry about this for now;
we’ll cover all the steps in the next where I’ll guide you through the application deploy
process for both the Apple’s App Store and Google’s Play Store.
Installing the needed tools
As we’ve mentioned before, you need to install Xcode, and you can do that by opening up the
App Store application on your Mac and search for Xcode. You install it as any other application by
clicking on the download button and following the NextNextNext type of installation just like any
other.
¹¹²https://developer.apple.com/xcode/
¹¹³http://www.apple.com/mac/
¹¹⁴http://www.hackintosh.com/
¹¹⁵http://www.macincloud.com/
¹¹⁶http://developer.apple.com
After the installation is finished, open up Xcode, and navigate to Xcode -> Preferences ->
Downloads tab. Here you have to download the latest version of the Simulator available. In my
case, at the time of this writing, the version is iOS 8.4 Simulator, as you can see on the image below:
Also, we need to install the ios-sim package with npm:

npm install -g ios-sim
Running our application in a simulator
Now, in order to test our application in a simulator all we have to do is execute the following
command:
ionic emulate ios
After a bunch of cryptic messages you should see an Xcode simulator open up and show your
awesome application along with a splash screen and ads:
If you test the app by doing five calculations, then after the fifth time you press the equals (=) button
the Interstitial ad will appear, as shown on the image below:
If you exit the simulator back to the home screen (by pressing ‘COMMAND + SHIFT + H) you will
see the application’s icon:
When we’re testing our application in browser with ionic serve we have that great live realod
feature. We can have that too in the emulator, if we run the emulator with the extra flag –l. If we
also want to see the console.log output, as we would see it in the browser, then we have to add the
flag –c:
1 ionic emulate ios -lc
Since we need to have an Apple Developer account in order to run the application on
our phsyical phone device, we will leave this for our next chapter where we’ll also show
how to deploy the application to the actual App Store.
Android settings
There are no prerequisites for Android development regarding the operating systems; you can
develop for Android on Mac, Linux, and Windows computers.
Android provides a number of tools for developers that are available for free from their website¹¹⁷.
To publish an app in the Play Store you’ll need to purchase the Developer Pro-
gram license which costs only US $25 one-time fee. You’ll need to sign up at
https://play.google.com/apps/publish/signup/¹¹⁸, but as said before - don’t worry; we’ll
cover all the steps in the next chapter.
Installing the needed tools
Here you basically have two options:
• Android Studio - full IDE with the SDK¹¹⁹ built in.

• Android SDK Tools - only the SDK
Both can be downloaded from http://developer.android.com/sdk/index.html¹²⁰ but I recommend that

you only download the SDK since we will not be using the actual Android IDE at all.
¹¹⁷http://developer.android.com/
¹¹⁸https://play.google.com/apps/publish/signup/
¹¹⁹https://en.wikipedia.org/wiki/Software_development_kit
¹²⁰http://developer.android.com/sdk/index.html
The installation of the SDK is also a simple NextNextNext type of installation on Windows machine
(if you downloaded the .exe version), and if you downloaded the zip file (on both Mac or Windows)
then you need to extract them to a certain folder (C:\Dev or /Users/nikola/Dev for example) and
set up the PATH variable correctly.
On Mac the PATH variable is set like this:
export PATH=$PATH:/Users/nikola/Dev/android-sdk/tools/
You may want to put this line to your .bash_profile (or any related that you may have) file. For any
further details about how to set the PATH variable you can take a look at this tutorial¹²¹.
As for Windows, the command would be:
set PATH=%PATH%;C:\Dev\android-sdk\tools
You may get a message that you don’t have java tools installed:
In that case simply click the More info button and you’ll go to their website where you
just have to click on the “Agree and start free download” button. After the download
run the .dmg file (on Mac OS) and finish the NextNextNext installation. In that case,
you will also have to download the JDK and you can do so from the official site¹²².
To be honest, you may still encounter some errors while trying to get this to work and I’ve answered
quite a few issues on StackOverflow. So, if you get stuck at this point, just drop me a line in the
comments and I’ll do my best to help.
Once you’ve set the PATH variable correctly for your operating system, you can check if it’s OK by
opening up your Terminal/Command prompt and typing:
android --help
You should get an output similar to this one:
¹²¹http://www.cyberciti.biz/faq/appleosx-bash-unix-change-set-path-environment-variable/
¹²²http://www.oracle.com/technetwork/java/javase/downloads/index.html
1 C:\Users\Nikola\Desktop>android
2 Usage:
3 android [global options] action [action options]
4
5 Global options:
6 -h --help : Help on a specific command.
7 -v --verbose : Verbose mode, shows errors, warnings and all messages.
8 --clear-cache : Clear the SDK Manager repository manifest cache.
9 -s --silent : Silent mode, shows errors only.
10
11 Valid actions are composed of a verb and an optional direct object:
12
13 - sdk : Displays the SDK Manager window.
14 - avd : Displays the AVD Manager window.
15 - list : Lists existing targets or virtual devices.
16 - list avd : Lists existing Android Virtual Devices.
17 - list target : Lists existing targets.
18 - list device : Lists existing devices.
19 - list sdk : Lists remote SDK repository.
20 - create avd : Creates a new Android Virtual Device.
21 - move avd : Moves or renames an Android Virtual Device.
22 - delete avd : Deletes an Android Virtual Device.
23 - update avd : Updates an Android Virtual Device to match the folders o\
24 f a new SDK.
25 - create project : Creates a new Android project.
26 - update project : Updates an Android project (must already have an Android\
27 Manifest.xml).
28 - create test-project : Creates a new Android project for a test package.
29 - update test-project : Updates the Android project for a test package (must alr\
30 eady have an AndroidManifest.xml).
31 - create lib-project : Creates a new Android library project.
32 - update lib-project : Updates an Android library project (must already have an\
33 AndroidManifest.xml).
34 - create uitest-project: Creates a new UI test project.
35 - update adb : Updates adb to support the USB devices declared in the S\
36 DK add-ons.
37 - update sdk : Updates the SDK by suggesting new platforms to install i\
38 f available.
Finally, you need to set up the SDK packages, and to do so run the following command in the
Terminal/Command prompt:
android sdk
The SDK Manager allows you to download the platform files for any version of Android. I
recommend that you download just the most recent packages as shown on the image below:
As you can see from the image, the things you need to check and then click on Install are:
• Android SDK Tools

• Android SDK Platform-tools
• Android SDK Build-tools (choose the newest one)
• Android 6.0 (API 23) - here you can actually go with 5.1
As mentioned in the How to implement Google AdMob ads section, you need to install some extra
tools as shown on the image below:
Android SDK has an emulator that can emulate the screen size and resolution of most Android
devices, but to be honest it’s way too slow and klunky and I recommend that you do not use it.
Instead, download Genymotion¹²³ which is free for personal use.
After you install and run Genymotion you will see an iterface like this:
¹²³https://www.genymotion.com/#!/
Now you have to add an emulator, and you can do this by clicking on the Add (+) button where
you’ll get a broad selection of options as shown on the image below.
Once you select one (I’m using a Samsung Galaxy S5) just click Next and confirm on the
confirmation window:
Once you have the device all set up you can run it by clicking the Start button and Android will
start up quickly:
Since Ionic sees the Genymotion device as a real device attached to your computer, you can’t run
ionic emulate android, as we did in the iOS section (with the obvious ios/android change). Instead,
you need to run the Ionic’s run command (before you do the build phase) like this:
ionic build android && ionic run android
This would now run the application on the Genymotion emulator and it would look like shown on
the image below:
If you would like to run the application on your own Android device then you first have to run the
following command to build the project:
ionic build android
The output of the command will be something like:

1 BUILD SUCCESSFUL
2
3 Total time: 5.536 secs
4 Built the following apk(s):
5 C:\Users\Nikola\Desktop\IonicTesting\Ionic_3rdTutorial\platforms\android\bui\
6 ld\outputs\apk\android-debug.apk
If you get an error saying something about graddle, please visit this StackOverflow
question¹²⁴ which shows how to resolve it by installing graddle manually and changing
the path to it in the build.js file.
To be able to test your application on your Android device, you have to enable the developer settings
and you can do that in few steps:
• Open the Settings view and scroll to About Phone

• At the bottom of the About Phone view find a Build Number and tap on it seven times to
enable the developer mode.
• After this you can go back to the Settings view and you’ll see a new option called Developer
Options
Now you have to enable the USB debugging, and you can do that in the next few steps:
• Select Developer Options item in the Settings view

• Scroll down until you see the USB debugging option
• Toggle it ON
• Now your device is set up for debugging, and when it’s connected to your computer you’ll be
able to deploy the application to the device
Now connect your device and execute the following command in your Termina/Command prompt:
adb devices
You should see a list of devices that are attached to your computer (Genymotion emulators will also
show up here), among which the one that you just attached.
Now, to install the application on your attached device first make sure that you’re in the root
directory of the project (Ionic_3rdTutorial in our case) and then run the following command from
your Terminal/Command prompt:
adb –d install platforms\android\build\outputs\apk\android-debug.apk
Find the application in your application list and open it. You should see the ads in the bottom and
after the fifth calculation you should see an Interstitial ad appear.
¹²⁴http://stackoverflow.com/questions/29874564/ionic-build-android-error-when-download-gradle
If for some reason the adb command wouldn’t work for you, you can always just copy
the generated .apk file manually to your connected device (for example in the Down-
loads folder). After that open the Downloads folder on your phone with the file manager
application that you use and open the .apk file that you pasted. This way you’ll be
prompted to install the application on your phone and then you’ll be able to find it in the
programs list:
Conclusion
In this chapter, we showed you how to polish our existing calculator application by improving the
design and user experience. Next, we showed how to automatically create icons and splash screen
images. Then we covered how to make money with our application by using Google AdMob ads.
Also, we showed how to share our application with other users without going through the app stores.
Finally, we showed how to test our application on the real physical devices and emulators.
In the next chapter we’re going to show how to prepare the application for the Apple’s App Store
and Google’s Play Store and finally how to publish the application to both Apple’s App Store and
Google’s Play Store.
How to publish our calculator
application to the Apple’s App Store
and Google’s Play Store
This chapter wraps the series in a whole where we showed how to create an application
starting with an idea, through creating a prototype and implementing the application
using Ionic framework to finally (in this tutorial) publishing it in the stores.
You can see the finished product on the header image and you can check out the application by
downloading it from the App Store or Play Store here¹²⁵.
This fourth chapter is divided into two sections, each for one store. We’ll start with Google’s Play
Store.
Google Play Store

In this section we’re going to go over the following steps:
¹²⁵http://nikola-breznjak.com/apps/SuperSimpleCalculator/
102
How to publish our calculator application to the Apple’s App Store and Google’s Play Store 103
• How to prepare the application for production

• How to create the keystore file
• How to build the production ready application
• How to get the developer license
• How to sign the APK file
• How to optimize the APK file
• How to build the update of your application
• How to create the application listing
• How to upload the application to the Play Store
Preparing our application for production

Basically, you should remove any unnecessary plugins or libraries which you may have installed
during development that you didn’t end up using. In our example, we can safely remove the cordova-
plugin-console by executing the following command: cordova plugins remove cordova-plugin-
console.
Next, in your package.json file you should change the name and description properties. This is
how I’ve set up mine:
1 {
2 "name": "SuperSimpleCalculator",
3 "version": "1.0.0",
4 "description": "SuperSimple Calculator by Nikola Brežnjak",
5 "dependencies": {
6 "gulp": "^3.5.6",
7 "gulp-sass": "^1.3.3",
8 "gulp-concat": "^2.2.0",
9 "gulp-minify-css": "^0.3.0",
10 "gulp-rename": "^1.2.0"
11 },
12 "devDependencies": {
13 "bower": "^1.3.3",
14 "gulp-util": "^2.2.14",
15 "shelljs": "^0.3.0"
16 },
17 "cordovaPlugins": [
18 "cordova-plugin-device",
19 "cordova-plugin-whitelist",
20 "cordova-plugin-splashscreen",
21 "com.ionic.keyboard",
22 "cordova-plugin-admobpro"
23 ],
24 "cordovaPlatforms": [
25 "ios",
26 "android"
27 ]
28 }
In the config.xml file make sure that you change the widget id, name, description and author
elements. My file looks like this now:
1 <widget id="com.nikola-breznjak.calculator" version="1.0.0" xmlns="http://www.w3\

2 .org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:gap="http://\
3 phonegap.com/ns/1.0">
4 <name>SuperSimple Calculator</name>
5 <description>
6 An Ionic Framework SuperSimple Calculator application.
7 </description>
8 <author email="nikola.breznjak@gmail.com" href="http://www.nikola-breznjak.com\
9 /">
10 Nikola Brežnjak
11 </author>
Setting up a keystore
A keystore file stores the security key that we’ll use later to sign our application. By doing this we
can verify that we’re the author of the application. You can learn more about application signing
from the official documentation¹²⁶.
In order to create a keystore, execute the following command (change SuperSimpleCalculator
keyword with your own):
keytool -genkey -v -keystore SuperSimpleCalculator.keystore -alias SuperSimpleCalcu-
lator -keyalg RSA -keysize 2048 -validity 10000
You will be asked for a password two times (do not forget it!). The process looks like this:
¹²⁶http://developer.android.com/tools/publishing/app-signing.html
1 C:\Users\Nikola\Desktop\IonicTesting\Ionic_4thTutorial>keytool -genkey -v -keyst\

2 ore SuperSimpleCalculator.keystore -alia
3 s SuperSimpleCalculator -keyalg RSA -keysize 2048 -validity 10000
4 Enter keystore password:
5 Re-enter new password:
6 What is your first and last name?
7 [Unknown]: Nikola Brežnjak
8 What is the name of your organizational unit?
9 [Unknown]:
10 What is the name of your organization?
11 [Unknown]: Nikola Brežnjak
12 What is the name of your City or Locality?
13 [Unknown]: Zagreb
14 What is the name of your State or Province?
15 [Unknown]:
16 What is the two-letter country code for this unit?
17 [Unknown]: HR
18 Is CN=Nikola Bre×njak, OU=Unknown, O=Nikola Bre×njak, L=Zagreb, ST=Unknown, C=HR\
19 correct?
20 [no]: What is your first and last name?
21 [Nikola Bre×njak]:
22 C:\Users\Nikola\Desktop\IonicTesting\Ionic_4thTutorial>keytool -genkey -v -keyst\
23 ore SuperSimpleCalculator.keystore -alia
24 s SuperSimpleCalculator -keyalg RSA -keysize 2048 -validity 10000
25 Enter keystore password:
26 Re-enter new password:
27 What is your first and last name?
28 [Unknown]: Nikola Breznjak
29 What is the name of your organizational unit?
30 [Unknown]:
31 What is the name of your organization?
32 [Unknown]:
33 What is the name of your City or Locality?
34 [Unknown]: Zagreb
35 What is the name of your State or Province?
36 [Unknown]:
37 What is the two-letter country code for this unit?
38 [Unknown]: HR
39 Is CN=Nikola Breznjak, OU=Unknown, O=Unknown, L=Zagreb, ST=Unknown, C=HR correct?
40 [no]: yes
41
42 Generating 2.048 bit RSA key pair and self-signed certificate (SHA256withRSA) wi\
43 th a validity of 10.000 days

44 for: CN=Nikola Breznjak, OU=Unknown, O=Unknown, L=Zagreb, ST=Unknown, C=\
45 HR
46 Enter key password for <SuperSimpleCalculator>
47 (RETURN if same as keystore password):
48 [Storing SuperSimpleCalculator.keystore]
This command will create a SuperSimpleCalculator.keystore file. You should place this file in a
place where you’ll remember it, because you’ll need this file for any app updates you’ll want to push
to the Play Store. However, just to make things clear; for every new application that you make,
you need to create a new keystore file.
Building the production ready application

To create a production version of your application, execute the following command:
cordova build --release android
This will generate a new unsigned APK file (Android app file type, just like .exe is on Windows),
inside the platforms/android/ant-build/ folder. The build process should end with an output
similar to this:
1 BUILD SUCCESSFUL
2 Total time: 35.208 secs
3 Built the following apk(s):
4 C:\Users\Nikola\Desktop\IonicTesting\Ionic_4thTutorial\platforms\android\bui\
5 ld\outputs\apk\android-release-unsigned.apk
Here you can see the exact full path to the unsigned, production (release-ready) APK file of your
application.
Signing the APK file

Now we’ll sign the unsigned version of the APK with a keystore. We can do this with the tool called
jarsigner. First, copy the keystore to the same directory where your unsigned APK file is (in my
case: C:\Users\Nikola\Desktop\IonicTesting\Ionic_4thTutorial\platforms\android\build\outputs\apk\).
Next, rename the .apk file to something more meaningful, like for example SuperSimpleCalculator-
release-unsigned.apk.
In your terminal navigate to this folder and execute the following command:
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore SuperSimpleCalcula-
tor.keystore SuperSimpleCalculator-release-unsigned.apk SuperSimpleCalculator
You will be prompted for the keystore password. You can test that the app is signed properly with
the following command:
$ jarsigner -verify -verbose -certs CordovaApp-release-unsigned.apk
This should return something like jar verified.

If you get a warning like this: Warning: No -tsa or -tsacert is provided and this jar is
not timestamped. Without a timestamp, users may not be able to validate this jar after
the signer certificate's expiration date (2043-04-07) or after any future revocation
date. you don’t have to worry (you can learn more about it here¹²⁷), and you can move safely on.
Optimizing the APK file

With the zipalign tool we can optimize the APK file so that it reduces the amount of space
and RAM required by the app on a device. You can learn more about zipalign from the official
documentation¹²⁸.
The zipalign tool just takes the name of the signed file (we still have unsigned in the name of our file
because we didn’t change it in the previous step) and the name of the file to generate. To optimize
the APK file execute the following command:
zipalign -v 4 SuperSimpleCalculator-release-unsigned.apk SuperSimpleCalculator.apk
The process finishes with the Verification succesful output and you will get a SuperSimpleCal-
culator.apk file which you can submit to the Google Play Store.
You may get an error like:
zipalign is not recognized as an internal or external command, operable program or

batch file.
In this case, you need to search your computer for the zipalign file, and make sure it’s in
your system PATH to fix this problem. Alternatively, you can enter a full path to the zipalign
file (in my case, on Windows, the the path to the file was C:\Android\android-sdk\build-
tools\21.1.2\zipalign.exe).
Building the update of your application

To build an update of an existing app you have to follow the same steps except that you don’t need to
create another keystore. You have to use the same keystore to sign the application for every update,
becase the update will be otherwise rejected and you’ll have to create a new app listing.
¹²⁷http://docs.oracle.com/javase/6/docs/technotes/tools/windows/jarsigner.html#Options
¹²⁸http://android-developers.blogspot.hr/2009/09/zipalign-easy-optimization.html
You must update the version in the config.xml file for the next release, otherwise the app will not
be properly updated on your users’ devices. To learn more about versioning you can take a look at
the official documentation¹²⁹, or this StackOverflow question¹³⁰.
Creating the app listing and uploading the app to the Play Store
The first thing you should do is sign up for the Google developer program at https://play.google.com/apps/publish/sig
If you’re not going to make applications as an individial then it’s recommended that you create a
separate Google account for your apps (you need it to sign up). You’ll need to pay $25 one-time fee
for a developer license.
You start by clicking the Add new application button on the right hand side as shown on the image
below:
Now the popup appears, as show on the image below, and you have to put a Title for your
application. Here you basically have options to Upload the APK and to Prepare the Store Listing.
¹²⁹https://cordova.apache.org/docs/en/dev/config_ref/index.html
¹³⁰http://stackoverflow.com/questions/25858547/phonegap-how-to-set-build-and-version-property-in-config-xml-for-ios
¹³¹https://play.google.com/apps/publish/signup/
We’re going to upload our APK to production, by simply clicking on the Upload your first APK
to Production button once on the PRODUCTION tab, then selecting the signed APK that we made
in the previous section.
Once the upload is finished you’ll see something like it’s shown on the image below, and on the left
hand side you’ll see the green checkmark next to the APK, meaning that you’ve completed the APK
upload step.
Next you have to set the graphics for your application. Please note that you have to put at least 2
screenshots!
Then we have to select a category:

Next up is the Content rating where you’ll be asked quite a few questions (here you’ll be able to
better choose the category of your application because it will be listing a few example applications):
Next you have to click on the Save questionnaire, and after that on the Get rating button. After
the content rating is done, you’ll be able to click the Apply rating button.
Finally, you will now have an option to click the Publish app button:
With this your app now goes into the review process which in my case took 4 hours. Until the app
is published you will see a In review status, and once the app is published you’ll see the following:
If you click on the View in play store¹³² link you’ll see the listing in Play Store:
¹³²https://play.google.com/store/apps/details?id=com.nikola_breznjak.calculator
You can use this link to share your application on a simple landing page like this one¹³³:
¹³³http://nikola-breznjak.com/apps/SuperSimpleCalculator/
Apple App Store

First, you need to enroll in Apple Developer Program¹³⁴. As with Google, if you have a personal
account with Apple, you can create an additional one for your applications.
As I mentioned in the first chapter, the fee is 99$ paid yearly and in my case the process took 2
days to be accepted in the program. Also, you’ll have to have a Mac computer. Sure, there are ways
around it, but I don’t recommend them. For starters, a cheap Mac Mini will do just fine.
Connecting Xcode with your developer account

After you receive your developer status, open Xcode on your Mac and go to Preferences ->
Accounts and add your account to Xcode by clicking the + button on the lower left hand side,
and follow the instructions:
¹³⁴https://developer.apple.com/programs/
Signing
Now that you linked Xcode with your developer account, go to Preferences -> Accounts, select
your Apple Id on the left hand side and then click the View Details button shown on the previous
image. You should see the popup similar to the one on the image below:
Click the Create button next to the iOS Distribution option.

You can learn more about maintaining your signing identities and certificates from the official
documentation¹³⁵.
Setting up the app identifier

Next, through the Apple Developer Member Center¹³⁶ we’ll set up the app ID identifier details.
Identifiers are used to allow an app to have access to certain app services like for example Apple
Pay. You can login to Apple Developer Member Center with your Apple ID and password.
Once you’re logged in you should choose Certificates, Identifiers, and Profiles option as
On the next screen, shown on the image below, select the Identifiers option under the iOS Apps.
¹³⁵https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/MaintainingCertificates/
MaintainingCertificates.html
¹³⁶https://developer.apple.com/membercenter
One the next screen, shown on the image below, select the plus (+) button in order to add a new iOS
App ID.
On the next screen, shown partialy on the image below, you’ll have to set the name of your app,
and use the Explicit App ID option and set the Bundle ID to the value of the id in your Cordova
config.xml <widget> tag.
Additionally, you’ll have to choose any of the services that need to be enabled. For example, if you
use Apple Pay or Wallet in your app, you need to choose those option. By default you can’t deselect
Game Center and In-App Purchase options, but for details on how to do this you can take a look at
this Stackoverflow question¹³⁷.
You can learn more about registering app identifiers from the official documentation¹³⁸.
¹³⁷http://stackoverflow.com/questions/15913115/ios-how-can-i-deselect-game-center-and-in-app-purchase-when-i-try-to-register-my
¹³⁸https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/MaintainingProfiles/MaintainingProfiles.html
Creating the app listing

Apple uses iTunes Connect¹³⁹ to manage app submissions. After you login, you should see a screen
similar to the one on the image below:
Here you have to select the My Apps button, and on the next screen select the + button, just below
the iTunes Conenct My Apps header, as shown on the image below:
This will show three options in a dropdown, and you should select the New App. After this the popup
appears, as shown on the image below, where you have to choose the name of the application,
platform, primary language, bundle ID and SKU. As you can see on the image below I had to name
my application differently, because SuperSimple Calculator was taken by some other application
¹³⁹https://itunesconnect.apple.com
already published in the store.
Once you’re done, click on the Create button and you’ll be presented with the following screen
where you’ll have to set some basic options like Privacy Policy URL, category and sub category.
Now, before we fill out everything in the listing, we’ll build our app and get it uploaded with Xcode.
Then you’ll come back to finish the listing.
You can learn more about managing your app in iTunes Connect from the official documentation¹⁴⁰.
Building the app for production

In the root directory of your application execute the following command: cordova build ios --
release
If everything went well you’ll see the BUILD SUCCEEDED output in the console.
Oppening the project in Xcode

Now, open the platforms/ios/SuperSimpleCalculator.xcodeproj file in Xcode (of course you
would change SuperSimpleCalculator with your own name).
¹⁴⁰https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/UsingiTunesConnect/UsingiTunesConnect.
html
Once the Xcode opens up the project, you should see the details about your app in the general view,
as shown on the image below:
You should just check that the bundle identifier is set up correctly, so that it’s the same as the value
you specified earlier in the app ID. Also, make sure that the version and build numbers are correct.
Team option should be set to your Apple developer account. Under the deployment target you can
choose which devices your application will support.
Since we’re on this setting screen right now, I should mention that it’s very important that
you select the Requires full screen option, otherwise you may (as I did) get the following error
when uploading the app to the App Store (covered futher in the chapter): Invalid Bundle.
iPad Multitasking support requires these orientations: 'UIInterfaceOrientationPor-
trait,UIInterfaceOrientationPortraitUpsideDown,UIInterfaceOrientationLandscapeLeft,UIInterfaceOrie
Found 'UIInterfaceOrientationPortrait,UIInterfaceOrientationPortraitUpsideDown' in bun-
dle 'com.bitscoffee.PhotoMarks.iOS'.
You can learn more about this error from this StackOverflow question¹⁴¹.
Creating an archive of the application

In Xcode, select Product -> Scheme -> Edit Scheme to open the scheme editor. Next, select the
Archive from the list on the left hand side. Make sure that the Build configuration is set to Release
as shown on the image below:
¹⁴¹http://stackoverflow.com/questions/32559724/ipad-multitasking-support-requires-these-orientations
To create an archive choose a Generic iOS Device, or your device if it’s connected to your Mac
(you can’t create an archive if simulator is selected), from the Scheme toolbar menu in the project
editor, as shown on the image below:
Next, select Product -> Archive, and the Archive organizer appears and displays the new archive.
At this point Xcode runs some preliminary validations on the archive and it may display validation
warnings in the project editor. At this point I got a few errors shown on the image below:
This problem was resolved by the solution posted in this Stack Overflow question¹⁴² where basically
the solution was to double click the <multiple values> under Header Search Paths and change
$(OBJROOT)/UninstalledProducts/include to $(OBJROOT)/UninstalledProducts/$(PLATFORM_-
NAME)/include‘ as shown on the image below:
Another error that I got was about bitcode support. You can learn more about the error and solution
from this StackOverflow question¹⁴³, but basically you have to set the Bitcode support to No in the
Build Options, as shown on the image below:
¹⁴²http://stackoverflow.com/questions/12184767/phonegap-cdvviewcontroller-h-file-not-found-when-archiving-for-ios
¹⁴³http://stackoverflow.com/questions/30848208/new-warnings-in-ios9
After you fix any errors you can repeat the Product -> Archive step and when it succeeds it will
bring up the window as shown on the image below:
Here it’s recommended that you click the Validate button which will check your app for any
additional issues. If everything goes well, you’ll see the following notification:
At this point you can click the Upload to App Store... button, and if everything goes fine you’ll
have an uploaded app, and the only thing that’s left to do is to complete the iTunes Connect listing
and submit it for review!
If you get an email from iTunes Connect shortly after you uploaded the archive with the content
similar to this:
1 We have discovered one or more issues with your recent delivery for "Super Simp\
2 listic Calculator". Your delivery was successful, but you may wish to correct th\
3 e following issues in your next delivery:
4
5 Missing Push Notification Entitlement - Your app appears to include API used to \
6 register with the Apple Push Notification service, but the app signature's entit\
7 lements do not include the "aps-environment" entitlement.
If you’re not using Push Notifications then you don’t have to worry, as stated in the official Ionic
framework forum¹⁴⁴.
Finishing the app list process

Now you should head back to the iTunes Connect portal¹⁴⁵ and login. Next, click on the Pricing
and Availability on the left hand side under ‘APP STORE INFORMATION. Basically, all that I’ve
set here is the price 0 (Free) as you can see on the image below:
¹⁴⁴http://forum.ionicframework.com/t/missing-push-notification-entitlement/5436/20
¹⁴⁵https://itunesconnect.apple.com
You don’t have to worry about forgetting to insert any crucial and required information
about your application, since you’ll be notified about what’s missing and what needs
to be added/changed if you try to submit the app for review before all details are filled
in.
Next, click on the 1.0 Prepare for Submission button on the left hand side, as shown on the image
below. When we uploaded our archive, iTunes Connect automatically determined which device sizes
are supported. As you can also see on the image below, you’ll need to upload at least one screenshot
image for each of the various app sizes that were detected by iTunes Connect.
From my personal experience, the easiest way to generate these images is to simulate the app in
Simulator and make a screenshot of different screen sizes. However, please note that you have to
make sure that your Window -> Scale property in the Simulator is set to 100%, otherwise the image
size will not be the one as expected in iTunes Connect.
Next you’ll have to insert Description, Keywords, Support URL and Marketing URL (optionally), as
In the Build section you have to click on the + button and select the build which we’ve uploaded
through Xcode in the previous steps, as shown on the image below:
Next you’ll have to upload the icon, edit the rating, and set some additional info like copyright
and your information. Note that the size of the icon that you’ll have to upload here will have to
be 1024 by 1024 pixels. Thankfully, you can use the splash.png from the second chapter. If you’re
the sole developer then the data in the App Review Information should be your own. Finally, as
the last option, you can leave the default checked option that once your app is approved that it is
automatically released to the App Store.
Now that we’re finished with adding all of the details to the app listing, we can press Save and then
Submit for Review. Finally, you’ll be presented with the last form that you’ll have to fill out:
The only “tricky” question may be the one about Content rights. In our example we can safely
select No. Since we’re using AdMob in our application we have to select Yes in the Advertising
Identifier and check the Serve advertisements within the app checkbox. You can learn more
about it from this StackOverflow question¹⁴⁶.
After you submit your app for review you’ll see the status of it in the My Apps as Waiting for
review, as shown on the image below. Also, shortly after you submit your app for review you’ll get
¹⁴⁶http://stackoverflow.com/questions/31261926/ios-does-your-app-contain-display-or-access-third-party-content-admob
a confirmation email from iTunes Connect that your app is in review.
Apple prides itself with a manual review process, which basically means it can take several days for
your app to be reviewed. You’ll be notified of any issues or updates to your app status. From my
personal experience it usualy takes up to 5 days for the app to be reviewed.
Updating the app

Since you’ll probably want to update your app at some point you’ll first have to update the build
and version numbers in the Cordova config.xml file and then rebuild the application and open it
up from the Xcode and follow the same steps all over again.
Once you submit for the review, you’ll have to wait for the review process again. It’s pivotal to note
that if your changes aren’t too big you could use Ionic Deploy¹⁴⁷ to update your application without
going through the review process, but more about this in the future tutorials.
Conclusion
In this chapter, we showed you how to prepare the application for the Apple’s App Store and Google’s
Play Store, how to create the listings and finally how to publish the application to both stores.
With this, I leave you and hope you had a great learning experience with this book.
I have few of the project ideas lined up already for the next posts over at Pluralsight. However, I
encourage you to share your wishes and ideas about what kind of an app would you like to see
built step by step. Remember, I’m here to help you get the best of Ionic framework so don’t hesitate
to ask.
¹⁴⁷http://blog.ionic.io/announcing-ionic-deploy-alpha-update-your-app-without-waiting/
How to get help with Ionic framework
Few of the resources that proved indispensable when I was learning about Ionic:
• For a quick framework reference, I’m suggesting the official documentation¹⁴⁸, which is indeed
very good.
• If you’re in search for a good book about Ionic, then you don’t need to look further than Ionic
in Action: Hybrid Mobile Apps with Ionic and AngularJS¹⁴⁹
• Of course, if you haven’t, check out my first three posts in this series
• One of the best resources on the net for programming related questions, about which you’ve
no doubt heard, is StackOverflow¹⁵⁰. You can view the specific Ionic tagged questions via this
link¹⁵¹ or even this one¹⁵². However, I urge you to please read their help page¹⁵³ before posting
questions (especially if you’re a new user to StackOverflow) because otherwise you may have
a bad experience. If you’re a new StackOverflow user, who’s in a hurry to get acquainted with
it, make sure you at least go through this 2-minute tour¹⁵⁴.
• To get started with AngluarJS try these¹⁵⁵ few¹⁵⁶ resources¹⁵⁷, not necessarily in that particular
order.
• Let me just kind of repeat myself by saying that if you have any questions about Ionic
framework, or you had trouble following this tutorial (you couldn’t install something), or
you would like to suggest what kind of tutorials you would like to see regarding Ionic in the
future, then please share it in the comments below. Also, you can reach me personally via
@HitmanHR¹⁵⁸ or my blog¹⁵⁹. I’ll do my best to answer all of your questions.
• If, however, you favor “one on one” help, you can reach me via HackHands¹⁶⁰.
¹⁴⁸http://ionicframework.com/docs/
¹⁴⁹http://amzn.to/1EjwYNJ
¹⁵⁰http://stackoverflow.com/
¹⁵¹http://stackoverflow.com/questions/tagged/ionic
¹⁵²http://stackoverflow.com/questions/tagged/ionic-framework
¹⁵³http://stackoverflow.com/help
¹⁵⁴http://stackoverflow.com/tour
¹⁵⁵http://angular.codeschool.com/
¹⁵⁶https://hackhands.com/finishing-Angular-TODO-application-deploying-production/
¹⁵⁷https://docs.angularjs.org/tutorial
¹⁵⁸https://twitter.com/hitmanhr
¹⁵⁹http://www.nikola-breznjak.com/blog
¹⁶⁰https://hackhands.com/dashboard/request/hitman666/preferred
133

Ionic Framework

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ionic Framework

Uploaded by

Copyright:

Available Formats

Ionic framework

step by step from idea through prototyping to the app

This version was published on 2015-12-15

©2015 Nikola Brežnjak

How to get started with Ionic framework on Mac and Windows . . . . . . . . . . . . . . 1

How to polish our existing calculator application . . . . . . . . . . . . . . . . . . . . . . . 51

How to get help with Ionic framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

• How to make an app these days

Why should you listen to me?

Ways you can make an app these days

• download Xcode¹⁵ from the App Store (it’s actually free)

• have any computer

What is Ionic and why it’s so good

Installing prerequisites for both Mac and Windows

in your Command prompt (or, even better, use Console 2³⁰):

1 usage: git [--version] [--help] [-C <path>] [-c name=value]

Using Ionic CLI

Starting a project with Ionic by using the existing

1 C:\Users\Nikola\Desktop\IonicTesting>ionic start Ionic_1stTutorial sidemenu

38 + ionic share EMAIL

Running the Ionic application

C:UsersNikolaDesktopIonicTestingIonic_1stTutorial>ionic serve Running live reload server: http://localhost:35729

If you like, you can get this project on Github⁴².

• How to create a calculator interface mockup

• clone the code from Github⁴⁴

Calculator interface mockup

there’s an app for that

Calculator interface prototype

Creating calculator interface with Ionic Creator

Repeat the process by adding next three rows:

• buttons representing 4, 5, 6 and a button representing multiplication (x)

In the last row you should also add four buttons:

After this a popup, with the following content, appears:

Starting a project with Ionic CLI by using the template

1 C:\Users\Nikola\Desktop\IonicTesting>ionic start Ionic_2ndTutorial creator:167ff\

We should see something similar to the image below:

Ionic application folder structure

bower.json and .bowerrc files

.gitignore and README.md file

Refactoring our application

104 <button class="button button-energized button-block ">x</but\

The <meta> element:

1 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=n\

<style> .angular-google-map-container { width: 100%; height: 504px; } </style> “‘

and from the index.html file:

in our example this name is simply app.

1 com.ionic.keyboard 1.0.4 "Keyboard"

Calculator logic with controllers

just after the app.js inclusion script tag.

• if the parameter equals C in that case we’re clearing the result

Finishing the calculator template

Run the application

• How to polish our existing calculator application

1 Successful npm install

ng-click="btnClicked('7')">7</button> <button class="button button-stable button-

<form><input type="text" placeholder="0" ng-model="result" class="myResultInput"></form>

• Notice the added class myResultInput on the input element

1 $button-block-margin: 0px !default;

How to create icons and splash screen images

1 ionic platform add android

You should see an output similar to this:

1 C:\Users\Nikola\Desktop\IonicTesting\Ionic_3rdTutorial>ionic platform add android

38 npm http 200 https://registry.npmjs.org/cordova-ios/-/cordova-ios-3.8.0.tgz

25 generating splash android drawable-port-xxxhdpi-screen.png (1280x1920)...