What if I told you that, in under 10 minutes completely free, you could make your very first app [ Music ], so you might have been thinking about making it up for a while, but every time you look it up.
You’ll notice. You have to learn a high-level programming, language and download a really big SDK. It seems just too daunting and it puts you off in this video. I’m gonna show you a way to do it with minimal coding knowledge completely free and in under 10 minutes.
What we’ll, be using is Adobe PhoneGap build. Instead of installing complicated software on your computer to build the app you’re, going to send it off to the cloud where all of the hard work is done for you.
We’re, going to make our app just like a website which means using HTML, Javascript and CSS. Although in this video you don’t need to know any of those. The beauty of PhoneGap build is that from one set of source files you can upload to the cloud and have iOS Android and Windows Phone apps.
Let’s, jump straight in the very first step we’re going to do is to create an empty folder and call it something. I’m just going to call mine app for now, because I haven’t decided what type of app quality, but you want to make sure this is completely empty and it’s, not cluttered with any other files.
Next, you can follow the link in the description and download notepad plus plus, if you already have Dreamweaver or another text editor, you can use that instead, just as long as you’ve got something that highlights code, because that will help things a great Deal let’s head over the phone get billed and click the get started button to create our account.
We’re, going to go for a free plan you can upgrade later on. If you feel like this is something you really want to work with at this point, you can sign in with any of your favorite options, and it should take you through to the starting screen.
After we’ve made our account. It should take us to this screen and we have it on private and the bottom. We’re going to use eventually is upload a zip file bump to start creating the files that we need for our basic app.
I’ll. Have this link in the description, but this is our basic configuration file. We always include this with our other files, and we do so because it includes all the metadata. This is the author name, the name of the app the version, and this is also where you put in or your plug-in settings and things like that.
What we’re going to do is scroll down on this page and women copy and paste everything from example config.xml, and we’re, going to put that into our text editor by default in notepad, plus plus. We have an empty document.
So I’m just going to pay the sin and we’re, not going to change anything. Yet we’re, going to make sure we save it in the correct format, very important to get the name for this file. Exactly right, and that is config dot XML we can now hit save I’ll, come to our app folder and we can see.
We have our first file ready to go. Let’s come back to the editor, and this is a bit where, if you want to, you can change some of these parameters here. So the name I’m, going to put teaching check tests, but now I’m.
Not going to bother changing any of these other things, except for the author, which I’m, going to change to teaching tech, you can update them to. However, you want let’s, hit the new file button and make it our second and last file that we need to make the most basic app possible.
Don’t get bored is able to publish your app to multiple platforms because you make it as a series of HTML files. That means just making it like. It was a website after you’re done. You upload it to the cloud and it will turn it into an actual app using the web view interface and then you’ll have an icon and it will open up on the users tablet or phone exactly like a normal app word.
Therefore, in our basic example, we need to have a HTML page. This page is linked into the description and what we’re going to do, is scroll down and take their example. This is the most basic HTML page possible.
I’m gonna copy that come over to our editor paste it into our second new document. Gon na come up and save this file as well. This one needs to be called index.html. I can a folder. We can see that we have our two minimal documents.
Let’s. Do a little bit of editing of the index.html file. We have the basic structure of our HTML, so we have the head section, which is where you normally put links to other important documents and things like scripts, followed the fancy functions of your app and then we have the body which is what they user sees on Their screen, the template we’ve used, has a heading and then a paragraph.
The beauty of PhoneGap field is that, because everything is run as a website, you can preview your app as you’re building it. Just in your browser on your computer, we’re, going to double click on index.
html. It will open up in a window, and this is exactly what the user is going to see at this stage when they open your app and make this more realistic to a phone or tablet scenario. We cannot maximize the window and then drag the sides to match the aspect: ratio of a phone screen or a tablet.
If that’s, what you’re, aiming for. We’re, going to leave this open and every time we make a change, we can come back and refresh it. So let’s head back to notepad, plus plus and change something here.
Okay, we’ve, made some very minor changes. We can hit, save and then come back to our window and hit refresh, and you can see that it’s updated here just to make our app somewhat interactive. Even though we’re going for the bare minimum, we’re gonna add in a button.
Okay, let’s. Save this and refresh the page. We click the button. We have a notification that comes up. I think this is very simple, but it’s enough to have a proof of concept. So let’s, upload the phone get billed and see if it works.
I’m back in my folder and what I’m gonna do is select both of those files and a right-click for them. I’m gonna say, send to zip folder. We need a zip file every time we upload the name of this doesn’t matter at all.
If you’re gonna store all of your different versions. Maybe you’d, like to name them something along those lines. For me, I’m. Just gonna hit number one a bit and we’re ready to come back to PhoneGap field and upload gonna go to upload a zip file and then click a zip file and hit open.
You can see that it is working because immediately it is read our XML file and put in the things that we change this at this point. We can come over and click bread to build. It generally only takes less than a minute to get it done.
So already we can see, iOS is built, Windows Phone is built, an Android is pending [, Music, ]. Okay, we ignore all of these sections where it says no key selected. That’s, something to worry about for later on.
If you’re, going to publish it to the App Store or Google Play, this means it’s, going to be in debug mode. At this stage, I think it’s, time to use a QR scanner on my phone and download the app and see if we can get it to come up here’s, a screen grab from my phone.
We managed to scan the QR code very successfully and the link came up I copy and pasted that into a browser. It came up asking me if or when it’s downloaded, which I did click the install and the app is on the phone.
I’ve dragged the icon to the home screen and when I click it, it opens as we expect a tap on the button and my alert comes up and my app is 100 %. Well, technically, we have our app, but let’s.
Add one more step just to make it a little bit nicer. We’re gonna add our own app icon. It’s at easing the default PhoneGap build one. What I’ve done is create a square canvas 144 by 144 pixel image in Photoshop and how you do it.
It’s, pretty much up to you. I’d, like to leave the rounded corners cuz that works well with many operating systems when I say that it’s very important to save it for web and make sure the file type is PNG.
So let’s. Do that [, Music ] and for now I’m just going to call it icon come back to my folder, you can see. We have three files now and a quickly come into my config.xml file and then it change it. The version 0:02.
I check the description for this link, but it is a guide to creating your own icons. We’re, going to do the absolute minimum we can at this point and that is to copy their one-line configuration and put it in our config.
xml file. We’re, going to come at the bottom before the close widget tag and when it ever resources folder. So we’re just going to delete this and therefore it points directly to source equals icon PNG.
We’re gonna save this file. Come back to our app folder, I like to delete the old one just so I don’t get confused, but that’s up to you collect our three files now because of our new PNG, and we’re gon Na send it to a zipped folder once more is version zero, zero.
Two we can now come back to forget, build and once again come to update code use that file and upload [ Music ]. Our Android build is complete. So I’m, going to go back to my phone and download the latest version of the app back to the screen recorder of my mobile phone, a little tip here.
If you pasted it into your browser, you can just refresh the page because it will be the same link. I will then prompt you to download it again what you will do and then you will install, which will do it over the top of the old one.
If you’re developing an app and doing this over and over you’ll have many files to delete out of your download folder. If we come back to the home screen and see our app icon has updated exactly how we wanted the app still opens and functions like it did before, because we didn’t change anything there.
What we do have an app – and it is pretty simple, but we did do it in under 10 minutes and we didn’t spend a cent in the next video. We’re, going to step it up by introducing jQuery Mobile, which is a free library to give us apps that actually look like apps.
That means fitting the mobile screen properly and having nice automatic animations. As we go between the various pages, see you, then g’day. It’s. Michael again, if you liked the video, then please click like if you want to see more content like this in future click Subscribe and make sure you click on the bell to receive every notification.
If you really want to support the channel and see exclusive content become a patron visit, my patreon page see you next time.