šŖStep by Step Tutorial
Please watch the video or read the step by step instructions below!
From the team behind Apache Cordova, the Adobe PhoneGap framework is an open-source distribution of Cordova ā providing the advantage of technology created by a diverse team of pros along with a robust developer community ā
Reuse existing web development skills to quickly make hybrid applications built with HTML, CSS and JavaScript. Create experiences for multiple platforms with a single codebase so you can reach your audience no matter their device.
PhoneGap Build takes the pain out of compiling PhoneGap apps. Get app-store ready apps without the headache of maintaining native SDKs. The PhoneGap Build service does the work for you by compiling in the cloud. ā by PhoneGap
Instructions:
Iām pretty sure you already have done this step, but for anyone who is not very familiar with coding, please install a text editor (like Atom, Notepad++, Subline) or check this video to find an editor. Personally Iāll be using Subline, but it honestly doesn't matter. {% youtube SmWoo0ryAXs %}
Create the configuration file. The code can be found here as well:
<?xml version=ā1.0" encoding=āUTF-8" ?>
<widget xmlns = āhttp://www.w3.org/ns/widgets"
xmlns:gap = āhttp://phonegap.com/ns/1.0"
id = ācom.phonegap.exampleā
versionCode = ā10ā
version = ā1.0.0ā >
<! ā versionCode is optional and Android only -->
<name>Eleftheriaās app</name>
<description>
An example for phonegap build docs.
</description>
<author href="https://build.phonegap.com"email=āsupport@phonegap.com">
Eleftheria Batsou
</author>
</widget>
Name the file as config.xml. By default, you donāt have to change anything but I would change the ānameā and the āauthorā. Save it in a new folder. You can name the folder however you want.
- Create an index.html file and include the basic structure (as you see in the video or below). Save it in the folder you created in the previous step.
<!DOCTYPE html>
<html>
<head>
<title>Eleef Title</title>
</head>
<body>
<h1>my first header</h1>
<p>hi, this is a paragraph</p>
<button onclick="alert(āomg, this is a working buttonā)">Click me!</button>
</body>
</html>
- Create the zip folder with the 2 files
- Open PhoneGap on your browser
- Sign in or registerā¦ (donāt worry, itās free and it doesn't take much time)
- Upload the zip file, and you are readyš„³ļø!!
- Use your android phone to scan the bar code
- Say āyes/installā or āinstall anywayā to every pop up on your phone
- And now you should be able to use the app on your phone, congratulationsš!
Extra! Update the logo icon on your new app
- Download or create a small icon (preferable dimensions: 144x144px or 256x256px), save it as icon.png on your folder
- On config, after āauthorā add:
- Save the file, and create a new .zip
- Upload the new zip on PhoneGap and check your app again!
š”TIP:
On your smartphone close every tab on the browser!!! otherwise, you wonāt be able to download your app!!
--
Thank you for taking the time to read my story and watch my videos.
Would you like to get me a coffee?!āļø You can do that here ā paypal.me/eleftheriabatsou But If you canāt, thatās ok too š.
It would be nice to subscribe to my Youtube channel. Itās free and it helps to create more content. Youtube | Codepen | GitHub | Twitter | Site | Instagram