What is Jenkins?

During the earlier days of my career at Vmoksha, I have been assigned to set up Jenkins for an Android project development. With a mere knowledge of Java Software Development in those days, it was quite a challenge for me. Initially, I tried to understand what Jenkins is, why it is used and how it helps our android projects. I read the Wikipedia article of Jenkins but couldn’t understand much though. Then, I have done a thorough research to understand about Jenkins.

I know you are also searching for Jenkins and landed on this page. I am pretty sure that after reading this Jenkins blog, you will comprehend Jenkins better.

Introduction

Jenkins is a Continuous Integration (CI) server or tool which is written in java. It provides Continuous Integration services for software development, which can be started via command line or web application server. And also, it is happy to know that Jenkins is free software to download and install.

Continuous Integration

Before going in details to Jenkins, let me tell you what Continuous Integration (CI) is.

Continuous Integration (CI) is a development practice that requires developers to integrate code into a shared repository several times a day. It is a process of running your tests on a non-developer (say testers) machine automatically when someone pushes new code into the source repository. The below diagram shows the CI workflow.

Jenkins Advantages

In this type of procedure, there is a huge advantage of knowing whether all the jobs (configured project in Jenkins) work properly or not. And also we can get fast feedback. The fast feedback is very important so you will always know, right after you broke the build. In the console, you will get the detailed log messages. From this, you will get to know what the reason for job fail was and you can also get to know how you can revert it back. Using an Artifact Repository in CI server will successfully deploy the built snapshot and release which is available to other developers.

If jobs run occasionally then the problem is that since the last time there will be a lot of code changes might have happened. So it will be hard to figure out which changes introduced the problem. But when it is set to run automatically on every code push then it is always easy to know what and who introduced the problem.

Some of the attractive reasons why you need automate build testing and integration are:

  • Developer time is concentrated on work that matters:  Most of the work like integration and testing is managed by automated build and testing systems. So the developer’s time is saved without wasting on large-scale error-ridden integrations.
  • Software quality is made better: Issues are detected and resolved almost right away which keeps the software in a state where it can be released at any time safely.
  • Makes development faster: Most of the integration work is automated. Hence integration issues are less. This saves both time and money over the lifespan of a project.

Continuous Build System can include tools like Jenkins, Bamboo, and Cruise Control, etc. Bamboo has better UX support but it is not a free tool. Jenkins is an open source tool, easier to setup and configure and also has a very active plug-in development community which makes it favored. Now, let us dive into the Jenkins tool.

Jenkins History

Jenkins was originally developed as the Hudson project. Hudson’s creation started in summer of 2004 at Sun Microsystems. It was first released in java.net in Feb. 2005.

During November 2010, an issue arose in the Hudson community with respect to the infrastructure used, which grew to encompass questions over the stewardship and control by Oracle. Negotiations between the principal project contributors and Oracle took place, and although there were many areas of the agreement a key sticking point was the trademarked name “Hudson” after Oracle claimed the right to the name and applied for a trademark in December 2010. As a result, on January 11, 2011, a call for votes was made to change the project name from “Hudson” to “Jenkins”. The proposal was overwhelmingly approved by community vote on January 29, 2011, creating the Jenkins project.

On February 1, 2011, Oracle said that they intended to continue development of Hudson, and considered Jenkins a fork rather than a rename. Jenkins and Hudson, therefore, continue as two independent projects, each claiming the other is the fork. As of December 2013, the Jenkins organization on GitHub had 567 project members and around 1,100 public repositories, compared with Hudson’s 32 project members and 17 public repositories.

Continuous Integration with Jenkins

Jenkins tool is heavily used in CI which allows code to build, deployed and tested automatically.

Jenkins Continuous Integration

Let us depict a scenario where the complete source code of the application was built and then deployed on the test server for testing. It sounds like a robust way to develop software, but this method has many weaknesses. They are,

  • Developers have to pause till the complete software is developed for the test results.
  • There is a huge possibility that the test results might show lot many bugs. This makes developers be in a complex situation to find the root cause of those bugs since they have to check the entire source code of the application.
  • Delivery process of software is slowed down.
  • Continuous feedback referring to things like coding or architectural issues, build failures, test condition and file release uploads were missing so that the quality of software can go down.
  • The whole process was manual which increments the risk of repeated failure.

It is obvious from the above-stated problems that along with slow software delivery process, the quality of software also went down. This leads to customer unhappiness. So, to overcome such confusion there was a crucial demand for a system to exist where developers can gradually trigger a build and test for each and every change made in the source code. Therefore, Jenkins tool is used in CI. It is the most mature CI tool possible. Now let us see how Continuous Integration with Jenkins crushes the above shortcomings.

