 Okay, if you've been following this series, you know that we've made a very simple application using HTML and Java script Let me bring that up here that window this window. Yes, this window Close that. Okay. So this is what our application looks like. I have it both running on my Web server and locally because there's no server-side script so it can be served up either way We've already gone over two options that will be a cross-platform for desktops Using Python or C++ with WebKit either with GTK or QT to see that Just click on the annotation that should be on the screen for the playlist and we'll bring up the full playlist for this series It's a simple little has a list of options here that you can quickly search through and of course you can open this up on any Web current web browser whether it be on a phone tablet or desktop well today We're going to be looking at one option for packaging it for mobile devices So far as I said, we've done desktop stuff So now we're going to create a take it and throw it into a package for Android as an APK or whatever an iOS package is or a Windows mobile which is an X AP or HP which is IPK which is also used for some other Linux distros such as Open WRT As well as Blackberry and now maybe some other options here We're going to do it very simply using some tools that are out there for us I have myself played with a few options As far as making Android applications and I will do in this series in the coming video how to manually create a very basic Android application and packages as an APK for use on your phone But here is a very easy way to make it for not only Android, but but other platforms as well and as I was saying I've played with one past made by MIT Which I think was called App Inventor which was all right But it only did Android from laced last I checked and that was a while ago So I don't know if that's changed since then but today we're going to be looking at phone gap And phone gap is an open-source program made by Adobe. I believe you Adobe and basically you take it you point it towards your package of Of html and its files for it and it creates mobile packages for you And it is an open-source application here But we're not going to download and install it One reason is I don't like installing things outside of my default repositories when I don't have to and Yeah, that's the main reason if it wasn't the repositories I most likely download this and install it I haven't actually used the actual program, but they do have an online version Which might not be as full-featured? I couldn't really tell you but if we go to instead of phone gap calm We go to build dot phone gap comm we get the the online builder and it's very simple to use So I'm gonna say let's get started Here you have unlimited open-source applications, which is great. They're saying if you're making an open-source application That's you're gonna be using like github for Storing the the program you have unlimited. So I love when when I see this, you know As long as you do an open-source, you know, you can do as many as you want When you have it so you can Collaborate and invite other people to develop and test on it you have unlimited if you're gonna make a private app You get one free. So so if you're just making something for yourself personally if I was making it for myself I would just Open it up in my web browser really when I'm making packages like this. It's to give to other people But here we go. I'm gonna click completely free my one private app Here you have an option you can use Adobe ID to to sign in here. I have not Try that option. I chose try github, which will bring you to github here I already have a github account before this tutorial. I'm just going to say let's sign up I'll pick a username. I'll call it films by Chris Test sure and I'm not gonna put my email address here I'm just going to use I've talked about in the past ten minute email I'm gonna just copy this temporary email account into here since this is just for the video and Then I'm going to create a very simple password because after I write this video I'm going to either delete this count or just never use it again. So create an account. There we are now that we've done that Now if you already have github a github account, this is great You you're probably logged in you can upload all your files to github and then point it to it Since I just created this count. There's nothing in here I'm going to hit back arrow a few times till I get back to my Builder phone gap site here and click github again and this time it's saying since I've already created account that I'm logged into Give get a give phone gap Access to your github account. So I'm going to say authorize this app Okay, now it's saying this email address will be used. That's fine. That's the email address I just got from ten minute email once again if you're actually making an application You can log in more times. You're not going to want to use a temporary email account That's just for this tutorial. I'm going to say I agree to their terms. I don't care if I get any updates Complete my registration. Okay, so I have my github account set up. I have my Phone gap build account set up. So I'm ready to go now if I already had a github Project going I can once again do as many open source I want here since I'm already logged in and I given Phone gap builder access to my github account when I click here It would show all my open projects and basically you just need to have a project with an index dot html And it will package everything from that and make the index that html your home page of your application Since I'm not uploading anything to github And I'm not going to get into uploading stuff to github in this tutorial I'm going to say private and you still have the option to choose something from github But I'm going to say upload a zip file, but I have to create the zip file first So let's go back to our shell here, and I'm in the folder with the project that we've been working on I've got my index dot html, which is my main page I got all the JavaScript and CSS in here as well Also, you know, this is just like any other web page if you want to have a bunch of pictures in your applications You could put sub folders in here and whatnot, but I'm just going to use zip I'm going to say zip dash R for occlusive because I do have folders if I didn't do that It would skip the folders so dash R and I'll call it mytestapp.zip And I'm just going to put an asterisk to put everything in this folder into that zip file And it shows you right here, it added all this And if I list it out, you can see my zip file right there List it out, it's only 110 kilobytes Now I can go back to the website, click upload a zip file Once again, the uploading the zip file is an option that you can only upload one application to this site So you can either create more accounts or make them public on github If you're uploading your files to github, once again you can make as many as you want It's just because I'm considering that the zip file is considered a private upload So I'm going to click on the zip file that I created here Mytestapp.zip, open and it uploads the files And then at this point, you know, I can give it some information here I guess this is the title, I'll call it mylistview And enter a description if you'd like And at this time, I'm going to click ready to build And it's going to start building it for all these different operating systems I'm going to click on the iOS, that's the first one to build And you'll see I get an error there, and I know I'm also going to get an error on the BlackBerry build as well And the reason for both of them is they both required keys And so you can click here, I don't know much about iOS development Or BlackBerry, or really anything outside of the little bit I know about Android development But luckily for the most part, we don't need to know much All we need to know is our JavaScript and HTML Which is the whole point of this series So you can click this and it says add key And it'll ask you for a title and ask you for the file I'm assuming that you have to get that certificate files from Apple So you'd have to do that Same with the BlackBerry, it will give me an error here It will say that I need to click on the signature file So I'm not sure exactly how you get those signature files That's outside the scope of this tutorial, but Google that And just upload your certificates and those both should build alright Android has an option for a certificate key But it's not required I think that if you, and I could be wrong on this If you're going to put it in the Google Play Store or their market I think it has to have a signature If you're going to host it on your site or just email it to somebody Or you're going to give it to somebody else some other way It doesn't need a signature, I'm pretty sure it's only if you're going to be putting it in the store But once again you click on this and it's going to say add a key And it'll just ask you to upload the file So once again you'll go to the Google Play and sign up for an account I assume they give you a certificate file and you'll upload it there But at this point I can download the APK My XAP, my IPK, my WGZ for whatever operating system That is, that has a little icon for an eye But right off the bat we're ready to go with pretty much everything except for Blackberry and iOS You just need to get those certificates I can download those packages or I can scan this barcode With my phone using something like Google Goggles And it will download that, I click install And I will now have this application installed on my phone And it will run very similar to how it would run the web browser It's just that you have a package that you can now distribute Now there's, I haven't played with this very much It looks like you can choose an icon here under settings Obviously you have an app title You can tell it the version and give it a description Delete this app if you want to delete it You can also upload source code I guess So a lot of options in there I know that this is mainly using JavaScript and HTML Basically whatever you would in a web browser I think the full application here As well as the one I mentioned earlier by MIT The App Inventor The App Inventor actually is not just using the HTML It actually has all the components of an Android program Using their APK Or their, what's the word I'm looking for Anywhere, their files rather than just a web interface But since this series is on taking your web application And packaging it for distribution as an application Rather than through a web browser I'm not going to get into that But you may want to also look into that Once again the full version of Phone Gap Or also Google the MIT App Inventor I have very little experience with all of these But they do work I have scanned this after uploading our files And it does install right and open properly I know that when I've used in the past the MIT App Inventor You do have options for the web view As in, as such as either you can allow zoom Or disallow zoom And if you have a lot of stuff people are going to click Sometimes I find one of the advantages of Actually creating an APK And installing as an app on an Android phone Is that you can disable that zoom feature Which the zoom feature can be a plus sometimes But if you have a bunch of check boxes Or something for people to click If they try checking them too fast Instead of checking the boxes it ends up zooming in So being able to do this as an APK package And being able to disable that Is definitely a plus if you don't need that zoom feature I do not know of a way to disable that in the web browser The default web browser on Android So once again this is using Phone Gap And we use the online version Just go to build.phonegap.com And zip your HTML code and all the files for it Into a zip file, upload it And now you have your application Ready for six different mobile devices As long as you get signature keys for a few of them Anyway, I hope you're enjoying the tutorial I hope you're seeing how easy it is To create an application that is Just easily distributed amongst all devices Really this is possible with most programming languages Since everything kind of breaks down to C And C basically breaks down to assembly So if you're writing stuff in Python, Perl Or whatever languages Some operating systems are very restrictive iOS being one of those Android a little bit but not impossible You can get all that stuff running But if you are looking for just a simple Way to create a user interface HTML, JavaScript, CSS These are great tools for that And once again if you actually host this In this case we uploaded a zip file With all the information But you could point it to your website I guess the way you would do it with this Is basically make an HTML file That has a redirect using something like JavaScript to redirect to your site And basically you'd upload a zip file here And nothing but that HTML file That redirects to your website Once again all depends on what you're trying to do Do you want it to be stand alone With no internet connection Or are you going to require internet connection And have the capability to update, change, monitor What the app is doing at any time That they're connected to the internet All depends But another advantage of having it On your own web server as I keep saying Is you can use your own server side scripts At that point or server side programs And then you can write it in whatever you want You can write your server side programs In C, C++, Bash, Python, Perl PHP I suppose if you're running a windows server You can even write your server side scripts In something like visual basic Or a batch file I'm not too familiar with Windows servers but I don't see Why you wouldn't be able to do that Even if you're calling it through another language like PHP And that gives you full control You can now write applications For mobile devices In any language you want Just using HTML And CSS as your user interface Just as when we're programming In Python We tend to use QT or GTK It's just a different package To display the interface The background code is all the same So now that I've been talking quite a bit Once again please visit my site filmsbychris.com That's chris2k, there should be a link in the description I hope you enjoyed this tutorial If you're liking this series Be sure to give the video a thumbs up Comment below and let me know what you think If you have technical questions That's more that you think might be more than just a simple quick answer Definitely don't put it in the comments below For multiple reasons One, once a video gets a little old I don't really check the comments on it I have too many videos to keep up with all the comments And two, it's just a horrible place To answer technical questions So as I say at the end of most of my videos If you have technical questions Try to catch me in the IRC channel Or talk to the other people in the IRC channel That's on FreeNode Pound Filmsbychris Chris with a K Or just go to my site filmsbychris.com And click on the link to the IRC channel Currently it's underneath the social network tab Although my site might change in the future Anyway, once again thank you for watching And please visit my site I hope that you have a great day