Open Source Project - Crypto News App (UPDATE #4: Image Caching, Internet Connectivity & Duplication Fix)

The aim of the application is to fetch news feed from preferred blogs and display on the application. It is structured in such a way that you can scroll through them like you would do on your social media timeline. It also leverages you the ability to read any of these news, right there on the app without having to open another browser application.

Previous Updates

• Open Source Project - Crypto News App
• Open Source Project - Crypto News App (UPDATE)
• Open Source Project - Crypto News App (UPDATE #2: Favourite posts Section)
• Open Source Project - Crypto News App (UPDATE #3: Share Post Functionality)

Updates

• Caching: The Image Sources for all the posts are url links to the actual image which are obtained from the API therefore, each time the application is ran and these image resource required, it is always reloaded from the web. In previous versions, when the user was not connected to the internet, the image was never loaded. This kills the presentation as well as user experience for the application when offline.
  
  The featured image does not appear

In this new update, I enabled caching for images, so when internet is unavailable, the runtime loads the cached image from the file system leading to an improved performance and user experience.
I set the cache to be stored for 21days (meaning that the images will be downloaded and stored in the user's device for later use, for three weeks, after which it will be removed)

                             <Image Margin="0">
                                                <Image.Source>
                                                    <UriImageSource Uri="{Binding FeaturedImage}" 
                                                                CacheValidity="21" 
                                                                CachingEnabled="true"/>
                                                </Image.Source>                                               
                                    </Image>

• BlogPosts.xaml

• FavouriteBlogPosts.xaml
  

• Internet Connectivity: The application is by default designed to work with internet connection, but in situations where internet connectivity is not available, the application usability becomes very poor, coupled with undesired scenarios such as
  
  

  Web Page not available

Continuous loading without end

---

To solve problems related to non-availability of internet, I perform a connectivity check in my method before the next action is taken.

private async void OnSinglePostSelected(object sender, SelectedItemChangedEventArgs e)
        {
            if (e.SelectedItem == null)
            {
                return;
            }

            if (CrossConnectivity.Current.IsConnected == false)
            {
                await DisplayAlert("Not Connected", "Sorry, you cannot read this post because you are not connected to the Internet", "Ok");
                return;
            }

            ((ListView)sender).SelectedItem = null;

            var SinglePost = e.SelectedItem as FavouriteBlogPost;   

            await Navigation.PushAsync(new SinglePost(SinglePost.Link));

        }

• BlogPosts.xaml.cs
• FavouriteBlogPosts.xaml.cs

Check before the webview page is loaded

---

     private async Task InitAsync()
        {
            if(CrossConnectivity.Current.IsConnected == true)
            {
                var service = new PostsRepository();
                var UpdatedPosts = service.GetAllPostsAsync();
                App.database.AddUpdatedBlogPosts(UpdatedPosts.Result);
                BlogPosts = App.database.GetAllBlogPosts();
            }
                       
            IsBusy = false;
        }

• BlogPostsViewModel.cs
  also check for connectivity before the API service call is executed

---

Lastly, I received a bug feedback from @emmexdee on the duplication of blog posts on start of the application in his post

I looked into the issue, and tried to reproduce it, but eventually I got to notice that it only seldom happens, randomly in some devices running with slow internet. The reason for the duplication was due to the asynchronous operation of my method which allowed the API call to be executed on another thread. So it allowed newly fetched blog posts from the API to be added into the database while simultaneously loading the previous posts in the database. So when the time taken to fetch the new posts becomes prolonged (due to bad internet connection), old posts are replicated in the rendered view as new ones (duplicates) are simultaneously added to the list.

To solve this, I removed the await from the method, to enable each line run synchronously on one thread, executing them line by line, thereby mandating the runtime to fetch all posts (no matter how long it takes) before updating the database and thereafter displaying.

  private async Task InitAsync()
        {
            if(CrossConnectivity.Current.IsConnected == true)
            {
                var service = new PostsRepository();
                var UpdatedPosts = service.GetAllPostsAsync();
                App.database.AddUpdatedBlogPosts(UpdatedPosts.Result);
                BlogPosts = App.database.GetAllBlogPosts();
            }
                       
            IsBusy = false;
        }

Github Commit: https://github.com/Johnesan/CryptoNews/commit/a682df5cfe853ba886bb38cf7a72edb93bf078f1

---

Posted on Utopian.io - Rewarding Open Source Contributors

---