List of scanned barcodes using ReactNative & Expo

Create a new Expo Project with a blank template.

expo init Barcodescan

Then install react native elements for UI & start the application.

yarn add reactnativeelements

expo start

Open app.js and write below code

import { StyleSheet, Text, View,ScrollView, Alert, Vibration } from ‘react-native’;
import { ListItem, List } from ‘react-native-elements’;
import { BarCodeScanner, Permissions } from ‘expo’;
Initialize the state variable for permissions and list
state = {
  hasCameraPermission:null,
  barcodesListShow : [],
  barcodesList : []
};

Ask for the camera permission

async componentWillMount() {
  const { status } =awaitPermissions.askAsync(Permissions.CAMERA);
  this.setState({hasCameraPermission:status==='granted'});
}

Add the below code in the main view container

<View>
  {this.state.hasCameraPermission===null?
  <Text>Requesting for camera permission</Text>:
  this.state.hasCameraPermission===false?
  <Text>Camera permission is not granted</Text>:
  <BarCodeScanner
    onBarCodeRead={this._handleBarCodeRead}
    style={{ height:200 }}
  />
  }
</View>
<ScrollView>
  <List>
    {this.state.barcodesListShow.map((item) => (
    <ListItem
      key={item.data}
      title={item.data}
      onPress={()=>this._delete(item)}
      leftIcon={{name: 'barcode-scan',type:'material-community',color:'#000'}}
      subtitle={item.type}
      rightIcon={{name: 'close-box-outline',type:'material-community',color:'#000'}}    />
    )) }
  </List>
</ScrollView>

Push the scanned data into barcodesListShow and barcodesList.

_handleBarCodeRead=data=> {
  Vibration.vibrate(100);
  let st=true;
  for(leti=0;i<this.state.barcodesList.length;i++){
    if(this.state.barcodesList[i].data==data.data){
      st=false;
    }
  }

  if(st){
    this.state.barcodesList.push(data);
    this.setState({barcodesListShow :this.state.barcodesList});
  }else{
    console.log('alerdy scanned.');
  }
};
Delete barcode when we touch in the list with alert confirmation.
_delete = (data) => {
  Alert.alert(
    'Info',
    'Do you want to deleate?',
    [
      {text: 'NO', onPress: () => console.log('Item Not Deleated.'), style: 'cancel'},
      {
        text: 'YES', onPress: () => {
          for(let i=0;i<this.state.barcodesList.length;i++){
            if(this.state.barcodesList[i].data==data.data){
              this.state.barcodesList.splice(i,1);
              this.setState({barcodesListShow :this.state.barcodesList});
              break;
            }
          }
        }
      },
    ]
  );
}
Git Link: Click Here

Face Detection using React Native & Expo

Hi friends,

I am explaining about face detection from scratch using react native and expo.
First Create a new project named as FaceDetection.

create-react-native-app FaceDetection

Import the below classes from the expo

import { FaceDetector,Camera,Permissions,Constants } from ‘expo’;
Then, Ask for the camera permission
async componentWillMount() {

   const { status } =await Permissions.askAsync(Permissions.CAMERA);

   this.setState({hasCameraPermission:status==='granted'});

}

Then, Open Camera and detect the face using the front camera. If face detected ‘handleFacesDetected’ function will be triggered.

return (

        <View style={styles.container}>

          <Camera

             style={styles.camera}

             type={'front'}

             onFacesDetected={this.handleFacesDetected}

             faceDetectorSettings={{

               mode: FaceDetector.Constants.Mode.fast,

               detectLandmarks: FaceDetector.Constants.Mode.none,

               runClassifications: FaceDetector.Constants.Mode.none,

             }}>

             </Camera>

        </View>

      );
handleFacesDetected = ({ faces }) => {

    if(faces.length>0){

      this.setState({ faces });

    }

  };

Face detected you want to see the dimensions set the below code.

<Camera>
  <View style={styles.topBar}>
    <Text style={styles.textcolor}>x: {this.state.faces.length?this.state.faces[0].bounds.origin.x.toFixed(0) :0}</Text>
    <Text style={styles.textcolor}>y: {this.state.faces.length?this.state.faces[0].bounds.origin.y.toFixed(0) :0}</Text>
  </View>

  <View style={styles.bottomBar}>
    <Text style={styles.textcolor}>Heigth: {this.state.faces.length?this.state.faces[0].bounds.size.height.toFixed(0) :0}</Text>
    <Text style={styles.textcolor}>width: {this.state.faces.length?this.state.faces[0].bounds.size.width.toFixed(0) :0}</Text>
  </View>
