Tips to reduce number of Screens and Components in your Apps


#1

Introduction

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 :ireland:, 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! :grinning:

Design

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.

Code

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! :cry:

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:

Conclusion

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 :heart: button at the bottom of this post to let me know you liked it.

Thanks!

phrase_finder.aia (8.1 KB)


Arrangements Buttons and Labels
IS there any way to copy Design
Build failed! Sorry, can't package projects larger than 10MB. Yours is 14.92MB
Listview & Linking
Problem with 'any' block
App crashes when new screen is opened
How Many screen Can I add in one app
How Many screen Can I add in one app
Making screen more than 10 and capacity more than 10 mb
How to make heavy app?
Need help to make different screens with only one screen
#2

Great tutorial as always! :heart: You have created so much tutorials, maybe it’s a good idea to create a table of content? I love your tutorials, keep up the good work!


#3

Nice suggestion! Would that be just one post with links/descriptions of all the tutorials? I’m open to ideas.


#4

Yes, that would make it more clear


#5

thank you sir this solve all my doubts. thanks a lot for make this tutorial.


#6

No problem at all…happy to help! :smile:


#7

Hello sir i go through this full tutorial and successfully create my list and manage everything in just 2 vertical arrangements.
As you told to make list here i made same as it. In this tutorial you use 6 list and call them when screen initialize. Screenshot_6

I have around 30 lists so i use a procedure to gather them all and call the procedure when screen Initialize. Now i’m getting this errorScreenshot_7
only first few list show the text and other show nothing.
Please help to solve this problem.
Thank you for your tutorial.


#8

You could disable your lists one by one to see which one is causing the error


#9

I’d use a binary search here… remove 15, then 7 then 3 or 4…you should find the offending block in a few moves. :wink:


#10

Great tutorial as always! :heart: I love your tutorials, keep up the good work!


#11

I got 3 blocks which making trouble, rest all are working well. Trying to figure out the problem :slight_smile:


#12

Hello thunkable friends i need a help.
i have 3 main group and 1 button list.
i use CSV row text to change name of buttons for every group so that reduce my buttons and arrangements thanks to @Domhnall for great tutorial.
I want set different sounds for all buttons for every group.
how can i set blocks for it. files are .amr
i tried to with list but it play same sounds for all groups