- PhoneGap - App Compilation
- PhoneGap - App Contents
- PhoneGap - Environment Setup
- PhoneGap - Overview
- PhoneGap - Home
PhoneGap Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
PhoneGap - Environment Setup
In this chapter, we will learn how to set up basic environment in order to make apps effortlessly. Though PhoneGap supports offpne creation of apps using
interface and mechanism, we shall concentrate on minimum effort procedure.We assume that you are well versed with web technologies and have your web apppcation ready to be shipped as an app. Because PhoneGap supports only HTML, CSS and JavaScript, it is mandatory that the apppcation 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.tutorialspoint.onpneviewer" version = "1.0"> <name>Tutorials Point</name> <description> Tutorials Point Onpne Viewer </description> <author href = "http://tutorialspoint.com" email = "contact@tutorialspoint.com"> Tutorials Point </author> <preference name = "permissions" value = "none"/> <icon src = "res/icon/android/drawable-ldpi/tp_icon.png" gap:platform = "android" gap:quapfier = "ldpi" /> <icon src = "res/icon/android/drawable-mdpi/tp_icon.png" gap:platform = "android" gap:quapfier = "mdpi" /> <icon src = "res/icon/android/drawable-hdpi/tp_icon.png" gap:platform = "android" gap:quapfier = "hdpi" /> <icon src = "res/icon/android/drawable-xhdpi/tp_icon.png" gap:platform = "android" gap:quapfier = "xhdpi" /> <icon src = "res/icon/android/drawable-xxhdpi/tp_icon.png" gap:platform = "android" gap:quapfier = "xxhdpi" /> <icon src = "res/icon/ios/Icon-72.png" gap:platform = "ios" gap:quapfier = ""/> <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.tutorialspoint.onpneviewer 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 pke 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:quapfier 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](/phonegap/images/app_icons.jpg)
After providing icon image of size 1024x1024, makeappicon.com should provide the following −
Icons for iOS
![IOS](/phonegap/images/ios.jpg)
Icons for Android
![Android](/phonegap/images/android.jpg)
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