Contents
- Intro
- Gather Your Assets
- Splash Screen
- Browser Design
- The Code
- Download
1. Introduction
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!
original image
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:
Follow Links
Prompt for Permission
And these properties unchecked:
Use External Browser
Zoom Display
5. The Code
Initialize
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.
updateButtons()
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
6. Download
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!
Change log
2017-11-12 v3 initial release
Thunksten.aia (92.2 KB)
2017-12-04 v3.1 check for valid TLD based on @Futuredev’s post.
Thunksten.aia (104.8 KB)
2018-01-05 v3.14 Replaces Go button with list of “Tabs”. Adds TextBox Extension
Thunksten.aia (123.2 KB)