Cross-Platform-App-Development1

Cross Platform Phone App Development

Hello Guys, As you know in today’s world everything is going mobile, and thus people prefer to use their mobile phones for each and everything, and thus comes the need of mobile phone applications using which their life becomes much more simple. So, those of us who want to make a carrier in phone apps development, this article is for them.

Myself Varun Mishra (CTO-Genyx), I’ll guide your through the entire process here and you’ll learn how to make a cross platform application for smartphones, whether it be an Android phone or an IOS device, a Windows phone or a Blackberry handset.

Mobile, handhelds and easy-to-carry devices have started a new revolution in software engineering. These small but efficient devices are capable to run applications created with high-end programming languages. People who own these devices tend to use them at their maximum as these devices such as mobile phones, are very convenient to use anytime, anywhere.

The architecture of a mobile device is similar to that of a computer system. It has custom built hardware, firmware, and operating systems.

These three items are mostly proprietary and are engineered, developed, and assembled under one flagship organization. Apps (Application Software) are developed both by flagship organization and developers from outside the organization.

 

Overview

A number of well-recognized mobile operating systems are available in the market in both proprietary and open-source categories. Most widely mobile operating systems are:

  • Android
  • IOS
  • BlackBerry
  • Windows

 

Every mobile operating system provides their own set of tools and environments to  develop apps that will run on them. Application made for one operating system cannot  run on any other platform as they are entirely different. Developers tend to cover all major mobile operating systems in order to increase reachability among their users.

Thus it becomes a tedious task to develop an application program that may run on all major OS platforms, keeping its look, feel, and functionality identical on all platforms. For this work, without using any tool, a developer needs to understand all the platforms and should have good understanding of major development tools for different OS.

PhoneGap: What is PhoneGap?

PhoneGap may be seen as a solution to all problems mentioned above. PhoneGap is a framework that makes the developers develop their apps using standard web APIs for all major mobile operating systems. It is open-source and free.

Developers only need to know web development using HTML, CSS and JavaScript. PhoneGap takes care of rest of the work, such as look and feel of the app and portability among various mobile OS.

 

Using PhoneGap, one can create apps for all major mobile OSl like Apple iOS, Android, BlackBerry, Windows etc. This does not require the developer to have expertise over any of the above mentioned platforms neither the developer requires to know programming to code the app from scratch.

PhoneGap allows its users to upload the data contents on website and it automatically converts it to various App files.

In this tutorial, we shall see how to create app for apple, android, and windows platform online and without using any offline tool.

PhoneGap: Enviornment Setup

We will learn here about how to set up basic environment in order to make apps effortlessly. Though PhoneGap supports offline creation of apps using cordova command line interface and Github repository mechanism but we shall concentrate on minimum effort procedure.

We assume that you are well versed with web technologies and have your web application ready to be shipped as an app. Because PhoneGap supports only HTML, CSS and JavaScript, it is mandatory that the application should be created using these technologies only.

From developers perspective, an app should have the following items included in its package:

  • Configuration files
  • Icons for app
  • Information or content (built using web-technologies)

 

Configuration

Our web app will need only one configuration file that should be adequate to configure all its necessary settings. Its name is config.xml. This file contains all the necessary information required to compile the app.

Let us see config.xml for our example:

<?xml version=”1.0″ encoding=”UTF-8″?>
<widget xmlns     = “http://www.w3.org/ns/widgets” xmlns:gap = “http://phonegap.com/ns/1.0″ id=”com.genyx.onlineviewer” version = “1.0”>

<name>Genyx Infotech</name>

<description>Genyx Infotech Online Viewer</description>

<author href=”http://genyxinfotech.com” email=”contact@genyxinfotech.com”>Genyx Infotech Pvt. Ltd.</author>

<preference name=”permissions” value=”none”/>

<icon src=”res/icon/android/drawable-ldpi/tp_icon.png” gap:platform=”android” gap:qualifier=”ldpi” />

<icon src=”res/icon/android/drawable-mdpi/tp_icon.png” gap:platform=”android” gap:qualifier=”mdpi” />

<icon src=”res/icon/android/drawable-hdpi/tp_icon.png” gap:platform=”android” gap:qualifier=”hdpi” />

<icon src=”res/icon/android/drawable-xhdpi/tp_icon.png” gap:platform=”android” gap:qualifier=”xhdpi” />

<icon src=”res/icon/android/drawable-xxhdpi/tp_icon.png” gap:platform=”android” gap:qualifier=”xxhdpi” />

<icon src=”res/icon/ios/Icon-72.png” gap:platform=”ios” gap:qualifier=””/>

<icon src=”res/icon/ios/icon-57.png” gap:platform=”ios” width=”57″ height=”57″ />

<icon src=”res/icon/ios/icon-72.png” gap:platform=”ios” width=”72″ height=”72″ />

<icon src=”res/icon/ios/icon-57-2x.png” gap:platform=”ios” width=”114″ height=”114″ />

<icon src=”res/icon/ios/icon-72-2x.png” gap:platform=”ios” width=”144″ height=”144″ />

</widget>

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *