Forem: Deepanshu Arora

Redefining The Way You Style Components Using Styled-Wind

Deepanshu Arora — Thu, 26 Nov 2020 12:18:54 +0000

Hey Everyone ,

In this Blog Post , we will see a better way by which we can style our UI Components. If you develop UI Components , chances that you might be using styled-components or to style them , since it is the de-facto CSS in JavaScript Frameworks which is used now a days.

But Ladies and Gentlemen ,what If I told you that something better than this exists which inherits features from styled-components and TailWind CSS

The Name of that Big Player is styled-wind

With styled-wind, you can make use of Tailwind CSS classnames into your styled-components project,

Now, you might be wondering why migrate to styled-wind when I am okay with styled-components in the first place.

Let me give you few reasons to justify why you should migrate to styled-wind.

1). The Ability to write Responsive Code

Since , styled-wind is a subset of TailWind CSS i.e.
you can make the use of TailWind CSS classnames into your Project , it becomes very easy to make your project responsive.

Since every class in TailWind can be applied for different breakpoints , it becomes very easy to bring responsiveness into your project , and the fact of the matter is you do not have to use those classic Media Queries into your HTML to make your web project responsive. Let styled-wind do all the heavy lifting for you.

2).By Using styled-wind , you do not have to memorize CSS Properties

When using styled-wind , you get away with this headache of recalling those classic CSS properties and then applying them to style your CSS components. Instead , you can just refer Class Names from TailWind CSS and then you are good to go.

If you clearly observe this above Code Snippet Example , you can clearly observe that instead of using any of the classic CSS properties , you can refer the required class name which you want to use from TailWind CSS.

3).Flexibility of using TailWind CSS in styled-components

Now , since styled-wind is the hybrid form of TailWindCSS+styled-components , it becomes a lot easier to integrate TailWind CSS in a styled-components project.

As , we discussed in the first point , you can just refer to the required classname in the TailWind CSS Documentation , and then appropriately use it in your Project.

For Instance , Suppose you want to add vertical padding of 4 rem to an element. Now had you made use of Traditional CSS into your project , you would have to explicitly specify to your CSS file :
padding-top : 4 rem ; padding-bottom : 4rem ;
but with styled-wind , you get away this mess , you can simply write py-4 and you are done.

I hope , by now you must be fan of TailWind CSS :D

Well , there are other reasons also as to why using styled-wind is more advantageous. But , in my Opinion as a Developer , these two reasons are strong enough to propel you towards using styled-wind.

Now , there is nothing wrong in using styled-components, but the main factor which I found as a limiting factor was that , everytime I want to style a component , I have to refer those traditional CSS properties.

So , that's it for this blog post

You can deep dive into styled-wind by referring to its User Friendly Documentation here :
https://styled-wind.netlify.app/#/

I hope , I was able to provide some value through this Blog

You can connect with me through these following platforms :

Linkedin : https://www.linkedin.com/in/deepansharora27/
Twitter : https://twitter.com/deepansharora27

Working on Social Authentication through PassportJS and integrating it with our Backend ExpressJS App (Part - 1 )

Deepanshu Arora — Tue, 10 Nov 2020 07:22:23 +0000

Recently , While Working on My Side Project , I thought why not authenticate the end user who is going to access my application with the help of various Social Network platforms such as Facebook and Twitter.

Many People who are reading this blog , will resonate with the fact that , it is so much easier to signup/login via social network platforms such as Facebook and Twitter , instead of manually going through this traditional process of filling in your E-mail Address , Your Name , then setting up a password. This traditional process takes up a lot of time.

That's why we have this savior for Developers , who want to provide their users with the comfort of , signing in/signing up to their web app with the Social Authentication Mechanism and that Savior is PassportJS.

PassportJS is basically a authentication middleware for NodeJS. The interesting fact about PassportJS is that , it can be integrated with any Express Based Web Application.

Let's dive into it and explore more about it

At the root , we have our server.js file , and main role of this file is instantiating our server , and instantiating the middleware for PassportJS.

I am assuming that you are already familiar with the fundamentals of Express and NodeJS , therefore I will not go into the deep nitty gritties of every line of code , and I will focus mostly on explaining the concepts related to PassportJS

const express = require('express');
const app = express();
const passport = require('passport');

app.set("port" , process.env.PORT || 3000);

app.use(passport.initialize());
app.use(passport.session());

app.listen(app.get("port"), () => {
  console.log("The Server is Up and Running");

});

