Our Blogs

[Tutorial] Angular JS Javascript Framework Getting Started

AngularJS is a very powerful JavaScript Framework. It is used in Single Page Application (SPA) projects. It extends HTML DOM with additional attributes and makes it more responsive to user actions. AngularJS is open source, completely free. Before you study AngularJS, you should have a basic understanding of:

  • HTML
  • CSS
  • JavaScript

AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

The AngularJS Components:

  1. ng-app-This directive defines and links an AngularJS application to HTML.
  2. ng-model-This directive binds the values of AngularJS application data to HTML input controls.
  3. ng-bind- This directive binds the AngularJS Application data to HTML tags.

Example

<!doctype html>
<html ng-app>
  <head>
  <scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
</head>

<body> <div> <label>Name:</label> <input type = "text" ng-model = "yourName" placeholder = "Enter a name here"> <hr /> <h1>Hello {{yourName}}!</h1> </div> </body> </html>

Scope:

The scope is the binding part between the HTML (view) and the JavaScript (controller). The scope is an object with the available properties and methods. The scope is available for both the view and the controller.

<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController",function($scope) {
  $scope.message = "In shape controller";
  $scope.type = "Shape";
});
</script>

Root Scope:

All applications have a $rootScope which is the scope created on the HTML element that contains the ng-app directive. The rootScope is available in the entire application. If a variable has the same name in both the current scope and in the rootScope, the application use the one in the current scope.

<body ng-app="myApp">

<p>The rootScope's favorite color:</p>
<h1>{{color}}</h1>

<div ng-controller="myCtrl">
<p>The scope of the controller's favorite color:</p>
<h1>{{color}}</h1>
</div>

<p>The rootScope's favorite color is still:</p>
<h1>{{color}}</h1>

<script>
 var app = angular.module('myApp', []);
 app.run(function($rootScope) {
  $rootScope.color = 'blue';
 });
 app.controller('myCtrl', function($scope) {
   $scope.color = "red";
 });
 </script>
</body>

Services:

AngularJS supports the concepts of “Separation of Concerns” using services architecture. Services are javascript functions and are responsible to do a specific tasks only.

There are two ways to create a service.

  1. factory
  2. service

By using factory method:

var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {
var factory = {};

factory.multiply = function(a, b) {
  return a * b
}

return factory;
}); 

By using service method:

mainApp.service('CalcService', 
 function(MathService){
   this.square = function(a) {
    return MathService.multiply(a,a);
 }
});

Routing:

  • location service.
  • route service.

Location service:

The $location service is very useful whenever you need to read or change the URL (or any part of it) in the browser. It can be configured to work in two modes: hashbang mode or HTML5 mode

Route sevice:

This service allows you to map different URLs to different views and react whenever there’s a match between a URL and a defined route. To work with the $route service, we need the ngRoute module which can be found in the angular-route.js file.

For any query contact Clofus Innovations.

[5 steps] Artifial-Intelligence Basic Tutorial

Artificial Intelligent(AI) is found to be the next big hot topic in the human world. From start-ups to large firms are now ready to make million dollar investments in the feild of AI to grow their businesses. Many of us consider AI to be some Sci-fi movie, but AI machines can do some pretty cool stuff and also make some impossible stuff possible, few of which human kind will never be able to. In today’s fast forward world, technology is not only about creating hardware and software tools for real world purposes, it is much more advanced. Do you want to know what’s the best example of that, it’s AI, the new change. Self-driving cars, something which is already there on the road in many developed countries, to kids palying online chess championship, AI has already proved that it can outperform human minds with its high tech new, real time tools.

AI is the science and engineering of making intelligent machines.
-John McCarthy, Father of AI

Don’t know to code, but want to explore AI? We got you covered !

Ever wondered which is the world’s best machine? The human brain is the most intelligent machine that ever existed and exists.

The amount of time the human brain takes to process any piece of information is beyond imagination. From a layman’s point of view, the main goal of AI is to create a system that will be functioning in an intelligent and independent manner making human life easier.

The computer scientist thought of interpreting the working pattern of the human brain, and that became the beginning of AI. To understand things better let’s look into an example, when we meet someone for the first time, we don’t know them, they introduced themselves with their name, and we remember that, as our brain sees the person and makes a note of the features of that particular person, maybe say their height, complexion, etc. So the next time when the human brain encounters those parameters (features of the individual), it will remember the label (name of the person) it had given the last time it came across the similar features. This is simply how the AI works at the ground level.

TRANSFER LEARNING TOOLKIT

What’s transfer learning?

Transfer learning is simple a technique where a model is developed for one task and in the future, it is used as a start point to a different task. So, here the knowledge that is gained by a neural network from a particular task is applied to a different task. It is always considered better to starting something, with prior knowledge or experience, instead of beginning from scratch. Say for example if we are training a neural network model to recognize a bottle, in the future the same knowledge could be applied in showing the customers of amazon, the bottle of their choice!

Already learnt to ride a motorbike ⮫ Now it’s time to practice riding a car

Already learnt to play classic piano ⮫ Now it’s time to practice jazz piano

Already Know the math and statistics ⮫ Wow, it’s time to learn machine learning

The TLT is a Python-based AI toolkit for creating highly optimized and accurate AI related applications using transfer learning commands and pre-trained models.

Many people think that AI is something that cannot be accessed by anyone and everyone. The TLT has broken this myth, and it has made it clear that, through TLT ** AI can be used by everyone!** young researchers, data scientist, student developers, system developers, engineers in different feilds of study.

Why should one consider transfer learning as an option in developing an AI model?

Machines are very good at pattern recognition because they use surplus data and multiple numbers of dimensions. They can see things in multiple dimensions than humans, and they are expected to learn from these patterns. Once the process of learning is fully completed, they are expected to do the predictions. TLT is one of many feilds which makes possible for computers to learn without being explicitly programmed.

Understanding better

In the image shown below, the first model is trained to predict if the image is a cat or not. So, in the future, if we have a project in which we will have to predict the color of the cat, the previously trained model which predicts if the given image is a cat, is used as a part of the model. Instead of starting from scratch, this saves a lot of time.

The process of training the data of a previously used model is called pre-training and the process of training the model for our actual project is called fine-tuning. So, here we have taken the knowledge obtained in pretraining, ie, training the model to predict if it’s a cat, and then applied that knowledge in fine-tuning, ie., training the model to predict the color of the model. Another example that could give us a better idea is that when we train a model for speech recognition the knowledge obtained through this training can be used to train the model where we want to start a voice assistant system. For instance, nowadays a lot of households have Siri or Alexa. The model trained for speech recognition is used to train the model which is used up wake up Siri when the customer says, hello Siri, play this music for me

why should one use the transfer learning toolkit?

Transfer learning becomes an ideal option when there is a lot of data in the task you are transfering the knowledge from and less data for the problem you are transferring to. Inorder to build an accurate AI application, one needs a large amount of dataset, especially if you create from scratch. Getting and preparing a large dataset and assigning a labele all the images is costly, time-consuming, and requires extreme domain expertise. Transfer learning saves the user a lot of time and the accuracy level is high. To make faster and accurate application possible through AI training, NVIDIA has released highly accurate, purpose-built, pre-trained models with the NVIDIA Transfer Learning Toolkit (TLT) 2.0.

Things you should know before getting started with TLT

What are AI models?

What is TLT docker container?

What is NVIDIA NGC?

What isNVIDIA DeepStream SDK?

What is NVIDIA TensorRT?

What is Resnet?