For software development, we can hook it up with most of the repositories like SVN, Git, Mercurial, etc. Jenkins has lots of plugins that are available freely. These plugins help to integrate with various software tools for better convenience.

One really nice thing about Jenkins is, build configuration files will be on disk which makes massive build cloning and reconfiguring easy.

Advantages of Jenkins

  • Jenkins is an open source tool with much support from its community.
  • Installation is easier.
  • It has more than 1000 plug-in to make the work easier.
  • It is easy to create new Jenkins plugin if one is not available.
  • It is a tool which is written in Java. Hence it can be portable to almost all major platforms.

The diagram below depicts that Jenkins is integrating various DevOps stages:

 Jenkins CI

Once the project is configured in Jenkins then all future builds are automated. It has basic reporting features like status and weather reports (job health).

j3

Most companies who handle continuous integration use their individual cloud-based continuous integration servers built on applications like Jenkins. With Jenkins, organizations can advance the software development process through automation. So overall to say, Jenkins integrates development life-cycle processes of all kinds which include building, documenting, testing, packaging, staging, deploying, static analysis and plenty more.

FacebookTwitterGoogle+Share
Material Design for Android

Introduction

In 2014, Google developed a new visual design language called Material Design for Android Lollipop and higher versions. The visual specifics in material design are amusing, and the material objects have x, y and z dimensions, which allows you to create an incredible 3D world. Material design is not about how to use dazzling colors, best images, and the elevation of the object; it is about how we create the amazing experience to users with the positive brand reality.

Google has proposed some rules and regulations while adding the material design to application to improvise its standards. Instead of using a palette selection tool that pulls colors to the content of an app, using of material design makes the Android application’s graphic layout more simplified and standard format. To be noted, the material design is not only being used for rectangular or tablet screen; it should also be used for circular watch screen, etc. So if we create a grid, then it precepts all the spacing and should match to all the types of screens, which is a must for apps that are identified everywhere.

Android Material Design

Overall to say, material design is straightforward, clear and brilliant. Because of these dazzling features, it has become an imperative for a broad number of gadgets than any other UI in history.

Goals of Material Design

  • To design the application UI like a magical paper. Let’s say, something that appears like real, appreciable objects.
  • Animations have been pulled to make the experience more lively by safeguarding the maximum amount of content is always visible.
  • With Material Design, Google also determined to robotize the experience for users.
  • Mobile rules are fundamental but touch, voice, mouse, and keyboard are all excellent input methods.

The materials take energy from the users, from their fingers, from their mouse click, their touch and use it to transform and animate.

In material design, software elements are treated as real things. For example, take paper and ink. Every pixel drawn in an application is similar to a dot of ink on a piece of paper. Assume that paper is plain and doesn’t have any color whereas the ink can be of any color. So the content color of a paper depends on the color of the ink. Likewise in Android application, it can be a menu, button or image.

And also the paper can be of any size. It might fill the whole screen, or it might even shrink to small square or round shape. So the ink will not have any restrictions. It will be throughout the paper. It just has to fit inside the paper to be visible. The papers can change its shape, split, move, join and re-size. Likewise, every application made in material design will have all these characteristics.

Principles of Material Design

1.  Material is the metaphor

A material metaphor is a bring together theory of a rationalized space and a system of motion. A metaphor is a figure of speech that specifies flashy effect to one thing by observing another thing. It is open to imagination and magic.

Material Design Principles

2. Surfaces are spontaneous and natural

Surfaces and edges provide visual hints that are familiarized in our knowledge of reality. The use of ordinary material attributes conveys to a primal part of our brain and advice us to quickly understand its need.

Material Design Surfaces

3. Dimensionality supports interaction

The basics of light, surface, and movement are keys to transfer how objects cooperate. Sensible lighting shows bond, divides space, and demonstrate moving parts.

Material Design Dimensionality

4.  One flexible design

A single underlying design system establishes interactions and space. Each device follows a different view of the same fundamental system. Each view is made custom-fit to the size and interaction appropriate for that device. Colors, iconography, hierarchy, and spatial relationships stand constantly.

Material Design Flexible Design

5.  Content is bold, graphic, and wilful

Bold content provides grouping, meaning, and focus. Cautious color choices, edge-to-edge imagery, and intentional white space create captivation and clarity.

Material Design

6.  Color, surface, and iconography highlights actions

User action is all about the significance of experience design. Color in material design is inspired by bold complexion, deep shadows, and brilliant highlights. The whole design is reconstructed by the change of points in the immediate actions.

Android Material Design Color

7.  Users introduce alteration/change

