In deze samenvatting leer je meer over hoe mobiele applicaties te bouwen met behulp van het Angular, Ionic & Capacitor. Ionic is een UI library die eenvoudig gebruikt kan worden om een adaptive native-like UI te bouwen voor Android & iOS. We combineren deze componetenlibrary met het JavaScript fram...
Dev Tools
Tijdens het ontwikkelen van een mobiele applicatie is het natuurlijk belangrijk
om de applicatie te testen op een mobiele viewport
o Chrome of Firefox dev tools F12
de dev tools bieden de optie om mobiele applicaties te bekijken op verschillende
mobiele toestellen
o zowel Android als iOS
Als de mobiele view geactiveerd is, kan via de device toolbox, het toestel waarop
de app draait ingesteld worden
o Via een dropdown-menu kunnen verschillende andere toestellen
toegevoegd worden
Na het wijzigen van het toestel is et nodig om de pagina te
herladen, anders zijn de CSS wijzigingen niet zichtbaar
Prefers-color-scheme
o Ionic voorziet zowel lichte als donkere thema’s
Beiden thema’s kunnen testen
Zowel Chrome als Firefox voorzien de optie om het thema
aan te passen
o Chrome
Als de dev tools open zijn kan je de shortcut
ctrl+shift+p gebruiken om het command venter
te openen
Hier kan je de tekst ‘emulate’ intypen en
vervolgens kan hier het gewenste thema
geselecteerd worden
o Firefox
De optie om het thema te manipuleren staat
standaard niet aan
Navigeer naar about:config via de
adresbalk
o Zoek vervolgens naar
devtools.inspector.color-scheme-
, simulation en druk op de add (+)
knop
Het mobiele landschap
Hybrid-webview & hybrid-native
o Twee codebases onderhouden is niet altijd praktisch of nodig
Er zijn verschillende tools beschikbaar waarmee mobiele
applicaties, in één taal, geschreven kunnen worden voor zowel
Android als iOS
Hybrid applicaties
o Hybrid apps kunnen geschreven worden in JavaScript,
C#, Dart, Python, Kotlin
De taal kan je dus kiezen
o Nadelen
Afhankelijk van een derde partij
Gebruikt frameworks en plug-ins die niet altijd
up-to-date zijn en meestal niet de allerlaatste
features van Android of iOS kunnen gebruiken
o Twee soorten hybrid apps
Soort één
Worden verpakt in een iOS en Android
app die niets anders doet dan een website
laden in een webview, dus een browser
Soort twee
Worden geschreven in één taal naar
keuze, maar wordt gecompileerd naar
native Java of Swift cide
o Dit soort apps zijn (bijna) even
performant als echte native apps
React Native
o Een React framework om hybrid native apps te schrijven
o React Native projecten worden geschreven in JavaScript en maken gebruik
van een 100% gedeelde codebase
o React Native biedt React UI-componenten aan die vertaald worden naar
native iOS of Android componenten
Flutter
o Een relatief nieuw framework ontwikkeld door Google
o Flutter apps worden geschreven in Dart
2
, Één cidebase kan gecompileerd worden naar een mobiele, web of
desktop applicatie
Dart is ontwikkeld met het transpileren naar verschillende
platformen in het achterhoofd en biedt bijzonder goede
performance op de verschillende platformen
Ionic
o Een hybrid webview framework
o Ionic applicaties worden dus niet gecompileerd naar native code
o Toch biedt Ionic, UI-componenten aan die zich automatisch aapassen aan
het platform waarop de applicatie uitgevoerd wordt
o Ionic apps kunnen ontwikkeld worden in Angular, React, Vue of klassieke
JavaScript
Via Capacitor wordt de applicatie geconverteerd tot een hybrid-
webview applicatie die, voor de gebruiker, niet te onderscheiden is
van een native app
o Ionic apps kunnen eenvoudig gepubliceerd worden als progressive web
apps of desktop applicaties via Electron
.NET MAUI
o De .NET Multi-platform App UI of MAUI is een recent uitgebrachte tool voor
multi-platform development
o Via MAUI kan met één C# codebase code geschreven worden voor
Android, iOS, Windows, macOs
o MAUI is de opvolger van Xamarin.Forms en Xamarin.Native maar
combineert de beste aspecten van beide
o Een MAUI-UI-component wordt automatisch getranspileerd naar een
gepaste native component op het doelplatform
Progressive Web Apps
o PWAs
Zijn webapplicaties waaraan service workers en web manifest aan
toegevoegd worden
Deze technologieën zorgen ervoor dat de applicatie vanuit
een browser geïnstalleerd kan worden op een smartphone of
desktop computer
o De service workers bieden offline functionaliteit
Gegevens worden in een cache bewaard, als de
applicatie offline gebruikt wordt, zal de data uit
de cache geladen worden
Indien het toestel met het internet
verbonden is zal de applicatie draaien als
3
, een website en dus automatisch de
laatste versie downloaden
4
Voordelen van het kopen van samenvattingen bij Stuvia op een rij:
Verzekerd van kwaliteit door reviews
Stuvia-klanten hebben meer dan 700.000 samenvattingen beoordeeld. Zo weet je zeker dat je de beste documenten koopt!
Snel en makkelijk kopen
Je betaalt supersnel en eenmalig met iDeal, creditcard of Stuvia-tegoed voor de samenvatting. Zonder lidmaatschap.
Focus op de essentie
Samenvattingen worden geschreven voor en door anderen. Daarom zijn de samenvattingen altijd betrouwbaar en actueel. Zo kom je snel tot de kern!
Veelgestelde vragen
Wat krijg ik als ik dit document koop?
Je krijgt een PDF, die direct beschikbaar is na je aankoop. Het gekochte document is altijd, overal en oneindig toegankelijk via je profiel.
Tevredenheidsgarantie: hoe werkt dat?
Onze tevredenheidsgarantie zorgt ervoor dat je altijd een studiedocument vindt dat goed bij je past. Je vult een formulier in en onze klantenservice regelt de rest.
Van wie koop ik deze samenvatting?
Stuvia is een marktplaats, je koop dit document dus niet van ons, maar van verkoper anouckcelis. Stuvia faciliteert de betaling aan de verkoper.
Zit ik meteen vast aan een abonnement?
Nee, je koopt alleen deze samenvatting voor €6,49. Je zit daarna nergens aan vast.
