Mens-machine interactie in de praktijk Ontwikkeling van mobile apps in VWO 6

Over ons Marijke Loots Mark Aalderink docent Informatica VO Anglist meloots@gmail.com Mark Aalderink historicus (wijsbegeerte) en softwareontwikkelaar eigenaar WorldWise Learning www.worldwiselearning.org www.wwmm.nl markaalderink@ worldwiselearning.org

Agenda Apps en ontwikkelen voor smartphones Ontwikkelen voor iPhone/Android met Titanium (van Appcelerator) Mogelijkheden en gebruik van Titanium Achtergrond van het pilotproject in VWO 6 Verloop van het project Problemen en oplossingen Vragen en discussie

Waarom apps? Apps zijn ‘hot’: leerlingen zijn ermee bekend en enthousiast Groeimarkt: in Nederland al ongeveer 3.5 miljoen smartphones verkocht Lijkt de opvolger te zijn van de internetrevolutie Volgende stap: tabletcomputers

Ontwikkelen van apps

Mobiele platformen

Problemen met het ontwikkelen van apps Veel mobiele platformen met eigen SDK’s iPhone: iOS, Objective-C/C++ Android: Java BlackBerry: eigen SDK, Java Onderwijs: programmeertalen vaak te moeilijk voor leerlingen (grote leercurve) Versies besturingssystemen

Oplossingen Ontwikkelen van web-apps: HTML5/CSS Native apps: gebruik maken van platformonafhankelijke ontwikkeltools Alternatieven: Corona, PhoneGap

Web-apps en native apps Om meerdere mobiele systemen te bedienen Mobiele browsers worden krachtiger (WebKit/HTML5) Belangrijke beperkingen Native apps hebben meer mogelijkheden dan web-apps Native apps zijn sneller, responsiever en lopen natuurlijker op toestellen

Over Titanium Titanium is een platform-onafhankelijke ontwikkeltool Maken van native apps voor iPhone, iPad, Android en BlackBerry (beta) Ontwikkeld door Appcelerator (Silicon Valley) Titanium wordt ontwikkeld sinds november 2009

Titanium Titanium is een open source framework om native mobiele apps te ontwikkelen met webtechnologieën (JavaScript – optioneel HTML en CSS)

Voordelen Titanium Programmeren in JavaScript API’s zijn makkelijk te leren Met hergebruik van ca. 80-90 procent van dezelfde code apps compileren voor iPhone en Android (en binnenkort BlackBerry) Appcelerator zal in de toekomst ondersteuning gaan bieden voor andere populaire platformen (webOS, Google TV) Titanium wordt getest en aangepast voor nieuwe versies van besturingssystemen

Nadelen Titanium Documentatie is onoverzichtelijk, onvolledig en soms onjuist Bugs Snelheid van het compileren van Android apps Installatieproblemen Nog geen volledige ontwikkelomgeving (IDE), komt binnenkort: Aptana/Titanium Studio

Titanium Developer Gebruik je om Titanium apps te beheren en te draaien Hiermee maak je het eindpakket voor distributie aan Testen op een toestel

Titanium Functies Native gebruikersinterface Multimedia Camera, video camera, streaming/ locaal audio Echte native tabellen, tabs, sliders, en views Location-based services Open Source en uitbreidbaar Kaarten, kompas en gps Je kunt Titanium uitbreiden met eigen modules m.b.v. native SDK’s Data Integrated Analytics Lokale SQL database, applicatie- properties, XHR (Ajax) Ingebakken analytics API’s om resultaten en gedrag te meten Social APIs Ontwikkeltools Facebook, Twitter en YQL Ontwikkelen, testen en distribueren van een app met één tool.

Wie gebruikt Titanium? Jaguar NBC Universal eBay en PayPal MTV Computer Sciences Corporation Elke maand meer dan duizend nieuwe Titanium-apps in de stores

Titanium: de basics Een Titanium-app is een JavaScript programma dat tijdens het draaien wordt geïnterpreteerd (bytecode) app.js is de basis executiecontext van de app De app wordt niet gedraaid in een browser Gebruikt WebKit KJS JavaScript engine (iOS) of Rhino (Android/BB)

