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

ReactJs Add Dynamic Controls and Get Dynamic Values

Attributes:
       
HTML                           Reactjs

For                                 htmlfor
class                              className

Add dynamic components and get values

styles:
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}
.name{
  border: none;
  padding-top: 36px;
  font-size: 40px;
  font-weight: 800; 
  opacity: none;
  background: transparent;
}
.name::placeholder{
font-size:40px;
font-weight: 800; 
color: blue;
}
input#lname {
  color: black;
  border: none;
  font-size: 40px;
  font-weight: 800;
  padding-bottom: 36px;
}
.form-control:focus{
  box-shadow: none;
}
.placecolor{
  opacity: 0.3;
}
input#spl {
  color: black;
  font-size: 16px;
  font-weight: 700;
  padding-bottom: 22px;
  border: none;
  background: transparent;
}
img#profile {
  width: 80%;
  border-radius: 150px;
  cursor: pointer;
}
#bar{
  border-bottom: 1px solid #80808038;
  padding: 9px;
}

input.inpt {
  border: none;
  font-size: 16px;
  font-weight: 500;
  color: #367fe6;
}
.inpt:focus{
  box-shadow: none;
  outline: none;
}
.inpt::placeholder{
font-size:16px;
font-weight: 500;
color: #367fe6;
}
textarea {
  overflow: auto;
  resize: none;
  border: none;
  height: 5pc;
  width: 90%;
}
textarea:focus {
 box-shadow: none;
outline: none;
}
ul.skls {
  margin-top: 21px;
  line-height: 34px;
  font-size: 18px;

}

progress {
  margin: 4px 0px 0px 33px;
  height: 20px;
  width: 100%;
}
progress::-webkit-progress-value { background:#2196F3!important; }
textarea.educat {
  height: 237px;
  width: 101%;
  overflow: hidden;
  text-align: justify;
}
input.detail {
  border: none;
  font-size: 16px;
  font-weight: 500;
  color: #000;
}
.detail::placeholder{
  color: #000;
}
.detail:focus{
  box-shadow: none;
  outline: none
}
textarea.test {
  height: 22px;
  overflow: hidden;
  color: #000;
  font-weight: 500;

}

Design:

 <div className="col-md-5"> <ul type="none"> <div className="fname" placeholder="PAUL" contentEditable="true" onInput={this.name.bind(this)}  id="fname">{  this.state.dynamicbox.map((value,key)=>{return(<input type="text" id={"test"+key} onkeyup={this.dynamicvalues.bind(this,key)} />);});}

           </div> <button onclick={this.addtextbox.bind(this)} > add</button><button onclick={this.removetextbox.bind(this)} > Remove</button>         </div>          

Styles:

.fname{

  font-size: 42px;

  font-weight: 800 !important;
  color:#38a7e4;
  outline: none;
  line-height: 1.2;
  cursor: text;
  text-transform:uppercase;
}
.fname[contentEditable][placeholder]:empty::before{
  content: attr(placeholder);
  color: #38a7e4;
}
.fname[contentEditable][placeholder]:focus::before{
 opacity:.2;
}

Codes:

class resume extends Component{

constructor(){

  super();

   this.state={ 

    name:"",

    dynamicbox:[""],

    dynamicvalues:[]

} 

}

name(e){

this.setstate({

//content Editable

name:e.target.innerHTML

//form Components

name:e.target.value

)}

}

addtextbox(){

this.setState({

  dynamicbox:[...this.state.dynamicbox," "]

})

}

removetextbox(e){

  this.state.dynamicbox.splice(e,1);

this.setState({

  dynamicbox:this.state.dynamicbox

})

}

dynamicvalues(value,key){

this.state.dynamicvalues[value]=key.target.value;

this.setstate({

dynamicvalues:this.state.dynamicvalues

)}

}

date(value,key){
  const monname=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  var dt3=monname[key.target.value.getMonth()]+" "+key.target.value.getFullYear();
  this.state.projectdate[value]=dt3;
  this.setState({
    projectdate:this.state.projectdate
  })
  console.log(this.state.projectdate)
}

}

React Js Using Login and Signup Page

Prerequisite:

i) Install node js 
ii) open cmd prompt check node is installed type node -v
iii) type npm install -g Create-react-app -->global

