Setting Up PhoneGap Development on Ubuntu





I just started a new software development project for a new product Idea I am developing. I know one area of the project is going to require a mobile application, which is basically going to enable the user to consume and update data, and will not be particularly a graphics heavy application. I reviewed the PhoneGap documentation and thought I would give it a go.

The key aspect as to why I have chosen PhoneGap, is I would like to keep the whole software development stack primarily focused around existing web technologies and ideally focused on Javascript.  I would also ideally like to keep all my development focused on making use of WebStorm .

With the release of WebStorm9, my favourite IDE now supports PhoneGap Project out the box. However, there is still a little bit of initial configuration required to make this a really frictionless setup on your ubuntu desktop.




A key pre-requisite, is that your ubuntu has node.js installed, to do this you can check out one of my previous posts , install node.js on ubuntu desktop

Although not essential, I personally think it is a good idea to install Google Chrome, for no other reason than to make Use of Ripple Emulator, a mobile environment emulator. Ripple is a multi-platform mobile environment emulator that is custom-tailored to mobile HTML5 application development and testing.

Once all the pre-requisite have been successfully installed, we can now install the Apache Cordova mobile development framework, which will enable you to use standard web technologies such as HTML5, CSS3 and Javascript for cross-platform development, avoiding each mobile platforms native development language.  Your applications will basically execute within wrappers which are targetted to each platform relying on standards compliant API bindings to access each devices sensors, data and network status.



To install Cordova, open your Terminal Window (Ctrl + Alt +T) and execute the following command;

sudo npm install -g cordova

A confirmation message should be displayed which directory your cordova files are located.  If it is not obvious to you, you can execute the following command

which cordova

Which should display a path similar to;

/usr/bin/cordova

Make a note of this path as we will now need to enter this into our WebStorm Settings. To do this we simply open WebStorm and navigate to File  –> Settings –> Languages & Frameworks –> PhoneGap/Cordova .  Enter your path obtained above into the PhoneGap/Cordova executable path:  textbox.

Webstorm9

You will now be able to create a new project, File –>New Project, and be able to select PhoneGap/Cordova App as a project type

ProjectType

Gary Woodfine

Technical Director at Denizon
Gary is Technical Director at Denizon, an independent software vendor specialising in IoT, Field Service and associated managed services,enabling customers to be efficient, productive, secure and scalable in a way which helps them address and reduce their ecological impact.

Denizon's product line successfully integrate IoT, Artificial Intelligence and Blockchain technology to enable efficient, productive, secure and scalable solutions to help organisations address increasing energy demands, ecological impact and Health & Safety concerns of their staff.

Latest posts by Gary Woodfine (see all)