Ionic 2 / Ionic 3 - Adding App Rates (Review Stars) with Cordova and Ionic Native 3.x+

Introduction


In this tutorial we will be covering how to add app rating to our mobile apps created with Ionic 2 / Ionic 3 framework .

We are going to create a simple example app which prompts the user to rate the application .

App rating allows users to rate your application .Rating is represented by stars which you can find when your visit the app details page on app stores .

As a rule on major app stores ,the more good stars and reviews you have the more your app will ranked high in app stores search which will increases the downloads and earnings (Via sales ,ads etc .)

Getting started


So lets start by creating a new Ionic app ,to demonstrate how to add App Rating ,using The Ionic CLI (v3)

ionic start AppRateExample blank 

Navigate inside your app root folder then install Cordova plugin for App Rating and its Ionic Native wrapper

cd AppRateExample
ionic plugin add --save cordova-plugin-apprate
npm install --save @ionic-native/app-rate

Open src/app/app.module.ts then add a provider for this plugin .

import { AppRate } from '@ionic-native/app-rate';

@NgModule({
declarations: [
    MyApp,
    HomePage
],
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp,
    HomePage
],
providers: [
    StatusBar,
    SplashScreen,
    AppRate,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

Open src/pages/home/home.html then add a button which triggers app rating .

<button ion-button full large (click)="rateMe()">Rate Me</button>

Open src/pages/home/home.ts then add rateMe() method :

import { Component } from '@angular/core';
import { AppRate } from '@ionic-native/app-rate';

@Component({
selector: 'home',
templateUrl: 'home.html',
})
export class HomePage {

constructor(private appRate: AppRate) {
}

rateMe(){
    this.appRate.preferences.storeAppURL = {
    ios: '< my_app_id >',
    android: 'market://details?id=< package_name >',
    windows: 'ms-windows-store://review/?ProductId=< Store_ID >'
    };

    this.appRate.promptForRating(true); 
}

}

Replace < myappid > with your iOS app id .

Replace < package_name > with Android package name .

Replace < Store_ID > with your Windows store App ID .

Conclusion


You can now add a Cordova target platform (Andoroid ,iOS and Windows ) ,build and run your app using an emulator or real device to test app rating In your Ionic 2/3 application .

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status