Friday, 7 October 2022

UiPath

It is a RPA tool
It is a robotic process automation platform for end-to-end high-scale automation.
It provides user friendly visual designer
Easy to learn and implement

Components of UiPath:

Uipath Studio:
It allows us to plan any automation processes visually with the help of different diagrams.
Design Automation Project

UiPath Robot:
Run Automation Project
After done with the designing of processes in the studio, you need to execute the processes built in studio.

UiPath Orchestrator:
Manage Projects & Robots
It helps you to deploy, schedule, monitor, manage robots & processes.

React

React is a widely used JavaScript library that was launched in 2011.It was created by developers at facebook, and it is primarily used for frontend development.

React is a JavaScript library for building user interfaces. More specifically, React provides a declarative library that keeps the DOM in sync with your data.

The architecture is component-based and allows you that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. 

React does not have templates because it just relies on JavaScript combined with JSX so it is often favored by developers who are fluent in JavaScript

What is single page application?

A single page application is a web application that dynamically rewrites a current web page with new data from the web server, instead of the default method of a web browser loading entire new pages. Eliminating full page reloads results in less wait time between the browser and host for the user.

React Hook?

Hooks allow us to "hook" into React features such as state and lifecycle methods.

Types of Hooks:

custome Hook

useState Hook

useEffect Hook

Redux:

Normally in react always flows from parent to child components which makes it unidirectional.



















To create a sample React project ,you can follow these steps

1.Before you start,make sure you have node and npm installed on 
   your machine.
2.Open your terminal or command prompt and run the following command to create a new 
   react project using  create react app

    npx create-react-app mypractise

This command creates a new folder named "mypractise" and sets up a basic react project structure inside it.

3.After the project is created ,navigate to the project directory using the following command

     cd mypractise

4.To  start the development server and see your react app in the browser,run the following command

     npm start

This command will start the development server and open your app in the default browser.
 
5.Now you have a basic react project set up.
You can open the project folder in your favorite code editor and explore the project structure.


Friday, 2 February 2018

What is $filter() and $find() in JQuery and how to work $watch

Difference between filter() and find() in JQuery : 

Both filter() and find()methods are very similar, except the filter is applies to all the elements, while find searches child elements only.

1. filter() – search through all the elements.
2. find() – search through all the child elements only.

<html>
<head>
<script src="scripts/jquery-1.3.2.min.js"></script>

<style type="text/css">
div {
padding: 6px;
border: 1px solid;
width: 40%;
}
</style>

<title>JQuery find() vs filter() example</title>

<script type="text/javascript">

$(document).ready(function () {

$("#filterClick").click(function () {

$('div').css('background', 'white');

$('div').filter('#Hardware').css('background', 'skyblue');

});

$("#findClick").click(function () {

$('div').css('background', 'white');

$('div').find('#Hardware').css('background', 'skyblue');

});

});
</script>
</head>
<body style="width:40%">

<div id="Hardware">
Hardware
<div id="Computer">Computer</div>
<div id="Mobile">Mobile</div>
</div>

<div id="Category">
Category
<div id="Hardware">Hardware</div>
<div id="Software">Software</div>
</div>

<br />
<br />
<br />

<input type='button' value='Filter Hardware' id='filterClick'>
<input type='button' value='Find Hardware' id='findClick'>

</body>

</html>

After run the application click on the filter hardware then display the output  shown below.

























Then click on the find hardware then display the following out put shown below screen.

























$watch() Listeners In AngularJS : 

<!doctype html>
<html ng-app="Demo" ng-controller="AppController">
<head>
<meta charset="utf-8" />

<title>
Unbinding $watch() Listeners In AngularJS
</title>
</head>
<body>
<h1>
$watch() Listeners In AngularJS
</h1>
<p>
<a ng-click="incrementCount()">Click it get count!</a>
&raquo;
{{ clickCount }}
</p>
<p ng-show="isShowingFeedback">
<em>Hey,now that's how you click a link!!</a>
</p>
<!-- Load JQuery and AngularJS from the CDN. -->
<script type="text/javascript"
src="//code.jquery.com/jquery-2.0.0.min.js">
</script>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js">
</script>
<script type="text/javascript">
// Create an application module for our demo.
var app = angular.module("Demo", []);
app.controller(
"AppController",
function ($scope) {
$scope.clickCount = 0;
$scope.isShowingFeedback = false;
var unbindWatcher = $scope.$watch(
"clickCount",
function (newClickCount) {
console.log("Watching click count.");
if (newClickCount >= 5) {
$scope.isShowingFeedback = true;
unbindWatcher();
}
}
);
$scope.incrementCount = function () {
$scope.clickCount++;
};
}
);
</script>
</body>
</html>













