The ability to recognise patterns is an important skill for anyone to have if they want to develop scalable and maintainable apps.
When working with UI components it’s easy to think of the
Image component as being like a picture frame, but perhaps this is not the best analogy. For example, if I want to hang 10 paintings in my house I need 10 frames to display them in, and if I get a new painting I need a new frame to display it in. A lot of people seem to think the same way about their apps. If they want to display 10 titles and 10 pictures they will create 10 screens and add in the same components over and over again.
In reality, the
Image component is more like a digital frame, if I have 10 photos I can put them on an SD card and the frame scrolls through all the photos. Similarly if I have thousands of photos I can still use the exact same frame without any issues.
This is much more similar to what we have in Thunkable. One component can be reused over and over again, the main benefit of this being that it reduces the size of your app.
Phrase Finder App
Inspired by this request from @gurmeet I made a quick phrase finder to help you all improve your Irish , but rather adding in thousands and thousands of UI components I’ve reduced the number of UI components dramatically by using procedures and lists.
Oh, and you’ll also learn how to create super efficient and scalable apps too…read on!
For the demo there are just 3 categories, but it should be pretty easy to scale. If you include the dash board, a lot of people would be tempted to add in 4 screens straight away, but in this app everything is displayed on
Screen2 and Vertical Arrangements are used to display the buttons:
In the arrangement that contains all the phrases I’ve gone for a scroll arrangement since Gurmeet said he wanted 40 phrases. In the current design there are 7 phrases, but by using a scroll arrangement we can add in many more if we want and the user will be able to scroll up and down easily through them all.
The key to getting all of this to work is to use lists and loops. For each set of phrases we need two lists, one for our native language and one for the language we are learning.
If you wanted a maximum of 25 phrases in your app you would have to have 25 buttons in the
listOfButtons, so this part has to be added in manually with the blocks but all the phrases themselves could just as easily be stored in CSV files for example, or you could even use Cloudstitch to make it easy to update your app and add in new phrases.
Procedures are used to reduce the amount of repetition in our apps. So, for example, toggling the arrangements or displaying the buttons is something that we do over and over again which makes these actions good candidates for their own procedures.
By using procedures we’ve now greatly reduced the number of blocks needed on our main menu, just 21 blocks are needed to get the navigation working.
Finally, just to illustrate why we should use procedures as much as possible, here’s what it looks like to handle all the button clicks manually.
As it happened, I didn’t like the notifier and wanted to change to a label instead, so I had to make 7 changes. If I had 40 buttons this one change would require 40 blocks to be changed!
Instead, of course, the best way to approach this would be to use procedures. So if we set the app up like this:
Then changing the
Notifier for a
Label would only require a single change in the procedure, like this:
Hopefully this will help you create more flexible apps, with fewer components and take up less of your time when you need to make small, repetitive changes.
Because I’m sound you can even have the aia file to play around with yourself, but don’t forget to click the like button at the bottom of this post to let me know you liked it.
phrase_finder.aia (8.1 KB)