Reactjs Create First App:

i)open cmd prompt npx create-react-app login_signup_app
it will take some times for installed dependency

ii) Install Dependency  npm i axios react-router-dom  if you want any npm package installed it npm i (packagename)

iii) switch the under login_signup_app/src   directory your files is located 

iv) then you want create new file or folder your wish 

v) i have create 2 file login.js and signup.js , App.js -->Default file

Code:

App.js:

// import the modules

import  React,{Component} from 'react';

//imported 2 files

import Login from './login';
import Signup from './signup';

import axios from 'axios';

import $ from 'jquery-confirm';

import {

  BrowserRouter as Router,

  Switch,

  Route,

  NavLink,

  Link

} from "react-router-dom";

export default class App extends Component{constructor(){    super();   }

render(){

  return(

    <div>

       <Router>

      <nav className="header">

           <ul type="none" className='nav' >

          <li>

               <NavLink exact activeClassName="active"  to="/">Home</NavLink>

             </li>

             <li>

               <NavLink  to="/login">Login</NavLink>

             </li>

             <li>

               <NavLink  to="/signup">Signup</NavLink>

             </li>

            

           </ul>

         </nav>

         <Switch>         

           <Route exact  path="/" component={Home} />    

           <Route  path="/login" component={Login} />        

           <Route  path="/signup" component={Signup} />        

         </Switch>

         </Router>

    </div>

  )

}

}

class Home extends Component{

constructor(){    super();

}

//file upload Function

upload(e){
  this.setState({
    file:e.target.files[0].name 
  })
  var rdr=new FileReader();
rdr.onload=function(t){
  document.getElementById('profile').src=t.target.result;
}
rdr.readAsDataURL(e.target.files[0]);
const fd=new FormData();
fd.append("image",e.target.files[0]);
 axios({
  method:'post', url:'file.php',
  data:fd ,
  config:{headers:{'content-type': 'multipart/form-data'}}
}).then(function(res){
console.log(res)
}).catch(function(err){
console.log(err)
});

} render(){  

return(<div>

//Defalut Page HTML CODES Here

</div>

)}

Login.js:

export default class Login extends Component{

constructor(){

    super();

    this.state={

        email:"",

        pwd:""

    }

}

    email(e){

        this.setState({

            email:e.target.value

        })

    }

    pwd(e){

        this.setState({

            pwd:e.target.value

        })

    }  

login(event){

    var name=this.state.email;

    var pwd=this.state.pwd;

    var sp1=document.getElementById('nm');

var sp2=document.getElementById('pd');

    if(name.length==0 && pwd.length==0){

console.log("Required fileds");

sp1.style.display="block";

sp2.style.display="block";

event.preventDefault();

    }else if(name.length==0 ){

        console.log("Required email");

        sp1.style.display="block";

sp2.style.display="none";

        event.preventDefault();

    }else if(pwd.length==0){

        console.log("Required passwd");

        sp1.style.display="none";

sp2.style.display="block";

        event.preventDefault();

    }else{

        axios({

            url:'http://localhost/sign.php',

            method:'post',

            data:{

              useremail:this.state.email,

              userpwd:this.state.pwd

            },

            headers:{'Access-Control-Allow-Origin': '*'}  

          }).then(function (res){    

              console.log(res.data);

              document.getElementById('frm').reset();

              $.alert({

                  title: 'Message!',

                  content: 'Login Successfully',

              });

          }).catch(function (err){          

          });

    }

    sp1.style.display="none";

    sp2.style.display="none";

}        

