- Gather Your Assets
- Splash Screen
- Browser Design
- The Code
The most important part of developing any app is, of course, to have a catchy name Since this app in inspired by - and indeed built on - Chrome, I consulted Mendeleev’s masterpiece in search of inspiration. Although I have a natural affinity for the number 42 I just didn’t think that “Molybdethunk” had much of a ring to it, and thus Thunksten was born!
2. Gather Your Assets
For this app I made use of the free resources provided by Google through material.io. Just do a quick search for what you’re looking for, download the images you want for your app and upload them to Thunkable.
3. Splash Screen
In general I try to avoid putting anything important on Screen1, if you want to have a multi-screen app it’s a good idea to leave Screen1 as manager for your other screens, or as a dashboard. For this app I’ve just created a simple splash screen. and you can style it however you like.
Note that the
timer interval determines how long the splash screen stays visible for. The blocks aren’t perfect, but for this simple app they’re ok.
4. Browser Design
In the desktop version of Chrome the top bar has buttons for Back, Forward, Reload and a TextBox for the URL.
I think the design is a little bit crowded but you’re welcome to improve it as everything here is open source! The main things to look out for are on the
WebViewer, make sure that you have these properties checked:
Prompt for Permission
And these properties unchecked:
Use External Browser
5. The Code
When the app loads it simply points the browser at the
Home URL and checks to see if it should update any of the buttons.
To minimise repetition in this app I used a procedure to check whether or not it was possible to move forwards or backwards.
You could use something similar to this if you wanted to create a simple browser history.
Forwards and Backwards
These buttons are pretty similar, it just used the
Go Forward and
Go Back functions of the
Web Viewer component.
The extra bit of code just checks to see if the user want’s to exit out of the app.
Create Your URL
The main thing to be careful of when using the
Go To Url procedure is to make sure the URL starts with a protocol such as http:// or https://, since most people don’t typically type this we have to do it for them, otherwise the web viewer won’t be able to load the page
There’s more code and plenty of room for improvement in the aia. Take a look for yourself in the change log below:
I have lots if ideas for version 2, but feel free to suggests new features and improvements. If you use this as part of your own app please let me know!
2017-11-12 v3 initial release
Thunksten.aia (92.2 KB)
2018-01-05 v3.14 Replaces Go button with list of “Tabs”. Adds TextBox Extension
Thunksten.aia (123.2 KB)