How To Create An App In 10min with PhoneGap + Tips
Tags: phonegap, appdevelopment, javascript, frontend
Published: 2020-01-12 09:38:52

💪Step by Step Tutorial

Please watch the video or read the step by step instructions below!

{% youtube 3vmwAcKXS80 %}


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](https://phonegap.com)

##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](https://www.youtube.com/watch?v=SmWoo0ryAXs) 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](http://docs.phonegap.com/phonegap-build/configuring/) 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](https://build.phonegap.com/) 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🎉!

![step1](https://miro.medium.com/max/1080/1*V9TFK313lqKoqWlnJmNOJQ.jpeg "PhoneGap 1")

![step2](https://miro.medium.com/max/1080/1*fU3ggWKdDhlDPE_UNqkF9Q.jpeg "PhoneGap 2")

![step3](https://miro.medium.com/max/1080/1*fALzetsxVQxAH_zym6oZuA.jpeg "PhoneGap 3")

![step4](https://miro.medium.com/max/1080/1*zrLUWZmBIbNKMDzuEkh3ZA.jpeg "PhoneGap 4")

![step5](https://miro.medium.com/max/1080/1*4tBYAUHoIVY67maZDX9x3w.jpeg "PhoneGap 5")

![step6](https://miro.medium.com/max/1080/1*vYullPrDwPvCPSSsVc7qVA.jpeg "PhoneGap 6")

![step7](https://miro.medium.com/max/1080/1*L8r6PK2ZhtWBszV8xtAQaQ.jpeg "PhoneGap 7")

## Extra! Update the logo icon on your new app
1. Download or create a small icon (preferable dimensions: 144x144px or 256x256px), save it as icon.png on your folder
2. On config, after “author” add: <icon src=”icon.png”></icon>
3. Save the file, and create a new .zip
4. Upload the new zip on PhoneGap and check your app again!


![step8](https://miro.medium.com/max/1080/1*j_b3pIApelFIc3Y1wh23Zw.jpeg "PhoneGap 8")

## 💡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](https://www.youtube.com/c/EleftheriaBatsou) channel. It’s free and it helps to create more content.
[Youtube](https://www.youtube.com/c/EleftheriaBatsou) | [Codepen](https://codepen.io/EleftheriaBatsou) | [GitHub](https://github.com/EleftheriaBatsou) | [Twitter](https://twitter.com/BatsouElef) | [Site](http://eleftheriabatsou.com/) | [Instagram](https://www.instagram.com/elef_in_tech/)