Alterations in the UI extract their energy from user actions. Motion that forces from touch respects and emphasizes the user as the best mover. It means that the widgets or material takes the energy from users’ fingers during the mouse click or on touch and that energy is used to animate to show it as reality.

Android Design User Alteration

8.  Animation is choreographed on a common step

All action takes place in one surrounding. When objects are restructured and transformed, the user will be given with the experience without collapsing the continuity of it.

Android Material Design Animation

9.  Motion provides meaning

Motion is meaningful and convenient. It helps to focus attention and preserves continuity. The following elements assists in material design for apps of Android version 5.0 (Lollipop) or higher.

Android Material Design Motion

Themes

The material theme is defined as,

@android:style/Theme.Material (dark version)

@android:style/Theme.Material.Light (light version)

@android:style/Theme.Material.Light.DarkActionBar

Android Material Design ThemesAndroid Material Design

 

To use the material theme in your apps, customize the color palette as shown below,

<resources>
<!-- inherit from the material theme -->
<style name="AppTheme" parent="android:Theme.Material">
<!-- Main theme colors -->
<!-- your app branding color for the app bar -->
<item name="android:colorPrimary">@color/primary</item>
<!-- darker variant for the status bar and contextual app bars -->
<item name="android:colorPrimaryDark">@color/primary_dark</item>
<!-- theme UI controls like checkboxes and text fields -->
<item name="android:colorAccent">@color/accent</item>
</style>
</resources>

The following example describes how to add material design to a button

styles.xml

<resources>
<!-- Base application theme. -->
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<!-- Customize your theme here. -->
<style name="MyButton" parent="Theme.AppCompat.Light">
<item name="colorControlHighlight">@color/calbutton_focus</item>
<item name="colorButtonNormal">@color/background_color</item>
</style>
</resources>

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height=" match_parent ">

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="@style/MyButton"
android:layout_gravity="center"
android:text="Click"
android:textAllCaps="true"
android:textColor="@color/white"/>

</LinearLayout>

Cards and Lists

Cards and Lists are the two new widgets in Android with material design styles and animation. To create cards and Lists, RecyclerView can be used, which is introduced from Android version 5.0 (Lollipop). It is an adoption of ListView, which supports various layout types and contributes performance improvements. Part of data can be shown inside the card with a constant look over apps in CardView.

An example shown below demonstrates how to add a CardView in your layout.

 

build.gradle

dependencies {
// CardView
compile 'com.android.support:cardview-v7:23.3.+'
}

activity_card.xml

<android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="200dp"
android:layout_height="200dp"
card_view:cardCornerRadius="3dp">
...
</android.support.v7.widget.CardView>

 

To use RecyclerView widget in your layout, necessary attribute is shown below,

build.gradle

dependencies {
// RecyclerView
compile 'com.android.support:recyclerview-v7:23.1.1
}

activity_main.xml

<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:scrollbars="vertical" />

Android Material Design Cards and Lists

Floating Action Button

Another interesting widget introduced in material design is floating action button.  This button floats on UI in a circular shape with an action attached to it. By default, its behavior is to animate on the screen as an expanding piece of material.

We can also provide shadows and elevation to the buttons. The distance between surfaces and the depth of its shadow signifies elevation. To set the elevation of a view, use the android:elevation attribute in your layouts. The bounds of a view’s background drawable determine the default shape of its shadow.

In addition to the X and Y properties, views in Android material design now have a Z property. This new property serves as the elevation of a view, which concludes the size of the shadow i.e., a view with greater Z values launches bigger shadows.

< android.support.design.widget.FloatingActionButton
android:id=”@+id/my_floatbutton”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android: layout_gravity="top|end”
android: src="@android:drawable/ic_add”
android:background=”@color/white”
android:elevation="5dp" />

14

build.gradle

dependencies{
compile 'com.android.support:appcompat-v7:23.1.1'
compile 'com.android.support:design:23.1.1'
}

activity_main.xml

<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android: layout_width="wrap_content"
android: layout_height="wrap_content"
android: layout_gravity="bottom|end" // position the floating button
android: layout_margin="@dimen/fab_margin"
android: src="@android:drawable/ic_dialog_email"/>

You can also define own background color for floating button using app:backgroundTint. The size of the button can also be defined by using app:fabSize attribute.

Floating Android Material Design

CollapsingToolbarLayout

A new widget called CollapsingToolbarLayout was also introduced from Android version 5.0 (Lollipop). This comes with an amazing animation; whenever a user scrolls up the control provides the fabulous animating effect. According to the Android documentation, CollapsingToolbarLayout is a wrapper for Toolbar which implements a collapsing app bar. It makes the header image collapse into the Toolbar, adjusting its title size and it is designed to be used as a direct child of an AppBarLayout.

To add CollapsingToolbarLayout to your layout, see the following,

