Canvas-apps eenvoudig gemaakt voor mobiele toepassingen

Wat zijn canvas-apps?

Canvas-apps in Power Apps zijn low-codeapplicaties waarbij u de gebruikersinterface ontwerpt door besturingselementen op een canvas te slepen, vergelijkbaar met PowerPoint of een ontwerptool. Anders dan model-driven apps (die de interface genereren vanuit het datamodel) geven canvas-apps u volledige controle over lay-out, navigatie en gebruikerservaring. Daardoor zijn ze ideaal voor mobiele applicaties die een interface op maat, offlinewerking en integratie met uiteenlopende gegevensbronnen vereisen. basisprincipes van canvas-apps.

Canvas-apps draaien native op iOS- en Android-toestellen via de mobiele Power Apps-app, en ook in de webbrowser. Ze kunnen verbinding maken met honderden gegevensbronnen, waaronder SharePoint, SQL Server, Dynamics 365, Azure-diensten en eigen API's. Met offlinemodus, camera-integratie, gps en barcodescanning maken canvas-apps geavanceerde mobiele scenario's mogelijk zonder de complexiteit van traditionele mobiele ontwikkeling.

Wanneer kiest u voor canvas-apps?

• Interface op maat: U wilt volledige controle over lay-out, huisstijl en gebruikersstromen
• Mobile-firstscenario's: Buitendienst, inspecties, gegevens verzamelen op smartphones en tablets
• Offline werken: Gebruikers moeten kunnen werken zonder internetverbinding
• Meerdere gegevensbronnen: Uiteenlopende systemen koppelen (SharePoint-lijsten, SQL-databases, REST-API's)
• Snel prototypes bouwen: App-concepten bouwen en verfijnen in enkele uren of dagen
• Afdelingsoplossingen: Specifieke teamuitdagingen oplossen zonder IT-achterstand

Ontwerpen voor mobiel: best practices

Strategieën voor een responsieve lay-out

Canvas-apps moeten zich aanpassen aan uiteenlopende schermformaten en oriëntaties. Power Apps biedt ingebouwde eigenschappen en functies voor responsive design. technieken voor een responsieve lay-out.

Belangrijke technieken:

• Gebruik App.Width en App.Height: Gebruik de afmetingen van het toestel voor dynamische positionering
• Containers: Groepeer besturingselementen in containers zodat ze proportioneel meeschalen
• Relatieve positionering: Positioneer besturingselementen ten opzichte van de afmetingen van het bovenliggende element (Parent.Width * 0.8)
• Schermoriëntatie: Detecteer wisselingen tussen staand en liggend formaat en pas de lay-out aan
• Schaalbare lettergroottes: Gebruik lettergroottes die meeschalen met de schermbreedte
• Verborgen besturingselementen: Toon of verberg elementen afhankelijk van de beschikbare ruimte

Een aanraakvriendelijke interface ontwerpen

Mobiele gebruikers werken met aanraking, niet met muis en toetsenbord. Ontwerp interfaces voor tikken, vegen en gebaren.

• Minimale aanraakdoelen: Knoppen zijn minstens 48x48 pixels (bij voorkeur 60x60)
• Witruimte: Voldoende ruimte tussen interactieve elementen voorkomt mistikken
• Duimvriendelijke navigatie: Plaats de belangrijkste acties onderaan, zodat de app met één hand bruikbaar is
• Veeggebaren: Voorzie veegacties voor veelvoorkomende taken (verwijderen, archiveren, als favoriet markeren)
• Visuele feedback: Geef meteen feedback wanneer gebruikers op een besturingselement tikken
• Vermijd hover: Reken niet op hovereffecten: die bestaan niet op aanraaktoestellen

Navigatiepatronen voor mobiel

Mobiele navigatie moet eenvoudig en consistent zijn en zo weinig mogelijk denkwerk vragen. Vermijd desktoppatronen zoals complexe menu's of tabbladen.

Aanbevolen patronen:

• Navigatiebalk onderaan: 3 à 5 hoofdsecties, bereikbaar met de duim
• Hamburgermenu: Secundaire navigatie voor minder frequente acties
• Terugknop: Bied altijd een manier om naar het vorige scherm terug te keren
• Kruimelpad: Toon de huidige locatie in diepe navigatiestructuren
• Kaarten: Gebruik lay-outs met kaarten voor content die snel scanbaar moet zijn
• Geleidelijke onthulling: Toon alleen de noodzakelijke informatie en details pas op verzoek

Prestatie-optimalisatie

Prestaties hebben een directe impact op gebruikerservaring en adoptie. Trage apps leiden tot frustratie en worden links gelaten. Volg de best practices voor prestaties vanaf het begin. prestatierichtlijnen.

Strategieën om gegevens te laden

Gegevens efficiënt ophalen:

• Delegatie: Filter en sorteer gegevens aan de serverkant, niet aan de clientkant
• Beperk het gegevensvolume: Gebruik de functie Top() en filters om alleen de nodige records te laden
• Collecties: Bewaar gegevens in collecties voor herhaald gebruik
• Gelijktijdig laden: Gebruik Concurrent() om meerdere gegevensbronnen parallel te laden
• ClearCollect vs Collect: Gebruik ClearCollect om gegevens te vervangen in plaats van toe te voegen
• Lazy loading: Laad gegevens wanneer ze nodig zijn, niet allemaal bij het opstarten van de app

Prestaties van formules

Power Apps-formules worden uitgevoerd telkens hun invoer verandert. Inefficiënte formules zorgen voor vertraging en een trage app.

• Vermijd geneste lookups: Meerdere LookUp()-aanroepen in elkaar zijn duur
• Gebruik variabelen: Bewaar berekende resultaten in variabelen in plaats van ze opnieuw te berekenen
• Set vs UpdateContext: Gebruik Set() voor globale variabelen en UpdateContext() voor status op schermniveau
• Beperk de logica in OnVisible: Houd Screen.OnVisible-formules snel: gebruikers merken vertragingen meteen
• Filter vóór u zoekt: Verklein datasets voor u complexe filters toepast
• Vermijd volatiele functies: Now(), Today() en Rand() in formules die vaak worden uitgevoerd, veroorzaken onnodige herberekeningen

Media en assets optimaliseren

• Afbeeldingen comprimeren: Comprimeer afbeeldingen voor u ze aan de app toevoegt (max. 1920 px breed)
• Mediaformaten: Gebruik moderne formaten (WebP voor afbeeldingen, H.264 voor video)
• Verwijder ongebruikte media: Verwijder ongebruikte afbeeldingen, iconen en bijlagen uit de app
• Externe verwijzingen: Host grote bestanden in SharePoint of Azure Blob Storage in plaats van ze in te sluiten
• Afbeeldingen pas laden wanneer nodig: Laad afbeeldingen pas wanneer het scherm zichtbaar wordt

Offline werken

Offline werken is een belangrijke troef van mobiele canvas-apps. Buitendienstmedewerkers, inspecteurs en medewerkers op afstand hebben apps nodig die ook zonder verbinding werken. offline-apps bouwen.

Architectuurpatronen voor offline werken

Lokale gegevensopslag:

• Collecties: Gegevens in het geheugen, offline beschikbaar (verloren wanneer de app sluit)
• SaveData/LoadData: Bewaar gegevens in de opslag van het toestel voor echte offlinewerking
• Offline-firstpatroon: Werk altijd met lokale collecties en synchroniseer met de server wanneer er verbinding is
• Conflicten oplossen: Vang situaties op waarin de servergegevens intussen gewijzigd zijn
• Wachtrijpatroon: Zet wijzigingen lokaal in een wachtrij en synchroniseer zodra de verbinding hersteld is

De verbinding detecteren

Gebruik de eigenschap Connection.Connected om de netwerkstatus te detecteren en het gedrag van de app daarop af te stemmen.

• Toon een visuele indicator wanneer de app offline is (banner, statusicoon)
• Schakel synchronisatieknoppen uit zonder verbinding
• Zet bewerkingen offline in een wachtrij voor later
• Synchroniseer automatisch zodra de verbinding hersteld is
• Communiceer duidelijk over de offlinestatus

Synchronisatiestrategieën

Handmatige of automatische synchronisatie:

• Handmatige synchronisatie: De gebruiker bepaalt wanneer gegevens worden geüpload en gedownload (beter voor grote datasets)
• Automatische synchronisatie: De app synchroniseert op de achtergrond zodra er verbinding is (betere gebruikerservaring, maar let op het gegevensvolume)
• Gedeeltelijke synchronisatie: Synchroniseer alleen gewijzigde en nieuwe records om de gegevensoverdracht te beperken
• Tijdstempels bijhouden: Houd het tijdstip van de laatste synchronisatie bij en haal alleen de wijzigingen sindsdien op

Functies van het toestel integreren

Canvas-apps hebben via ingebouwde besturingselementen en functies toegang tot native functies van het toestel. Zo worden scenario's mogelijk die met traditionele webapps niet haalbaar zijn.

Camera en fotogalerij

• Camerabesturingselement: Neem foto's en video's rechtstreeks in de app
• Besturingselement Afbeelding toevoegen: Kies afbeeldingen uit de fotobibliotheek van het toestel
• Afbeeldingen annoteren: Gebruik het besturingselement Pen Input voor handtekeningen of aantekeningen
• Compressie: Verklein afbeeldingen voor het uploaden om bandbreedte te besparen
• AI-integratie: Stuur afbeeldingen naar AI Builder voor objectdetectie of tekstextractie

Gps en locatiediensten

• Eigenschap Location: Lees de huidige gps-coördinaten uit (Location.Latitude, Location.Longitude)
• Adressen opzoeken: Gebruik de Bing Maps-connector om adressen te geocoderen
• Afstandsberekeningen: Bereken afstanden voor de routering van buitendienstopdrachten
• Geofencing: Start acties bij het betreden of verlaten van een locatie
• Kaartintegratie: Toon locaties op interactieve kaarten

Barcodes en QR-codes scannen

• Besturingselement Barcode Scanner: Scan 1D-barcodes (UPC, Code 39, Code 128 enz.)
• Ondersteuning voor QR-codes: Lees QR-codes voor het opvolgen van assets of voor authenticatie
• Batchscanning: Scan meerdere items achter elkaar
• Validatielogica: Controleer gescande codes aan de hand van databaserecords
• Voorraadbeheer: Ideaal voor magazijn- en retailscenario's

Audio en microfoon

• Microfoonbesturingselement: Neem audionotities en spraakmemo's op
• Audio afspelen: Speel opgenomen audio af
• Transcriptie: Integreer met Azure AI services voor spraak-naar-tekst
• Spraakopdrachten: (Vraagt een implementatie op maat met Azure Speech Service)

Beveiliging en compliance

Mobiele apps die bedrijfsgegevens raadplegen, vereisen degelijke beveiligingsmaatregelen. Power Apps biedt beveiliging van enterpriseniveau die aansluit bij Microsoft 365. beveiliging in Power Platform.

Authenticatie en autorisatie

• Integratie met Microsoft Entra ID: Automatische single sign-on met organisatieaccounts
• Meervoudige verificatie (MFA): Dwing MFA af via Conditional Access-beleid
• Beveiligingsrollen: Beheer de toegang tot de app en de zichtbaarheid van gegevens met Dataverse-beveiligingsrollen
• Functie User(): Gebruik de eigenschappen van de huidige gebruiker voor beveiliging op rijniveau
• Pincode/biometrie: Optionele beveiliging op app-niveau voor gevoelige scenario's

Preventie van gegevensverlies (DLP)

• DLP-beleid: Voorkom dat gegevens tussen zakelijke en niet-zakelijke connectors stromen
• Classificatie van connectors: Deel connectors in als Business, Non-Business of Blocked
• Beleidshandhaving: Blokkeer het opslaan van apps die DLP-regels overtreden
• Endpoint DLP: Beheer kopiëren/plakken en schermafbeeldingen in de mobiele Power Apps-app

Beheer van mobiele toestellen (MDM)

• Integratie met Intune: Rol Power Apps uit en beheer ze via Intune
• App-beveiligingsbeleid: Beheer de toegang tot gegevens op onbeheerde toestellen
• Conditional Access: Vereis conforme toestellen voor toegang tot de app
• Wissen op afstand: Wis app-gegevens op verloren of gecompromitteerde toestellen

Testen en kwaliteitsborging

Test op meerdere toestellen

Canvas-apps moeten getest worden op echte toestellen die representatief zijn voor uw gebruikers. Vertrouw niet alleen op tests in de browser.

• Testen op iOS: Test op iPhones met verschillende schermformaten (SE, standaard, Plus/Pro Max)
• Testen op Android: Test op toestellen van meerdere fabrikanten (Samsung, Google enz.), omdat het besturingssysteem verschilt
• Testen op tablets: Controleer of de lay-out ook op grotere tabletschermen werkt
• Versies van het besturingssysteem: Test op de oudste ondersteunde versie en op de nieuwste versie
• Netwerkomstandigheden: Test met een zwakke verbinding, in vliegtuigmodus en bij het opnieuw verbinden

Monitoring en analyse

• Application Insights: Integreer voor gedetailleerde telemetrie en foutopvolging
• Gebruiksanalyse: De ingebouwde analyses van Power Apps tonen adoptie en sessieduur
• Fouten loggen: Voorzie eigen logging om problemen in productie te onderzoeken
• Prestatiecijfers: Volg de laadtijd van schermen en de duur van gegevensbewerkingen

Uitrol en onderhoud

Application Lifecycle Management

• Solutions: Verpak apps in Dataverse-solutions voor degelijk ALM
• Omgevingsstrategie: Doorstroom van ontwikkeling → test → productie
• Versiebeheer: Exporteer solutions naar versiebeheer (Git) om de geschiedenis bij te houden
• Deploymentpipelines: Automatiseer de uitrol met Pipelines in Power Platform of Azure DevOps
• Releasenotes: Documenteer de wijzigingen in elke nieuwe versie

Gebruikersopleiding en adoptie

• Hulp in de app: Voorzie tooltips, help-iconen en introductieschermen
• Videotutorials: Neem korte demo's op voor veelvoorkomende taken
• Championsprogramma: Duid power users aan die hun collega's ondersteunen
• Feedbackmechanisme: Voorzie een feedbackoptie in de app voor continue verbetering
• Adoptiecijfers: Volg het gebruik op om drempels voor adoptie te herkennen

Conclusie

Canvas-apps maken mobiele app-ontwikkeling toegankelijk: zakelijke gebruikers en professionele ontwikkelaars kunnen krachtige mobiele oplossingen bouwen zonder de complexiteit van traditioneel programmeren. Succes vraagt inzicht in ontwerppatronen voor mobiel, prestatie-optimalisatie, offlinestrategieën en de beveiligingseisen van een onderneming.

Begin eenvoudig: bouw een minimale werkende app, test met echte gebruikers op echte toestellen, verzamel feedback en verbeter stap voor stap. Benut de integratie van Power Platform met Microsoft 365 en Azure om verbonden ervaringen te bouwen die veilig toegang hebben tot bedrijfsgegevens. Met de juiste architectuur, prestatie-afstemming en governance kunnen canvas-apps duizenden gebruikers betrouwbaar bedienen.

Het belangrijkste is dat de gebruikerservaring voorop staat en de technologie pas daarna komt. Los echte bedrijfsproblemen op, houd rekening met de beperkingen van mobiel en lever apps die gebruikers echt graag gebruiken. De beste canvas-apps voelen native aan, presteren goed offline en gaan op in de workflow van de gebruiker in plaats van complexiteit toe te voegen.