How to sync TinyDB And Google SpreadSheets Data?

Hello All

PLEASE HELP

I am looking for how to store the data of my Cards Products (image, product name, Price, weight and breakfast. By example Google Sheet Data) in TinyDB to operate them in offline if the Internet connection is not activated.

PS : My second concern is to save the corresponding images in cache thanks to the DevY extension and display them in offline (I can’t assemble the blocks)

Thanks in advance

AppCart Test.aia (777.5 KB)

Capture d'écran 2025-05-29 063252

@Abdoulaye_OUBALE can you show your schema (json list which is insert in template), it help to fix the error?

Hi Abdoulaye,

Possible solution

what is the problem, can U explain more?
because it look like correct.

if you want to fix error, U can send it here. with this formate
```
your json code
```

@Abdoulaye_OUBALE can you edit your response and add in staring & ending with the format, because it’s more readable.

{
    "name": "Green_Valley",
    "metadata-version": 1,
    "author": "Abdoulaye",
    "platforms": [
        "creator.kodular.io"
    ],
    "extensions": {},
    "keys": [
        "id",
        "img_prod",
        "nom_prod",
        "poid_prod",
        "brisure",
        "prix_prod",
        "img_select"
    ],
    "components": [
        {
            "id": "HSA_Riz{id}",
            "type": "HorizontalScrollArrangement",
            "properties": {
                "AlignVertical":2 ,
                "Width": -2
            },
            "components": [
                {
                    "id": "Space1{id}",
                    "type": "SpaceView",
                    "properties": {},
                    "components": []
                },
                {
                    "id": "Card_Prod{id}",
                    "type": "MakeroidCardView",
                    "properties": {
                        "AlignHorizontal": 3,
                        "AlignVertical": 2,
                        "BackgroundColor": -1118482,
                        "ContentPaddingBottom": 0,
                        "ContentPaddingLeft": 0,
                        "ContentPaddingRight": 0,
                        "ContentPaddingTop": 0,
                        "CornerRadius": 14,
                        "Width": 170
                    },
                    "components": [
                        {
                            "id": "VA_Prod{id}",
                            "type": "VerticalArrangement",
                            "properties": {
                                "AlignHorizontal": 3,
                                "AlignVertical": 2,
                                "Clickable": true,
                                "Width": -2
                            },
                            "components": [
                                {
                                    "id": "HA_Rupture{id}",
                                    "type": "HorizontalArrangement",
                                    "properties": {
                                        "AlignHorizontal": 3,
                                        "BackgroundColor": -1376500931,
                                        "Height": 38,
                                        "Width": -2,
                                        "Visible": false
                                    },
                                    "components": [
                                        {
                                            "id": "lbl_Rupture{id}",
                                            "type": "Label",
                                            "properties": {
                                                "FontBold": true,
                                                "FontSize": 14,
                                                "FontTypeface": 2,
                                                "Width": -2,
                                                "Text": "Rupture Stocks",
                                                "TextAlignment": 1,
                                                "TextColor": -1
                                            },
                                            "components": []
                                        }
                                    ]
                                },
                                {
                                    "id": "Space5{id}",
                                    "type": "SpaceView",
                                    "properties": {
                                        "Height": 10,
                                        "Width": -2
                                    },
                                    "components": []
                                },
                                {
                                    "id": "img_Produit{id}",
                                    "type": "Image",
                                    "properties": {
                                        "Height": 151,
                                        "Width": 95,
                                        "Picture": "{img_prod}",
                                        "ScalePictureToFit": true
                                    },
                                    "components": []
                                },
                                {
                                    "id": "Nom_Prod{id}",
                                    "type": "Label",
                                    "properties": {
                                        "FontBold": true,
                                        "FontSize": 13,
                                        "FontTypeface": 2,
                                        "Width": -2,
                                        "MaxLines": 50,
                                        "Text": "{nom_prod}",
                                        "TextAlignment": 1
                                    },
                                    "components": []
                                },
                                {
                                    "id": "Horizontal_Arrangement1{id}",
                                    "type": "HorizontalArrangement",
                                    "properties": {
                                        "AlignHorizontal": 3,
                                        "AlignVertical": 2,
                                        "Height": 18,
                                        "Width": -2
                                    },
                                    "components": [
                                        {
                                            "id": "lbl_Poids{id}",
                                            "type": "Label",
                                            "properties": {
                                                "FontBold": true,
                                                "FontItalic": true,
                                                "FontSize": 12,
                                                "Height": 18,
                                                "Width": -2,
                                                "Text": "{poid_prod}",
                                                "TextAlignment": 1
                                            },
                                            "components": []
                                        },
                                        {
                                            "id": "lbl_Brisure{id}",
                                            "type": "Label",
                                            "properties": {
                                                "FontItalic": true,
                                                "FontSize": 12,
                                                "FontTypeface": 2,
                                                "Height": 18,
                                                "Width": -2,
                                                "Text": "{brisure}",
                                                "TextAlignment": 1
                                            },
                                            "components": []
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "id": "Horizontal_Arrangement2{id}",
                            "type": "HorizontalArrangement",
                            "properties": {
                                "AlignHorizontal": 3,
                                "AlignVertical": 2,
                                "Height": -2,
                                "Width": -2
                            },
                            "components": [
                                {
                                    "id": "Card_Prix{id}",
                                    "type": "MakeroidCardView",
                                    "properties": {
                                        "AlignHorizontal": 3,
                                        "AlignVertical": 2,
                                        "BackgroundColor": -11751600,
                                        "ContentPaddingLeft": 10,
                                        "ContentPaddingRight": 4,
                                        "ContentPaddingTop": 2,
                                        "CornerRadius": 10,
                                        "Elevation": 0
                                    },
                                    "components": [
                                        {
                                            "id": "lbl_Prix{id}",
                                            "type": "Label",
                                            "properties": {
                                                "FontBold": true,
                                                "FontSize": 14,
                                                "FontTypeface": 2,
                                                "Width": -2,
                                                "MaxLines": 20,
                                                "Text": "{prix_prod}",
                                                "TextAlignment": 1,
                                                "TextColor": -1
                                            },
                                            "components": []
                                        }
                                    ]
                                },
                                {
                                    "id": "Space4{id}",
                                    "type": "SpaceView",
                                    "properties": {
                                        "Width": -2
                                    },
                                    "components": []
                                },
                                {
                                    "id": "img_Add{id}",
                                    "type": "Image",
                                    "properties": {
                                        "Clickable": true,
                                        "Height": 25,
                                        "Width": 25,
                                        "Picture": "Add.png",
                                        "ScalePictureToFit": true
                                    },
                                    "components": []
                                },
                                {
                                    "id": "Space1_copy_copy{id}",
                                    "type": "SpaceView",
                                    "properties": {
                                        "Width": 6
                                    },
                                    "components": []
                                }
                            ]
                        }
                    ]
                },
                {
                    "id": "Space1_copy1{id}",
                    "type": "SpaceView",
                    "properties": {
                        "Width": 10
                    },
                    "components": []
                }
            ]
        },
        {
            "id": "Decoration1{id}",
            "type": "Decoration",
            "properties": {},
            "components": []
        }
    ]
}
1 Like
  1. You pass the image url in schema as a blank or custom loading image & pass main url in dev img loader (already added correct)

Add

“Picture”: “{img_select}”,

  1. Follow this for offline

I did not understand what points 1 & 2 is for. I have already assembled point 3
I adapted my Schema as you recommend me
But the image “add.png” is stored in assets

Question: How to load it dynamically like other images?

Capture d'écran 2025-05-31 150028

And when I’m offline it just shows me the alert but it does not create the cards produced with the corresponding images.

image

put blank or loading image from assets, it help to prevent main URL loading & U already set for caches images block correctly

download it, it is png (may be blank bg)
load.png

image

I can’t still load offline images.
When I reopen the application in offline ..plus nothing is displayed outside the alert ‘’ no data found ‘’

Capture d'écran 2025-05-31 151349

do u implement it for offline & if you try U can share blocks

and why u remove add.png, add it at previous only upper part change which is done now

blocks (13)

totally block of screen3

and fix it

Capture d'écran 2025-05-31 153215

Capture d'écran 2025-05-31 153604

{
    "name": "Green_Valley",
    "metadata-version": 1,
    "author": "Abdoulaye",
    "platforms": [
        "creator.kodular.io"
    ],
    "extensions": {},
    "keys": [
        "id",
        "img_prod",
        "nom_prod",
        "poid_prod",
        "brisure",
        "prix_prod",
        "img_select"
    ],
    "components": [
        {
            "id": "HSA_Riz{id}",
            "type": "HorizontalScrollArrangement",
            "properties": {
                "AlignVertical":2 ,
                "Width": -2
            },
            "components": [
                {
                    "id": "Space1{id}",
                    "type": "SpaceView",
                    "properties": {},
                    "components": []
                },
                {
                    "id": "Card_Prod{id}",
                    "type": "MakeroidCardView",
                    "properties": {
                        "AlignHorizontal": 3,
                        "AlignVertical": 2,
                        "BackgroundColor": -1118482,
                        "ContentPaddingBottom": 0,
                        "ContentPaddingLeft": 0,
                        "ContentPaddingRight": 0,
                        "ContentPaddingTop": 0,
                        "CornerRadius": 14,
                        "Width": 170
                    },
                    "components": [
                        {
                            "id": "VA_Prod{id}",
                            "type": "VerticalArrangement",
                            "properties": {
                                "AlignHorizontal": 3,
                                "AlignVertical": 2,
                                "Clickable": true,
                                "Width": -2
                            },
                            "components": [
                                {
                                    "id": "HA_Rupture{id}",
                                    "type": "HorizontalArrangement",
                                    "properties": {
                                        "AlignHorizontal": 3,
                                        "BackgroundColor": -1376500931,
                                        "Height": 38,
                                        "Width": -2,
                                        "Visible": false
                                    },
                                    "components": [
                                        {
                                            "id": "lbl_Rupture{id}",
                                            "type": "Label",
                                            "properties": {
                                                "FontBold": true,
                                                "FontSize": 14,
                                                "FontTypeface": 2,
                                                "Width": -2,
                                                "Text": "Rupture Stocks",
                                                "TextAlignment": 1,
                                                "TextColor": -1
                                            },
                                            "components": []
                                        }
                                    ]
                                },
                                {
                                    "id": "Space5{id}",
                                    "type": "SpaceView",
                                    "properties": {
                                        "Height": 10,
                                        "Width": -2
                                    },
                                    "components": []
                                },
                                {
                                    "id": "img_Produit{id}",
                                    "type": "Image",
                                    "properties": {
                                        "Height": 151,
                                        "Width": 95,
                                        "Picture": "{img_prod}",
                                        "ScalePictureToFit": true
                                    },
                                    "components": []
                                },
                                {
                                    "id": "Nom_Prod{id}",
                                    "type": "Label",
                                    "properties": {
                                        "FontBold": true,
                                        "FontSize": 13,
                                        "FontTypeface": 2,
                                        "Width": -2,
                                        "MaxLines": 50,
                                        "Text": "{nom_prod}",
                                        "TextAlignment": 1
                                    },
                                    "components": []
                                },
                                {
                                    "id": "Horizontal_Arrangement1{id}",
                                    "type": "HorizontalArrangement",
                                    "properties": {
                                        "AlignHorizontal": 3,
                                        "AlignVertical": 2,
                                        "Height": 18,
                                        "Width": -2
                                    },
                                    "components": [
                                        {
                                            "id": "lbl_Poids{id}",
                                            "type": "Label",
                                            "properties": {
                                                "FontBold": true,
                                                "FontItalic": true,
                                                "FontSize": 12,
                                                "Height": 18,
                                                "Width": -2,
                                                "Text": "{poid_prod}",
                                                "TextAlignment": 1
                                            },
                                            "components": []
                                        },
                                        {
                                            "id": "lbl_Brisure{id}",
                                            "type": "Label",
                                            "properties": {
                                                "FontItalic": true,
                                                "FontSize": 12,
                                                "FontTypeface": 2,
                                                "Height": 18,
                                                "Width": -2,
                                                "Text": "{brisure}",
                                                "TextAlignment": 1
                                            },
                                            "components": []
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "id": "Horizontal_Arrangement2{id}",
                            "type": "HorizontalArrangement",
                            "properties": {
                                "AlignHorizontal": 3,
                                "AlignVertical": 2,
                                "Height": -2,
                                "Width": -2
                            },
                            "components": [
                                {
                                    "id": "Card_Prix{id}",
                                    "type": "MakeroidCardView",
                                    "properties": {
                                        "AlignHorizontal": 3,
                                        "AlignVertical": 2,
                                        "BackgroundColor": -11751600,
                                        "ContentPaddingLeft": 10,
                                        "ContentPaddingRight": 4,
                                        "ContentPaddingTop": 2,
                                        "CornerRadius": 10,
                                        "Elevation": 0
                                    },
                                    "components": [
                                        {
                                            "id": "lbl_Prix{id}",
                                            "type": "Label",
                                            "properties": {
                                                "FontBold": true,
                                                "FontSize": 14,
                                                "FontTypeface": 2,
                                                "Width": -2,
                                                "MaxLines": 20,
                                                "Text": "{prix_prod}",
                                                "TextAlignment": 1,
                                                "TextColor": -1
                                            },
                                            "components": []
                                        }
                                    ]
                                },
                                {
                                    "id": "Space4{id}",
                                    "type": "SpaceView",
                                    "properties": {
                                        "Width": -2
                                    },
                                    "components": []
                                },
                                {
                                    "id": "img_Add{id}",
                                    "type": "Image",
                                    "properties": {
                                        "Clickable": true,
                                        "Height": 25,
                                        "Width": 25,
                                        "Picture": {img_select},
                                        "ScalePictureToFit": true
                                    },
                                    "components": []
                                },
                                {
                                    "id": "Space1_copy_copy{id}",
                                    "type": "SpaceView",
                                    "properties": {
                                        "Width": 6
                                    },
                                    "components": []
                                }
                            ]
                        }
                    ]
                },
                {
                    "id": "Space1_copy1{id}",
                    "type": "SpaceView",
                    "properties": {
                        "Width": 10
                    },
                    "components": []
                }
            ]
        },
        {
            "id": "Decoration1{id}",
            "type": "Decoration",
            "properties": {},
            "components": []
        }
    ]
}

every thing look like fine, u can debug the url of image which extract.
can you share the preview of app (by recoding & upload on gdrive & share link)

WhatsApp Image 2025-05-31 à 15.46.06_a6bbe536

For the storage of images I use the direct PostImage links and not Gdrive

And here is the .aia file:
Greenv_New (2).aia (1.8 MB)

it preview is online or offline & its works in offline?

This overview is on one online and precisely I am looking for how to make it functional in offline

in this

  1. make a producers in got text → from remove list from list to below in one
  2. call it in got text as well as screen init → else section

i hope it fix the issue

Like this :
blocks (14)