build.gradle

dependencies{
compile 'com.android.support:appcompat-v7:23.1.1'
compile 'com.android.support:design:23.1.1'
}

activity_main.xml

<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
.....
.....
</android.support.design.widget.CollapsingToolbarLayout>

Android Material Design Collapse

Conclusion

Google developed material design to bring together the user experience from different Google platforms. Totally, material design made the user interaction smooth, simpler and greater intuitive. When you think about material design, it has so many technologies, which will only create the impression for users while using apps during interactions. The physical world is the very big part of the material design. So all in all, what do you think of Material Design in Android? Don’t you think it’s the best part to unite and enhance the user experience while using the Android application?

Elastic Search Query to Retrieve Records from Elastic Server

Elastic Search is an open-source search tool that is built on Lucene but natively it is JSON + RESTful. Elastic Search provides a JSON-style domain-specific language which can be used to execute queries, and is referred as the Query-DSL.

The search API allows us to execute a search query and get back search hits that match the query. Elastic search will fetch the records at lightning speed because of schema-less table structure. The query can either be provided using a simple query string as a parameter or using a request body.

Here I am showing how to write queries for Elastic search with some good set of standard queries as an example.

 

Basic Queries Using Only the Query String

Basic queries can be done using only query string parameters in the URL. For example, the following searches for the text ‘test’ in any field in any document and return at most 5 results:
{ElasticURL}/_search?size=5&q=test

 

Full Query API

Full Queries are powerful and complex ones which include queries that involve in faceting and statistical operations and should use the full elastic search query language and API. The queries are written as JSON structure in the query language and sent to the query endpoint (query language details are given below). There are two options to send a query to the search endpoint:

1. Either as the value of a source query parameter e.g. :

{ElasticURL}/_search?source={Query as JSON}

2. Or in the request body, e.g.,

{
     "query" : {
         "term" : { "PropertyName": "test" }
     }
 }

From & Size in Query

Pagination of results can be done by using the ‘from’ and ‘size’ parameters. The ‘from’ parameter defines the offset from the first result we want to fetch. The ‘size’ parameter allows us to configure the maximum amount of hits to be returned.

{
     "size" : 10,
     "from" : 0,
     "query" : {}
 }

Sample response from Elastic server

{
  "took": 7,
  "timed_out": false,
  "_shards": {
    "total": 5,
    "successful": 5,
    "failed": 0
  },
  "hits": {
    "total": 4,
    "max_score": 4.5618434,
    "hits": [
      {
        "_index": "ph_property",
        "_type": "property",
        "_id": "10322",
        "_score": 4.5618434,
        "_source": {
          "PropertyID": 10322,
          "PropertyCode": "VTELD21NGXKK3V02GJRLPRROB",
          "BuilderCode": "BY67DP",
          "BuilderName": "Janet Spencer",
          "PropertyName": "AWS test",
          "BHK": "",
          "PropertyTypeCode": "DO20ET",
          "PropertyType": "Residential Land"
        }
      }
    ]
  }
}

Query DSL Examples

1. Match all/Find Everything

{
     "query" : {
         "match_all" : { }
     }
 }

2. Filter on one field

{
     "query" : {
         "term" : { field-name: value }
     }
 }

3. Match with a field

{
  "query": {
    "bool": {
      "must": [
        {
          "match": {
            "field": "value"
          }
        }
      ]
    }
  }
}

4. Multi-match query builds on the match query to allow multi-field queries

{
  "multi_match" : {
    "query":    "this is a test",
    "fields": [ "subject", "message" ]
  }
}

5. Find documents which consist the exact term specified in the field specified

{
  "query": {
    "bool": {
      "should": [
        {
          "term": {
            "status": {
              "value": "urgent"
            }
          }
        },
        {
          "term": {
            "status": "normal"
          }
        }
      ]
    }
  }
}

6. Find documents, where the field specified consist values (strings, numbers, or dates) in the range specified

{
  "size": "9",
  "query": {
    "bool": {
      "must": [
        {
          "range": {
            "BudgetFrom": {
              "gte": 50000
            }
          }
        },
        {
          "range": {
            "BudgetTo": {
              "lte": 2231346
            }
          }
        }
      ]
    }
  }
}

7. The filtered query is used to combine a query that is used for scoring with another query that is used for filtering the result set.

{
  "filtered": {
    "query": {
      "match": { "tweet": "full text search" }
    },
    "filter": {
      "range": { "created": { "gte": "now-1d/d" }}
    }
  }
}

8. Filters documents that only have the provided ids.

{
    "ids" : {
        "type" : "my_type",
        "values" : ["1", "4", "100"]
    }
}