Doorsnee app Een enkel window of stapel van windows Tabgroep met veel windows Windows hebben views

Windows en contexten Windows zijn containers op het hoogste niveau voor Titanium applicaties Applicaties bestaan meestal uit één window of meerdere windows in een tabgroep Windows starten vaak nieuwe executiecontexten Executiecontext == een unieke JavaScript symbool-ruimte Zulke windows zijn “zware” windows Je kunt ook “lichte” windows maken (voor apps die in een enkele executiecontext draaien) 3

Voorbeeld waarschuwingsvenster/knop

Voorbeeld tabeloverzicht

Voorbeeld kaart en annotatie

Hulpmiddelen Community Q&A Docs (aantal documenten beschikbaar voor beginners) Premium Support (Pro Subscribers) Kitchen Sink en andere demo-apps Dev Blog: met tutorials, updates van het ontwikkelteam Twitter: @appcelerator

Demo: Kitchen Sink Voorbeeldcode Living Reference Document Volledige demonstratie van alle API’s

Boek Verschijnt bij Sdu/Academic Service tweede helft april 2011 Titanium Website: www.worldwiselearning/boek Bij voldoende interesse: opdrachten bij het boek (voor onderwijs)

Het pilotproject Achtergrond Onderwijssetting:VWO 6-klas Reguliere cursus van 5 weken met 3 contacturen Mens-machine interactie: gebruikersinterface ontwerpen Indeling cursus Lesbrief bestuderen met instructie, voorbeelden en korte opdrachten Werken aan een eigen app in groepjes van twee

Beperkingen Windowscomputers Kennis programmeren: Zowel op school als thuis (met uitzonderingen) Daardoor niet mogelijk om iPhone apps te bouwen Snelheid van de computers Kennis programmeren: JavaScript en basale kennis van Java

De lesbrief Onderdelen Inleiding over mobiele telefoons en apps Handleiding om Titanium te installeren en een Titanium-project op te zetten Hoofdstukken met instructie aan de hand van voorbeelden en opdrachten Afzonderlijk hoofdstuk over het ontwerp van een eigen app Appendices Documentatie deel Titanium API Aanvragen sleutels Google Maps etc.

Opdracht 6 VWO Maak een eenvoudige applicatie waarin je de gebruiker informatie verschaft over plaatsen in Utrecht zoals eetgelegenheden en cafés.

Eisen aan de app   De applicatie voor de Android-telefoon moet in ieder geval het volgende bevatten (de knoppen en labels spreken voor zich): minstens 1 tab- of menugroep minstens 1 TableView met extra gegevens per rij een kaart met verschillende locaties en annotaties (een applicatie kan maar 1 kaart bevatten) nette en leesbare code, voorzien van commentaar Extra's zijn:   plaatjes en/of animaties zogenaamde 'zware windows' route (zie KitchenSink) secties een Dialog, Slider, WebView, Switch, TextArea of TextField

Planning week activiteit 43 oefenen met de algemene API 44 oefenen met de Maps API 45 ontwerp maken en inleveren 46 werken aan implementatie 47 inleveren PO

Inside Utrecht Welkom bij Inside Utrecht, dé handigste en overzichtelijkste applicatie om de beste coffeeshop in jouw buurt te vinden. Sorteren op: Naam Openings tijden Locatie Hoofdpagina met 5 knoppen om naar de verschillende onderdelen van de app te gaan. Kaart om de kaart te krijgen met alle coffeeshops. Beschrijving voor alle beschrijvingingen vanaf A. Naam om naar lijst met namen te gaan. Openingstijden lijst met openingstijden. Locatie lijst met locaties. De interface ziet er zo uit want dat is overzichtelijk, makkelijk in gebruik en niet te druk. Makkelijk te sorteren, want je wilt niet altijd op naam zoeken. Soms wil je een dichtbije locatie of een coffeeshop die op dat moment geopend is. Met deze applicatie is dit goed te overzien. Ook zijn alle gegevens makkelijk te vinden en staan ze er overzichtelijk bij. Kaart Beschrijving 32

