For an index to all my stories click this text
In the previous story I showed you what was (by my own findings) the best web-service that can turn a web-page into an Android APP. You can re-read that story here.
http://lucstechblog.blogspot.com/2024/03/webservices-that-turn-website-into-app.html
Another story showed how to write a simple game in Javascript. Re-read that story here.
http://lucstechblog.blogspot.com/2024/03/javascript-reaction-game.html
For those more interested in a serious app you can follow the story on how to build a console for Freeboard:
http://lucstechblog.blogspot.com/2023/08/freeboard-revisited-2.html
And this story tells how to use Github not only as a safe storage for your source code but also to turn HTML files into a webserver. You can re-read that story here: http://lucstechblog.blogspot.com/2023/07/using-github-for-building-website.html
In this web-log entry I am going to show you how to combine these to turn any web page or even html code (with Javascript) on your harddisk into a dedicated Android App.
If you want to follow the steps to build an app I urge you to read those previous stories and make sure you have your own website up and running on Github Pages, or have the HTML code ready on your harddisk.
First step: register at webintoapp
To make an app you need an account with webintoapp. So point your browser to https://www.webintoapp.com/register and create an account.
Once you are logged in you are presented with the dashboard.
As you can see in the Apps List I already made some apps. 
Next to the apps name there are three icons. Click the first one (the little cloud) to download an existing app. The second one allows for editing the apps info and settings. The third icon gives detailed info about the app and its home page on which details follow later on.
The icons at the top present the different possibillities. The settings show your activities, the way the apss are displayed and allows you to change your user name, password etc. Installs presents statistics about your app. Like how many times it has been downloaded, and from where (which country) it has been downloaded. This can be of value when you have a successfull app and you are planning to translate it into different languages.
The most important Icon however is the Maker. This is where it all happens.
Turn a web-page into an app
Click on the maker button/icon to start building your app from a webpage.
Let's look at the left part of the screen first.
At the top there is the choice of building an app from a website (Online URL) or HTML files. Default is building from an Online URL and we will start with this.
In the URL field fill in the name of the website. I used the Github Pages website which is https://lucvolders.github.io/htmltest02/ You may use that too as a test or use your own webpage.
Next give your App a name and a version number. I Choose Reaction as the name and did not alter the version number. You can alter the version number if you are publishing an update for your app.
As the Company/Brand name I choose my own name which resulted in the Package name com.luc.reaction.
Now let's have a look at the right part of the screen.
At the top you can see the icon that is choosen for the app. You can alter this by clicking on Set Icon or Find. Find opens a new browser window and directs it to flaticon, a website where you get access to thousands of free icons. Choose an appropriate one and download it to your computer.
You can also design your own icon. Make sure it is saved in the PNG format. I used an icon provided by Flaticon and downloaded that to my computer. Then I clicked on Set Icon and choose that file.
App Toolbar offers to alter the color of the App's toolbar.
The Splash Screen option is only for the premium version. A splash screen is a startup screen that is presented when your app starts. It can contain a logo and information about the maker or your company. The free version of Webintoapp does not provide for a splash screen.
I have not tried it by now but I presume you can make your own splash screen in HTML if you want one and are not willing to pay for Webintoapp.
Leave the Certification settings, Firebase settings and AdMob as they are.
The Settings icon at the bottom is what you might check into. The most important setting in the General tab is to enable Javascript (which is obvious) and if HTTP requests are allowed.
The permissions app is another important tab. For example if you really want to make sure that your app only works off-line you can set the Add Internet Permission off. Choose here what your app really needs. My reaction game for example needs none of these permissions so you could set them all off.
We are done with the settings for the app.
On the left side on the screen at the bottom click on Next.
The right side of the screen changes into the above.
If you need special features like a splash screen, an IOS version, Push notifications etc choose for the Dedicated Android and IOS App version and pay the fee.
If you do not need those extra's choose the Free Android APP and press Make App at the bottom.
And there is your app: Reaction V1.0
The file is downloaded into your Download folder. Move the folder to a working directory and unzip it.
There are some files in the zipped
folder that link to the webintoapp website and to your (Author) home 
The important files are in the android folder. There you will find the apk file. Transfer it with a USB cable to your phone and it is ready to be installed.
Easy installing your APP.
Besides transferring your app with an USB cable from your PC to your phone/tablet there is also an easier way.
Click on the settings icon next to your app. The drop-down menu has an entry called App Homepage. Click on that.
A new screen opens which gives the settings for a special dedicated homepage for this app. Set the Enable App Homepage switch to ON Choose an App Categgory and give a small description. at the top you can see the link to the homepage in this case it is: https://www.webintoapp.com/store/29818
And this is what the Reaction 1.0 webpage looks like. Access it with your phones browser and you can download and install it. Share the link with your relatives/friends/collegues etc so they can download the app themselves.
Turn HTML files into an app
If you did not make a webpage from your HTML files I presume you still have the files on the disk-drive of your PC. 
I made a folder on my PC's hard disk that contains the Icon and the HTML file. The previous part showed how to set the icon for the app. Do that first.
Make sure you have some software on your PC that can zip a file. I use 7zip (https://www.7-zip.org/).
Click on the index.html file with your right mouse-button and zip the index.html file.
In the App maker screen choose HTML Files and click on the upload symbol with the text Select ZIP File. Select the zipped index folder on your harddisk and follow the steps described in the beginning of this story to make your app.
That's all.
That is indeed all there is to building an App for your phone from some HTML files or from an existing web-page.
Make sure to note the Apps dedicated web-page so you can easily distribute your app to those that need it.
Till next time
Have fun
Luc Volders
