This tutorial will walk you through the steps to convert responsive websites into an app. Using the Phonegap online service, you can use most any live (should be responsive) website URL and create native apps for Android, iOS, Windows Phone plus for Windows 10.
The Phonegap framework by Adobe System does not require knowledge of the mobile programming language. Instead of using complex programming tools, the apps are based on simple languages like HTML, CSS, and JScript. You will need a free Adobe ID. Recommend you go ahead and signup now if you do not have active account. Their free level will get you started:
There are a few more steps to prepare your app before uploading to Phonegap, let’s get started.
Step 1: Download the official “Hello World” project, save and unzip to a working directory:
https://github.com/phonegap/phonegap-template-hello-world/archive/master.zip
Step 2: Once unzipped into your project directory, you should see something like this:
Now is a good time to rename the “www” directory to something meaningful like “myfirstproject” or the name of your responsive website. Totally your choice but recommend not using “www” as you will lose track over time of your projects… For this tutorial we will be using “qikdocs”.
Step 3: We now need to modify the config.xml file
You can use the built-in Windows notepad but recommend you start using a real:) text editor. If you are going to work on projects like this, Notepad++ will serve you well and is free. Best to use the installer version… Open the config.xml file and you will see this:
At minimum, we need to modify these lines:
1) App Name
2) App Description
3) Author URL, email and Name
4) URL to your responsive website online
There are many other things we could change in the config.xml but for this tutorial we are only covering the above (more later). Here is what our modified config.xml looks like AFTER saving (be sure to save yours):
Step 3: Now we have minimum information in our config.xml file, it is time to ZIP it up for uploading:
Step 4: Our ZIP is ready to be unloaded to Phonegap for processing. We are assuming you have setup or logged into your Phonegap account… Click on “Apps” and then the button on right, “+new app”. You should see:
Click on the “Upload a .zip file” button and upload the ZIP we created in Step 3.
Your ZIP will start uploading (depending on connection speed and server load may take a while) and you should see:
Click on the “Ready to build” button. This may take a while so sit tight and wait until you see:
1) Gives info about iOS error
2) Downloads Android APK app file
3) Downloads Window APPX app file
4) Scan the QR code to install on mobile device
When clicking on the iOS (1) you will see a screen like this:
You now a have working “beta” app for Android, Windows Phone and Windows 10 Desktop. They are not signed and of course not ready for live distribution. You can (and have friends / associates) now test them on your devices.
Be sure to see the “Useful reference” links below for more info… We understand this tutorial will leave many hanging with beat apps. Over the next month we will create follow-up tutorials which should cover more advanced features. There is a ton of information on the internet and on Phonegap if you wish to proceed with advanced features. Stay tuned for follow-up tutorials on this subject:
- Better understanding of signing your app
- How to change icons for your app
- How to disable unneeded plugins
- and more!
Be SURE to signup for our QikSoft Newsletter so we can alert you to new tutorials as we add them.
Useful reference:
Signing your apps http://docs.phonegap.com/phonegap-build/signing/windows/
Installing unknown apps on Android http://www.androidcentral.com/allow-app-installs-unknown-sources
