Bits, Bites & Bios

De laatste jaren vindt er een transitie plaats op het gebied van mobile development. Steeds vaker kiezen bedrijven ervoor om hun mobiele applicaties niet langer in Java (voor Android) of Swift (voor iOS) te ontwikkelen, maar kiezen zij voor een hybride framework als basis voor hun mobiele applicatie. In deze blog beschrijf ik één van deze frameworks, namelijk Ionic. Wat is Ionic, hoe werkt het en waarom zou jij de transitie moeten maken naar een native web-framework voor het ontwikkelen van mobiele applicaties.

Wat is Ionic?

Ionic is een open source interface platform waarmee mobiele en desktop-applicaties ontwikkeld kunnen worden met gebruik van web-technologieën als HTML, CSS en JavaScript. Deze toolkit wordt nauw geïntegreerd met een populair Front-end JavaScript framework naar keuze, zoals Angular, Vue en React. In andere woorden maakt Ionic het mogelijk om jouw webapplicatie voor verschillende platforms te ontwikkelen vanuit één codebase en daarbij gebruik te maken van de native functionaliteiten van de apparaten waarop de applicatie draait. Omdat Ionic apps gebaseerd zijn op het web, kun je ook verschillende web-gebaseerde UI libraries gebruiken zoals TailwindCSS of Bootstrap voor de opmaak van je applicatie.

Ionic maakt gebruik van Capacitor. Capacitor is een cross-platform native runtime die verschillende web-gerichte API’s biedt. Daarmee kan de app zoveel mogelijk web standaarden blijven gebruiken en heeft daarbij toegang tot de uitgebreide systeemeigen apparaat-functies. Denk hierbij bijvoorbeeld aan het gebruik van bluetooth, locatie, push notificaties, batterijstatus, opslag en de camera.

Waarom wil je Ionic gebruiken?

Ionic biedt de gebruiker een naadloze ervaring, waar de gebruiker zich ook bevindt. Of dat nu op een telefoon is, op een desktop of in de browser; de gebruiker verwacht consistentie via alle kanalen. Door het gebruik van Ionic kan met een enkele codebase voor al deze kanalen een applicatie uitgerold worden.

Door met Ionic te bouwen, kun je je bestaande web-ontwikkelaars inzetten voor het bouwen van mobiele- en desktop applicaties. Je hoeft niet langer op zoek naar een aparte ontwikkelaar voor ieder platform dat je wilt ondersteunen. De web-ontwikkelaars ontwikkelen de applicatie in Ionic en rollen deze zonder problemen uit naar de verschillende platformen.

Naast bovengenoemde voordelen is Ionic ook nog eens open-source en dus helemaal gratis. Ionic heeft een grote community en vraagstukken waar je als ontwikkelaar tegenaan loopt worden dan ook veel besproken op de verschillende ontwikkelforums. Daarnaast integreert Ionic heel gemakkelijk met bekende tools (bijvoorbeeld met Azure), zodat het uitrollen van applicaties naar de Google Play Store of Apple App Store heel eenvoudig wordt.

Hoe werkt Ionic?

Een native functionaliteit is door het gebruik van Capacitor eenvoudig in een Ionic-app toe te voegen. Zo kunnen we bijvoorbeeld de locatie van ons toestel gebruiken. Als eerst moeten we een nieuwe Ionic applicatie genereren. Dit kunnen we zelf doen via de command-line Interface die Ionic biedt, of via een handige web-interface.

Figuur 1 - Web-interface voor het opzetten van een Ionic-applicatie.

​

In dit voorbeeld maken wij de applicatie met de CLI. Eerst zorgen we ervoor dat Ionic globaal op onze computer geïnstalleerd is en daarna starten we het initialisatie proces.

$ npm install -g @ionic/cli

$ ionic start

De Ionic-CLI vraagt ons nu een aantal dingen te kiezen voor ons project, zoals welk framework en welke basis-lay-out wij willen in onze app? In mijn voorbeeld kies ik voor Angular met een `blank` applicatie-lay-out, maar andere opties zijn een lay-out met tabbladen of met een menu. De eerste opzet van deze applicatie heeft nog weinig functionaliteit, hier gaan we verandering in brengen.

Figuur 2 - Standaard Ionic-applicatie zonder menu of tabbladen.

​

