Getting started using DEM for the Android and iOS

Learn how to build and run Bank Simple, the reference implementation for DEM, and how the source code is organized in Microsoft Visual Studio. The Bank sample reference implementation demonstrates how to accelerate the development of a mobile business app by using DEM.

Download and Setup DEM

This section describes how to install DEM. It involves the following three steps:

  • Install system requirements.
  • Download and extract the DEM source code and documentation.
  • Compile and run the samples.

Step 1: Install System Requirements

DEM development and customization are primary designed to run on the Microsoft Windows X desktop, Microsoft Windows 8, Microsoft Windows 7, Windows Vista, or Windows Server 2008 operating systems.

Before you can use the DEM library, the following must be installed:

  • Microsoft .NET Standard 2.0.

  • Microsoft Visual Studio 2019 (HotReload and HotRestart support) or greater .

  • Xamarin for Visual Studio 4.5.0.396 or greater.

For more information see Installing Visual Studio 2017 for Mobile Development with .NET

But you can also use iOS and Visual Studio for MAC, for more inforation about system requirements see

Step 2: Download DEM Packages, Sample Solution and Documentation

The easiest way to used DEM is to add the DEM assemblies directly to your projects by using the NuGet packages.

Current Packages

Platform/Feature Package name Stable iOS Status Droid Status
API AssecoSEE.Rest.Data AssecoSEE.Rest.Data package in assecosee-de@Local feed in Azure Artifacts Stable Stable
Core AsssecoSEE.DEM.Core AssecoSEE.DEM.Core package in assecosee-de@Local feed in Azure Artifacts Stable Stable
Core AssecoSEE.DEM.Components AssecoSEE.DEM.Components package in assecosee-de@Local feed in Azure Artifacts Stable Stable
Devices AssecoSEE.DEM.Devices AssecoSEE.DEM.Devices package in assecosee-de@Local feed in Azure Artifacts Stable Stable
Modules AssecoSEE.DEM.AccountData AssecoSEE.DEM.AccountData package in assecosee-de@Local feed in Azure Artifacts Stable Stable
Modules AssecoSEE.DEM.Foundation AssecoSEE.DEM.Foundation package in assecosee-de@Local feed in Azure Artifacts Stable Stable
Modules AssecoSEE.DEM.Payment AssecoSEE.DEM.Payment package in assecosee-de@Local feed in Azure Artifacts Stable Stable

Bank Sample App on AppCentar

Andorid | iOS

Build status | Build status

The easiest way to download DEM source code, is to fork DEM repository

For a list of new features, bug fixes, and API changes, see the release notes: https://github.com/asseco-see/digital-edge-mobile/wiki

Optionally you can add the DEM assemblies directly to your projects by using the NuGet packages

Build status

Visual Studio solution structure

Visual Studio solution structure for a mobile business app that uses the DEM

img-sample-solution

The Bank Sample Visual Studio solution organizes the source code and other resources into projects. All projects use Visual Studio solution folders to organize the source code and other resources into categories. The following table outlines the projects that make up the Bank sample reference implementation.

Project Description
AssecoSEE.DEM.Bank.Sample Represent shared mobile application
AssecoSEE.DEM.Bank.Sample.Android Android specific
AssecoSEE.DEM.Bank.Sample.IOs iOS specific

The AssecoSEE.DEM.Bank.Sample project

The AssecoSEE.DEM.Bank.Sample project contains the following folders:

  • The Data folder contains resources for the translations.
  • The Services folder contains appications services that are exposed

Building and Running the sample

The easiest way to get a new solution up and running is with the DEM Bank Sample solution. Let's start by installing it in Visual Studio. A bank sample solution was created with a shared .Net Standard 2 library and device-dependent projects (Android & iOS).

DEM supports:

  • iOS ver. 10.x +
  • Android 8+

Android

Right click on the Android project and select set as startup project. Also ensure that build and deploy are both checked for the Android project in the Configuration Manager.

Open the Xamarin Android Player and ensure that a device image is installed and note the API level of the device image.

Open the Android project properties and change the Minimum Android to target to be equal or less than the API level of the device image you will be running on.

Select the Android Player device from the Debug drop down menu and click the debug play button (or press F5).

iOS

This is for Visual Studio (on Windows):

First make sure that there's a connection with the Xamarin Mac Agent.

Right click on the iOS project and select set as startup project. Also ensure that build and deploy are both checked for the iOS project in the Configuration Manager.

For running the application on a physical iOS device, there must be a connected iOS device to the PC. The build configuration needs to be set on "iPhone" (even for testing with an iPad). If there is only one iOS device attached to the PC it’ll select that one. When there are multiple iOS devices attached, you must select which device you want to run on.

For running the application on a iOS simulator needs the build configuration to be set to "iPhoneSimulator" (even for testing with an iPad simulator).

After choosing the build configuration, the app can be run by clicking the debug play button (or press F5).

Anatomy of a DEM Application

Let's take a look at the DEM application we just created to understand the parts and how it all works.

Application.cs

The Application.cs files are the entry point of the application. The Application.cs file contains the logic required to configure a DEM application and navigate to the root page on start up.

