On the first things that any good front end devs love to do when spending time to perfect their front-end craft is be on the lookout for other cool front-end technologies that make best mobile web apps.

There’s certainly been no shortage of good ones out there.

I’m using PhoneGap(also known as Cordova) as the good starting guide for building mobile apps.

Personally, I fell that it’s best starting point for beginning aspiring mobile developers in getting their teeth sink for getting mobile apps up and running, without much in-depth knowledge of mobile languages such as Objective-C and Swift. By accomplishing this, you will get the better feel how you can build great apps using the current knowledge level of your Javascript, HTML and CSS before you decide to take on other mobile app frameworks such as Ionic and Nativescript that I keep hearing so much from the mobile app community.

Tools I use for development

• Code text editor such as Sublime Text
• Java SDKs
• Android SDKs
• NPM(from Node)

Now, I’m aware there are good IDEs out there I could pick such as Intellij or Eclipse. They provide the essence base of laying out your mobile app development. But like any good choice of IDEs, it’s a more of personal preference than sticking to certain dogma of how to build your mobile apps in certain way. I naturally use Sublime Text only because my previous web projects has always been more front-end focus (as of late) and since a mobile framework like Cordova allows us to use sufficient front-end tech stack to do different job, I’d be more inclined to naturally use this tool for a start.

I’m assuming you have downloaded and install all the prerequisites before starting to work on the tutorial.

To begin, you need to open up the command prompt and navigate to the project folder you want to create project.

1. Type the following command to install Cordova CLI

   npm install -g cordova

2. You need to make sure cordova is at its latest version

   npm update -g cordova

3. Using Cordova CLI, create Cordova project named BizDirectoryApp in your project directory

   cordova create bizdrectoryapp com.yourname.bizdirectoryapp BizDirectoryApp

4. Navigate to your project directory

   cd bizdirectoryapp

5. Since this tutorial we’re building app for Android platform, you will need to add support tools for Android.

   cordova platforms add android

6. Make sure you add the following basic plugins to your projects

   cordova plugin add cordova-plugin-device
   cordova plugin add cordova-plugin-console

   The reason we need plugins is because in the Apache Cordova development environment, a plugin is essentially the API access for us to interact the native components of a mobile application, right down to the device-level of the applications.

7. Next we start our build for Android app device. Assuming your Android SDK is installed properly and your Android device is connected to your computer (using USB cable), type:

   cordova run android

   You should see on your command prompt screen, Cordova gets busy building and downloading the build to your actual Android device. Once upon successful completion of the download, you’ll eventually see the Apache Cordova logo comes onscreen.

Congratulations you’ve successfully built and deployed your first mobile app!

Onto the second part of this tutorial series, we’ll explore how to configure setup different types of data storage on your mobile phone when creating data-driven app on your mobile phone.