Firebase + Datasource + DataViewer Approach

Hi Thunkers!

Sorry for the long text, but I need first explain what I’m trying to do, in order you understand what is the pain. :slight_smile:

I’m want to learn the best approach for a social application, with a timeline similar to Facebook. The idea is a car lovers social platform, so the user can post texts and images (maybe videos?) that will be viewed, liked and commented on by him and others.

After login, the application has an initial screen with the timeline, and a second screen that displays the details of a publication (image, comments and likes). Take a look what I have done until now:

ezgif-2-c8631ffad2

My first choice was to use the obvious combination of Firebase + Datasource (with local tables) and DataViewerList (with custom layout).

Regarding the visuals I managed to come up with a beautiful design, but the execution / user experience is still bad. I ran into 3 major problems with this approach:

  1. Dataviewer update when the user modifies something in the secondary screen: in some cases what the user modifies on the secondary screen is not automatically reflected from the main dataviewer, even though I update Firebase and the datasource that feeds the Dataviewer.
    Then you will tell me, “it’s just a matter of refreshing the dataviewer”. Yes, the problem with doing this is that it creates an “ugly” visual effect, as all the data disappears from the grid to be reloaded later, in addition the grid returns positioned on the first line, causing it to lose the reference to where it was positioned previously.
    In theory, when you update the datasource, the data should be automatically reflected in the Dataviewer, but there are situations it works, and situations it doesn’t!

  2. Slow Performance of data loading and waiting blocks on loops: As loading/displaying data from the cloud is costly (in terms of time and money), and also having observed how slow it is to create new rows in a datasource as well as taking considerable time displaying a lot of images in dataviewer, in order to provide a smoothly user experience I had to create a strategy of loading data as much anticipation possible and in batches (loops that reads 10 rows at a time in the timeline). To do this I have variables storing the first and last lines were read, and create a button external to the Dataviewer to load more feeds, and a button to force the reading of new feeds.
    But I’m having some app fatal crashes when the user goes out to the secondary screen, modifies something and then goes back to the main screen but the app was still in the feed reading loop. It’s not always, but sometimes it happens.

  3. Sync data when another user changes something (eg posted a new comment or liked a post/comment), the correct thing would be to update the dataviewer on the affected lines. But I didn’t even try to deploy this since even the changes made by the user are failing to update. So, only when the user reloads the data and updates the dataviewer he will “realize” that something has changed, or read the notification the app will send. It’s not cool, but for lack of a better solution, I left it at that for now.

The speed and synchronicity issues are maddening, because you have to manage 3 “layers of data” (Firebase, datasource e dataviewer) dealing with the sync issues, predicting the behavior of each type of component, put wait blocks (slowing the app), control multiple variables with red/green flags and guess the weird actions the user cand do and cause application crashes.

I know it’s hard to provide advising without “read the code”, but because is a lot of blocks it’s impossible to paste it here, so the idea is to discuss in general what is the best approach for an app with this kind of requirements.

Be sure I tried to avoid the pitfalls of the sync issues, but considering the results obtained so far and the enormous effort working to solve these issues, I’m wondering if maybe it wouldn’t be better to change the approach of use Firebase + Datasource + Dataviewer to work with the combination of Firebase + Cloning Components (to clone labels and images components) to create the rich viewer this type of App requires.

But as I’ve never used this components class, and from the research I’ve done, I’ve seen that it’s not something easy to manipulate, and I don’t know how I would update the data on the main screen without having to read everything again.

I must confess that after a long time trying to make it work, you get the feeling that there is no way to reconcile all this in Thunkable, given itss limitations and characteristics of a low code tool.

So before I spend any more time trying to find a solution, I’d like to hear the experts’ opinions on what would be a way to get a smooth running implementation for cases like this.

Thanks for reading, be sure any help will be appreciated!

Regards,

Paulo Vaz

I wouldn’t use firebase to create a social feed, firestore sure, but not firebase. due to the none-limited filtering abilities. Imagine when you have 10,000 users posting daily, you dont want to fetch all records. you want to fetch a particular subset of the records based on date, interests, following/not following, etc.

It doesn’t need to update instantly. Not even facebook does this for us. though it does let us know when we should refresh our view by saying there were updates. (if it does realtime update, i obviously have no clue cause i don’t use it that much).

Step 1: use an appropriate relational DB such as xano or backendless or even Firestore.
Step 2: query based on dates/times/user info and use pagination to return smaller snippets of larger data sets.
Step 3: ensure. that any image used has been optimized and that you arent sending original image files as these tend to be larger than needed. to display nicely on a mobile device

