Thuiswerkmogelijkheden bij ShareValue

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!

Heb je weleens de behoefte gehad om iets uit te proberen in Microsoft Azure? Of ben je simpelweg nieuw in de Cloud oplossing van Microsoft en wil je een kijkje nemen achter de schermen? Dan is dat goed mogelijk met een Azure free account waarvoor jij, zoals de term free al weggeeft, je gratis kunt aanmelden voor het gebruik van Azure.

Eerst even in het kort wat Microsoft Azure is: het is het cloudcomputingplatform van Microsoft waar een aantal diensten over het Internet wordt aangeboden. Het Internet wordt hierin vaak aangeduid als de Cloud. Bij diensten kun je o.a. denken aan virtuele machines, webapplicaties, digitale beveiliging, opslag en werkstromen. Een Azure free account is in feite een abonnement op Azure. Aan dit abonnement zitten wel bepaalde voorwaarden verbonden (anders gesteld zitten er enige beperkingen aan, maar dat klinkt zo negatief). Op deze voorwaarden wordt later in de blog op ingegaan.

Nieuwsgierig geworden? Lees gerust verder. Heb je geen zin in het lezen van een lap tekst en wil je gelijk overgaan tot actie en je dus aanmelden voor een Azure free account? Bekijk dan het kopje Stappen om je aan te melden

Wat is er nodig voor een Azure free account?

Om je te kunnen aanmelden voor een Azure free account heb je het volgende nodig:

• Microsoft-account: dit is een gebruikersaccount waarmee op verschillende diensten van Microsoft kan worden aangemeld.
  
  Dit kan een bestaande zijn (A) of je kunt direct een Microsoft-account aan maken (B)

​Figuur 1. Maak een Microsoft-account

• Creditcard. Dit wordt door Microsoft enkel gebruikt om de identiteit te verifiëren.

Wat krijg je met een Azure free account?

Zoals bij de inleiding vermeld, zitten er wat voorwaarden aan een Azure free account. Ik zal deze hieronder beschrijven.

Bij het registeren voor een Azure free account krijg je $200,- tegoed die je de eerste 30 dagen kunt besteden in Azure, daarna vervalt dit tegoed. Een aantal voorbeelden waarbij je de tegoed kunt inzetten zijn:

• Azure App service
  Dit is een webapplicatie hosting service van Microsoft in Azure. Hier kun je dus o.a. websites huisvesten.
• Azure Virtual Machines
  Dit zijn schaalbare, on-demand virtuele computers die aanpasbaar zijn aan de behoefte en/of gebruik.
• Azure Logic Apps
  Dit is een PaaS oplossing van Microsoft waar je geautomatiseerde werkstromen in kunt maken.

Dit zijn slechts een paar mogelijkheden. Azure biedt veel meer dan ik hier in dit blog kan beschrijven. Om meer te weten en te zien wat de mogelijkheden zijn, kun je de informatie hierover lezen op op Microsoft Learn.

Verder biedt een Azure free account een aantal diensten die gedurende 12 maanden gratis te gebruiken. Naast dat het een aantal diensten biedt die voor altijd gratis te gebruiken zijn. Let wel: ‘Gratis’ in deze heeft vaak een beperking in de hoeveelheid transacties/handelingen er gedaan mag worden of een beperking in de opslag/grootte van een bepaalde dienst.

Hieronder een korte blik op een aantal gratis services.

​Figuur 2. Overzicht aantal gratis services.

​

Stappen om je aan te melden.
 

1. Navigeer naar: https://azure.microsoft.com/en-us/free/

2. Klik op de knop Start free.

Je wordt nu omgeleid naar het inlogscherm van Microsoft.

3. Log in met een Microsoft-account.

Het aanmaken van een Microsoft-account is buiten bereik van deze blog, meer informatie hoe een Microsoft-account te maken kun je hier vinden.

4. Vul de volgende gegevens in, optionele gegevens achterwege gelaten:

