Ik geef training in frontend tools en stacks als HTML, JavaScript, TypeScript, React, Angular en Vue. Ik schrijf boeken en artikelen over tal van (ICT-) onderwerpen. Ik was lead developer en directeur bij Yindo - Jouw digitale bibliotheek. Je kunt mij volgen op Twitter(@PeterKassenaar).

In dit blog vind je persoonlijke artikelen, die niet noodzakelijk tech-gerelateerd zijn.

Views and expressions are my own.

Terug naar de algemene site.

29oktober

Kennismaken met Flutter

flutter-logoNu in coronatijden mijn ZZP-agenda maar heel mager is gevuld, heb ik besloten om van de nood een deugd te maken. Ik ga twee nieuwe frameworks onderzoeken waarvoor het mij tot op dit moment aan de tijd ontbrak om me er meer in te verdiepen. Dat zijn:

In dit artikel kijk ik naar Flutter. Afgelopen week heb ik kennisgemaakt met Flutter, de documentatie gelezen, online tutorial(s) gevolgd en verder rondgesnuffeld naar Flutter-informatie op de voor de hand liggende plekken als Stack Overflow, YouTube en Dev.to.

Disclaimer - ik ben frontend developer. Ik ken frameworks als Angular, Vue en React op mijn duimpje. Ik heb ook gewerkt met PhoneGap/Cordova, Ionic en React Native. Hiermee heb ik applicaties gemaakt. Mijn beleving en beschrijving van Flutter - waarmee je ook mobiele apps maakt - komt dan ook vanuit dit perspectief. Ik maak regelmatig de vergelijking me zaken die ik ken. Dat hoeft voor jou natuurlijk niet zo te zijn! Toch probeer ik het zo eenvoudig mogelijk te houden en een voor iedereen duidelijke beginners/intro te schrijven over Flutter.

Download dit artikel als PDF (3,6 MB, 26 pagina’s)

In dit artikel beantwoord ik de volgende vragen:

  1. Wat is Flutter?
  2. Waar wordt het voor gebruikt?
  3. Hoe gaat lokale Installatie en Ontwikkeling?
  4. Hoe maak ik een eerste applicatie?
  5. Hoe maak ik een niet-triviale proof-of-concept applicatie: een app die op basis van een zoekvraag van een gebruiker communiceert met een backend en de resultaten in de UI toont.

Ik ben geen beginner in app-development, maar uiteraard wel in Flutter. Daarom heb ik ongetwijfeld zaken gemist of heb ik dingen omslachtig gedaan (omdat ik die nu eenmaal ken uit andere frameworks) die in Flutter veel eenvoudiger kunnen. Aarzel in dat geval niet om het mij te laten weten!

Video – Kennismaken met Flutter en je eerste app (YouTube)

1. Wat is Flutter?

Flutter is een Mobile UI Framework van Google, dat wordt gebruikt voor het maken van apps voor iOS en Android. Je maakt met Flutter native apps. Het zijn dus geen apps die draaien in een webview van het betreffende platform (zoals Ionic en PhoneGap). De homepage van Flutter is te vinden op flutter.dev.

Het kenmerk van Flutter is dat er een single code base is. Apps schrijf je in de eveneens door Google ontwikkelde programmeertaal Dart (dart.dev). Jouw Dart-code wordt gebruikt om apps te compileren voor meerdere platforms.

