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
Les avantages d'acheter des résumés chez Stuvia:
Qualité garantie par les avis des clients
Les clients de Stuvia ont évalués plus de 700 000 résumés. C'est comme ça que vous savez que vous achetez les meilleurs documents.
L’achat facile et rapide
Vous pouvez payer rapidement avec iDeal, carte de crédit ou Stuvia-crédit pour les résumés. Il n'y a pas d'adhésion nécessaire.
Focus sur l’essentiel
Vos camarades écrivent eux-mêmes les notes d’étude, c’est pourquoi les documents sont toujours fiables et à jour. Cela garantit que vous arrivez rapidement au coeur du matériel.
Foire aux questions
Qu'est-ce que j'obtiens en achetant ce document ?
Vous obtenez un PDF, disponible immédiatement après votre achat. Le document acheté est accessible à tout moment, n'importe où et indéfiniment via votre profil.
Garantie de remboursement : comment ça marche ?
Notre garantie de satisfaction garantit que vous trouverez toujours un document d'étude qui vous convient. Vous remplissez un formulaire et notre équipe du service client s'occupe du reste.
Auprès de qui est-ce que j'achète ce résumé ?
Stuvia est une place de marché. Alors, vous n'achetez donc pas ce document chez nous, mais auprès du vendeur anouckcelis. Stuvia facilite les paiements au vendeur.
Est-ce que j'aurai un abonnement?
Non, vous n'achetez ce résumé que pour €6,49. Vous n'êtes lié à rien après votre achat.
