Astronaut loading animation Circular loading bar

Try : Insurtech, Application Development

AgriTech(1)

Augmented Reality(20)

Clean Tech(6)

Customer Journey(12)

Design(37)

Solar Industry(7)

User Experience(57)

Edtech(10)

Events(34)

HR Tech(2)

Interviews(10)

Life@mantra(11)

Logistics(5)

Strategy(17)

Testing(9)

Android(47)

Backend(30)

Dev Ops(7)

Enterprise Solution(27)

Technology Modernization(2)

Frontend(28)

iOS(43)

Javascript(15)

AI in Insurance(35)

Insurtech(63)

Product Innovation(49)

Solutions(19)

E-health(10)

HealthTech(22)

mHealth(5)

Telehealth Care(4)

Telemedicine(5)

Artificial Intelligence(132)

Bitcoin(8)

Blockchain(19)

Cognitive Computing(7)

Computer Vision(8)

Data Science(17)

FinTech(50)

Banking(7)

Intelligent Automation(26)

Machine Learning(47)

Natural Language Processing(14)

expand Menu Filters

Vagrant: Building and maintaining portable virtual software development environment

I had a new developer joining my team. But onboarding required him to successfully install all the necessary software. The project was complex with a disparate set of software, and modules required to make all of it work seamlessly. Despite best efforts, it took the developer a couple of hours to completely set up his machine.

vagrant

It set me to think if there is something that can be done to improve and expedite this onboarding. Why should it take a new developer so much time to set up his system when the very same activity has been done a couple of times before by earlier developers.

A little bit of ‘googling’ made me stumble upon some thing called Vagrant. Perhaps I was too ignorant before, but now I realize there exists better ways to handle this problem. The activity that took our developer hours can be finished in a few minutes.

Here is how Vagrant can help you set up your development environment in minutes.

  1. Install the latest version of Vagrant from https://www.vagrantup.com/downloads.html. You can download the version for your OS. You can also read more about Vagrant from https://www.vagrantup.com/docs/getting-started/
  1. After installing Vagrant, you will need to install VirtualBox from https://www.virtualbox.org

Now that you have installed Vagrant, and the Virtual Box, lets play around a bit with it.

From your bash shell you can run the following commands

$ init hashicorp/precise64

$ vagrant up

After running the above commands, you will have a fully running Virtual Machine running Ubuntu 12.04 LTS 64 bit. You can SSH into the machine with

vagrant ssh

, and when you are done playing around with your newly created virtual machine, you may choose to destroy it by running; vagrant destroy

Next Steps

Now that you have created a virtual environment, lets see how we can get started with creating a new vagrant aware project.

New Project

Setting up a new project would require us creating a new directory, and then running the init command inside the directory.

$ mkdir new_vagrant_project

$ cd new_vagrant_project

$ vagrant init

The last init command above will place a new file Vagrantfile inside the current directory. You may also choose to convert an existing project to make it vagrant aware by running the same vagrant init command from an existing directory.

So far all you have in your directory is one single file called Vagrantfile. But where is the OS? We have not yet installed it. How will my project run in my favorite OS?

Answers to above questions lie in the VirtualBox. Virtual Box is the software, which is the container for your OS. Instead of building the virtual machine from scratch, which would be slow and tedious process as all the OS files will need to be downloaded every time, Vagrant uses a base image to quickly clone the virtual machine. These base images are called boxes in vagrant, and as Vagrant website also says “specifying the box to use for your vagrant environment is the first step after creating a new Vagrantfile”.

The virtual box type or the OS need to be specified in Vagrantfile. Below is how you can tell Vagrant that you would like to use Ubuntu Precise 64 to run your application on.

Vagrant.configure(“2”) do |config|

config.vm.box = “hashicorp/precise64”

end

Vagrant gives you a virtual environment of a server with any OS of your liking. In this example, we added Precise 64 version of the Ubuntu OS. However if you would like to add anything else, you can search for options here

https://app.terraform.io/session

Its time to bootup the virtual machine. It can be done using

vagrant up

Next we can log in to the machine by running

vagrant ssh

When you are done fiddling around with the machine, you can destroy it by running vagrant destroy.

Now that the OS is ready, its time to install necessary softwares, and other dependencies. How do we do that?
Enter Ansible!!

Ansible helps us in provisioning the virtual machine booted up in the steps above. Provisioning is nothing but configuring, and installing different dependencies required to run on your application.