Met Flutter kun je ook apps maken voor embedded systems zoals Google Assistant-devices of Nest-thermostaten. Flutter heeft hiermee dezelfde doelstellingen als bijvoorbeeld Xamarin (voor C#-programmeurs) en React Native (voor React-programmeurs).

Met Flutter ontwikkelde apps kun je publiceren in de Apple App Store of op Google Play. Natuurlijk kun je ze ook intern binnen je bedrijf uitrollen.

00-flutter-ecosystem

Dart

Je schrijft je Flutter-apps in Dart. Dit betekent dat je behalve het Flutter UI-systeem ook een nieuwe programmeertaal moet leren. Je leert dus eigenlijk twee dingen tegelijk. Dart heeft onder meer de volgende kenmerken:

  • Dart-code compileert naar native Android-code (Java of Kotlin) en native iOS-code (Objective C of Swift). Er is ook een experimentele module die compileert naar JavaScript-code, zodat je je app ook op het web kunt gebruiken. Deze moet je in Flutter apart inschakelen.
  • Dart lijkt op andere programmeertalen zoals Java, JavaScript of TypeScript. Je kunt daarom als programmeur snel overweg met Dart. Er zijn concepten als classes, componenten/widgets, loops, variabelen, functies enzovoort. Dart leent zowel concepten uit de OO-talen als uit de Functional Programming-wereld.
  • Dart is een staticly typed language, anders dan JavaScript. Het betekent dat je variabelen altijd als een bepaald type moet declareren. Voor de JavaScript-programmeur zijn er een aantal nieuwe keywords. Ze hebben echter wel overeenkomsten met JavaScript.
  • Ik was compleet nieuw in Dart. Mijn ervaring is dat je het snel oppikt als je al programmeerervaring hebt, maar dat er subtiele verschillen zijn waar je regelmatig over struikelt.

UI-system en widgets

De kern van Flutter zijn de werkelijk talloze (honderden!) verschillende user interface componenten. In Flutter-taal heten dit widgets. Zoals je in moderne webframeworks (Angular, Vue, React, Svelte) denkt in componenten, denk je in Flutter in widgets. Elke applicatie is een boomstructuur van widgets. Denk aan containers, knoppen, dialoogvensters, icons en verder alles wat je op het scherm ziet.

Dit wordt erg ver doorgevoerd. Ook als je witruimte binnen- of rondom een element wilt instellen, doe je dit via een Padding-widget of een Margin-widget. Daarnaast heeft elke widget – net als in HTML – talloze eigenschappen (attributes) waarmee je de inhoud verder instelt.

00-flutter-widgets

Mobile web

Flutter heeft zich erg laten inspireren door het mobiele web. Er is geleerd van de lessen van CSS-lay-out zoals CSS-flexbox en Grid en de flexibele flow van elementen op een pagina. Als je dit in CSS beheerst, zul je relatief snel de Flutter-manier van lay-out begrijpen.

Als je dit nog niet kent, zul je wel een aantal keren je hoofd breken over de vraag "waarom is het zo moeilijk een knop onderin de pagina te krijgen?!" of om anderszins een element op de goede plek te positioneren. Je moet een fluïde geest hebben voor het realiseren van fluïde lay-outs.

Flutter gebruikt Material Design (eveneens ontwikkeld door Google) als uitgangspunt.

Documentatie

De kwaliteit van een framework valt of staat vaak met de kwaliteit van de documentatie. Een framework kan nog zo goed zijn, als je niet weet hoe alle mogelijkheden benut worden, heb je er niks aan. Wat dat betreft heeft team Flutter zijn werk goed gedaan en gezorgd voor prima documentatie. Zie ook de voorgaande afbeelding. Daar kan de rest van Google eigenlijk nog een voorbeeld aan nemen.

Bij elke widget zijn codevoorbeelden opgenomen, vaak in een interactieve app, zodat je er zelf mee kunt oefenen. De talloze properties en methods worden beschreven; er zijn vaak video's aanwezig ('widget of the week') waarin het gebruik van een widget wordt uitgelegd en er zijn voldoende verwijzingen naar andere bronnen aanwezig.

Het lastige is vooral de hoeveelheid documentatie. Als je niet wéét dat een bepaalde taak door een aanvullende widget wordt uitgevoerd, kun je lang zoeken. Het is eerder te veel dan te weinig. Maar als je zelf een beetje kunt filteren, pik je de elementaire onderdelen er gelukkig snel uit.

Mijn oordeel over de documentatie: ++

2. Waar wordt Flutter voor gebruikt?

Flutter wordt vooral gebruikt voor crossplatform mobiele applicaties. Inmiddels gebruiken honderden grote en kleine bedrijven Flutter als tool. Dit zijn onder meer Google zelf, Alibaba, Tencent, eBay, BMW en de New York Times. Geen kleine jongens. Ja, er zijn ook implementaties voor embedded devices, maar deze zijn vooralsnog vooral van Google zelf. Ik heb geen voorbeelden van andere fabrikanten gezien. Wellicht dat we op termijn ook appjes kunnen maken voor Raspberry Pi of Arduino-boards.

Een showcase-pagina van Flutter-apps is te vinden op flutter.dev/showcase.

00-flutter-showcase

Flutter in Nederland en België

Persoonlijk ken ik nog geen bedrijven in Nederland of België die hun app(s) met Flutter hebben ontwikkeld, al hoor ik van (outsourcing- en detacherings-) relaties dat er wel degelijk vraag is naar Flutter-kennis. Het is een interessante techniek die zich inmiddels afdoende bewezen heeft.

Om te zien of er interesse is, kun je bijvoorbeeld kijken naar Google Trends. Een eenvoudige vergelijking tussen Flutter, React Native en Xamarin laat zien dat de interesse voor Flutter groter is dan voor de andere twee. De trend wordt ook door Google als rising aangeduid (al durf ik er mijn hand niet voor in het vuur te steken dat dit niet komt omdat het een technologie van Google zelf is).

00-flutter-google-trends

Bekijk zelf de huidige trend op trends.google.com/trends/explore?geo=NL&q=flutter,React%20native,xamarin.

Brede blik

Voor een wat bredere blik op de vraag naar Flutter-kennis en -applicaties kun je bijvoorbeeld kijken naar de jaarlijkse Stack Overflow Developer Survey. Die van 2020 is te vinden op insights.stackoverflow.com/survey/2020.

Je ziet dan dat Flutter in de categorie Other frameworks, Libraries en Tools nog juist in de top-10 staat. Achter React Native, maar ver voor andere frameworks als Xamarin en Cordova.

In de categorie Most Loved staat Flutter op plek 3, terwijl React Native op de tiende plaats is beland. Xamarin en Cordova bungelen in dit rijtje onderaan (maar scoren zoals verwacht dan juist weer heel hoog in de categorie Most Dreaded). Dat geeft mijns inziens wel aan dat Flutter, hoewel het nog niet een supergrote technologie is, wel een techniek is die redelijk populair is onder developers en waarmee bovendien graag gewerkt wordt.

00-stack-overflow

3. Hoe gaat lokale ontwikkeling en installatie?

Veel webframeworks kun je uitproberen zonder het downloaden van een tool of lokale installatie. Op stackblitz.com of codesandbox.io kun je direct online aan de slag met React, Angular, Vue, Nuxt, TypeScript en wat al niet. Dat is niet het geval bij Flutter.

Je moet hiervoor lokaal de juiste SDK's downloaden voor het platform van jouw keuze. Dus: de Android SDK voor Android-apps of Xcode plus talloze aanvullende bibliotheken voor MacOS-applicaties. Of beiden. Daarnaast moet je een editor installeren met de nodige Flutter- en Dart-plug-ins. Dat kost je vele gigabytes. En veel tijd.

Het is allemaal niet superlastig en is gelukkig een eenmalig klusje, maar reken in het gunstigste geval wel op anderhalf uur of langer voordat je aan de slag kunt met een simpele Hello World-applicatie.

Je wilt je app natuurlijk ook testen op een echte telefoon. Android-telefoons kun je meestal gewoon koppelen aan je computer. Voor iPhones is de werkwijze een stuk omslachtiger. En als je de pech hebt dat je telefoon niet herkend wordt door je pc, ben je zomaar weer uren verder met het zoeken naar een oplossing en installeren van de juiste drivers.

Wat heb je nodig?

Om te kunnen beginnen met Flutter moet je een aantal stappen doorlopen. Op de Flutter-website wordt dit onder Getting Started uitvoerig beschreven. Ik heb deze procedure gevolgd voor Windows en het liep relatief goed (op een connectieprobleem met mijn Samsung S8 na. Maar daar kon Flutter niks aan doen).

01-flutter-clone

Je moet hebben:

  • Git als versiebeheertool. Zelfs als je zelf Git niet gebruikt (je hebt bijvoorbeeld SVN of TFS), heeft Flutter het nodig.
  • De Flutter SDK. Dit is een repo die je kloont, of een zip-bestand dat je kunt downloaden en uitpakken. Als standaardlocatie wordt C:\src\flutter aanbevolen. Deze heb ik aangehouden.
  • Je Path instellen zodat flutter bekend is in de Terminal-omgeving of in Powershell. Hiervoor moet je in Windows de omgevingsvariabelen aanpassen (zie afbeelding).

02-flutter-path

  • Android Studio en de Android SDK's. Dit kost veel schijfruimte. De procedure is nu gelukkig geautomatiseerd (een paar jaar geleden, toen ik hetzelfde deed voor PhoneGap, moest dit allemaal nog met de hand), maar het kost veel tijd. Android Studio is gratis en is te vinden op https://developer.android.com/studio.
  • Na installatie van Android Studio (dit installeert de Android SDK, de SDK command-line tools, de SDK Build-tools en de IDE zelf) moet je nog de juiste Flutter- en Dart-plug-ins installeren.
  • Je kunt ook Visual Studio Code gebruiken. Hiervoor zijn Flutter- en Dart-extensions beschikbaar. Ook dan heb je echter Android Studio nodig, of op zijn minst de hiervoor genoemde SDK's. Die kun je eventueel met de opdracht flutter doctor installeren. Dit pad heb ik niet gevolgd.

03-flutter-android-studio

  • Als alle software is geïnstalleerd wil je een android device kunnen gebruiken. Hiervoor moeten de Developer options (Ontwikkelaarstools) en USB debugging op je apparaat zijn ingeschakeld. Hoe dit werkt, verschilt per merk (Samsung, Huawei, Sony enzovoort).
  • Voor Windows moet je vanuit Android Studio in dat geval nog de Google USB-driver installeren als generieke driver. Voor Mac is dat niet nodig.
  • Mocht je niet op een fysiek apparaat willen of kunnen testen, dan kun je altijd een Android Emulator aanmaken via de AVD, de Android Virtual Device Manager.

03-google-usb-driver

Android Emulator

De Android Emulator is gelukkig een stuk sneller dan vroeger. Het is zowaar een valide oplossing geworden om je apps te testen, zo heb ik gemerkt.

Een paar jaar geleden was het snéller om naar de winkel te lopen en een nieuwe Android-telefoon te kopen om op te testen dan om de emulator op te starten en de app hierin te draaien. Dat is nu een stuk verbeterd.

Alle moderne pc's ondersteunen VM acceleration en grafische kaarten kennen hardware acceleration, waardoor de apps ook in de emulator redelijk responsief aanvoelen.

04-android-emulator

Flutter voor het web

Je kunt Flutter ook gebruiken voor het maken van webapplicaties. Hiervoor moet je eerst alle voorgaande stappen doorlopen.

Daarna kun je flutter upgraden naar het beta channel en met de flag --enable-web het maken van webprojecten inschakelen. Zoals gezegd, dit is allemaal nogal experimenteel op dit moment. Het is omgeven met waarschuwingen en in de betafase. Ik heb het niet geprobeerd.

In de toekomst verwacht ik dat dit soepeler is opgelost en geïntegreerd in de totale Flutter-workflow. Je leest er voor nu eventueel meer over op https://flutter.dev/docs/get-started/web.

05-flutter-web

Flutter doctor

De command line tool voor het werken met Flutter heet – niet verrassend – flutter. De totale installatie kun je checken met de opdracht flutter doctor. Met de flag -v (verbose) toon je complete uitvoer.

06-flutter-doctor

De tool lijkt evenwel niet altijd goed te werken. Ik heb bijvoorbeeld wel degelijk de Flutter plug-in en Dart plug-in voor Android Studio geïnstalleerd. Maar flutter doctor herkent ze niet, zoals in bovenstaande afbeelding is te zien. In ieder geval is het een handige aanvullende analysetool om mogelijke problemen op te lossen.

4. Hoe maak ik een eerste applicatie?

Als de installatieperikelen achter de rug zijn kun je een eerste applicatie maken. Hier beschrijf ik het pad voor de 'officiële' editor, Android Studio. Maar ook in Visual Studio Code met de nodige extensions heb ik succesvol Flutter-apps geschreven.

Android Studio biedt wat mij betreft echter net wat meer handige panels om inzicht te krijgen in de structuur van je applicatie zodra deze wat complexer wordt. Ook het beheren van AVD's en plug-ins is wat soepeler. Maar dat is een kwestie van persoonlijke voorkeur. Visual Studio Code is een stuk kleiner en start sneller op. Als je dit al gewend bent voor webontwikkeling, dan zou ik je zeker aanbevelen hiermee ook Flutter-apps te maken.

07-new-project

In Android Studio kies je na het installeren van de plug-ins voor het maken van een New Flutter Project. Als je de standaardinstellingen overneemt, krijg je een applicatie met een homepage met daarop een aantal Widgets. Dit zijn onder meer een AppBar, een counter-variabele, tekst, en een knop (FloatingActionButton) om de teller op te hogen.

08-flutter-demo-app

In de voorbeeldcode is ruim voldoende commentaar opgenomen (lees dit!) om te zien hoe de applicatie werkt en wat je kunt aanpassen om deze demo-app een ander uiterlijk te geven.

Structuur van de applicatie

Omdat de applicatie naar meerdere platformen kan worden gepubliceerd, staan er ook meerdere mappen in de boomstructuur. Je ziet ze in de afbeelding.

09-flutter-structure

  • Op root niveau staan directories als /android, /ios en /.dart-tool. Dit zijn folders voor de diverse platforms en met aanvullende tools. Meestal zul je hier nooit handmatig in aan het werk zijn. Hooguit als je voor publicatie een aantal permissies wilt instellen, een icon wilt plaatsen of meer.
  • De meeste tijd zul je doorbrengen in de folder /lib. Hierin staan je werkbestanden. Het startbestand is main.dart. Vanuit de folder /lib worden bij een build de bestanden gecompileerd en gedistribueerd naar de verschillende platform-directories.
  • In /lib kun je subfolders maken om je bestanden te groeperen en organiseren, al heten dat hier om een of andere duistere reden packages. Kies dus New, Package als je een submap wilt maken.
  • Op het rootnivau staan configuratiebestanden als .pubspec.yaml, .gitignore en meer.

Voor webdevelopers: .pubspec.yaml is te vergelijken met package.json.

Helaas is er echter niet een handige tool zoals NPM om aanvullende packages te installeren, dat zul je zelf met de hand moeten doen. Hierbij moet je ook het aantal spaties inspringing respecteren, anders is de structuur van het bestand niet correct. Beetje ouderwets en omslachtig, maar het werkt.

Een overzicht van beschikbare packages voor Flutter en Dart is te vinden op pub.dev. Deze site kun je volgens mij het beste vergelijken met www.npmjs.com. waar je NPM-packages kunt vinden. Maar het is een compleet nieuw, afzonderlijk package- en module ecosysteem, naast NPM of NuGet (als je uit de .NET-wereld komt).

Widgets in Flutter

De complete applicatie is in Flutter gebouwd rond het concept van Widgets. Een widget kun je vergelijken met een component in Angular, Vue of React. Op de achtergrond is een widget een class en daarmee gewoon een functie. Je kunt daarmee een widget aanroepen of invoken.

Flutter kent twee verschillende typen widgets:

  • StatelessWidget – Dit is een widget waarvan de state (oftewel: data, variabelen) in de levensduur van de widget niet veranderen. Je kunt wel data hebben in een StatelessWidget, maar deze blijft dus steeds hetzelfde. De documentatie beschrijft een StatelessWidget als volgt: "A stateless widget is a widget that describes part of the user interface by building a constellation of other widgets that describe the user interface more concretely." De voornaamste taak van een StatelessWidget is dan ook het aanroepen van andere (meer dynamische) widgets.
  • StatefulWidget - hiervan kan de data gedurende de levensduur veranderen. Een StatefulWidget bestaat bovendien uit twee delen:
    • Een class waarmee de stateful widget wordt beschreven en waarin de functie createState() wordt aangeroepen om de data voor deze klasse te initialiseren.
    • Een state-class waarmee de data/variabelen van de widget worden beschreven. Deze wordt altijd voorafgegaan door een underscore. In Dart geeft een underscore voor een klasse- of variabelenaam aan dat het betreffende object private is (zoals in _userName).
  • Een Statefulwidget heeft dus bijvoorbeeld de hoofdklasse AboutUs(). Deze bevat een aanroep naar createState() waarin de bijbehorende state-klasse _AboutUs() wordt aangeroepen. Vanuit Android studio kun je met de shortcut stful <Tab> snel deze twee klassen maken.

Een StatelessWidget of StatefulWidget worden niet rechtstreeks aangeroepen. Je maakt altijd een klasse die extend ten opzichte van het gewenste type widget.

De functie build()

Elke widget moet de functie build() implementeren. Hierin wordt de widget tree opgebouwd.

In De inhoud van build() is weer een andere widget! Dit is vaak een widget Container() of Scaffold(), waarin weer andere widgets zijn genest die stukjes UI voor hun rekening nemen.

Wanneer in een StatefulWidget de state wordt gewijzigd, wordt de functie build() opnieuw uitgevoerd om de wijzigingen in de UI door te voeren. State wordt altijd gewijzigd via een functie setState(). De manier waarop Flutter met state omgaat deed me erg denken aan React.

In de voorbeeldapplicatie zie je bijvoorbeeld dat de widget tree bestaat uit een App met een Homepage waarin een Scaffold widget is geplaatst. Deze roept op zijn beurt weer de widget Center() aan waarin een AppBar() is opgenomen, een widget Text() en een FloatingActionButton().

12-widget-tree

De afbeelding komt uit Android Studio, het paneel Flutter Inspector. In code ziet de widget tree er op deze manier uit:

Gewoon een stukje tekst op de pagina typen of een afbeelding plaatsen kun je wel vergeten. Deze moet je minimaal wrappen in een widget Text() widget of een widget Image(). Bij afbeeldingen kun je daarnaast weer kiezen uit verschillende typen afbeeldingen (online, lokaal, avatars).

Tekst kan daarbij eigenschappen hebben zoals het lettertype, de uitlijning, de lettergrootte enzovoort. Dit kun je niet zomaar instellen (zoals in CSS), maar moet je regelen via de widget TextStyle(). Daarbij is 'rood' niet gewoon een kleur, maar een enum die is vastgelegd via het object Colors.red. Zoals gezegd, er zijn superveel widgets en properties die je moet leren kennen.

Compositie

Je maakt in Flutter dus widgets, die bestaan uit andere widgets. Deze widgets kunnen zelf weer widgets genereren en invoegen in de tree. Dat is erg krachtig en zorgt er voor dat je relatief eenvoudig generieke (bedrijfs-) widgets kan maken die je kunt hergebruiken in andere applicaties.

Als je het goed indeelt en beheert, is de reusability van widgets groot.

Je maakt dan als het ware een 'compositie' voor nieuwe applicaties op basis van bestaande widgets. Flutter implementeert hiermee een beetje het idee dat ook achter React Hooks en in de Composition API van Vue.js zit. Beslist een moderne architectuur en een denkwijze die nog jaren meekan. In ieder geval hoogstwaarschijnlijk langer dan de levensduur van de apps die je met Flutter maakt.

De widget tree

Mijn ervaring na een weekje Flutter is dat de widget tree enorm snel, enorm groot kan worden. Het gevaar loert dat het een onoverzichtelijk zooitje wordt.

Android Studio probeert je wel te helpen met visuele commentaren (die niet in de code worden geplaatst). Die geven aan waar een bepaalde widget eindigt en waar een nieuwe begint, maar het blijft een enorme diepe piramide aan geneste widgets die je aan het maken bent.

Je kunt dit enigszins oplossen door custom widgets te maken die [een deel van] de widget tree samenstellen en retourneren, maar het blijft erg lastig om de structuur te doorzien en te analyseren waar je een nieuwe rij of knop moet plaatsen als je bestaande code wilt aanpassen.

De afbeelding toont een supereenvoudige pagina met een aantal rijen en kolommen met daarin wat tekst. Je ziet nu al de enorme mate van nesting. Dit wordt er bij grotere applicaties alleen maar erger op.

15-widget-tree-nesting

Mijn advies: leer zo snel mogelijk het lay-out-systeem van Flutter met de widgets Scaffold(), Container(), Column() en Row() en de uitlijningsmogelijkheden. Pas dan kun je code begrijpen en eenvoudige pagina's maken.

Bestaande pagina’s kun je dan sneller ontleden. Deze pagina helpt bij het begrijpen van het lay-outsysteem van Flutter: flutter.dev/docs/development/ui/layout/tutorial.

Dart

De programmeertaal Dart was relatief eenvoudig te leren. Ik heb zelf natuurlijk een JavaScript-achtergrond (en een.NET, maar geen Java), maar kon er snel mee overweg. Enkele items die mij opvielen:

  • Alle variabelen zijn statisch getypeerd. Dit is verplicht.
  • Elk statement wordt afgesloten met een puntkomma. Dit is verplicht.
  • Keywords die mij opvielen:
    • dynamic - vergelijkbaar met het TypeScript-type any. Een variabele kan verschillende typen inhoud krijgen
    • final - variabelen kunnen niet meer gewijzigd worden (vergelijkbaar met sealed in andere talen)
    • Future - een asynchrone waarde. Vergelijkbaar met een Promise() in JavaScript.
    • Map - vergelijkbaar met een object literal in JavaScript, een variabele met key/valuepairs tussen {…}.
    • Maar waarom worden typen als int, double en bool met een kleine letter geschreven, maar String met een hoofdletter?
  • Een functie heeft altijd een returntype. Dit is verplicht het wordt aangegeven voorafgaand aan de naam van een functie, zoals in void main() => …
  • Het is niet straightforward om met JSON te werken. In JavaScript kun je JSON rechtstreeks benaderen als object, maar Dart beschouwd JSON gewoon als één lange string. Je moet het zelf parsen en omzetten als je binnen de applicatie met objecten verder wilt werken. Daar zijn wel functies voor aanwezig (jsonDecode() en jsonEncode() in de package dart:convert), maar je moet het toch maar weer doen.

Zoals gezegd, er zijn erg veel overeenkomsten met andere programmeertalen. Het leren van Dart is niet de grootste uitdaging als je met Flutter aan het werk wilt.

Je kunt met Dart oefenen in de online omgeving DartPad, op dartpad.dartlang.org. Hier zijn ook een aantal (niet Flutter-specifieke) voorbeelden aanwezig. Ze helpen je om de taal te leren kennen.

16-dartpad

Tutorial

Wil je iets verder dan alleen de Hello World-applicatie, dan kun je de online tutorial volgen op codelabs.developers.google.com/codelabs/first-flutter-app-pt1/#0. Hierin maak je een oneindige scrolling list, waarbij je kennismaakt met allerlei widgets en externe packages importeert. Het is een goed begin. Ik heb er veel van geleerd en was er in twee uurtjes doorheen.

5. Hoe maak ik een Proof-of-concept applicatie?

Anders dan bij Svelte kon ik niet in een paar uurtjes de applicatie namaken die ik voor andere frameworks heb gemaakt. Het programmeren in Dart was niet het probleem.

Het kost daarentegen veel tijd om te leren werken met het lay-outsysteem van Flutter. Het uitzoeken wánneer je wélke widget gebruikt om de lay-out te realiseren die je in je hoofd hebt kost de meeste tijd. Zelfs als je zo'n eenvoudige applicatie wilt maken als ik hieronder heb gemaakt.

De requirements zijn tamelijk eenvoudig, maar laten toch het complete stappenplan van een real-life app, inclusief communicatie met een backend zien.

  • Toon een eenvoudige user interface waar de bezoeker kan zoeken op (deel van) de naam van een land.

  • Communiceer met een backend - ik gebruik hiervoor de REST Countries API, beschikbaar op https://restcountries.eu/ - om een serie landen op te halen die voldoen aan het trefwoord van de bezoeker.

  • Toon een lijstje met landen die aan het trefwoord voldoen in de user interface.

  • Bij klikken op een land worden details van het betreffende land getoond in een pagina.

17-country-demo

Je kunt deze applicatie zelf bekijken op github, op https://github.com/PeterKassenaar/flutter-demo-countries. Voel je vrij om de applicatie te downloaden, hem te openen in Android Studio en te draaien op je device of in de emulator. Kijk hoe de data flow door de applicatie en de componenten is. Vervolgens kun je hem verder zelf uitbreiden. Mocht je aanpassingen of verbeteringen hebben, dan houd ik me natuurlijk aanbevolen voor PR's!

Dit is een tamelijk eenvoudige applicatie, nog zonder error handling, testing, animaties of state management. Wel is routing toegevoegd. De code kan nog (veel) verder verbeterd worden. Op de TODO-lijst staat bijvoorbeeld:

  • API-calls centraliseren in een service die vanuit diverse widgets wordt aangeroepen. Nu heb ik dat per widget geregeld.
  • Een CountryModel / -class maken, zodat de opgehaalde landen kunnen worden aangeduid als instanties van die class. Nu zijn het gewoon <dynamic> elementen.
  • De widget tree vereenvoudigen door compositie te gebruiken en terugkerende taken uit te besteden aan functies. Nu is elke widget gewoon van boven naar beneden opgebouwd. Het werkt, het ziet er goed uit, maar de code kan compacter en meer DRY.

Conclusie

Flutter is een framework dat zich qua functionaliteit en mogelijkheden absoluut kan meten met langer bestaande alternatieven als Xamarin, NativeScript en React Native. Het is qua performance sowieso beter dan frameworks die hun applicatie wrappen in een webview, zoals Ionic, Capacitor en Cordova.

Met Flutter maak je absoluut mobiele applicaties met een native look-and-feel, zonder dat je hiervoor aanvullende moeite hoeft te doen. De taal Dart is voor programmeurs eenvoudig te leren.

De uitdaging zit hem in het doorzien van de wijze waarop de widget tree wordt opgebouwd en hoe widgets andere widgets kunnen samenstellen en retourneren. Een Flutter-app kan naar mijn idee snel uitgroeien tot een nachtmerrie voor beheerders. Ook degenen die blanco inrollen in een project met een bestaande codebase kunnen het zwaar krijgen. Android Studio probeert je daarbij te helpen met structuurdiagrammen en commentaren, maar ik denk dat het inwerken in een bestaand project serieus tijd gaat kosten.

Op de vraag "moet ik Flutter gaan leren?", is zoals gebruikelijk geen eenvoudig antwoord te geven. Het enige juiste antwoord is meestal "dat hangt er van af". Om je te helpen de beslissing te nemen, zou je de volgende vragen kunnen beantwoorden.

  • Ben je een beginner in mobiele apps? - Dan is Flutter een uitstekende keuze. Je moet wel veel nieuws leren, maar je apps zijn direct beschikbaar voor Android en iOS. Op termijn kun je het web toevoegen als platform. Je hoeft je niet te verdiepen in C#/Xamarin of Java/Kotlin of eerst React te leren. Met Flutter ben je - ook als bedrijf - relatief snel up-and-running en voorbereid op de toekomst. In ieder geval voor de komen 5-7 jaar is mijn inschatting.
  • Ben je JavaScript-developer en maak je websites met HTML, CSS en JavaScript? Dan helpt het een beetje als je moderne CSS-lay-outopties kent, maar verder zul je veel nieuws moeten leren. Ga uit van een stevig leertraject.
  • Ben je developer in Angular of Vue? Dan zul je Dart als nieuwe programmeertaal moeten leren. De overstap vanuit JavaScript is echter relatief eenvoudig, ik heb het zelf gedaan de afgelopen week. Als je al gewend bent met TypeScript te werken wordt het nog makkelijker. Het is een kwestie van syntaxis-wijzigingen. Maar toch - je moet er weer iets bij leren en je moet je kennis voor twee verschillende technologieën onderhouden. Dat kost wel tijd - en dus geld. Extra kennis is altijd waardevol, maar komt met een prijs.
  • Ben je React-programmeur? Ga dan verder met React Native. Ook dit platform is volwassen, er is veel vraag naar, een grote community voor beschikbaar en je hoeft niet veel nieuwe technieken te leren. Flutter is in dat geval overkill. De meerwaarde ervan ten opzichte van React Native is mijns inziens gering.
  • Ben je fullstack JavaScript-programmeur en schrijf je Node.js-API's en -applicaties en websites in een van de populaire webframeworks? Dan ligt het wellicht meer voor de hand om een JavaScript-mobiele toepassing te gebruiken als Cordova of, nieuwer, Ionic/Capacitor. Tenzij ruwe performance of pure native look-and-feel een topprioriteit is. Daarin is Flutter weer beter, omdat het niet de overhead van een webframework en -view heeft en niet met een CSS-implementatie de native UI-onderdelen hoeft na te bootsen.
  • Ben je Java- of C#-developer? Dan sta je voor een lastige keuze.
    • Als Java-programmeur staat native Android-development (met Java of Kotlin) waarschijnlijk dichter bij je en ben daar sneller productief in. Je maakt dan echter geen crossplatform apps. Het kan de moeite lonen Dart te leren en het UI-systeem van Flutter onder de knie te krijgen. Omdat je al gewend bent te werken met Material Design, Futures en asynchrone code zal dat evenwel ook niet al te lastig zijn.
    • Als C#-developer ligt de keuze voor Xamarin meer voor de hand. Hiermee maak je wel crossplatform apps, maar het is niet (meer) het meest voor de hand liggende framework voor app-ontwikkeling. Voordeel is echter wel dat Xamarin uitstekend is geïntegreerd in Visual Studio (waar je nu waarschijnlijk toch al mee werkt). Het past uitstekend binnen de stack van andere .NET-applicaties en technieken (Internet Information Server, SQL Server, AD enzovoort). Als je 'gewone' applicaties in .NET maakt, en mobiele apps in Flutter gaat schrijven, moet je een compleet nieuwe stack en -toolset leren. Je kunt je afvragen of dat de moeite waard is.

Maak op basis van bovenstaande vragen een keuze. Je kunt altijd eens kijken op https://flutter.dev/ om te zien of het wat voor je is. En uiteraard help ik je ook graag verder als jij of je bedrijf een Flutter-vraag heeft.

Peter Kassenaar
--29 oktober 2020.

01mei

Windows 10 tip : afbeelding over meerdere monitors

Een leuke feature van mobiele telefoons is dat het tegenwoordig zo eenvoudig is om makkelijk panoramafoto’s te maken. Tegelijkertijd hebben veel computergebruikers (in ieder geval programmeurs, waar ik dagelijks mee werk) vaak twee of zelfs drie monitoren.

De standaardinstelling van Windows is dat een gekozen achtergrondafbeelding voor het bureaublad wordt herhaald op elke monitor. In mijn geval ziet dat er dan op deze manier uit:

wallpaper-fit

Dat is niet slecht, maar het kan beter. Ik heb immers niet voor niks een panoramafoto gemaakt.

Dit is wat we willen:

wallpaper-span

Het is niet lastig om dit in te stellen, maar je moet even weten waar het zit:

  1. Klik met de rechtermuisknop een leeg deel van het bureaublad en kies Personaliseren (Personalize).
  2. In het venster Achtergrond (Background) kun je een afbeelding kiezen en de manier waarop deze over de monitors verdeeld wordt.
  3. Kies de optie Verdelen (Span) in het venster dat is verschenen. Met de overige opties kun je direct testen hoe je achtergrond er bij de andere instellingen uitziet. Je hoeft het venster hiervoor niet te sluiten, of op Opslaan te klikken.

background

Meer informatie

Wil je meer lezen over Windows 10 en alle instellingsmogelijkheden? Kies dan bijvoorbeeld een van onderstaande boeken.

Peter Kassenaar
-- 1 mei 2020

23april

Outlook tip: afspraak maken van e-mail

Ik gebruik Outlook als belangrijkste communicatietool. Regelmatig krijg ik een mailtje met daarin details en een datum voor een afspraak, zoals bijvoorbeeld onderstaande.

image

Maar dan moet je er nog zelf aan denken om de Agenda te openen, de juiste datum op te zoeken en hier handmatig een nieuwe afspraak te plannen.

Snelle stappen

Gelukkig kan dat in moderne versies van Outlook automatiseren, door een Snelle stap (Quick Step) aan te maken. Dan kun je in het vervolg met één muisklik (nou ja, misschien twee of drie, maar in ieder geval een stuk sneller) een e-mailbericht naar de agenda sturen. Bijkomend voordeel is dat je in de betreffende afspraak dan ook direct de tekst en eventuele links uit het mailbericht bij de hand hebt.

Het maken van een Snelle stap gaat als volgt:

  1. Open het e-mailbericht waarvan je een afspraak wilt maken.
  2. Klik op Nieuwe maken (Create New) het kader Snelle stappen.
  3. Typ een naam voor de actie. Ik koos E-mail naar afspraak.
  4. Kies een actie uit de lijst. Scroll naar beneden om Een afspraak met de tekst van het bericht maken te kiezen. Zoals je ziet kun je nog tal van andere handelingen automatiseren.

image

  1. Klik op de knop Actie Toevoegen (Add Action).
  2. Eventueel kun je nog aanvullende acties toevoegen op dezelfde manier, een sneltoets kiezen, of een eigen tooltip schrijven. Maar voor mijn doeleinden is deze stap voldoende.
  3. Klik op Voltooien (Finish).

De snelle stap is nu verschenen in het kader Snelle stappen. Je kunt hem direct gebruiken.

Snelle stap activeren

  1. Open een mailtje waarvoor je een afspraak wilt maken (of, realistischer, je leest een mail en ziet dat hiervoor een afspraak in de agenda gepland moet worden).
  2. Klik in het kader Snelle stappen op de stap E-mail naar afspraak.
  3. Er wordt direct een nieuw Afsprakenvenster geopend, waarin je de titel van de afspraak, de tijd en de locatie op de gebruikelijke manier kunt aanpassen.
  4. Stel de afspraak in en kies Opslaan en sluiten (Save & Close).

image

De afspraak staat direct in je agenda. Hier kun je hem verder aanpassen zoals gebruikelijk. Er is geen koppeling aanwezig tussen het oorspronkelijke mailtje en de afspraak. De mail kun je dus verplaatsen, verwijderen, enzovoort. Dit heeft geen invloed op de afspraak.

Stappen beheren

Je kunt probleemloos wat experimenteren met deze tool. Via de optie en het venster Snelle stappen beheren (Manage Quick Steps) kun je stappen bewerken, dupliceren of weer verwijderen.

Eventueel kun je ook vanuit dit venster een nieuwe Snelle stap maken – maar ik vind het makkelijker om dit rechtstreeks vanuit Outlook te doen, omdat je dan ziet waar je mee bezig bent.

snelle-stap-1

Handigheidje in Outlook. Doe er je voordeel mee!

Handboek Outlook 2019

P.S. Wil je meer weten over Outlook, lees dan ook mijn Handboek Outlook 2019. Hierin staan meer tips over het gebruik van E-mail, Afspraken en Contactpersonen.

Peter Kassenaar
-- 23 april 2020

22januari

Windows 10 en Microsoft HoloLens – de toekomst

Op de langverwachte persbijeenkomst die Microsoft op 21 januari 2015 organiseerde was het grote nieuws niet Windows 10 zelf met al zijn nieuwe snufjes en verbeteringen, maar het konijn dat Microsoft aan het einde uit de grote hoed toverde: Microsoft HoloLens. De kaken van de aanwezigen in de zaal vielen collectief omlaag.
- “Holograms?” 
- “Yes. Holograms”.

HoloLens projecteert hologrammen in de wereld waarin je je op dat moment bevindt

Als je mijn Twitter feed die avond toevallig hebt gevolgd, dan heb je gezien dat ik er behoorlijk enthousiast over ben. Voor als je het nog niet hebt gezien: HoloLens projecteert real time hologrammen in de wereld waarin je op dat moment aanwezig bent. Je kunt met diverse apps interacteren met die projecties en zo games spelen, met anderen converseren, afstandsonderwijs volgen en meer. Bekijk hier de introductievideo. Nog korter:

“Hololens is voor mij de meest opwindende introductie sinds de aankondiging van de iPhone in 2007.”

Ja, lach maar. Ik wacht wel even. Misschien moet ik zelf over vijf jaar ook smakelijk lachen om deze uitspraak, maar op dit moment durf ik de stelling wel aan dat Microsoft hiermee een winnaar in handen heeft. Dit is de toekomst van gaming, design, voorraadbeheer, medische handelingen, praktijkonderwijs, apparaatonderhoud en wie weet wat nog meer als de API’s voor het hologramprogrammeren eenmaal in handen van de community komen.

Ik ga hier niet alle kenmerken herhalen die ook al in de artikelen op de diverse nieuwssites worden genoemd. Lees zelf bijvoorbeeld:

  • Tweakers – inleidend artikel met commentaren
  • The Verge – Hands on ervaringen met HoloLens
  • Engadget – Artikel met speculaties over de technische specificaties.

Waarom HoloLens een succes kan worden

Belangrijke redenen die volgens mij doorslaggevend kunnen zijn waarom Hololens wel een succes wordt, terwijl bijvoorbeeld Google Glass dat niet zijn geworden en Oculus Rift nog lang niet de verspreidingsgraad heeft die de makers voor ogen hadden:

  • Hololens heeft geen front-side camera, zoals bijvoorbeeld Google Glass wel had. Met alle privacy-issues van dien. Met Hololens kun je je weliswaar samen in een virtuele wereld begeven, maar er is geen gevaar dat nietsvermoedende omstanders ongemerkt worden gefilmd en buiten hun medeweten op Facebook belanden, of erger. Goede keuze van Microsoft. [zie ook update, hieronder].
  • Hololens kent een view-throughmechanisme. Dat betekent dat je niet afgesloten wordt van de buitenwereld, maar dat hologrammen aan jouw bestaande wereld worden toegevoegd. Je kunt door de donkere lens gewoon anderen blijven zien, met anderen spreken en interacteren. Je bent niet asociaal in je eigen VR-wereld opgesloten, maar communicatie blijft mogelijk. Essentieel.
  • Door dat view-throughmechanisme hoeft Hololens niet de wereld opnieuw te berekenen en te creëren.  Het hoeft ‘alleen maar’ hologrammen op de al bestaande wereld te projecteren. Dat is nog voldoende uitdaging voor de rekenkracht van de processor (in HoloLens HPU, Hologram Processing Unit genoemd), maar maakt het een stuk eenvoudiger dan bij Oculus Rift, die de complete wereld moet berekenen, inclusief jouw interactie ermee. Dit voorkomt dat je projecten op grofkorrelige tafeltjes in een pixelige omgeving moet manipuleren. Alle rekenkracht kan worden aangewend voor de hologrammen. Heel slim.
  • Je hoeft HoloLens niet continu te dragen. Waar bij Google Glass werd verwacht dat je het geeky object de hele dag op je neus droeg, zal dat bij HoloLens niet het geval zijn. Net zoals je nu op de bank gaat zitten met je tablet of in je stoel neerploft om tv te kijken, zo zul je straks op de bank gaan zitten en zet je dan HoloLens op om informatie op te zoeken of er mee te interacteren. Of ga je voor je Xbox staan - als dat nog nodig is - om een HoloGame te starten (dat laatste woord heb ik zelf verzonnen ;-). Oftewel: HoloLens is een specifiek apparaat, waar Google Glass een generiek doel had. En mede daarom is mislukt.

MineCraft live in je eigen huiskamer. Opslaan en de volgende dag doorspelen!

Nogmaals, de geschiedenis zal uitwijzen of HoloLens het succes wordt waar Microsoft op hoopt, maar ik geef ze een goede, heel goede kans.

Update – 23 januari 2015. Ik werd er via Twitter door @GerjanOnline op gewezen dat de HoloLens wel degelijk frontside camera’s heeft. Dit is uiteraard juist. Zonder frontside camera’s zou het apparaat immers totaal geen beeld van de omgeving kunnen opnemen om de hologrammen te kunnen projecteren. Het artikel op Engadget spreekt van “at least four cameras or sensors on the front”. Ik blijf er wel bij dat het doel van HoloLens in dit opzicht anders is dan bij Google Glass. De camera’s worden niet gebruikt voor opnamen of filmbeelden, maar alleen om te berekenen waar de lens zich bevind en hoe de hologramwereld moet worden opgebouwd. Het zijn rekendevices. Geen registratiedevices. Ik verwacht ook dat Microsoft niet zal toestaan dat apps de camera’s hiervoor gaan gebruiken. Maar de toekomst zal dit moeten uitwijzen.

Houd de website http://www.microsoft.com/microsoft-hololens/en-us in de gaten voor het laatste nieuws, en volg https://twitter.com/hololens voor Twitter-updates. Het is de toekomst.

 

Peter Kassenaar
-- 22 januari 2015

21augustus

Autocorrectie uitschakelen op Android tablet

nexus7

Ik heb nu ongeveer een half jaar een Google Nexus 7; mijn eerste Android device ooit. In het algemeen ben ik er erg tevreden over. Snel, veel en goede applicaties en hij ligt door zijn 7”-formaat een stuk lekkerder in de hand dan mijn iPad en mijn Surface RT.

Eén ding bevalt me echter maar matig: in tegenstelling tot de Apple- en Microsoft-tablets is de standaardinstelling voor het automatisch corrigeren van teksten erg strak ingesteld naar mijn idee. En omdat ik regelmatig zowel Engelse als Nederlandse mailtjes, artikelen en tweets schrijf, moet ik de Engelse varianten altijd supergoed controleren om te zien of Android de inhoud niet heeft verhaspeld.

Autocorrectie uitschakelen

Het uitschakelen van Autocorrectie-optie is niet makkelijk te vinden in de menu’s. Op deze manier doe je het. Ik vermoed dat het voor andere Android-varianten op ongeveer dezelfde manier gaat:

1. Open de app Instellingen. Dit vind je via het algemene appmenu, of door het notificatiecentrum van bovenaf naar beneden in beeld te schuiven. Kies hierin de optie Taal en invoer.

Android: Instellingen, Taal en Invoer

2. Klik achter de geselecteerde toetsenbordoptie – vaak zal dat Google-toetsenbord, Nederlands zijn – precies op het instellingenpictogram. Als je gewoon op de naam tikt, gebeurt er niets.

Android: Instellingen, Toetsenbord

3. Kies de optie Autocorrectie (nu staat er geen instellingenpictogram achter de naam).

Android: Instellingen, Autocorrectie

4. Kies in het pop-upmenu de optie Uitgeschakeld.

Android: Instellingen, Autocorrectie, Geen

Gebruik de knop Terug om terug te keren naar de vorige menu’s, of keer met de startknop direct terug naar de uitgangspositie. Autocorrectie zit je nu niet meer in de weg als je in verschillende talen schrijft.

Succes er mee,

Peter Kassenaar
-- 21 augustus 2013

16mei

Introductie PhoneGap

Cover PC-Active 269Wat is er leuker dan een eigen app op uw telefoon te plaatsen? Met relatief nieuwe diensten als PhoneGap en PhoneGap Build maakt u apps met bekende technieken als HTML, CSS en JavaScript. Na het uploaden van de code krijgt u een kant-en-klare app retour. In dit artikel maakt u in vijftig regels code een werkende app met geïntegreerde Google Maps.

[Dit artikel verscheen eerder in PC-Active 269, mei 2013]

Download de voorbeeldcode bij dit artikel


Inleiding

Het mobiele landschap is hot. Het marktaandeel van smartphones is in Nederland al ruim 60%. Voor het grootste deel draaien deze op Android (ook ruim 60%). De rest wordt verdeeld tussen iOS, Windows Phone en andere platforms. En als u ook nog weet dat zo goed als iedereen die een smartphone heeft daar meerdere apps voor download, beginnen uw vingers natuurlijk te jeuken. Uw app moet daar ook bij! Maar waar moet u beginnen? Elders in deze PC-Active vindt u een artikel over de Corona SDK en bijvoorbeeld in PC-Active 266 las u meer over het maken van een Android app met Java en Eclipse.

In dit artikel bespreken we een ander alternatief. Want ook met webdesigntechnieken als HTML, CSS en JavaScript kunt u in combinatie met de tool PhoneGap eigen apps maken. Deze kunt u verspreiden onder vrienden en bekenden, of – als u een developer account afsluit bij Apple of Google – in de diverse app stores publiceren. Een developer account kost geld, maar het begin is gratis. Het enige dat u nodig hebt is een editor (Kladblok is al voldoende), enige voorkennis van HTML, CSS en JavaScript en een account bij Adobe. Het is het handigst als u een Android-telefoon bij de hand hebt, want hierop kunt u zonder beperkingen apps toevoegen. Voor iPhones en iPads is dat een stuk ingewikkelder door de beperkingen die Apple oplegt.

PhoneGap of Cordova?

Het project PhoneGap is oorspronkelijk gestart door Nitobi. In 2011 werd PhoneGap overgenomen door Adobe. Om de continuïteit en het opensourcekarakter te garanderen, werd de codebase ondergebracht bij Apache, waar het de naam Cordova heeft gekregen. U kunt de huidige versie van PhoneGap zien als een distributie van de Cordova core. Ingewikkeld? Tja. Ook op de PhoneGap-site zelf komt u beide termen nog tegen! Online vind u de officiële uitleg. Met PhoneGap schrijft u één keer de HTML-code. Deze kan worden omgezet naar apps voor liefst zeven verschillende mobiele platformen.

PhoneGap en andere diensten

PhoneGap is niet de enige dienst die webcode kan omzetten naar apps. Andere bekende namen zijn bijvoorbeeld AppMobi (onlangs overgenomen door Intel) en Sencha Touch. PhoneGap kunt u op twee manieren gebruiken.

  • Ten eerste kunt u PhoneGap downloaden (het is immers open source) en per platform zelf de juiste versie installeren. Zo compileert u apps op uw eigen pc of Mac. Hiermee hebt u de volledige controle over elk platform, maar het kost wel tijd en moeite om dit goed te doorgronden.
  • De andere manier is de cloudgebaseerde service gebruiken. U maakt de app, test hem in de browser en als u tevreden bent upload u een zipbestand naar PhoneGap Build. Dan wordt uw code op de servers van Adobe naar een app omgezet. Na enkele ogenblikken (meestal binnen één a twee minuten) kunt u een kant-en-klare app downloaden. Dit is de route die we in dit artikel bewandelen.

PhoneGap-workflow

Hybride apps

Het soort app dat PhoneGap maakt staat ook wel bekend onder de noemer hybride apps. Een gemeenschappelijk kenmerk van elk mobiel platform is namelijk dat ze het mogelijk maken binnen een app een mini-browservenster te openen. Hier maakt PhoneGap handig gebruik van door per platform een lege kapstok-app te maken en hierin direct het browservenster te openen. Binnen deze browser draait vervolgens uw (HTML-, CSS- en JavaScript-)code. PhoneGap zorgt voor de koppeling van uw code met de native bibliotheken van het besturingssysteem. Op die manier kunt u in uw app ook gebruik maken van systeembronnen op het mobiele apparaat, zoals de camera, de GPS-sensor, de contactenlijst en meer. Alle beschikbare onderdelen worden uitgebreid en met codevoorbeelden beschreven in de PhoneGap API. Omdat u geen code schrijft die rechtstreeks het besturingssysteem aanspreekt (native code), maar de PhoneGap-omweg neemt, spreken we van hybride apps.

Code structureren en schrijven

Laten we van start gaan en PhoneGap Build verkennen via een eenvoudige app. De structuur van een PhoneGap-app ligt voor een deel vast.

  1. Maak eerst een map www, bijvoorbeeld op het bureaublad. Dit is het startpunt.
  2. Open uw favoriete editor (Dreamweaver, Eclipse, Visual Studio of Kladblok) en maak het bestand index.html.
  3. Sla het op in de map www. Dit zijn de enige twee vereisten, het zijn de punten (hooks) die PhoneGap herkent en waaraan de rest van de app wordt gekoppeld. In de overige bestandsnamen, mappen en locaties voor scripts, afbeeldingen en meer bent u volkomen vrij.
  4. Neem de code over zoals in de afbeelding staat (of download de voorbeeldcode bij dit artikel).

Figuur 1 toont de code voor een minimale PhoneGap-app.

phonegap_01_correct

Het enige dat in deze HTML-pagina opvalt, is het attribuut onload=”onLoad();” in de tag <body> en de lege <div> met id=”divResult”.

Op regel 10 en op regel 13 staan de JavaScriptfuncties die worden uitgevoerd op het moment dat de pagina wordt geladen en het apparaat (device) gereed is. De standaardnaam hiervoor in PhoneGap is OnDeviceReady(). In deze functie wordt een tekst in divResult geplaatst en wordt een alert-venstertje getoond waarin is te zien dat PhoneGap goed werkt.

We doen op dit moment nog niets aan mooie opmaak of foutcontrole, iets wat u in een echte app uiteraard wel zult doen. Let er verder op dat op regel 8 een verwijzing naar <script src="phonegap.js"></script> staat. U hoeft dit bestand echter niet zelf te plaatsen. Het wordt door PhoneGap Build dynamisch ingevoegd.

Uploaden

Toegegeven, het stelt nog niet veel voor, maar we kunnen de code nu omzetten naar een app en testen. Maak een zip-bestand van de code die u tot nu toe hebt: index.html in de map \www. Ga dan naar https://build.phonegap.com/ en meldt u aan met een Adobe ID. Als u dit nog niet hebt, registreer dan een nieuwe account.

Figuur 2 - PhoneGap Build

  1. Als u bent ingelogd bij PhoneGap Build, klik dan rechtsboven +new app.
  2. Kies Upload a zip file en blader naar het zipbestand dat u zojuist hebt gemaakt. Zodra het bestand is verzonden kunt u de gegevens invullen.
  3. Wij kiezen nu als naam Mijn demo-app en type een korte beschrijving. De overige opties mogen op dit moment uitgeschakeld blijven.
  4. Klikt tot slot op Ready to build. Dit proces is ook te zien in figuur 3.

Figuur 3 - PhoneGap app builden

Build en download

Uw code wordt nu bij PhoneGap Build omgezet naar een app. Dit kost hooguit enkele minuten. Er zijn vervolgens twee manieren om de app te downloaden en te installeren (figuur 4). De eerste manier is om onder de appnaam te klikken op de blauwe knop van het betreffende platform. U download dan een .apk-bestand voor Android, een .ipa-bestand voor iOS, een .xap-bestand voor Windows Phone, enzovoort. De app kunt u vervolgens naar uw telefoon kopiëren, ook weer volgens de regels van het betreffende platform. Voor Android betekent dit bijvoorbeeld dat u het bestand via USB kunt kopiëren en openen. Voor iOS zult u het bestand naar iTunes moeten slepen en dan uw iPhone synchroniseren, want dit is nu eenmaal de wijze waarop Apple werkt. Maar de tweede manier is waarschijnlijk veel eenvoudiger: scan de QR-code die PhoneGap toont, en de app wordt automatisch gedownload.

Figuur 4 - PhoneGap app downloaden

Geen app voor iOS?

U zult zien dat de knoppen voor Android en andere platforms al snel blauw worden, het teken dat u de app kunt downloaden. Voor iOS gaat dit echter niet op. De knop blijft rood. Hiervoor zult u eerst uw developerscertificaat en een provisioning profile moeten uploaden naar PhoneGap Build. Pas dan kan de app voor iOS met dit certificaat worden ondertekend en gecompileerd. Dit is (helaas) een omslachtig proces dat verplicht is gesteld door Apple als u apps wilt ontwikkelen voor iOS. Meer informatie over het signeren van iOS-apps vindt u bij PhoneGap Build op http://build.phonegap.com/docs/ios-builds en bij Apple op https://developer.apple.com/programs/ios/.

Installeren

We gaan er zoals gezegd van uit dat u de demo-app installeert op een Android-telefoon. Stel eerst in dat ook apps uit andere bronnen dan de Google Play Store mogen worden geïnstalleerd. Dit gaat via Instellingen, Toepassingen, Onbekende bronnen (figuur 5). Daarna kunt u uw QR-scanner richten op de QR-code op het scherm en de applicatie downloaden en installeren. Bij het installeren worden de benodigde machtigingen voor de app getoond, zie figuur 6. Deze kunt u eventueel zelf nauwkeurig instellen via een optioneel config.xml-bestand. Meer hierover leest u in de documentatie van PhoneGap Build. Klik op Installeren en daarna op Openen om de app te starten.

Stel op uw telefoon in dat toepassingen uit andere bronnen geïnstalleerd mogen worden.

Figuur 5 - Android telefoon instellen

De basisinstelling is dat de app om alle machtigingen vraagt. Via config.xml kunt u dit desgewenst finetunen.

Figuur 6 - Machtigingen voor Android app

En zo draait de eerste versie van onze app op de telefoon.

Figuur 7 - Eenvoudige PhoneGap app op telefoon

Google Maps integreren

Nu u weet dat de basisapp goed werkt, kunt u de code naar believen uitbreiden. Als voorbeeld voegen we een kaart toe die werkt met Google Maps.

  1. In index.html plaatsen we een koppeling <a href="maps.html">Toon kaart</a> . Deze verwijst naar een nieuwe pagina maps.html.
  2. Een voorbeeld van de code staat in figuur 8.
  3. In de commentaarregels wordt uitgelegd hoe de code werkt. Belangrijk is uiteraard dat de juiste bibliotheken voor jQuery en Google Maps worden ingevoegd.
  4. U kunt nu het zipbestand bijwerken en daarna in PhoneGap Build de knop Update code gebruiken. Er wordt een nieuwe versie van de app gemaakt die u weer kunt downloaden en testen.

Figuur 8 - Voorbeeldcode van Google Maps met PhoneGap

Finetuning van de app

Klik in het hoofdscherm van PhoneGap Build op de naam van uw app om een venster met detailgegevens te openen. Hier kunt u op verschillende tabbladen bijvoorbeeld het versienummer en de naam van uw app aanpassen, eigen pictogrammen uploaden en meer. Dit is ook de plek waar u uw app kunt verwijderen als u helemaal opnieuw wilt beginnen.

Geschikte typen PhoneGap-apps

Met PhoneGap maakt u snel en eenvoudig apps, maar dat wil niet zeggen dat dit het aanbevolen platform voor alle typen apps is. Als u apps maakt die intensief de hardware aanspreken zoals games of audio- en videobewerking, dan bent u waarschijnlijk beter af met een oplossing als Corona SDK. Door de hybride laag van PhoneGap levert u altijd iets in op de performance. PhoneGap is vooral geschikt voor informatieve- en business apps en is bijvoorbeeld erg goed in het werken met AJAX- en JSON-data. Dit betekent trouwens niet dat uw app er saai uit hoeft te zien. Met aanvullende bibliotheken als Twitter Bootstrap, jQuery en/of jQuery Mobile kunt u apps een fantastische look en feel geven.

Conclusie

Met de online dienst PhoneGap Build maakt u in een handomdraai apps voor tal van mobiele platformen op basis van de webtechnieken HTML, CSS en JavaScript. De apps kunt u makkelijk downloaden en op een telefoon installeren. Bekijk bij PhoneGap Build vooral de optie Docs in het hoofdmenu om meer te leren over de manier waarop u apps via PhoneGap Build kunt finetunen. Het daadwerkelijk publiceren van (vooral Apple) apps in de app store heeft wat meer voeten in de aarde, maar hiervoor vind u bij Apple, Google en Microsoft veel aanvullende informatie.

<shameless plug>
Meer weten over PhoneGap of een van de andere technieken die in dit artikel werden besproken? Ik verzorg hierin trainingen of help uw organisatie bij het beslissen welk type apps (web-, hybride-, native-) in uw situatie de beste keuze zijn. Neem contact op!
</shameless plug>

-- Peter Kassenaar
16-mei-2013

12november

Microsoft Surface review – tweede indrukken

surface

Vorige week schreef ik over mijn eerste indrukken met de Microsoft Surface. Ondertussen heb ik er een weekje mee gewerkt en heb ik wat meer gebruikerservaringen kunnen verzamelen.

Samenvattend (oftewel de TL;DR-versie):  Surface is een prachtig product. De beste tablet die momenteel verkrijgbaar is naar mijn idee. De batterijduur moet verbeterd worden. Het kost tijd om er optimaal mee te leren werken, zeker als je overstapt van een andere tablet (lees: iPad). Het is de vraag of mensen die stap en bijbehorende leercurve willen nemen.

Hieronder volgens de klassieke indeling The Good, the Bad and the Ugly verdere ervaringen met de Surface. Voor het gemak in een puntsgewijze opsomming, zodat het niet een eindeloos verhaal wordt. Als ik vergelijkingen maak, dan is dat vooral met de iPad en iOS, in Nederland zonder twijfel de bekendste andere tablet.

1. The Good

Speakers

Beginnen met een klein, maar aangenaam punt. De Surface beschikt over twee (stereo) luidsprekers, aan de linker en rechterkant van het scherm – bij de liggende stand. De luidsprekertjes worden bovendien bij normaal vasthouden niet bedekt door je handen, waardoor het geluid van games en video’s goed doorkomt. Vergeleken met de mini (en mono) speaker aan de onderkant van de iPad is dat een wereld van verschil. Het geluid is prima om naar te luisteren. Ook via de koptelefoonuitgang is het geluid prima. Hierin hoorde ik geen kwaliteitsverschil met de iPad.

mssurface

Scherm schoonmaken

Nog een klein (en wat mij betreft opmerkelijk) punt. Alle aanraakschermen worden vies. Er komen onvermijdelijk vette vegen en vingerafdrukken op. Als het scherm aan staat valt dat nog niet eens zo op, maar zodra je het uitzet zie je het. Het scherm van de Surface laat zich veel makkelijker reinigen dan dat van de iPad. Hoe het komt weet ik niet - het zal vast iets te maken hebben met het materiaal van de glasplaat - maar als je bij Surface eenmaal een microvezeldoekje over het scherm haalt, is het weer schoon. Boenen en poetsen is onnodig.

Mijn ervaring met iPad is anders. Hier moet je vaak langduriger poetsen en wordt het vuil in eerste instantie uitgeveegd in plaats van verwijderd. Opmerkelijk verschil.

Meerdere user accounts

Windows werkt (in tegenstelling tot iOS) per definitie met meerdere gebruikersaccounts. Elke gebruiker van de tablet kan zijn eigen account met persoonlijk startscherm, wachtwoord, bureaubladachtergrond, apps en overige instellingen maken.

Dit is zonder concurrentie het beste punt van de Surface!

 IMG_2387

Eindelijk kunnen de kinderen hun eigen apps (lees: spelletjes) op de tablet plaatsen zonder dat ik daar last van heb. Omdat iedereen ook een eigen wachtwoord heeft hoef ik er ook niet meer bang voor te zijn dat ze – al is het per ongeluk – persoonlijke of zakelijke gegevens (e-mail, agenda, contactpersonen) wissen van de tablet. Ze kunnen er eenvoudigweg niet meer bij.

Onderlinge concurrentie (‘heb jij die levels van Angry Birds al gedaan? Die wilde ik halen!’) is verleden tijd. Ze hebben allebei hun eigen Angry Birds. Idem andere apps. Dat geeft een hoop rust op de bank, dat kan ik je verzekeren.

Ook voor het startscherm is het een verademing. Ik hoef niet eerst door een eeuwigheid aan games te scrollen voordat ik mijn meest gebruikte apps (Mail, Agenda, Office, Twitter) tegenkom, maar ze staan direct in beeld.

Kortom: voor de prijs van één Surface koop je er eigenlijk drie. Of vier, of vijf, afhankelijk van je gezinsgrootte.

<shameless plug> Over het maken van meerdere user accounts in Windows 8 (en dus ook op Surface) lees je meer in hoofdstuk 5 van mijn Handboek Windows 8. Ik heb voor de kinderen een account van het type Microsoft-account ingesteld, zodat ze ook zelf (gratis) apps uit de Store kunnen downloaden en installeren. Weer een kopzorg minder. </shameless plug>

Een nadeel hierbij is wel dat – voor zover ik heb kunnen zien – dat, wanneer een app voor meerdere gebruikersaccounts wordt gedownload uit de Store, hij ook daadwerkelijk twee wordt geinstalleerd en twee keer ruimte inneemt. Bij grote apps en beperkte ruimte op de tablet kan dit lastig worden. Ik heb de 32GB-versie, maar als je echt veel gaat installeren, media (films, muziek) op de tablet plaatst, of de tablet wordt door velen gebruikt, dan moet je de 64GB-variant overwegen denk ik.

Standaard USB-poort

Ook een kleinigheidje op het eerste gezicht, maar de Surface beschikt standaard over een USB 2.0-poort. Dit blijkt in de praktijk buitengewoon handig. Opeens is de tablet uitbreidbaar met tal van standaard randapparatuur. Kom daar bij de iPad maar eens om. Enkele voorbeelden:

  • Je kunt een externe harddisk aansluiten om foto’s en video’s te bekijken.
  • Je kunt vrijwel elke digitale camera en/of telefoon aansluiten en media op het toestel gebruiken. Geen omslachtig synchronisatiegedoe meer via iTunes.
  • Je kunt een muis aansluiten voor het makkelijker werken in de bureaublad-omgeving met Office (zakelijk gebruik).
  • Je kunt een standaard toetsenbord aansluiten als je geen Touch Cover hebt (idem).
  • Je hoeft geen aparte, dure adapters aan te schaffen (looking at you, Apple!) om overige randapparaten aan te kunnen sluiten.
  • Je kunt een printer aansluiten.

En zo kan ik nog wel even doorgaan. De mogelijkheden zijn eindeloos en de keuze om een standaard industriepoort aan te bieden op de Surface is wat mijn betreft een uiterst slimme zit van Microsoft (en past in de traditie van het bedrijf, waarbij uitbreidbaarheid door derde partijen altijd centraal heeft gestaan in het product).

foto

Toch wat te zeuren? OK, het is geen USB 3.0 (terwijl standaardondersteuning hiervoor juist een van de nieuwe features in Windows 8 is die Microsoft niet moe wordt te benadrukken). Dat zullen ze wel voor de Surface 2 bewaren.

Snel toegang tot informatie

Door het concept van Live Tegels (apps kunnen statusinformatie op een tegel in het startscherm weergeven, zoals nieuwsberichten, de laatste tweets of mailtjes of het huidige weer) kan het Startscherm in eerste instantie onrustig overkomen. Zeker als je het vergelijkt met de statische vormgeving van iOS.

Na enkele dagen gebruik merk ik echter dat Live Tegels vreselijk nuttig zijn (disclaimer: ik weet dat dit op Android al langer bestaat, maar ik ben nu eenmaal geen reguliere Android-gebruiker). De verschillen in Workflow worden na enige gewenning duidelijk:

  • iPad – je wilt het laatste nieuws lezen. Open de nieuwsapp en bekijk de berichten. Sluit de nieuwsapp. Idem sportnieuws – zoek de sportapp en open hem. Lees de berichten en sluit hem weer door terug te gaan naar het startscherm. Laatste tweets? Blader naar de tweetapp en open hem. Lees tweets. Keer terug naar het startscherm. Nieuw e-mailtje? Swipe naar de e-mailapp en open hem. Lees mail. Sluit de app. Enzovoort.
  • Surface – Zorg er voor dat de meest gebruikte apps/tegels vooraan staan. De berichten komen vanzelf voorbij. Het enige wat je hoeft te doen is te lezen. Pas op het moment dat je meer info wilt, kies je specifieke een app (Nieuws, Sport, Mail of Twitter).

Kortom, ik heb gemerkt dat je bij Surface/Windows 8 het startscherm echt gaat lezen en nuttig gebruiken om je productiviteit te verhogen. Op iPad/iOS moet je hiervoor altijd eerst een specifieke app openen. Dat komt mij nu  - na een weekje Surface gebruik – als omslachtig over. De leeftijd en het gekozen concept begint iOS parten te spelen.

Niet alle apps bieden al Live Tegels, maar de apps die dat wel doen worden door mij hoog gewaardeerd. Mijn huidige startscherm op de Surface laat een mix zien van Live Tegels en statische tegels:

Startscherm Surface

2. The Bad

Natuurlijk is het niet allemaal goud wat er blinkt. Ik kwam de volgende negatieve punten tegen bij het gebruik van de Surface.

Beperkte batterijduur

De batterijduur wordt door Microsoft gesteld op ruim 10 uur gebruik. Dat kan ik niet onderschrijven. In mijn ervaring gaat de batterij hooguit een uur of 6-7 mee. In ieder geval is de werkduur ruim minder dan die van iPad.

Natuurlijk, de afgelopen week is de Surface intensief gebruikt (het was de eerste week in ons huishouden), maar hij moest dan ook zeker twee of drie keer aan de lader. En soms bleek hij ‘s ochtends gewoon leeg en moest hij eerst worden opgeladen voordat hij verder gebruikt kon worden. Oftewel: ook in de standby stand verbruikt de tablet naar mijn indruk meer energie dan de iPad.

Bovendien is er niet echt een handige batterij-indicator zichtbaar op het startscherm die het percentage restlading aangeeft (en is daar ook nog geen app voor in de Store (?!) te vinden). Je moet dit handmatig controleren via het bureaublad of door het vergrendelingsscherm te openen. Dit moet verbeterd worden.

Beperkte set instellingen in Windows 8-omgeving

Als ik een tablet gebruik, wil ik ook graag alle instellingen regelen in diezelfde tablet-omgeving. Idealiter wil ik helemaal niks meer met het bureaublad te maken hebben (behalve misschien voor Office-werk in Windows of Excel). Windows 8 heeft hiervoor de app Pc-instellingen. Maar in de praktijk blijkt een omweg naar het bureaublad vaak nog noodzakelijk. Onderdelen die ik de afgelopen week alleen via het bureaublad kon instellen waren bijvoorbeeld:

  • Toetsenbordwijzigingen (Duits/Engels/Nederlands)
  • Gebruikersaccount verwijderen
  • IP-adres controleren

En zo zijn er nog een paar items, ik heb ze niet allemaal genoteerd. Ik verwacht wel dat er in de loop der tijd via updates of Service Packs (in de beste Microsoft-traditie) steeds meer instellingen worden overgebracht, of op zijn minst mede beschikbaar worden gesteld via de app Pc-instellingen, maar op dit moment moet ik nog te vaak naar mijn zin switchen naar het bureaublad.

pc-instellingen

Matige netwerkstabiliteit

In mijn eerste review merkte ik op dat de Surface vrijwel elk netwerk in de straat leek op te pikken. De gevoeligheid van de antennes is dus uitstekend.

De stabiliteit van de netwerkkaart lijkt minder in orde te zijn. Regelmatig krijg ik tijdens het downloaden van apps uit de Store de melding dat het netwerk niet beschikbaar is (terwijl ik slechts enkele seconden geleden via datzelfde netwerk nog in de Store kon zoeken!) en moet ik de pagina herladen of het downloaden opnieuw beginnen. Idem voor het werken met Internet en met de XBox. Soms ook geeft het netwerkpictogram aan dat de verbinding uitstekend is, maar kan ik desalniettemin geen mail lezen of websites bezoeken.

Het kan natuurlijk aan mijn netwerkwerk-setup liggen (twee WIFI-netwerken met aparte SSID’s en een bridge ertussen om uit dezelfde IP-pool te putten zodat je niet met lastige subnetinstellingen hoeft te werken), of aan de Store zelf. Maar dat kan ik niet controleren, vanwege te weinig mogelijkheden om dit in de tabletomgeving te testen.

SNAGHTML3798674e

Je kunt in de Windows RT-omgeving niet eens controleren welk IP-adres en subnetmasker de Surface toegekend heeft gekregen via de router. Dat was zelfs in iOS versie 1 al ingebakken.

Hier zal Microsoft nog serieus aan moeten werken. Nogmaals; het hoeft geen probleem van Windows 8 of de Surface te zijn, het issue kan ook bij mij liggen. Maar omdat er geen tools zijn om te diagnosticeren vind ik dit toch een minpunt van Windows zelf.

Office niet in Windows 8-stijl

Ik had verwacht dat de meegeleverde versie van Office 13 met Windows RT geoptimaliseerde versies van Word, Powerpoint, Excel en OneNote zouden zijn voor de tabletomgeving. Ongeveer net zoals Apple (uitstekend!) heeft gedaan met Pages, Keynote en Numbers.

Maar niets is minder het geval. Het zijn gewoon de bureaubladversies van Office, omgezet naar een ARM-processorarchitectuur. Jazeker, het zijn uitstekende Office tools en ze werken perfect in de cloud met Windows SkyDrive, maar ze zijn niet bepaald geoptimaliseerd voor touch-bediening. Om maar eens een understatement te gebruiken.

Zoek de verschillen:

Word_2013

pages_ipad

Ook het feit dat je eerst te zien krijgt dat je nog met een ‘Preview’ werkt van Office 13 (‘wat, is de software nog niet klaar dan?’) en dat je online moet gaan voor meer informatie over Office verdient bepaald geen schoonheidsprijs. Dat had beter gemoeten. Veel beter.

 

3.The Ugly

Verder kwam ik tijdens het werken een paar issues tegen die ik zou willen scharen onder de noemer Schoonheidsfoutjes (the ugly). Ze zijn niet al te beperkend in het dagelijks gebruik, maar het zou mooi zijn als ze worden opgelost via softwareupdates. Noem het voor mijn part daarom een ‘wensenlijstje’.

Tekst kopiëren/plakken

Het kopiëren van teksten met je vinger is een nauwkeurig werkje, omdat de letters vaak veel kleiner zijn dan je vingertop. In iOS is dat goed opgelost door een vergrootglaasje te tonen wanneer met touch-and-hold tekst wordt geselecteerd en daarna gekopieerd of geplakt. In Windows 8 verschijnen twee kleine bolletjes onder de tekstselectie en hier moet je het mee doen. Vaak zit je vinger in de weg om te zien wat je nu eigenlijk selecteert en kopieert. Dat is lastig.

Tegels lastig te verslepen

Tegels op het startscherm zijn te verslepen naar een nieuwe positie. Je moet ze hiervoor eerst een klein stukje naar beneden slepen zodat ze geselecteerd worden weergegeven en daarna met je vinger verplaatsen. Dat is lastiger dan gedacht. Je moet ze eerst ‘los trekken’ uit hun bestaande positie en daarna ingedrukt en wel naar de juiste kolom verslepen. Het kost best enige tijd om dit goed onder de knie te krijgen. De tegels zitten vaster dan je denkt ;-).

In ieder geval is dit met de muis (Windows 8 op een bureaubladcomputer) veel eenvoudiger dan met je vingers. Dat had ik niet verwacht.

image

Invoerveld verdwijnt soms achter onscreen-toetsenbord

De ruimte op een tablet is beperkt. Het onscreen-toetsenbord neemt meer dan de helft van de schermhoogte in beslag als je het gebruikt. Hierdoor kan het gebeuren (en: gebeurt het ook vaak) dat een invoerveld verdwijnt achter het toetsenbord. Je ziet dan niet wat je typt – bijvoorbeeld een naam of wachtwoord om je aan te melden bij een website of bij een app (Twitter, Facebook).

In veel gevallen schuift het invoervak – correct – omhoog zodat het zichtbaar is, maar vaak gebeurt ook niet, zodat je in den blinde zit te typen. Dat is lastig.

Wisselen tussen user accounts kan lang duren

Een van de grote voordelen vind ik het instellen van meerdere gebruikersaccounts (zie hiervoor). Het wisselen tussen die gebruikersaccounts kan soms echter onverwacht lang duren. Dan is het scherm eerst tien, vijftien of zelfs twintig seconden zwart voordat het startscherm met alle accounts weer verschijnt.

Vaak gaat het ook heel snel, maar soms duurt het echt lang. Kinderen hebben dat geduld niet (en ook ik dacht in eerste instantie dat de tablet was vastgelopen). Uiteindelijk gaat het altijd goed, maar de onvoorspelbaarheid hierin is lastig. Hopelijk kan dit worden aangepast.

