Making Cross-Platform apps with Xamarin

TUGA IT 2016LISBON, PORTUGAL

THANK YOU TO OUR

SPONSORS

THANK YOU TO OUR

TEAMANDRÉ BATISTA ANDRÉ MELANCIA ANDRÉ VALA ANTÓNIO LOURENÇO BRUNO LOPES

CLÁUDIO SILVA

RUI BASTOS

NIKO NEUGEBAUER

RUI REISRICARDO CABRAL

NUNO CANCELO PAULO MATOS PEDRO SIMÕES

SANDRA MORGADO SANDRO PEREIRA

MAKING CROSS-PLATFORM APPS WITH XAMARIN19/5/2016

Ana Correia Diogo Cardoso

• Mobile Developer at ThingPink

• Developer at ImaginationOverflow

@[email protected]

• Indie App & Game Developer

• Teacher at ISEL

• Freelancer

@[email protected]

www.imaginationoverflow.com

Summary

• Introduction to Xamarin

• Brief introduction to Android, iOS and Windows

• MVVM

• Portable class libraries and shared projects

• OAuth recap?

• Lifecycle

• Localisation

• Where to go next

2

1

3 4 5

6 7

8 9

10 11 12

Challenges

Android iOS Windows 10Mac

Xamarin.Android Xamarn.iOS Xamarin.MacUniversal Windows Apps

Platform

Mono .NET .NET

C# Portable / Shared code

Android AXML

Android iOS Windows 10Mac

Xamarin.Android Xamarn.iOS Xamarin.MacUniversal Windows Apps

Platform

Mono .NET .NET

C# Portable / Shared code

C# code behind

iOS Storyboards

C# code behind

Mac XIB

C# code behind

Windows Xaml

C# code behind

• LINQ

• Task Parallel Library

• Async / Await

• Generics*

• C# 6 features

• Etc

• Android 6.0

• API Level 23

• Android Wear

• Android Player

• 100% API Coverage

• iOS 9

• Apple Watch

• Develop iOS apps in

Windows

• Mac Agent

• 100% API Coverage

C# Android iOS

Xamarin - Features

Xamarin - Native Apps

Android

• C# compiled to IL

• Deployed with MonoVM

• JIT

• Runs side by side with ART

• Interacts with native types with

JNI

iOS

• Compiled ahead-of-time

• 100% machine code

Xamarin - Development

Visual Studio Xamarin Studio

• Windows 10

• Windows Phone

• Android

• iOS*

• Android

• iOS*

Xamarin - Forms

• App 100% portable.

• Cross Platform user

interface layouts

• Ability to mix native

controls

• Available for Android,

iOS and Windows

C# Async

async Task<string> GetHtmlAsync() {

var client = new HttpClient();

var html = await client.GetStringAsync("http://tugait.pt");

return html;

}

void GetHtml(Action<string> callback, Action<Exception> onError){

var client = new HttpClient();

client.BeginGetString("http://tugait.pt", (ar) => {

try {

var html = client.EndGetString(ar);

callback(html);

}

catch (Exception e) {

onError(e);

}

});

}

APM

Async

Android iOS

Windows

Purpose

• Bare Metal/Vanilla approach

• Basic Android, iOS and Windows understanding

• When and how should you make portable code

• App building blocks

Architecture

Storage

Localisation

Loading

Exception Handling

Code reusability

Lifecycle

Challenge #1

App Architecture

ViewModel

Controller

NotifyUser

Action

Updates

ViewModel

ViewModel

Interacts CommandsData

Binding

Model View Controller Model View ViewModel

MVC

• Views call controller operations

• Controllers update the model or call its operations

• Controller notifies view

Android – callbacks, async tasks, etc

iOS – callbacks, delegates, etc

ViewModel

Controller

NotifyUser

Action

Updates

MVVM

• Views binds to ViewModels

• Views invoke ViewModel commands

• ViewModels update the model or

invoke its operations

• ViewModels update its properties

• Views reacts to the change in binded

properties and update itself

ViewModel

ViewModel

Interacts CommandsData

Binding

MVC vs MVVM

MVC

• Controllers know their views

Ctor passage - new Controller(this)

Direct parametrization

controller.DoStuff(this)

Callbacks

• Is not data oriented

• Its goal is to separate concerns

MVVM

• Data Binding

• ViewModels don’t know the Views

• ViewModels work as a View Contract

• Abstracting the UI Framework

• Async by design

MVVM in action

Portable Class Libraries

•Platform Independent

•Subset of target platform

framework

•Reusable

Windows Phone

Android

iOS

Windows

AvailableAPIs

Shared Projects

• Does not generate a dll

• Is compiled with the target project

• Good for configuration

• Enables #if directives to make specific code for the target platform (messy)

• Partial classes (clean)

Shared Projects in action

Challenge #2

Challenge #3

Challenge #4

Challenge #5

Dropbox OAuth

Challenge #6

Challenge #7

Lifecycle - Android

Created

Stopped

PausedStarted Resumed

Destroyed

Android

OnCreate

OnStart

OnResume

OnResume

OnPause

OnStop

OnRestart

OnStart

OnDestroy

Lifecycle - iOS

Inactive ActiveNot Running

Suspended

Background

Lifecycle - Windows

Running

SuspendedNot Running

Activated Suspending

Resuming

Challenge #8

Challenge #9

Localisation - Android

• All resources can be localized

• It is required to at least a default set of resources

• To add localized resources, create a new folder

<directory>-<locale>

Localisation - Android

<TextView

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:text="@string/[MY_STRING_RESOURCE]" />

contextInstance.GetString(Resource.String.[MY_STRING_RESOURCE]);

Resources.Configuration.Locale = new Locale("pt-PT");

Resources.UpdateConfiguration(Resources.Configuration, Resources.DisplayMetrics);

Language

Configuration

Getting a

resource

Using a

resource

Localisation - iOS

• All resources can be localized

• Can have different configurations

Localisation - iOS

NSBundle.MainBundle.LocalizedString (“[MY_RESOURCE_ID]“);

NSUserDefaults.StandardUserDefaults.SetValueForKey(

NSArray.FromStrings("pt"),

new NSString("AppleLanguages"));

NSUserDefaults.StandardUserDefaults.Synchronize();

Language

Configuration

Getting a

resource

Localisation - Windows

• String resources can be directly linked to UI

Controls

<TextBlock x:Uid="MyNotes"/>

<TextBlock Text="My Notes" WaterMark="A WaterMark" />

Configures

At Runtime the framework will fill both properties

Localisation - Windows

<TextBlock x:Uid=“[My_Resource]"/>

ResourceLoader.GetForCurrentView().GetString("LoadingNotes");

ApplicationLanguages.PrimaryLanguageOverride = "pt“;

Language

Configuration

Getting a

resource

Using a

resource

Challenge #10

Challenge #11

Challenge #12

Where to go next

•Nuget

•Xamarin Components

•HttpClient

•Dependency Injection

•MVVM Light & MVVM Cross

•Xamarin Forms

• Interface based programming

•Portable app lifecycle

•Resource centralization

•Extending the MVVM pattern

•Taking control of the UI Thread

•Make apps!

THANK YOU TO OUR

SPONSORS