question: why are you using wait blocks in a loop?

1 way to update a single row,:
your data from your db should have record ID’s
when you bring data in, assign a recordID to a field in the table the dvl is bound to
you could configure the app to create an alert for a user when a particular record has been updated (the like or comment count for example). this could be a record in a table called alerts with a few pieces of info. the app updates a “been seen”. field. you can poll this table regularly to check for updates and keep the user informed.
the app could alert the user by saying “you need to check record X”
when it checks record X, it can also find that specific row. in the local table via VLookup and then correct only that row of info.

My starwars WDC project made use of filtering data from xano on the server side and it worked out great IMO. did you get a chance to check it out?P

Hi Jared, thanks for the considerations!

Many of the data structure and deployment strategies you mention I’m already using.

Thats why I said that it’s hard to provide advising without read the code…

Anyway, let me leave some comments on your answer:

Well, I’m trying use the native components as much as possible to facilitate the development, and also because I have no experience integrating external DBs to Thunkable via API. And because we don’t have “global functions” avaliable, I think will be necessary to repeat lots of blocks along the project screens.

That’s why I’m loading blocks of 10 rows each reading cicle. To do that, I get the top and bottom row ID’s, and store the last I read, reading in order from the last to the first. So if the last row read isn’t the first available, I show a button “load more feeds” to the user. This way I’ll avoid overcharge the loading process, and can do some filtering from blocked users.

I agree. Thats why I really don’t care to implement this. I create a “notification system” that allow users be informed of any comment or like received. And when the user refresh the dataviewer (when re-open the app, click on the “refresh button” on top, or even the app forces it to refresh, the data will be updated.

I have no experience with this, so will be a challenge for me, due the short deadline I have to make this app ready-to-use. But I’ll try to d osome reasearch. My first tought was to avoid to have learn new things, because If I need to do it, maybe other no-code platform can fit better than Thunkable to do it (FlutterFlow, for example has NATIVE support to Firestore making easier to implement).

This is done as explained above. So isn’t not a big issue for the project. The real issue is the refresh data in the Dataviewer after the user do changes in the secondary screen. If the user for example, likes a comment or post, or add a comment, it’s a MUST to update instantly, because was done by the own user.

This I will do using the Cloudnary, but via custom API, because the native support to cloudnary is very limited (and that’s the reason I requested improve this support in my 43 ideais for Thunkable support).

When I load data from Firebase, first I need to delete / create the rows on the datasource that will be displayed in the Dataviewer. I need to put some waiting blocks in order to not having erratic values when saving variables values in the datasource.

Already have a single ID to each post & comment.

Yes, thats my current strategy.

Yes my app have this approach by design.

No, I didn’t have chance to take a look, because I’m very busy developing my apps. But I will.

The problem when you work “standalone” is the fact you don’t have free time to do some R&D, you need just to deliver projects and fullfill the deadlines, and that’s it. That’s why I choosed a no-code tool, to save time, but for the type of projects I’m trying to develop, I see the no-code platforms have a very limited support.

Anyway focusing in my current pain, I just need to solve this sync issues when the user changes something on other screen and returns to the grid. I just don’t know why the data isn’t updated correctly in the dataviewer, despite I use the datasource “update row” block.

can you share a minimal. example in which the data isn’t updated? I can’t seem to replicate the issue.

Sure.

Just as an example, I will paste below the piece of code that saves the data to Firebase (works perfectly) and updates the Datasource (works) to display in the connected Dataviewer (fails).

This block runs when the user clicks on a Comment “:heart: Like” label on the “Feed Details” comment’s dataviewer (remember the timeline Dataviewer is in the main screen with the amount ok likes and comments).

When return to the timeline screen the dataviwer was not updated, despite the datasource changes.

I dont see in here where you are updating the table?

Sounds like you’d like 2way binding to occur?

Well, I update Firebase, and after the datasource.

This action will guarantee the data integrity and force the dataviewer to be updated, don’t?

no. you are updating your data source, you need to refresh the data viewer OR paint the new value onto the dataviewer.

Look this example project I made as “proof of concept” to develop my approach:

https://x.thunkable.com/projects/628c1e5e6905f500120bfc18/41953d87-99cd-4277-9648-d803cc0a5852/designer

Based on the fact that the dataviewer is not automatically updated when the datasource is changed on another screen, I was thinking that when I return to the 1st screen I need to “capture” all the changes done in the 2nd screen and do a “manual” refresh in the dataviewer affected row, right?

I don’t want to use the dataviwer refresh block to avoid that “blanking/flicking” effect…