Publishing Android App in Google PlayStore Ionic

Publishing Android Application In Google Playstore

first step release the build App  Open the  Command Prompt the change directory for your project directory and Switch your Ionic project App Directory 

second step you need to add android platform to add and run the command in command prompt it will take some times reason for download the repository the if you want to check if platform automatically added under project Directory 

$ionic cordova platform add android

third step you create  unsigned APK  or release apk  open command prompt run this command it will take some time

$Ionic Cordova build android –prod –release

fourth step You will  Create Keystore file --> open the command prompt 

Run this Command

$keytool -genkey -v –keystore your_keystore_name.keystore -alias alias_name -keyalg  RSA -keysize 2048 -validity 10000

Sign the unsigned apk with jarsigner tool  run this command prompt

$jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore your_keystore_name.keystore  platforms\android\app\build\outputs\apk\release\  app-release-unsigned.apk alias_name

Zip Align tool is used to optimize the APK

this zipalign tool is located your appdata/local/android  sdk build tools so exaple my 
directory path :

C:\Users\test\AppData\Local\Android\sdk\build-tools\27.0.1\Zipalign.exe  copy this zipalign.exe its a execute java file Then paste into your Ionic project  Directory
(or) another method is available for zipalign command copy this "C:\Users\test\AppData\Local\Android\sdk\build-tools\27.0.1\Zipalign.exe" path 
right click the computer select the properties open the window select advanced system setting open the popup select the tab for advanced then click the environment variables button select path --> edit paste it the path then okie save it then check run the command for zipalign its working fine this method is permanently 

$zipalign -v 4 platforms\android\app\build\outputs\apk\release\app-release-unsigned.apk your_app.apk

Open the link https://play.google.com/apps/publish

Google play console case $25 USD

Click Create Application   and Fill the Description of App and Providing Screen Shots and Additional Info then Upload the signed APK that was generated  and Publish the App

Ionic 3 using Push Notification

Ionic 3 using Push Notification With Firebase

Firebase:

firebase  is google platform its used mobile and web application , google provide  some features  like as  in app messaging , firebase push notification , google cloud messaging , remote config , firebase cloud function , firebase database and firebase firestore if you use firebase in your app is high_quality application, relabel and more fast

Steps:

Login Into Your Gmail Account 

search Firebase to Google --> Open Console  -> create New Project ---> etc...Open Project  (android,ios,web) --> select oneI choose AndroidRegister App  --> com.yournameapp.app  ( your Config.xml file id like same as       com.yournameapp.app) 

Nick Name --> Optional if you want to give or not necessary Register AppDownload Googleservice.json File Copy this File Under Root Directory of Your Project  

Add FireBase SDK to Your Build.gradle file platform/android/...etc

Install this Plugin ana open the cmd prompt change directory to switch your project directory and run this command 

$ionic cordova plugin add cordova-plugin-fcm-with-dependency-updated

$npm install @ionic-native/fcm@4 --save

then open your project under src/ app

select app.modules.ts open this file -->add the modeuls 

var firebaseConfig = {  

apiKey: "fgfhg", 

 authDomain: "test-9c526.firebaseapp.com", 

 databaseURL: "https://test-9c526.firebaseio.com", 

 projectId: "test-9c826",  

storageBucket: "test-9c526.appspot.com",

  messagingSenderId: "54354353545", 

 appId: "1:34844348772050:web:d775454f03f53fe10cee0tgg86a8b"

};

@NgModule({ 

 declarations: [   MyApp,    HomePage  ], 

 imports: [    BrowserModule,    AngularFireAuthModule,    AngularFireDatabaseModule,    AngularFireModule.initializeApp(firebaseConfig),    IonicModule.forRoot(MyApp)  ],  bootstrap: [IonicApp],  entryComponents: [    MyApp,    HomePage  ], 

 providers: [    StatusBar,    AdMobFree,    Geolocation,    Diagnostic,    NativeGeocoder,    SocialSharing,    SplashScreen,    CallNumber,    {provide: ErrorHandler, useClass: IonicErrorHandler}  ]})

constructor(public navCtrl: NavController,public afd: AngularFireDatabase) {    this.tokensetup().then((token) => { 

     this.storetoken(token);    

})  }  

