Tuesday, January 1, 2019

Skype Chatbot Using Microsoft Bot Framework and Node Js

Chatbot, a computer program that simulates human conversation, or chat, through artificial intelligence. Typically, a chat bot will communicate with a real person. Chat bots are used in applications such as e-commerce customer service, call centers, and Internet gaming. They can transform the way you interact with the internet from a series of self-initiated tasks to a quasi-conversation.

A Skype Chatbot gives last Invoice Amount of the Client/Customer.

Making a Chatbot can be a bit tricky initially, due to the way you have to structure your code.

In this post, I want to show how you can deal with a Skype Chatbot using Microsoft Bot Framework and Node Js as it's open source scripting language.

As it's POC I'm hosting it on open source ngrok server but it uses Http protocol which is not secure.


For security, we should host it on Azure. Below is the starting price for hosting.


Skype Chatbot is showing last Invoice Amount of Client.


Here Database connection is required to fetch data from dB. Functional Developer should create a Connection with Database and fire a Query instead of "Parth Dave" text. 

Right now I'm using a value of Current Username as Parth Dave which I've got from username.sync() (Node Js function).


Even We can use the Cognitive Service of Microsoft (LUIS) but it's not fully open source. Only 10k calls per month are free.

We can use Chatbots to drop an Out of Office message, too.


You have now leveled up by knowing how to deal with a Chatbot. I am attaching Source Code for your reference.

Saturday, November 24, 2018

CRUD Operations in Angular 6



In this article we will be building an Angular 6 CRUD Operation application step by step from scratch with example. We will be generating our Angular 6 application using angular CLI and then modify it to have an employee management project where end user can perform CRUD operations such as create, list, update and delete with the sample REST API exposed using HttpClientModule. We will also be using RouterModule to have routing enabled.
For this project, I have npm 5.6.0 and node v8.11.2 installed on my local system. You can download the latest version of Node js from here https://nodejs.org/en/download/. To update NPM, you can run the following command in the terminal.
npm i npm@latest -g
If u have a @angular/cli version older then 6, then run following command to install the latest versions:
npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli
To install a specific version, you can use npm install -g @angular/cli@6.1.6

Generating Angular 6 Project 

Once, the npm and node is upgraded to the latest version, you can run following command to generate angular 6 project in any location of your choice.
ng new crudoperation
Doing so, our angular 6 application is generated. 

Angular 6 Project Structure

Once the project is generated, you can run following commands to see angular 6 app running at localhost:4200.
cd crudoperation
ng serve

Routing

Following is our routing configuration. We have configured to use ListEmpComponent as a default component. Also, do not forget to include it in the main module - app.module.ts

app-routing.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { ListEmpComponent } from './list-emp/list-emp.component';
import { AddEmpComponent } from './add-emp/add-emp.component';

export const routes: Routes = [
  { path: '', component: ListEmpComponent, pathMatch: 'full' },
  { path: 'list-emp', component: ListEmpComponent },
  { path: 'add-emp', component: AddEmpComponent }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule],
  declarations: []
})
export class AppRoutingModule { }


app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { ReactiveFormsModule } from "@angular/forms";

import { AppComponent } from './app.component';
import { ListEmpComponent } from './list-emp/list-emp.component';
import { AddEmpComponent } from './add-emp/add-emp.component';
import { EmployeeService } from './service/employee.service';