Nog weinig apps in de Store

Ook dit is een punt dat in de loop van de tijd hopelijk ‘vanzelf’ verbeterd wordt, maar de beschikbaarheid van geoptimaliseerde Windows 8-apps is op dit moment nog…tja. Laten we het suboptimaal noemen. Er zijn nog geen geoptimaliseerde apps van Facebook, Google-diensten, YouTube, LinkedIn en andere belangrijke partijen. Vaak zijn er wel derde partijen die bijvoorbeeld een Twitter- of Facebook-app hebben gemaakt, maar de kwaliteit hiervan is wisselend.

Niet dat we nu zitten te wachten op honderden poezenfoto’s of bierdrink-apps, maar wat meer diversiteit en kwaliteit zou welkom zijn.

Als je zoekt op het wildcardteken (*, het sterretje) zie je alle apps die beschikbaar zijn. Op dit moment zijn dat er ruim 8.000. Dat valt natuurlijk in het niet bij de honderdduizenden apps in de Apple App Store en op Google Play.

SNAGHTML3799e86e

Folders of mappen op het Startscherm

Ik ben bepaald geen app-verzamelaar, maar toch merkte ik de afgelopen week al regelmatig dat ik erg veel van links naar rechts aan het scrollen was in het Startscherm. En dan waren de spelletjes van de kinderen er al uit.