<Camera>

But, If you want to mark your face in the camera you should write some styles.

renderFace({ bounds, faceID, rollAngle, yawAngle }) {

return (

<View

key={faceID}

transform={[

{ perspective: 600 },

{ rotateZ: `${rollAngle.toFixed(0)}deg` },

{ rotateY: `${yawAngle.toFixed(0)}deg` },

]}

style={[

styles.face,

{

...bounds.size,

left:bounds.origin.x,

top:bounds.origin.y,

},

]}>

<Text style={styles.faceText}>rollAngle: {rollAngle.toFixed(0)}</Text>

<Text style={styles.faceText}>yawAngle: {yawAngle.toFixed(0)}</Text>

</View>

);

}

renderFaces = () => 

    <View style={styles.facesContainer} pointerEvents="none">

      {this.state.faces.map(this.renderFace)}

    </View>

Add the below line after camera Tag.

<camera>...</camera>
{ this.state.faces.length ? this.renderFaces() : undefined}

Finally write Style as below.

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#000',

  },

  camera: {

    flex: 1,

    justifyContent: 'space-between',

  },

  topBar: {

    flex: 0.2,

    backgroundColor: 'transparent',

    flexDirection: 'row',

    justifyContent: 'space-around',

    paddingTop: Constants.statusBarHeight+1,

  },

  bottomBar: {

    flex: 0.2,

    backgroundColor: 'transparent',

    flexDirection: 'row',

    justifyContent: 'space-around',

  },

  face: {

    padding: 10,

    borderWidth: 1,

    borderRadius: 1,

    position: 'absolute',

    borderColor: '#808000',

    justifyContent: 'center',

    backgroundColor: 'transparent',

  },

  faceText: {

    color: '#32CD32',

    fontWeight: 'bold',

    textAlign: 'center',

    margin: 10,

    backgroundColor: 'transparent',

  },

  facesContainer: {

    position: 'absolute',

    bottom: 0,

    right: 0,

    left: 0,

    top: 0,

  },

  textcolor:{

    color: '#008080',

  }

});

Git: Click Here

Expo Demo: Click Here

face detection

Barcode & QR Code Scanner Using React Native and Expo

Hi Guys, Here i am explaining about Barcode Scanning from scratch.

First you need to install React Native and Yarn globally using below commands.

npm install -g create-react-native-app

npm install -g yarn

Now you create project using below command.

create-react-native-app BarcodeExpo

Download Expo in playstore & Enable developer options and usb debugging in your android device and run below commands for execute it.

cd BarcodeExpo

yarn start

Press “a”

Then, Open BarcodeExpo/App.js and Import below line in this code

import { Vibration,StyleSheet, Text, View } from ‘react-native’;

import { BarCodeScanner, Permissions } from ‘expo’;

Then you ask for the camara permission
state = {
   hasCameraPermission:null,
}
async componentWillMount() {
   const { status } =await Permissions.askAsync(Permissions.CAMERA);
   this.setState({hasCameraPermission:status===’granted’});
}
Check for the permission details and render barcode scanner. Replace below code in render()
const { hasCameraPermission } = this.state;
if (hasCameraPermission===null) {
   return <Text>Requesting for camera permission</Text>;
} else if (hasCameraPermission === false) {
   return <Text>No access to camera</Text>;
} else {
   return (
      <View style={styles.container}>
      <BarCodeScanner
      onBarCodeRead={this._handleBarCodeRead}
     style={{ height:250, width:350 }}
      />
   </View>
   );
}
Now need to write readed barcode details.(_handleBarcodeRead function)
_handleBarCodeRead= ( { type, data }) => {
   alert(`Bar code type : ${type} and data : ${data} `);
}
If you want vibration after scan you will add below line after alert in _handleBarCodeRead() function.
Vibration.vibrate(100);
Final Code :
import React from 'react';

import { Vibration,StyleSheet, Text, View } from 'react-native';

import { BarCodeScanner, Permissions } from 'expo';

export default class App extends React.Component {

  state = {

     hasCameraPermission:null,

  }

  async componentWillMount() {

     const { status } =await Permissions.askAsync(Permissions.CAMERA);

     this.setState({hasCameraPermission:status==='granted'});

  }

