making cross-platform apps with xamarin
TRANSCRIPT
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
• Indie App & Game Developer
• Teacher at ISEL
• Freelancer
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