9. Filters documents that are matching the provided document/mapping type.

{
    "type" : {
        "value" : "my_type"
    }
}

10. Filter on two fields

{
    "query": {
        "filtered": {
            "query": {
                "match_all": {}
            },
            "filter": {
                "and": [
                    {
                        "range" : {
                            "b" : { 
                                "from" : 4, 
                                "to" : "8"
                            }
                        },
                    },
                    {
                        "term": {
                            "a": "john"
                        }
                    }
                ]
            }
        }
    }
}

An actual example with some search parameter:

{
  "from": "0",
  "size": "9",
  "query": {
    "bool": {
      "must": [
        {
          "match": {
            "ProjectTypeCode": "EQ92JK"
          }
        },
        {
          "match": {
            "PropertyStatusCode": "AS82IZ"
          }
        },
        {
          "match": {
            "PropertyTypeCode": "SJ85GF"
          }
        },
        {
          "match": {
            "MicroMarketCode": "DX60DL"
          }
        },
        {
          "range": {
            "SizeFrom": {
              "gte": 1000
            }
          }
        },
        {
          "range": {
            "BudgetFrom": {
              "gte": 50000
            }
          }
        },
        {
          "range": {
            "BudgetTo": {
              "lte": 2231346
            }
          }
        },
        {
          "range": {
            "PossessionDate": {
              "gte": "2016-01-01"
            }
          }
        },
        {
          "match": {
            "City": "Bengaluru"
          }
        }
      ]
    }
  }
}

Conclusion

These are the few frequently used queries to retrieve the data from Elastic server. However Elastic Search response can be retrieved using various other queries like Geo queries, joining queries, compound queries, specialized queries, etc. We can even join multiple queries to get the hits from elastic server. The response we get from Elastic Server is very fast compared to MySQL/Sql Server queries and hence it is now being used widely.

WebComponent Vs Angular Formly – Issues in Displaying Forms in Firefox and Safari Browsers

I would like to share a quite interesting stuff with you pertaining to Angular Formly. We at Vmoksha Technologies have set our goal to write optimized code lines with quality. To attain our goal, we as a team, lean towards using new techniques that are contemporary to today’s software development.

One such framework is Angular.js, a quite interesting framework, which we have used in our recent web projects. As an extension to it, we went ahead exploring the feature that lets you generate the HTML forms – Angular-Formly.

 

Smooth Sail, until you hit rock bottom!

Yes. During the testing phase with multiple browsers and their versions, our quality control team figured out certain browsers such as FIREFOX and SAFARI, which won’t display the HTML forms generated by Angular-Formly. We could have just ignored this and continued with our efforts putting up a disclaimer stating that the project is supported by certain browsers and versions.

But, that doesn’t support the objective of the project. In Vmoksha, “Failure is not an option” (NASA’s mission statement) is the mantra, and we wanted to get this resolved. Questions raised, discussions held to figure out the root cause of the issue. As always, we approached Guru Google as well as developers in multiple forums, for a solution. But, Lady Luck didn’t turn her face towards us for more than a week.

 

Whether the culprit is Angular-Formly or Browsers in scope?

With no potential hint about the root cause as well as a solution, we could think of one possibility, and that is, “Resolve it yourself”;

“EUREKA!!! WE DID IT”

Yes, we found it, fixed it and tested it. FIREFOX, SAFARI – OK.

I could hear your mind; tell us the secret, buddy. I know you are thinking about -

What was the root cause? How did you resolve the issue?

Read on, as I keep explaining the data points behind using Angular-Formly, identifying the root cause and providing the fix.

 

Why we used Angular-Formly?

Even an expert HTML developer would agree that the process of repeating the same block of html code is really frustrating and non-contemporary.

“Angular-Formly is a JavaScript Powered forms for AngularJS; it lets you generate html forms automatically without much of an effort.”

Angular-Formly does just that, it reduces the effort of writing HTML forms and delivers it the way we want it. Customising Formly might seem difficult, but once you achieve it, you can reuse as long as you wish to use it. It does take few parameters and draws the HTML form for you on screen.

 

How did we resolve the browser issue?

The below images depict the scenarios of our implementation of Angular-Formly forms in different browsers:

In Chrome:

Angular formly

In Firefox and Safari:

Angular formly

Our approach to resolving the issue kick-started with the following questions:

  1. Is it the CSS that we are using in the project?
  2. Could it be a problem with the version of Angular-Formly used in the project?
  3. Maybe Angular-Formly doesn’t support FireFox and Safari. Did we check it?
  4. An overlap of a JS or CSS is possible. Who knows?

