 Hello, today we are gonna be taking a website that's up in the cloud or even one locally and package it as an APK. Now in the past, there were tools by Adobe, phone gap I think was called, I used it years ago, where you could give it a URL and it would create an Android app for you. Well, we're gonna do that ourselves so we don't need their services. So again, we're just gonna point it to our URL. But then I'm gonna show you how to manipulate this a little bit, change it around. Again, it doesn't have to point to something in the cloud, you could create an entire website and package it right in the app, which is actually what it does, but then it forwards you to a website. But I'm gonna show you some options on that. We're gonna get going on this. Be sure to watch my previous video on building Android apps in the shell. I'm gonna gloss over it here. I'm gonna point you to a project I've created which has all the instructions, but if you watch the previous video, it will definitely help. If you can't find it, go to filmsbychris.com and there, and it's Chris with the K, link in the description. Just go ahead and search for APK and it should be one of the videos. Let's go ahead and get started. So let's look at, first I'm gonna give you an example. So in my project, I have an example script, but I'm gonna take my website here, filmsbychris.com forward slash v7, and I'm gonna type in web to APK and I'm gonna give it my URL. I'll just say v7 here or even filmsbychris.com since that forwards to that. And what it's gonna do is it's gonna ask me some things. What is the app name? I'll just call it FBK. That's what we'll show up underneath the icon of the app. Next, it's gonna ask me for the application ID. I'm gonna say com.filmsbychris. And I'll just call it site. It's kind of standard on Android applications for the first part of this to be your website backwards and then the last part, what app it is. I've always thought that's kind of silly, but that's kind of the standard. We'll go ahead and run that. So what it just did is it went to the website, well it pulled down the example project from my GitLab and now it's looking at that website and my script is going to try to find the FAV icon. So you look on my website, I have a little icon right here. It's trying to grab that and it gives me a list because my website has multiple different ones. I'm just gonna click the one that is the highest resolution that is listed here. Do that, it's gonna pull down that. Now it's going to make multiple copies of that icon for the package. Then it's going to take it and it's gonna try to push it to the phone because I do have a phone plugged in with ADB and that was successful. So let's go ahead and look at that phone. Let me go ahead and turn on the screen here, unlock it, come on. And go in my applications and you can see right here, FBK with the icon from my website. When I click that, it gives a little load icon and it says loading and then here's my website and it works just like my website does. So now I can take my website and modify, I can create an entire application in HTML and put it on my web server and then distribute this app. Of course, this is a debug version of the app. You have to sign it and do other things to put it in the app store. But I have a functioning APK that people can install and any changes I make to the site, the app will automatically see that. Okay, so let's play around with that a little bit more. What do we need to know? There'll be a link in the description to this project. The first part of the read me explains how to set up the Android SDK and the tools you need to build this. I did all this in the previous video but basically on at least Debian based system but most Android systems, you should be able to just copy and paste this code in the shell and go through it and then this and then here it's cleaning up a little bit. Okay, and then you're ready to build. So how do we build? So let's go ahead and look at this. This is part of the code that's going to change the icon. So basically you will create a PNG under this directory from this project and then you'll just copy and paste all these different formats here. It's supposed to all be different sizes. Again, this is a minimalistic way of doing it but this is where it's going to look for those icons. My script that we just ran, the place it's most likely to fail is this. If it tries to pull down a Favicon and it fails to do so, it will crash and we will look at that in a moment. Here we go through some example stuff on just going what files to change to change the example, the name of the app and a few other things. Again, the script does all that but this just kind of notes on how to manually do that. And actually let's go ahead and just go into that. So when I ran my script in the directory I'm in it created a folder with the app ID. So I'm going to move into that. That's this directory here. And now what I can do is I can start modifying some of this. So let's go ahead and look at something. So by default what this app is loading is internal HTML. So it's loading up this index HTML which just has some CSS and it loads the icon it pulled down and then it runs JavaScript. And what does that JavaScript do? Let's have a look at that. That JavaScript all it does is forward you to the site that you inputted. So if I was to comment this out and go back into the HTML, I can modify this. I can take where it says loading and I can have it say something else. I can say this is awesome, right? I'll save that. Then I'll run my Gradle build. It's going to build that package again. And then I will ADB install that to the device. And here we go when I click on this now instead of forwarding to my website it just loads up that HTML. So you can have the HTML the whole website in the app. And so you don't have to worry about internet connections if that was an issue. But a lot of times your internet connections your app's gonna be grabbing stuff from the internet anyway. But I wanted to show you that you can modify that HTML and that JavaScript and use it however you want and not have to worry about connecting to the internet. Talking about connecting to the internet. I have this set up by default to run as a web browser. What do I mean by that? So let's go ahead and go back into this JavaScript. And uncomment that. We will repackage it. Push it to the phone again and run it again. So it loads up my website. And if I was to click on one of these icons it's actually bringing me to YouTube. Okay so with your app you can restrict it to certain domains which can be important sometimes. I have it set up by default to allow you to click on any link to any domain. So let's go ahead and change that. We will go into the main activities. So VIM, inside this package VIM, app, source, main, Java, cum, example, app, the main activity.java. When we come in here let's go ahead and make this full screen. We have options in here. And here you can see exactly the file it's loading initially. So it's that assets, Android assets, index.html. But you can see also here I can have it go straight to a website if I don't want to have a local file I can just do that and it will load up that URL. But what is important is that you have permission for that. If we go VIM and I can list through the files here. Here is our WebView client Java. When we look at this it's giving a host name, right? And here we're saying films by Chris. And again that's generated when you run my script. Here I'm doing a check which is kind of unnecessary. What you want to do is if we wanted to restrict it to only allow for that host name. So films by Chris and ignore all other domains we just change this to true. And it should lock you into that domain. But be aware if your website pulls assets, JavaScript, maybe fonts, whatever from other URLs or you have links that want to go to other domains this will break that. So depending on your situation you may want to like in mine want to go to YouTube or you may want to set that to true and then it will not allow you to move to other domains. I hope that makes sense. Oops. Now other things we want to look at. Let's look at another website that actually breaks my script. If I was to go to software here I have my notes which brings me to my notes page which does have a Favicon up here. You can see it looks like a little sheet of paper. Let's go ahead and try to use this URL. So I'll copy that URL. I'll move into this directory. And I will run my script which by the way if I haven't already mentioned on the GitLab page if we go back to the project overview that script once you've set up your Android SDK and everything up here this first section you can take this script and you don't have to worry about the rest of the projects. When you run this it will download that project and make the modification. So this is the web to APK that we're running. So web to APK and I'm gonna give it the URL that I just copied to my notes. And when I run this we'll call it notes.com.films by chris.notes it's gonna list the icons and then I'm gonna choose one and when we run this it fails. And so far every time I've done this as long as you've installed the SDK and everything properly this is the only time I ever get an error and it's because my script is not pulling down the proper icon file. So let me just look through my files here.png. So this file right here, I'm sorry let's move into our the notes one and let's try that again. We'll do .png. Yes it's going to be this one here I believe. If I say what type of file is this? It's saying it's HTML and that's why it's crashing. It's expecting it to be an image, a PNG but it's not. So what we're going to do, we'll just go ahead and open up GIMP, I will create a new icon or you can find one online. I'll just make it 128 by 128. I will make my brush size smaller and I will draw a little happy face here and this will be our new icon. I will export that to notes, app, not build, source, main and we're going to replace this file. Export, replace, export and if we go back here, now that we've done that let's go to the project overview, scroll down. Here we're just going to replace all these icons. Again this is kind of silly the way I do this because these are all supposed to be different formats and sizes but again this is just getting things up and running. We do that, now we should be able to Gradle W build and it should build successfully this time. Okay and then we should ADB install that and if we look again at our device and I go to notes, there is notes with that icon we just created. We click on that, say loading and then it brings up the notes website. So that's the biggest issue I have come across so far with my script is I try the best to grab a Fav icon but sometimes my script pulls it down wrong so if you get an error and it's listing issues with the PNG that is what you have to do. Replace the one icon and then follow the notes to replace all the different icons for different sizes even though technically these are all the same size. Clear as mud? So I hope that you enjoyed this. I hope you found this video useful. I use this a lot. Again, if you have a website it's easy enough for people just to add a shortcut to their home screen with whatever web browser they use. Problem with that is I've had so many times in the past where people update their web browser and the shortcuts disappear. It is so annoying but if your package is an APK you don't have to worry about that. They can upgrade their browser all they want. It's going to be using that web view and your package stays the same. You can modify your website. They will automatically see the changes and again you can put it all, put the entire website right inside the APK and not even have to worry about connecting to the internet. If you have any questions let me know in the comments below I'll do my best to answer them. I am not a professional when it comes to Android app development. My notes here are the minimalistic things I have found to get things running without a bunch of files without having to use Android Studio and so if you have issues I don't know if I'll be able to help you but go ahead and ask below. I'll put a link in the description to this project. Again, just follow the instructions here on a Linux based system and you should be good to go. Thanks for watching. Visit filmsbychrist.com. That's Chris the K. There's a link in the description. I also have a Patreon page and as always I hope that you have a great day.