Om de locatie-functionaliteit toe te voegen, moeten we de gewenste Capacitor-plug-in installeren in ons project zodat wij deze kunnen gebruiken. In de documentatie van Ionic voor native functionaliteiten (https://ionicframework.com/docs/native) is een uitgebreide lijst te vinden met alle native API’s die geïnstalleerd kunnen worden en hoe deze te gebruiken. Als eerst voeren we de volgende commando’s uit om de locatie plug-in te installeren.

$ npm install cordova-plugin-geolocation

$ npm install @awesome-cordova-plugins/geolocation

$ ionic cap sync

Vervolgens openen wij het Home-component van onze nieuwe Ionic-applicatie die nu nog de standaard template code bevat waarin wij de locatie gaan gebruiken. Door middel van de volgende code kunnen we eenvoudig de locatie van onze gebruiker opvragen. In de initialisatie van dit component vragen we de huidige positie op via de Geolocation-API en tonen deze in het template.

 

import { Component, OnInit } from '@angular/core';
import { Geolocation, Geoposition } from '@awesome-cordova-plugins/geolocation/ngx';

@Component({
  selector: 'app-home',
  template: `
    <ion-content [fullscreen]="true">
      <div id="container">
        <strong>Uw huidige locatie:</strong>
        <p *ngIf="currentPosition">{{currentPosition.coords.latitude}}, {{currentPosition.coords.longitude}}</p>
        <p *ngIf="!currentPosition">Onbekend</p>
      </div>
    </ion-content>
  `
})
export class HomePage implements OnInit {
  currentPosition: Geoposition;

  constructor(private geolocation: Geolocation) {}

  ngOnInit(): void {
    this.geolocation.getCurrentPosition().then((resp) => {
      this.currentPosition = resp;
    }).catch((error) => {
      console.log('Error getting location', error);
    });
  }

}

Zoals hierboven te zien is, maakt Ionic het ons erg gemakkelijk. Als ontwikkelaar hoef je je helemaal niet bezig te houden met de functionele werking van de locatiebepaling of welke andere native functionaliteit dan ook. We roepen simpelweg de functies aan die de plug-in ons biedt (zoals ‘getCurrentPosition’ in bovenstaand voorbeeld) en Ionic regelt alles achter de schermen voor ons. Er wordt door het besturingssysteem ook automatisch om toestemming gevraagd voor het gebruiken van de locatie.

Figuur 3 - Locatie-toestemming wordt door de telefoon zelf afgehandeld.

​

Als de locatie succesvol kan worden opgehaald, zien we dat de coördinaten van de locatie in de app worden weergegeven.

Figuur 4 - Locatie-coördinaten worden succesvol opgehaald en weergegeven.

​

Een volgende stap kan bijvoorbeeld zijn om deze locatie op een kaart weer te geven of op te slaan in een SQL-database op het apparaat. Ionic biedt hier heel veel mogelijkheden in. Het mag duidelijk zijn dat ik als web-ontwikkelaar geen weet heb van de platform-specifieke vereisten voor het toepassen van deze functionaliteiten. Dit is iets wat Capacitor en Ionic ons volledig uit handen nemen.

Conclusie

Ionic biedt een alles-in-één pakket om mobiele-, desktop- en webapplicaties te ontwikkelen die gebruik kunnen maken van systeemeigen functionaliteiten van je toestel. De voordelen die je hieruit kan halen zijn enorm, maar kort samengevat zijn dat:

• Een naadloze, consistente ervaring voor de eindgebruiker via verschillende kanalen.
• Eén ontwikkelteam voor zowel mobiele-, desktop- als webapplicaties.
• Open-source en dus helemaal gratis.
• Geen kennis nodig van complexe, apparaat-eigen functionaliteiten.

Veel grote tech-bedrijven maken al gebruik van Ionic. Voorbeelden van apps die gemaakt zijn met Ionic zijn Sworkit, MarketWatch en Sanvello. Voor meer voorbeelden verwijs ik je naar de website van Ionic zelf!

Benieuwd naar hoe Ionic binnen jouw organisatie ingezet kan worden? Neem gerust contact op, dan bespreken we samen de mogelijkheden. Ben je zelf een ontwikkelaar met interesse in ontwikkelen van Ionic-applicaties? Kom dan eens langs voor een kop koffie!

Vorige maand was alweer de zesde Tech Thursday die ik organiseerde en de tweede die ook toegankelijk is voor iedereen die geïnteresseerd is; waarom zouden we stoppen met delen bij de voordeur?

Terug naar het onderwerp van de laatste sessie: testen, testen en testen. Aan de titel van het blog kan je lezen dat er één keer testen afgevallen is. Waar ik het bij mijn presentatie over de drie bekendste frameworks had: MS-Test (v2), nUnit en xUnit, spits ik me nu toe tot twee andere interessante ontwikkelingen. Over bUnit heb ik toen ook al gesproken, maar aan het eind van mijn presentatie werd ik door een externe deelnemer gewezen op een andere package, Stryker Mutator.

bUnit

bUnit

Ik ga het echter eerst over bUnit hebben. Met bUnit kan je Blazor-componenten testen en het werkt altijd in combinatie met één van de andere drie testframeworks. Met bUnit is de Blazor-cirkel rond: van Back-End tot Front-End kan het geheel in C# opgezet worden, inclusief alle (unit)testen.

bUnit is dus bedoeld om een component te renderen en hier acties op uit te voeren en te testen of de output dan aan de verwachting voldoet. En dit kan meegenomen worden in een build pipeline.

Testen met bUnit kan in een normaal C# bestand (.cs) of in een Razor bestand (.razor).

Het voordeel van Razor bestanden is dat het volgende mogelijk is:

 

@inherits TestContext;

@code   
{

    [Fact]
    public void HelloWorldComponentRendersCorrectly()
    {
        var cut = RenderComponent<HelloWorld>();
        cut.MarkupMatches(@<h1>Hello world from Blazor</h1>);
    }
}

De markup kan dus gewoon door middel van het @ teken toegevoegd worden zonder allerlei andere escape tekens. Daarnaast negeert bUnit allerlei opmaak binnen HTML zoals tabs, spaties en enters.

Wil je echter gebruik maken van testen in Razor, dan is het handig om niet met het framework te beginnen (dus niet bijvoorbeeld een xUnit Test Project aanmaken), maar met een ASP.NET Core Empty project. Vervolgens voeg je de gebruikelijke NuGet packages toe om te testen.

Met C# 11 wordt het wellicht weer makkelijker om gewone C#-bestanden te gebruiken, omdat daar een interessante manier wordt geïntroduceerd die “raw string literals” heet .

 

var location = $$"""
   You are at {{{Longitude}}, {{Latitude}}}
   """;


 

Door drie quotes (of meer) te gebruiken, wordt een “raw string literal” gemaakt. Daarnaast heeft het aantal dollartekens aan hoeveel accolades er nodig zijn voor string interpolation.

Zoals het voorbeeld laat zien, is het niet gelijk aan bovenstaande code, maar hierdoor kan het gebruikt van C#-bestanden wel een overweging zijn.

Meer informatie over bUnit vind je hier.

Stryker Mutator

Stryker Mutator

Dat delen met iedereen een voordeel blijkt te hebben, geeft dit deel van de blog wel aan. Stryker was voor mij onbekend en deze interactie was precies waar ik naar zocht toen ik de Tech Thursday toegankelijk wilde maken voor iedereen.

Stryker Mutator is een project van InfoSupport met het doel om de kwaliteit van unit tests te verhogen. Stryker Mutator maakt aanpassingen aan je code waardoor er mutanten ontstaan. Goede unit tests zouden vervolgens moeten falen om gemuteerde code te ontdekken. Als (alle) unit tests slagen dan betekent dit dat de gewijzigde code niet afgedekt wordt door de unit tests.

Een simpel voorbeeld is de volgende code:

public bool IsAdult(int age)   
{
    return age >= 18;
}


 

Stryker zal deze code muteren door de code te wijzigen in:

public bool IsAdult(int age) 
{
    return age < 18;
}



 

Als je bovenstaande code test, dan krijg je nu een omgekeerd resultaat waardoor je test faalt en de mutant wordt uitgeschakeld.

In combinatie met een goede code coverage tool (zoals bijvoorbeeld SonarQube), is dit een waardevolle tool die ingezet kan worden bij Pull Requests: Stryker kan ingezet worden in build pipelines. Dan wordt niet alleen de code coverage gecontroleerd, maar ook de kwaliteit van de unit test.

Voor meer informatie over Stryker klik hier. Wijzigingen die Stryker Mutator allemaal kan doen, vind je hier en de NuGet package staat hier.