Code Monkey home page Code Monkey logo

amdb-theappmoviedatabase-xf's Introduction

Xamarin Forms Project for T-488-MAPP: the AMDb

By Edda Steinunn Rúnarsdóttir

Week 3: Xamarin Forms project - Visual Demonstration and Information

Note that images displaying app in this section are from tests conducted on an iPhone iOS 11 Simulator for iOS, a Samsung Galaxy Alpha Mobile Phone (Android 5.0 with API 21) for Android and a Lenovo ThinkPad Computer for UWP.

Application Structure and Purpose

The application has partially the same function as week one and two's iOS and Android app, again a tabbed application was created but now with three tabs whose purpose is to fetch information about movies from an external web service and display that information appropriately. This week's app however differs from the others because it is cross-platform compatible and fetches information significantly faster than the other apps since it uses "lazy-load" (i.e. loads after rendering page/screen) for some properties of movie information.

First tab: Movie Search

The first tab is the tab user is automatically navigated to once app launches. The first tab prompts user to write in a query substring of some movie into a search bar, then once user hits enter button on keyboard a load spinner (generally very briefly) appears to indicate background process while resources are fetched from server. Once resources have been fetched, A list appears in the view displaying results from user's query. Some elements of the movie list is fetched asynchroniously like the poster and the movie cast displayed in each cell and therefore manifest later than the title and year. The list of movies can be scrolled through. Each item in list can be clicked and navigates user to a detail page displaying detail on the clicked movie. Below are images that demonstrate the Search tab's functionality:

alt text alt text

Second tab: Top Rated Movies

This tab loads top rated movies from the external web service. The information is fetched when app launches (more specifically, when the first tab page has been rendered) and initially displays a load spinner indicating background process, although in practise user will not see this as he will not be able to navigate to this tab quickly enough, since the list is fetched quite quickly in general. Once resources have been retrieved, list is displayed. The list items are clickable like in the search view and once clicked navigate to another page showing movie details. This list has a pull-to-refresh function, where when user pulls the list down, the list is fetched and rendered again in the view, thus updating any potential outdated data. Below are images that demonstrate the Top Rated Movies tab's functionality:

alt text (Note that the first frame demonstrates the pull-to-refresh function; since as stated before some resources are asynchroniously fetched like images and cast members and these things have not been fetched in this frame for all cells as reloading is in progress. This is intentional to demonstrate the "lazy-load")

Third tab: Popular Movies

This tab has essentially the same functionality as the Top Rated Movies tab, except that movies displayed in this view's list are movies that are popular at the moment instead of displaying all-time top rated movies. That is, list is fetched and can be pulled to refresh and list items are clickable and navigate to another page showing movie details. Below are images that demonstrate the Popular Movies tab's functionality:

alt text

The Movie Detail View

The detail view for some movie is accessible from every movie list present in the app. Every item in movie list in app is clickable and navigates user to the movie detail view where basic information such as title and overview are instantly displayed while other information like images, runtime and tagline are fetched asynchroniously after this view has rendered. Note that the detail view is very structually different from the structure we were supposed to implement by the project description. This was because of attempting to achieve consistency in app appearance from the previous week's apps. Nontheless, the view displays all it is supposed to display. The entire view can be scrolled (i.e. is inside a scrollview) and in addition to that, the movie overview can be scrolled too if it's size exceeds the height of the poster image beside it. See images describing this functionality below:

alt text (In the first frame, the tagline and runtime have not yet been fetched to demonstrate the view's lazy load. Then after a brief period this is fetched and the end results is as shown in the second frame. The third and the fourth frame display possible scrolling of the view and the overview section)

Cross-Platform Compatibility

All function demonstrated above is preserved for both Android and UWP (except that UWP does not support the pull-to-load functionality). Both are quite usable and have similar user interface. Below are visual demonstrations of these two remaining platforms although these images only show the appearance of the two platforms, since functionality has already been demonstrated in details.

Android

The Android Search tab appearance (after searching for a query string): alt text

The Android Top Rated tab appearance: alt text

The Android Popular tab appearance: alt text

UWP

The UWP Search tab appearance (after searching for a query string): alt text

The UWP Top Rated tab appearance: alt text

The UWP Popular tab appearance: alt text

Custom Rendering

Very minimal custom rendering is present in this project because that was considered unnecessary since all platforms display the information quite delightfully. Although, the tab bar displayed on iOS is custom rendered and displays icons to enhance user experience because without it the appearence seemed unnatural.

Enhancements from previous iOS and Android apps

Various changes were made in functionality, coding convention and code structure but one enhancement was above all those. As previously stated, this week's Xamarin Forms application is significantly faster than the other apps created for the course as some information is fetched asynchroniously ("lazy-loaded"), such as movie images, movie cast, movie tagline and movie runtime. This does not greatly affect the user experience because even though page does not display full information initially, it takes little time fetching the rest of the information. To put this a bit into context, a minor experiment was conducted; recieveing results with "Fargo" as a query string on last week's Android app took 12.29 seconds, while on the Xamarin Forms app it takes a mere half a second (0.28s) to receive results! (Both tests were conducted on Samsung Galaxy Alpha). Moreover judging by this minor experiment, performance was enhanced by 98% in this week's app versus last week's app. (performance represented as percentage of speed increment for this specific experiment)

Known limitations

  • The app uses significant memory due to many tasks running on various threads when resources are fetched which sometimes can cause problems on memory-sensitive devices. For example, my phone is four years old (meaning ancient in phone-years) and sometimes crashes when a lot of information is fetched at once in the app. Also, the app can crash at random because of communication issues between either the app and the external web service or between the web service and the movie database; for example if there is too much load on the server (this results in a null exception due to response from server) or if there is no internet connection. But since teacher stated that this would not be accounted for when grading these cases are not explicitly handled due to limited time for the project.
  • The list for Top Rated Movies tab and the Popular Movies tab are loaded in constructor of MovieListViewModel initially, which is bad. They should be loaded when the TabbedPage appears (in OnAppear() for the TabbedPage used) but since attempting to fix this resulted in an incomprehensible error which neither me nor the TA understood this unfortunately had to be let go due to limited time.
  • The code in MovieListViewModel is badly structured and could be refactored majorly but due to above factor, refactoring of it was greatly limited and I chose to make the model reusable to all views displaying a list instead of having much more code in multiple files for a better structured code.

amdb-theappmoviedatabase-xf's People

Stargazers

Harisankar Angamuthu avatar Jevgenijus "Eugene" Cistiakovas avatar  avatar

Watchers

James Cloos avatar Hrafn Loftsson avatar Edda Steinunn avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.