Het zou mooi zijn als in een volgende versie van Windows 8 het mogelijk zou worden apps te groeperen in mappen. Dit zou dan vergelijkbaar (of beter?) kunnen worden met de functionaliteit zoals die in iOS 4 is geintroduceerd. Windows 8 werkt nu met appgroepen, maar dit neemt toch veel ruimte en daardoor scrolltijd in beslag. Het verminderd m.i. de productiviteit.

Het zou het overzicht en bruikbaarheid van het Startscherm ten goede komen als je mappen met tegels zou kunnen maken voor Games, Office, Tools, enzovoort.

Dat zal dan wel iets worden voor Windows 8.5 of Windows 9…

Conclusie

Ik ben erg blij met Windows 8 op Surface. De (zakelijke) bruikbaarheid en productiviteit ligt hoger dan bij iOS, is mijn voorzichtige indruk na een weekje werken. De batterijduur en beperkte beschikbaarheid aan apps zijn duidelijke minpunten. De uitbreidbaarheid en meerdere gebruikersaccounts zijn overduidelijke pluspunten.

Heb je hier aanvullingen of opmerkingen op? Laat het weten door een reactie te schrijven.

Peter Kassenaar
-- 12 november 2012

03november

Microsoft Surface - eerste indrukken

Met het verschijnen van Windows 8 heeft Microsoft voor het eerst ook een een eigen tablet uitgebracht, de Microsoft Surface met Windows RT (de versie van Windows 8 die speciaal voor tablets met een ARM-processor is geoptimaliseerd).

Ruim twee jaar geleden, in april 2010 kocht ik in Los Angeles een iPad voordat deze in Nederland verkrijgbaar was. Het leek me leuk om ook deze gadget aan te schaffen voordat hij officieel op de Nederlandse markt zou verschijnen. Als was de weg er naartoe dit keer wel heel gewoontjes – ik heb in de Duitse Microsoft Store een bestelling geplaatst en enkele dagen na het verschijnen van de Surface werd hij door een koerier van FedEx aan de deur afgeleverd.

Als je ook een Surface wilt bestellen voordat deze via de officiële Nederlandse kanalen verkrijgbaar is, bezoek dan bijvoorbeeld www.surface.de. Maar ook via de Engelse Microsoft Store kun je een tablet bestellen, zij het dat je in ponden (omgerekend) iets meer betaalt dan in euro’s.

Ik bestelde de Surface 32 GB met Touch Cover. Omdat ik bij het schrijven van het Handboek Windows 8 al had gemerkt dat je heel makkelijk van taal kunt wisselen in Windows 8 was ik niet bang dat ik met een puur Duits product zou blijven zitten.

1. Verpakking

Microsoft is vaak bekritiseerd om de uitbundig vormgegeven verpakkingen met tal van reclamekreten en versieaanduidingen. De doos van de surface is minimalistisch ontworpen en ziet er smaakvol uit. Het zwarte deel is de doos, het witte deel de binnendoos die je er uit trekt.DSC_6508

 

