ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

How To Build a Mobile App using PhoneGap | No Programming | iPhone | iPad

Updated on May 17, 2012
klanguedoc profile image

Kevin is a Software Developer with 20 years experience designing and building business intelligence and system integration solutions.

PhoneGap, a multii platform development environment, provides tools to easily develop cross platform mobile apps. You can take advantage of the newest technologies like HTML5, CSS3 and Javascript to build simple as well sophisticated mobile apps for IOS (IPhone, IPad), Android, Windows Mobile 7, Bada, BlackBerry, Symbian, WebOS with no coding or very little.

For non developers, it is possible to create simple apps, like recipe books, travel guides, how-to guides, with no coding if you use a WYSIWYG editor like DreamWeaver, Komposer or Amaya among others and the native development environments for each platform along with PhoneGap of course.

In this tutorial, I demonstrate creating a simple app with no code which will be a recipe book for wine for an IOS device (iPhone). To get started, you will need to download XCode 4 from Apple (you will need a MacBook since it is not supported on Windows or Linux). You will also need Amaya from w3c. It is a also a free download. Finally, you will the PhoneGap development which is available from PhoneGap. See the Resource section at the end of this tutorial for the web site addresses.

Choose Template
Choose Template
PhoneGap Template
PhoneGap Template
Project Name
Project Name

Project Creation

Once the PhoneGap is downloaded and unzipped, navigate to the PhoneGap installation folder and double click on the dmg installer in the IOS sub folder. Follow the instructions until the package is installed.

Choose a template
Next Start XCode or install it after downloading it from the Apple App store. Create a New Project when the IDE starts. From you will need to select a project template. If you click on the IOS Application project types, you will see the PhoneGap template. Select it and click “Next”.

Name Your Project
In the next page, you will need to give your project a name. For my project example, it will be: Make My Wine. Also provide a company identifier if this this the first time you are using Xcode.Click “Next” again, and the Git page will ask you if you want to add the project to the source control. If you want to add it, leave the check mark on otherwise remove and click the button to create the project and open the development environment.

The www Folder
Before you can start working on your app, you will need to fix the www folder reference in your project. The www folder is were you put all your project files: html, js (javascript), css (style sheet), images. At the moment, it is not visible in the Project Navigator. This apparently is a bug with the template as documented on the PhoneGap web site and documentation. Follow these steps to fix:

Choose the proper simulator in the Xcode menu
Choose the proper simulator in the Xcode menu
  • Select the iPhone 4.3 Simulator Active Scheme from the drop down menu.
  • Click the build button and run the project.

  • You will succeed in building the app and it will run, but you will see a “index.html” not found error from the runtime. It is important to build and run the app first in order to create and populate the www folder, otherwise if you navigate to the project folder in Finder, your project folder will not contain a www folder.

  • From the simulator menu, exit the application
  • Select your project name in the Project Navigator, right click and select “Show in Finder”

Drag the www folder to Project root
Drag the www folder to Project root
  • In Finder, you should see the www folder in the project folder. To add a reference, drag the www folder from the Finder to just below the Project name in the Project Navigator in XCode.

Folder reference
Folder reference
  • In the Reference confirmation page, select “Create folder references for the any added folder” option and click “finish”.

  • Expand the www folder; you should have an index.html file and a phonegap-1.1.0.js file. For the sake f this tutorial, we are going to work with index.html only. Select the index.html file and it will automatically open into the editor. The Javascript file is needed to add logic to an app and it is outside the scope of this tutorial.

Running app - no errors
Running app - no errors
  • There is a lot of boilerplate html code in the file, which you shouldn’t remove otherwise the app won’t work properly. Locate the “onDeviceReady” function in the head section and remove the line “navigator.notification.alert("PhoneGap is working")” to prevent your app from displaying the alert message each time its starts
  • Scroll down until you get to the Body element. If you not familiar with HTML, it is between the Body elements that we will do most of our development.
  • Build and run the app again, you now get the PhoneGap welcome page

We could do our editing from here, but as I wanted to show how to develop an app without coding, in a visual environment, I am going to edit the file from the Amaya HTML editor. But before we get to Amaya, I will delete the line of code that makes the popup display when the app starts. Select and delete the line "navigator.notification.alert("PhoneGap is working")" from between the following function code :


function onDeviceReady()


// do your thing!

navigator.notification.alert("PhoneGap is working")



