Mens-machine interactie in de praktijk

Presentatie over: "Mens-machine interactie in de praktijk"— Transcript van de presentatie:

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

2 Over ons Marijke Loots Mark Aalderink docent Informatica VO
Anglist Mark Aalderink historicus (wijsbegeerte) en softwareontwikkelaar eigenaar WorldWise Learning worldwiselearning.org

3 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

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

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 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 Een enkel window of stapel van windows
Tabgroep met veel windows Windows hebben views

19 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

20 Voorbeeld waarschuwingsvenster/knop

21 Voorbeeld tabeloverzicht

22 Voorbeeld kaart 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

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

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

26 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

27 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

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

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

33 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

34 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

35 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

36 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

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

38 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

39 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

40 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

41 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

42 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

43 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

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);
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: , longitude: , 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: , longitude: , 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-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

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

52 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';

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

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

55 De laatste extra’s Dialog Slider WebView Switch TextArea TextField

56 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

57 Implementatie

58 Zelfgemaakte switch

59 Verschil ontwerp - implementatie

60 Verschil ontwerp - implementatie

61 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

62 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

63 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

64 Vragen en discussie

65 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: