Custom Image Caching System in Apps | Kodular

Image-caching-system-in-kodular

Hey! Guys, if  you wanna to cache images in your Kodular project and maybe you are using Dynamic Images Component and this component does not support any of the Online Image loading Extensions like PedrozaGlide or AsyncImageLoader Extension. The Only way is to Use Image Utilities Component to load images in Dynamic Images, Which still does not provide any  Caching Support.

Demo APK and Demo AIA files available click on the link below as per your needs: 

For Demo Apk File : Click Here

For Demo Aia File : Click Here 

So let’s get started with our Project: 

Project Overview ( Functioning ):

In our demo project we are going to create a project using dynamic components where we are using dynamic Label, Dynamic Cardview and Dynamic images component from Kodular to load some images from the server and catching it into the uses mobile device in the cache folder.

Extensions Used: 

  • Component to image Extension
  • TaifunFiles Extension

Uses of Extension used: 

  1. Component to image Extension: 

Component to image extension will help you to save the image that is loaded by the app from the web server into your users device in your cache folder in an easy way without using your uses internet twice for separately downloading the image file.

2. Taifun Files Extension: 

Taifun Files extension will help you to check your users cache folder for the images that have been saved or not in the user’s device as cache files in your app’s folder.

Designer Part: 

Under designer section of the app we have just taken a vertical arrangement along with dynamic components and the extensions into the project what are the things are to be done in blocks part of the project as all the things are dynamically so we have not that much things in our designer part.

Blocks Part : 

  • Inblock section you have to firstly makeup blocks with the dynamic components so that you can touch the URL of your images from the web server in anyway you want because in this guide our focuses on catching Note on how to get images from the web server.
custome-image-caching-in-kodular-blocks1
Images Saved on Server
  • Secondary before loading the image from the web server with the image utility component you have to firstly check out that is your image is already saved in the user device and after that you have to take action respectively if you want to load the images from the back if it is already catch you then use your local path for the image. Here the TaifunFiles Extension  is used to check that the file is already saved or not.( refer the blocks images below)
Loading Images and Checking for Cache
  •  After that, on the other hand if the user had open the app for the first time then the cache folder must be empty and you have to catch the images from your app and save it into the cache folder  and here we are using component to image extension which will help us to change that already fetched image into an image in our uses device which will save our blocks and as well as your users data from separately downloading the file and saving it into the  Catch folder.
saving images as cache in user device
  • Here we have used Dynamic Label Component to change as per if the Image is loading form the web then it;s text will be like this “Image is Loading from the Web Server…” and if the image is used form  the local cache Folder then it’s text will be “Cached Image is Updated!
  • Clock is used to cache the loaded images after after the fixed time when all the images are probably loaded.

Leave a Reply