  render() {

    const { hasCameraPermission } = this.state;

    if (hasCameraPermission === null) {

    return <Text>Requesting for camera permission</Text>;

    } else if (hasCameraPermission === false) {

    return <Text>No access to camera</Text>;

    } else {

        return (

            <View style={styles.container}>

              <BarCodeScanner

                  onBarCodeRead={this._handleBarCodeRead}

                  style={{ height: 250, width: 350 }}

              />

            </View>

            );

    }

  }

  _handleBarCodeRead = ( { type, data }) => {

     alert(`Bar code type : ${type} and data : ${data} `); 

      Vibration.vibrate(100);

  }

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    justifyContent: 'center',

  },

});

Get code in Git: Click Here

Expo Demo: Click Here

barcode scanned

Getting started with MEAN (Mysql, Express, Angular 6, Node) Part-5

I am explaining about user login and JWT.

First, create the configuration file in the backend to store the secret key.

I saved in backend/config/conf.js

const crypto = require(‘crypto’).randomBytes(256).toString(‘hex’);
// Export config object
module.exports = {
   secret:crypto,
}

Add below lines in server.js/index.js

var config = require(‘./config/conf’);
var jwt = require(‘jsonwebtoken’);
var user = require(‘./models’).user;
//======== login =================
app.post(‘/login’,(req,res)=>{
   var name=req.body.name;
   var password=req.body.password;
   user.findOne({ where: {name :name,password :password} }).then(users=> {
   if(users){
      consttoken=jwt.sign({userId :users.id},config.secret,{expiresIn :’24h’});
      res.send({‘status’ :true, ‘message’:’sucess’, token :token, user :       {username:users.name}});
      }else{
         res.send({‘status’ :false, ‘message’:’fail’});
      }
   })
});
//============= middle ware ==================
app.use((req,res,next)=>{
   const token=req.headers[‘auth’];
   if(!token){
      res.send({‘status’:false,’message’:’No autherized.’});
   }else{
      jwt.verify(token,config.secret,(err,decoded)=>{
         if(err){
            res.send({‘status’:false,’message’:’In valid token.’});
         }else{
            req.decoded=decoded;
            next();
         }
      })
   }
});

//========== middleware ends ========

//============= get profile information after login ========

app.get(‘/profile’,(req,res)=>{
   user.findOne({ where: {id :req.decoded.userId} }).then(users=> {
      if(users){
         res.send({‘status’ :true, ‘message’:’sucess’, data :users});
      }else{
         res.send({‘status’ :false, ‘message’:’fail’});
      }
   })
});
I already explained about node server creation and connect with MySQL using sequelize in previous sessions.
Test the server using postman.
login check
Here the response token is JWT Token. Now you will save this token in your frontend to authentication.
Create login or sign-in component using below command(leave it if already created)
ng g component components/signin
First, write the login service in frontend(angular 6).
src/app/services/api.service.ts
import { Http,RequestOptions, Headers } from ‘@angular/http’;
//========  login service ==================
login(user) :any{
  user.password=this.encryptdata(user.password);
  return this.http.post(this.base+’/login’,user).pipe(map(res=>res.json()));
}
//========= store the token details ============
storageuserdata(token,user) : void{
  localStorage.setItem(‘token’,token);
  localStorage.setItem(‘user’,JSON.stringify(user));
  this.auth_token=token;
  this.user=user;
}
//=========== create header with token ============
createauthenticatioheader(){
  this.loadToken();
  this.options=newRequestOptions({
    headers :newHeaders({
    ‘Content-Type’ :’application/json’,
    ‘auth’ :this.auth_token,
  })
});
}
//============= load token from local storage ===========
loadToken(){
  this.auth_token=localStorage.getItem(‘token’);
}
//======= get profile with authentication token ===============
getprofile(){
  this.createauthenticatioheader();
  return this.http.post(this.base+’/profile’,this.options).pipe(map(res=>res.json()));
}
//========== logout function ========
logout(){
   this.auth_token=null;
   this.user=null;
   localStorage.clear();
}
//====== get the JWT token ===========
getToken():string{
   return localStorage.getItem(‘token’);
}

//=== get profile with headers having logined token ========

getprofile(){
   this.createauthenticatioheader();
   return this.http.get(this.base+’/profile’,this.options).pipe(map(res=>res.json()));
}
Then write sign in/login screen
src/app/components/user/signin/signin.component.ts
import { Component, OnInit } from '@angular/core';