ionViewDidLoad()  { 

FCMPlugin.onNotification(function(data){    if(data.wasTapped){      // Notification was received on device tray and tapped by the user.    

   }else{      

// Notification was received in foreground. Maybe the user needs to be notified.       }    });

FCMPlugin.onTokenRefresh(function (token){});     } 

tokensetup() {   

 var promise = new Promise(( resolve, reject) => {  

    FCMPlugin.getToken( function (token){   

 resolve (token);      },

 (err) => {     

  reject (err);  });   

 })    return promise;  } 

 storetoken(t) {   

 this.afd.list(this.firestore).push({      uid: " user1 ",     devtoken: t    }).then(() => {   }).catch(() => {      //  alert (' Token not stored ');      }) }

Build Apk  installe it then Verify sdk the  go to google  cloud Messaging tab send message give notification name and title , target the app , sounds are enable or not then finally send or draft

Ionic 3 Login With Firebase

Steps: 

create the ionic project run the command 

$ionic start blank myapp --type=ionic-angular

then open the command prompt  change the directory of your ionic project directory the install the some modules are here  down see this

Go To The Firebase Console -->   Authentication menu ---> SignIn-method tab

 -->Edit  -> Enable Allow users Only (First Toggle Button)  ---> Save

Install NPM Modules:

installed this module open the command prompt  run this command

npm i rxjs@6 rxjs-compat@6 promise-polyfill --save (or)  npm install rxjs@6.0.0 --save

npm install firebase  angularfire2 --save

Import Your Modules In App.module.ts And Yourfile.Ts

App.Module.ts

import {AngularFireModule} from 'angularfire2';

import {AngularFireDatabaseModule,AngularFireDatabase} from 'angularfire2/database';

import {AngularFireAuthModule} from 'angularfire2/auth';
 imports: [
    BrowserModule,
    AngularFireAuthModule,
    AngularFireDatabaseModule,
    AngularFireModule.initializeApp(firebaseConfig),
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
     SocialSharing,
    SplashScreen,
    CallNumber,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})

Imports:

AngularFireModule.initializeApp(firebaseConfig),

    AngularFireAuthModule,

   AngularFireDatabaseModule

YourFileName.TS:

  iimport { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import {AngularFireModule} from 'angularfire2';
import {AngularFireAuthModule} from 'angularfire2/auth';
import {AngularFireDatabaseModule}from 'angularfire2/database';
import { CallNumber } from '@ionic-native/call-number';
import { Geolocation } from '@ionic-native/geolocation';
import { NativeGeocoder, NativeGeocoderReverseResult, NativeGeocoderForwardResult, NativeGeocoderOptions } from '@ionic-native/native-geocoder';
import { Diagnostic } from '@ionic-native/diagnostic';
import { SocialSharing } from '@ionic-native/social-sharing';

Codes:

Register Firebase Authentication:

// form validation method

Register(formData){

if(!formData.valid){

this.RegisterForm.get(' Fname ').markAsDirty();

this.RegisterForm.get(' Lname ').markAsDirty();

this.RegisterForm.get(' Username ').markAsDirty();

this.RegisterForm.get(' Email ').markAsDirty();

this.RegisterForm.get(' Password ').markAsDirty();

}else{

// here store the firebase database  

this.fdb.list(" /register/ ").push({

Fname:formData.value.Fname,

Lname:formData.value.Lname,

Username:formData.value.Username,

Email:formData.value.Email,

Password:formData.value.Password

});

// Your Email and Passwords  are Stored in Firebase Signin Method

return this.ath.auth.createUserWithEmailAndPassword(formData.value.Email,formData.value.Password).then(() => {

this.RegisterForm.reset();

let toast = this.toast.create({

      message:  'Register SuccessFully ',

      position: ' bottom ',

      duration: 4000

    });

    toast.present();

})

}

}

Login:

Login(formData){

if(!formData.valid){

// form validation method

this.LoginForm.get('Email').markAsDirty();

this.LoginForm.get('Password').markAsDirty();

}else{

// Login Authentication with Firebase database

return this.ath.auth.signInWithEmailAndPassword(formData.value.Email,formData.value.Password).then(()=>{

this.navCtrl.setRoot(HomePage)

},error =>{

let toast=this.toast.create({

message: ' UserName or Password Is Wrong ',

      position: ' bottom ',

      duration: 4000

});

toast.present();

})

}

}

Signout:

signOut() {  return this.ath.auth.signOut();}

Ionic 3 and Firebase Using database

Ionic 3 and Firebase Using database 

Create Ionic Project :

Ionic Start [Projectname] Blank --type=ionic-angular

Switch Project Directory

Create Firebase Account the create New  Project  then get web API config copy the Web Config  Paste the Your App.module.js

import {AngularFireModule} from 'angularfire2';
import {AngularFireDatabaseModule,AngularFireDatabase} from 'angularfire2/database';
import {AngularFireAuthModule} from 'angularfire2/auth';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

const firebaseConfig = {
  apiKey: "AIzaSyCze4AwyQNqNQqHId1ZoSUVBPQptN_NXwQ",
  authDomain: "firedb-49c70.firebaseapp.com",
  databaseURL: "https://firedb-49c70.firebaseio.com",
  projectId: "firedb-49c70",
  storageBucket: "firedb-49c70.appspot.com",
  messagingSenderId: "455535872444",
  appId: "1:455535872444:web:6ff67fe68dfeaf4d"
};

Install This NPM Modules

npm i rxjs@6 rxjs-compat@6 promise-polyfill --save 

{or)

npm install rxjs@6.0.0 --save

npm install firebase angularfire2 --save

Add The Modules in app.modules.ts

import {AngularFireModule} from 'angularfire2';

import {AngularFireDatabaseModule,AngularFireDatabase} from 'angularfire2/database';

Add the Imports:

imports: [ 
    AngularFireAuthModule, 
    AngularFireModule.initializeApp(firebaseConfig),
   AngularFireDatabaseModule
  ]

Add The Modules in Home.ts   

import {AngularFireDatabase} from 'angularfire2/database';

Codes:

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Firebase Example
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <form [formGroup]="RegisterForm">
  <ion-list>
  <ion-item>
  <ion-input formControlName="Fname" type="text" placeholder="Enter Your FirstName"></ion-input>
  </ion-item>
  <div class="red" *ngIf="RegisterForm.controls.Fname.value=='' && !RegisterForm.controls.Fname.valid && RegisterForm.controls.Fname.dirty">
  Enter User Fname
  </div>
  <ion-item>
  <ion-input formControlName="Lname" type="text" placeholder="Enter Your LastName"></ion-input>
  </ion-item>
  <div class="red" *ngIf="RegisterForm.controls.Lname.value=='' && !RegisterForm.controls.Lname.valid && RegisterForm.controls.Lname.dirty">
  Enter User Lname
  </div>
  <ion-item>
  <ion-input formControlName="Username" type="text" placeholder="Enter Your UserName"></ion-input>
  </ion-item>
  <div class="red" *ngIf="RegisterForm.controls.Username.value=='' && !RegisterForm.controls.Username.valid && RegisterForm.controls.Username.dirty">
  Enter User Name
  </div>
  <ion-item>
  <ion-input formControlName="Email" type="text" placeholder="Enter Your Email"></ion-input>
  </ion-item>
  <div class="red" *ngIf="RegisterForm.controls.Email.value=='' && !RegisterForm.controls.Email.valid && RegisterForm.controls.Email.dirty">
  Enter User Email
  </div>
  <ion-item>
  <ion-input formControlName="Password" type="password" placeholder="Enter Your Password"></ion-input>
  </ion-item>
  <div class="red" *ngIf="RegisterForm.controls.Password.value=='' && !RegisterForm.controls.Password.valid && RegisterForm.controls.Password.dirty">
  Enter User Password
  </div>
<button ion-button color="secondary" full (click)="Register(RegisterForm)">Register</button>
  </ion-list>
  </form>
<div class="row header">
<div class="col"> Fname</div>
<div class="col">Lname</div>
<div class="col">Username</div>
<div class="col">Email</div>
<div class="col">Password</div>
</div>
<div class="row s" *ngFor="let row of records">
<div class="col">{{ row.Fname }}</div>
<div class="col">{{ row.Lname }}</div>
<div class="col">{{ row.Username }}</div>
<div class="col">{{ row.Email }}</div>
<div class="col">{{ row.Password }}</div>
</div>
</ion-content>

Home.ts

import { Component } from '@angular/core';
import { NavController,ToastController} from 'ionic-angular';
import {AngularFireDatabase} from 'angularfire2/database';
import {Validators,FormGroup,FormControl} from '@angular/forms';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
RegisterForm:FormGroup;
records;
  constructor(public navCtrl: NavController,private fdb:AngularFireDatabase,public toast:ToastController) {
this.formInit()
  }
  formInit(){
this.RegisterForm = new FormGroup({
Fname: new FormControl("",[Validators.required,Validators.maxLength(10)]),
Lname: new FormControl("",[Validators.required,Validators.maxLength(10)]),
Username: new FormControl("",[Validators.required,Validators.maxLength(10)]),
Email: new FormControl("",[Validators.required,Validators.maxLength(30)]),
Password: new FormControl("",[Validators.required,Validators.maxLength(20)])
});
}
Register(formData){
if(!formData.valid){
this.RegisterForm.get('Fname').markAsDirty();
this.RegisterForm.get('Lname').markAsDirty();
this.RegisterForm.get('Username').markAsDirty();
this.RegisterForm.get('Email').markAsDirty();
this.RegisterForm.get('Password').markAsDirty();
}else{
this.fdb.list("/register/").push({
Fname:formData.value.Fname,
Lname:formData.value.Lname,
Username:formData.value.Username,
Email:formData.value.Email,
Password:formData.value.Password
});
let toast = this.toast.create({
      message: 'Register SuccessFully',
      position: 'bottom',
      duration: 4000
    });
    toast.present();
this.RegisterForm.reset();
}
}
ionViewDidLoad(){
this.fdb.list('/register').snapshotChanges().subscribe((res) => {
let tempar:any = [];
res.forEach((ele) => {
tempar.push(ele.payload.val())
});
this.records=tempar;
})
}
}

Home.Scss

 page-home {
.red {
    background-color: #eca7a799;
    color: #e01414d1;
    width: 94%;
    height: 35px;
    padding: 8px;
    margin: 6px 1px 1px 41px;
    border-radius: 10px;
}
.header .col {
  background-color: #49c2f3;
}
    .row.header {
    margin-top: -12px;
    margin-left: -16px;
    margin-right: -15px;
    }
    .row.s {
    margin-left: -15px;
    margin-right: -21px;
}
}

Output:

Ionic 3  Store Data With Fire Store

Install this NPM:

npm install firebase@6 angularfire2  rxjs@6.0.0  rxjs-compat --save

App.Module.ts:

      import {AngularFireModule} from 'angularfire2';

    import {AngularFirestore,AngularFirestoreModule} from 'angularfire2/firestore';

      var firebaseConfig = {

       apiKey: "",

       authDomain: "",

      databaseURL: "",

       projectId: "",

       storageBucket: "",

        messagingSenderId: "",

         appId: ""

  };

imports: [

    BrowserModule,

    AngularFirestoreModule,

     AngularFireModule.initializeApp(firebaseConfig),

    IonicModule.forRoot(MyApp)

  ],

YourHtml.js:

import { AngularFirestore, AngularFirestoreCollection }  from 'angularfire2/firestore';

import { Observable } from 'rxjs';

export class HomePage {

RegisterForm:FormGroup;

private userreg: AngularFirestoreCollection<Users>;

  constructor(public navCtrl: NavController,private afs:AngularFirestore) {

this.formInit();

  }

formInit(){

this.RegisterForm = new FormGroup({

Username: new FormControl("",[Validators.required,Validators.maxLength(20)]),

Password: new FormControl("",[Validators.required,Validators.maxLength(20)])

});

this.userreg=this.afs.collection<Users>('users')

}

signup(formData){

if(!formData.valid){

this.RegisterForm.get("Username").markAsDirty();

this.RegisterForm.get("Password").markAsDirty(); 

}else{

let userdata={

username:formData.get("Username").value,

password:formData.get("Password").value

}

const id = this.afs.createId();

 this.userreg.doc(id).set(userdata);

}

}

}