The Main thing to notice here is these two statements

app.use(passport.initialize());
app.use(passport.session());

Let's understand what we're doing in each of the above statements :

The First Statement basically imports the Passport Middleware Function which is essentially designed for integration with Express. It basically gives Passport the access to the request and response streams(or we can say request and response objects)

The Second Statement basically integrates Express Session Middleware with PassportJS.

Now , comes the main deal where we will now purely deal with PassportJS.

Now , we have another file named auth.js , where we will now deal with the
Social Authentication Logic Using PassportJS

const passport = require('passport');
const FacebookStrategy = require("passport-facebook").Strategy ; 

/*
Importing this User Route because , here I have defined several helper functions and since I am using Mongoose as an Interface to communicate with my MongoDB Database , I have performed all of the queries on the database in this File(Will attach the screenshot of this route file below so that you can know how I have performed query on database using the helper functions.
*/
const user = require("../routes/users");

module.exports = ()=> {

 passport.serializeUser((user, done) => {
    done(null, user.id);
  });

  passport.deserializeUser((id, done) => {
    //Find the User Using the _id Property inside of our MongoDB Collection :
    user
      .findById(id)
      .then((user) => done(null, user))
      .catch((error) => console.log("Error While Deserializing the User"));
  });

let authProcessor = async (accessToken, refreshToken, profile, done) => {

    const result = await user.findOne(profile.id);

    if (result) {
      done(null, result);
    } else {
      const newUserSaved = await user.createNewUser(profile);

      if (newUserSaved) {
        done(null, newChatUser);
      } else {
        console.log("Error While Creating a New User");
      }
    }
  };

  passport.use(new FacebookStrategy(config.fb, authProcessor));

}

Let's start from*top-down* and see what we are trying to accomplish here:

Firstly , we have imported this package named as passport-facebook and while importing this package , we are invoking this Strategy Constructor Function. This statement basically goes into the passport-facebook module and imports the constructor function , which internally uses the OAuth 2.0 Module to provide authentication and login functionality to your Application.

Now , if we have a look at the end of the file , we have this code :

 passport.use(new FacebookStrategy(config.fb, authProcessor));

This is basically the passport middleware function , here inside this middleware function , we are passing in a new instance of the FacebookStrategy Module.
(SideNote : If you are Familiar with Object Oriented Programming, you might be already familiar that in order to invoke constructor of a class automatically , we just create a new instance of that class. The Same thing we are doing here as well.)

Inside this new instance Of FacebookStrategy , we will pass two things as parameters , A Configuration Block which basically is providing access to the ApplicationID , SecretKey and a A Callback URL

This is the Configuration block that I am talking about :

"fb": {
    "clientID": "3417694501659554",
    "clientSecret": "e9b2089b3c04886396983be6d01cbb7f",
    "callbackURL": "//localhost:3000/auth/facebook/callback",
    "profileFields": ["id", "displayName", "photos"]
  }

It is basically an object with these key-value pairs . The ClientID and ClientSecret is provided by Facebook only and it will be provided by Facebook when you register your application on Facebook .

You can do so by visiting *www.developers.facebook.com *

Next Login with your Account , then you will see an option in the top-right corner named as MyApps , click on that. After Clicking on MyApps Option , you will see an option named as Create New App , click on that .

Next , it will show you a set of options asking you what purpose does your app serve

Since we are working on creating a Web App , Click on the Last Option and then proceed forward . Fill all the required details about your Web Application .

At last when everything gets completed , Go to Settings and then click on Basic.

You will see something like this :

This is the AppID and the App Secret Key that is provided by Facebook , so that you can use it's API , to proceed with the Social Authentication.(SideNote : It is advised that you should not share your SecretKey with anyone)

The CallBack URL Key is used such that when you are successfully authenticated by facebook , using your credentials , then facebook needs a way to get back to your Application , this purpose is served by the CallBack URL Property. We Type in the URL , where we want Facebook to redirect to , after we are successfully authenticated.

The profileFields property is basically an array of strings , and those strings represent what do we want to request back from the Facebook Server for our Application.

The Next Parameter inside this Passport Middleware is an Callback Function which has four Parameters :
AccessToken , RefreshToken , profile(A Profile Object) and done(A Method)

This Callback Function is technically known as the VerifyCallbackbecause its job is to find a User Profile in the local MongoDB Instance using the profile.id which refers to the UserID as sent by Facebook or any other Social Authentication Provider.

The AccessToken and RefreshToken are Provided by Facebook as a part of OAuth 2.0 Process.

The done() method gets the data out of the Authentication Pipeline and provides it to the requesting application.

As we can see in the code snippet for the callback function , we are querying our Database for finding if the user is present in our Local MongoDB instance or not . If the user is present , we directly return it to the app using the done() method
else we create the new user in the database and then return it to requesting application using done() method.

let authProcessor = async (accessToken, refreshToken, profile, done) => {

    const result = await user.findOne(profile.id);

    if (result) {
      done(null, result);
    } else {
      const newUserSaved = await user.createNewUser(profile);

      if (newUserSaved) {
        done(null, newChatUser);
      } else {
        console.log("Error While Creating a New User");
      }
    }
  };

Here is the code of the helper function users route , as i mentioned earlier :

const router = require("express").Router();
const UserModel = require("../models/User");

let findOne = (profileID) => {

  return UserModel.findOne({
    profileId: profileID,
  });
};


let createNewUser = async (profile) => {
  return new Promise((resolve, reject) => {

    let newChatUser = new UserModel({
      profileId: profile.id,
      fullName: profile.displayName,
      profilePic: profile.photos[0].value || "",
    });

    newChatUser.save((error) => {
      if (error) {
        console.log("Error in Creating New User");
        reject(error);
      } else {
        resolve(newChatUser);
      }
    });
  });
};

let findById = (id) => {
  return new Promise((resolve, reject) => {
    UserModel.findById(id, (error, user) => {
      if (error) {
        reject(error);
      } else {
        resolve(user);
      }
    });
  });
};

module.exports = {
  findOne,
  createNewUser,
  findById,
};

That's all for this Part 1 of the Blog . In the Part 2 , I will continue the discussion further and there we will talk about Serializing and De serializing user data

I hope , I was able to provide some value with my content.
If you liked it , please share it with your Network .

You can connect with me through following platforms :

LinkedIn : https://www.linkedin.com/in/deepansharora27/

Twitter UserHandle : Deepansharora27

Instagram : deepanshu.codes

Everything about JWT(JSON Web Tokens) and why it is more powerful than the traditional Session Management ?

Deepanshu Arora — Sun, 11 Oct 2020 07:06:58 +0000

While Working with any backend framework , I am sure you must have heard of this recurring term , JWT(JSON Web Tokens) ,
and I tried to gain more insight into this concept since past few days while working on my Full Stack MERN Project and thought why not share some insights , which can help other Developers in the Community as well.

So , Let's get started and get to the meat of the things :

JWT or JSON Web Token is basically a token which is used for authorisation of a Client/or Host/or User , and mind my words , it is used for Authorisation , not Authentication . There is a fine line difference between both of these two terms.

*Lets take a minute to understand both of these two terms as well *

Let's take example of Facebook, which we all use in our day to day lives :

Here, is the Facebook Login Page , You Enter your Credentials(User Name and Password Here), and Click on Log In.

When you are successfully logged in , and redirected to the home page of your News Feed, that is when you can say that you are successfully Authenticated by the Backend Server.

Now , since we are clear with Authentication , let's get to Authorisation .

Now , let's suppose you want to update your Profile Picture on Facebook . Now, you are well aware that you are authenticated user, that's why Facebook Server has redirected to your Homepage. But, in order to update your Profile Picture on Facebook , you must be an Authorised User .

By Authorised in this context , I mean that you must have the access right and privileges, to make sure that Facebook's Server accepts your request, to update your Profile Picture on Facebook

Now , the question which arises here is that , How will Facebook get to know , that I am an Authorised User , and can successfully update my profile picture on Facebook.

It gets to know it through the help of JWT(JSON Web Token Only). Let's see how :

In this above diagram, you can see two pictures. The First picture describes how things in Traditional Session Management Work , and the second picture describes how the process of Authorisation and Authentication works in Case of JSON Web Token.

Let's have a look at the Second Process as of now:

Step 1 : In the Initial Step Number 1 , the client tries to login using their credentials.

Step 2 : After getting logged in , in Step Number 1 , and getting authenticated successfully, the backend generates a JWT Token and embeds it along with a secret key(which is generated at the backend server side only) and then that token is sent back to the Client/Browser.

Let's also analyse the structure of JWT also for a minute :

If you take a look on the left side, the token is encoded and if you observe carefully , there are 3 parts to this token. These three parts are as follows :

1). Header
2). Payload
3). Signature

HEADER PART:
The Header as you can see in the Screencast as well , contains information about the Type Of Algorithm with which the Token is encoded(which is generally HS256) and the type of token it is .

PAYLOAD PART:
The Payload part is the main part, where the details of the client who is making a request to the server , so that the server knows that client is actually an authorised user and he is having the access privileges to access what is technically known as a Protected Route

Payload is a JavaScript Object

SIGNATURE PART

Signature Part is I believe where the real magic happens. It is where the Server in the Backend actually gets to know, that
the User is who is trying to gain access to the Protected Route , should be given the access or not.

Now,How does the Server Identify that ?

When the Client to access a protected route , we know that along with the request , token is also sent and it contains details about the User , which are encoded in the Token Itself.

Now , in order to identify whether the User is authorised or not, the server checks that the token which is received along with request should not be tampered/modified by the client. In case , it is found to be tampered/modified , the request is immediately rejected.

So, this is how the process of Authorisation with Tokens Work.

Now, Coming to the Second Part of the Question i.e. Why this Approach of Authorisation with Tokens is more powerful than traditional Session Management

Let's say , you have your Application and 2 server(First is the Primary Server and Second is Secondary Server). In Case the traffic load on one server reaches its threshold , all the requests are redirected to the Second Server. Now , Had we used the traditional session management , the Users who had been redirected to the second server , would not have been able to access the Protected Routes.

Reason being , in case of traditional session management, the data related to the User would have been stored as Session ID in the Cookies of the Browser , and since second server is not the primary server , all the requests of authorising themselves would have been rejected.

So, this was all about Process of Authorisation with Tokens and with the Help of Traditional Session Management

I hope , I was able to provide some value with the help of this article. If you liked it , please share it so that other developers in the Community can benefit from it. Thank You

Working with State in ReactJS

Deepanshu Arora — Wed, 01 Apr 2020 12:18:26 +0000

As we all know that , React is a Component Based Library. We divide the Complex UI into Basic Components and then again we add up all of these Basic Components to create a Complex UI which is also known as a
Complex Component . React Controls the Data Flow in the Components with the help of State and Props .

Here , by Data Flow I mean that , how a Component can communicate with Another Component , and the components are able to communicate with each other with the help of State and Props .

In this Article , we will explore about the Concept Of State .

State can be thought of as a Data-Store to the ReactJS Component.
It allows us to save , modify and delete the properties which are stored in our Component.

Now , the question which we should ponder over is that Why in the First Place Should we use State?What Should be Our Motivation Behind Using It

Well , the core of every React Component is in it's State . The State Determines what the Component looks like, and we can update that as we go.
Let's Suppose , if we have made a change in our Component, then the entire page won't be reloaded if a Component's State is Updated - only the component will be re-rendered , and hence it allows us to create web pages that are Dynamic and Interactive

State is mostly used to update the Component when the User Performs some action like , Clicking a Button , Typing Some Text , Pressing a Key etc

Now , let's understand the Concept Of State Practically by Coding it :

**First Of all, we will Create a Class Based Component Named as "App" :

Now, let's Continue by Adding State to Our Component:

Now, let's analyse what we have done in the above Code Snippet ,

Inside Our Class Based Component App , we have defined a Constructor
Now the constructor is making call to the Super Class which in this case is ReactComponent . Now , the reason due to which we make the call to the Super Class is we can think of it as , that our Component inherits some of the Goodies from the Super Class , which in Our Case is ReactComponent , and then we can use it .

The Goodies which I am talking about here is some Methods which our Component can use .
Now , next to calling super what we have done is set the State .
As we have discussed earlier that State is an Object and we can access this State anywhere in Our Component , by using keyword this.state

Now , I have added a property to my state which is SubscriberCount and I have initially set it to 0 . Now what I want to implement is that ,
every time I click on a Button named Subscribe Me , the property of my State should be incremented by 1 every time I click on the Button.

Let's write the code to implement the above logic

In the Above Code Snippet , we have declared a method named
handleChange() . The Main Motive for which we have declared this
method is to change the state . By Changing the state, here I mean
that whenever we click on the button, it should change the initial state
of the property SubscriberCount and increment it by 1 .

Inside our handleChange() method, we have changed the state using the
setState() method , which is provided to us by Our Super Class
React.Component . A common question , which you all must be having
in your mind is that , why use this setState() method , why can't we
directly change the state using this.PropertyName directly .

Note that you cannot mutate the state directly otherwise it can lead to
some odd bugs in your component . For More Information , you can refer
to the React Documentation .

Using the setState() method provided by our super class React.Component, at each click of the button our state property is
incremented by 1 . Now , let's analyse the statement due to which
we are able to increment our State Property:

return(
SubscriberCount : prevState.SubscriberCount+1;
)

One more interesting thing that you should observe about the setState() method is that, this method implicitly provides us with
a parameter which helps us to access the previous state .

Thats, what we are doing inside the return statement , we are changing our state at each click of the button by incrementing 1 to our previous state.

Have a look at the two figures above, initially value of Our SubscriberCount is 0 , when we click the button Click here to Subscribe Me , it immediately changes the state property by incrementing it with 1 . In this Case , our prevState parameter is initialised with 0 implicitly , and when we click on the button , it immediately makes changes to the state property by incrementing the previous state by 1.

This is how our whole component looks like

I hope you should have gotten a clear picture of how states work in React
and my article added some value :) .

Whole Intuition Behind Machine Learning ?What Exactly It Is ?

Deepanshu Arora — Thu, 19 Dec 2019 09:07:32 +0000

Hello Everyone !!

Most of you who are newbies to the Field of Machine Learning , might be hearing These Technical Jagrons very frequently :

"You have to train your Data in Machine Learning"

"The Machine Learning Models Learn from the Data"

Well ,Today I am going to deep dive into this Whole Process and by the End of this Article , you will get a better intuition of this Whole Process Of Machine Learning . So Let's Start :

Let's say we have been given a Task to create a System that Answers whether a Drink is a Wine or a Beer .

-->This Question Answering System that we Build is in technical terms called a MODEL , and this Model is created via a Process called as
TRAINING .

In Machine Learning , the role of Training is to build a System that answers our Questions Correctly Most of the Time , but in order to train a Model we need to collect Data to Train On .

In Our Example Data will be Collected from Glasses of Wine and Beer . There are many aspects of Drink that we could collect Data on --
Everything from the Amount of Foam , to the Shape of the Glass .

But for Our Purposes , we will just pick two simple one's :
1).The Color of the Drink
2).The Alcohol Content in the Drink(As a Percentage)

The Hope is that we can split our two types of drinks based on these two factors alone . We'll call these FEATURES from Now on(Again , please make note of this Technical Term as you will be hearing it Quite Frequently in the Machine Learning World) .

-->The First Step of Our Process will be Running to the Grocery Store and buy a bunch of Different Drinks and get some equipments to do our Measurements :
1).A Spectrometer for Measuring the Color
2).& A Hydrometer to Measure the Alcohol Content .

Now , when we have set all of our Equipments , it's time for the First Important Step of Machine Learning : "GATHERING THE DATA" . This Step is Important Because the Quality and Quantity of Data that we gather will directly determine How Good Our Predictive Model Can be .

In our Case , the Data that we will collect will be the Color and Alcohol Content of Each Drink . This Will Yeild us a Table of Color , Alcohol Content and whether it's a Wine or a Beer ?

This Will be Our TRAINING DATA . So After a Few Hours , we will gather all Of Our Training Data .

-->Now it's time for Our Next Step of Machine Learning which is
DATA PREPARATION , where we load Our Data into a Suitable Place and prepare it for our Use in Machine Learning Training .

Now, this is also the time to do any Visualisations of Our Data helping us see if there is Any Relationship between Two Different Variables , as well as to also show if there are any DATA IMBALANCES .

For Example , if we collected way more Data About Beer , then the Model that we will train will be heavily biased towards Beer than Wine .

We also need to split our Data into two parts - the first part used in Training Our Model will be the Majority of Our Data Set . The Second Part will be used for evaluating our Trained Model's performance .

We don't want to use the same data that the Model was trained on for Evaluation , since then it would just be able to memorise the Questions , just as you wouldn't want to use the Questions from your Maths Homework in the Maths Exam .

The Next Step in Our Workflow is CHOOSING A MODEL . There are many Models that Researcher and Data Scientists have created over the Years . Some are very well suited for Image Data , others for Sequences , such as Text Or Music , some For Numerical Data , and Others For Text Based Data .

In Our Case , we have just Two Factors , Color and Alcohol Percentage .
So in Our Case we can use a Simple Linear Model as Demonstrated Below :

Now , we will move on to the Most Important Part of the Machine Learning Process -- The Training Process

In this Step , we will Use our Data to incrementally improve our Model's Ability to predict Whether a Given Drink is Wine Or Beer .

In Some Ways , this is Similar to Someone who is Learning to Drive .
At First , they don't know how any of the Pedals , Knobs and switches work or when they should be pressed or used . However , after lots of practice and correcting for their mistakes , a licensed driver emerges

Similar to the Above Scenario , we will do the same thing on our Drinks .

We Know that , Formula For a Straight line is :

y=m*x+b

where , x is the input
m is the slope of the Line
y is the Output Generated
& b is the y-intercept .

The Values which we have available to us to Adjust or Train are just m and b , where m is the Slope of the Line & b is the y-intercept for the Line. There is no other way to affect the position of the Line since the only other Variables are x , our input & y that is Our Output .

In Machine Learning , there are Multiple m's , since there might be Multiple Features

The Collection of these Values is usually formed into a Matrix , that is Denoted by W for the Weights Matrix . Similarly , for b(the y-intercept) we arrange them together , and that's called the Biases .

The Training Proces involves initialising random values for w and b and attempting to predict the Output with those Values . It does pretty poorly at First , but we can compare our Model's Prediction with the Output it should have Produced and then adjust the Values in w and b , such that we will have more Accurate Predictions on the next time Around . So this Process , then Repeats .

Each iteration or cycle of Updating the Weights and the Biases is called
One Training Step . So Let's look what that Means for Our Data Set .

When we First Start the Training , it's as if we drew a Random Line through the Data . Then , each Step of the Training Progresses , the line moves step by step closer to Ideal Separation Between Wine and Beer Like this :

Once the Training is Completed , it's time to see if the Model is Any Good . We do so by doing Evaluation . This is the Step where the Data Set that we set aside Earilier for Evaluation Comes into Play . Evaluation allows us to test Our Model Against Data that has Never Been Used Before

This is a Representative of How the Model Might Perform in the Real World

Once we have done the Evalution , it's possible if we want to see if we can further improve our Training in Any Way . We can do so by tuning some Of Our Parameters which is known as PARAMETER TUNING .

So Summing up this Article , Machine Learning is an Interesting Way of Answering Questions from Our Data .

I hope you Liked my Article , and it was able to provide some Value to You .

Signing Off for Now :D ,

Connect with Me On LinkedIn : https://www.linkedin.com/in/deepanshu-arora-a87846132/

Introduction to AI at the Edge — A Beginner’s Perspective

Deepanshu Arora — Wed, 18 Dec 2019 11:17:47 +0000

Before we jump on to Talk About , Edge Computing and AI at the Whole , let’s first talk about the Internet of Things Platform and its Relation with Cloud , so that we can derive differences between the Cloud Computing Platform and Edge Computing Platform .

Let’s first Talk About the Layman Meaning of Internet of Things . If we look up in the Dictionary , IoT is defined as Follows :

Interconnection of Computing Devices embedded in Everyday Things via the Internet

Essentially , it is everyday things connected to the Internet and hence , Internet of Things . Now , in this Path of Interconnection there are 3 interacting Units :

1).There is a Network of Objects that Connected Wired or Wirelessly to the Internet , and these Objects can be anything ranging from Appliances , Cars etc

2).Next , there are Gateways with access bridges between these Devices and the Internet .

3).And , the Final thing is the Cloud where we want to store the Information which we are receiving from the Devices for processing it and then analyzing it to Derive Intelligence .

Now , the Data that is being Generated by these IoT Devices is increasing Exponentially , and the Cloud Platform is not sufficient enough to store this Data . So , we need a substitute for this to combat this problem .

Now , here comes in play the Edge Computing Platform . There is an emergent need for running Local Services close to the Devices itself , to the Edge Devices itself .

Now , lets dwell into What do we mean by this Term “Intelligence at the Edge” . Let’s take some Example Use Cases :

Suppose you have a Camera pointed at your Parking Lot , where you are using the Camera to count in Real Time , the number of Cars that are Parked in the Parking Lot . It isn’t really cost effective and it doesn’t make any sense to send every frame of the Video from the Camera to Cloud to Analyze and count the Number of Cars that are Parked in the Parking Lot .

What if we could do it in the Camera itself ?

If you are using Object Detection using your Camera . For Privacy Reasons , you may not want to send your Data to the Cloud , but you would want to run some of those analyses and intelligence on the Device itself .

So these above two reasons are the major reasons for Using Intelligence at the Edge .