De presentatie wordt gedownload. Even geduld aub

De presentatie wordt gedownload. Even geduld aub

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

Verwante presentaties


Presentatie over: "Mens-machine interactie in de praktijk Ontwikkeling van mobile apps in VWO 6."— Transcript van de presentatie:

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

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

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

6 Mobiele platformen 6

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 7

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

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 9

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

11 Titanium 11 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 12

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 13

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 14

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

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 16

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

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

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) 19 3

20 Voorbeeld waarschuwingsvenster/knop 20

21 Voorbeeld tabeloverzicht 21

22 Voorbeeld kaart en annotatie 22

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 23

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

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

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 26

27 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

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

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 weekactiviteit 43oefenen met de algemene API 44oefenen met de Maps API 45ontwerp maken en inleveren 46werken aan implementatie 47inleveren PO

32 Inside Utrecht Naam Openings tijden Locatie KaartBeschrijving Welkom bij Inside Utrecht, dé handigste en overzichtelijkste applicatie om de beste coffeeshop in jouw buurt te vinden. Sorteren op:

33 Alfabetische namen ALocatie Openingstijd AndersomOudegracht9:00-23:00 B Black&White Oudegracht15:00-20:00 HoofdmenuKaartBeschrijving

34 Locaties BeschrijvingKaartHoofdmenu OudegrachtOpeningstijden Andersom9:00-23:00 Black&White15:00-20:00 Voorstraat Bordeaux Rood9:00-23:00 Wietstock9:00-23:00

35 Openingstijden 9:00-11:00Locatie Bordeux roodVoorstraat 11:00-15:00 Bordeux roodVoorstraat Koffiedik HoofdmenuKaartBeschrijving

36 Hoofdmenu KaartBeschrijving KAART Reset kaart

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

38 Welkom bij ZOEK! Utrecht Klik om verder te gaan Versie 1.0

39 Wat zoekt u? Maak een selectie uit de lijst hieronder Opties ZoektabExtra info tabKaart tab Kroegen Postkantoren Scholen

40 ZoektabExtra info tabKaart tab 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 Kroegen Ga naar kaart

41 Gemiddeld biertje Klik om terug te keren

42 ZoektabExtra info tabKaart tab

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

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: 1.Verkrijg het MD5-hash van het certificaat 2.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 3.Kopieer de Map API-sleutel in het document waarin je de sleutels bijhoudt bij de juiste applicatie 4.Wijzig het tiapp.xml-bestand van jouw project en wijzig de eigenschap ti.android.google.map.api 5.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: SLEUTEL

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

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

56 Café naam Hoofdmenu kaartkroegen 10 km Café naam Max afstand Café naam

57 Implementatie

58 Zelfgemaakte switch

59 Verschil ontwerp - implementatie

60

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 – – LinkedIn-groep: Appcelerator Titanium Ontwikkelaars – Bezig met het opzetten van een Nederlandse gebruikersgroep (samen met Willem Peters) – Blog, bijna online:


Download ppt "Mens-machine interactie in de praktijk Ontwikkeling van mobile apps in VWO 6."

Verwante presentaties


Ads door Google