The last question ignited a thought in our minds. Eventually, we nailed down the root cause of the issue as we kept analysing each JS file referred to the project. We found something striking – WebComponents.js and ran the project excluding the component. To our astonishment, the Angular forms displayed seamlessly in all browsers including FIREFOX and SAFARI. So, we extended our research on the use of the component, its source, and impact.

 

Root Cause of the issue

In our project, we have a placeholder to show maps, and for that very reason, we had Google-Map bower component installed with a list of dependencies.

 
  "dependencies":{    
            "polymer":"Polymer/polymer#^1.2.3",  
            "google-apis":"GoogleWebComponents/google-apis#^1.1.1", 
            "iron-resizable-behavior":"PolymerElements/iron-resizable-behavior#^1.0.0",
	    "iron-selector":"PolymerElements/iron-selector#^1.0.5"   
	      }

Subsequently, the Polymer dependency bower components got installed, and one such dependency file is the “WebComponents.js” [an optional dependency item]

 "repository":{          
  	"type": "git",              
        "url": "https://github.com/Polymer/polymer.git"   
  	      },      
 "dependencies":{   
  	"webcomponentsjs":"^0.7.20"           
  		 },           
 "devDependencies":{     
        "web-component-tester": "*",                         
        "iron-component-page": "polymerElements/iron-component-page#^1.1.6"          
            }

 

About Webcomponent.js

WebComponents.js is a set of polyfills that is built on top of the Web Components specifications. Web components assist you in creating your own custom HTML elements. Instead of loading your sites with verbose mark-ups, repetitive code, and long scripts you wrap up everything into neat little custom HTML elements.

 

Final Fix

Note: The WebComponents.js polyfill layer is no longer needed for browsers that fully implement the Web
Components APIs, such as Chrome 36+

So, we excluded the WebComponent.js script from the project. Since then the Angular-Formly form is working seamlessly in all the modern browsers.

Hope, this write up helped you to learn something out of our experience and also, to resolve the issue.

Thanks, for reading our blog. Watch this space as we continue our journey in building robust applications with an objective and quality.

Virtual Hosting Using Nginx Server

Nginx is a web server, which can also act as a reverse proxy, HTTP server, IMAP/POP3 proxy server as well as a load balancer. It is well known for its stability, high performance, simple configuration, rich feature set, and low resource consumption. So, we can deploy our web applications like HTML pages and PHP-related applications into this server directly.

Let’s see How to Configure the Nginx as a Reverse Proxy/Virtual Hosting Purpose

#1. Deploy the nginx application in any server (I am taking Ubuntu System).

#2. Choose any domain/sub-domain name, and do the C-name configuring that domain name to nginx server (Ubuntu System Port 80).

Note: Port 80 is the default port for nginx. If you change the port, you need to map the C-name according to that.

#3. Once C-name and nginx applications are ready, create a conf.d folder inside the nginx.

#4. Create a configuration file with the name of domain/sub-domain along with the .conf extension.

For example, if you want the application should work on ‘abc.mycompany.com,’ you have to create a configuration file with the name of ‘abc.mycompany.com.conf,’ and copy the below-given code and save the file.

   server {

      listen 80;

      server_name abc.mycompany.com;

   location / {

      proxy_pass http://10.10.10.10:portnumber/;

      proxy_http_version 1.1;

      proxy_read_timeout 300000;

      proxy_set_header Upgrade $http_upgrade;

      proxy_set_header Connection 'upgrade';

      proxy_set_header Host $host;

      proxy_cache_bypass $http_upgrade;

     }

   }

#5. Restart/reload the Nginx.

Now your application will work with the domain name based on your configuration.

 

Glossary

Listen – Nginx port listener

Server_name – Domain name

Proxy_pass – Actual running application URL (domain name indirectly calls this URL)

Proxy_read_timeout – For long connection establishment (optional)

Nginx default connection timeout – 600 m.sec

Steps to Build, Run and Manage Docker

Docker is a software container that automates the applications deployment while providing an additional layer of OS-level virtualization automation on Linux. These docker containers are created using docker images, either by executing commands manually or automatically through Dockerfiles.

According to an industry analyst research, Docker is an efficient tool that packs an application and its dependencies in a virtual container that can operate on any Linux server. This process facilitates the flexibility and portability where the application is running.

Docker avoids the burden of maintaining virtual machine by allowing independent containers to operate within a single Linux instance, using Linux kernel resource isolation features such as kernel namespaces and cgroups.

How Docker is different from Virtual Machines?

Though resource isolation and allocation benefits of docker containers are similar to virtual machines, the different architectural approach of containers makes them more portable and efficient.

Containers-vs-Virtual-Machines

Advantages of Docker

  • Easy to move apps between cloud platforms
  • Distribute and share content
  • Accelerate developer onboarding
  • Empower developer creativity
  • Eliminate environment inconsistencies
  • Ship software faster
  • Easy to scale an application
  • Remediate issues efficiently