Alfabetische namen A Locatie Andersom Oudegracht 9:00-23:00 B Openingstijd Andersom Oudegracht 9:00-23:00 B Black&White Oudegracht 15:00-20:00 Alle shops op alfabetische volgorde (met tableview) en secties, Namen in de tabel verwijzen door naar de beschrijving. Opgeslagen in tabel Hoofdmenu Kaart Beschrijving 33

Locaties Oudegracht Openingstijden Andersom 9:00-23:00 Black&White 15:00-20:00 Voorstraat Bordeaux Rood 9:00-23:00 Wietstock Alleshops op volgorde van locatie(alfabetisch) met tableview en secties. Opgeslagen als tabel. Op de naam klikken om door te worden verwezen naar de uitgebreide beschrijving. Opgeslagen in een tabel. Makkelijk te overzien wat bij jou in de buurt is. Hoofdmenu Kaart Beschrijving 34

Openingstijden 9:00-11:00 Locatie Bordeux rood Voorstraat 11:00-15:00 Koffiedik Alle shops op openingstijd met tableview en secties. Opgeslagen in een tabel. Handig voor als je even snel iets wilt halen. Hoofdmenu Kaart Beschrijving 35

Kaart Beschrijving KAART Hoofdmenu Reset kaart Kaart met gps, en tabs, locaties aangegeven waarop geklikt kan worden om door te gaan naar de beschrijving van de shop. Reset kaart om weer alle coffeeshops te kunnen zien. Vanaf beschrijving naar kaart, zie je door middel van EventListener de locatie van de locatie van de toebehorende beschrijving. Hoofdmenu Reset kaart 36

Kaart Beschrijving Plaatje Bordeaux rood Bordeaux rood is gelegen midden in de stad en is daardoor goed toegankelijk voor iedereen die in de stad is. Met een uitgebreide kaart en wiet soorten die je niet in andere shops vindt, is dit een uitstekende coffeeshop met genoeg zitgelegenheid om je aankopen te proberen. Ook de goede prijzen en vriendelijk personeel maakt dit een uitstekende shop. Beschrijving van de shop met een plaatje, scrollview met aparte view voor elke shop(alfabetisch) met knop om naar kaart te gaan met annotatie voor alleen die shop Hoofdmenu 37

Welkom bij ZOEK! Utrecht Klik om verder te gaan Versie 1.0 Dit zijn labels. Dit is het beginscherm, een welkomsttekst, met de versie van de app, zodat de mensen weten of het up to date is. We hebben voor een ander achtergrondkleur en voorgrondkleur gekozen zodat de tekst goed leesbaar is. De tekst”versie 1.0” is minder belangrijk dus heeft het een minder opvallend kleur gekregen. 38

Wat zoekt u? Zoektab Extra info tab Kaart tab Maak een selectie uit de lijst hieronder Kroegen Opties Postkantoren Bovenin zie je 3 tabs, de 1ste om te selecteren wat je zoekt, je hebt 3 opties; kroegen, postkantoren of scholen. Die 3 opties zijn knoppen. Als je daarop klikt dan ga je naar de pagina met extra info die je in een tabelview ziet. Daar vlak boven zie je 2 labels en de eerste is groot en heeft een andere kleur, we wilden dat het opviel. “Maak een selectie” is wat kleiner, want het is duidelijk wat de bedoeling is. Je kan zien op welke tab je bent, doordat de achtergrondkleur van de tab verkleurt. Scholen 39

Gemiddelde prijslijst: Zoektab Extra info tab Kaart tab Kroegen Aantal: 192 Gem prijslijst: Bier: 2,10 euro Wijn: 2,20 euro Vodka: 3,40 euro Gemiddelde prijslijst: Bier: 2,10 Wijn: 2,65 Vodka: 4,15 Bovenin zie je 3 tabs, de 2e met extra info over wat je zoekt, je zit in het midden van het scherm een tabelview met de extra informatie van de geselecteerde optie. Wat je ook kan doen is op een van de rijen van de tabelview klikken. Dan ga je naar een ander scherm waar je een afbeelding krijgt te zien. Bij ons ontwerp hebben wij dit alleen bij de kroegen, door bij de verschillende dranken een afbeelding toe te voegen. Tequila: 3,60 Ga naar kaart 40

