Vagrant is a tool for creating and managing virtual environments that helps many developers not have to care about the “works on my machine…” problem.
Vagrant creates reusable development systems that can be used again and again, helping you keep your system clean of too many installations.
If you are interested, SitePoint has plenty of vagrant articles and tutorials that might come in handy.
I am going to talk about a Vagrant configuration for developing mobile hybrid applications with the Ionic Framework.
Vagrant for mobile apps?!
I was surprised when I found out to! I’ve seen Vagrant used mainly in web development. With frameworks such as Laravel, Phalcon and even CMSs such as WordPress, but not used for mobile development.
Even so, the Ionic guys have managed to create this Vagrant configuration perfect for our use.
For iOS developers, Ionic Box won’t do much for you right now as Ionic Box cannot be used for iOS development for a variety of legal reasons. However, it’s great for Android development.
Setting up with Ionic Box
To get the Ionic Box, you must have Vagrant and VirtualBox installed.
After making sure you have those, execute
vagrant init drifty/ionic-android
vagrant up
vagrant ssh
This will download the vagrant configuration files, start the virtual machine and connect you to it. The first time you run this, it will download Ubuntu 14.04 (Trusty Tahr) with these applications installed:
This process will take some time, so be patient.
Now that the Ionic Box is up and running, you can start using Ionic Framework to write your mobile hybrid application for Android.
After setup
I am not going to create a new application. Instead, I will use one of the templates that Ionic supplies, the tabs template.
Execute
ionic start TabsDemo tabs
cd TabsDemo
ionic platform add android
The first command creates a project called TabsDemo from the tabs template and then adds the necessary files and configuration to make it an Android app.
To run the application, use
ionic run android
and it should build the application for Android and then install it in the device.
If you have any problems with your Android phone, such as the vagrant VM not recognizing it, or any other permission problem, try restarting the adb server by executing
sudo /home/vagrant/android-sdk-linux/platform-tools/adb start-server
sudo /home/vagrant/android-sdk-linux/platform-tools/adb kill-server
You can find the source files in both vagrant and your local machine. On vagrant, you must place them in /home/vagrant/, while on the local machine, you can find them in the same directory where you placed the vagrant configuration file, i.e. Vagrantfile.
You can use any IDE you want for writing your application, but I would recommend WebStorm (if you are willing to pay its price).
Since Ionic uses Cordova to port apps into mobile platforms, you can use Cordova plugins easily by using ngCordova. Let’s look at an example with the BarcodeScanner plugin.
You can add the plugin by executing
cordova plugin add https://github.com/wildabeast/BarcodeScanner.git
It can then be used in your code like this:
module.controller('BarcodeScannerCtrl', function($scope, $cordovaBarcodeScanner) {
$scope.scanBarcode = function() {
$cordovaBarcodeScanner.scan().then(function(imageData) {
// Success! Barcode data is here
}, function(err) {
// An error occured.
// Show a message to the user
});
};
Conclusion
Vagrant may be difficult to understand sometimes, but is worth pursuing as it can be exceptionally useful. If you are tired of configuring your machine for every project you have, then vagrant is the right tool for you. If you face problems while configuring your machine, then using a prepackaged vagrant box is the best answer to your problems.
With this introduction you don’t have to install all the tools for Android development. Say goodbye to Android SDK and say hello to Ionic Box.
Aldo ZiflajAldo is a Code-Lover and a student of Computer Engineering from Albania. His short-term goal is that of becoming a full-stack developer, focusing on Android, Ruby technologies and DevOps techniques.
