Ontwikkeling van kruis-platform mobiele apps met Ionic 8 Training Cursus

Introductie tot Ionic en het kruis-platform landschap

• Wat is Ionic en wanneer kies je het boven native development of Flutter?
• De Web Components-architectuur achter de Ionic UI
• Frameworkondersteuning binnen de Angular-, React- en Vue-ecosystemen
• Praktijkvoorbeelden voor PWA's en mobiele applicaties

Installeerontwikkelomgeving

• Installatie en configuratie van Node.js en npm
• Installatie van de Ionic CLI
• Het maken en opzetten van een nieuw Ionic-project
• Toepassingen uitvoeren in de browser en via aangesloten apparaten

Projectstructuur en architectuur diepgaand

• Pagina's, modules en herbruikbare componenten
• Verstaaan en configureren van het routersysteem
• Diensten en patronen voor afhankelijkheidsinjectie
• Mapstructuur voor assets en omgevingconfiguratie

Kern UI-componenten en lay-out

• Het gebruik van ion-header, ion-toolbar en ion-content voor de paginestructuur
• Invoervakken: ion-input, ion-select, ion-checkbox
• Knoppen, FAB (Floating Action Button), kaarten, lijsten en het gridsysteem
• Moderno conventies voor Ionic-formulierbesturingselementen
• Hands-on: een inlogpagina en dashboard lay-out bouwen

Navigatie- en routingstrategieën

• Integratie van Angular Router en React Router
• Patronen voor paginanavigatie en deep linking
• Laten laden voor optimalisatie van de prestaties
• Tab-navigatie- en zijmenu-patronen

Styling en thema's

• CSS-variabelen en het Ionic-kleursysteem
• Het implementeren van ondersteuning voor donkere modus
• Dynamische lettertypen en aanpassing van paletten in Ionic 8
• Responsieve styling over verschillende apparaatbreedtes/breakpoints heen

Formulieren en validatie

• Het Reactieve formulierframework voor Angular
• Aangepaste hooks en validatiepatronen voor React
• Foutafhandeling en visuele feedback bij validatie
• Complexe, meestapsformulieren bouwen en valideren

Diensten en API-integratie

• Configuratie van de HTTP-client en interceptors
• Het maken van RESTful API-aanroepen en het verwerken van responsen
• Best practices voor statusbeheer
• Foutgrenzen en herstel bij netwerkfouten

Capacitor en ingebouwde apparaatfuncties

• Verstaaan van de Capacitor-brug en het plugin-ecosysteem
• Installatie en configuratie van Capacitor in een bestaand project
• Toegang tot de camera en afbeeldingskiezer
• Geolocatie en kaartintegratie
• Natieve opslag en voorkeuren
• Hands-on: afbeeldingen vastleggen en gegevens opslaan op het apparaat

Geavanceerde UI-componenten

• Modals, popovers en waarschuwingen in modern Ionic
• Toastmeldingen en laadoverlays
• Verbeteringen voor gebeurtenissen en overlay-architectuur in Ionic 8
• Prestatie-overwegingen voor complexe UI-overlayselementen

Prestatieoptimalisatietechnieken

• Best practices voor code splitsing en laten laden
• Bundelgrootte verminderen en veelgemaakte valkuilen voorkomen
• Renderings optimalisatie voor lijsten en grote datasets

Progressive Web App en bouwpipline

• De applicatie converteren naar een Progressive Web App
• Service workers configureren en offline mogelijkheden instellen
• App-manifest en PWA-installatieprompts

Bouwprocessen en implementatie

• Bouwen en bundelen voor productie Android- en iOS-applicaties
• Configuratie van vereisten en metadata voor inzending tot app-stores
• Omgang met omgevingconfiguratie tussen staging en productie

Capstone project: Een complete mini-app bouwen

• Het ontwerpen van de app-architectuur en navigatiestroom
• Een inlogpagina met authenticatie implementeren
• Een dashboard bouwen met live data-integratie
• Toevoegen van een ingebouwde camerafunctie via Capacitor
• Code review, testen en voorbereiding op implementatie