import { ApiService } from '../../../services/api.service'

import { tokenKey } from '@angular/core/src/view';

@Component({

 selector:'app-signin',

 templateUrl:'./signin.component.html',

 styleUrls: ['./signin.component.css']

})

export class SigninComponent implements OnInit {

 user:user;
 showalert:boolean;
 alertmsg:string;
 profile:prof;

 constructor(privateapi:ApiService) { }

 ngOnInit() {

  this.user= {
   name :'',
   password :''
  };

  this.profile= {
   status :false,
   message :'',
   data : []
  }

  this.showalert=false;
  this.alertmsg='';
//========= check the token exist or not ==========
  if(this.api.getToken()){
   this.profiledets();
  }

 }
//==== login function ==========
 login(){
  if(this.user.name&&this.user.password){
  this.api.login(this.user).subscribe(res=>{
  if(res.status){
//====== store the token in local storage ======
   this.api.storageuserdata(res.token,res.user);
   this.user= {
    name :'',
    password :''
   };
   this.profiledets();
  }else{
   this.showalert=true;
   this.alertmsg='Login Fail...';
   this.user.password='';
  }
 });
 }else{
  this.showalert=true;
  this.alertmsg='Please check all the fields.';
 }
}
//======== get profile function =========
 profiledets(){
  this.api.getprofile().subscribe(res=>{
   if(res.status){
    this.profile=res;
   }else{
    this.profile=res;
    this.showalert=true;
    this.alertmsg=this.profile.message;
   }
  });
 }
//==== logout function ===========
 logout(){
  this.api.logout();
  this.user= {
   name :'',
   password :''
  };
  this.profile= {
   status :false,
   message :'',
   data : []
  }
 }
}

interface user{
 name:string,
 password:string
}

interface prof{
 status:boolean,
 message:string,
 data:any
}
src/app/user/signin/signin.component.html
login html

Git Links:

Front End: https://gitlab.com/iamchandu.1992/angular6-signup-login-frontend

Backendhttps://gitlab.com/iamchandu.1992/SampleREST-APIsUsing-Node-JWT-Sequelize.git

Thanking you….

Getting started with MEAN (Mysql, Express, Angular 6, Node) Part-4

I will explain about user registration using angular 6.

Create 3 components sign in and signup & API service using angular-cli.

ng g component components/user/signin
ng g component components/user/signup
ng g service services/api

ng g component components/user/userslist

Now check the files in src/components/user and src/services. Paste the below code in respected files.

install Cryptojs for encrypting the password

npm install crypto-js

src/app/app.modules.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { HeaderComponent } from './components/ui/header/header.component';

import { FooterComponent } from './components/ui/footer/footer.component';

import { SigninComponent } from './components/user/signin/signin.component';

import { SignupComponent } from './components/user/signup/signup.component';

import { ApiService } from './services/api.service';

import { RouterModule, Routes } from '@angular/router';

import { HttpModule } from '@angular/http';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { UserslistComponent } from './components/user/userslist/userslist.component';

const appRoutes: Routes = [

  { path: 'signin', component: SigninComponent },

  { path: 'signup', component: SignupComponent },

  {path:'users', component : UserslistComponent},

  { path: '',

    redirectTo: '/signin',

    pathMatch: 'full'

  },

];

@NgModule({

  declarations: [

    AppComponent,

    HeaderComponent,

    FooterComponent,

    SigninComponent,

    SignupComponent,

    UserslistComponent

  ],

  imports: [

    BrowserModule,

    HttpModule,

    FormsModule,

    RouterModule.forRoot(

      appRoutes,

      { enableTracing: true } // <-- debugging purposes only

    )

  ],

  providers: [ApiService],

  bootstrap: [AppComponent]

})

export class AppModule { }
src/app/components/ui/header/header.componet.html
ui-header.PNG

src/app/app.component.html

<app-header></app-header>

   <router-outlet></router-outlet>

<app-footer></app-footer>

Then Write the API service.

src/app/services/api.service.ts

import { Injectable } from '@angular/core';

import { Http } from '@angular/http';

import { map } from "rxjs/operators";

import * as CryptoJS from 'crypto-js';

import { unwrapResolvedMetadata } from '@angular/compiler';

@Injectable({

  providedIn: 'root'

})

export class ApiService {

  base = "http://localhost:3000";

  key : any;

  iv : any;

