Mobiele apps programmeren met Xamarin – Wat is Xamarin?

print

Inhoud


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.

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.

Xamarin.iOS en Xamarin.Android versus Xamarin.Forms

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

Xamarin.iOS/Xamarin.AndroidXamarin.Forms
Apps met veel platform-specifieke functionaliteiten die gebruik maken van de platform specifieke API's.Apps met minder platform-specifieke functionaliteiten.
Wanneer specifieke, op maat gemaakte UI belangrijker is dan het delen van code.Wanneer het delen van gemeenschappelijke code belangrijker is dan op maat gemaakte UI.
Meer geschikt voor "technische" apps.Meer geschikt voor data gestuurde apps.
U verkiest de schermen te ontwerpen via programmeercode.U bent eerder een beginnende programmeur en wenst de schermen te ontwerpen met behulp van XAML.

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


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.

Portable Class Libraries

  • 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).

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


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:


Hoor het eens van iemand anders

Onderstaande video laat iemand van Microsoft een introductie geven in Xamarin.Forms. Het gedemonstreerde programma is geen beginnersprogramma, maar het is wel een programma dat we aan het einde van het eerste jaar gaan programmeren. U krijgt dus meteen een mooi voorbeeld van wat u, na een schooljaar, kunt ontwerpen met Xamarin.


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

  • IC BC244 – kan specifieke hardware of software programmeren

Geef een reactie

  • Abonneer je op deze website d.m.v. e-mail

    Voer je e-mailadres in om je in te schrijven op deze website en e-mailmeldingen te ontvangen van nieuwe berichten.