{"id":486,"date":"2018-03-12T04:54:04","date_gmt":"2018-03-12T04:54:04","guid":{"rendered":"http:\/\/www.creativesparksolutions.com\/blog\/?p=486"},"modified":"2018-03-12T15:33:53","modified_gmt":"2018-03-12T15:33:53","slug":"creating-your-first-phonegap-application","status":"publish","type":"post","link":"https:\/\/www.creativesparksolutions.com\/blog\/creating-your-first-phonegap-application\/","title":{"rendered":"Creating your First Phonegap application"},"content":{"rendered":"

Assumptions:<\/strong> Usage of the command-line interface (CLI) is clear, PhoneGap has already been installed.<\/p>\n

Creating a new application<\/h3>\n

1. Let’s create our first application called HelloWorld with:
\nphonegap create HelloWorld<\/code>
\nA: It should print the following response:
\n Creating a new cordova project.<\/i><\/p>\n

2. The next step is to go into the project with:
\ncd HelloWorld<\/code>
\n3. If you list the content of the directory:
\nls -l<\/code>
\nIt should print the following directory structure for your new PhoneGap
\nproject.<\/p>\n

We see four different directories and a config.xml file for setting up a
\nspecific configuration for the application in general or for a specific platform.
\nLet’s run it to see how your first application looks; later, we will explore what
\neach of the directories means and how to use them.
\nphonegap run android<\/code><\/p>\n

Note: Don’t worry if you haven’t added Android platform support before running
\nit on Android; it does all this automatically. Here is a printout of all the
\nactions it takes:<\/p>\n

4. If you previously carried out the setup procedure, after a short moment you
\nshould see the following screen on the Android emulator<\/p>\n

\"Phonegap<\/p>\n

If you Open the root folder of the project in your favorite text editor and open the www\/index.html file.
\nYou will HTML code with css and Javascript files called in the html.<\/p>\n

One of the javascript file linked to this html controls the changes i.e index.js. There is also the cordova.js file. Every application needs to load the cordova.js file first, if you want to use PhoneGap’s plugin API; as it provides events when it is ready to use them. <\/p>\n

Options when creating a new PhoneGap Project<\/h3>\n

What you saw above is a very simple example of how a phonegap project was created with minimum options. However there are many options and alternatives provided when creating the project in the following format: <\/p>\n

phonegap create [options] [id] [name] [config]<\/code><\/p>\n

Let’s go over the most important parameters, as follows:<\/p>\n

\u2022 options: There are few available options to fine tune our new project:
\n\u00b0\u00b0 –name : It specifies the application name.
\n\u00b0\u00b0 –id : It specifies the package name ID. If this is missing, it defaults to com.phonegap.hello-world. It should follow a similar reverse domain name notation for the package ID.<\/p>\n

\u00b0\u00b0 –template : By providing the name of the template, PhoneGap will create a new project from that template.
\n\u00b0\u00b0 –copy-from : It will create a new project by copying the whole file structure of an existing PhoneGap application that can be modified and edited without changing the original project. This is useful if you have a boilerplate project prepared for your favorite stack of tools that you are using in the project.
\n\u00b0\u00b0 –src : It does the same thing as the copy-from parameter.
\n\u00b0\u00b0 –link_to : The link_to parameter links the new project to another project that already has a working code. This is useful if you want to try out new configurations or change the settings in any of the platforms without the worry that you might break something and need to rebuild it from the beginning for a specific platform.
\n\u2022 id: It is just shorthand writing for the options ID setting.<\/p>\n

\u2022 name: It is just shorthand writing for the options name setting.
\n\u2022 config: It provides you with the ability to pass a JSON string with additional
\nsettings that will be injected into .\/.cordova\/config.json file.<\/p>\n

Here are some examples of how to use the Phonegap project creation command with Options<\/h4>\n

Task: To create an application with the PhoneGap Essentials name in the essentials directory and the com.phonegap-essentials package ID<\/p>\n

phonegap create essentials --name \"PhoneGap Essentials\" --id \"com.phonegap-essentials\"<\/code><\/p>\n

Task: To make a copy of the existing application with a new package ID named com.phonegap-advanced, you can copy the existing application in it.
\nphonegap create advanced \u2014id \"com.phonegap-advanced\" \u2014copy-from .\/essentials<\/code><\/p>\n

Managing Platforms when Creating a Project<\/h4>\n

Creating a new project is pretty much empty and it does not do a lot until you specify which platforms you would like your application to support; thus, we need to add each platform separately. (iOS, Android, Blackberry, Symbian OS etc.)<\/p>\n

All the commands to manage the platform have in common the start of the command:
\nphonegap platform <\/code><\/p>\n

NOTE:<\/strong> All commands should be run in the root folder of the PhoneGap project to be able to work, except the command to create a new PhoneGap project, which can be run anywhere.
\nLet’s see a couple of examples:
\nphonegap platform add ios android<\/code> – This adds two platforms
\nphonegap platform list<\/code> – Lists the platforms<\/p>\n

That’s it for now , for creating a new Simple Phonegap application. We’ll talk about this further in our next tutorial which is continuation and about BUILDING and RUNNING THE Application.<\/p>\n

<\/i>You can check out our PhoneGap App development Services from India<\/a><\/strong> and find out more if you’re looking to get a Cross Platform app built.<\/p>\n","protected":false},"excerpt":{"rendered":"

Assumptions: Usage of the command-line interface (CLI) is clear, PhoneGap has already been installed. Creating a new application 1. Let’s create our first application called HelloWorld with: phonegap create HelloWorld A: It should print the following response: Creating a new cordova project. 2. The next step is to go into the project with: cd HelloWorld 3. If you list the content of the directory: ls -l It should print the following directory structure for your new PhoneGap project. We see four different directories and a config.xml file for setting up a specific configuration for the application in general or for […]<\/p>\n","protected":false},"author":1,"featured_media":495,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,3],"tags":[62,63],"class_list":["post-486","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile-app-development","category-mobile-app-tools","tag-phonegap","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.creativesparksolutions.com\/blog\/wp-json\/wp\/v2\/posts\/486","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativesparksolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativesparksolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativesparksolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativesparksolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=486"}],"version-history":[{"count":6,"href":"https:\/\/www.creativesparksolutions.com\/blog\/wp-json\/wp\/v2\/posts\/486\/revisions"}],"predecessor-version":[{"id":493,"href":"https:\/\/www.creativesparksolutions.com\/blog\/wp-json\/wp\/v2\/posts\/486\/revisions\/493"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativesparksolutions.com\/blog\/wp-json\/wp\/v2\/media\/495"}],"wp:attachment":[{"href":"https:\/\/www.creativesparksolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=486"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativesparksolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=486"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativesparksolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}