Op achterkant staat in kleine letters vermeld wat Windows RT is en dat je geen gewone desktopapplicaties op de tablet kunt installeren. Op de onderkant staan de landen waarin het product verkocht kan worden. Ook NL staat er bij, dat lijkt me een goed teken.

DSC_6512DSC_6513

De binnendoos uitgeschoven:

DSC_6514

 

Onder de binnendoos gaat een inlay verscholen waarin de Touch Cover (toetsenbord en beschermhoes ineen) verscholen gaat. Keurig vormgegeven.DSC_6515

 

De touch cover lift je makkelijk uit de sjabloon:DSC_6516

 

Toetsenbord ‘touch cover’

Kleine tegenvaller: het toetsenbord is wel degelijk van een Duitse indeling voorzien en niet van een US-International-indeling zoals de meeste toetsenborden. De indeling hiervan (QWERTZ) is bijna gelijk, maar de toetsen Y en Z zijn omgewisseld en er zijn apart toetsen voor veelgebruikte accentletters als ü, ö en ä.

Dit was op de afbeelding in de MS Store helaas niet goed zichtbaar, anders had ik de versie zonder toetsenbord besteld. Zodra de Surface officieel in Nederland verkrijgbaar is zal ongetwijfeld een goed toetsenbord worden meegeleverd.

Het materiaal waarvan de touch cover is gemaakt voelt heerlijk zacht, bijna fluweelachtig aan. De toetsen hebben geen merkbaar indrukmoment. Het zijn echt aanraaktoetsen.

De touch cover bevat zelfs een Windows-toets om snel terug te keren naar het startscherm en een heuse trackpad.

DSC_6518

Het toetsenbord heeft daarnaast aparte knoppen om de speciale Windows 8-charms voor Zoeken, Instellingen en meer direct te openen.

DSC_6529

 

2. Inhoud van de doos

De surface zelf is verpakt in de witte binnendoos. Via een klapdeksel wordt de inhoud zichtbaar.

DSC_6520

DSC_6521

DSC_6522

De complete inhoud van de doos:

  • Surface
  • Netsnoer en adapter (wel geschikt voor Nederlandse wandcontactdozen)
  • Summier boekje en gebruiksaanwijzing.
  • Touch cover met toetsenbord

DSC_6523

De Surface heeft aan de achterkant een uitklapbaar deel. Hiermee kun je de surface rechtop zetten om bijvoorbeeld een film te kijken, foto’s als diavoorstelling af te spelen of om het toetsenbord in te klikken en de tablet als laptop te gebruiken.

DSC_6524

Het toetsenbord klikt zich met een verrassend sterke magnetisch klik vast aan de tablet. Je kunt zonder problemen de Surface optillen aan het toetsenbord zonder dat hij er af valt. Ik heb de indruk dat de bevestiging steviger is dan de cover van de iPad 2. Als je een iPad 2 (of 3) optilt aan het covertje, dan valt de tablet op de grond. De Surface zit steviger vast. De complete opstelling ziet er dan zo uit:

DSC_6525

Je kunt de touch cover op verschillende manieren over of achter de tablet vouwen. Het toetsenbord zelf is niet oprolbaar (zoals het hoesje van de iPad 2). Dit is één rigide deel.

DSC_6526

DSC_6527

 

3. Surface in gebruik nemen

Tijd om de Surface in gebruik te nemen. Hij wordt opgeladen geleverd, dus als het goed is kun je direct aan de slag. De aan/uitknop zit rechtsboven (als je de tablet rechtop houdt, met het Windows-logo aan de onderkant en de camera aan de bovenzijde).

DSC_6528

Installatiestappen

De installatiestappen zijn eenvoudig. Je hoeft bijvoorbeeld geen versienummer in te vullen. Wel moet je de beveiligingssleutel van je Wifi-netwerk bij de hand hebben. Deze kun je tijdens de installatie direct opgeven.

1) Kies de weergavetaal. De keuzes bij deze (Duitse) Surface waren Deutsch, English en Francais. Ik koos bij de installatie voor Engels (en heb dit later omgeschakeld naar Nederlands, zie verderop). Daarna moet je de licentievoorwaarden accepteren.

DSC_6531

Je kunt dit zowel via aanraakbediening als via het toetsenbord doen, desgewenst zelfs gemixt. Op het moment dat je de touch cover losklikt wordt automatisch een on-screen toetsenbord getoond als je in een tekstvak klikt.

Terzijde: ik had dit nodig omdat ik mijn e-mailadres moest invullen. Maar ik had geen idee hoe dit op een Duits toetsenbord moest. Het @-teken (Shift+2 op een US-toetsenbord) staat op de touch cover rechts onder de Q. En wat ik ook probeerde (Shift+Ctrl+Q, Alt+Shift+Q), het lukte me niet om een apestaartje op het scherm te toveren. Uiteindelijk heb ik het toetsenbord maar losgeklikt en via het on-screen toetsenbord mijn e-mailadres ingevuld. Daar zat de @ gelukkig op de vertrouwde plek ;-)

2) Kies een kleurenschema en een computernaam.DSC_6532

 

3) Kies een wireless netwerk om verbinding mee te maken. Wat me opviel was dat ik normaal gesproken in mijn kantoor ongeveer 3 draadloze netwerken ontvang (twee van mezelf en die van de buren). Maar de Surface leek zo ongeveer alle netwerken in de straat op te pikken:DSC_6533

 

4) Gebruik je e-mailadres (of ander Microsoft Live account) om je aan te melden. Windows 8 haalt dan direct je contactgegevens op en stelt de pc verder persoonlijk in. Hier had ik dus het @-teken nodig en moest ik werken via het on-screen toetsenbord.

DSC_6536

5) Daarna is het een kwestie van wachten. In mijn geval ongeveer 4-5 minuten. De apps worden geïnstalleerd en gegevens worden gesynchroniseerd. Ondertussen wordt op de Surface een filmpje met basisbediening afgespeeld en daarna wisselt het scherm telkens van kleur om aan te geven dat het installatieproces nog bezig is.

DSC_6540

DSC_6541DSC_6542

 

6) Gereed. Het Windows 8-startscherm verschijnt. Dat de synchronisatie is geslaagd, is direct te zien omdat het kleurenschema van mijn desktop Windows 8-pc is overgenomen (en niet het blauw dat ik bij de installatie koos). Ook de locatieherkenning werkt goed – het actuele weer voor mijn woonplaats werd opgehaald.

 

DSC_6544

DSC_6546

Tot mijn verbazing is in Windows RT ook een tegel Bureaublad aanwezig (ik dacht dat die hierin ontbrak, omdat je op Windows RT immers geen gewone Windows-toepassingen kunt installeren. Dit gaat nog voor heel wat vraagtekens en helpdesktelefoontjes zorgen ben ik bang!).

Hierin was in Internet Explorer zelfs al mijn standaardzoekmachine (Google) gesynchroniseerd, in plaats van de standaard zoekdienst Bing van Microsoft.

DSC_6547

Onderin de taakbalk zijn de pictogrammen voor Microsoft Word, Excel, Powerpoint en OneNote zichtbaar. Deze zijn standaard geinstalleerd op Windows RT en hoef je dus niet apart te kopen.

Ik was echter in de veronderstelling dat met Windows RT speciale Touch-versies (voorheen: “Metro”-versies) van Office zouden worden meegeleverd. Maar dat is dus niet het geval, het zijn de gewone Bureaubladversies. Vandaar misschien ook de aanwezigheid van de Bureaublad-tegel op het startscherm. Ik

4. Eerste gebruikerservaringen

Ik heb – al zeg ik het zelf – al een ruime gebruikerservaring met Windows 8. Hoewel het (nog) niet mijn standaard besturingssysteem is, werk ik al ruim een half jaar met Windows 8 en heb ik uiteraard het complete Handboek Windows 8 geschreven op een Windows 8-computer, inclusief touchscreen, de Dell ST220 T.

Maar een losse tablet zoals de Surface is toch weer wat anders. Opeens zit je op de bank in de huiskamer met Windows 8 in plaats van op je kantoor met comfortabele muis en toetsenbord onder handbereik.

Na één avondje oefenen (gisteravond) zijn dit mijn eerste indrukken:

  • Het scherm is van buitengewone kwaliteit. Helder, responsief, diep zwart. Een dikke pluim. Reageert heel goed op touch-bewegingen. Heerlijk om mee te werken.
  • De Windows-toets om terug te keren naar het startscherm geeft een kleine trilling als respons bij indrukken. Zo heb je echt het gevoel dat de tablet op je reageert. Door de plaatsing (midden op de lange zijde) ben je van nature geneigd de tablet horizontaal te houden, in tegenstelling tot bijvoorbeeld een iPad (waarbij de Home-knop midden op de korte kant zit).
  • De tablet ligt lekker in de hand. Breder en (iets) zwaarder dan een iPad, maar een lekker ‘warme’, zacht aanvoelende achterkant. Geen koud plastic of metaal.
  • De Surface-tablet is niet traag, maar toch merkbaar langzamer dan een desktopcomputer.
  • Het installeren van een aanvullende taal is goed te doen, maar verloopt ook via het bureaublad. Daardoor heb je ongemerkt toch het gevoel met een ‘pc’ te maken te hebben in plaats van met een tablet. Niet alles kan dus via de nieuwe interface. En dan moet je opeens een gewoon bureaubladvenster bedienen en manipuleren met je vingers. Dat voelt onnatuurlijk en overbodig.
  • Het downloaden en installeren van Nederlands als voorkeurstaal (130 MB taalpakket) duurt bijna een kwartier. Dat is lang.
  • Het lijkt er op dat dit voor elk account opnieuw moet gebeuren. Ik maakte een account voor de kinderen, maar dit staat standaard weer op Engels ingesteld en Nederlands staat niet genoemd in de lijst met beschikbare talen, ofschoon ik dat zojuist – voor mijn eigen account – had gedownload en geïnstalleerd.
  • In de Store staan onmiddellijk updates klaar voor belangrijke apps als Mail, Foto’s, Kaarten en andere. Dit is te zien zodra je
  • De camera’s aan voor- en achterzijde lijken vooral bedoeld voor Skypen en MSN’en. De resolutie en kwaliteit is te laag om echt video- en fotomateriaal mee te schieten.

Later meer gebruikservaringen. Mocht je ondertussen vragen of opmerkingen hebben, laat dan een reactie achter.

Peter Kassenaar
-- 3 november 2012.