Mens-machine interactie in de praktijk

Ontwikkeling van mobile apps in VWO 6

2

Over ons

Marijke Loots • docent Informatica VO• Anglist• meloots@gmail.com

Mark Aalderink • historicus (wijsbegeerte) en softwareontwikkelaar

• eigenaar WorldWise Learning

• www.worldwiselearning.orgwww.wwmm.nl

• markaalderink@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

Ontwikkelen van apps

5

Mobiele platformen

6

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

7

Oplossingen

• Ontwikkelen van web-apps: HTML5/CSS• Native apps: gebruik maken van

platformonafhankelijke ontwikkeltools– Alternatieven: Corona, PhoneGap

8

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

9

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

10

Titanium

11

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

12

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

13

Titanium Developer

• Gebruik je om Titanium apps te beheren en te draaien

• Hiermee maak je het eindpakket voor distributie aan

• Testen op een toestel

14

Titanium Functies

15

Native gebruikersinterface

Location-based services

Data

Social APIs

Multimedia

Open Source en uitbreidbaar

Integrated Analytics

Ontwikkeltools

Echte native tabellen, tabs, sliders,en views

Kaarten, kompas en gps

Lokale SQL database, applicatie-properties, XHR (Ajax)

Facebook, Twitter en YQL

Camera, video camera, streaming/locaal audio

Je kunt Titanium uitbreiden met eigen modules m.b.v. native SDK’s

Ingebakken analytics API’s om resultaten en gedrag te meten

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

16

Titanium: de basics

17

• 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

18

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)

193

Voorbeeldwaarschuwingsvenster/knop

20

Voorbeeldtabeloverzicht

21

Voorbeeldkaart en annotatie

22

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

23

Demo: Kitchen Sink• Voorbeeldcode• Living Reference

Document• Volledige demonstratie

van alle API’s

24

Boek• Verschijnt bij

Sdu/Academic Service tweede helft april 2011

• Titanium• Website:

www.worldwiselearning/boek

• Bij voldoende interesse: opdrachten bij het boek (voor onderwijs)

25

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

twee26

Beperkingen• Windowscomputers

– 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

27

De lesbriefOnderdelen

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

28

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

Naam Openings tijden Locatie

Kaart Beschrijving

Welkom bij Inside Utrecht, dé handigste en overzichtelijkste

applicatie om de beste coffeeshop in jouw buurt te vinden.

Sorteren op:

Alfabetische namen

A Locatie Openingstijd

Andersom Oudegracht 9:00-23:00

B

Black&White Oudegracht 15:00-20:00

Hoofdmenu Kaart Beschrijving

Locaties

BeschrijvingKaartHoofdmenu

Oudegracht Openingstijden

Andersom 9:00-23:00

Black&White 15:00-20:00

Voorstraat

Bordeaux Rood 9:00-23:00

Wietstock 9:00-23:00

Openingstijden

9:00-11:00 Locatie

Bordeux rood Voorstraat

11:00-15:00

Bordeux rood Voorstraat

Koffiedik

Hoofdmenu Kaart Beschrijving

Hoofdmenu

Kaart Beschrijving

KAART

Reset kaart

Kaart Beschrijving

Plaatje

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

Bordeaux rood

Welkom bij ZOEK!Utrecht

Klik om verder te gaan

Versie 1.0

Wat zoekt u?

Maak een selectie uit de lijst hieronder

Opties

Zoektab Extra info tab Kaart tab

Kroegen

Postkantoren

Scholen

Zoektab Extra info tab Kaart tab

Aantal: 192

Gem prijslijst:Bier: 2,10 euroWijn: 2,20 euro

Vodka: 3,40 euro

Gemiddelde prijslijst:

Bier: 2,10

Wijn: 2,65

Vodka: 4,15

Tequila: 3,60

Kroegen

Ga naar kaart

Gemiddeld biertje Klik om terug te keren

Zoektab Extra info tab Kaart tab

Eisen aan de app De applicatie voor de Android-telefoon moet in ieder geval het volgendebevatten (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 menugroepvar 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 codewin0.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);

Minstens 1 TableView met extra gegevens per rij

tabel.addEventListener('click', function(e){ if ( e.index == 1){

var temp = Ti.UI.createWindow({fullscreen:true});temp.add(tabelP);temp.open();

}}

); 

var data = [ { title: 'Rij 1' }, { title: 'Rij 2' } ];

var tabel = Ti.UI.createTableView ( {data: data} );

Extra: sectiesvar 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 kaartvar 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 SleutelGoogle 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 animatiesvar afbeelding = Ti.UI.createImageView({

top: 100,

left: 50,

width: 200,

height: 100,

canScale: true,

image: 'neushoorn.jpg'

});

win.add(afbeelding);

var images = [];

images[0] = 'neushoorn.jpg';

images[1] = 'neushoorn2.jpg';

“Zwaar” windowvar locatieScherm = Ti.UI.createWindow({

backgroundColor: 'black',

url: 'locatie.js'

});

var tab4 = Ti.UI.createTab({

title: 'Tab4',

window:locatieScherm

});

tabgroep.addTab(tab4);

location.jsvar 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);

De laatste extra’s

• Dialog• Slider• WebView• Switch • TextArea • TextField

Café naam

Hoofdmenu kaart kroegen

10 km

Café naam

Max afstand

Café naam

Café naam

Café naam

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