  constructor(private http: Http) { 

    this.key = CryptoJS.enc.Hex.parse("8500641681234567");

    this.iv  = CryptoJS.enc.Hex.parse("2811da22377d62fcfdb02f29aad77d9e");

  }

  getUsersList(){

    return this.http.get(this.base+'/get-users').pipe(map(res=>res.json()));

  }

  signupuser(user){

    user.password = this.encryptdata(user.password);

    return this.http.post(this.base+"/create-user",user).pipe(map(res=>res.json()));

  }

  encryptdata(values): string {

    var encrypted ;

    encrypted = CryptoJS.AES.encrypt(values, this.key, {

      mode: CryptoJS.mode.ECB,

      padding: CryptoJS.pad.NoPadding

    });

    return CryptoJS.enc.Hex.stringify(encrypted.ciphertext);

  }

}

src/app/components/user/userslist/userslist.component.ts

import { Component, OnInit } from '@angular/core';

import { ApiService } from '../../../services/api.service';

@Component({

  selector: 'app-userslist',

  templateUrl: './userslist.component.html',

  styleUrls: ['./userslist.component.css']

})

export class UserslistComponent implements OnInit {
  users : any;

  constructor(private api:ApiService) { }

  ngOnInit() {

    this.api.getUsersList().subscribe(users=>{this.users=users});

  }

}
src/app/components/user/userslist/userslist.component.html
users-userslist
Now we go with signup screen. First, design the screen in HTML and assign the names for that inputs using ng-model.
src/app/components/user/signup/signup.component.ts
import { Component, OnInit } from '@angular/core';

import { ApiService } from '../../../services/api.service'

@Component({

selector:'app-signup',

templateUrl:'./signup.component.html',

styleUrls: ['./signup.component.css']

})

export class SignupComponent implements OnInit {

user:usr;

showalert:boolean;

alertmsg:string;

constructor(privateapi:ApiService) { }

ngOnInit() {

this.showalert=false;

this.alertmsg='';

this.user= {

name :'',

password :'',

email :'',

phone :'',

roleId :2

};

}

saveuser(){

if(this.user.name&&this.user.email&&this.user.password&&this.user.phone){

this.api.signupuser(this.user).subscribe((res)=>{

this.showalert=true;

if(res.status){

this.alertmsg='User Created Successfully.';

this.user= {

name :'',

password :'',

email :'',

phone :'',

roleId :2

};

}else{

this.alertmsg='User Not Created.';

}

});

}else{

this.showalert=true;

this.alertmsg="Please fill all the fields..";

}

}

}

interface usr {

name:string,

password:string,

email:string,

phone:string,

roleId:number

}

src/app/components/user/signup/signup.component.html

signup-html.PNG
signup output
In the next session, I will explain about Login and JWT.

Git Links:

Front End: Link

BackendLink

Getting started with MEAN (Mysql, Express, Angular 6, Node) Part-3

This session, I am explaining about node server creation and table operations from MySQL database using sequelize models.

First, initialize Node using below command and fill the required details.

npm init

npm intilization.png

now create index.js (mentioned in entry point) file and paste below code.

//======== Import Required Files ===============
var express = require(‘express’);
var bodyparser = require(‘body-parser’);
var cors = require(‘cors’);
var jwt = require(‘jsonwebtoken’);
//============ Create Express app and initialize to app variable ========
var app = express();
// ============= initialize cros ==============
app.use(cors());
//=========== set port ================
app.set(‘port’,process.env.port || 3000 );
//========= initialize body parser ==========
app.use(bodyparser.json());
//=========== Start Code Here ====================
app.get(‘/’,(req,res)=>{
    res.send({‘status’:true,’msg’:”Server Started.”});
});
//============== Code Ends Here ===================
//====== Start Server ===================
app.listen(app.get(‘port’),()=>{
    console.log(‘Server Created in ‘+app.get(‘port’)+”Port”);
});
Run node server using below command and see your results in http://localhost:3000/
node index.js
node server.png

Insert some dummy data in your database tables. Then get the inserted data using sequelize.

if we want to get the data first include the users model.

var user = require(‘./models’).user;
var roles = require(‘./models’).roles;

Then place the below code and get output in http://localhost:3000/get-users. More details regarding models, go through this link (Click Here)

app.get(‘/get-users’,(req,res)=>{
   user.findAll({ include: [{model:roles} ] }).then(users=> {
       res.send({‘status’:true,’data’:users});
   });
});

