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

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 :


before...

function onDeviceReady()

{

// do your thing!

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

}

After...

function onDeviceReady(){

}





Amaya

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


Equipment

  • 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)


How-To

  • 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)

Equipment

  • Same as Apple Wine

Ingredients

  • 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

How-To

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
Equipment

  • Same as above, or like Apple Wine

Ingredients

  • 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)

How-To

  • 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.

Resources

PhoneGap

http://www.phonegap.com/

Amaya

http://www.w3.org/Amaya/

Apple Developer

http://developer.apple.com/devcenter/ios/index.action


More by this Author


Comments 14 comments

molometer profile image

molometer 5 years ago

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


klanguedoc profile image

klanguedoc 4 years ago from Canada Author

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


molometer profile image

molometer 4 years ago

Will do, you have interesting hubs.


klanguedoc profile image

klanguedoc 4 years ago from Canada Author

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


theinfoplanet profile image

theinfoplanet 4 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 image

klanguedoc 4 years ago from Canada Author

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.


Rage345 4 years ago

Good Job keep it up :)


klanguedoc profile image

klanguedoc 4 years ago from Canada Author

Thanks Rage345


Vlad 4 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 image

klanguedoc 4 years ago from Canada Author

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


DeepakTutlani profile image

DeepakTutlani 4 years ago from Jaipur

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

Thanks!!!


klanguedoc profile image

klanguedoc 4 years ago from Canada Author

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


khan 4 years ago

nice work done


klanguedoc profile image

klanguedoc 4 years ago from Canada Author

Thank you very much Khan

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working