Create your first app for free in under 10 minutes: Phonegap Build

what if i told you that in under 10 minutes completely free you could make your very first app 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 going to 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 up for now because i haven't decided what type of app i'll be but you want to make sure this is completely empty and it's not clouded with any other files next you're going to 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 to phonegap build 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 button we're going to use eventually is upload a zip file time 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 such as the author name the name of the app the version and this is also where you put in all your plugin settings and things like that what we're going to do is scroll down on this page and we're going to 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 paste this in 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.xml we can now hit save we'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 tech tests for 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 our second and last file that we need to make the most basic app possible phonegap build 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'll open up on the user's tablet or phone exactly like a normal app would 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 going to copy that come over to our editor paste it into our second new document i'm going to come up and save this file as well this one needs to be called index dot html back in our 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 to load the fancy functions of your app and then we have the body which is what the user sees on their screen the template we've used has a heading and then a paragraph the beauty of phonegap build 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 and 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 to make this more realistic to a phone or tablet scenario we can not 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 [Music] 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 [Music] 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 going to add in a button [Music] okay let's save this and refresh the page [Music] 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 to phonegap build and see if it works i'm back in my folder and what i'm going to do is select both of those files i'm going to right click them i'm going to 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 save it and we're ready to come back to phonegap build and upload i'm going to go to upload a zip file and then click our zip file and hit open [Music] okay you can see that it is working because immediately it is read our xml file and put in the things that we changed there at this point we can come over and click ready 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 and android is pending [Music] okay we can 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 just 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 i wanted to download which i did clicked 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 i 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 going to add our own app icon instead of using the default phonegap build one what i've done is create a square canvas 144x144 pixel image in photoshop and how you do it is pretty much up to you i'd like to leave the rounded corners because that works well with many operating systems when i save it 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 our folder you can see we have three files now i'm going to quickly come into my config xml file i'm going to change it to version 002 okay 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's 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 we don't have a resources folder so we're just going to delete this and therefore it points directly to source equals icon.png i'm going to 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 select our three files now because of our new png and we're going to send it to a zipped folder once more this version zero zero two we can now come back to phonegap build and once again come to update code use our 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 record of my mobile phone a little tip here if you paste it into your browser you can just refresh the page because it will be the same link it will then prompt you to download it again which 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 we'll 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 [Music] well 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 like 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

Channel: Teaching Tech

Views: 992,879

Rating: 4.8489513 out of 5

Keywords: app development, phonegap, phonegap build, adobe, notepad++, free, cloud, android, iOS, app, cordova, easy app making, app making for beginners

Id: QxiSuslEIyc

Length: 10min 38sec (638 seconds)

Published: Sat Feb 03 2018