Creating Simple Xamarin Forms Crud App with RealmDB and MVVM Part 1

In this blog tutorial, I’ll be guiding you with very easy steps how to create a simple Xamarin.Forms crud app with Realm Database for local storage and integrated with MVVM architectural design pattern.

If you have no idea about MVVM (Model-View-View-Model) and DataBinding in Xamarin.Forms yet, you can read this post created by Me of course :)

Basic Understanding How Data Binding and MVVM works in Xamarin Forms

If you are ready, Let us get started.

What is Realm Mobile Database?

Basically, Realm Mobile Database is alternative for Sqlite. If you are familiar with Sqlite, it’s the local database for your phone. This database is for light purposes only like storing cache, storing simple to-do task, simple game storage etc. Same way with Realm Mobile Database.

For more: Realm Get Started Page

What the cool thing about Realm Database is that, it’s so fast. They have some promising things about their Mission too:

https://realm.io/about/

Realm Mobile Database supports,

Xamarin - Docs: Realm Xamarin
Java - Docs: Realm Java
Objective-C - Docs: Realm Objective-C
Javascript - Docs: Realm Javascript
Swift - Docs: Realm Swift

In this blog, we’ll focusing on Realm Xamarin.

Creating Our Xamarin.Forms Crud(Create, Read, Update & Delete) App with Realm Mobile Database and MVVM

1.0 Creating the Cross Platform App inside the Visual Studio

1.1 Open your visual studio and create new “Cross Platform Application” (Ctrl + Shift + N)

1.2 Choose “Installed” -> “Templates” -> “Visual C#” -> “Cross Platform.” After naming your App, choose Xamarin.Forms and Portable Class Library (PCL) and click “Okay”

2.0 Installing Realm Mobile Database

2.1 Simply go to “Tools” (on the nav bar) -> “NuGet Package Manager” -> “Manage NuGet Packages for Solution…”

2.1 Search for “Realm”

2.2. Check the “Project” to automatically check all the projects since we’re targeting to use Realm Mobile Database in each platform.

2.3 Click “Install” and wait until it finish.

3.0 Creating Simple MVVM Implementation in our Portable Project

3.1 Simply, Add these following folders

Models
ViewModels
Views

(By Default, MainPage.xaml is out the Views folder, just drag it inside our “Views” folder)

4.0 Creating Model Class File.

4.1 Right Click the Folder “Models” -> “Add” -> “New Item…” and choose “Visual C#” -> “Class”

4.5 Name your class file. In our example, we use “CustomerDetails.cs” and click “Okay”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
...
using Realms;

namespace CrudWithRealmApp.Models
{
  //  RealmObject means, Implicit reference conversion from model to realmobject
  public class CustomerDetails : RealmObject 
  {
    [PrimaryKey]
    public int CustomerId { get; set; }
    public string CustomerName { get; set; }
    public int CustomerAge { get; set; }
  }
}

The “PrimaryKey” is the key attribute in our table “CustomerDetails”

5.0 Creating our ViewModel class file

5.1 Right click the “ViewModels” folder -> “Add” -> “New Item…” and choose “Visual C#” -> “Class”

5.2 Name your class file. In our example, we use “CustomerViewModel.cs” and click “Okay”

6.0 Preparation of Our ViewModel For Getting the List Of Details

6.1 Let first implement the INotifyPropertyChanged

1
2
3
4
5
6
7
8
9
10
... 
using System.ComponentModel;

namespace CrudWithRealmApp.ViewModels
{
  public class CustomerViewModel : INotifyPropertyChanged
  {
    // code goes here
  }
}

Question: What does “INotifyPropertyChanged” means?

Answer: Is an interface to notify clients, typically binding clients that there has changed or the property has changed.

6.2 Paste this code snippet to easily use the “OnPropertyChanged” method. We use this method in our setter declaration because the property value is changing.

1
2
3
4
5
6
7
8
9
10
11
...
// Import this package
using System.RunTime.CompilerServices;

// Add this inside your class
public event PropertyChangedEventHandler PropertyChanged;

protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

6.3 Create a list public and private property (backing field) of our model and put the “OnPropertyChanged” inside our “set”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
... 
// Import our model
using CrudWithRealmApp.Models;

// Inside your class
private List<CustomerDetails> _listOfCustomerDetails;

public List<CustomerDetails> ListOfCustomerDetails
{
  get { return _listOfCustomerDetails; }
  set
  {
    _listOfCustomerDetails = value;
    OnPropertyChanged(); // Added the OnPropertyChanged Method
  }
}

6.4 Create a constructor for getting the list of Customer Details

1
2
3
4
5
6
7
8
9
10
11
...
// Add this package
using Realms;

// Add this inside your view model class
Realm _getRealmInstance = Realm.GetInstance();

public CustomerViewModel(){
  // supply the public ListOfCustomerDetails with the retrieved list of details
  ListOfCustomerDetails = _getRealmInstance.All<CustomerDetails>().ToList();
}

7.0 Preparation of Our ViewModel For Create, Update and Delete Commands

7.1 Inside the class view model, add this property referencing the model

1
2
3
4
5
6
7
8
9
10
private CustomerDetails _customerDetails = new CustomerDetails();

public CustomerDetails CustomerDetails {
   get { return _customerDetails; } 
   set 
   {
      _customerDetails = value;
      OnPropertyChanged(); // Add the OnPropertyChanged();
   } 
}

We will use this public “CustomerDetails” for binding in our view.

7.2. For Add, Edit and Delete/Remove Command Snippet,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
...
// import this
using Xamarin.Forms

// Add this inside your view model class
public Command CreateCommand // for ADD
{
  get
  {
    return new Command(()=>{
      // for auto increment the id upon adding
      _customerDetails.CustomerId = _getRealmInstance.All<CustomerDetails>().Count() + 1;
      _getRealmInstance.Write(()=>
      {
        _getRealmInstance.Add(_customerDetails); // Add the whole set of details
      });
    });
  }
}

public Command UpdateCommand // For UPDATE
{
  get
  {
    return new Command(()=>
    {
      // instantiate to supply the new set of details
      var customerDetailsUpdate = new CustomerDetails
      {
        CustomerId = _customerDetails.CustomerId,
        CustomerName = _customerDetails.CustomerName,
        CustomerAge = _customerDetails.CustomerAge
      };

      _getRealmInstance.Write(()=>
      {
        // when there's id match, the details will be replaced except by primary key
        _getRealmInstance.Add(customerDetailsUpdate, update: true);
      })
    });
  }
}

public Command RemoveCommand
{
  get
  {
    return new Command(()=>
    {
      // get the details with specific id
      var getAllCustomerDetailsById = _getRealmInstance.All<CustomerDetails>().First( x => x.CustomerId == _customerDetails.CustomerId);

      using(var transaction = _getRealmInstance.BeginWrite()){
        // remove all details
        _getRealmInstance.Remove(getAllCustomerDetailsById);
        transaction.Commit();
      };
    });
  }
}