How to implement?

 
1. Download the required TLT Docker container and their AI models from NVIDIA NGC for your specific application 
2. NGC has both pruned and unpruned model 
3. Train and validate with your personalized dataset 
4. Export the trained model 
5. Deploy on the edge using [NVIDIA DeepStream SDK](https://developer.nvidia.com/deepstream-sdk) and [NVIDIA TensorRT](https://developer.nvidia.com/tensorrt). 

Implementation Example

Main Objective

Here we will be building a model which will successfully recognize and categorize the images into either a cat or dog. The dataset we will be using is taken from the popular example of AI, which is Dogs vs. Cats Challenge.

STEP 1: Set Environment

Here we just try to set an environment, like simply telling our system that there are variables with which we will be dealing with. %set_env is utilized to define the value of the environment variables used in the project. If setenv is not given any arguments, it displays all environment variables and their respective values. If only VAR is specified, it sets an environment variable of that name to an empty (null) value.


  %set_env KEY=NGt1OWFtMTBqc2VyaHAzMzc3NDQwdGgyZWo6YmZiMjEwNTAtYWMzNi00YmZjLThkNjAtNDg3NGI1NDZlZjMw
%set_env `YOUR PATH` =/workspace/tlt-experiments/CAT_DOG_PREDICTION/cat_dog_prediction/aitraining/tlt
!ls $``your path`
#LAYERS = 18/150/101
%set_env no_layer = 18
%set_env no_epoch = 50

STEP 2: Convert KITTI TO TFRECORDS

For object detection application in TLT expects the data to be in KITTI file format inorder to train and evaluate. For DetectNet_v2, SSD, DSSD, YOLOv3, and FasterRCNN, ResNet the obtained data is converted to the TFRecords format for training. TFRecords help iterate faster through the data. Simply the below command will do that for you


!cat $`YOUR PATH`/spec/convertkittitotfrecords.txt

The rm command (“remove”) is used for deleting files and directories on a Unix or Linux system.

The files which get stored becomes redundant, this command simply removes them, and when you run the commands from the first step again, it’s a fresh start.

 

-o It generates optimized bytecode (resulting in .pyo files).


!rm -rf tfrecords
!tlt-dataset-convert -d $`YOUR PATH`/spec/convertkittitotfrecords.txt \
-o $`YOUR PATH`/tfrecords/

STEP3: Train Model

In the ssd_train file the arguments are given. For example, the parameters like color, body size, the color of the eyes, the shape of the cat, and the dog will be given. Every time the commands are run, your model is trained for predicting better.

The more is the Learning rate lesser is going to be the training time.

The num_epochs can be increased gradually for better accuracy. After a particular number of epoch, the accuracy level gets saturated, ie, that will be the maximum possible accuracy level.

You simply change the parameters according to your necessity and run the below command to train your desired model.


!cat $`YOUR PATH`/spec/ssd_train_resnet_kitti.txt

OpenCV-Python is a library of Python bindings specially designed to solve problems in computer vision.

cv2.imread() is a method that loads an image from the given specified file. If the image cannot be read because of reasons like, if the file is missing, improper permissions, due to unsupported or invalid format, then this particular method returns a matrix which will be empty.

The image should be in the working directory or a full path of the image should be given.


import cv2
im = cv2.imread('/workspace/tlt-experiments/CAT_DOG_PREDICTION/cat_dog_prediction/aitraining/tlt/kitti/images/20200623_132251.jpg')
print(im.shape)

In ssd_train if num_epoch is set to 100, then EPOCH should be set to 100 in the below command.


%set_env no_epoch = 100

!tlt-train ssd -e $`YOUR PATH`/spec/ssd_train_resnet_kitti.txt \
    -r $`YOUR PATH`/build/experiment_dir_unpruned/ \
    -k NGt1OWFtMTBqc2VyaHAzMzc3NDQwdGgyZWo6YmZiMjEwNTAtYWMzNi00YmZjLThkNjAtNDg3NGI1NDZlZjMw \
    -m $`YOUR PATH`/pretrained/pretrained_resnet${LAYERS}/tlt_pretrained_object_detection_vresnet${LAYERS}/resnet_${LAYERS}.hdf5 \
    --gpus 1
  

Pruning aims at reducing the number of parameters, for application focused to TLT, making the model that is many times faster.

The unpruned models are found to be big. A model is created according to the implemented algorithm and if pruning is applied, a step along the process looks at those nodes which does not affect the overall performance at large scale. Those particular nodes are then removed.

Pruining is carried out inorder to understand better and to minimize the risk of overfitting. That is, for the model to be classify the training data perfectly.

You simply run the below command to remove unnecessary layers in your neural network model for better reducing the size and getting rid of the redundant layer which will not affect the overall performance

STEP 4: Prune Model


!tlt-prune -m $`YOUR PATH`/build/experiment_dir_unpruned/weights/ssd_resnet${LAYERS}_epoch_$EPOCH.tlt \
           -o $`YOUR PATH`/build/experiment_dir_pruned/ssd_resnet${LAYERS}_pruned.tlt \
           -eq intersection \
           -pth 0.1 \
           -k $KEY
         

After pruning the accuracy tends to decrease, so you need to retrain your pruned model to achieve maximum accuracy.

By simply updating the values of the parameters in ssd_retrain same as ssd_train and running the below command you can re-train your pruned model.

STEP5: Retrain Pruned Model


# Retraining using the pruned model as pretrained weights 
!tlt-train ssd --gpus 1 \
               -e $`YOUR PATH`/spec/ssd_retrain_resnet_kitti.txt \
               -r $`YOUR PATH`/build/experiment_dir_retrain \
               -m $`YOUR PATH`/build/experiment_dir_pruned/ssd_resnet${LAYERS}_pruned.tlt \
               -k $KEY
             

!ls $`YOUR PATH`/build/experiment_dir_retrain/weights

# Now check the evaluation stats in the csv file and pick the model with highest eval accuracy.
!cat $`YOUR PATH`/build/experiment_dir_retrain/ssd_training_log_resnet${LAYERS}.csv
%set_env no_epoch = 100

This command is simply run for the developer can visually see how much accuracy their model has reached.

STEP 6: Evaluate Model


!tlt-evaluate ssd -e $`YOUR PATH`/spec/ssd_retrain_resnet_kitti.txt \
                  -m $`YOUR PATH`/build/experiment_dir_retrain/weights/ssd_resnet${LAYERS}_epoch_$EPOCH.tlt \
                  -k $KEY
                

Running the below command one can test sample images that have to be predicted.

STEP 7: Sample Inferences


!ls $`YOUR PATH`/test_samples 
!cd $`YOUR PATH`/test_samples 
!pwd

To load the image, we simply import the image module from the pillow and call the Image. open(), passing the image filename.


!pip install Pillow

The ls command is a command-line utility which is used inorder to list o a directory or directories provided to it via standard input.

Here the models are trained with visual perception which is achieved by applying the technology called computer vision, which can only visualize the objects through images or videos.The particular object of interest in the image is annotated or labeled with a technique. Once the images are labeled they are utilized as training data. The labeled images are used to train the algorithms used in training specific model of our interest.

By simply running the below command the test images get labeled.


  !ls $`YOUR PATH`/ssd_infer_labels 
!cat $`YOUR PATH`/ssd_infer_labels/100_01.txt

# Running inference for detection on n images
!tlt-infer ssd -i $`YOUR PATH`/test_samples \
               -o $`YOUR PATH`/ssd_infer_images \
               -e $`YOUR PATH`/spec/ssd_retrain_resnet_kitti.txt \
               -m $`YOUR PATH`/build/experiment_dir_retrain/weights/ssd_resnet${no_layers}_epoch_$EPOCH.tlt \
               -l $USER_EXPERIMENT_DIR/ssd_infer_labels \
               -k $KEY
             

For better understanding and spotting the better prediction bounding boxes are drawn.

By simply running the below commands, grids with specified width, length are drawn.


# Simple grid visualizer
import matplotlib.pyplot as plt
import os
from math import ceil
valid_image_ext = ['.jpg', '.png', '.jpeg', '.ppm']
print(os.environ['YOUR PATH'])
def visualize_images(image_dir, num_cols=4, num_images=10):
    output_path = os.path.join(os.environ[`YOUR PATH'], image_dir)
    print("output_path ==>", output_path)
    num_rows = int(ceil(float(num_images) / float(num_cols)))
    f, axarr = plt.subplots(num_rows, num_cols, figsize=[80,30])
    f.tight_layout()
    a = [os.path.join(output_path, image) for image in os.listdir(output_path) 
         if os.path.splitext(image)[1].lower() in valid_image_ext]
    for idx, img_path in enumerate(a[:num_images]):
        col_id = idx % num_cols
        row_id = idx // num_cols
        img = plt.imread(img_path)
        axarr[row_id, col_id].imshow(img) 
        
# Visualizing the sample images.
OUTPUT_PATH = 'ssd_infer_images' # relative path from $`YOUR PATH`.
COLS = 3 # number of columns in the visualizer grid.
IMAGES = 9 # number of images to visualize.

visualize_images(OUTPUT_PATH, num_cols=COLS, num_images=IMAGES)

Now finally, after training if you feel satisfied with the results, ie, accuracy with which the prediction happens, then one can export the trained model running the below command.

STEP 8: Export Trained Model


# tlt-export will fail if .etlt already exists. So we clear the export folder before tlt-export
!rm -rf $`YOUR PATH`/export
!mkdir -p $`YOUR PATH`/export
# Export in FP32 mode. Change --data_type to fp16 for FP16 mode
!tlt-export ssd -m $`YOUR PATH`/build/experiment_dir_retrain/weights/ssd_resnet${no_layers}_epoch_$EPOCH.tlt \
                -k $KEY \
                -o $`YOUR PATH`/export/ssd_resnet${LAYERS}_epoch_$EPOCH.etlt \
                -e $`YOUR PATH`/spec/ssd_retrain_resnet_kitti.txt \
                --batch_size 16 \
                --data_type fp16
              

TensorRT (TRT ) is mainly designed to perform various necessary transformations and optimizations to the desired neural network graph. Firstly, layers which consist of unused outputs are eliminated inoder to avoid unnecessary computation. Next, wherever possible, the convolution, bias, and ReLU layers are combined to form a single layer.

These are reasons why one needs to convert the final model to TRT Engine.

By simply running the below command, one can their desired model converted to TRT Engine.

STEP 9: Convert TO TRT Engine


# Convert to TensorRT engine (FP16)
!tlt-converter -k $KEY \
               -d 3,224,224 \
               -o NMS \
               -e $`YOUR PATH`/export/trt.engine \
               -m 16 \
               -t fp16 \
               -i nchw \
               $`YOUR PATH`/export/ssd_resnet${LAYERS}_epoch_$EPOCH.etlt
             

Finally, by running the below command one can verify and deploy theirs for real-time application.

STEP 10: Verify & Deploy Model


  !tlt-infer ssd -m $`YOUR PATH`/export/trt.engine \
               -e $`YOUR PATH`/spec/ssd_retrain_resnet_kitti.txt \
               -i $USER_EXPERIMENT_DIR/test_samples \
               -o $`YOUR PATH`/ssd_infer_images \
               -t 0.4
!rm -rf ../deploy && mkdir ../deploy
!cp export/trt.engine ../deploy && cp spec/ssd_retrain_resnet_kitti.txt ../deploy && cp -a test_samples ../deploy

!echo "#!/bin/bash" "../deploy/predict"
!echo "rm -rf ssd_infer_*;tlt-infer ssd -m trt.engine -e ssd_retrain_resnet_kitti.txt -i test_samples -o ssd_infer_images -l ssd_infer_labels -t 0.4" "../deploy/predict"

Conclusion

This blog explains why one should choose Transfer Learning Toolkit, to begin with, their AI application. After running all the above sequence of commands one can use their model for real world problems, making this world a better place to live!

[Tutorial] Bootstrap A Responsive Framework Getting Started

Bootstrap is a free front-end framework for faster and easier web development. Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins. Bootstrap also gives you the ability to easily create responsive designs.

Download Bootstrap

If you want to download and host Bootstrap yourself, go to getbootstrap.com, and follow the instructions there.

Bootstrap CDN If you don’t want to download and host Bootstrap yourself, you can include it from a CDN (Content Delivery Network). MaxCDN provides CDN support for Bootstrap’s CSS and JavaScript. You must also include jQuery:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

Bootstrap’s Grid System is made up of 3 things:

1.A container

2.Rows

3.Columns

Creating a Contain:

Bootstrap’s grid system needs a container to hold rows and columns.A container is a simple div element with a class of .container. The container is used to provide a proper width for the layout, acting as a wrapper for the content.You can choose a fluid container if you are not fond of a fixed layout.

Creating a Row:

A row acts like a wrapper around the columns. The row nullifies the padding set by the container element by using a negative margin value of -15px on both the left and right sides.A row spans from the left edge to the right edge of the container element. It is created by adding the class.A row to a block level element inside the container.

Creating Columns:

Bootstrap uses different column class prefixes for different sized devices. In the above demo, I used the class .col-xs-12 to create a single column that spans across 12 virtual Bootstrap columns. Hence, this column’s width will be the width of the row. In the above demo, you will also see the 15px padding reappear to push the element away from the container. This is because every column in Bootstrap has a padding of 15px. You must be wondering why I used the class prefix that belonged to extra smaller devices, which is .col-xs-12.This way, we maintain the limit of 12 virtual Bootstrap columns for a single row.

Grid Classes:

  1. xs (Extra Small Devices such as Mobile phones)
  2. sm (Smaller Devices such as Tablets)
  3. md (Medium Devices such as Desktops)
  4. lg (Larger Desktops)

Example:

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

This is for three equal columns.then,

To apply grid for multiple devices simultaneously, include them together in the classes.

Example:

<div class="container-fluid">
    <h1>Grid Responsive using bootstrap :</h1>
    <hr>
    <div class="row" >
        <div class="col-md-3 col-sm-6 col-xs-12" style="background-color:red" >
            <p>1st grid to display</p>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12"  style="background-color:blue">
            <p>2nd grid to display</p>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12" style="background-color:grey">
            <p>3rd grid to display</p>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12" style="background-color:green" >
            <p>4th grid to display</p>
        </div>
    </div>
</div> 

For any query contact Clofus Innovations.

[Tutorial] Bower Package manager

There are now more libraries and frameworks available for front-end development than ever before. It’s not uncommon to have five or more of these libraries involved in a single project. But keeping track of all these libraries and making sure they’re up-to-date can be tricky. Enter Bower, a package manager that makes it easy to manage all your application’s front-end dependencies.

bower

Installing Bower Bower can be installed using npm, the Node package manager. If you don’t already have npm installed, head over to the Node.js website and download the relevant copy of Node.js for your system. The npm program is included with the install of Node.js.

npm install -g bower

This will install Bower globally on your system.

Finding Packages There are two different ways that you can find Bower packages. To search for packages on the command line you use the search command. This should be followed by your search query.

bower search For example to search for packages that contain the word ‘jquery’ you could do the following:

bower search jquery Installing Packages To add a new Bower package to your project you use the install command. This should be passed the name of the package you wish to install.

bower install As well as using the package name, you can also install a package by specifying one of the following:

A Git endpoint such as git://github.com/components/jquery.git A path to a local Git repository. A shorthand endpoint like components/jquery. Bower will assume that GitHub is being used, in which case, the endpoint is the part after github.com in the repository URL. A URL to a zip or tar file. The files contents will be extracted automatically. Although Bower packages most commonly contain JavaScript files, they can also contain CSS or even images.

 

Installing Packages Using a bower.json File If you are using multiple packages within your project it’s often a good idea to list these packages in a bower.json file. This will allow you to install and update multiple packages with a single command.

{
    "name": "app-name",
    "version": "0.0.1",
    "dependencies": {
        "sass-bootstrap": "~3.0.0",
        "modernizr": "~2.6.2",
        "jquery": "~1.10.2"
    },
    "private": true
}

Listing Installed Packages You can easily find out which packages are installed using the list command.

bower list Updating Packages Updating a package is pretty straightforward. If you’ve used a bower.json file you can execute a simple update command to update all of the packages at once. However, the update tool will abide by the version restrictions you’ve specified in the bower.json file.

bower update To update an individual package you again use the update command, this time specifying the name of the package you wish to update.

bower update 

Uninstalling Packages To remove a package you can use the uninstall command followed by the name of the package you wish to remove.

bower uninstall 

It’s possible to remove multiple packages at once by listing the package names. bower uninstall jquery modernizr sass-bootstrap For any query contact Clofus Innovations.

Commonly used CSS properties

Commonly used CSS properties

A CSS rule-set consists of a selector and a declaration block: The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.

CSS

Background Property:

The background shorthand property sets all the background properties in one declaration. The properties that can be set, are: background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, and background-attachment. It does not matter if one of the values above are missing, e.g. background:#ff0000 url(smiley.gif); is allowed.

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit; Example:

body { 
    background-image: url('anyname.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 80px 60px;
    background-color:lightblue;
}

Border Property:

The border shorthand property sets all the border properties in one declaration. The properties that can be set, are (in order): border-width, border-style, and border-color. It does not matter if one of the values above are missing, e.g. border:solid #ff0000; is allowed.

border: border-width border-style border-color|initial|inherit;

Example:

{   
    border-width: 15px;  
    border-style: solid;
    border-color: #ff0000 #0000ff;
}

Display property: The display property specifies the type of box used for an HTML element

Initial block inherit none

Flex Property: The flex property specifies the length of the item, relative to the rest of the flexible items inside the same container.

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit; The flex property is a shorthand for the flex-grow, flex-shrink, and the flex-basis properties.

{  
    display: -webkit-flex; 
    display: flex;  
}

Font Property: The font shorthand property sets all the font properties in one declaration. The properties that can be set, are (in order): “font-style font-variant font-weight font-size/line-height font-family” font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit

Example:

{
    font-size: 100%;
    font-family: myFirstFont;
    font-weight: bold;
    font-variant: small-caps;
}

Margin Property: The margin shorthand property sets all the margin properties in one declaration. This property can have from one to four values.

margin: length|auto|initial|inherit; margin-bottom margin-top margin-left margin-right Example

{  
    margin-bottom: 2cm;
    margin-top: 2cm;
    margin-left: 2cm;
    margin-right: 2cm;
}    

Overflow Property: The overflow property specifies what happens if content overflows an element’s box. This property specifies whether to clip content or to add scrollbars when an element’s content is too big to fit in a specified area. overflow: visible|hidden|scroll|auto|initial|inherit; Example:

div {  
    overflow-x: hidden;//left/right
    overflow-y: hidden://top/bottom
}

Padding Property: The padding shorthand property sets all the padding properties in one declaration. This property can have from one to four values. padding: length|initial|inherit; padding-bottom padding-top padding-right padding-left Table Layout Property The table-layout property sets the table layout algorithm to be used for a table. table-layout: auto|fixed|initial|inherit;

Example

{  
    text-align: center;
    text-decoration: overline;
    text-indent: 50px;
    text-transform: uppercase;
    text-transform: lowercase;
    text-transform: capitalize;
}

For any query contact Clofus Innovations.

[Tutorial] Docker Getting Started

A good way to segregate dev environments is to spin up a virtual machine (VM) for each project, and install your stack there. When you need to work on the project, simply spin up the VM – no need to upgrade code, your environment will remain the same as how you left it. There are two options available for installing docker on windows.
  • Docker for windows
  • Docker Toolbox

Installation

To get started, head over to the Docker documentation pages for instructions on how to install Docker on your OS. The instructions differ depending on your OS:

  • If you are rocking Linux already, in any flavour, you can install Docker ‘natively’.
  • If you are running OS X or Windows, you can’t install Docker directly, since it requires a Linux host to create containers. Luckily the Boot2Docker project was built to specifically fill this void.

    How to use Docker file

    Using the Dockerfiles is as simple as having the docker daemon run one. The output after executing the script will be the ID of the new docker image.

Usage:
Build an image using the Dockerfile at current location

Example: sudo docker build -t [name] . sudo docker build -t my_mongodb .

Creating the Empty Dockerfile

Using the nano text editor, let’s start editing our Dockerfile.

sudo nano Dockerfile

Setting The Base Image to Use

Set the base image to Ubuntu

FROM ubuntu

Defining The Maintainer (Author)

File Author / Maintainer
MAINTAINER Example McAuthor

Docker Commands

Build Image:
docker build -t myprojectimage .
Run Image or create container:
docker run -it -v C:\Users\Clofus1\Documents\myprojects:/srv/myprojectsfolder -dp 80:80 -p 27017:27017 --name myprojectcontainer myprojectimage
Enter Container bash terminal:
docker exec -it <cid> bash
To stop container:
docker stop <cid>
To remove container:
docker rm <cid>
To remove image:
docker rmi <image id>
To list running container:
docker ps
To list recently runned container:
docker ps -a

For any query contact Clofus Innovations.

File permissions in linux

Like unix, linux os is also multi user operating system. So we need to protect files from authorized users. Where linux file permission is used.

Git Commands Cheatsheet [git basic commands]

Git is the most popular version control system as we all know all and used to track and share code between team members but here is our swiss army knife of git commands useful whenever you want them available handy

git config Sets configuration values for your user name, email, gpg key, preferred diff algorithm, file formats and more.

git init Initializes a git repository – creates the initial ‘.git’ directory in a new or in an existing project.

git clone Makes a Git repository copy from a remote source. Also adds the original location as a remote so you can fetch from it again and push to it if you have permissions.

git add Adds files changes in your working directory to your index.

git rm Removes files from your index and your working directory so they will not be tracked.

git commit Takes all of the changes written in the index, creates a new commit object pointing to it and sets the branch to point to that new commit.

git merge Merges one or more branches into your current branch and automatically creates a new commit if there are no conflicts.

git reset Resets your index and working directory to the state of your last commit.

git stash Temporarily saves changes that you don’t want to commit immediately. You can apply the changes later.

git tag Tags a specific commit with a simple, human readable handle that never moves.

git remote Shows all the remote versions of your repository.

git log Shows a listing of commits on a branch including the corresponding details.

git show Shows information about a git object.

git ls-tree Shows a tree object, including the mode and the name of each item and the SHA-1 value of the blob or the tree that it points to.

For any query contact Clofus Innovations.

[Tutorial] How to Configure Nginx

Nginx is a Web Server.The Nginx is a open source web server. It can act as a reverse proxy for the Http, Https, etc.Here we are mainly using it to configure Local host. nginx How to configure Nginx : Download and install Nginx from their official website http://nginx.org/en/download.html Extract the zip file into any drive using winrar. Locate the extracted folder, C:\nginx-1.8.0\nginx-1.8.0\conf (In here, the Nginx is installed into the C drive) Then open nginx.config file from the list using notepad. Include the location of the current working directory. This points the nginx server to acts as a Local host. Make other location as a comments by adding # previously to the location path. Nginx Main Config Sample file : 1)Modify your main nginx.conf file (nginx/conf/nginx.conf)

#user  nobody;
worker_processes  1;
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
#pid        logs/nginx.pid;
events {
    worker_connections  1024;    
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    include C:/nginx/conf/sites-enabled/*.conf;
}

2)open directory path C:/nginx/conf/sites-enabled create file localhost.conf file

** localhost.conf **

server {

    listen  80;
    server_name  localhost;

    charset koi8-r;

    access_log  logs/localhost.access.log;

    location / {
        root C:\Users\aaa\Documents\clofus-enterprise; # Your Project Directory (absolute Path)
        try_files $uri $uri/ /index.html =404;
    }

}

3)To Run Multiple hosts, copy the above code and create file as example.conf and change your system host file

For windows : Download host File Editor https://hostsfileeditor.codeplex.com and open host file editor and add ip address pointing to 127.0.0.1 to your host name

For Linux: Open etc/hosts and add ip address pointing to 127.0.0.1 to your host name

4)Finally Restart Nginx

For Example : root C:\Users\Dell\Desktop\AngularJs; (AngularJs is the folder for the nginx localhost).

Note : Include # before the C:\Users\Dell\Desktop\AngularJs; to make this line as a comment.

How to Enable HTML Mode In nginx ? Include try_files $uri $uri/ /index.html =404; line below to the localhost path. This will try to find and open the index.html file inside the localhost path and if the file is not found it will display Error 404 file not Found.

Note : The default Ip address for the local host is 127.0.0.1.

How to change the Default server Name : If you wish to change your server name from the default (By default the server name is Localhost) Change your preferred name instead of localhost in server_name localhost; (Replace Localhost by your preferred name).

Configure Host file : Download and install host file editor from https://hostsfileeditor.codeplex.com/ edit and change the default Ip address of the local host or any other Ip if you wish to.

Installation : 1.Download nginx stable version. (link:http://nginx.org/en/download.html) 2.Move the zip Ng-inx folder to location *C:* 3.Unzip it 4.open conf folder and open nginx.conf file 5.change location / { root C:\Users\clofus\Documents\projects\clofus-dev- app\clofus-dev-app; index index.html index.htm; } under server 6.Enter localhost in the address bar of browser it shows the index page

To Configure nginx in Linux

1.Open command window in linux 2.Enter path as “cd /etc/nginx/ sites-enabled/” 3.To Edit default file enter “gksudo gedit default” in command 4.Default file will open in edit window then add the current working directory under location 5.Then restart the nginx using command “sudo service nginx restart”, Now localhost will run as internal server

For any query contact Clofus Innovations.

[Tutorial] Javascript Basics

Before we use a function, we need to define it. The most common way to define a function in JavaScript is by using the function keyword, followed by a unique function name, a list of parameters (that might be empty), and a statement block surrounded by curly braces.

function functionName(parameters) {
    code to be executed 
}

Function Expressions A JavaScript function can also be defined using an expression. Example:

 

The Function() Constructor

As you have seen in the previous examples, JavaScript functions are defined with the function keyword. Functions can also be defined with a built-in JavaScript function constructor called Function().

var myFunction = new Function("a", "b", "return a * b");
document.getElementById("demo").innerHTML = myFunction(4, 3);

Function Parameters

Parameter Rules JavaScript function definitions do not specify data types for parameters. JavaScript functions do not perform type checking on the passed arguments. JavaScript functions do not check the number of arguments received.

Parameter Defaults If a function is called with missing arguments (less than declared), the missing values are set to: undefined.

function myFunction(x, y) {
    if (y === undefined) {
        y = 0;
    }    
    return x * y;
}

JavaScript Function Invocation Invoking a JavaScript Function You have already learned that the code inside a JavaScript function will execute when “something” invokes it. The code in a function is not executed when the function is defined. It is executed when the function is invoked. It is also quite common to say “call upon a function”, “start a function”, or “execute a function”.

Example:

function myFunction(a, b) {
    return a * b;
}
myFunction(10, 2); 

Invoking a Function as a Method In JavaScript you can define function as object methods. Example:

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();

JavaScript Closures Global Variables A function can access all variables defined inside the function. Example:

function myFunction() {
    var a = 4;
    return a * a;
}

In the last example, a is a global variable. In a web page, global variables belong to the window object. A Counter Dilemma Suppose you want to use a variable for counting something, and you want this counter to be available to all functions. You could use a global variable, and a function to increase the counter: Example:

var counter = 0;
function add() {
    counter += 1;
}
add();
add();
add();

JavaScript Nested Functions All functions have access to the global scope. JavaScript supports nested functions. Nested functions have access to the scope “above” them. In this example, the inner function plus() has access to the counter variable in the parent function:

function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();    
    return counter; 
}

For any query contact Clofus Innovations.

[Tutorial] Modbus an Introduction

Modbus is the most commonly used industrial communication protocol for various devices & sensors to send and receive data. It is an request response protocol with master and slave devices connected to gether in a network, meaning master device will poll one or more slave devices and slave devices can only send data as a response to master device

Types of Modbus

Commonly there are three different types of modbus protocols operating in different OSI layer models but the underlying protocol is the same

  • Modbus RTU (Most Common)
  • Modbus TCP/IP
  • Modbus ASCII
  • Modbus Plus

LAYERS | | | | | Application | MODBUS | MODBUS | MODBUS | | Presentation | | | | | Session | | | | | Transport | | | TCP/IP Messaging | | Network | | | Used | | Data Link | | | Used | | Physical | RS-232 / RS485 | HDLC | Ethernet | | PROTOCOLS | Modbus RTU | Modbus Plus | Modbus TCP |

As you can see above all types of Modbus uses same application layer with minor differences only for the error correction Modbus Plus is a peer to peer network protocol based on token passing communication and is a licensed protocol owned by Modicon so we wont discuss here in detail

Physical Connections

  • Modbus RTU Uses RS-232 and RS-485 physical interface
  • Modbus TCP Uses regular Ethernet physical interface

Modbus Data Communication Interface

Modbus is an serial communication protocol and uses registers for data access, there are 4 types of registers commonly used

  • Discrete Output (Coil)
  • Discrete Input
  • Input Register
  • Holding Register

Clofus can provide you support interfacing all your industrial sensors and devices to a IOT platform inorder to easily access your data, identify production bottlenecks and solve them effectively

[Tutorial] MySQL database Getting Started Practical

MySQL is the most popular Open Source Relational SQL database management system. MySQL is one of the best RDBMS being used for developing web-based software applications.

RDBMS Terminology: Before we proceed to explain MySQL database system, let’s revise few definitions related to database.

Database: A database is a collection of tables, with related data. Table: A table is a matrix with data. A table in a database looks like a simple spreadsheet. Column: One column contains data of one and the same kind, for example the column postcode. Row: A row is a group of related data, for example the data of one subscription. Primary Key: A primary key is unique. A key value can not occur twice in one table. With a key, you can find at most one row. Foreign Key: A foreign key is the linking pin between two tables.

Installing Process [root@host]# rpm -i MySQL-client-5.0.9-0.i386.rpm [root@host]# rpm -i MySQL-level-5.0.9-0.i386.rpm [root@host]# rpm -i MySQL-shared-5.0.9-0.i386.rpm [root@host]# rpm -i MySQL-bench-5.0.9-0.i386.rpm

Query in MySQL: Basic Queries are

Create database Creating separate space in MySQL.

Syntax: create database ; To use the created Database

Syntax: use ; Create table Creating table in Database

Syntax: create table (Column1 Datatype,Column2 Datatype,...); Insert table Insert data in created table

Syntax: insert into values('string_data',integer_data,....); Select table

To retrieve data from table

Syntax for access all Rows: select * from ; (or) select from ; Syntax for access particular Rows: select * from where ='<user_data'>; View table

Create view table form existing table.

Syntax: create view as select , from ; Delete table

To delete data or table

Syntax for delete all data: delete table ; Syntax for delete particular data: delete table where =" " MySQL aggregate functions: Avg

The AVG function calculates the average value of a set of values. It ignores NULL values in the calculation.

Syntax: select AVG(<columnname) from="" <tablename="">; Count

The COUNT function returns the number of the rows in a table.

Syntax: select COUNT(*) from (or) select COUNT() from ; Sum

The SUM function returns the sum of a set of values.

Syntax: select SUM() from ;

Min The MIN function returns the minimum value in a set of values. Syntax: select MIN() from ;

Max The MAX function returns the maximum value in a set of values.

Syntax: select MAX() from ; MySQL with node.js Example:

var express    = require("express");   
var mysql      = require('mysql');  
var connection = mysql.createConnection({   
    host     : 'localhost',       
    user     : 'root',                
    password : '',                
    database : 'address_book'         
}); 

var app = express();
connection.connect(function(err){   
    if(!err) {
        console.log("Database is connected ... nn");
    } else {
        console.log("Error connecting database ... nn");   
    }
});

app.get("/",function(req,res){
    var query="select * from register where 
    urname='"+req.body.urname+"' and pw='"+req.body.pw+"'";
    connection.query(query, function(err, 
    rows, fields) {    
    connection.end();
    if (!err)
        console.log('The solution is: ', rows);
    else
        console.log('Error while performing Query.');
    });
});
app.get("/",function(req,res){
    connection.query('insert into user values('+1+','+sathiya+','+sathiya@gmail.com+','+sathiya2901+')', function(err, rows, fields) { 
    connection.end();
    if (!err)
        console.log('The solution is: ', rows);
    else
        console.log('Error while performing Query.');
    });
});
app.listen(3000);  

For any query contact Clofus Innovations.

[Tutorial] Node JS Getting Started Practical

Several methods. They are called as Rest Architecture. What is REST architecture? REST stands for REpresentational State Transfer. REST is web standards based architecture and uses HTTP Protocol. A REST Server simply provides access to resources and REST client accesses and modifies the resources using HTTP protocol. It usually done using json fromat

1)GET Method - This is used to provide a read only access to a resource.

2)PUT Method - This is used to create a new resource.

3)POST Method - This is used to update a existing resource or create a new resource.

4)DELETE Method - This is used to remove a resource. Get Method :

app.get('/mainpage', function(req, res){            
//This is the get method which will Route to the mainpage

// The below line requesting data from mysql database
connection.query('SELECT * FROM tablename', function(err, rows){
    console.log("data send to frontpage");
    res.send(rows); //It will send response to corresponding http method in angular js

});

Post Method :

app.post('/mainpage', function(req, res){           

    // The below line requesting data from mysql database
connection.query('SELECT * FROM tablename', function(err, rows){
console.log("data send to frontpage");
res.send(rows); //It will send response to corresponding http method in angular js

});

Put Method :

//This will insert the data
app.put('/mainpage', function(req, res){           


// The below line inserting data from mysql database
connection.query('insert into tablename value ('name')', function(err, rows){


});

Delete Method :

//This will delete the data in the resource
app.delete('/mainpage', function(req, res){  

//This is the delete method which will Route to the mainpage

// The below line deleting data from mysql database
connection.query('Delete from tablename', function(err, rows){

});
Res.send() :

This Res.send function is used to send the data to client side http method of Angular Js. For Example:

app.post('/mainpage', function(req, res){           
    res.send('Hello world'); //It will send response to corresponding http method in angular js
});

This res.send(‘Hello world’) will send the hello world text to the client side http method of the angular js. Query: Send the data from client side to server side by using query parameter. For Example: Clent side request

app.controller('mainctl',function($scope,$http,$routeParams){
    $http({
        method: 'GET',
        url:'http://localhost:2901/mainpage',
        params: {                               //query parameter send data with the help of params
            urname(this is key):$routeParams.uid(this is value)     //params data will attach as query like http://localhost:2901/mainpage?urname='data'
        }
    }).then (function(res){
        console.log(res.data);
    })
})

Server side receiving request and response to client.

app.get('/mainpage', function(req, res){            // request received from client side
    console.log("using Query")
    console.log(req.query);                         //to access the query parameter use(req.query or req.query.urname(use key))
    reg.find(req.query,function(err,data){          //request sent to mongodb and result will be stored in data parameter
        res.send(data);                             //response will send to client request.
    });
});

Params: Send the data from client side to server side by using Params. For Example: Client Side Request:

app.controller('mainctl',function($scope,$http,$routeParams){
$http({
    method: 'GET',
    url:'http://localhost:2901/mainpage/'+$routeParams.uid(this is value)   // value will send to server through url

    }).then (function(res){
        console.log(res.data);
    })
})

Server side receiving request and response to client.

app.get('/mainpage/:urname', function(req, res){            // request received from client side
    console.log("using Param")
    console.log(req.params);            //to access the query parameter use(req.params or req.params.urname)
    reg.find(req.query,function(err,data){      //request sent to mongodb and result will be stored in data parameter
        res.send(data);             //response will send to client request.
    });
});

Body: Body is used to send data securely(i.e., hide information and send a request to server). Important things to follow while using body parameter. install body-parse.use(bodyParser.json()) - after using this line only body will accept body request from client. For Example: Client side:

app.controller('signinctrl',function($scope,$http,$location){     
    $scope.send data=function(user){                 //user input all store in json type
    $http({
            method: 'POST',
            url: 'http://localhost:2901/signin',
            data:user                               // data information pass through body parameter
        }).then(function(res) {            
            console.log(res.data);
        })  
    }
})

Server Side:

var express = require('express');                   //using express package
var bodyParser = require('body-parser');            // using body-parser package without this data will not work in body parameters
var mongoose = require('mongoose');                 // using mongoose package
var app = express();
app.use(bodyParser.json());                         //access for json files
app.post('/signin',function(req,res){
    console.log("Using Body Method")
    console.log(req.body);                          // access body information using req.body
    reg.find(req.body,function(err,data){           //request result will store in data parameter
        res.send(data);                             // response will send to client resquest
    });
})

Header: Header is used give access control for client side request and response. For Example:

app.all('*',function(req,res,next){                                     //* represent access control to all app using methods.
    console.log("Allow header access");
    res.header('Access-Control-Allow-Origin', '*');                     //origin access control
    res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE');  //method access control
    res.header('Access-Control-Allow-Headers', 'Content-Type');         // header access control (json, text/plain,..)
    next();
})

For any query contact Clofus Innovations.

[Tutorial] NPM Package Manager Getting Started Practical

If you’ve been working with JavaScript for a while, you might have heard of npm: npm makes it easy for JavaScript developers to share the code that they’ve created to solve particular problems, and for other developers to reuse that code in their own application.

Commands

1) npm install
2) npm install grunt
3) bower install
4) grunt buildprod
5) grunt builddev

During the installation of bower , may show the error unable to connect to github. Enter the cmd bower install again in same command prompt.

Npm install -g :

It will install the npm package and allows to use globally.

Npm install – save :

It will install the corresponding package and save it in node modules and list an entry in dependencies in package.jason file.

Updating npm :

Node comes with npm installed so you should have a version of npm. However, npm gets updated more frequently than Node does, so you’ll want to make sure it’s the latest version.

npm install npm@latest -g

Installing npm manually

For more advanced users. The npm module is available for download at

https://registry.npmjs.org/npm/-/npm-{VERSION}.tgz.

Creating node.js module

  • Publish your package to npm
  • Make a new directory outside of your project and cd into it
  • Run npm install
  • Create a test.js file which requires the package and calls the method
  • Run node test.js. The message should be output.

Example:

{ 
    “name”: “clofus”, 
    “version”: “0.1.0”, 
    “devDependencies”: { 
        “esprima”: “~1.0.4”, 
        “grunt”: “^0.4.5”, 
        “grunt-bower-concat”: “^0.4.0”, 
        “grunt-concat-css”: “^0.3.1”, 
        “grunt-contrib-clean”: “~0.5.0”, 
        “grunt-contrib-concat”: “~0.4.0”, 
        “grunt-contrib-copy”: “^0.7.0”, 
        “grunt-shell”: “^1.1.2”, 
        “grunt-stripcomments”: “^0.3.1”, 
        “grunt-uncss”: “^0.4.0”, 
        “grunt-wiredep”: “^2.0.0”, 
        “load-grunt-tasks”: “^1.0.0” 
    }, 
    “dependencies”: { 
        “express”: “^4.13.3”, 
        “grunt-aws”: “^0.4.0”, 
        “grunt-aws-s3”: “^0.11.1”, 
        “grunt-banner”: “^0.3.1”, 
        “grunt-bower-concat”: “^0.4.0”, 
        “grunt-ng-annotate”: “^0.8.0”, 
        “grunt-processhtml”: “^0.3.7”, 
        “grunt-shell”: “^1.1.2”, 
        “grunt-stripcomments”: “^0.3.1”, 
        “grunt-uncss”: “^0.4.0”, 
        “load-grunt-tasks”: “^1.0.0” 
    }
}

npmjs.com and Other npm Services

The npm Open Source Terms at https://www.npmjs.com/policies/open-source-terms govern use of https://www.npmjs.com and the npm public registry. The npm Private Packages Terms at https://www.npmjs.com/policies/private-terms govern use of npm Private Packages. The npm Personal Payment Plan https://www.npmjs.com/policies/personal-plan and the npm Organization Payment Plan https://www.npmjs.com/policies/organization-plan govern payment for npm Private Packages.

For any query contact Clofus Innovations.

[5 steps] TensorFlow Basic Tutorial

There are 5 steps in general to perform the prediction of any given data,

1) Create Input Training Data & its traning input function
2) Create Input Test Data & its testing input function
3) Choose feature columns and existing Classifier or custom Classifier
4) Train and Test the Model using Classifier
5) Perform Prediction using the model

Create Input Training Data & its traning input function

We need to make sure we have good quality data for the machine learning model to perform accurate prediction, more the traning data better the model prediction outcome will be.

In this example we will use the commonly used iris training data which comes in a simple csv file with 4 features and species as the fifth column

In the below code we are reading the CSV data in a pandas dataframe and splitting the entire data in to two seperate set which will be used for traning and testing seperately

inputdata = pd.read_csv(DATAPATH, names=ALL_CSV_COLUMNS, header=0)

train_x, test_x, train_y, test_y = sk.train_test_split(inputdata.loc[:,FEATURE_COLUMNS], inputdata.loc[:,'Species'],test_size=0.10)

Now input function is used to properly feed the data in batches to the tensorflow classifier

def train_input_fn(features, labels, batch_size):

    # Convert the inputs to a Dataset.
    dataset = tf.data.Dataset.from_tensor_slices((dict(features), labels))

    # Shuffle, repeat, and batch the examples.
    dataset = dataset.shuffle(1000).repeat().batch(batch_size)

    # Return the dataset.
    return dataset

Create Input Test Data & its testing input function

Now using the split testing data we can now do the same input function for evaluation or testing function, also here we have option for both labeled and non labeled testing dataset

def eval_input_fn(features, labels, batch_size):
    features=dict(features)
    if labels is None:
        # No labels, use only features.
        inputs = features
    else:
        inputs = (features, labels)

    # Convert the inputs to a Dataset.
    dataset = tf.data.Dataset.from_tensor_slices(inputs)

    # Batch the examples
    assert batch_size is not None, "batch_size must not be None"
    dataset = dataset.batch(batch_size)

    # Return the dataset.
    return dataset

Choose feature columns and existing Classifier or custom Classifier

Now we are selecting the feature column names for the classifier and choose real valued numeric data for the feature columns

my_feature_columns = []

for key in train_x.keys():
    my_feature_columns.append(tf.feature_column.numeric_column(key=key))

Choose feature columns and existing Classifier or custom Classifier

Choose an appropriate classifier for the given data for best results, below we are using DNNClassifier

# Evaluate the model.
classifier = tf.estimator.DNNClassifier(
    feature_columns=my_feature_columns,
    hidden_units=[10, 10],
    n_classes=3)

Train and Test the Model using Classifier

Now lets train and test the classifier using the above DNNClassifier and input functions

#Train the Model.
classifier.train(
    input_fn=lambda:train_input_fn(train_x, train_y, batch_size),
    steps=train_steps)

# Evaluate the model.
eval_result = classifier.evaluate(
    input_fn=lambda:eval_input_fn(test_x, test_y, batch_size))
print('\nTest set accuracy: {accuracy:0.3f}\n'.format(**eval_result))

Perform Prediction using the model

On the final step, the model is now ready for the prediction. we will use a predetermined set of input data to verify the accuracy of the model

# Generate predictions from the model
expected = ['Setosa', 'Versicolor', 'Virginica']
predict_x = {
    'SepalLength': [5.1, 5.9, 6.9],
    'SepalWidth': [3.3, 3.0, 3.1],
    'PetalLength': [1.7, 4.2, 5.4],
    'PetalWidth': [0.5, 1.5, 2.1],
}

predictions = classifier.predict(
    input_fn=lambda:eval_input_fn(predict_x, labels=None, batch_size=batch_size))

The outcome of the prediction is returned as a generator object which can be iterated to see our results

for pred_dict, expec in zip(predictions, expected):
    template = ('\nPrediction is "{}" ({:.1f}%), expected "{}"')

    class_id = pred_dict['class_ids'][0]
    probability = pred_dict['probabilities'][class_id]
    print(template.format(SPECIES[class_id], 100 * probability, expec))

I hope we were able to explain the tensorflow high level API in a very simple step by step approach and please feel free to contact support@clofus.com for any queries thanks

[Tutorial] Using Chrome dev Tools

The Chrome Developer Tools (Devtools for short), are a set of web authoring and debugging tools built into Google Chrome. The Devtools provide web developers deep access into the internals of the browser and their web application. Use the Devtools to efficiently track down layout issues, set JavaScript breakpoints, and get insights for code optimization Overall, there are eight main groups of tools available view Developer Tools:

  • Elements
  • Resources
  • Network
  • Sources
  • Timeline
  • Profiles
  • Audits
  • Console

Elements

The elements consists of the html code corresponding to the document and it also has the CSS code in the right side which is very much helpful for the front-end designers to efficiently design the webpage.

elements

Resources

The resources section consists of the local storage, Whenever the browser refreshes the data stored will be replace with new data from the server. In order to use the data for further processing they can be stored to the local storage as a temporary files.

Network

In Network section used to view the network calls between the server and the client. It displays every time when the network call initiated between the server and the client. network

Source

Source section used to view the Source files of the corresponding files. This section allows specifically set the breakpoints between the codes to run particular part and verify for errors. source

Profiles

The Profiles panel lets you profile the execution time and memory usage of a web app or page. The Profiles panel includes two profilers: a CPU profiler and a Heap profiler. These help you to understand where resources are being spent, and so help you to optimize your code:

  • The CPU profiler shows where execution time is spent in your page’s JavaScript functions.
  • The Heap profiler shows memory distribution by your page’s JavaScript objects and related DOM nodes.
  • The CSS Selector profiler records the aggregate time spent matching selectors to elements in the DOM tree. This time is also captured within “Style Recalculation” Timeline events.

Console

The console section consists of the error logs and it act as an output screen to check the printed values of the variables.

For any query contact Clofus Innovations.

[Tutorial] Using mongodb with nodejs

MongoDB is an open-source document database that provides high performance, high availability, and automatic scaling. MongoDB obviates the need for an Object Relational Mapping (ORM) to facilitate development.

MongoDB

MongoDB is a document database with the scalability and flexibility that you want with the querying and indexing that you need

Nodejs

Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast and scalable network applications.

  • Using Mongoose we can connect MongoDB database and nodejs

Mongoose

It is the Mongodb framework which is used to connect nodejs with mongodb database.

1) To install mongoose in nodejs use npm package: sh npm install mongoose

2) Link mongoose with Nodejs server: sh var mongoose = require('mongoose');

3) To connect a new MongoDB database: sh mongoose.connect('mongodb://localhost/database_name');

  • Create Model for collection

    • Model - Models are used to create the fields of the documents.

    Example :

    var reg = mongoose.model('register',    //collection name
    {
        field1 : {type:String},         //string value
        field2 : {type:Number},         //number value
        field3 : {type: Object},            //json object value
        field4 : {type: Date},          //datetime value
        field5 : {type: Boolean},       //Boolean value true/false
        field6 : {type: String, required: true},    // string value must enter the value
        field7 : {type: Number, default: 0},    //number value    with default of '0' value
        field8 : {type: String, enum: ["active", "inactive","block"], default: "inactive"}, //string value which contain in enum array
        field9 : {type: Schema.Types.ObjectId, ref: 'modelName'}                       //object_id  of reference of another model
    });
    
  • To store the values into the mongodb server use the following syntax

    Syntax :

    objectname.save(function (err,data){
        //callback content
     });
    

    Example :

    var details = new reg(JSON_document);
    details.save(function (err,data) {    //insert to mongodb database
        if (err) {
            console.log('Error block');
        } else {
            console.log('Success block')
        }
    });
    
  • To Find data from the mongodb database use the following query i) To get only one data from database use below syntax or example

    Syntax :

    reg.findOne({},function(err,data){
        //callback content
    });
    

    Example :

    reg.findOne({key : value},function(err,data){
        res.send(data);     // send response 
    });
    

    ii) To get multiple data as array from database use below syntax or example

    Syntax :

    reg.find({},function(err,data){
        //callback content
    });
    

    Example :

    reg.find({key : value},function(err,data){
        res.send(data);     // send response 
    });
    

To Update data in mongodb database collection i) Normal update

Syntax :

reg.update(QUERY_VALUE, UPDATE_VALUE).exec(function(err,value){
    if(err){
        console.log("Error block")
    }else{
        console.log("Success block")
    }
});

Example :

reg.update({key:value}, {key1:value1,key2: value2}).exec(function(err,value){
    if(err){
        console.log("Error block")
    }else{
        console.log("Success block")
    }
});

ii) Find and update By default findOneAndUpdate returns the original document. If you want it to return the modified document pass an options object { new: true } to the function

Syntax :

reg.findOneAndUpdate({FIND_VALUE},{UPDATE_VALUE},{OPTIONAL}, 
   function(err, content){
    if(!err){
        res.json({status: "success", data: value});
    }else{
        res.json({status:"error"});
    }
});

Example :

reg.findOneAndUpdate({key: value}, 
    {key1: value1, key2: value2}, {new: true}, function(err, doc){
    if(err){
        console.log("Error block");
    }else{
        console.log("Success block");
    }
});

NOTE: if optional json contain {new:true} - it will return updated document details if optional json not contain or contain {new:false} - if will return old value

To delete a data collection from mongodb database:

i) Normal delete data from collection:

Syntax :

reg.remove(QUERY_VALUE);

Example :

reg.remove({key:value});

ii) Find and remove data from collection: Syntax :

reg.find({QUERY_VALUE}).remove().exec();

Example :

reg.find({key: value}).remove().exec();

iii) Drop collection from mongodb database: Syntax :

Collection_name.drop();

Example :

reg.drop();

For any query contact Clofus Innovations.

Using MySQL for CRUD operations with Nodejs[CRUD operations]

MySQL is one of the best RDBMS being used for developing web-based software applications and in this article we will cover about using nodejs for CRUD operations with MySQL database with a step by step approach with code examples

  • Database - A database is a collection of tables, with related data.
  • Table - A table is a matrix with data. A table in a database looks like a simple spreadsheet.
  • Primary Key - A primary key is unique. A key value can not occur twice in one table. With a key, you can find at most one row.
  • Foreign Key - A foreign key is the linking pin between two tables.

Nodejs

Nodejs is a platform built on Chrome’s JavaScript runtime for easily building fast and scalable network applications.

Steps:

1) To install MySQL in nodejs use npm package:

    npm install mysql

2) Link MySQL with Nodejs server

var mysql = require('mysql');

3) To create a new MySQL database and table - Create database: Creating separate space in MySQL

    Syntax:
        create database <DB_Name>;
  • Use database: To use the created Database

    Syntax:
        use <DB_Name>;
    
  • Create Table: Creating table in Database

    Syntax:
    
        create table <TableName>(Column1 Datatype,Column2 Datatype,...);
    
  • Connect MySQL and Nodejs:

    MySQL configuration

    Example :

    var connection = mysql.createConnection({ // creating connection string
        host     : 'localhost', //host name
        user     : 'root', // mySQL username  
        password : '', // mySql Password
        database : 'db_name' // database Name
    });
    
  • connecting with nodejs

    Example :

    connection.connect(function(err){ 
        if(!err) {
            console.log("Database is connected ... ");   
        } else {
            console.log("Error connecting database ... ");   
        }
    });
    
  • Insert table: Insert data in created table

    Syntax:

    insert into <TableName> values('string_data',integer_data,....);
    

    Example:

    connection.query("insert into user values("+value1+",'"+value2+"',"+value2+",'" value4+'")",
     function(err, rows, fields) { // INSERT query in nodejs file
       connection.end();
       if (!err)
        console.log('The solution is: ', rows);
       else
        console.log('Error while performing Query.');
      });
    
  • Select table: To retrieve data from table

    i) Syntax for access all Rows :

    select * from <TableName>; (or) select <column_name> from <TableName>;
    

    ii) Syntax for access particular Rows :

    select * from <TableName> where <column_name>='<user_data'>;
    

    Example :

    var query="select * from db_name where column1='"+value1+"' and column2='"+value2+"'";
    connection.query(query, function(err, rows, fields) { // SELECT query in nodejs file
    connection.end();
        if (!err){
            console.log('The solution is: ', rows);
        } else { 
            console.log('Error while performing Query.');
        }
    });
    
  • Update table: Syntax for update row:

    update <TableName> set <update_columnName> = <update_value> where <column_name>='<user_data'>; 
    

    Example:

    var query="update db_name set updatecolumn='"+updatevalue+"' 
    where conditioncolumn='"+conditionvalue+"'";
        connection.query(query, function(err, rows, fields) {           // SELECT query in nodejs file
        connection.end();
          if (!err)
            console.log('The solution is: ', rows);
          else
            console.log('Error while performing Query.');
          });
    
  • Delete table: To delete data or table

    i) Syntax for delete all data:

        delete table <TableName>;
    

    ii) Syntax for delete particular data:

        delete table <TableName> where <columnName>="<userdata>";
    

    Example:

    var query="delete table db_name where column1='"+value1;
    connection.query(query, function(err, rows, fields) { // SELECT query in nodejs file
        connection.end();
          if (!err){
            console.log('The solution is: ', rows);
          }else{
            console.log('Error while performing Query.');
          }
    });
    

MySQL aggregate functions:

The AVG function calculates the average value of a set of values. It ignores NULL values in the calculation.

Syntax:
    select AVG(<ColumnName) from <TableName>;

The COUNT function returns the number of the rows in a table.

Syntax:
    select COUNT(*) from <TableName> (or) select COUNT(<columnName>) from <TableName>;

The SUM function returns the sum of a set of values.

Syntax:
    select SUM(<ColumnName>) from <TableName>;

The MIN function returns the minimum value in a set of values.

Syntax:
    select MIN(<ColumnName>) from <TableName>;

The MAX function returns the maximum value in a set of values.

Syntax:
    select MAX(<ColumnName>) from <TableName>;

For any query contact Clofus Innovations.

How to build Web Application Using AngularJS and NodeJS Complete [step by step] tutorial for beginners

Building web application using programming languages like PHP, JavaScript etc., get outdated. Already many companies and agencies who involved in developing web-related software/application have migrated to the new technology called AngularJS and NodeJS. Now it has become very popular technology term between tech peoples and there is a lot of scope to the beginners who learn AngularJS with NodeJS.

This complete tutorial will be very useful and easy to the beginners who passionate to learn AngularJS/NodeJS and build a responsive web application and you don’t need to take any courses to crack this technology. You will learn everything about building web application using Angular and NodeJS

UI Technologies

Before you start building Web application you should have a basic understanding of

  • HTML
  • CSS
  • JavaScript

Next, you need to learn some installations process

If you’ve been working with JavaScript for a while, you might have heard of npm: npm makes it easy for JavaScript developers to share the code that they’ve created to solve particular problems, and for other developers to reuse that code in their own application.

Commands

1) npm install
2) npm install grunt
3) bower install
4) grunt buildprod
5) grunt builddev

During the installation of bower, may show the error unable to connect to GitHub. Enter the cmd bower install again in same command prompt.

Npm install -g :

It will install the npm package and allows to use globally.

Npm install – save :

It will install the corresponding package and save it in node modules and list an entry in dependencies in package.jason file.

Updating npm :

Node comes with npm installed so you should have a version of npm. However, npm gets updated more frequently than Node does, so you’ll want to make sure it’s the latest version.

npm install npm@latest -g

Installing npm manually

For more advanced users. The npm module is available for download at

https://registry.npmjs.org/npm/-/npm-{VERSION}.tgz.

Creating node.js module

  • Publish your package to npm
  • Make a new directory outside of your project and cd into it
  • Run npm install
  • Create a test.js file which requires the package and calls the method
  • Run node test.js. The message should be output.

Example:

 {
   "name": "clofus",
   "version": "0.1.0",
   "devDependencies": {
     "esprima": "~1.0.4",
     "grunt": "^0.4.5",
     "grunt-bower-concat": "^0.4.0",
     "grunt-concat-css": "^0.3.1",
     "grunt-contrib-clean": "~0.5.0",
     "grunt-contrib-concat": "~0.4.0",
     "grunt-contrib-copy": "^0.7.0",
     "grunt-shell": "^1.1.2",
     "grunt-stripcomments": "^0.3.1",
     "grunt-uncss": "^0.4.0",
     "grunt-wiredep": "^2.0.0",
     "load-grunt-tasks": "^1.0.0"
   },
   "dependencies": {
     "express": "^4.13.3",
     "grunt-aws": "^0.4.0",
     "grunt-aws-s3": "^0.11.1",
     "grunt-banner": "^0.3.1",
     "grunt-bower-concat": "^0.4.0",
     "grunt-ng-annotate": "^0.8.0",
     "grunt-processhtml": "^0.3.7",
     "grunt-shell": "^1.1.2",
     "grunt-stripcomments": "^0.3.1",
     "grunt-uncss": "^0.4.0",
     "load-grunt-tasks": "^1.0.0"
   }
}

Bootstrap

Bootstrap is a free front-end framework for faster and easier web development. Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins. Bootstrap also gives you the ability to easily create responsive designs.

How to download Bootstrap?

If you want to download and host Bootstrap yourself, go to getbootstrap.com, and follow the instructions there.

Bootstrap CDN

If you don’t want to download and host Bootstrap yourself, you can include it from a CDN (Content Delivery Network). MaxCDN provides CDN support for Bootstrap’s CSS and JavaScript. You must also include jQuery:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"

Bootstrap’s Grid System is made up of 3 things:

1.A container

2.Rows

3.Columns

Creating a Contain:

Bootstrap’s grid system needs a container to hold rows and columns.A container is a simple div element with a class of .container. The container is used to provide a proper width for the layout, acting as a wrapper for the content.You can choose a fluid container if you are not fond of a fixed layout.

Creating a Row:

A row acts like a wrapper around the columns. The row nullifies the padding set by the container element by using a negative margin value of -15px on both the left and right sides.A row spans from the left edge to the right edge of the container element. It is created by adding the class.A row to a block level element inside the container.

Creating Columns:

Bootstrap uses different column class prefixes for different sized devices. In the above demo, I used the class .col-xs-12 to create a single column that spans across 12 virtual Bootstrap columns. Hence, this column’s width will be the width of the row. In the above demo, you will also see the 15px padding reappear to push the element away from the container. This is because every column in Bootstrap has a padding of 15px. You must be wondering why I used the class prefix that belonged to extra smaller devices, which is .col-xs-12.This way, we maintain the limit of 12 virtual Bootstrap columns for a single row.

Grid Classes:

  1. xs (Extra Small Devices such as Mobile phones)
  2. sm (Smaller Devices such as Tablets)
  3. md (Medium Devices such as Desktops)
  4. lg (Larger Desktops)

Example:

<div class="row">
 <div class="col-sm-4">.col-sm-4</div>
 <div class="col-sm-4">.col-sm-4</div>
 <div class="col-sm-4">.col-sm-4</div>
</div>

This is for three equal columns.then,

To apply grid for multiple devices simultaneously, include them together in the classes.

Example:

<div class="container-fluid">
    <h1>Grid Responsive using bootstrap :</h1>
    <hr>
    <div class="row" >
        <div class="col-md-3 col-sm-6 col-xs-12" style="background-color:red" >
            <p>1st grid to display</p>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12"  style="background-color:blue">
            <p>2nd grid to display</p>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12" style="background-color:grey">
            <p>3rd grid to display</p>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12" style="background-color:green" >
            <p>4th grid to display</p>
        </div>
    </div>
</div>

UX Technologies

Javascript

Before we use a function, we need to define it. The most common way to define a function in JavaScript is by using the function keyword, followed by a unique function name, a list of parameters (that might be empty), and a statement block surrounded by curly braces.

function functionName(parameters) {
  code to be executed 
}

Function Expressions

A JavaScript function can also be defined using an expression.

Example:
<script>
    var x = function (a, b) {return a * b};
    document.getElementById("demo").innerHTML = x;
 </script>

The Function() Constructor

As you have seen in the previous examples, JavaScript functions are defined with the function keyword. Functions can also be defined with a built-in JavaScript function constructor called Function().

var myFunction = new Function("a", "b", "return a * b");
document.getElementById("demo").innerHTML = 
myFunction(4, 3);

Function Parameters

Parameter Rules

JavaScript function definitions do not specify data types for parameters. JavaScript functions do not perform type checking on the passed arguments. JavaScript functions do not check the number of arguments received.

Parameter Defaults

If a function is called with missing arguments (less than declared), the missing values are set to ‘undefined’.

function myFunction(x, y) {
 if (y === undefined) {
    y = 0;
 }    
 return x * y;
}

JavaScript Function Invocation

Invoking a JavaScript Function

You have already learned that the code inside a JavaScript function will execute when “something” invokes it. The code in a function is not executed when the function is defined. It is executed when the function is invoked. It is also quite common to say “call upon a function”, “start a function”, or “execute a function”.

Example:
function myFunction(a, b) {
   return a * b;
}
myFunction(10, 2); 

Invoking a Function as a Method

In JavaScript, you can define the function as object methods.

Example:
var myObject = {
  firstName:"John",
  lastName: "Doe",
  fullName: function () {
  return this.firstName + " " + this.lastName;
 }
}
myObject.fullName();

JavaScript Closures

Global Variables

A function can access all variables defined inside the function.

Example:
function myFunction() {
   var a = 4;
   return a * a;
}

In the last example, a is a global variable. In a web page, global variables belong to the window object.

A Counter Dilemma

Suppose you want to use a variable for counting something, and you want this counter to be available to all functions. You could use a global variable, and a function to increase the counter:

Example:
var counter = 0;
function add() {
   counter += 1;
}
add();
add();
add();

JavaScript Nested Functions

All functions have access to the global scope. JavaScript supports nested functions. Nested functions have access to the scope “above” them. In this example, the inner function plus() has access to the counter variable in the parent function:

function add() {
 var counter = 0;
 function plus() {counter += 1;}
 plus();    
 return counter; 
}

AngularJS

AngularJS is a very powerful JavaScript Framework. It is used in Single Page Application (SPA) projects. It extends HTML DOM with additional attributes and makes it more responsive to user actions. AngularJS is open source, completely free.

AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

The AngularJS Components:

  1. ng-app-This directive defines and links an AngularJS application to HTML.
  2. ng-model-This directive binds the values of AngularJS application data to HTML input controls.
  3. ng-bind- This directive binds the AngularJS Application data to HTML tags.

Example

<!doctype html>
<html ng-app>

  <head>
  <scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
</head>
 <body>
  <div>
     <label>Name:</label>
     <input type = "text" ng-model = "yourName" placeholder = "Enter a name here">
     <hr />

     <h1>Hello {{yourName}}!</h1>
  </div>

</body>
</html>

Scope:

The scope is the binding part between the HTML (view) and the JavaScript (controller). The scope is an object with the available properties and methods. The scope is available for both the view and the controller.

<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController",function($scope) {
  $scope.message = "In shape controller";
  $scope.type = "Shape";
});
</script>

Root Scope:

All applications have a $rootScope which is the scope created on the HTML element that contains the ng-app directive. The rootScope is available in the entire application. If a variable has the same name in both the current scope and in the rootScope, the application uses the one in the current scope.

<body ng-app="myApp">

<p>The rootScope's favorite color:</p>
<h1>{{color}}</h1>

<div ng-controller="myCtrl">
<p>The scope of the controller's favorite color:</p>
<h1>{{color}}</h1>
</div>

<p>The rootScope's favorite color is still:</p>
<h1>{{color}}</h1>

<script>
 var app = angular.module('myApp', []);
  app.run(function($rootScope) {
    $rootScope.color = 'blue';
  });
  app.controller('myCtrl', function($scope) {
   $scope.color = "red";
  });
</script>
</body

Services:

AngularJS supports the concepts of “Separation of Concerns” using services architecture. Services are javascript functions and are responsible to do specific tasks only.

There are two ways to create a service.

  1. factory
  2. service

By using factory method:

var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {
var factory = {};

 factory.multiply = function(a, b) {
   return a * b
 }

 return factory;
}); 

By using service method:

mainApp.service('CalcService', 
 function(MathService){
    this.square = function(a) {
    return MathService.multiply(a,a);
 }
});

Routing:

  • location service.
  • route service.

Location service:

The $location service is very useful whenever you need to read or change the URL (or any part of it) in the browser. It can be configured to work in two modes: hashbang mode or HTML5 mode

Route service:

This service allows you to map different URLs to different views and react whenever there’s a match between a URL and a defined route. To work with the $route service, we need the ngRoute module which can be found in the angular-route.js file.

Angular Directive

What is Angularjs Directive?

Angularjs directive are extended HTML attributes with the prefix ‘ng’,

The ng-app directive initializes an Angularjs Application. The ng-init directive initializes application data.

Example: ng-init=“names=[‘Jani’,‘Hege’,‘Kai’]”

The ng-model directive binds the value of HTML controls(input, select, textarea) to application data.

Server-Side Technologies

NodeJS

Node js is an open source, server-side( back-end) java-script platform which is used to connect client side to the server database. It is single threaded, Non-blocking I/O (Each line is executed separately irrespective of depending upon the other inputs). Before proceeding download and configure node js. (Check-in setup development environment for installation procedure).

Express Framework :

Express is a very popular web application framework built to create Node JS Web-based applications. Install express on the local computer by the following command

npm install express --save

Above command saves installation locally in

node_modules directory and creates a directory express inside node_modules.

Simple Express framework Server program:

File name : server.js

var express = require('express');   //Express framework included in the server.js file
var app = express();

app.get('/', function (req, res) {
 res.send('Hello World');
})
app.listen(3000); // server listening port

Note : Save this file as a server.js open command prompt enter node server.js to run the server. (configure in nginx for the client side )

Request & Response :

Express application makes use of a callback function whose parameters are request and response objects.

app.get('/', function (req, res) {
 // --
})
  • Request Object - The request object represents the HTTP request and has properties for the request query, Params, body, HTTP headers, and so on.
  • Response Object - The response object represents the HTTP response that an Express app sends when it gets an HTTP request.

    Basic Routing:

    Routing refers to determining how an application responds to a client request to a particular endpoint, which is a URI (or path) and a specific HTTP request method (GET, POST, PUT, DELETE)

This can be done by using several methods. They are called as Rest Architecture. What is REST architecture?

REST stands for Representational State Transfer. REST is web standards-based architecture and uses HTTP Protocol. A REST Server simply provides access to resources and REST client accesses and modifies the resources using HTTP protocol. It usually was done using JSON format

1)GET Method - This is used to provide a read-only access to a resource.

2)PUT Method - This is used to create a new resource.

3)POST Method - This is used to update an existing resource or create a new resource.

4)DELETE Method - This is used to remove a resource.

Get Method :

app.get('/mainpage', function(req, res){            
//This is the get method which will Route to the mainpage

// The below line requesting data from mysql database
connection.query('SELECT * FROM tablename', function(err, rows){
  console.log("data send to frontpage");
    res.send(rows); //It will send response to corresponding http method in angular js

});

Post Method :

 app.post('/mainpage', function(req, res){           

 // The below line requesting data from mysql database
connection.query('SELECT * FROM tablename', function(err, rows){
  console.log("data send to frontpage");
    res.send(rows); //It will send response to corresponding http method in angular js

 });

Put Method :

//This will insert the data
 app.put('/mainpage', function(req, res){           


// The below line inserting data from mysql database
connection.query('insert into tablename value ('name')', function(err, rows){


});

Delete Method :

 //This will delete the data in the resource
app.delete('/mainpage', function(req, res){  

//This is the delete method which will Route to the main page

// The below line deleting data from mysql database
connection.query('Delete from tablename', function(err, rows){

});

Res.send() :

This Res.send function is used to send the data to client side http method of Angular Js.

For Example:

 app.post('/mainpage', function(req, res){           
    res.send('Hello world'); //It will send response to corresponding http method in angular js

});

This res.send(‘Hello world’) will send the hello world text to the client side HTTP method of the angular js.

Query:

Send the data from client side to server side by using a query parameter.

For Example:

Clent side request 
app.controller('mainctl',function($scope,$http,$routeParams){ $http({ method: 'GET', url:'http://localhost:2901/mainpage', params: { //query parameter send data with the help of params urname(this is key):$routeParams.uid(this is value) //params data will attach as query like http://localhost:2901/mainpage?urname='data' } }).then (function(res){ console.log(res.data); }) }) Server side receiving request and response to client.
app.get('/mainpage', function(req, res){ // request received from client side console.log("using Query") console.log(req.query); //to access the query parameter use(req.query or req.query.urname(use key)) reg.find(req.query,function(err,data){ //request sent to mongodb and result will be stored in data parameter res.send(data); //response will send to client request. }); });

Params:

Send the data from client side to server side by using Params.

For Example:

Client Side Request: app.controller('mainctl',function($scope,$http,$routeParams){
$http({
    method: 'GET',
    url:'http://localhost:2901/mainpage/'+$routeParams.uid(this is value)   // value will send to server through url

 }).then (function(res){
    console.log(res.data);
 })
})


 Server side receiving request and response to client.


app.get('/mainpage/:urname', function(req, res){            // request received from client side
  console.log("using Param")
  console.log(req.params);            //to access the query parameter use(req.params or req.params.urname)
  reg.find(req.query,function(err,data){      //request sent to mongodb and result will be stored in data parameter
    res.send(data);             //response will send to client request.
  });
});

Body:

Body is used to send data securely(i.e., hide information and send a request to the server). Important things to follow while using body parameter. install body-parse.use(bodyParser.json()) - after using this line only body will accept body request from client.

For Example:

  Client side:app.controller('signinctrl',function($scope,$http,$location){     
   $scope.send data=function(user){              //user input all store in json type
    $http({
            method: 'POST',
            url: 'http://localhost:2901/signin',
            data:user                               // data information pass through body parameter
        }).then(function(res) {            
            console.log(res.data);
        })  
   }
})

Server Side:
  var express = require('express');                   //using express package
  var bodyParser = require('body-parser');            // using body-parser package without this data will not work in body parameters
  var mongoose = require('mongoose');                 // using mongoose package
  var app = express();
  app.use(bodyParser.json());                         //access for json files
  app.post('/signin',function(req,res){
  console.log("Using Body Method")
  console.log(req.body);                  // access body information using req.body
  reg.find(req.body,function(err,data){       //request result will store in data parameter
    res.send(data);                             // response will send to client resquest
  });
})

A header is used give access control for client-side request and response.

For Example:

app.all('*',function(req,res,next){         //* represent access control to all app using methods.
 console.log("Allow header access");
 res.header('Access-Control-Allow-Origin', '*');     //origin access control
 res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE');  //method access control
 res.header('Access-Control-Allow-Headers', 'Content-Type');     // header access control (json, text/plain,..)
 next();
})

Database Technologies

MongoDB

MongoDB is an open-source document database that provides high performance, high availability, and automatic scaling. MongoDB obviates the need for an Object Relational Mapping (ORM) to facilitate development.

MongoDB

MongoDB is a document database with the scalability and flexibility that you want with the querying and indexing that you need

Nodejs

Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast and scalable network applications.

  • Using Mongoose we can connect MongoDB database and nodejs

Mongoose

It is the MongoDB framework which is used to connect nodejs with MongoDB database.

1) To install mongoose in nodejs use npm package: sh npm install mongoose

2) Link mongoose with Nodejs server: sh var mongoose = require('mongoose');

3) To connect a new MongoDB database: sh mongoose.connect('mongodb://localhost/database_name');

  • Create Model for collection

    • Model - Models are used to create the fields of the documents.

    Example :

    var reg = mongoose.model('register',    //collection name
    {
        field1 : {type:String},            //string value
        field2 : {type:Number},            //number value
        field3 : {type: Object},            //json object value
        field4 : {type: Date},            //datetime value
        field5 : {type: Boolean},        //Boolean value true/false
        field6 : {type: String, required: true},    // string value must enter the value
        field7 : {type: Number, default: 0},    //number value    with default of '0' value
        field8 : {type: String, enum: ["active", "inactive","block"], default: "inactive"},    //string value which contain in enum array
        field9 : {type: Schema.Types.ObjectId, ref: 'modelName'}                          //object_id  of reference of another model
    });
    
  • To store the values into the MongoDB server use the following syntax

    Syntax :

    objectname.save(function (err,data){
        //callback content
     });
    

    Example :

    var details = new reg(JSON_document);
    details.save(function (err,data) {    //insert to mongodb database
        if (err) {
            console.log('Error block');
        } else {
            console.log('Success block')
        }
    });
    
  • To Find data from the MongoDB database use the following query i) To get only one data from database use below syntax or example

    Syntax :

    reg.findOne({},function(err,data){
        //callback content
    });
    

    Example :

    reg.findOne({key : value},function(err,data){
        res.send(data);        // send response 
    });
    

    ii) To get multiple data as array from database use below syntax or example

    Syntax :

    reg.find({},function(err,data){
        //callback content
    });
    

    Example :

    reg.find({key : value},function(err,data){
        res.send(data);        // send response 
    });
    

To Update data in MongoDB database collection i) Normal update

Syntax :

reg.update(QUERY_VALUE, UPDATE_VALUE).exec(function(err,value){
    if(err){
        console.log("Error block")
    }else{
        console.log("Success block")
    }
});

Example :

reg.update({key:value}, {key1:value1,key2: value2}).exec(function(err,value){
    if(err){
        console.log("Error block")
    }else{
        console.log("Success block")
    }
});

ii) Find and update By default, findOneAndUpdate returns the original document. If you want it to return the modified document pass an options object { new: true } to the function

Syntax :

reg.findOneAndUpdate({FIND_VALUE},{UPDATE_VALUE},{OPTIONAL}, 
   function(err, content){
    if(!err){
        res.json({status: "success", data: value});
    }else{
        res.json({status:"error"});
    }
});

Example :

reg.findOneAndUpdate({key: value}, 
    {key1: value1, key2: value2}, {new: true}, function(err, doc){
    if(err){
        console.log("Error block");
    }else{
        console.log("Success block");
    }
});

NOTE: if optional json contain {new:true} - it will return updated document details if optional json not contain or contain {new:false} - if will return old value

To delete a data collection from mongodb database:

i) Normal delete data from collection:

Syntax :

reg.remove(QUERY_VALUE);

Example :

reg.remove({key:value});

ii) Find and remove data from collection: Syntax :

reg.find({QUERY_VALUE}).remove().exec();

Example :

reg.find({key: value}).remove().exec();

iii) Drop collection from mongodb database: Syntax :

Collection_name.drop();

Example :

reg.drop();

MySQL

MySQL is the most popular Open Source Relational SQL database management system. MySQL is one of the best RDBMS being used for developing web-based software applications.

RDBMS Terminology:

Before we proceed to explain MySQL database system, let’s revise few definitions related to the database.

Database: A database is a collection of tables, with related data.
Table: A table is a matrix with data. A table in a database looks like a simple spreadsheet.
Column: One column contains data of one and the same kind, for example, the column postcode.
Row: A row is a group of related data, for example the data of one subscription.
Primary Key: A primary key is unique. A key value can not occur twice in one table. With a key, you can find at most one row.
Foreign Key: A foreign key is a linking pin between two tables.

Installing Process

[root@host]# rpm -i MySQL-client-5.0.9-0.i386.rpm
[root@host]# rpm -i MySQL-level-5.0.9-0.i386.rpm
[root@host]# rpm -i MySQL-shared-5.0.9-0.i386.rpm 
[root@host]# rpm -i MySQL-bench-5.0.9-0.i386.rpm

Query in MySQL:

Basic Queries are

Create database

Creating separate space in MySQL.

Syntax:
create database <DB_Name>;

To use the created Database

Syntax:
use <DB_Name>;
Create table

Creating table in Database

Syntax:
create table <TableName>(Column1 Datatype,Column2 Datatype,...);
Insert table

Insert data in created table

Syntax:
insert into <TableName> 
values('string_data',integer_data,....);

Select table

To retrieve data from table

Syntax for access all Rows:

select * from <TableName>; (or) select 
<column_name> from <TableName>;
Syntax for access particular Rows:
select * from <TableName> where 
<column_name>='<user_data'>;

View table

Create view table form existing table.

Syntax:
create view <ViewTableName> as 
select <Column1>, <Column1> from <OldTableName>;

Delete table

To delete data or table

Syntax for delete all data:
 delete table <TableName>;
Syntax for delete particular data:
delete table <TableName> where <ColumnName>="<userdata>"

MySQL aggregate functions:

Avg

The AVG function calculates the average value of a set of values. It ignores NULL values in the calculation.

Syntax:
select AVG(<ColumnName) from <TableName>;

Count

The COUNT function returns the number of the rows in a table.

Syntax:
select COUNT(*) from <TableName> (or) select 
COUNT(<columnName>) from <TableName>;

Sum

The SUM function returns the sum of a set of values.

Syntax:
 select SUM(<ColumnName>) from <TableName>;

Min

The MIN function returns the minimum value in a set of values.

Syntax:
 select MIN(<ColumnName>) from <TableName>;

Max

The MAX function returns the maximum value in a set of values.

Syntax:
   select MAX(<ColumnName>) from <TableName>;

MySQL with node.js

Example:
nodejs with MySQL
var express    = require("express");   
var mysql  = require('mysql');  
var connection = mysql.createConnection({   
    host     : 'localhost',       
    user     : 'root',                
    password : '',                
    database : 'address_book'         
}); 
var app = express();
connection.connect(function(err){   
   if(!err) {
      console.log("Database is connected ... nn");
   } else {
      console.log("Error connecting database ... nn");   
  }
}); app.get("/",function(req,res){ var query="select * from register where urname='"+req.body.urname+"' and pw='"+req.body.pw+"'"; connection.query(query, function(err, rows, fields) { connection.end(); if (!err) console.log('The solution is: ', rows); else console.log('Error while performing Query.'); }); });
app.get("/",function(req,res){ connection.query('insert into user values('+1+','+sathiya+','+sathiya@gmail.com+','+sathiya2901+')', function(err, rows, fields) { connection.end(); if (!err) console.log('The solution is: ', rows); else console.log('Error while performing Query.'); }); }); app.listen(3000);

Grunt Commands

Grunt is a Task Runner which is used to automate the process in the java script. To run a grunt command type grunt task name in the cmd.

Syntax to Run a Task : grunt Taskname.

Example

//Tasks:
grunt.loadNpmTasks('grunt-bower-concat');
grunt.loadNpmTasks('grunt-bower-install');
grunt.registerTask('builddev', 
['clean:dev','bower_concat:dev', 'concat:devlibcss', 'copy:dev', 'watch:dev']);
  grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-stripcomments');
grunt.loadNpmTasks('grunt-htmlclean');

The above example is the tasks for the grunt. This will automatically run the tasks when required.

GIT (Version Control)

Git is the most popular version control system as we all know all and used to track and share code between team members but here is our swiss army knife of git commands useful whenever you want them available handy

git config Sets configuration values for your user name, email, gpg key, preferred diff algorithm, file formats and more.

git init Initializes a git repository – creates the initial ‘.git’ directory in a new or in an existing project.

git clone Makes a Git repository copy from a remote source. Also adds the original location as a remote so you can fetch from it again and push it if you have permissions.

git add Adds files changes in your working directory to your index.

git rm Removes files from your index and your working directory so they will not be tracked.

git commit Takes all of the changes written in the index, creates a new commit object pointing to it and sets the branch to point to that new commit.

git merge Merges one or more branches into your current branch and automatically creates a new commit if there are no conflicts.

git reset Resets your index and working directory to the state of your last commit.

git stash Temporarily saves changes that you don’t want to commit immediately. You can apply the changes later.

git tag Tags a specific commit with a simple, human-readable handle that never moves.

git remote Shows all the remote versions of your repository.

git log Shows a listing of commits on a branch including the corresponding details.

git show Shows information about a git object.

git ls-tree Shows a tree object, including the mode and the name of each item and the SHA-1 value of the blob or the tree that it points to.

Configure Nginx

Nginx is a Web Server.The Nginx is an open source web server. It can act as a reverse proxy for the Http, Https, etc.Here we are mainly using it to configure the Local host.

Run Project

How to configure Nginx :

Download and install Nginx from their official website http://nginx.org/en/download.html Extract the zip file into any drive using WinRAR. Locate the extracted folder, C:\nginx-1.8.0\nginx-1.8.0\conf (In here, the Nginx is installed into the C drive) Then open nginx.config file from the list using notepad. Include the location of the current working directory. This points the nginx server to acts as a Local host. Make other location as comments by adding # previously to the location path.

Nginx Main Config Sample file :

1)Modify your main nginx.conf file (nginx/conf/nginx.conf)

#user  nobody;
worker_processes  1;
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
#pid        logs/nginx.pid;
events {
  worker_connections  1024;    
}
http {
include mime.types; default_type application/octet-stream; include C:/nginx/conf/sites-enabled/*.conf; }

2)open directory path C:/nginx/conf/sites-enabled create file localhost.conf file

** localhost.conf **

server {

    listen  80;
    server_name  localhost;

    charset koi8-r;

    access_log  logs/localhost.access.log;

    location / {
         root C:\Users\aaa\Documents\clofus-enterprise; # Your Project Directory (absolute Path)
         try_files $uri $uri/ /index.html =404;
    }
}

3)To Run Multiple hosts, copy the above code and create file as example.conf and change your system host file

For windows :

Download host File Editor https://hostsfileeditor.codeplex.com and open host file editor and add IP address pointing to 127.0.0.1 to your host name

For Linux:

Open etc/hosts and add IP address pointing to 127.0.0.1 to your host name

4)Finally Restart Nginx

For Example :

root C:\Users\Dell\Desktop\AngularJs; (AngularJs is the folder for the nginx localhost).

Note : Include # before the C:\Users\Dell\Desktop\AngularJs; to make this line as a comment.

How to Enable HTML Mode In nginx ?

Include try_files $uri $uri/ /index.html =404; line below to the localhost path. This will try to find and open the index.html file inside the localhost path and if the file is not found it will display Error 404 file not Found.

Note : The default Ip address for the local host is 127.0.0.1.

How to change the Default server Name :

If you wish to change your server name from the default (By default the server name is Localhost) Change your preferred name instead of localhost in server_name localhost; (Replace Localhost by your preferred name).

Configure Host file :

Download and install host file editor from https://hostsfileeditor.codeplex.com/ edit and change the default Ip address of the local host or any other Ip if you wish to.

Installation :

1.Download nginx stable version. (link:http://nginx.org/en/download.html)
2.Move the zip Ng-inx folder to location *C:*
3.Unzip it
4.open conf folder and open nginx.conf file
5.change location / { root C:\Users\clofus\Documents\projects\clofus-dev- app\clofus-dev-app; index index.html index.htm; } under server
6.Enter localhost in the address bar of browser it shows the index page

To Configure nginx in Linux

1.Open command window in Linux
2.Enter path as “cd /etc/nginx/ sites-enabled/”
3.To Edit default file enter “gksudo gedit default” in command
4.Default file will open in edit window then add the current working directory under location
5.Then restart the nginx using command “sudo service nginx restart”, Now localhost will run as internal server

You can setup and run project successfully once you configured the nginx, then you can check the project by opening it on browsers

Identify bugs using dev tools

The Chrome Developer Tools (Devtools for short), are a set of web authoring and debugging tools built into Google Chrome. The Devtools provide web developers deep access into the internals of the browser and their web application. Use the Devtools to efficiently track down layout issues, set JavaScript breakpoints, and get insights for code optimization Overall, there are eight main groups of tools available view Developer Tools:

  • Elements
  • Resources
  • Network
  • Sources
  • Timeline
  • Profiles
  • Audits
  • Console

Elements

The elements consist of the HTML code corresponding to the document and it also has the CSS code on the right side which is very much helpful for the front-end designers to efficiently design the webpage.

Resources

The resources section consists of the local storage, Whenever the browser refreshes the data stored will be replaced with new data from the server. In order to use the data for further processing, they can be stored in the local storage as temporary files.

Network

In Network section used to view the network calls between the server and the client. It displays every time when the network call initiated between the server and the client.

Source

Source section used to view the Source files of the corresponding files. This section allows specifically set the breakpoints between the codes to run particular part and verify for errors. 

Profiles

The Profiles panel lets you profile the execution time and memory usage of a web app or page. The Profiles panel includes two profilers: a CPU profiler and a Heap Profiler. These help you to understand where resources are being spent, and so help you to optimize your code:

  • The CPU profiler shows where execution time is spent in your page’s JavaScript functions.
  • The Heap profiler shows memory distribution by your page’s JavaScript objects and related DOM nodes.
  • The CSS Selector profiler records the aggregate time spent matching selectors to elements in the DOM tree. This time is also captured within “Style Recalculation” Timeline events.

Console

The console section consists of the error logs and it acts as an output screen to check the printed values of the variables.

That all! We hope you have learned many things about AngularJS, NodeJS and other technologies that cover in this article.

If you have any clarification and suggestions don’t hesitate to contact us via support@clofus.com

Contact Us

Just leave your email and our support team will help you