1. Learned about different ways to monetize Android apps including banner ads, in-app purchases, and paid apps. 2. Installed AdMob plugins and added banner ads to the sigma-tech-week app. 3. Discussed advice for publishing to Google Play including choosing appropriate ad placement, not clicking on test ads, and checking the minimum SDK version.

1. by Stanislav Khorunzhyi
JavaScript developer at Sigma Software
Android apps with Ionic.
From rags to riches

2. Agenda
1. Android apps with Ionic Framework
2. Money
3. My experience with Google Play

3. Chapter 1: Android apps with
Ionic Framework

4. What is Ionic?
Ionic Framework is an open source SDK that enables developers to build
performant, high-quality mobile apps using familiar web technologies (HTML,
CSS, and JavaScript).
Current version: 3.6.0
Stars on GitHub: more than 31k
Downloads on npm (last month): more than 1M

5. More than framework
1. CLI tool
2. Forum
3. Cloud storage
4. Ionic market (plugins, themes, starters)
5. Ionic creator (drag’n’drop tool to build app)
6. Deploy tool
7. Ionic lab
8. Etc.

6. Technologies stack
Ionic is always up-to-date and allows developers to use the following
technologies stack:
1. Angular 4.x
2. TypeScript
3. SCSS

7. How it works
Since Android 4.4 (KitKat), the WebView component is based on the Chromium
open source project.

8. Native features support
Ionic is build on top of Cordova.
Cordova plugins allows us to use native features like camera, brightness,
bluetooth, geolocation, etc.

9. What we need to move on?
1. Install ionic and cordova
$ npm install –g ionic cordova
2. Install Android studio (it includes all required android SDK tools)
https://developer.android.com/studio
3. Get started with Ionic
$ ionic start sigma-tech-week tabs
$ cd sigma-tech-week
$ ionic lab

10. Ionic lab

11. Ionic lab

12. Ionic components

13. Let’s proceed with our app
1. Add predefined components to the app
2. Add some styles
3. Prepare for publishing

14. 1. Promo page

15. 1. Promo page
<ion-header>
<ion-navbar>
<ion-title>О встрече</ion-title>
</ion-navbar>
</ion-header>

16. 1. Promo page
<ion-content class="cards-bg">
<ion-card class="adv-map">
<img src="assets/promo-sigma.png"/>
<ion-item>
<h1 text-center>JavaScript meetup</h1>
<ion-item class="icons-info">
<div *ngFor="let item of infoList">
<ion-icon [name]="item.icon"></ion-icon>
{{item.title}}
</div>
</ion-item>
<div class="description" [innerHTML]="promoDescription"></div>
</ion-item>
</ion-card>
</ion-content>

17. 1. Promo page
import { Component } from '@angular/core';
@Component({
selector: 'page-about',
templateUrl: 'about.html'
})
export class PageAbout {
infoList = [
{ icon: 'navigate', title: 'Одесса' },
{ icon: 'home', title: 'Терминал 42' },
{ icon: 'cloudy-night', title: '19:00-22:00' }
];
promoDescription = `
С 4 по 8 сентября компания Sigma Software приглашает
на серию мероприятий, направленных на обмен опытом,
общение между представителями ИТ сообщества Одессы.
`;
}

18. 2. Map

19. 3. Forum

20. Summary: Chapter 1
1. Learned what Ionic framework is
2. Installed Ionic framework
3. Created sigma-tech-week application boilerplate with Ionic CLI
4. Added UI components and styles
What’s next?

21. Chapter 2: Money

22. Why it is important?
When you publish an application to Google Play you probably
want to make money on it.

23. How to make money on Android apps?
1. Banner Ads
2. Microtransactions (in-game purchases)
3. Paid applications
4. Light and Pro versions
5. Games with energy -_-

24. Our choice is Banner Ads
There are 3 types of Banner Ads in Ionic:
1. Banner
2. Interstitial
3. Rewarded video

25. Preparation
To add Ads to our application:
1. Create AdMob account
2. Register new banner to get banner id
3. Install required plugins for Ionic:
$ ionic cordova plugin add cordova-plugin-admob-free
$ npm install –save @ionic-native/admob-free

26. Let’s add AdMob banner to the app
constructor(public admobFree: AdMobFree) {
this.bannerConfig = {
id: 'ca-app-pub-6558685611970079/2647927185',
autoShow: true
};
this.admobFree.banner.config(this.bannerConfig);
}
ionViewDidLoad() {
this.admobFree.banner.prepare();
}

27. AdMob in action: Banner

28. AdMob in action: Interstitial

29. AdMob in action: Reward video

30. Statistics
1) Ad providers pays for clicks a lot more than just for
displays
1000 displays = ~1 apple
1000 clicks = ~40 – 50 apples

31. Statistics
2) Interstitial banner is profitable than static one, but it is more
annoying for end users. Choose the most suitable for your
app.

32. Statistics
3) If you want to get 150-200 apples per month from a game
you need to have at least 15k active players

33. We are ready to publish the app!
1. Go to Google Play console
2. Sign up new Google Developer Account
3. Pay 25$ for registration
4. We are completely ready to publish sigma-tech-week!

34. Summary: Chapter 2
1. Discussed types of banner Ad
2. Created AdMob account
3. Generated banner IDs
4. Added banner Ads to sigma-tech-week application
5. Learned how to create dev account
What’s next?

35. Chapter 3: My experience with
Google Play

36. Advice 1: Choose a place for banner Ads
If you decided to add Ads to your application you have to select appropriate
place, size, type and other configurations for banner.
Do it on the very first steps.
BANNER (640x20)
CONTENT

37. Advice 2: Do not click on your Ads
Do not click on your Ads, even for testing purposes

38. Advice 2: Do not click on your Ads
Do not click on your Ads, even for testing purposes:

39. How to test banner Ads?
Set the corresponding option in banner config:
this.bannerConfig = {
id: 'ca-app-pub-6558685611970079/8123060235',
isTesting: true, /* set this option */
autoShow: true
};
this.admobFree.rewardVideo.config(this.bannerConfig);

40. Advice 3: Check min SDK version when publishing
Ionic 3 applications work well on Android 4.4+.
To run it on Android 4.1 – use Cordova Crosswalk plugin.
https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview

41. How to deal with it?
Each Android app has config.xml file, Ionic apps do the same.
There is an option:
Set it to 19 if you don’t use Crosswalk and leave it as 16 if you do use the
plugin.
<preference name="android-minSdkVersion" value="16" />

42. When you forget about this…

43. Advice 4: Follow the trends
1. Monitor market to see what is popular for now
2. Create the application on trend topics first
3. Combine your ideas with something popular

44. Great example of trend application

45. Great example of trend application

46. Bring your ideas to the
world of Android applications