đŞ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