Mobiele apps programmeren met Xamarin – Wat is Xamarin?

Inhoud

• Het mobiele landschap
• It’s a mobile-first, cloud-first world
• De uitdaging
• De moeilijkheden
• De Oplossing
• Wat is Xamarin?
• Xamarin.iOS en Xamarin.Android versus Xamarin.Forms
• Hello Xamarin.Forms
• Wat hebt u nodig?
• Hoor het eens van iemand anders

Het mobiele landschap

De tijd dat we enkel een computer, desktop of laptop, gebruikten voor ICT ligt al een paar jaar achter ons en kent in 2017 zelfs een belangrijk keerpunt.

In 2004 is Apple begonnen met de ontwikkeling van de iPhone, een smartphone waarmee u niet enkel kunt bellen maar ook connectie kunt maken met internet. Een smartphone kan dus ook beschouwd worden als een handcomputer.

Met de komst van de iPad, in 2010, zorgde Apple voor de doorbraak van de tabletcomputer. Een tabletcomputer of kortweg tablet is een mobiele computer waarin een aanraakscherm, batterij en computerhardware worden gecombineerd in één plat, rechthoekig apparaat. Het aanraakscherm, meestal 7 tot 12 inch (18 tot 30 cm) in diagonaal, is voor de gebruiker de voornaamste interactiemogelijkheid. Veel tablets beschikken tevens over meerdere sensors (GPS,…) en mogelijkheden voor draadloze dataverbindingen (WIFI, 3G, 4G, Bluetooth,…).

De populariteit van smartphones, en in iets mindere mate van de tablet, is de laatste jaren enkel maar toegenomen. Het bleef niet beperkt tot Apple (met het besturingssysteem iOS) maar ook Google (met het besturingssysteem Android) stortten zich met succes op de mobiele markt. Ook Microsoft met Windows 10 probeert, zij het met veel minder succes, een deel(tje) van de mobiele markt te veroveren. Google en Microsoft werken samen met verschillende hardware fabrikanten (Samung, LG, Huawei, Nokia,…) waardoor de markt van de smartphone en tablet een wereldwijde markt geworden is die de pc in populariteit het laatste jaar voorbij gestoken is (zie onderstaande grafieken). De mobiele markt blijft ook niet beperkt tot smartphones en tablets maar is de laatste jaren ook uitgebreid met smartwatch, allerhande “slimme” brillen (al was Google Glasses niet meteen een succes), enhanced reality, ….

Onderstaande grafiek toont aan dat mobiele apparaten sinds dit jaar een groter marktaandeel hebben dan de desktop/laptop computer. In onderstaande grafiek wordt onder desktop ook de laptop computers verstaan.

Klik op de grafiek voor actuelere gegevens.

De grotere verscheidenheid beperkt zich ook niet enkel tot de apparaten zelf maar vinden we ook terug in de gebruikte besturingssystemen. Zowel Microsoft, Apple en Google komen met hun eigen besturingssysteem.

• Microsoft (vooral op desktop en (veel) minder op mobiele apparaten en tablets) gebruikt Windows 10 (UWP).
• Google (enkel op mobiele apparaten en tablets) gebruikt Android.
• Apple gebruikt iOS (enkel op mobiele apparaten en tablets) of OS X (voor de desktop/draagbare pc).

Dit betekent dat als u zich een mobiel apparaat (of een tablet) aanschaft u de keuze heeft tussen deze 3 besturingssystemen.
Onderstaande grafiek toont aan dat, in 2017, voor het eerst, Windows 10 niet meer het meest gebruikte besturingssysteem is maar dat Google Android, door de mobiele apparaten, de fakkel overneemt.

Klik op de grafiek voor actuelere gegevens.

Waar we in 2010 hoofdzakelijk werkten met een desktop/laptop pc op het besturingssysteem Windows, werken we in 2017 op een verscheidenheid aan apparaten die bestuurd worden door een verscheidenheid aan besturingssystemen.

It’s a mobile-first, cloud-first world

De toename van de mobiele apparaten (onder rmobiele apparaten verstaan we vanaf nu zowel smartphone, tablet, smartwatch,…) heeft de wereld en in het bijzonder ICT veranderd.

• Ons werk, onze documenten en onze persoonlijke gegevens staan meer en meer in de cloud zodat ze steeds altijd en overal te beschikking zijn.
• De mobiele wereld is geen of-of-verhaal maar vaak een en-en-verhaal. Velen hebben immers en een smartphone, en een tablet en een pc. We hebben meerdere mobiele apparaten die we de hele dag door gebruiken en uiteraard hebben we graag op elk van die apparaten steeds onze zelfde favoriete apps .
• We gebruiken apps voor heel veel aspecten van ons leven: om te koken, te sporten, te vermageren, te communiceren, te fotograferen, te bankieren, te winkelen,….

De uitdaging

De uitdaging, voor de programmeur, is een app ontwikkelen die voldoet aan het “mobile-first, cloud-first”-princiepe.

De moderne mobiele app moet:

• altijd en overal beschikbaar zijn, net als de data die de app gebruikt/raadpleegt ook altijd en overal beschikbaar moet zijn.
• werken op alle mobiele apparaten (en bij uitbreiding op de desktop via Windows 10).
• bruikbaar zijn in het dagdagelijkse leven.

De moeilijkheden

Verschillende hardware

Mobiele apparaten (smartphone, tablet,…) hebben gelijkaardige kenmerken maar vaak ook belangrijke verschillen. Denk aan verschillen in:

• Schermresoluties
• Functionaliteiten (GPS, microfoon, camera,…)
• kwaliteit (de kwaliteit van de camera,…)
• …

Verschillende User Interface (UI)

Een app op Apple ziet er anders uit dan dezelfde app op Android of UWP (Universal Windows Platform of Windows 10). Er zijn verschillen in de navigatie, het gebruik van menu’s, de opbouw van een scherm,… Dit komt omdat ze elk hun eigen richtlijnen hebben om de UI te ontwerpen.

• iOS – Human Interface Guidelines
• Android – Material design

   

• UWP – Fluent Design System

   

De gebruikers verwachten ook dat iedere app, op hun specifiek toestel, zich houdt aan de typische UI van dit toestel, zich houdt aan de “native look and feel” van het toestel. Met andere woorden, u wilt op uw iPad geen apps die eruit zien als een UWP/Windows 10 app.

Onderstaande afbeelding toont hoe, zelfs een eenvoudige objecten als, een Button, een Slider, een Toolbar, ja, zelfs een Label, er anders uitzien op de specifieke mobiele toestellen (in volgorde iOS, Android, UWP).

Verschillende programmeertalen en programmeeromgevingen

Traditioneel worden apps ontworpen in hun eigen specifieke, “native” programmeertaal, in hun eigen specifieke, “native” ontwikkelomgeving gebruikmakend van “platform specifieke” features. Of anders gezegd, als u een app wilt programmeren dat zowel werkt op iOS, Android en UWP dan moet u hem eigenlijk 3 keer programmeren:

• Eenmaal specifiek voor iOS, geprogrammeerd in de “native” programmeertaal Swift/Objective C, binnen de ontwikkelomgeving Xcode gebruikmakend van het iOS Framework.
• Nogmaals specifiek voor UWP, geprogrammeerd in de “native” programmeertaal C#, binnen de ontwikkelomgeving Visual Studio gebruikmakend van .NET Library.
• Tenslotte nogmaals voor Android, geprogrammeerd in de “native” programmeertaal Java, binnen de ontwikkelomgeving Android Studio, gebruikmakend van Android SDK/Java SDK.

U moet de app niet enkel 3 keer programmeren, maar bij iedere aanpassing, update, moet u het opnieuw 3 keer toepassen. En omdat al deze programmeertalen, weliswaar op mekaar gelijken maar toch net iets ander zijn, kunt u de code niet zomaar kopiëren en plakken.

De Oplossing

Een ontwikkelomgeving, en een programmeertaal, dat u in staat stelt om apps te ontwikkelen voor alle/meerdere systemen/platformen (cross-platform) vanuit één gemeenschappelijke, gedeelde programmeercode (single, shared codebase).

Xamarin biedt deze oplossing.

Wat is Xamarin?

Xamarin apps look and feel native because they are.

Het bedrijf Xamarin is opgericht in 2011. De eerste 3 jaar van zijn bestaan focuste Xamarin zich op het ontwerpen van 3 .NET bibliotheken/libraries:

• Xamarin.Mac
• Xamarin.iOS
• Xamarin.Android

Deze 3 bibliotheken vormen samen het Xamarin Platform. Deze bibliotheken bestaan uit .NET versies van de “native” Mac, iOS en Android API’s (Application Programming Interface).

.NET Programmeurs kunnen deze bibliotheken gebruiken om apps te ontwerpen voor Mac, iOS en Android geprogrammeerd in de programmeertaal C#, dat deel uitmaakt van .NET, en gebruikmakend van de .NET Framework class libray. Vergeet niet dat .NET, van Microsoft, reeds “native” Windows ondersteunt.

Xamarin.iOS enXamarin.Android maken gebruik van de “native”, platform specifieke User-Interface.

Op 28 mei 2014 introduceerde Xamarin Xamarin.Forms. Xamarin.Forms maakt het mogelijk om User-Interface-code te schrijven dat kan gecompileerd worden naar zowel iOS, Android als UWP. We spreken van een cross-platform UI-code. Xamarin.Forms vermindert zo de platform-specifieke code verder.

Xamarin.Forms komt met een hele set aan “pages”, “layouts” en “controls”. Xamarin.Forms gebruikt eveneens XAML als “opmaaktaal”.

Hoe werkt Xamarin.Forms?

Stel, u hebt een switch nodig (u weet wel, zo’n knopje dat u kunt verschuiven om aan te duiden of een instelling “aan” of “uit” is). U gebruikt hiervoor de class Switch uit de Xamarin.Forms.Core library. Bij het compileren van het programma wordt de Switch “gemapt” naar de overeenkomende platform-specifieke control, namelijk UISwitch voor iOS, Switch op Android en ToggleSwitch op UWP.