The above code. In this demo, we're watching the number of clicks that a link receives. And, if that number gets above 5, we're going to show a message; however, once the message is shown, we remove the listener as it will no longer have any value. 

As you can see, we're storing the function reference returned by the $watch() statement; then, once the $watch() fires a few times, we invoke that stored method, unbinding the $watch() listener.














Wednesday, 17 January 2018

ASP .NET Core Application using AngularJS 2

Starting Angular 2 in ASP.NET Core with TypeScript using Visual Studio 2015

This tutorial aims for starting Angular 2 in ASP.NET Core using Visual Studio 2015. 
The release of Angular 2, ASP.NET Core RC is becoming interesting to build SPA.

I have compiled the steps involved in starting to learn Angular 2

Step 1 : Creating an empty ASP.NET Core project Open Visual Studio 2015 Community Edition Update 3.
Select New Web Project naming it “CoreAngular2” and select “Empty” project template. Don’t forget to install new web tools for ASP.NET Core 1.0 




















I used Visual Studio 2015 Community Edition Update 3(Must update), TypeScript 2.0 (must), latest NPM.





















Step 2: Configure ASP.NET Core to serve Static Files ASP.NET Core is designed as pluggable framework to include and use only necessary packages, instead of including too many initial stuff.

Lets create HTML file named “index.html” under wwwroot folder.
Right click on wwwroot folder, Add New Item and create index.html file. This HTML page will act as default page.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ASP.NET Core with Angular 2 </title>
</head>
<body>
<h1>Example of ASP.NET Core using Angular 2 with Visual Studio 2015</h1>
</body>

</html>

For ASP.NET Core to serve static files, we need to add Static Files middle ware in Configure method of Startup.cs page. Ensure that packages are restored properly. 

project.json is redesigned to make it better, we have Static Files middle ware to serve static assets like HTML, JS files etc.

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
app.UseDefaultFiles();
app.UseStaticFiles();
loggerFactory.AddConsole();

if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}

app.Run(async (context) =>
{
await context.Response.WriteAsync("Hello World!");
});
}

Run the application now, ASP.NET Core renders static HTML page 












Step 3: What is TypeScript?

1. It is a typed super set of JavaScript that compiles to plain JavaScript. Any TypeScript code that runs in browser is plain JavaScript so its “Any browser. Any host. Any OS. 

2. The language consists of the new syntax, keywords, and type annotations. As a programmer, the language will be the component you will become most familiar with.

3. Understanding how to supply type information is an important foundation for the other components because the compiler and language service are most effective when they understand the complex structures you use within your program.

4. The Compiler performs the type erasure and code transformations that convert your TypeScript code into JavaScript.

5. It will emit warnings and errors if it detects problems and can perform additional tasks such as combining the output into a single file, generating source maps, and more.

6. The Language Service provides type information that can be used by development tools to supply intellisense, type hinting, re-factoring options, and other creative features based on the type information that has been gathered from the written program.

Step 4: Adding TypeScript in ASP.NET Core
Firstly created “Scripts” folder by right click project “CoreAngular2”. Here in this folder, we will add TypeScript Configuration file to use various settings of typescript.
Right Click on “Scripts” folder, Add new file by selecting from template TypeScript JSON Configuration File as shown below
















The reason to add this file in “Scripts” folder is that “Scripts folder will now act as VIRTUAL TYPESCRIPT project” and whenever we write any Typescript code in “Scripts” it will be automatically TRANSPILE’D to JavaScript.

Add TypeScript file called “app.ts” from Add New File options on “Scripts” folder.

Step 5: Output Directory for Compiled TypeScript files to wwwroot In beginning, I mentioned that “TypeScript compiles to plain JavaScript that runs in a browser”. 

The obvious question is where will compiled plain JavaScript will be placed?
As we are using ASP.NET Core, we have “wwwroot” which will serve assets directly to clients, including HTML files, CSS files, image files, and JavaScript files. The wwwroot folder is the root of your web site.

Now lets open “tsconfig.json“, we need to add configuration entry as “outDir” i.e. Output Directory so that compiled TypeScript files are copied there.

