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

in #utopian-io4 years ago (edited)

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.

Screenshot_2018-01-31-04-37-02.png

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.
    Screenshot_2018-02-28-17-44-02.png
    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
    Screenshot_2018-02-28-18-58-17.png

  • 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
    Screenshot_2018-02-28-18-58-37.png

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

        }

Screenshot_2018-02-28-18-59-06.png

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


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

Sort:  

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

Hey @scipio, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!

Hey @johnesan I am @utopian-io. I have just upvoted you!

Achievements

  • You have less than 500 followers. Just gave you a gift to help you succeed!
  • Seems like you contribute quite often. AMAZING!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x