How To Build a Mobile App using PhoneGap | No Programming | iPhone | iPad
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.
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
- 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”
- 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.
- In the Reference confirmation page, select “Create folder references for the any added folder” option and click “finish”.
- 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 :
// do your thing!
navigator.notification.alert("PhoneGap is working")
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.
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.
- 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
- 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
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”
- 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
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
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
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.
- 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
- 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
- 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.
- 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
- After 2 days of stirring, let stand about 10 days to clear
- Bottle your wine and age at least 6 - 8 weeks
- 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.