Let’s start project

According to rules a participation in contest is based on development own open-source project.

I decided to create quick communication system with friends from Facebook using push notifications NotifyMe!. My project is available here.

The project of mobile application will be executed in Xamarin.Forms technology and backend will be build in ASP.NET. In addition I will strongly use Microsoft Azure components like:

  • App Service
  • NotificationHub
  • SQL Database

Components above will be helpful for creation MVP version of system. In future I plan to use ServiceBus and WebJobs for creating and maintaining cyclical notifications.

Let’s go!

I started with creating solution structure. At first Xamarin project and empty backend.

In pursuance of good practises about creating mobile applications, I will use MVVM pattern. (Model-View-ViewModel). For this purpose I am going to use my favourite MVVM library – MVVMLight. It delivers a lot of useful classes which greatly accelerate development process.

MVVMLight library gives us inter alia base view model, so that we don’t have to implement INotifyPropertyChanged interface on their own:

namespace GalaSoft.MvvmLight
{
    public abstract class ViewModelBase : ObservableObject, ICleanup
    {
        public ViewModelBase();
        
        public ViewModelBase(IMessenger messenger);

        public static bool IsInDesignModeStatic { get; }

        public bool IsInDesignMode { get; }

        protected IMessenger MessengerInstance { get; set; }

        public virtual void Cleanup();

        public virtual void RaisePropertyChanged<T>([CallerMemberName] string propertyName = null, T oldValue = default(T), T newValue = default(T), bool broadcast = false);

        public virtual void RaisePropertyChanged<T>(Expression<Func<T>> propertyExpression, T oldValue, T newValue, bool broadcast);

        protected virtual void Broadcast<T>(T oldValue, T newValue, string propertyName);

        protected bool Set<T>(Expression<Func<T>> propertyExpression, ref T field, T newValue, bool broadcast);

        protected bool Set<T>(string propertyName, ref T field, T newValue = default(T), bool broadcast = false);

        protected bool Set<T>(ref T field, T newValue = default(T), bool broadcast = false, [CallerMemberName] string propertyName = null);
    }
}

It gives also ICommand interface implementation:

namespace GalaSoft.MvvmLight.Command
{
    public class RelayCommand : ICommand
    {
        public RelayCommand(Action execute);

        public RelayCommand(Action execute, Func<bool> canExecute);

        public event EventHandler CanExecuteChanged;

        public bool CanExecute(object parameter);

        public virtual void Execute(object parameter);

        public void RaiseCanExecuteChanged();
    }
}

From verion 5.0 MVVMLight delivers also INavigationService interface implementation, but in case of PCL project we need to implement it by ourself. Beside already listed, it gives us  IoC container – SimpleIoC and Messanger about which I am going to write in later entries.

I decided to resign from the default way for resolving ViewModels – ViewModelLocator. I wanted to implement generic solution. Base class for view is presented below:

    public class BasePage<TViewModel> : ContentPage where TViewModel : ViewModelBase
    {
        private readonly TViewModel viewModel;

        public TViewModel ViewModel
        {
            get { return viewModel; }
        }

        public BasePage()
        {
            viewModel = App.Container.GetInstanceWithoutCaching<TViewModel>();
            BindingContext = viewModel;
        }
    }

Afterwards a sample view which uses presented class:

    public partial class LoginPage : BasePage<LoginViewModel>
    {
        public LoginPage()
        {
            InitializeComponent();
        }
    }

and XAML file for view above:

<?xml version="1.0" encoding="utf-8" ?>
<views:BasePage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:TypeArguments="ViewModels:LoginViewModel" xmlns:ViewModels="clr-namespace:NotifyMe.App.ViewModel" xmlns:views="clr-namespace:NotifyMe.App.Views;assembly=NotifyMe.App" x:Class="NotifyMe.App.Views.LoginPage">
  <Button Text="Zaloguj" Command="{Binding LoginCommand}" />
</views:BasePage>

Note that x:TypeArguments setting is necessary in that way implementation.

In my next entry I will try to show you basic navigation between views and user login process using Facebook provider.

Leave a Reply

Your email address will not be published. Required fields are marked *