Open Source Project - Crypto News App (UPDATE #4: Image Caching, In...

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

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

Screenshot_2018-02-28-17-44-02 (2)_LI.jpg

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));

        }

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 Hive account@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

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

Updates