Gemiddeld biertje Klik om terug te keren Dit is het scherm waar je heen gaat als je bij de tabelview van kroegen klikt op bier. Je krijgt een afbeelding te zien en de tabs niet meer. Wel kun je klikken op het scherm om terug te keren naar kroegen. 41

Zoektab Extra info tab Kaart tab Hier ben je bij de 3e tab. Je krijgt de tabs nog wel te zien zodat je nog wel eventueel terug kan naar zoeken of extra info tab. De rest van de scherm hebben we de kaart gedaan, omdat telefoons meestal een klein schermpje hebben. 42

Eisen aan de app   De applicatie voor de Android-telefoon moet in ieder geval het volgende bevatten (de knoppen en labels spreken voor zich): minstens 1 tab- of menugroep minstens 1 TableView met extra gegevens per rij een kaart met verschillende locaties en annotaties (een applicatie kan maar 1 kaart bevatten) nette en leesbare code, voorzien van commentaar Extra's zijn: plaatjes en/of animaties zogenaamde 'zware windows' route (zie KitchenSink) secties een Dialog, Slider, WebView, Switch, TextArea of TextField

Minstens 1 tab- of menugroep var win = Ti.UI.createWindow({ backgroundColor: 'blue' });   win.open(); var tabgroep = Ti.UI.createTabGroup(); var tab1 = Ti.UI.createTab({ title: 'Tab1', window: win tabgroep.addTab(tab1);

Overzichtelijke code win0.open(); win0.add(label1); win0.add(label2); win1.add(kroegen); win1.add(postkantoren); win1.add(scholen); win2.add(label7); win3.add(label8); win4.add(label9); win1a.add(label5a); win1a.add(label6a); win1a.add(kroegena); win1a.add(postkantorena); win1a.add(scholena);

Minstens 1 TableView met extra gegevens per rij var data = [ { title: 'Rij 1' }, { title: 'Rij 2' } ]; var tabel = Ti.UI.createTableView ( {data: data} ); tabel.addEventListener('click', function(e){ if ( e.index == 1){ var temp = Ti.UI.createWindow({fullscreen:true}); temp.add(tabelP); temp.open(); } ); 

Extra: secties var sectie = Ti.UI.createTableViewSection({ headerTitle: ‘Belangrijke personen’, footerTitle: ‘Einde’ }); var rij1 = Ti.UI.createTableViewRow({title: ‘Obama’}); var rij2 = Ti.UI.createTableViewRow({title: ‘Clinton’}); sectie.add(rij1); sectie.add(rij2); data.push(sectie);

Een kaart met verschillende locaties en annotaties var boni = Titanium.Map.createAnnotation({ latitude: 52.082973, longitude: 5.136683, title: ‘Bonifatius College’, subtitle: ‘Burg. Fockema Andreaelaan 7’, pincolor: Titanium.Map.ANNOTATION_PURPLE, myid:1 });

De annotaties in de kaart var kaart = Ti.Map.createView({ mapType: Ti.Map.STANDARD_TYPE, region: { latitude: 52.088932, longitude: 5.115405, latitudeDelta: 0.1, longitudeDelta: 0.1 }, top: 75, left: 25, width: 250, height: 200, regionFit: true, annotations: [ boni ] });

Google Maps Sleutel Google vereist dat elke applicatie een eigen Map API-sleutel heeft. Anders kun je geen kaarten laten zien. Deze sleutel kun je gratis van Google krijgen. Om de sleutel te krijgen moet je een aantal stappen doorlopen. Houd in een document bij welke sleutel bij welke applicatie hoort, evenals de gegenereerde certificate hash (MD5). Dit proces bestaat uit de volgende vijf stappen: Verkrijg het MD5-hash van het certificaat Kopieer dit certificaat in het daarvoor geschikte veld op het Google formulier, kruis aan dat je het eens bent met de licentie en dien het formulier in Kopieer de Map API-sleutel in het document waarin je de sleutels bijhoudt bij de juiste applicatie Wijzig het tiapp.xml-bestand van jouw project en wijzig de eigenschap ti.android.google.map.api Verifieer of het gebruikte virtuele toestel (van de emulator) Google APIs system image gebruikt

Hoe doe je dat? dir /s dev_keystore keytool –list –keystore dev_keystore –alias tidev –storepass tirocks Vervolgens zie je de certificaat vingerafdruk (MD5). Kopieer het gedeelte achter de dubbele punt (de vingerafdruk) Ga naar de webpagina: code.google.com/intl/nl/android/maps-api-signup.html Nu gaan we een eigenschap toevoegen aan het bestand tiapp.xml: <property name=”ti.android.google.map.api.key”>SLEUTEL </property>

Plaatjes en/of animaties var afbeelding = Ti.UI.createImageView({ top: 100, left: 50, width: 200, height: 100, canScale: true, image: 'neushoorn.jpg' }); win.add(afbeelding); Om meer dan 1 plaatje te hebben moet je ze in een array zetten. Bij het toevoegen van het plaatje moet de juiste naam van de view worden vermeld (en niet de naam van de tab bijvoorbeeld) Noem je plaatje niet <mijnPlaatje.jpg> var images = []; images[0] = 'neushoorn.jpg'; images[1] = 'neushoorn2.jpg';

“Zwaar” window var locatieScherm = Ti.UI.createWindow({ backgroundColor: 'black', url: 'locatie.js' }); var tab4 = Ti.UI.createTab({ title: 'Tab4', window:locatieScherm tabgroep.addTab(tab4);

location.js var locatieScherm = Ti.UI.currentWindow; var locatieLabel = Ti.UI.createLabel({ color: 'white', bottom: 70, left: 40, width: 200, height: 'auto', text: 'Dit komt uit een ander bestand', }); locatieScherm.add(locatieLabel); in de module staat location.js: verschil wordt niet opgemerkt in bestand locatie.js wordt niet consequent verwezen naar het venster dat bovenin wordt genoemd.

De laatste extra’s Dialog Slider WebView Switch TextArea TextField

Café naam Café naam Café naam Café naam Café naam Hoofdmenu kaart kroegen Café naam Café naam Café naam Café naam Café naam Max afstand 10 km In dit scherm zijn alle café’s on een tabel verzameld, klik op een café om de gegevens te zien. We gaan ook een poging wagen ze op afstand te sorteren. De verschillende cafés linken naar hun eigen pagina 56

Implementatie

Zelfgemaakte switch

Verschil ontwerp - implementatie

Verschil ontwerp - implementatie

Conclusie Er zijn heel mooie dingen gemaakt, maar de toepassing van de lesbrief vereist veel inzicht in de voorbeelden Er is klassikale uitleg nodig om alle voorafgaande zaken te bespreken Leerlingen proberen niet voldoende of ze iets wel echt snappen

Problemen Algemeen probleem: leerlingen hebben te weinig programmeerervaring en kennis van JavaScript Technisch: installatieproblemen en snelheid van de computers Voor Android compileren is tergend langzaam en hetzelfde geldt voor de emulator

Oplossingen Gebruik maken van Apple computers is helaas niet weggelegd voor de meeste v.o. scholen maakt het ook mogelijk om voor de iPhone/iPad te ontwikkelen: aantrekkelijker en uitgebreider UI Meer aandacht besteden aan de voorbeelden Het project meer stapsgewijs laten uitvoeren Een simpeler opdracht laten programmeren, misschien zelfs zonder kaart

Vragen en discussie

Contact Mark Aalderink markaalderink@worldwiselearning.org LinkedIn-groep: Appcelerator Titanium Ontwikkelaars Bezig met het opzetten van een Nederlandse gebruikersgroep (samen met Willem Peters) Blog, bijna online: www.worldwiselearning.org/titanslair