    render(){

        return(

<div style={{backgroundImage:"url(bg.jpg)",height:"85vh"}}>   

    <div className="container">

        <div className="row">

           <div className="col-md-4"></div>

           <div className="col-md-5 box">

            <h2 className="text-center">Login Page</h2>

            <form id='frm'>

            

            <div className="form-group">

               <label>Email</label>

               <input type="text" onKeyUp={this.email.bind(this)} className="form-control" placeholder="Enter Email"></input>

               <span id="nm" style={{display:"none",color:"red"}}>Email is Required</span>

            </div>

            <div className="form-group">

               <label>Password</label>

               <input type="password" onKeyUp={this.pwd.bind(this)} className="form-control" placeholder="Enter Password"></input>

               <span id="pd" style={{display:"none",color:"red"}}>Pasword is Required</span>

            </div>

             <lable style={{cursor:"pointer"}}  onClick={this.login.bind(this)}   className="btn btn-primary" >Login</lable>

             </form>

             <br/>

            </div>

            <div className="col-md-1"></div>

        </div>       

    </div>

</div>

        );

    }

} 

Signup.js:

import React,{Component} from 'react';

import axios from 'axios';

import './register.css';

import $ from 'jquery-confirm';

export default class Signup extends Component{

constructor(){

    super();

    this.state={

        uname:"",

        email:"",

        pwd:""

    }

}

name(e){

    this.setState({

        uname:e.target.value

    })

}

email(e){

    this.setState({

        email:e.target.value

    })

}

pwd(e){

    this.setState({

        pwd:e.target.value

    })

}    

    signup(){

axios({

  url:'http://localhost/sign.php',

  method:'post',

  data:{

    username:this.state.uname,

    email:this.state.email,

    passwd:this.state.pwd

  },

  headers:{'Access-Control-Allow-Origin': '*'}  

}).then(function (res){    

    console.log(res.data);

    document.getElementById('frm').reset();

    $.alert({

        title: 'Message!',

        content: 'Register Successfully',

    });

}).catch(function (err){

});

    }

    render(){

        return(

<div style={{backgroundImage:"url(bg.jpg)",height:"85vh"}}>   

    <div className="container">

        <div className="row">

           <div className="col-md-4"></div>

           <div className="col-md-5 box">

            <h2 className="text-center">Register Page</h2>

            <form id='frm'>

            <div className="form-group">

               <label>Username</label>

               <input type="text" onKeyUp={this.name.bind(this)} className="form-control" placeholder="Enter Username"></input>

            </div>

            <div className="form-group">

               <label>Email</label>

               <input type="text" onKeyUp={this.email.bind(this)} className="form-control" placeholder="Enter Email"></input>

            </div>

            <div className="form-group">

               <label>Password</label>

               <input type="password" onKeyUp={this.pwd.bind(this)} className="form-control" placeholder="Enter Password"></input>

            </div>

             <lable style={{cursor:"pointer"}} onClick={this.signup.bind(this)}  className="btn btn-primary" >Register</lable>

             </form>

             <br/>

            </div>

            <div className="col-md-1"></div>

        </div>       

    </div>

</div>

        );

    }

}

Signup.php:

<?php

header("Access-Control-Allow-Origin: *");

header("Access-Control-Allow-Headers: *");

$con=mysqli_connect("localhost","root","","test");

$data = json_decode(file_get_contents('php://input'), true);

@$name=$data['username'];

@$email=$data['email'];

@$pwd=$data['passwd'];

@$useremail=$data['useremail'];

@$userpwd=$data['userpwd'];

if(!empty($name)){

$sql="insert into signup values(NULL,'$name','$email','$pwd')";

$con->query($sql);

echo "Inserted...💜";

}else{    

}

if(!empty($useremail)){

    $sql="select * from signup where Email='$useremail' and Password='$userpwd'";

    $res=$con->query($sql);

    $cnt=mysqli_num_rows($res);

    if($cnt==1){

echo "Login Successfully..🤩";

    }else{

echo "Email or Password is Incorrect..😫";

    }    

}else{   

}

?>

Output: