IOT (Internet of Things)

What is the Internet of Things?

What we understand from the term “Internet of things” aka “IOT”, very popular these days. If we split the sentence than we will get two words “Internet” and “things” i.e. things which use internet.

Now here the term ‘thing’ could be any physical devices such as vehicles, buildings, electronic products, etc. So, in short, we can say that all the devices which are embedded with software’s or sensors or connected to any wired or wireless networks and being able to collect and exchange data in between are called the Internet of Things.

The idea behind this technology is to track an individual’s behavior and data to create new kind of services. The data is gathered from connected homes and connected cities to connected cars and machines to devices.

History of the Internet of Things

• In the early 2000s, Kevin Ashton was started working on the Internet of Things (IoT) at MIT’s AutoID lab 
• While working on the Proctor & Gamble he discovered that this could improve its business by linking RFID information to the Internet
• In a 1999, Ashton wrote a journal on RFID (Radio-frequency identification) with the name of “Internet of things” and from then the world gets the concept of IoT
• The Internet of Things Consortium, a group dedicated to bringing companies together to accelerate the development of the IoT.
• IoT sometimes also called sometimes as the Internet of Everything (IoE)

Why do we need the Internet Of Things?

Current Situation: Let's say there is a patient at home on constant life support where his status has been checked to a health monitoring system. Let's say at a point there is certain irregularities with his heartbeat or some fluid being developed or so far. In today’s scenario, there will be someone monitoring patient’s health and if there will be any fluctuation then they call and request hospital for help and meanwhile once the ambulance arrives they take the patient to the hospital and run tests after analyzing the patient health via multiple tests. This leads to a delay in some emergencies cases.

After implementing IoT: After implementing IoT, patient will be connected to the health monitoring system on cloud which is also connected to the hospital where all the data regarding the patient health is being stored and based on the irregularities of patient health status system automatically dispatch the ambulance and meanwhile the ambulance brought back the patient to the hospital the prescription, medicines, operation theatre could be ready and doctors also have the patient history and present condition. This reduces the lots of effort and time involved in respect to this.

Benefits of IoT

• IoT helps to reduce cost through improved process efficiency, asset utilization, and productivity.
• Minimizing human effort.
• With improved tracking of devices/objects using sensors and connectivity, they can benefit from real-time insights and analytics, which would help them make smarter decisions.
• Development of AI through IOT such as Siri or Google Assistant.
• Saves time.
• Improved security.

IoT Features

Image Courtesy from internet

IOT Trends

Image Courtesy from internet

References

*Using Images Found Through Google Images

https://www.youtube.com/watch?v=UrwbeOIlc68

https://www.slideshare.net/ChromeInfotech/internet-of-things-52334030

https://www.cleveroad.com/blog/ios-development-trends-of-2017--hot-top-that-will-shape-platforms-future

Architecture of AngularJS

AngularJs is based on MVC (Model-View-Controller) architecture. In AngularJs Model is referred to as “Scope” and View is referred as “Template” respectively.

The Controller has the business logic. Controller is a separate JS file and contains the function which triggers on user input/event and interacts with the data model objects. Controller receives the input, validates the data on the basis of business logic and then update the data model.

The View or Template is a HTML file which also contains the other AngularJs attribute, directives to modify the HTML before they are displayed on the basis of business logic from controller.

The Models or Scope are used to represent and manage the application data. It contains fields that store data which is presented to the user via the template, as well as functions which can be called on user events such as clicking a button.

Thanks :)

AngularJS | Filters | Example

Filters are another useful feature of AngularJS. By using this feature we don't need to write our own function to format data as AngularJs has built in feature.

Below are the list of filters which AngularJs provides:

1. currency Format a number to a currency format.
2. date Format a date to a specified format.
3. filter Select a subset of items from an array.
4. json Format an object to a JSON string.
5. limitTo Limits an array/string, into a specified number of elements/characters.
6. lowercase Format a string to lower case.
7. number Format a number to a string.
8. orderBy Orders an array by an expression.
9. uppercase Format a string to upper case.

Let’s create an example here, I am using the currency filter, to turn a number into a properly formatted price, complete with a dollar sign and cents. :

HTML:

<div class="row m-0 justify-content-center">

        <div class="col-6 col-sm-6 col-md-6 col-md-6 mt-3">

            <ul class="list-group">

            <li class="list-group-item  m-1" ng-repeat="list in listItems" ng-click="activeList(list)" ng-class="{active:list.active}">

                <span class="float-left">{{list.name}}</span>

<span class="float-right">{{list.price | currency}}</span>

            </li>

        </ul>

        </div>

       

    </div>

    <div class="row m-0 justify-content-center">

            <div class="col-6 col-sm-6 col-md-6 col-md-6 mb-3">

                    <ul class="list-group">

                            <li class="list-group-item  m-1">

                                <span class="float-left">Total</span>

                <span class="float-right">{{totalAmt() | currency}}</span>

                            </li>

                        </ul>

                        </div> 

    </div>

JS:

ImgApp.controller("homeCtrl", function ($scope, $state, imageViewerFactory) {

   

    $scope.listItems = [{

        name:"Potato",

        price:350

    },{

        name:"Tomato",

        price:250

    },{

        name:"Chips",

        price:150

    },{

        name:"Coke",

        price:50

    },{

        name:"Puffs",

        price:35

    }];

    $scope.activeList = function(status){

        status.active=!status.active;

    };

  

    $scope.totalAmt = function(){

        var totalVal = 0;

      

        angular.forEach($scope.listItems, function(val) {

            if(val.active){

            totalVal += val.price;

        }

          });

          return totalVal;

    }

});

CSS:

.ul li span{

    background-color: #34b4aa;

    border:4px #000 solid;

}

OUTPUT

While running the HTML, when user select the items from the list the total value will update in real time.

Thanks :)

AngularJS | Two Way Data Binding | Example

Two Way Data Binding is one of the most important feature of AngularJS. This feature overcome the problem of writing lots of code to update DOM and model.

In earlier days we had been required JQuery to update the DOM and then to save the updated value of DOM we required JavaScript but now by using this feature when data inside the model changes, the view reflect the changes and when data inside the view changes, the model reflect the changes. This process is so fast and automatic that model and view stays updated at all the times.

Lets create an example here :

HTML:

<div class="container p-0 mb-4" style="background-color:#fff;margin-top:85px;">

<div class="row m-0">

<div class="col-12 col-sm-12 col-md-12 col-md-12 mt-3">

<p uib-popover-template="popoverFilter.templateUrl" class="text-center">

<i class="fa fa-edit mr-2"></i>{{popoverFilter.title}}</p>

</div>

</div>

</div>

<div class="text-center">

<script type="text/ng-template" id="dimensionFilterPopoverTemplate.html">

<div class="col-12 col-sm-12 col-md-12 col-lg-12 popover-style">

<input type="text" class="w-100" ng-model="popoverFilter.title"/>

</div>

</script>

</div>

JS:

app.js

MyApp.controller("homeCtrl", function ($scope) {

$scope.popoverFilter = {

templateUrl: 'dimensionFilterPopoverTemplate.html',

title:'Edit Me'

};

});

Result: When i will run the page and click on edit a popover will appear and when i will input the text into the input field the changes will reflect on the static text field.

Thanks.

ANGULARJS: $routeprovider Vs $stateprovider

I have tried to consolidate the difference between $routeprovider Vs $stateprovider. 

Both the module does the same work as they are used for routing purposes in SPA. Though we have to decide which one fulfilling our requirement best.

S.No	$routeprovider	$stateprovider
1	It uses the AngularJS native module called ngRoute	It uses the third party module called ui-router to improve and enhance routing capabilities
2	ng-view can be used only once per page e.g. <div ng-view></div>	ui-View can be used multiple times per page e.g. <div ui-view>     <div ui-view='header'></div>     <div ui-view='content'></div>     <div ui-view='footer'></div> </div>
3	It renders the template from the $routeProvider.when()	It renders the template from the $stateProvider. state ()
4	ngRoute implements routing based on the route URL	ui-router implements routing based on the state of the application
5	ng-router uses $location.path()	ui-router uses $state.go()
6	‘ngRoute’ takes care of urls	‘ui-router’ takes cares of ‘states’
7		It passes information between states with the help of ‘$stateParams’.
8	In ‘ngRoute’ you link directive like below : <a href="#/home"> Home </a>	In ‘ui-router’ link directive are generally written as: <a ui-sref="homeState"> Customers </a>
9	Router provider: $routeProvider	Router provider : $stateProvider $urlRouterProvider
10	Syntax: $routeProvider.when('/customers', {     template: 'My Home' });	Syntax: $stateProvider.state(homeState, {   url: '/home,   template: 'My Home' })
11	No template named view directive	Template named view directive: ui-view="home"
12	Getting Params: $route (eg) $route.current.params.id $routeParams (eg) $routeParams.id	Getting Params: $state (eg) $state.params.id $staetParams (eg) $stateParams.id
13	Router start event: $routeChangeStart	Router start event: $stateChangeStart
14	Router success event: $routeChangeSuccess	Router success event: $stateChangeSuccess
15	Router error event: $routeChangeError	Router error event: $stateChangeError
16	Router update event: $routeUpdate	Router update event: --
17	Router not found event: --	Router not found event: $stateNotFound
18	Default View: $routeProvider.otherwise({redirectTo: '/home'});	Default View: $urlRouterProvider.otherwise('/ home ');
19	One view to another view: $location.path( "/home" );	One view to another view: $state.go('home');
20	One view to another view with params: $location.path( "/home/123" );	One view to another view with params: $state.go('homeState', {id:'123'});

ui-router does everything that the ng-route provides plus some additional features like nested states and multiple named views. This is very helpful in managing large projects. But if your project is small then ng-route will be good.