Android apps with Ionic. From rags to riches, Stanislav Khorunzhyi
Download as PPTX, PDF0 likes277 views
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. 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>](https://image.slidesharecdn.com/ionic-frameworkstaskhorungiy-170912130344/85/Android-apps-with-Ionic-From-rags-to-riches-Stanislav-Khorunzhyi-16-320.jpg)
![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 приглашает
на серию мероприятий, направленных на обмен опытом,
общение между представителями ИТ сообщества Одессы.
`;
}](https://image.slidesharecdn.com/ionic-frameworkstaskhorungiy-170912130344/85/Android-apps-with-Ionic-From-rags-to-riches-Stanislav-Khorunzhyi-17-320.jpg)
Android apps with Ionic. From rags to riches, Stanislav Khorunzhyi
- 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