During one my project i had to execute shell script from gradle. It was bit of challenge to find out for me how can i achieve it. I am adding that snippet here so next time i remember as well someone else who wants to do the same.  This gradle script is created using gradle 4.1.X, here is the sample task which is used to integrate gradle script  to run shell script during one of jenkins build.

 

task (‘runShell’){

doLast {

       //description (‘Run shell script .’)

        println”Start executing the script from $location”

      exec {

                commandLine “sh”,”$location/run.sh”

          }

           println”Finish executing the script from $location”

         }

}

When i was developing an app i wanted to add animation into my app such like breaking news popping into a small bar and slowly slide out. Here i am sharing my code for animation which is used as one of the angular2 component, just plug in play. To achieve this create one directory named animated-rolling under app/components, Create one animated.rolling.component .css, .html, and .ts file. Lets start with animated.rolling.component.ts file where we setup our animation component. here is the source code that

import {Component, ChangeDetectionStrategy,Input} from ‘@angular/core’;
import {CORE_DIRECTIVES} from ‘@angular/common’;

/*Angular 2 Tabs Example*/
@Component({
selector: ‘animatated-rolling’,
templateUrl: ‘app/components/animated-rolling/animated.rolling.component.html’,
styleUrls: [‘app/components/animated-rolling/animated.rolling.component.css’],
directives: [CORE_DIRECTIVES],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AnimatedRollingComponent {
@Input() brkNews:Array=[];
}

In the above code i am trying yo display a animated banner to display sports, it can be anything in your case.
In animated.rolling.component.css file add below code, this is very important because animation is achieved mainly by css.

.breaking-news-headline {

margin-left: 20px;
display: table-cell;
position: relative;
font-family: arial;
font-size: 13px;
margin-top: -22px;
color: white;
border: 2px solid white;
/* display: block; */
flex-direction: row;
justify-content: space-between;
text-align: center;
margin: 0 auto;
}

.breaking-news-title {
border: 2px solid yellow;
background-color: #FFEA00;
/* display: block; */
/* height: 20px; */
/* width: 90px; */
font-family: arial;
font-size: 11px;
position: absolute;
top: 0px;
margin-top: 0px;
margin-left: 20px;
padding-top: 10px;
padding-left: 10px;
z-index: 3;
&:before {
content:””;
position: absolute;
display: block;
width: 0px;
height: 0px;
top: 0;
left: -12px;
border-left:12px solid transparent;
border-right: 0px solid transparent;
border-bottom: 30px solid #FFEA00;
}
&:after {
content:””;
position: absolute;
display: block;
width: 0px;
height: 0px;
right: -12px;
top: 0;
border-right:12px solid transparent;
border-left: 0px solid transparent;
border-top: 30px solid #FFEA00;
}
}

#breaking-news-colour {

height: 30px;
/* width: 100%; */
background-color: grey;
/* position: relative;
*/
}

#breaking-news-container {
transition-delay: 2s;
/* margin-left: 10px; */
display: table;
flex-direction: row;
justify-content: space-between;
/* margin: 0 auto; */
float:left;
/* border: 2px solid greenyellow; */
background-color: #3399FF;
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
/* position: absolute; */
&:before {
content: “”;
width: 3px;
height: 3px;
background-color: #3399FF;
position: absolute;
z-index: 2;
}
}

.animated {
-webkit-animation-duration: 0.2s;
-webkit-animation-fill-mode: both;
-moz-animation-duration: 0.2s;
-moz-animation-fill-mode: both;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
}

.delay-animated {
-webkit-animation-duration: 0.4s;
-webkit-animation-fill-mode: both;
-moz-animation-duration: 0.4s;
-moz-animation-fill-mode: both;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}

.scroll-animated {
-webkit-animation-duration: 3s;
-webkit-animation-fill-mode: both;
-moz-animation-duration: 3s;
-moz-animation-fill-mode: both;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}

.delay-animated2 {
-webkit-animation-duration: 0.4s;
-webkit-animation-fill-mode: both;
-moz-animation-duration: 0.4s;
-moz-animation-fill-mode: both;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}

.delay-animated3 {
-webkit-animation-duration: 5s;
-webkit-animation-fill-mode: both;
-moz-animation-duration: 5s;
-moz-animation-fill-mode: both;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-webkit-animation-delay: 0.5s;
animation-delay: 3s;
}

.fadein {
-webkit-animation-name: fadein;
-moz-animation-name: fadein;
-o-animation-name: fadein;
animation-name: fadein;
}

@-webkit-keyframes fadein {
from {
margin-left: 1000px
}
to {

}
}
@-moz-keyframes fadein {
from {
margin-left: 1000px
}
to {

}
}

.slidein {
-webkit-animation-name: slidein;
-moz-animation-name: slidein;
-o-animation-name: slidein;
animation-name: slidein;
}

@keyframes marquee {
0% {
left: 0;
}
20% {
left: 0;
}
100% { left: -100%; }
}

.marquee {
animation: marquee 10s linear infinite;
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
-webkit-animation-delay: 0.5s;
animation-delay: 3s;
}

@-webkit-keyframes slidein {
from {
margin-left: 800px
}
to {
margin-top: 0px
}
}
@-moz-keyframes slidein {
from {
margin-left: 800px
}
to {
margin-top: 0px
}
}

.slideup {
-webkit-animation-name: slideup;
-moz-animation-name: slideup;
-o-animation-name: slideup;
animation-name: slideup;
}
@-webkit-keyframes slideup {
from {
margin-top: 30px
}
to {
margin-top: 0;
}
}
@-moz-keyframes slideup {
from {
margin-top: 30px
}
to {
margin-top: 0;
}
}

