# Creating a movie app using Xamarin.Forms and Prism – Part 1

Today, we’ll start with setting up a new project using Xamarin.Forms and the Prism Library. Our app will be a simple movie database that lists and displays information about movies.  
We’ll  be using the The Movie Db API, which is a free service. Read more at [https://www.themoviedb.org/documentation/api](https://www.themoviedb.org/documentation/api "https://www.themoviedb.org/documentation/api")

I wont be delving too deep into Xamarin.Forms and Prism, instead I’ll rather focus on showing you how to use the tools at your disposal. Needless to say, if you want to learn more about Xamarin, head over to [Xamarin University](http://university.xamarin.com/), they have excellent content and the instructors know their stuff. If you need more information about Prism, it is all open source and the documentation helps you get started quickly. Check it out at [http://prismlibrary.github.io/](http://prismlibrary.github.io/ "http://prismlibrary.github.io/")

Without further ado, lets get started!

### File, New, Project

Our first step is to create a new project in Visual Studio. Fire up Visual Studio 2017 and select **File> New > Project**. In the New Project dialog window, select **Prism Blank App (Xamarin.Forms)**. You’ll find the the project template under **Visual C# > Prism**.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664279893993/ehVF6VYrd.png align="left")

Not seeing the template in Visual Studio? You need to install the  
[Prism Template Pack](https://marketplace.visualstudio.com/items?itemName=BrianLagunas.PrismTemplatePack).

Click **OK** and select the platform your app will support, Android and iOS for this example. You can also select your preferred DI container. I’ve read some good things about **Dryloc**, so for this example we’ll use it.  
Next, click **Create Project**.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664279912016/H2U69-CpO.png align="left")

Which container should I use? Honestly, it is down to personal preference. Prism provides an abstraction over the container, which means it isn’t tied to any specific implementation. You’ll see what I mean as we continue with the project.  
You can read more about in the [Prism docs](https://prismlibrary.readthedocs.io/en/latest/WPF/03-Managing-Dependencies/).

The project wizard will generate the initial project layout for you. When finished, you should see a solution structure similar to the following:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664279930531/GDRHVO80d.png align="left")

### Shared Project structure

We’ll focus mostly on the shared project (**MyMovieDb**) in this post. I prefer to follow the layout as detailed in Gill Cleeren’s [Building an MVVM-based Architecture for Xamarin Mobile Apps Pluralsight](https://www.pluralsight.com/courses/mvvm-based-architecture-xamarin-mobile-apps) course, which I can recommend that you watch.

First, let’s go ahead and add a few folders to help structure our code:

1.  Add a new folder called **Contracts**
2.  Add two subfolders to the **Contracts** folder called **Repositories** and **Services.** These two folders will contain the Interface declarations for our repository and services classes.
3.  Create another two folders in the root of the **MyMovieDb** project, called **Repositories** and **Services.** The folders will contain the implementations of the repository and services classes.
4.  And another called **Models.** This folder will contain any model classes.
5.  Almost done. Add another folder for any custom value converters called **Converters**.
6.  Lastly, add a folder called **Extensions**, which will contain any extension method classes.

The final layout of our shared project, should resemble something like the following:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664279950728/Z4vE1Y0ra.png align="left")

### Installing required NuGet packages

##### TMDbLib

We’ll need a way to retrieve data from [The Movie DB API](https://www.themoviedb.org/documentation/api).  Luckily, a .Net wrapper library, for said API, has already been written and is available as a NuGet package. To install it, right-click on the shared code project (**MyMovieDb**) and select **Manage  Nuget Packages…** from the context-menu.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664279966325/9vSs7KXfT.png align="left")

Click on **Browse** and enter **TMDbLib** in the Search box. You should see the TMDbLib by LordMike in the list of available packages. Click on the **Install** button on the right to install the library into your shared project.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664279981595/MMWcimKCD.png align="left")

With the wrapper library installed, we can get to work adding classes to make retrieving data easier.

##### AutoMapper

Next, we’ll need AutoMapper to take care of some of the heavy lifting in mapping objects. To install it, follow the steps detailed above, but this time search for the AutoMapper library:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664279996634/Ui6w0eXJp.png align="left")

### To the code!

With the necessary references in place, let’s get down to writing some code!

1.  Right click on the **Models** folder, and add a new class called `Genre`.  
    
2.  Right click on the **Services** subfolder in the **Contracts** folder, and add a new interface called `IMovieService`.  
    
3.  Next, right-click on the **Repositories** subfolder in the **Contracts** folder, and create a new interface called `IMovieRepository`.      

After we’ve created the interfaces, we can now start writing the implementation for each.

1.  1.  1.  Add a new class, called `MovieRepository` to the **Repositories** folder and make sure that it implements the  
            `IMovieRepository` interface.
        2.  Add a using to the TMDbLib library to your class: `using TMDbLib.Client;`
        3.  Add a new local TMDbClient variable called `_client` to the `MovieRepository` class. Be sure to pass in your The Movie DB API Key as part  
            of it’s constructor arguments :  
            `TMDbClient _client = new TMDbClient("---YOUR-API-KEY---");`
        4.  Add the following code to the `GetGenres()` method:  
            
    

The full code listing for the `MovieRepository` class should look similar to the following:

1.  Next, in the **Services** folder. Add a new class called `MovieService`.
2.  The `MovieService` class should implement the `IMovieService` interface
3.  Add a constructor for the `MovieService` class, that accept an `IMovieService` parameter
4.  Add a local variable of type `IMovieService` called, `_movieRepo` to the class
5.  Set the `_movieRepo` variable equal to the constructor parameter
6.  Finally, call the `_movieRepo.GetGenres()` method from the `GetGenres()` method of the `MovieService` class.

The full code listing for the `MovieService` class follows:

### Last steps

You might’ve notice we use a `Mapper` object to map the TmDbLib `Genre` object to our own `Genre` object (in the **Models** folder). This is done using the AutoMapper libary, and in order to make this work, we first need to perform the following steps:

1.  Open the **App.xaml** file’s code-behind, **App.xaml.cs**
2.  Add a new private method called `InitAutoMapper()` to the class. This method will create the mapping for the objects we need:  
    
3.  Next, call the `InitAutoMapper()` method inside the `OnInitialized()` method : `InitAutoMapper();`

And with that, we’re at the end of this post. In the next post, we’ll get down to business and start invoking the web service calls and display the data on the UI.

Thank you for reading! This one is for you Rodg.

### Links for this post:

*   [GitHub repo for this blog series](https://github.com/Pietervdw/my-moviedb)
*   [Prism Library](http://prismlibrary.github.io/)
*   [The Movie Db API Developer Docs](https://developers.themoviedb.org/3/getting-started/introduction)
*   [TMDBLib on GitHub](https://github.com/LordMike/TMDbLib/)
*   [AutoMapper](http://automapper.org/)

**Before you go,** the code presented in this blog post is just one approach of many. If you see a mistake or know of a better way to accomplish the tasks detailed here, please feel free to share it, in the comments section below, in a respectful and clear way. Any comments and suggestions are always appreciated.