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 usingChrome¹¹⁰ orFirebug¹¹¹) 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 thecordova.jsfile.
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 followingscripttag just before the js/app.js script tag: <script src="cordova.js"></script>
Just for reference, the whole contents of myindex.htmlfile is now 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>SuperSimple Calculator</title>
8 <link href="css/ionic.app.css" rel="stylesheet">
9 <script src="lib/ionic/js/ionic.bundle.js"></script>
10 <link href="http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.c\
11 ss" rel="stylesheet">
12 <script src="cordova.js"></script>
13 <script src="js/app.js"></script>
14 <script src="js/CalculatorCtrl.js"></script>
15 </head>
16
17 <body ng-app="app" animation="slide-left-right-ios7">
18 <div>
19 <div>
20 <ion-nav-bar class="bar-stable">
21 <ion-nav-back-button class="button-icon icon ion-ios7-arrow-back\
23 </ion-nav-bar> 24 <ion-nav-view></ion-nav-view> 25 </div> 26 </div> 27 </body> 28 </html>
iOS settings
The main tool for developing native iOS applications isXcode¹¹². 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 aMac 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-calledHackintosh¹¹⁴ 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:
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.