Ansible (http://docs.ansible.com/ansible/index.html) can be downloaded, and installed on your machine from http://docs.ansible.com/ansible/intro_installation.html#installing-the-control-machine

Please note that Ansible is not the only provisioning tool that can work with Vagrant. Vagrant works equally well with other provisioners like Puppet, Chef, etc.

The provisioner, Ansible in the current case needs to be configured with the Vagrant so that virtual machine knows how it should provision the machine after boot up.

The basic Vagrantfile Ansible configuration looks like

Vagrant.configure(“2”) do |config|

config.vm.box = “hashicorp/precise64”

config.vm.network ‘private_network’, ip: ‘192.168.1.x’

config.vm.network ‘forward_port’, guest: xxxx, host: yyyy

config.vm.provision “ansible” do |ansible|

ansible.playbook = “playbook.yml”

end
end

The configuration ‘private_network’ will give an IP to your virtual machine so that traffic can flow from/to the virtual machine.

The ‘forward_port’ configuration enables us to specify that requests coming on a port xxxx to the virtual machine from outside will be routed inside the VM on an application listening on port yyyy.

Playbook is a very integral component of Ansible. Playbook contains instructions that Ansible will execute to ready your machine. These instructions can be a list of softwares to be downloaded, and installed, or any other configuration that your application requires to function properly. Playbooks are expressed in YAML format. Each playbook is composed of one or more ‘plays’ in a list.

The goal of a play is to map a group of hosts to some well-defined roles, represented by ‘tasks’.

Here is a playbook example with just one play.

- hosts: webservers

vars:

http_port: 80

max_clients: 200

remote_user: root

tasks:

- name: ensure apache is at the latest version

yum: name=httpd state=latest

- name: write the apache config file

template: src=/srv/httpd.j2 dest=/etc/httpd.conf

notify:

- restart apache

- name: ensure apache is running (and enable it at boot)

service: name=httpd state=started enabled=yes

handlers:

- name: restart apache

service: name=httpd state=restarted

A playbook can also have multiple plays, with each play executing on a group of servers. You can also have multiple plays in a playbook, with each play running on a different group of servers as in http://docs.ansible.com/ansible/playbooks_intro.html

In the next part of this series, I will take a real example where an application requires multiple software, and configurations, and how we make use of Vagrant & Ansible to run it in the developer’s machine, and then automate deployment to the cloud servers.

In case, you any queries on Virtualizing Your Development Environment To Make It A Replica Of Production, feel free to approach us on hello@mantralabsglobal.com, our developers are here to clear confusions and it might be a good choice based on your business and technical needs.

This guest post has been written by Parag Sharma Mantra Labs CEO.

He is an 14 year IT industry veteran with stints in companies like Zapak and RedBus before founding Mantra Labs back in 2009. Since then, Mantra has dabbled in various products and is now a niche technology solutions house for enterprises and startups.

Mantra Labs is an IT service company and the core service provided by the company are Web Development, Mobile Development, Enterprise on the Cloud, Internet of Things. The other services provided by the company are Incubate start-up, provide Pro-active solutions and are Technical Partners of Funds & Entrepreneurs.

Cancel

Knowledge thats worth delivered in your inbox

Bringing Interfaces to Life: The role of animation in UI and UX

Interfaces are everywhere. The user experience encompasses the overall experience a user has while interacting with a product or service. Animation, in the context of UI and UX design, involves adding motion to these visual elements to create a more engaging and intuitive user experience. Animation may serve a functional purpose by guiding users or providing feedback.

Think of motion as a design tool in your UX journey. It should help achieve the user’s goals or contribute in some way to enhance the experience. Animation shouldn’t be distracting or excessive. In other words, if it gets in the way of the user accomplishing a task or takes up more seconds for what should be a quick task, then it becomes unnecessary and annoying.

One common example of animation in UI design is the loading spinner. Instead of staring at a static screen while waiting for a page to load, a spinning animation lets users know that something is happening in the background. This simple animation helps manage user expectations and reduces frustration.

Introducing animations to the interface serves a psychological purpose as well. One aspect involves ensuring users remain informed throughout their interaction, minimizing ambiguity. Uncertainty can lead to user anxiety; for instance, if a page is loading without any interface feedback, incorporating a micro animation can be beneficial in providing reassurance. Although not all problems may need animations, adding them increases their appeal.

In recent years, several applications have pushed the boundaries of animation in UI and UX design. One notable example is the Duolingo app, which uses playful animations and interactive elements to make language learning fun and engaging. Interactive animations can gamify the user experience, making mundane tasks more engaging and Duolingo has used this to its advantage. Another example is the Headspace app, which employs calming animations and transitions to create a serene user experience. 

Let’s look at Duolingo’s application which embraces animation to engage the user’s attention. It keeps users hooked and gives them the comfort of gamification. This not only makes the information more visually appealing but also helps users quickly understand the current stage. It keeps the user hooked throughout the level with its cute animations.

Credits: Kim Lyons 

Additionally, captivating animations can also serve to promote and enhance the appeal of your product. 

Micro-animations extend beyond just the gamification of applications; they can also be leveraged to enrich the aesthetics and express the essence of your product. They contribute to making your website feel more alive and interactive, elevating the overall user experience.

UI/UX

In essence, animation in UI and UX design is not merely about adding visual flair, it’s about creating meaningful interactions that enhance user engagement and satisfaction. From improving usability to expressing brand identity and personality, animation has the potential to transform digital interfaces into dynamic and memorable experiences. Whether it’s guiding users through a process or providing feedback animation, it has the power to elevate the overall user experience. Next time you witness animation appreciate the magic that brings it to life, you might just be amazed by its impact.

About the Author: 

Shivani Shukla is a Senior UI & UX designer at Mantra Labs. It’s been a while since she started her journey as a designer. Updating her knowledge and staying up to date with the current trends has always been her priority.

Cancel

Knowledge thats worth delivered in your inbox

Loading More Posts ...
Go Top
ml floating chatbot