Making an app is a great skill to have and an app is a great asset for almost any business. Every serious business has its own app, from phone answering services to accounting software, an app tells potential clients & customers that you’re a professional outfit.
Whether you want to set up your own business creating apps, or you want to create one for your existing organization – there are so many different ways to do it, that getting started can be tricky and confusing.
Luckily, by using Adobe PhoneGap Build, you can create an app without installing large SDKs and without learning code.
With one set of files, you can upload your app and create apps for all operating systems.
This tutorial will involve downloading several different applications/software – please do so at your own risk.
Creating a Simple App Using Phonegap
Create a New Folder
Create an empty folder, call it “app” for now. Make sure the folder is empty.
Download Notepad++ or a similar tool to help you edit and highlight your code.
Go to build.phonegap.com, read the terms and conditions, and if you are happy to proceed – sign up for a free account.
Don’t do anything else for now – you might be taken to a screen and prompted to upload or use a GitHub file, but just leave everything for now.
Copy the Example Config.xml
Go to http://docs.phonegap.com/phonegap-build/configuring/ and scroll down to the bottom – highlight all the code from the Example Config.xml file and paste it into Notepad++
Once the code is paste into the Notepad++ program, save it with the name “config.xml” and save it in the folder named “app” that you created earlier.
Create a New File in Notepad++
In Notepad++ go to “File” in the top menu, then “New” to create a new doc/file.
Now, to grab the ‘skeleton’ of a webpage and your app, go to – https://www.w3schools.com/html/ and grab the example code which begins with <!DOCTYPE html>
Now, save this new file and call it “index.html”
You can now go into the “app” folder, and double click on “index.html” to preview your app. Leave this open in your browser
Go back to the notepad++ file and change the title, heading (h1) and the paragraph (p).
Save the file once you have made your changes, and then refresh the app in your browser and the text on the screen should update.
Add a Button to Index.html
Below the final paragraph tag – </p>
Add the following code to create a button:
<button onclick=”alert(‘This app is amazing’)”>Click me</button>
Once the code is added, save the file and then refresh the index.html in your browser – you should now have a functional button in your app.
Upload to Phone Gap
Obviously, our app is very simple, too simple to publish and share with clients etc. however, just to ensure we can make everything work, we’ll zip the files and upload them to PhoneGap.
You can name the zip file whatever you like, here I’ve named it “001”.
Next, go to build.phonegap.com and click to upload a zip file, and choose your zip file.
Now click “ready to build” button on the right-hand side.
You can now scan the QR code with your phone and download the app. Note that you may need to allow “install from unknown sources” in Android, to be able to run the app on your phone.
Add an Icon
To make the app look a bit more professional, make an icon/logo. The logo should be 144 x 144 pixels and save it as a png. Name the file “icon.png” and save it in the “app” folder.
Copy the code below and paste it into your config.xml file which should be in the “app” folder
<icon src=”icon.png” />
Save the file.
Delete the old zip file within the “app” folder, and now select the 3 files – icon.png, config.xml and index.html and right-click – send to – compressed (zipped) folder.
Upload the zip file again to PhoneGap, scan the QR and check it is working!
You should now have your first, very simple, mobile phone app. This provides the foundation for creating specific and more complicated apps. Downloading and installing the software and getting familiar with Phonegap was the tricky part – now you should be able to create a range of apps by following along with some intermediate level tutorials.
To take things to the next level, check out this great video from Teaching Tech