Institute of Information Systems and Computer Media (IICM)
1
Michael Spitzer Graz, 2015/01/22 Teamsketch
Teamsketch
Master’s Thesis Presentation
Michael Spitzer
Institute of Information Systems and Computer Media (IICM)
2
Michael Spitzer Graz, 2015/01/22 Teamsketch
Overview
• Introduction • Motivation
• Research goal
• Project environment
• iPad App
• Web Service
• Web Interface for students and teachers
• Field study at a primary school
• Conclusion
Institute of Information Systems and Computer Media (IICM)
3
Michael Spitzer Graz, 2015/01/22 Teamsketch
Introduction
Teamsketch • Sketch app for iPad
• 2-4 drawers
• One sketch together simultaneously
Institute of Information Systems and Computer Media (IICM)
4
Michael Spitzer Graz, 2015/01/22 Teamsketch
Motivation
• Train collaboration • Develop and improve team skills
Collaboration: “A group of people tries to learn something together” [Dillenbourg, 1999]
Teamwork
Institute of Information Systems and Computer Media (IICM)
5
Michael Spitzer Graz, 2015/01/22 Teamsketch
Research goal
• Prototype drawing app for iPad
• One real-time sketch, 2-4 drawers simultaneously
• Observation of collaborative learning capabilities
• Field test at a primary school
Institute of Information Systems and Computer Media (IICM)
6
Michael Spitzer Graz, 2015/01/22 Teamsketch
Project environment
User management SOAP
Teamsketch SOAP
Institute of Information Systems and Computer Media (IICM)
7
Michael Spitzer Graz, 2015/01/22 Teamsketch
iPad app
Requirements: • No WiFi infrastructure necessary • No server - multi peer infrastructure • Bluetooth support • Real-time sketch update • Line smoothing, curve fitting algorithms • 2-4 drawers simultaneously • User management (optional) • Sketch up- and download (optional)
Institute of Information Systems and Computer Media (IICM)
8
Michael Spitzer Graz, 2015/01/22 Teamsketch
Frameworks
Environment: xCode 6 / Swift
Frameworks: • Foundation Framework (HTTP connections, XML
parser, …)
• Multipeer Connectivity Framework (Network communication)
• UIKit / Core Graphics (Graphic related APIs)
Institute of Information Systems and Computer Media (IICM)
9
Michael Spitzer Graz, 2015/01/22 Teamsketch
Architecture
Main screen Login
Join sketch New sketch
Browser
Drawing
Store sketch Abort sketch
Institute of Information Systems and Computer Media (IICM)
10
Michael Spitzer Graz, 2015/01/22 Teamsketch
Architecture – user management
Main screen Login
Join sketch New sketch
Browser
Drawing
Store sketch Abort sketch
Institute of Information Systems and Computer Media (IICM)
11
Michael Spitzer Graz, 2015/01/22 Teamsketch
Architecture – multi peer connection
Main screen Login
Join sketch New sketch
Browser
Drawing
Store sketch Abort sketch
Institute of Information Systems and Computer Media (IICM)
12
Michael Spitzer Graz, 2015/01/22 Teamsketch
Multi peer connection
Advertiser • Wants to join a
session
• Accepts/declines invitations
Browser • Browses all nearby
advertising devices
• Invites to session
Institute of Information Systems and Computer Media (IICM)
13
Michael Spitzer Graz, 2015/01/22 Teamsketch
Architecture – sketch screen
Main screen Login
Join sketch New sketch
Browser
Drawing
Store sketch Abort sketch
Institute of Information Systems and Computer Media (IICM)
14
Michael Spitzer Graz, 2015/01/22 Teamsketch
Sketch screen
• 12 colors
• 2 stroke widths
• Zoom (2x)
• Line guides
Institute of Information Systems and Computer Media (IICM)
15
Michael Spitzer Graz, 2015/01/22 Teamsketch
Drawing Algorithms
Shown on the blackboard
Shapes: • One touch circle (touchesBegan – touchesEnded)
• Stroke (touchesBegan – touchesMoved – touchesEnded) • Bezier Segment – cubic Bezier curve
Institute of Information Systems and Computer Media (IICM)
16
Michael Spitzer Graz, 2015/01/22 Teamsketch
Video demonstration
Institute of Information Systems and Computer Media (IICM)
17
Michael Spitzer Graz, 2015/01/22 Teamsketch
Web service
Requirements: • Authentication against already existent user
management
• Students - Sketch up- and download • 1 profile picture (2 resolutions) • 3 sketches (2 resolutions)
• Teacher – Sketch access (students in class)
Institute of Information Systems and Computer Media (IICM)
18
Michael Spitzer Graz, 2015/01/22 Teamsketch
Frameworks / architecture
• LAMP
• PHP with SOAP extension
• WSDL
Institute of Information Systems and Computer Media (IICM)
19
Michael Spitzer Graz, 2015/01/22 Teamsketch
Web interface
• PHP • SOAP client with WSDL
• HTML
• Smarty template engine (PHP) • presentation layer • Compiled (cache) • Open source
Institute of Information Systems and Computer Media (IICM)
20
Michael Spitzer Graz, 2015/01/22 Teamsketch
Web interface • Profile picture
(thumbnail)
• Sketches
• Thumbnail • High resolution
download
Institute of Information Systems and Computer Media (IICM)
21
Michael Spitzer Graz, 2015/01/22 Teamsketch
Field test
Primary school – 3rd grade Test setting:
• Teams with 2,3 or 4, members selected by the teacher
• All team members at one big desk (face-to-face communication) • Heterogenic device network (iPad 2,3,4 and iPad Air)
Institute of Information Systems and Computer Media (IICM)
22
Michael Spitzer Graz, 2015/01/22 Teamsketch
Test setting
x
x
Institute of Information Systems and Computer Media (IICM)
23
Michael Spitzer Graz, 2015/01/22 Teamsketch
Test procedure
• Short introduction
• Group of four è two groups of two
• Sketch topic
• Drawing
• Groups of two merged to group of four
• Sketch topic
• Drawing
• Reflection
Institute of Information Systems and Computer Media (IICM)
24
Michael Spitzer Graz, 2015/01/22 Teamsketch
Field test evaluation
Video: Sketch video (groups of 2,3) Macbook joined active session è video recording
Images: Screenshots of the finished sketches
Audio: Transcription of children’s discussions while drawing
Children’s and teacher’s feedback: Questionnaire
Institute of Information Systems and Computer Media (IICM)
25
Michael Spitzer Graz, 2015/01/22 Teamsketch
Sketch examples
Institute of Information Systems and Computer Media (IICM)
26
Michael Spitzer Graz, 2015/01/22 Teamsketch
Field test - lessons learned
• Collaboration • Some children did not like drawing together • Felt pen switching process was not intuitive • Felt pen color change too sensitive • White felt pen VS rubber • Zoom function was not used • Clear sketch issue
Institute of Information Systems and Computer Media (IICM)
27
Michael Spitzer Graz, 2015/01/22 Teamsketch
Conclusion - challenges
• App programming with new language (beta) • Literature
• Experience
• Performance
• Time critical multi-threading programming with heterogenic device support (iPad 3)
• Programming for outdated infrastructures
• Interface app çè web service
• User interface for children
Institute of Information Systems and Computer Media (IICM)
28
Michael Spitzer Graz, 2015/01/22 Teamsketch
Conclusion – Summary
þ Collaborative iPad sketch app for 2-4 players with real-time screen updates
þ No network infrastructure needed
þ Collaborative learning, team work capabilities confirmed during field test
Institute of Information Systems and Computer Media (IICM)
29
Michael Spitzer Graz, 2015/01/22 Teamsketch
Conclusion - what’s next ?
• Improvement of the app (feedback from field test)
• Presentation at the EdMedia 2015 - World Conference on Educational Media and Technology in Montréal, Québec, Canada (June 2015)
• Development of a commercial collaborative sketch
application aimed at designers.
Institute of Information Systems and Computer Media (IICM)
30
Michael Spitzer Graz, 2015/01/22 Teamsketch
End
Thank you!
References Dillenbourg, Pierre (1999). Collaborative learning: cognitive and computational approaches. 2nd Revised Edition. Emerald Group Publishing Limited.
Top Related