namespace Bank.Sample
{
    public class BankSampleApplication : DEMApplication
    {
        public BankSampleApplication(AssecoSEE.DEM.Core.IPlatformInitializer initializer) : base(initializer)
        {
            ApplicationName = "BankSampleApplication";
            ApplicationId = "BankSample2019";
            ApplicationGuid = new Guid("7605C888-8B8A-4CEE-BFA9-AA5C8F0C7465");
       }

In order to make the application it is necessary to create that the main app class be inherited from DEMApplication class. Then fill application fields in the constructor and override the ConfigureModuleCatalog method.

Important

Please make these application fields unique per solutions. Also namespace and main application class sholud be unique to.

Registering Modules in Code

The most basic module catalog behavior is provided by the IModuleCatalog interface. You can use this module catalog to programmatically register modules by specifying the module class type. You can also programmatically specify the initialization priority and module type. To register the module directly with the IModuleCatalog interface, call the AddModule method in ConfigureModule method of application's class. An example is shown in the following code. 

        protected override void ConfigureModuleCatalog(IModuleCatalog moduleCatalog)
        {
            moduleCatalog.AddModule(new ApplicationModuleInfo(100, typeof(AssecoSEE.DEM.Foundation.FoundationModule)));
            moduleCatalog.AddModule(new ApplicationModuleInfo(200, typeof(AssecoSEE.DEM.AccountData.AccountsDataModule)));
            moduleCatalog.AddModule(new ApplicationModuleInfo(300, typeof(AssecoSEE.DEM.Payment.PaymentModule)));
            moduleCatalog.AddModule(new ApplicationModuleInfo(400, typeof(AessecoSee.Dem.Region.ModuleRegion)));
        }

In this way, we can build applications from new ModuleRegion or ready-made modules.

Registering Types in Code

The RegisterTypes method is used to register any services that you will be using in Application && ViewModels. 

        protected override void RegisterTypes(ITypeCatalog typeCatalog)
        {
            typeCatalog.Add(
               new AppServiceInfo<NewService, INewService>() { IsSingleInstance = true });

            typeCatalog.AddOrUpdate(
                new AppServiceInfo<ApplicationStateOverride, IApplicationState>());

            typeCatalog.AddOrUpdate(
                 new ViewModelInfo(typeof(Customized.AccountDetailsViewModelOverride))
                 {
                     PageTypes = new Type[] { typeof(Customized.AccountDetailsPage) }
                 }
             );

            typeCatalog.Add(
                 new ViewModelInfo(typeof(SampleViewModel))
                 {
                     DisplayData = new ViewModelDisplayData(20, "Sample", AllIcons.OutgoingCardTransaction),
                     ViewType = ViewType.Both
                 }
             );

The ITypeCatalog AddorUpdate method determines whether a service has already been registered—it will not register it twice. This allows you to override the default registration through configuration.

Applications built with the DEM rely on dependency injection provided by a container. The library provides assemblies that work with the AutoFac, and it allows you to use other dependency injection containers. Part of the application initializing process is to configure this container and register types with the container. In this way, all the elements in the application can be accessed eg. we can inherit the existing implementation, change the behavior, and then register as a replacement for the given interface or create a completely new one that changes the behavior of the application. On startup application runs these methods 

        protected async override void OnStart()
        {
            IsInBackground = false;

            if (!InitializeCall)
            {
                BeforeRun();

                await InitializeInternalAsync();

                InitializeCall = true;
            }

            await StartAsync();

            AfterRun();
        }
Important

In the Befor and After run methods, a code can be inserted through the implementation of the basic application class.

InitializeInternalAsync method initializes container and all registry types. During the container configuration phase, several core services are registered. In addition to these core services, you may have application-specific services that provide additional functionality as it relates to composition. Application will cache catalog of types and second time will not run thess metods. After that StartAsync method application show main form of the application.

        ///     Start navigation to the start page of the application and display the page
        /// </summary>
        /// <returns></returns>
        protected internal async Task<bool> StartAsync()
        {
            Debug.WriteLine("***** Navigate to Start *****");
            try
            {
                return await NavigateToStart();
            }
            catch (Exception ex)
            {
                ApplicationOnError(ex, true);
            }

            return false;
        }

The catalog of all registered types is then passed through the property from the base application TypeProvider as well as all global services (available through the DEMApplication.Current) that returns the current instance of the running application. The application caches a complete list of types so that the next startup does not restart the specification of the types, but can be forced by disabling, for example, 

        protected override void BeforeRun()
        {
            //var tick = DateTime.Now.Ticks; 
            var tick = 636897094301142465; 
            AddInvalidateTick(tick, Global.CACHE_KEY_TYPE_CATALOG);

            AddInvalidateTick(tick, Global.CACHE_KEY_CONFIGURATION);
            AddInvalidateTick(tick, $"{Global.CACHE_KEY_TRANSLATION}_en-US");
            AddInvalidateTick(tick, $"{Global.CACHE_KEY_TRANSLATION}_sr-Latn-RS");
        }

Next step*

Bank sample exercise

Download latest version from AppCenter