Now we need to add html which will take data from ts and styling from css file. Here is the source code for animated.rolling.component.html

 

{{news.title}}

 

Above is very little code to make your animated banner. We are transporting brkNews variable from ts file which would have list of sports and displaying it.  Now as we want this component to be independent and any data can be fed from parent component such as app.component or some other containing component.  So here is what you have to do
Add your component to parent component by import statement

import {AnimatedRollingComponent} from ‘../animated-rolling/animated.rolling.component’

Create a variable in parent component which will have list of data/objects like below.

public slideNews:Array=[
{title:”Games”,href:”https://www.google.co.uk”},
{title:”FIFA”, href:”https://accounts.google.com”},
{title:”Tennis”, href:”https://en.wikipedia.org/wiki/Novak_Djokovic”},
{title:”BBC”, href:”http://www.bbc.co.uk/sport/tennis”}
]

Also add your child component as a directive into your parent component.

directives: […,AnimatedRollingComponent],

Now the last step where you bridge your child component with parent component. Assign your list of data/object to Input variable of child component. This will take data from parent to child and display in the html rendering that. So in parent html you have to do this.

Now its ready for execution. IT will look like this.

Here you have your breaking news animation on Angular2.

Easiest way to learn cloud technologies is to create a free account on Amazon Web Services. In here we will create a basic instance of ubuntu and setup that instance as Jenkins2.0 master and create another instance to make it a slave to master. I prefer step by step approach, so we will use AWS console instead of terminal which i will share later How To Install Jenkins using Ansible …

1. Login to AWS console (assuming you have an AWS account they offer some free as well please do check on their site.
2. Go to “Services” and click on “EC2”.
3. Click on label  “Security Groups” It renders on right side default security group.
4. Click on button on top “Create Security Group”.
5. Fill the fields like below screen shot
6. 
7.  Click on button “Create”.
8.  Click on “Instance” label and click on “Launch Instance”.
9.  Select Image type as “ubuntu 16.4 LTS”.
10.  Select instance type “t2.micro”.
11.  Click on “Review and Launch”.
12.  Click on “Edit Security Groups.”
13.  Select security group created in Step-6.
14.  Click on “Launch”.
15.  It will pop up window saying “Select an existing keypair or create a new keypair.”
16.  If you have already created a key pair select one or create one and download it on your local machine and keep it safe.
17.  Click on “Launch Instance”.
18.  You can see your instance “initializing” and running after in few mins.
19.  you can name your instance as “master001”.
20.  Run Command  ssh -i keypair.pem ubuntu@instance_dns_default_by_aws
21.  Install java

    1. $  sudo apt-get update

    2. $  sudo apt-get install default-jre

    3. $  sudo apt-get install default-jdk

22.  Install jenkins

    $ wget -q -O - https://jenkins-ci.org/debian/jenkins-ci.org.key | sudo apt-key add -
    $ sudo sh -c 'echo deb http://pkg.jenkins-ci.org/debian-stable binary/ > /etc/apt/sources.list.d/jenkins.list'
    $ sudo apt-get update
    $ sudo apt-get upgrade
    $ sudo apt-get install jenkins

23. Run Jenkins:

    $ sudo service jenkins start

24. Create a slave instance as master on AWS.
25. Setup basic JRE setup on AWS.

    $ sudo apt-get update
    $ sudo apt-get upgrade
    $ sudo apt-get install default-jre

26. Create ssh key on master node by running

    ssh-keygen -t rsa

27. Copy the key from id_rsa.pub  to slave instances .ssh/authorized_keys

28. Run command on your master node (default algorthim may not let you connect from jenkins)                                                                                                                     ssh -o HostKeyAlgorithms=ssh-rsa ubuntu@master_instance_node

29.  Navigate to url “master_instance_dns:8080/”
30. It will ask the password and also show you the location of password which has to be retrieved by ssh to your master node.
31. In Jenkins console go to Jenkins>>Manage Jenkins > manage nodes.
32. Add node it opens up pop up window.
33. in pop up window
    1. add name to your slave slave001.
    2. add remote root directory “/home/ubuntu/”.
    3. select from drop down “Launch Method” “Launch slave agents via ssh”.
    4. add Host “slave/node machine” and add credentials by copying private ssh key generated in master machine for user ubuntu.
    5. Click on “Save”.
34. Now you have jenkins master/slave running.

Cheers!! Create a pipeline and run it on this setup.

We will setup  containerization which has nodes, angular2 using docker.  In here how we can deploy a simple nodes app which is built using angular2 and how it get deployed using docker on your local machine. i will provide you link to the source you need to just check out the source code and run few commands.

check out how to setup docker on mac here

1. Checkout the project from git repo pig latin.
2. You can open your project on any of your IDE i used VSC(visual source code) or ATOM.
3. Create a docker file with a name DockerFile in the project adjacent to package.jason.
4. Content of your docker file would be

5.  Now form terminal/cmdline navigate location where docker file is there.

6. Run command (don’t forget the “.”)

docker build -t username/pig latin .

7. Run command to see docker image created.

docker images

8. Now its time to run your docker container

docker run  -p 3001:3001 -d username/piglatin

9. To see your docker container running run command

docker ps  or docker ps -a (in case container dies due to some issue)

10. you will see something like this.

CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS                           NAMES

afd13d0898ff        nshah/piglatin      “npm start”         2 days ago          Up 2 days           0.0.0.0:3001->3001/tcp   priceless_jang

11. Request url localhost:3001 and see the app running through your container.