• Country / Region – Land / Regio
• First name – Voornaam
• Last name – Achternaam
• Email address – E-mailadres
• Phone – Telefoonnummer
• Address line 1 – Adres
• City – Stad
• State – Provincie
• Postal Code – Postcode

5. Ga akkoord met de Customer agreement en Privacy agreement.

​Figuur 3. Customer agreement en Privacy agreement.

​

6. Klik op de knop Next.

7. Vul jouw creditcard gegevens in.

Wederom, deze gegevens worden enkel gebruikt om jouw identiteit te verifiëren

​Figuur 4. Vul jouw creditcard gegevens ter verificatie.

​

Een scherm wordt nu geladen waarin de identiteit wordt gecontroleerd en vervolgens wordt het account gereed gemaakt.

8. Je bent nu klaar. De pagina met de volgende tekst wordt getoond:

Figuur 5. Je bent nu klaar.

​

Klik op de knop Go to the Azure portal om het Azure avontuur te beginnen!

Je eerste stappen binnen Azure

Hieronder zal ik wat stappen en tips benoemen die je kunt nemen aan het begin van het avontuur.

Het aanpassen van het thema binnen de Azure Portal:

Je kunt de Azure Portal meer naar jouw eigen smaak aanpassen door te kiezen tussen de verschillende thema’s. Het default (Azure) thema is toegepast die ziet zoals je kunt zien zo uit

Figuur 6. Zo ziet het default (Azure) thema eruit.

​

Om het thema aan te passen klik je op het tandwiel, gevolgd door Appearance + startup views

Figuur 7. Portal settings met de Appearance + startup views.

​

Nu zie je de verschillende thema’s onder Theme, selecteer het gewenste thema en klik vervolgens op Apply. Als voorbeeld heb ik nu gekozen voor het thema Dark en ziet het startscherm van de Azure Portal er nu op deze manier uit:

​Figuur 8. Het startschema in thema Dark.

​

Zoals je waarschijnlijk al hebt kunnen zien in Appearance + startup views kun je ook het gedrag van het menu aanpassen. Je zou ook de taal kunnen aanpassen onder Language + Region. Ik zou zeggen bekijk het om te zien wat voor jou werkt.

Hoe vind je een bepaalde service?

Verder wil ik nog wat tips meegeven zoals hoe men het snelst een bepaalde service vindt. Deze ligt voor de hand maar wil ik toch even benoemen. Het makkelijkste is dan om de bovenstaande zoekbalk binnen het Azure portal te gebruiken.

Hoe blijf je binnen budget?

Het is ook wel handig om de $200,- die je hebt in de gaten te houden. Dit kun je doen onder Cost Management.

Figuur 9. Pagina Cost Management.

Hier kun je bijvoorbeeld Cost alerts instellen. Deze brengen jou dan op de hoogte als een bepaald budget dreigt te overschrijden of hebt bereikt. Dit is afhankelijk voor je keuzes binnen de Cost alerts. Deze werken ook alleen in combinatie met een budget die je kunt instellen onder Budgets.

Hieronder een toelichting hoe je een budget kunt instellen:

1. Navigeer naar Cost Management door het in de zoekbalk in te voeren.

2. Kies aan de linkerkant voor Budgets.

Figuur 10. Kies voor Budgets in het menu.

​

3. Klik op de knop + Add.

4. De Budget Scoping kun je laten zoals het is.

5. Voer het volgende in onder Budget Details

• Name: voer hier een gewenste naam in
• Reset period: in dit geval kan je het op ‘monthly’ laten
• Creation date: huidig jaar + huidige maand + huidige dag
• Expiration date: volgend jaar + huidige maand + huidige dag

6. Bij Budget Amount geef je een waarde van 200 op.

7. Klik op de knop Next.

8. Je bevindt je in het scherm waar je een Alert kunt instellen, voer hier het volgende in

• Type: Actual
• % op budget: 95

9. Voer onder Alert recipients (email) een e-mailadres in waar je wilt dat de alert op ontvangen wordt.

10. Kies je gewenste taal onder Language preference.

11. Klik op de knop Create.