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
The benefits of buying summaries with Stuvia:
Guaranteed quality through customer reviews
Stuvia customers have reviewed more than 700,000 summaries. This how you know that you are buying the best documents.
Quick and easy check-out
You can quickly pay through credit card or Stuvia-credit for the summaries. There is no membership needed.
Focus on what matters
Your fellow students write the study notes themselves, which is why the documents are always reliable and up-to-date. This ensures you quickly get to the core!
Frequently asked questions
What do I get when I buy this document?
You get a PDF, available immediately after your purchase. The purchased document is accessible anytime, anywhere and indefinitely through your profile.
Satisfaction guarantee: how does it work?
Our satisfaction guarantee ensures that you always find a study document that suits you well. You fill out a form, and our customer service team takes care of the rest.
Who am I buying these notes from?
Stuvia is a marketplace, so you are not buying this document from us, but from seller anouckcelis. Stuvia facilitates payment to the seller.
Will I be stuck with a subscription?
No, you only buy these notes for $7.01. You're not tied to anything after your purchase.