@NgModule({
  declarations: [
    AppComponent,
    ListEmpComponent,
    AddEmpComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    ReactiveFormsModule
  ],
  providers: [EmployeeService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Model

export class Employee {
    id?: number;
    employee_name?: string;
    employee_salary?: number;
    employee_age?: number;
}

Service

Following is the implementation of our EmployeeService. It has all the API details that is required for the CRUD operation. Here, I have used Json Server for making API calls.

Json Server is for front-end developers which simulates a backend REST service to deliver data in JSON format to the front-end application and make sure everything is working as expected. 

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Employee } from '../model/employee.model';

@Injectable({
  providedIn: 'root'
})
export class EmployeeService {

  constructor(private http: HttpClient) { }
  baseUrl: string = 'http://localhost:3004/posts/';

  getEmployees() {
    return this.http.get<Employee[]>(this.baseUrl);
  }
  deleteEmployees(id: number) {
    return this.http.delete<Employee[]>(this.baseUrl + id);
  }
  createUser(employee: Employee) {
    return this.http.post(this.baseUrl, employee);
  }
  getEmployeeById(id: number) {
    return this.http.get<Employee>(this.baseUrl + '/' + id);
  }
  updateEmployee(employee: Employee) {
    return this.http.put(this.baseUrl + '/' + employee.id, employee);
  }
}

Creating Components

list-emp.component.html

<div class="col-md-12">
  <h2> User Details</h2>
  <div class="table-responsive table-container">
    <table class="table">
      <thead>
        <tr>
          <th>Id</th>
          <th>Employee Name</th>
          <th>Salary</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let emp of employees">
          <td class="hidden">{{emp.id}}</td>
          <td>{{emp.employee_name}}</td>
          <td>{{emp.employee_salary}}</td>
          <td>{{emp.employee_age}}</td>
          <td>
            <button (click)="deleteEmp(emp)" class="btn btn-info"> Delete</button>
            <button (click)="editEmp(emp)" style="margin-left: 20px;" class="btn btn-info"> Edit</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

list-emp.component.ts

import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../service/employee.service';
import { Employee } from '../model/employee.model';
import { Router } from "@angular/router";

@Component({
  selector: 'app-list-emp',
  templateUrl: './list-emp.component.html',
  styleUrls: ['./list-emp.component.css']
})
export class ListEmpComponent implements OnInit {

  employees: Employee[];

  constructor(private empService: EmployeeService, private router: Router, ) { }

  ngOnInit() {
    this.empService.getEmployees()
      .subscribe((data: Employee[]) => {
        this.employees = data;
      });
  }
  deleteEmp(employee: Employee): void {
    this.empService.deleteEmployees(employee.id)
      .subscribe(data => {
        this.employees = this.employees.filter(u => u !== employee);
      })
  }
  editEmp(employee: Employee): void {
    localStorage.removeItem('editEmpId');
    localStorage.setItem('editEmpId', employee.id.toString());
    this.router.navigate(['add-emp']);
  }
}

add-emp.component.html

<div class="col-md-6">
  <h2 class="text-center">{{empformlabel}}</h2>
  <form [formGroup]="addForm" novalidate class="form">
    <div class="form-group">
      <label for="empId">Employee Id:</label>
      <input type="number" formControlName="id" placeholder="Id" name="empId" class="form-control" id="empId">
    </div>

    <div class="form-group">
      <label for="empName">Employee Name:</label>
      <input formControlName="employee_name" placeholder="Employee Name" name="empName" class="form-control" id="empName">
      <div class="alert  alert-danger" *ngIf="addForm.get('employee_name').hasError('required') && addForm.get('employee_name').touched">
        Employee Name is required
      </div>
    </div>

    <div class="form-group">
      <label for="empSalary">Employee Salary:</label>
      <input formControlName="employee_salary" placeholder="Employee Salary" name="employee_salary" class="form-control" id="employee_salary">
      <div class="alert  alert-danger" *ngIf="addForm.get('employee_salary').hasError('maxlength') && addForm.get('employee_salary').touched">
        Employee Salary is required and should less than 9 characters.
      </div>
    </div>

    <div class="form-group">
      <label for="empAge">Employee Age:</label>
      <input formControlName="employee_age" placeholder="Employee Age" name="empAge" class="form-control" id="empAge">
      <div class="alert  alert-danger" *ngIf=" addForm.get('employee_age').hasError('maxlength') && addForm.get('employee_age').touched">
        Age is required and should less than 3 characters.
      </div>
    </div>
    <button class="btn btn-success" [disabled]='addForm.invalid' *ngIf="btnvisibility" (click)="onSubmit()">Save</button>
    <button class="btn btn-success" [disabled]='addForm.invalid' *ngIf="!btnvisibility" (click)="onUpdate()">Update</button>

    <p>Form value: {{ addForm.value | json }}</p>
  </form>
</div>

add-emp.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { EmployeeService } from '../service/employee.service';
import { Router } from "@angular/router";

@Component({
  selector: 'app-add-emp',
  templateUrl: './add-emp.component.html',
  styleUrls: ['./add-emp.component.css']
})
export class AddEmpComponent implements OnInit {

  empformlabel: string = 'Add Employee';
  empformbtn: string = 'Save';
  constructor(private formBuilder: FormBuilder, private router: Router, private empService: EmployeeService) {
  }

  addForm: FormGroup;
  btnvisibility: boolean = true;
  ngOnInit() {

    this.addForm = this.formBuilder.group({
      id: [],
      employee_name: ['', Validators.required],
      employee_salary: ['', [Validators.required, Validators.maxLength(9)]],
      employee_age: ['', [Validators.required, Validators.maxLength(3)]]
    });

    let empid = localStorage.getItem('editEmpId');
    if (+empid > 0) {
      this.empService.getEmployeeById(+empid).subscribe(data => {
        this.addForm.patchValue(data);
      })
      this.btnvisibility = false;
      this.empformlabel = 'Edit Employee';
      this.empformbtn = 'Update';
    }
  }
  onSubmit() {
    console.log('Create fire');
    this.empService.createUser(this.addForm.value)
      .subscribe(data => {
        this.router.navigate(['list-emp']);
      },
      error => {
        alert(error);
      });
  }
  onUpdate() {
    console.log('Update fire');
    this.empService.updateEmployee(this.addForm.value).subscribe(data => {
      this.router.navigate(['list-emp']);
    },
      error => {
        alert(error);
      });
  }
}

Global Style

style.css

/* You can add global styles to this file, and also import other style files */
@import "~bootstrap/dist/css/bootstrap.css";
@import "~font-awesome/css/font-awesome.css";
.ng-valid[required], .ng-valid.required  {
  border-left: 5px solid #42A948; /* green */
}
.ng-invalid:not(form)  {
  border-left: 5px solid #a94442; /* red */
}
.mtop10{
  margin-top:10px;
}

Testing Angular 6 Application

Now run the command ng serve and hit localhost:4200

You can see following screen with list of users. On this page, you can perform actions to add, edit and delete employee. 


Here, we have used same Component for Add and Edit/Update Employee.

Conclusion

In this article, we learned about Angular 6 CRUD Operation and created a example. The source can be downloaded from GitHub here - https://github.com/parthdave12/Angular-6-CRUD-OPEATIONS.git