{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"outDir": "../wwwroot/scripts"
},
"exclude": [
"node_modules",
"wwwroot"
]
}

Just compile once to see that app.ts is compiled to app.js under wwwroot folder along with its mapping.

























Step 6: Writing TypeScript code in app.ts


It’s time to write code in app.ts file. Below code is a mix of TypeScript Code and usual plain JavaScript code. This shows that “Any JavaScript code is valid TypeScript Code”

//Person is now string
function Welcome(person: string) {
return "Hello, " + person;
}

function ClickMeButton() {
var user = "Sandeep Jamkar";
document.getElementById("divMsg").innerHTML = Welcome(user);
}

Open index.html and copy this code. It has reference to app.js in HEAD section, it signifies that wwwroot acts as root folder of our ASP.NET Core. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ASP.NET 5 TypeScript</title>
<!-- app.js is loaded from wwwroot folder -->
<script src="scripts/app.js"></script>
</head>
<body>
<h3>Example of ASP.NET Core using Angular 2 with Visual Studio 2015</h3>
<input type="button" style="width:70px;" value="Click Me" onclick="ClickMeButton()" />
<div id="divMsg"></div>
</body>
</html>

Run the application, Click the “Click Me” button to see a welcome message.



Step 7: What is so special here? Build errors in TypeScript code

TypeScript is special because it can do Type checking when doing a build. Function “Welcome” takes a string as a parameter. What if I make it as a number and check?


















Let’s see what is happening here.
1. Function “Welcome” takes parameter “Person” as number making it strongly typed.
2. Passing variable  “user” containing a string. It’s obvious that NUMBER isn’t STRING
3. Build errors clearly stating that its assignment error.
This is one of features TypeScript provides, making it special.



Monday, 15 January 2018

What is Asp .Net Core And what is IoT Technology

1. ASP .NET Core is a cross platform ,high performance ,open source framework for building modern,cloud-based ,Internet-connected applications.

With ASP .NET core,you can:
1. Build web apps and services,IoT apps and mobile backends.

What is IoT technology:
The Internet of Things(IoT) is a system of interrelated computing devices,mechanical and digital machines,objects,animals or people that are provided with unique identifiers and the ability to transfer data over a network without requiring human-to -human or human-to-computer interaction.

Examples of the Internet of things:
The Internet of Things refers to the rapidly growing network of connected objects that are able to collect and exchange data using embedded sensors.
Thermostats,cars,lights,refrigerators,smart retail,connected Health(digital health/telemedicine/Telehealth),Industrial internet,smart grids,smart city and more appliances can all be connected to the IoT.

What is IoT and its uses?
The Ineternet of things (IoT) is the inter-networking of physical devices,vehicles(also referred as “connected devices” and “smart devices”),buildings and other items-embedded with electronics,software,sensors,actuators and network connectivity that enable these objects to collect and exchange data.
  1. Use your favorite development tools on windows,macOS and Linux
  2. Deploy to the cloud or no-premises
  3. Run on .NET Core or .Net Framework.
Following screen show how to select ASP .NET CORE Application :

Open the VS 2015----> File --- New Project--> Select the ASP .NET Core Web Application.



















After click on the "OK" then open the  open the new window ASP .NET Core Tool show in below screen.

























Friday, 12 January 2018

How to implement Web API using ASP .Net MVC

Web API Examples :

File--> new project select Web API the create the structure of application.

Then add new controller shown below screen.






















Then open the window Add Scaffold the select the Web API 2 Controller with read/write actions. Shown in the below screen.


















After adding the Controller you will see the code as in the following snapshot.


























You have successfully added a Web API controller to your application.

Now you can run the application and test it.






























It's easy to configure it as a Web API.
The ASP.Net MVC and ASP.Net Web API makes heavy use of convention for configuration to Lighten the work load for creating the services.
For example, add a decorating method with attributes to make it easy to do CRUD operations.
Else it will make it difficult to understand and code.

The HTTP actions and their corresponding CRUD operations are:
  • GET (Read)
    Retrieves the representation of the resource.

  • PUT(Update)
    Update an existing resource.

  • POST (Create)
    Create new resource.

  • DELETE (Delete)
    Delete an existing resource.

Now let's begin with how to create a CRUD operation with the WEB API.
1. Let's start by adding a Model.
To add the model right-click on the model folder and add a class with the name Mobile Stock.

















