PhoneGap - Environment Setup

Advertisements

Previous Page
Next Page  

In this chapter, we will learn 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, 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 a developer’s 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.howcodex.onlineviewer" version = "1.0">
   
   <name>Howcodex</name>
   
   <description>
      Howcodex Online Viewer
   </description>
   
   <author href = "http://howcodex.com" email = "contact@howcodex.com">
      Howcodex
   </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>

All configuration contents are wrapped in <widget> tag. Brief description of these is as follows −

<widget id = ”app_id”>

id is your reserved app-id on various app stores. It is in reverse-domain name style i.e. com.howcodex.onlineviewer etc.

<widget version = "x.y.z">

This is version number of app in x.y.z format where (x,y,z) are positive integers i.e. 1.0.0, it represents major.minor.patch version system.

<name> App Name</name>

This is the name of the app, which will be displayed below the app icon on the mobile screen. Your app can be searched using this name.

<description> My First Web App </description>

This is a brief description of what the app is about, and what it is.

<author> Author_Name </author>

This field contains name of the creator or programmer, generally set to the name of organization which is launching this app.

<preferences name = "permissions" value = "none">

The preferences tag is used to set various options like FullScreen, BackgroundColor and Orientation for app. These options are in name and value pair. For example: name = "FullScreen" value = "true" etc. Because we do not require any of these advance settings, we just put permissions to none.

<icon>

Allows us to add icons to our apps. It can be coded in various ways, but since we are learning short-cut of everything, so here it is. The .src determines the path of icon image. The gap:platform determines for which OS platform this icon is to be used. The gap:qualifier is density that is used by android devices. The iOS devices use width & height parameters.

Icons

There are devices of various sizes having same mobile operating system, so to target an audience of one platform you need to furnish icons of all the mobiles types too. It is important that we prepare icons of exact shapes and sizes as required by particular mobile operating system.

Here we are using the folders res/icon/ios and res/icon/android/drawable-xxxx..

To get this work done fast, you can create a logo of size 1024x1024 and log on to makeappicon.com. This website will help you instantly create logos of all sizes for both android and iOS platform.

App Icons

After providing icon image of size 1024x1024, makeappicon.com should provide the following −

Icons for iOS

IOS

Icons for Android

Android

This website provides you with an option to email all the logos in zip format to your doorstep (a.k.a. email, of course!)

Advertisements