Installing Docker on Ubuntu

Update the droplet

sudo aptitude    update
sudo aptitude -y upgrade

Make sure the availability of aufs support

sudo aptitude install linux-image-extra-`uname -r`

For package verification, add docker repository key to apt-key

sudo sh -c "wget -qO- https://get.docker.io/gpg | apt-key add -"

Add the docker repository to aptitude sources

sudo sh -c "echo deb http://get.docker.io/ubuntu docker main\

> /etc/apt/sources.list.d/docker.list"

Update the repository with the new addition

sudo aptitude    update

Finally, download and install docker

sudo aptitude install lxc-docker

 

Proxy in Docker

Edit /etc/defaults/docker and add the following lines:

export http_proxy='http://proxy.vmoksha.com:8080'

After adding, restart the docker using the following comment:

$ sudo service docker restart

This will allow the docker daemon to pull images from central registry. However, to configure the proxy in Dockerfile (while using apt-get to install packages), you need to declare the comment there also.

Add the following lines at the top of your Dockerfile:

ENV http_proxy 'http://proxy.vmoksha.com:8080'

ENV https_proxy 'http://proxy.vmoksha.com:8080'

ENV HTTP_PROXY 'http://proxy.vmoksha.com:8080'

ENV HTTPS_PROXY 'http://proxy.vmoksha.com:8080'

With these settings, your container should now build using the proxy to access the
outside world

Basic Docker Commands

Running the docker in daemon and CLI Usage

Upon installation, the docker daemon that is running in the background will be ready to accept commands sent by the docker CLI. During certain situations like running a docker manually, it is necessary to follow the below guidelines:

Run the docker in daemon mode

sudo docker -d &

Docker CLI Usage

sudo docker [option] [command] [arguments]

Commands List

Check out the provided list of docker commands:

attach         Attach to a running container
build          Build a container from a Dockerfile
commit         Create a new image from a container's changes
cp             Copy files/folders from the containers filesystem to the host path
diff           Inspect changes on a container's filesystem
events         Get real time events from the server
export         Stream the contents of a container as a tar archive
history        Show the history of an image
images         List images
import         Create a new filesystem image from the contents of a tarball
info           Display system-wide information
insert         Insert a file in an image
inspect        Return low-level information on a container
kill           Kill a running container
load           Load an image from a tar archive
login          Register or Login to the docker registry server
logs           Fetch the logs of a container
port           Lookup the public-facing port which is NAT-ed to PRIVATE_PORT
ps             List containers
pull           Pull an image or a repository from the docker registry server
push           Push an image or a repository to the docker registry server
restart        Restart a running container
rm             Remove one or more containers
rmi            Remove one or more images
run            Run a command in a new container
save           Save an image to a tar archive
search         Search for an image in the docker index
start          Start a stopped container
stop           Stop a running container
tag            Tag an image into a repository
top            Lookup the running processes of a container
version        Show the docker version information
wait           Block until a container stops, then print its exit code

 

Command2 Command1

Example 1: An Interactive Container of tomcat server

Let’s try the docker run command again, with specifying a new command to run in our container.

$ sudo docker run --name ubuntu14  –p 8080:8080 -t -i tutum/tomcat /bin/bash

-t → pseudo-tty or terminal inside our new container

-i → interactive connection by grabbing the standard in (STDIN) of the container

/bin/bash → This will launch a Bash shell inside our container

-p → Port exposing

So, now when our container is launched, we can see a command prompt inside it.

root@af8bae53bdd3:/#

 

Note: Change the port number of tomcat server in /tomcat/conf/server.xml file and restart the tomcat service in the container. Open the tomcat manager in a browser and deploy the applications.

Example 2: Run nginx container in the docker

To install and assign a port number for nginx, apply the following comment

docker run --name ngnix -p 81:81 -it nginx/nginx /bin/bash

Note: Change the default port number of ngnix server in /etc/nginx/sites-enabled/default file and restart the ngnix server.

To view the Docker monitor in a web browser:

Run the Docker UI command:

$ docker run -d -p 9000:9000 --privileged -v /var/run/docker.sock:/var/run/docker.sock dockerui/dockerui

To exit the container:

CTRL+P immediately followed by CTRL+Q

Committing changes to an image

To continue performing actions in a container such as download and install, configure files, etc. you need to “commit.” Committing ensures that everything (e.g. image) can be resumed during the next visit.

# Usage: sudo docker commit [container ID] [image name]

sudo docker commit 8dbd9e392a96 my_img

 

Export

sudo docker export <CONTAINER ID> > /home/export.tar

Note: If we export the container, it will not copy history and meta-data. Hence, the file size may be less than 5MB.

Save

$ sudo docker save busybox-1 > /home/save.tar

Note: It will save the container’s history and meta-data. Hence, the file size will be slightly more, when compared to export.

How to Limit the Memory Usage for Containers?

In order to limit the memory usage, simply set –m [memory amount] flag in a docker container.

To run a container with memory limited to 256 MBs:

# Example: docker run -name [name] -m [Memory (int)][memory unit (b, k, m or g)] -d (to run not to attach) -p (to set access and expose ports) [image ID]

docker run -m 64m -d -p 8082:80 tutum/wordpress

To confirm the memory limit, you can inspect the container:

# Example: docker inspect [container ID] | grep Memory

docker inspect 9a7562a361122706 | grep Memory

Hence, it is one of the major technology innovations, which provides enterprises with significant revenue improvements. It transforms the way you deploy, manage and migrating applications in the cloud and is always a right tool for your enterprise.

 

CCTV surveillance using Raspberry Pi

CCTV surveillance using Raspberry Pi

Overview

For Security purposes, we usually need to capture every motion in specified areas. To fulfill this requirement, CCTV cameras were introduced a few years ago.

However, this brought along some challenges such as the following:

  • The ordinary security cameras run continuously, in turn recording everything
  • They need to be monitored 24 hours a day
  • Another major problem with ordinary security cameras is that you need to fast-forward and rewind a lot to find a particular moment / situation

 

Vmoksha’s SolutionRaspberry-Pi
To overcome these issues, Motion activated cameras were introduced. These cameras do not record unless a specified minimum size moves within their range. It stores only potentially relevant video which makes easy to review a particular event.

 

Vmoksha has implemented CCTV Surveillance System by using Raspberry Pi. This system records every motion in a specified area, which can be monitored from any web browser. The camera connected to the Raspberry Pi module detects any kind of motion and capture images. The Raspberry Pi stores the images locally, converts them into a video and uploads that video into Cloud storage such as Dropbox

 

Block Diagram

Block Diagram

Components of the Raspberry Pi Module

Components of the Raspberry Pi Module

 

Hardware Components

Raspberry Pi: It is a credit-card sized low-cost computer that plugs into a TV or computer monitor and uses a standard keyboard and mouse.

Raspberry Pi Camera Module: It captures high-definition video and still photographs. It is also used to capture slow-motion, time-lapse and other videos.

Power Supply: Raspberry Pi has micro USB connectors to connect the power supply. The requirement for the power supply is 5V and 700mA although it is recommended to use a 1.2A power supply especially if you will be connecting wireless devices or a Wi-Fi dongle.

SD Card: The Raspberry Pi Operating System is loaded and executed from an SD card.

 

Software Components

Raspbian: To run the Raspberry Pi, we need an operating system which is a set of basic programs and utilities. Raspberry Pi foundation recommends installing the Raspbian operating system, a version of Debian Linux that optimizes and uses the Raspberry Pi hardware. This comes with over 35,000 packages, which makes it more than a pure OS. It is precompiled software bundled in an appropriate format for easy installation on your Raspberry Pi. It is still under active development with emphasis on improving the performance and stability of many Debian packages.

Motion Software: This program monitors the video signal from one or more cameras and detects motion. It is able to detect if a significant part of the picture has changed. It is basically made for Linux operating system and is a command line based tool whose output can be PPM, JPEG files or MPEG video sequences. It is the perfect tool to monitor your property because it saves only those images that are really required.

 

How does it work?

A Raspbian image is installed on the SD card and connected to the Raspberry Pi module. The motion software program has also to be installed after this.

The motion software program continuously compares every image with a previously captured image and detects motion. If it recognizes any difference between two images, it starts capturing image and stores those images on an SD card. When motion stops, it converts those captured images to a video.

The Raspberry Pi will then upload the converted videos to the Dropbox cloud storage and delete the uploaded video from SD card. For this uploading and deleting process, we have used Python code.

 

Challenges and Solutions

While implementing this project, we faced some challenges. Read on to know how we faced our challenges with smart solutions:

#

Challenge Solution

1

Initially, the converted videos were not uploading to Dropbox due to a proxy issue We provided full permission to Dropbox

2

Once the video is upload, it was showing up an incorrect time, hence we could not recognize the latest video We used timestamp in the Python code which attaches time to that video file while uploading

 

After a series of challenges and solutions, Vmoksha finally succeeded in implementing CCTV Surveillance by Using Raspberry PI.

 

My sincere thanks to Mehter M Muzzamil, who had also contributed and helped me in launching CCTV surveillance using Raspberry Pi module.