How to turn your NEW Google Sites into a Mobile App

in today's video I'm going to show you how you can turn a Google Sites into a mobile app this is another flipped classroom tutorials let's start by going into our Google Drive and creating that Google Sites so click on new more and then in Google Sites now the Google Sites that we're going to create is going to be a very simple Google Sites where I'm going to demo some of the features that Google Sites has available to us so let's just give it a quick title we're going to call this my site as an app now I'm going to change this format into a heading and I'm going to change the image now I'm going to upload my very own image which I have found on karate so graph H is a great website where you can find royalty-free images now this is now uploading the image and there we go now I'm going to scroll down I'm going to add in a second part where I'm going to add a bit of text welcome to this website demonstrating how you can turn the new Google Sites into a mobile app there we go we're going to simply align this in the center now we're going to add another image in here so I'm going to go to upload find the image I would like to insert there we go again we're going to stick to a rock music style theme and is now uploading this image now below these two sections I would like to have a third section and in this third section I'd like to have a YouTube video so I'm going to go to embed from the web simply paste my YouTube URL and it is going to pull in the video now alternatively I could select Google embeds YouTube and search for the video manually I'm going to just enlarge this slightly bring it to the middle there we go so we now have a very simple basic website it's one-pager let's have a look at the preview my site is an app I can scroll down have a video and when I click on play this video plays in my website now I would like to have this website as a mobile app so I want to display this on a mobile app on a mobile device now the first thing you have to do is make sure that your website is published so go ahead and click on publish we're going to give this a web address and I'm going to call this a web site or web site for app and this gives us the complete URL of this web site now who can visit my site I'm going to manage that as well because I wanted public on the web so we're going to change that here we're going to say anyone can find and view the published website save there we go and we are going to click on done now when I click on publish this is now publishing my website and creating a URL that's specific for this website now let's click on the view and here we go this is the specific URL that this website links to so if I open up a new incognito window I can type in that URL and I will be brought to my public published websites here you go my site as an app scroll down and here we have the embedded YouTube video now for you to turn this into a mobile app we are going to use thank able now if you've remembered from my previous video thank able is a very easy to use app creator that allows you to create an app and code it by using blocks similar to the way scratch works so go ahead and go to thunka Bolcom now again links to all these websites will be in the description below now I'm going to click on sign-in I am going to create an Android app so I can demonstrate this on my own personal device here we go now I'm going to create a new you app just like we did last time and I'm going to call this app my Google site now the reason I call it my Google site is because I'm highlighting and demonstrating to you how to embed and use a Google site as a mobile app so the first thing you want to do is make sure that this title here at the top where it says screen 1 that this is actually titled the correct title so we're going to turn this screen 1 title into my Google site there we go now again this could be anything you want it to be I want the title bar color to match the site I'm going to embed so I'm going to go with red there we go now this immediately shows me the preview of this app I am also going to make sure that with the sizing I have a responsive design which means that when my website gets gets pulled in my application is going to be responsive and automatically adjusts sizes so once you've done these steps then it's very easy for you to move on to the next step now down the side and the user interface when you scroll down you will find a web viewer simply drag this element onto your application and put it where it belongs in the middle now once you've done all this what's very important is that you are going to go to the properties and that you paste that Google Sites home URL into this box so let's go ahead and open up our Google Sites let's copy the URL return to thank able and paste it into our home URL box there we go we now have our websites embedded into our Google Sites now in addition to this I would like to add an extra button down the side so I'm going to add a button underneath this and this button is going to have the text go to ECHA flip which is my blog there we go now obviously the width of this will have to be a fill parent with there we go and so what's going to happen our users are going to open up the application but they are going to see the web viewer the web viewer is set to our predefined Google Sites and when they click on this button the website will change to my blog so that suggest is button to have a similar background color so we're going to go again with red and we are going to make the text and font typeface Roboto and bold there we go so this is what my application will look like now go ahead and go into the blocks section now the blocks is where we can code our websites now we are going to click on the button and when button one is clicked we are going to call web viewer one to go to the following URL and then we're going to simply put the URL into a box there we go and we paste our at you flip URL so now whenever the button is clicked the web viewer will change so let's go ahead and test this application let's click on tests thank about live now this gives me my QR code again so what I can do now is I open up the thinkable app on my mobile device so let's go ahead and open up the thumb Keable app we are going to scan a QR code which is the QR codes displayed on my computer there we go it is going to open up the application as you can see at the top we have my Google Sites this is all functioning as an independent app we can scroll down it looks like a beautiful Google Sites I can watch the video within my application pause this video and I can also tap the button down below which says go to edge of flipped open apps when I tap that button here I am on my blog and that's all there is to it now if you're happy with your application and you liked what you saw then simply click on export and get your apk file now thank you ball is going to compile your file it's going to build it build it the actual app and once finished is going to give you that apk file that you can then either share with friends and family install it on the devices or you can submit to the Play Store for approval and that's all there is to it as you can see I have my apk file and I can now submit it I hope you found this helpful I would love to know what you are going to use this function for let me know in the comment section below let me know what else you would like me to do using thumb Keable or any of these other applications and I will make sure that I find time to create a video doing just that if you enjoyed this video don't forget to give it a thumbs up subscribe to the channel and hit that bow notification so you are notified of all my future videos for now thank you for watching and I will see you in the next one

Channel: Flipped Classroom Tutorials

Views: 369,701

Keywords: Eduflip, Teaching with Tech, eduflip.net, NEW Google Sites, Turn your Google Site into an app, Turn your Google Sites into a great app, Making apps with Google Sites, Make your own apps, Use Google Sites to make an app, Create an app with Google Sites, the NEW Google Sites is create for websites, turns your website into an app, Google Sites, Using Google Sites better, How to use Thunkable, How to use thunkable to make an app with Google Sites, Making an app without code

Id: Aflbbvw25xA

Length: 9min 42sec (582 seconds)

Published: Tue Feb 27 2018