Zo bevat Xamarin.Forms.Core library ook de class Slider (u weet wel, zo’n horizontale bar die u kunt gebruiken om een gewenste numerieke waarde te selecteren). Bij het compileren van het programma wordt de Slider “gemapt” naar een UISlider op iOS, een Seekbar op Android, en een Slider op UWP.

Dus iedere keer u via Xamarin.Forms een Switch, een Slider of een Button programmeert, wordt telkens het overeenkomende platform-specifieke object gerenderd op het specifieke platform.

In maart 2016 wordt Xamarin overgenomen door Microsoft en geïntegreerd in Visual Studio.NET.

Gedeelde code

Wanneer u vanuit dezelfde programmeercode meerdere platformen wilt kunnen bereiken moet u instaat zijn de gemeenschappelijke programmeercode te delen (Sharing Code).

Xamarin biedt hiervoor 2 opties.

• Portable Class Libraries (PCL): de gezamenlijke programmeercode bevindt zich in een Dynamic-Link Library (DLL) waar de specifieke platformen elk kunnen naar refereren.

• Shared project: maakt gebruik van “compiler directives” om platform specifieke code aan te geven #if __ANDROID__ . Deze code wordt vervolgens gecompileerd in het specifieke project (iOS, Android of UWP).

In de cursus Starten met programmeren – Cross-platform mobiele apps ontwikkelen met Xamarin wordt hoofdzakelijk gewerkt met Portable Class Libraries.

Xamarin.iOS en Xamarin.Android versus Xamarin.Forms

Wanneer kiest u voor Xamarin.iOS/Xamarin.Android en wanneer kiest u voor Xamarin.Forms?

In de cursus Starten met programmeren – Cross-platform mobiele apps ontwikkelen met Xamarin wordt hoofdzakelijk gewerkt met Xamarin.Forms.

Hello Xamarin.Forms

Onderstaande schermen tonen de uitvoering van een eenvoudige app op verschillende platformen en hun specifieke weergave. De app bevat een Label, Button, Switch, Slider en een Toolbar.

Dit is de XAML-code binnen Xamarin.Forms die bovenstaande schermen aanmaakt.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="PlatformVisuals.PlatformVisualsPage" Title="Visuals">

    <StackLayout Padding="10,0">
        <Label Text="Hello, Xamarin.Forms!" FontSize="Large" VerticalOptions="CenterAndExpand" HorizontalOptions="Center" />

        <Button Text = "Click Me!" VerticalOptions="CenterAndExpand" HorizontalOptions="Center" />

        <Switch VerticalOptions="CenterAndExpand" HorizontalOptions="Center" />

        <Slider VerticalOptions="CenterAndExpand" />
    </StackLayout>

    <ContentPage.ToolbarItems>
        <ToolbarItem Text="edit" Order="Primary">
            <ToolbarItem.Icon>
                <OnPlatform x:TypeArguments="FileImageSource" iOS="edit.png" Android="ic_action_edit.png" WinPhone="Images/edit.png" />
            </ToolbarItem.Icon>
        </ToolbarItem>

        <ToolbarItem Text="search" Order="Primary">
            <ToolbarItem.Icon>
                <OnPlatform x:TypeArguments="FileImageSource" iOS="search.png" Android="ic_action_search.png" WinPhone="Images/feature.search.png" />
            </ToolbarItem.Icon>
        </ToolbarItem>

        <ToolbarItem Text="refresh" Order="Primary">
            <ToolbarItem.Icon>
                <OnPlatform x:TypeArguments="FileImageSource" iOS="reload.png" Android="ic_action_refresh.png" WinPhone="Images/refresh.png" />
            </ToolbarItem.Icon>
        </ToolbarItem>

        <ToolbarItem Text="explore" Order="Secondary" />
        <ToolbarItem Text="discover" Order="Secondary" />
        <ToolbarItem Text="evolve" Order="Secondary" />
    </ContentPage.ToolbarItems>
</ContentPage>

Bekijk deze XAML-code al eens en probeer het te begrijpen.

Lukt dit nog niet, geen probleem, we moeten uiteindelijk nog aan de cursus Starten met programmeren – Cross-platform mobiele apps ontwikkelen met Xamarin beginnen.

Wat hebt u nodig?

Wat u exact nodig hebt kunt u hier lezen.

In de praktijk werken we met:

• Een Windows 10 computer.
• Visual Studio 2017 Community geïnstalleerd. Deze is gratis te installeren en te gebruiken (mits een aanmelding met een Microsoft-account).
• Optioneel een Mac-computer in het netwerk voor het ontwikkelen iOS-specifieke apps.

Hoor het eens van iemand anders

In onderstaande video geeft James Montemagno van Microsoft een overzicht van de mogelijkheden van Xamarin.

Behandelde Basiscompetenties uit de module ICT Programmeren – Specifieke ontwikkelomgeving: eenvoudige functionaliteiten

• IC BC244 – kan specifieke hardware of software programmeren