2. After adding the model properties now I will consume the HTTP service developed using the ASP.NET Web API in a simple CSHTML page with JQuery and Ajax.

3. For that in the View folder I will add a folder named Mobile and inside that folder will add a Mobile Stock named view. To add it just right-click on the View folder and select View.











After adding the view you will get a blank view because we are not using any tightly coupled model here.
4. Then add a Controller with the name MobileController. Call this view Mobilestock for the demo of consuming the Web API.In this I called the view Mobile Stock.


























After adding the Controller and View now let us move back towards the Web API and make some changes that we have already created with the name “MobileDetailsController”.
Let's get to the first method in MobileDetailsController.



















This method is used to get a list of data.
In this method I have used the Model MobileStock and created a list of MobileStock “List<MobileStock>“.
And returning it.


GET by id




In this GET method you can retrieve records for the database by passing an id.
  • POST









In this POST method you can post data (CREATE) to the database. In this I am using the Carstock model to post the data.
  • PUT















In this PUT method you can UPDATE the data (UPDATE) to the database. I am using the Carstock model to update the data.
  • DELETE







In this DELETE method you can delete data (DELETE) from the database. I am using an id to delete the data.

Here is a snapshot of all the methods and models after adding the attributes to it. 



























Now let's move to the view and do CRUD operations from there.

For getting a list of data I have created a function in jQuery.

  1. Calling GET IEnumerable List from Ajax and getting data from the Web API.
function AllmobileDetails() {
$.ajax({
type: "GET",
url: "http://localhost:56151/api/Mobiledetails", //URI

dataType: "json",
success: function (data) {
debugger;
var datadatavalue = data;
var myJsonObject = datavalue;
contentType: "application/json";
$.each(myJsonObject, function (i, mobj) {
$("#Mobiletbl").append('<tr><td width="50px">' + mobj.MobileName +
'</td><td width="50px">' + mobj.MobileModel +
'</td><td width="50px">' + mobj.MobilePrice +
'</td>' + '</td><td width="50px">'
+ mobj.MobileColor + '</td></tr>');

});

},
error: function (xhr) {
alert(xhr.responseText);
}
});

}

Calling PostMobile Method using Ajax and posting data to the Web API.
function PostData() {

var mobiledetails =
{
MobileName : "Vivo",
MobileModel : "V5",
MobileColor : "White",
MobilePrice : "20000"
};

$.ajax({
type: "POST",
data: JSON.stringify(mobiledetails),
url: "http://localhost:56151/api/Mobiledetails",
dataType: "json",
contentType: "application/json",
});

}

Calling the PUTmobile method using Ajax and updating the data of the Web API.

function PutData() {

var mobiledetails =
{

MobileName: "Vivo",
MobileModel: "V5",
MobileColor: "White",
MobilePrice: "20000"

};

var t = JSON.stringify(mobiledetails);
var id = "0";
$.ajax({
url: 'http://localhost:56151/api/Mobiledetails/' + id,
type: "put",
contentType: "application/json; charset=utf-8",
data: t,
dataType: "json",

});
}

Calling the Delete mobile method using Ajax and to delete data of the Web API.

function deleteData1() {
var id = 0;
$.ajax({
url: 'http://localhost:32359/api/MobileDetails/' + id,
type: 'DELETE',
success: function (data) {

},
error: function (data) {
alert('Problem in deleting car:' + data.responseText);
}
});
}

Calling GET by ID from Ajax and getting data from the Web API by id.

function GetMobileById() {
var id = 1;
$.ajax({
url: 'http://localhost:56151/api/MobileDetails/' + id,
type: 'GET',
dataType: "json",
success: function (data) {

var datavalue = data;
var myJsonObject = datavalue;

var MobileModel = myJsonObject[0].MobileModel;
var MobileName = myJsonObject[0].MobileName;
var MobileColor = myJsonObject[0].MobileColor;
var MobilePrice = myJsonObject[0].MobilePrice;

$('<tr><td>' + MobileModel + '</td><td>' + MobileName +
'</td><td>' + MobileColor + '</td>' + '</td><td>' + MobilePrice + '</td></tr>').appendTo('#Mobiletbl');
},
error: function (xhr) {
alert(xhr.responseText);
}
});
}


After completing all the functions of Ajax I am now displaying the view “MobileStock”. 

Final Output

Here in this view I have consumed a Web API for Demo.