How to develop a low-cost mobile app using hybrid/ionic platform?

npm install –g Cordova

This command downloads a bunch of files required for you to get started with Cordova. Now that Cordova is installed on your device, you can now go ahead to create your first hybrid project by running the following command:

cordova create FirstCordovaProject

This command creates a project called FirstCordovaProject. Next, you need to change the directory to the project folder. Type the following command:

cd FirstCordovaProject

Once this is done, you would need to install Cordova’s platform. Establishing a platform is important, so Cordova knows how to build your application for the various platforms you intend on targeting. Let’s stick with running the application on our browser for now. Run the following command:

cordova platform add browser

cordova run browser

If you have followed all the steps correctly up until now, a simple web application should have opened in your browser. It’s able to run in the browser because, well, the program is written using HTLM, the “language” of the web. But the app doesn’t look like much now, does it? Let’s try adding a few things to our app to make it do something. Type in the following command into your command line:

cordova plugin add cordova-plugin-network-information

What this command does, is it gives us the ability to connect to a network. Next thing, let’s make our application display something other than what it does display now. Locate the index.html file in your project folder. Open it up, and you should see a line like this:

<p class=”event received”>Device is ready</p>

Yeah, as I said earlier, this is good ‘ol HTML right here. Below it, add the following line to it:

<p class=”connection”></p>

Save the file and close it. Next thing we need to do is change our JavaScript code. Locate the index.js file in the JS folder, and search for the line that looks something like this:

Var receivedElement = parentElement.querySelector(‘.received’);

And add the following lines of code just below it:

var connectionElement = parentElemment.querySelector(‘.connection’);

connectionElement.innerHTML = navigator.connection.type;

Doesn’t it just feel right doing all of these in reliable JavaScript and HTML? Save your work, and restart the application in your browser. You should see a text “UNKNOWN” under the Device is ready. That’s totally fine. Since we are running the application in the browser, the browser can’t tell what type of device it is. Now let’s try testing out our application on a real device. To do this, we need to add the platform we would want to deploy our applications on. For Android and iOS, run the following in your command line:

cordova platform add ios android

To run the application on your Android smartphone, you need to install the software development kit (SDK) for Android. If you are developing using a Mac, run the following command to install the Android SDK manager:

brew install android-sdk

Once the SDK manager is installed, run the following command:

SDK platform

Great! Now it’s time to run it on an actual device.
For Android, run the following commands:

Android SDK platform-tools
Android SDK Build-tools
cordova run android

If all goes well, you should see your application running on your device. Congratulations! That’s all you need to develop a hybrid application.
To run you application on iOS, you need a system running Xcode 7 or higher. Once you have set up your Apple ID and its requirements, you can run the following command:

cordova run ios

And that’s it, folks! Same code, reusable across various platforms! This makes the life of a mobile app developer relatively easy, and the process of software development a painless one.

In case you are looking for ways to get more complicated mobile applications developed and want to do your project at affordable cost by an experienced team of mobile app developers, we at Manifera Software Development will get you right there! Contact us for a free consultation or quotation today!