TINK - sketching product experiences of connected objects

88 - TINK
5.3 Prototyping the user interface
A second prototype was developed with the
intention of running a user test to evaluate
the user experience of TINK.
The development of a fully functional
prototype of the entire system goes beyond
the scope of the project because it would
require months of development.
Instead this partial prototype focused just
on the implementation of the edit view,
and to left out the monitor view.
Time constraints also made it impossible
to integrate the work done for the first
technology test in the second prototype.
The prototype was therefore not functional,
as it was unable to connect to physical
“connected objects“ (Arduino YUN).
What was functional on this prototype were
the main elements of the interface (the
edit view to sketch and edit the system
diagram) as well as the back-end used to
save users information and save projects.
The developed prototype will therefore be
able to:
• Create a new project
• Access the system diagram editor
• Add entities to the diagram
• Add building blocks to the entities
• Connect building blocks with each
other.
The prototype developed won’t allow to:
• Share the project
• Access the map view and visualize the
data
• Edit the code
• Use the different types of building
block connectors
• Upload a custom picture for the
entities
• Clone entities
• Deploy the software
• Get real time feedback
• Access the building block library
The prototype was built on top of the stack
of JavaScript technology shown in Figure
38.
The front-end was implemented using
AngularJs, a framework that facilitates the
development of dynamic web applications.
Since in modern browsers it is possible to
include SVG tags into web pages, it was
decided to use the vector markup language
to code the system diagram. This was
mainly adopted to solve the problem of
drawing arrows to connect one building
block to another and be able to arrange
elements freely in the page.
The back-end, with the role of storing data,
was built on top of SailsJs, a web framework
aimed at the development of real-time web
application. SailsJs is able to automatically
generate the required API to interact with
several types of databases. Moreover it