So you can insert user using below code(using postman you can add user details).

app.post(‘/create-user’,(req,res)=>{
   var user_data=req.body;
   user.create({
   name:user_data.name,
   email:user_data.email,
   password:user_data.password,
   phone:user_data.phone,
   roleId:user_data.roleId
   }).then((users)=>{
      res.send({‘status’:true,’msg’:users});
   });
});
Postman.PNG

Thank you, guys. In the next session, I will explain the connections between angular 6 and node.

Git Links:

Front End:  https://github.com/iamchandu/angular6-signup-login-frontend

Backendhttps://github.com/iamchandu/SampleREST-APIsUsing-Node-JWT-Sequelize

Getting started with MEAN (Mysql, Express, Angular 6, Node) Part-2

I am explaining about node and MySQL connections using sequelize.

You need to install Express, Sequelize, Body Parser, Express Handlebars, Cors and JWT using below command

npm i express sequelize mysql2 body-parser express-handlebars cors jsonwebtoken

Express – Node js framework.
Sequelize – ORM concept for Node.
Body Parser – It is used to handle the requests.
Cors – It is used to handle headers.
JWT – Json Web Token.

Install sequelize-cli using below command.

npm i sequelize-cli -g

Now you can initialize sequelize using below command.

sequelize init

Now you get below code structure.

sequelize stracture

Now you install the MySQL server. My recommendation is Install XAMPP (Download Here).

Change the database credentials in code structure config->config.json and add the below line in the development section.

“operatorsAliases” : false

My credientials are like below(only change in the development section).

mysql connections.PNG

Then Create Database using sequelize cli.

sequelize db:create

Then Create Models as you want. In this section am creating 2 models that are users and roles.

sequelize model:create –name roles –attributes role_name:string

sequelize model:generate –name user –attributes name:string,email:string,password:string,phone:string

Models and migration files created in your code base.

then open the migrations/xxxx.create-user.js file and add the below line in after updatedAt.

rolesId: {
       type:Sequelize.INTEGER
}

Then Write the relation between the two models.

First, open the models/user.js and write the below code.

user.associate = function(models) {
        user.belongsTo(models.roles);
};

Then Open models/roles.js and write the below code.

roles.associate = function(models) {
        role.hasMany(models.user);
};
Then Create the tables in Database using sequelize cli command below.
sequelize db:migrate
db tables.PNG
Thank you, in the next section, I will explain about node server creation and get data from database using sequelize models.

Git Links:

Front End: Click Here

BackendClick Here

Getting started with MEAN (Mysql, Express, Angular 6, Node) Part-1

mean

In this blog, I am explaining about node and MySQL connections using sequelize, ORM & Models Creation using sequelize, jwt for user authentication and angular 6 for the frontend.

First, we need to install Node, Git, any Editor you like Ex: Visual studio code, Atom, Notepad++ etc(I am using Visual studio code).
Download links are given below:
Node: https://nodejs.org/en/download/ (After installation we get node package manager to get node modules).
Git: https://git-scm.com/downloads
Editor: https://code.visualstudio.com/

Install latest Angular Cli Globally using the command.

npm install -g @angular/cli

Create Angular Application using below command.

ng new

Ex :  ng new frontend

Frontend folder created with angular sample code.
Goto that folder and start the sample application using ng serve command.

cd frontend
ng serve –open

Install Bootstrap, jquery and font awesome using below commands.

npm install --save bootstrap 

npm install --save font-awesome 

npm install --save jquery

Add below lines in this file src/styles.css

@import “~bootstrap/dist/css/bootstrap.css”;
@import “~font-awesome/css/font-awesome.css”;

Add the below lines in angular.json file.

“node_modules/jquery/dist/jquery.min.js”,
“node_modules/bootstrap/dist/js/bootstrap.js”

angular-bootstrap

add component named header for menus and logos

ng g component components/ui/header

then go to src/app/components/ui/header/header.component.html

 

 

Create footer component using below command

ng g component components/ui/footer

then go to src/app/components/ui/footer/footer.component.html

footer
header and footer

In the next session, I will explain about node js server creation and sequelize cli.

Thanking you.

Git Links:

Front End:  https://github.com/iamchandu/angular6-signup-login-frontend

Backendhttps://github.com/iamchandu/SampleREST-APIsUsing-Node-JWT-Sequelize

Create your website with WordPress.com
Get started