function onDeviceReady(){



If you haven’t already done so, download the Amaya application from the w3c site (see Resources) and install as per the instructions, or when you open the dmg file, drag and drop the Amaya application icon to the Application folder on the Deck Toolbar on your Mac. Once Amaya opens, you will greeted with a Welcome page, which you can close (File -> Close Tab).

  • Open your Index.html file in your project
  • File->Open Document
  • Navigate (use navigate button (far right) next to the path field) to your project in Finder.
  • Select “Replace Current Tab”
  • Click “Open”
  • Click “Open” again to close the file dialog and open the file in Amaya. You may need to click anywhere in the screen to refresh the display.

Amaya Welcome Page
Amaya Welcome Page
Select Index page in www folder
Select Index page in www folder
Index page in Amaya
Index page in Amaya
div creation
div creation

Now I am going to replace the boilerplate text with my own content. Amaya works much like a regular document editor, like Word. You simply add the text and elements you need and use the formatting tools (now the right, or “View->Show/Hide Toolbars->Show Tools” or F8). For the tutorial, I am going to replace the Title and add a background image and add a list of Wine recipes. Next I will add a new page that will contain my recipe.

  • I am going to replace the Title with “My Wine Recipe List”
  • Change the color of the text to white by selecting the text clicking on the color picker in the ToolBox.
It is important to keep in mind that we are developing for a mobile device, so screen resolution is important. For the IPhone (IPod Touch), the screen resolution is 640x960 (Portrait) and 960x640 (Landscape). To obtain a good idea of the constraint we need to keep in mind, I suggest creating a div element and setting its dimension parameters to the above Portrait size. To setup the div element, dimension, styling and background image for the body element, follow these instructions:
  • Remove the text below the title
  • Place your cursor at the beginning of the line.
  • From Menu: Insert->Division (div). You won’t see the div onscreen but you will get a confirmation in the status bar on the bottom of the screen

Format color of div
Format color of div
Format contour of div
Format contour of div
  • Add styling to the div element
  • Select the div element in the Element navigator
  • From Menu: Format->Style Editor
  • Select the “Colors” tab
  • Add on 1px to the Top, Bottom, Left, Right div border
  • Style: Solid
  • Color: Grey
  • Select a background color
  • #a6254f

Wine Recipe List
Wine Recipe List

Add Wine Listings

  • Add list of wine recipes
  • Add one recipe title per line
  • Add the following Wine names
  • “Apple Wine”
  • “Rhubarb Wine”
  • “Cherry Wine”
Select Text, click on List tool in ToolBox on right Make your text 16pt for better readability Set the text color to: #4f0f5e

  • Add a background image. You can find one in the public domain.
  • If you download one, save the jpg or png file to your project’s www folder
  • To add to the body element, select it like you did for the div
  • From menu open the Style Editor
  • Select the colors tab
  • Next to the background image field, click the browse button and navigate to your www folder and select the file.
  • Click “Apply”
  • Your screen should look something like the following screenshot

Background Image
Background Image

Test App in Simulator

Return to XCode and change the the Active Scheme to iPhone 4.3 Simulator if you have not done so already.

  • Run your app. It should look like something resembling my app in the following screenshot

Running App
Running App

Now I will add three more pages to our project; one for each recipe and afterwards I am going to add links from our list to each of the pages.

  • I am going to name them apple.html, cherry.html and rhubarb.html
  • For the styling, all three will be identical
  • Download an image of a “back button” and save it to your www folder, or you can download the following one:

  • To setup the page layout, I am going start by adding a couple of carriage returns at the top of the page because the title of the recipe will be placed below the tool bar that will contain the back button.
  • Return your cursor back at the top of the page and insert a div element as we did before.
  • Next select the div in the element navigator at the bottom and insert a “Back” button image “Insert->Image (img)”
  • Navigate to the www folder and select the “Back” button
  • Enter the alternate text “Back to Main Menu”
  • Click the “Click” button
  • With the div still selected, open the Style Editor
  • Set margins to 1px
  • Set background color to light grey
  • Apply the styling

The Apple Wine Content

Place the cursor beneath the div element

  • Add the title “Delicious Apple Wine”
  • Select the text and set the font to 16pt
  • Set the Color to black

Beneath the title add another div element

  • As before, set margins to 1px
  • Padding to 0.5em (select the em measurement type from drop-down)
  • Background color to medium grey
  • Set font size to 9pt
  • width: 300px
  • height: 960px

Inside the div copy and paste the following recipe


  • Two fermenting vessels (5 gallon plastic container with cover and a hole for air lock)
  • An Air-lock
  • A siphoning instrument (a clear 1 inch diameter hose, 3-4 ft long)
  • Hydrometer (to check alcohol content level)

Ingredients (1 gallon = 4 liters)

  • Apple cider (with no preservatives), 1 gallon (4 liters) or more
  • Sugar cane, 1 lb per gallon
  • Yeast Nutrient, 1 tsp per gallon
  • Pectine Enzyne, 1/8 tsp per gallon
  • Acid Blend, 1-1/2 tsp per gallon
  • Wine Tannin, 1/4 tsp per gallon
  • Ascorbic Acid, 1/8 tsp per gallon
  • Campden Tablet, 2 (crushed and disssolved); 1 at initial preparation and 1 at end of process
  • Lalvin Yeast, size EC-1118, 1 pkg per batch up to 5 gallons
  • Cinnanom stick, 1 per gallon (optional)
  • Oak chips, 1/4 cup per gallon (optional)


  • Mix together the ingredients in an OPEN container, except the Lalvin yeast.
  • Cover with a light cloth and let sit 24 hours
  • After 24 hours, add the Lalvin yeast, 1 pkg per batch (5 gallons or less).
  • Ferment 4-5 days or until hydrometer reads 1.030 to 1.040.
  • Use the Syphoning to transfer contents from first container to second container. Place one end of hose in first container and suck until juice starts to rise. Remove from mouth and liquid pore into second container through a filtering device (strainer or cheesecloth). Another technique is to scoop with a ladel the liquid from the first container to the second container again through a filtering device.
  • The secondary container should have a cover and have a hole for the air-lock. The air-lock allows the gasses to escape without letting dust of other particles back into the container. You can also use a cheesecloth but must be secure over the opening.
  • Let ferment another 2-3 weeks or until hydrometer reads .998.
  • Continue to ferment another 2-3 weeks to let wine clear.
  • Add more Campden tablet(s), 1 per gallon once wine is clear.
  • Bottle and let age, at least 6 weeks

The finished page should look similar to the following screenshot

Apple Wine Recipe and Finished Layout in apple.html page
Apple Wine Recipe and Finished Layout in apple.html page
Back to Main Page
Back to Main Page

Link the Pages

To finish off, I will add a link to the apple.html page from a my main index.html page

  • Open the index.html page
  • Select the Apple Wine text in the list
  • Add a link, from menu Links->Create or change link
  • As before navigate to the www folder and select the apple.html page
  • Click on the “Click” button
  • To remove the hyperlink underline, select the text and open the Style Editor
  • On the Characters tab, select “none” for text-decoration
  • Apply to confirm change.
Before continuing, I am going to test the app in the Simulator
  • Open the XCode ide
  • Click the run button
  • After the app is loaded, click on the Apple Wine Recipe link
  • When Apple Wine Recipe loads, use mouse to simulate sliding the page up and down to preview the text.
  • Click the “Back” button to return to main page

Finished App Video

The two other pages are identical in design and you only need to rename the apple page to cherry.html and again to rhubarb.html. Replace the Apple Wine recipe with the following for each page.

Cherry Wine (4 gallons)


  • Same as Apple Wine


  • Cherries, 18 lbs
  • Sugar, 10 lbs (4.5 Kilograms)
  • Vintner-s Grape Concentrate, 9 ounces (250 mL)
  • Acid Blend, 2½ teaspoons
  • Pectic Enzyme, 2½ teaspoons
  • Yeast Nutrient, 3 teaspoons
  • Campden Tablets, 3 each
  • Potassium Sorbate, 1½ teaspoons
  • Tannin, 1 teaspoon
  • Yeast Lalvin EC1118, 1 package


Step 1

  • Crush cherries (potato masher, food processor, etc)
  • Add cherries and 2 gallons (7.5 liters) of warm water to first container
  • Let sit for 48 hours then add tanning, acid blend, pectic enzyme, and yeast nutrient
  • Fill to top with cool water
  • Use hydrometer to check Specific Gravity: 1.065 and 1.072
  • Add 1 Campden tablet (crushed and dissolve)
  • Sprinkle Lalvin yeast over top
  • Cover and let ferment for 48 hours
  • Stirring once a day

Step 2

  • When Gravity reaches 1.005 - 1.010, about one week, siphon the wine into the second container, either by using a hose or use a ladle through a cheesecloth.
  • If the wine in the container is not about 2 inches from top, then top up with regular wine of the same color.
  • Let the wine ferment for another 18-20 days in a room with a temperature around 75-80 F. (approx 24 C) or until the gravity reaches less than 1.000.

Step 3

  • Add 1 cup of potassium sorbate stirring vigorously to halt fermentation
  • You can add some Super-Kleer to the wine to make it clear faster, stirring vigorously.
  • Top up the container with more wine as required.
  • Place wine in a cooler room 65-68 F
  • Stir the wine repeatedly during the next 2 days to relieve the carbonation.
  • Make sure your air-lock is always in place

Step 4

  • After 2 days of stirring, let stand about 10 days to clear
  • Bottle your wine and age at least 6 - 8 weeks

Rhubarb Wine

  • Same as above, or like Apple Wine


  • Rhubarb, 3 lbs
  • White sugar, 3 lbs
  • Yeast nutrient, 1 tsp.
  • Hot water, 1 gallon
  • Campden tablets, 2 (crushed and desolved)
  • Wine yeast, 1 pkg
  • Cedar chips (optional)
  • Green grapes, 1 lb (optional)


  • Chop up (cube) rhubarb and place in fermenting container (5 gallon plastic pail with cover)
  • Add sugar
  • Let stand 24 hours
  • Add hot water, mix well
  • Strain out the rhubarb into separate container
  • Wash out primary fermenting container and return rhubarb juice back into primary container
  • Add the remaining ingredients, less the Campden tablet
  • Add cover and let ferment 4 days
  • Siphon out the juice through a cheesecloth into second fermenting container
  • Let ferment until reading reaches about 1.01 on hydrometer
  • Add Campden tablet to arrest fermentation
  • Let clear naturally or add a clearing agent, Bertonite or Super-Kleer or similar product from winemaking supplier
  • Once clear, bottle
  • Let age 3 to 6 months ( the longer, the better)

I hope you enjoy the recipes even though the zest of the tutorial is about how to create an IOS app without any coding (excellent for non programmers) using PhoneGap and other HTML editing tools. Mobile apps and content for mobile devices is one of the major trends for online content, or digital content as reported by the IBM Institute for Business Value. Taking advantage of this trend will be critical in the comings years for both the small content provider as well as large publishers. Technology can help lower the entry barrier and level the playing field. Let me know what you think.




Apple Developer


    0 of 8192 characters used
    Post Comment

    • klanguedoc profile imageAUTHOR

      Kevin Languedoc 

      6 years ago from Canada

      Thank you very much Khan

    • profile image


      6 years ago

      nice work done

    • klanguedoc profile imageAUTHOR

      Kevin Languedoc 

      6 years ago from Canada

      Yes it is an excellent framework and you can also interface with the native features like camera, etc.

    • DeepakTutlani profile image


      6 years ago from Jaipur

      Its fantastic...No coding what so ever... i Really like the idea and trying to build my own application.


    • klanguedoc profile imageAUTHOR

      Kevin Languedoc 

      6 years ago from Canada

      Cool. the amount of frameworks for mobile app development is amazing, especially the web ones.

    • profile image


      6 years ago

      Apps are what is needed to make your smartphone smart and unique.Im fond of app creating and find it really helpful to use site like snappii where i can build apps in minutes.

    • klanguedoc profile imageAUTHOR

      Kevin Languedoc 

      6 years ago from Canada

      Thanks Rage345

    • profile image


      6 years ago

      Good Job keep it up :)

    • klanguedoc profile imageAUTHOR

      Kevin Languedoc 

      6 years ago from Canada

      Thanks theinfoplanet. Yes PhoneGap is a wonderful technology and it is great for web based apps. the other great thing about the technology is that you can use all the features on an IPad or iPhone from a web page. I hope you have success with your app and the framework.

    • theinfoplanet profile image


      6 years ago from The Planet of Information

      This is really amazing. I have always been searching for something like this but could never find it, so I had always been designing apps for android instead. Now I can finally, easily make an iOS app!

    • klanguedoc profile imageAUTHOR

      Kevin Languedoc 

      7 years ago from Canada

      Thanks molometer. You also have awesome hubs. They are interesting and well researched.

    • molometer profile image


      7 years ago from United Kingdom

      Will do, you have interesting hubs.

    • klanguedoc profile imageAUTHOR

      Kevin Languedoc 

      7 years ago from Canada

      Hey thanks molometer. I appreciate your kind words. Keep me posted.

    • molometer profile image


      7 years ago from United Kingdom

      I haven't tried this software yet but will check it out based on this hub which is well written informative and useful.

      Voted up too


    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at:

    Show Details
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the or domains, for performance and efficiency reasons. (Privacy Policy)
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)