Mens-machine interactie in de praktijk

1. Mens-machine interactie in de praktijk Ontwikkeling van mobile appsin VWO 6

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

3. Agenda • Apps en ontwikkelenvoor smartphones • OntwikkelenvooriPhone/Android met Titanium (van Appcelerator) • Mogelijkheden en gebruik van Titanium • Achtergrond van het pilotprojectin VWO 6 • Verloop van het project • Problemen en oplossingen • Vragen en discussie

4. 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

5. Ontwikkelen van apps

6. Mobiele platformen

7. 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

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

9. Web-apps en native apps • Om meerderemobielesystementebedienen • Mobiele browsers wordenkrachtiger (WebKit/HTML5) • Belangrijkebeperkingen • Native apps hebbenmeermogelijkhedendan web-apps • Native apps zijnsneller, responsiever en lopennatuurlijker op toestellen

10. 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

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

12. 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

13. 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

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

15. 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.

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

17. 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)

18. Doorsnee app • Eenenkelwindow of stapel van windows • Tabgroep met veel windows • Windowshebbenviews

19. Windows en contexten • Windows zijn containers op het hoogsteniveauvoor Titanium applicaties • Applicatiesbestaanmeestaluitéénwindow of meerdere windows ineentabgroep • Windows startenvaaknieuweexecutiecontexten • Executiecontext==eenuniekeJavaScript symbool-ruimte • Zulkewindowszijn “zware” windows • Je kuntook “lichte” windowsmaken (voorapps die in eenenkeleexecutiecontextdraaien) 3

20. Voorbeeldwaarschuwingsvenster/knop

21. Voorbeeldtabeloverzicht

22. Voorbeeldkaart en annotatie

23. 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

24. Demo: Kitchen Sink • Voorbeeldcode • Living Reference Document • Volledigedemonstratie van alle API’s

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

26. Het pilotproject • Achtergrond • Onderwijssetting:VWO 6-klas • Regulierecursus van 5 weken met 3 contacturen • Mens-machine interactie: gebruikersinterfaceontwerpen • Indelingcursus • Lesbriefbestuderen met instructie, voorbeelden en korteopdrachten • Werkenaaneeneigen app in groepjes van twee

27. Beperkingen • Windowscomputers • Zowel op school alsthuis (met uitzonderingen) • DaardoornietmogelijkomiPhone apps tebouwen • Snelheid van de computers • Kennisprogrammeren: • JavaScript en basalekennis van Java

28. 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.

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

30. 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

31. 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 Planning

32. 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 Kaart Beschrijving

33. Alfabetische namen Hoofdmenu Kaart Beschrijving

34. Locaties Hoofdmenu Kaart Beschrijving

35. Openingstijden Hoofdmenu Kaart Beschrijving

36. Kaart Beschrijving KAART Hoofdmenu Reset kaart

37. 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. Hoofdmenu

38. Welkom bij ZOEK!UtrechtKlik om verder te gaan Versie 1.0

39. Zoektab Extra info tab Kaart tab Wat zoekt u? Maak een selectie uit de lijst hieronder Kroegen Opties Postkantoren Scholen

40. 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 Tequila: 3,60 Ga naar kaart

41. Gemiddeld biertje Klik om terug te keren

42. Zoektab Extra info tab Kaart tab

43. Eisen aan de app De applicatie voor deAndroid-telefoonmoet 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

44. 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);

45. Overzichtelijke code win0.open(); win0.add(label1); win0.add(label2); win0.add(label3); win0.add(label4); win1.add(label5); win1.add(label6); 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);

46. 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(); } } ); 

47. 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);

48. 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 });

49. 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 ] });

50. Google Maps Sleutel Google vereist dat elke applicatie een eigen Map API-sleutelheeft. 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 certificatehash (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-sleutelin het document waarin je de sleutels bijhoudt bij de juiste applicatie • Wijzig het tiapp.xml-bestandvan 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