Social collaboration platform (1st version) - Pop machina
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
This project has received funding from
the European Union’s Horizon 2020
Research and Innovation Programme
under grant agreement No 821479
Social
collaboration platform
(1st version)
Deliverable 4.1
Sofia Terzi, Athanasios Kapsalis,
Salim Gannoum, Konstantinos Votis
January 2021
http://www.pop-machina.eu
a
Abstract
The present document is a deliverable of the Pop-Machina project, funded by the European Commission’s
under the Horizon 2020 Innovation programme (H2020), reporting the results of the activities carried out by
WP4. Pop-Machina aims to develop an ecosystem to increase networking and network experience among
the makers’ community members, to share and adopt best practices and a more holistic, culturally
expansive, and community-centric role for makerspaces. The aim is to support collaborative production
through shared physical manufacturing infrastructure and network. More specifically the developments of
Pop-Machina will be demonstrated across seven (7) cities in terms of circular maker ecosystem with a
bottom up engagement, urban planning innovation, and social industry 4.0 technologies.
The D4.1 deliverable is a demonstrator software and this accompanying report provides information around
the technologies that were used to implement the first version of the Social Collaboration Platform (SCP)
and the technologies that connect and integrate the rest of the platform’s subcomponents with it. D4.1 is
the main deliverable for the Pop-Machina’s SCP and D4.3, D4.5, D4.7, D4.9 are complimentary to it. The
reader of this document will be able to understand the concepts behind developing the SCP, the overall
architecture of the Pop-Machina ecosystem and how the communication and integration among them
has been accomplished to provide the circular economy stakeholders with a robust innovative solution to
cover all their needs.
This report constitutes Deliverable 4.1, for Work Package 4 of the Pop-Machina project.
January 2021
© 2021 – Pop-Machina, Collaborative production for the circular economy; a community approach, –
project number 821479.
General contact: pop-machina@kuleuven.be
p.a. Pop-Machina
HIVA - Research Institute for Work and Society
Parkstraat 47 box 5300, 3000 LEUVEN, Belgium
For more information sterzi@iti.gr
Please refer to this publication as follows:
Terzi S., Kapsalis A., Gannoum S., Votis K. (2021). Social collaboration platform (1st Version). Deliverable
(4.1). Leuven: Pop-Machina project 821479 – H2020.
Information may be quoted provided the source is stated accurately and clearly.
This publication is also available via http://www.pop-machina.eu
This publication is part of the Pop-Machina project, this project has received funding from the European
Union’s Horizon 2020 research and innovation programme under Grant Agreement No 821479.
The information and views set out in this paper are those of the author(s) and do not necessarily reflect
the official opinion of the European Union. Neither the European Union institutions and bodies nor any
person acting on their behalf may be held responsible for the use which may be made of the information
contained therein.
VERSION CONTROL SHEET
Deliverable number + title 4.1 Social Collaboration Platform (1st Version)
Prepared by Sofia Terzi
19 – CERTH
sterzi@iti.gr
Work package number 4
Work package leader CERTH
Dissemination level (PU, CO) PU
Delivery date 18/01/2021
Submission date to EC 29/01/2021(pending EC acceptance)
Main authors Sofia Terzi, Athanasios Kapsalis, Salim Gannoum, Konstantinos Votis
Reviewers Pablo Sotres, Luis Sanchez, JR Santana
REVISION HISTORY
Version Date Summary of changes Initials Changes marked
1 07/12/2020 General descriptions ST,KV No
2 14/12/2020 Technical descriptions ST, AK, SG No
3 21/12/2020 First draft ST No
4 11/1/2021 Data models ST,AK, SG No
5 14/1/2021 Mockups ST, AK, SG No
6 15/1/2021 Final version for internal review ST No
7 26/1/2021 Revision after review ST No
Table of contents
List of abbreviations 6
List of figures 7
List of tables 8
1. Introduction 9
1.1 Deliverable purpose and scope 10
1.2 Deliverable context 10
1.3 Deliverable dependencies 10
2. Architectural overview of components 11
3. Functionalities 12
3.1 User requirements analysis 12
3.2 Approach and Used Technologies 13
3.2.1 RESTful web API 13
3.2.2 Node.js 14
3.2.3 Matomo 14
3.2.4 Angular 14
3.2.5 Spring Boot 15
3.2.6 Blockchain as a Service (BaaS) 15
3.2.7 EOS.io 15
3.2.8 Stellar 15
3.2.9 Security 15
3.2.10 Privacy 16
3.2.11 Docker 16
3.2.12 Keycloak 16
3.2.13 Presentation side web technologies 16
3.3 Implementation 17
3.3.1 Client 17
3.3.2 Server 20
3.3.3 Communication 23
3.3.4 Data Model 24
4. Functional mockups and use case scenarios 26
4.1 Users 26
4.1.1 Register 26
4.1.2 Login 26
4.1.3 Chat and notification 27
4.1.4 User profile 28
4.2 Communities 29
4.3 Makerspaces 30
4.4 Projects 31
4.4.1 Project about page 31
4.4.2 Create project 32
4.4.3 Project Dashboard 32
4.4.4 Project transformations 33
4.4.5 Project makers 35
4.4.6 Project processes 36
4.4.7 Project materials 36
4.5 Marketplace 38
4.6 Maps 41
5. KPIs addressed by Task 4.1 42
4
6. Conclusions 43
7. Appendix A 44
7.1 Login 44
7.2 General 45
7.3 Profile 46
7.4 Projects 51
7.5 Project comments 53
7.6 Posts 59
7.7 Chat 64
7.8 Communities 67
7.9 Settings 74
5
List of abbreviations
Abbreviation Definition
API Application Programming Interface
ES ElasticSearch
HTTP Hypertext Transfer Protocol
HTTPS Hypertext Transfer Protocol Secure
JSON JavaScript Object Notation
JWT JSON Web Token
MKP Marketplace
OKT Open Knowledge Tool
RAM Random-access memory
RESTful Representational State Transfer
SDK Software Development Kit
SCP Social Collaboration Platform
SSL Secure Socket Layer
TLS Transport Layer Security
UI User Interface
URL Uniform Resource Locator
URI Uniform Resource Identifiers
XLM Lumens
6
List of figures
Figure 1 Architecture of the Pop-Machina ecosystem 11
Figure 2 SCP database schema 25
Figure 3 SCP registration form 26
Figure 4 SCP login form 27
Figure 5 SCP chat page 27
Figure 6 SCP user profile page 28
Figure 7 Community main page 29
Figure 8 Makerspace main page 30
Figure 9 Project transformations dashboard 33
Figure 10 Project transformations timeline 34
Figure 11 Project new transformation form 34
Figure 12 Project members page 35
Figure 13 Project processes page 36
Figure 14 Project materials page 37
Figure 15 Project new material requirement form 37
Figure 16 Marketplace main page 38
Figure 17 Marketplace my orders page 40
Figure 18 Interactive maps 41
7
List of tables
Table 1 Requirements analysis 12
Table 2 Angular HTTP client 18
Table 3 Keycloak client configuration 18
Table 4 Translation English 19
Table 5 Translation Greek 19
Table 6 Socket.IO client 19
Table 7 Express server 20
Table 8 JWT Token Payload 21
Table 9 Sequelize configuration 21
Table 10 Sequelize model 22
Table 11 Sequelize getter 22
Table 12 Socket.IO server 23
8
1. Introduction
The Pop-Machina’s project WP4 aim is to create the collaborative production tools that will support
the work of all participating makers either on their own or organized as a community. Specifically,
Task 4.1 is the actual implementation of the Social Collaborative Platform (SCP) based on Factory
of the Future (FoF) techniques, which reside on the concepts of research and innovation to develop
the appropriate ICT-tools for the makers. The Pop-Machina’s SCP is a custom application that is
built around needs the makers’ communities actually have and have been described in the DOA,
combined with other classic features of any SCP such as chat capability, personal profiles, private
messaging, posts, replies, etc. This combination of features and attributes introduces the makers to
digital collaboration methods to empower them to identify opportunities and apply innovative solu-
tions. Additionally, by utilizing the ICT-tools citizens interested into joining such movements (as the
makers’ communities) are enabled to participate as makers and producers. Capabilities that were not
previously available, such as a virtual management of a working progress for building a pipeline of
actions and steps in order to produce a circular product, have been developed. Any maker can create
a project and produce a product which can be a single part or a multi-part asset. In the process, they
can add multiple steps with different transformations such as repairs and various services and mate-
rials that are either owned by the makers themselves or are bought through the marketplace (MKP).
The MKP is a subcomponent of the SCP ecosystem where the makers can add their products and
services and sell them to other makers or just consumers. For this buying and selling process, the
SCP has been enhanced with tokenization capabilities to enable a circular economy among the stake-
holders. A special token called POP has been crafted with blockchain (BC) technologies to support
the transactions and ensure the transparency and trustworthiness of the system. Every user of the
SCP earns and pays with this custom token supporting the Pop-Machina’s circular economy. Exam-
ples of activities rewarding users with tokens are registering in the platform, creating products, watch-
ing or producing training videos, providing services, selling materials, and in general participating in
the various activities supported by the Pop-Machina ecosystem that are integrated and unified under
the SCP umbrella.
In parallel, this tool provides to already functional makerspaces their own digital place, as well as
to new ones about to become ready in 2021 and open their gates to provide the necessary equipment
to the makers with the objective the help them to better reach their target communities. Therefore,
they can present their activities, the events they will hold and the workshops they will run, as well as
to digitally represent their equipment in order to provide booking capabilities to the interested makers
and manage them. For the first time, a SCP that unites the makers, the makerspaces, the communities,
the stakeholders in general with the consumers and a central marketplace is becoming a reality. The
makerspaces will be able to reach larger audiences; the makers, even if they are amateur or just hob-
byists, will have a way to collaborate with other makers and reach consumers; the communities will
have the means to come together and participate in projects, produce ideas, join forces with other
communities and more. The project of every maker is becoming the central point in the SCP for
producing circular products, certifying these products and the place to promote collaboration with
others. By combining in a single interface the features to find makerspaces and makers nearby, to
show information about them with different maps, to book their equipment and to promote their
work together with matchmaking capabilities, new opportunities for this makers’ network are opened.
9
The makers and makerspaces are able as stated in the Descriptions of Action (DOA) to.
- create their profiles including their knowledge, assets, preferences and token wallets;
- post their ideas and/or projects looking for other participants interested to contribute to a project;
- find participants with similar interests and preferences through a match-making engine;
- create collaboration spaces (private/open) and exchange views and assets to realize a project or an
idea;
- interconnect with and post designs to distributed hardware (e.g. 3D printers, CNC machinery, etc.);
- access the project’s online inventory of circular maker solutions (projects, good practices, etc.);
- get suggestions on contacting relevant instructors for on-the-job training sessions;
- showcase their products and services in a gallery of successful projects.
1.1 Deliverable purpose and scope
The DoA states the following for the deliverable:
This deliverable consists of the implemented set of services required for social collaboration.
The purpose of this document is to describe the SCP platform, the functionality it provides and
the technologies used to support this functionality. It also includes the messaging interfaces with all
the other SCP subcomponents and the mock-ups to showcase the actual implementation.
The result of the SCP is the ICT tools we developed to support the needs of makers, their commu-
nities, the makerspaces and the consumers. D4.1 describes the technical aspects of that.
1.2 Deliverable context
The primary preceding document is the DOA. This deliverable has no primary dependent documents
but it is extended by D4.3, D4.5, D4.7, D4.9, by providing special information for the other Pop-
Machina components that are supplemental to the SCP and complete the ecosystem.
1.3 Deliverable dependencies
This is the first document in a series of deliverables for Task 4.1. This document (D4.1) is about to
be delivered in Month 20 of the project and the second one in the series (D4.2) is going to be
delivered in Month 38 which will be the most complete variant.
102. Architectural overview of components
The Pop-Machina Platform is an ecosystem of platforms and technologies which produce the final
result. The following Figure 1 shows an architectural overview of SCP platform. The main compo-
nents of the platform are UI, API server, blockchain and stellar servers and Matomo server for ana-
lytics. The user interacts with the SCP platform through the UI component, which is responsible for
organizing and presenting all the information of the aforementioned servers. The API server is the
main access point of the SCP database and provides a set of endpoints for other Pop-Machina com-
ponents. The SCP components interact with Restful APIs and websockets using JSON data format.
All the used databases are MySQL, with the exception of blockchain, which uses mongoDB. For ease
of management, all components run as application containers.
Figure 1 Architecture of the Pop-Machina ecosystem
113. Functionalities
3.1 User requirements analysis
Pop-Machina user requirements are declared in D2.5,1 including those of SCP platform. The follow-
ing table indicates how SCP’s requirements are addressed by SCP functionalities.
Table 1 Requirements analysis
D2.5 User requirements SCP functionalities
Define stakeholders Stakeholders are represented either by commu-
Define stakeholders' categories nities or makerspaces. Everyone registers as a
user. They can have different roles in
Define stakeholders' categories' roles communities and makerspaces. City is
Stakeholders must be associated with their city mandatory
Makerspaces must be defined per city Users can create a makerspace. Creator-
administrator of makerspace can edit the
Foundation date of makerspaces must be given
makerspace and give administrative roles to
other users. Administrative roles can edit
information. City and foundation are
mandatory fields in the creation form
Push makerspaces, stakeholders and Table with available makerspaces stakeholders.
stakeholder categories to DCAT Export will be addressed in next version
Workspaces must be defined per makerspace Administrators of a makerspace can add/edit
and be associated with specific tasks workspaces. Content is available for viewing to
anyone
Search for available workspace List of workspaces and searching is integrated
Book a workspace/makerspace User can book a workstation depending on the
availability. Calendar for checking availability to
be added in next version
Define waste repositories
Any stakeholder can donate materials
Find waste repository to give away waste
Retrieve waste/secondary material availability
from DCAT
Available materials must be retrieved from Direct access to SCP database or specific end-
DCAT points will be provided to DCAT
Transformation steps of materials to products
must be pushed to the DCAT
Registration and be associated with a city Registration available and address field manda-
tory
1 https://pop-machina.eu/resources/downloads/D2.5 ‘Pop-Machina report on user requirements’.
12Stakeholders' skills declaration Users can add/edit/view skills
Equipment declaration and association with Equipment can be added/edited and is associ-
makerspace and workspace ated with a workspace
Certify material/product origin/circularity/
safety/quality
Validate material/product origin/circularity/
safety/quality (on product access through the
interface and via dedicated link) A user can declare a material/product as certi-
fied. QR code to be added in next version
Provide a link and a QR code per certified
product for product verifications
Get a verification link and a QR code for every
product produced
Provide information on transformation steps
User can check a product transformation
per item/material to DCAT
Search for materials, raw or secondary by User can search for products/materials/
name/ type services
Contact actors of the maker ecosystem Chat available
Assign value to materials
Every product/material and service has a price
Assign value to products
in Euro and in Pop Tokens
Assign value to processes
Browse/search products by type/value User can search for products/materials/
services
Sell materials/products/effort/guidelines/
designs
Marketplace available. User can buy and sell
Provide a description/relevant material for
products/materials/services. Description is a
products
mandatory field
Buy materials/products/effort/guidelines/
designs
View profiles of other stakeholders
Search is available
(researchers, initiatives, organizations, etc.)
3.2 Approach and Used Technologies
This section briefly introduces the technologies used to implement the SCP, their description along
with the functionality they implement and support.
3.2.1 RESTful web API
RESTful is a de-facto standard for building interactive web applications. Such applications are part
of the World Wide Web and typically consist of multiple web resources that are accessed through a
web address over the HTTP protocol. The World Wide Web operates as a networked information
system that imposes several constraints. Agents identify objects in the system, called resources, with
Uniform Resource Identifiers (URIs). Agents represent, describe, and communicate resource state
via representations of the resource in a variety of widely-understood data formats (e.g. JSON, XML,
HTML, CSS, JPEG, PNG, etc.). Agents exchange representations via protocols that use URIs to
13identify and directly or indirectly address the agents and resources.2 The Uniform Resource Locator
(URL), colloquially termed a web address, is a special case of URIs and refers to a web resource
location on a computer network. Every URL conforms to the following syntax that consists of a
hierarchical sequence of four components:3
URL = http(s):[//authority]path[?query][#fragment]
- an optional authority component preceded by two slashes (//), comprising: an optional userinfo,
a host subcomponent, consisting of either a registered name (including but not limited to a host-
name), or an IP address and an optional port subcomponent preceded by a colon;
- a path component, consisting of a sequence of path segments separated by a slash (/);
- an optional query component preceded by a question mark (?), containing a query string of non-
hierarchical data. Its syntax is not well defined, but by convention is most often a sequence of
attribute–value pairs separated by a delimiter;
- an optional fragment component preceded by a hash (#). The fragment contains a fragment iden-
tifier providing direction to a secondary resource, such as a section heading in an article identified
by the remainder of the URI.
Web resources are reached through the internet via HTTP protocol, which is an application layer
protocol for distributed, collaborative, hypermedia information systems.4 HTTP is the foundation of
data communication for the World Wide Web, where hypertext documents include hyperlinks to
other resources that the user can easily access, for example by a mouse click or by tapping the screen
in a web browser.
3.2.2 Node.js
Node.js is an open-source, cross-platform, back-end, JavaScript-based runtime environment that
executes JavaScript code outside a web browser. It is primarily used to build network programs such
as Web servers. Node.js, an event-based technology and can take advantage of the input/output
waiting times to execute additional functions using a single-threaded event loop. Once the original
IO operation is finished, it signals completion or failure using asynchronous call-backs so the original
execution can continue. Even though JavaScript is the only language that Node.js supports natively,
many compile-to-JS languages are also available, like Dart and Typescript. It was built on top of the
Google V8 JavaScript engine since it was open-sourced under the BSD license and since JavaScript
was also a well-known language, it made Node.js accessible to the web development community.5
3.2.3 Matomo
Matomo, formerly known as Piwik, is a free open source web analytics application that runs on
PHP/MySQL webserver. It tracks online visits to one or more websites and displays reports on these
visits for analysis.6
3.2.4 Angular
Angular is a platform and framework for building single-page client applications using HTML and
TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set
2 https://www.w3.org/TR/2004/NOTE-ws-arch-20040211/#relwwwrest.
3 https://tools.ietf.org/html/rfc3986.
4 https://tools.ietf.org/html/rfc2616.
5 https://nodejs.org.
6 https://matomo.org/.
14of TypeScript libraries that you import into your apps. It is led by the Angular Team at Google and
by a community of individuals and corporations and is a complete rewrite from the same team that
built AngularJS.7
3.2.5 Spring Boot
Spring Boot is an open source Java-based framework used to create micro-services and to build stand-
alone and production ready spring applications. We used the Spring boot framework for developing
an API that stands between the SCP and the API provided by the Stellar network.
3.2.6 Blockchain as a Service (BaaS)
The blockchain (BC) implementation of the SCP is BaaS, which runs the BC as service and enables
the management of profiles and wallets through the GUI without any need from the end users to
install any other application.
3.2.7 EOS.io
EOSIO is an open-source blockchain platform that enables transparency in transactions at the speed
and scale needed for real-world requirements. EOSIO uses Delegated Proof of Stake (DPOS) as its
consensus algorithm which enables blocks to be produced exactly every 0.5 second. The EOSIO
platform also supports smart contracts, which is a piece of code that can execute on a blockchain and
keep the state of contract execution as a part of the immutable history of that blockchain instance.
As part of the work carried out to develop the SCP platform, we used smart contracts to develop a
tokenization system and an escrow-based marketplace on it.
3.2.8 Stellar
One of them is Stellar8 is an open source, decentralized network used for currencies and payments
and it is possible to create, send and trade digital representation of all forms of money. Stellar has its
own native currency called Lumens (XLM’s). Any kind of currency or token in the Stellar network is
called an asset. Stellar also offers a variety of transactions and functionalities. It is important to note
that an account in Stellar every transaction has a small fee which is equal to 0.00001 XLM’s and the
minimum balance is equal to 1 XLM. The basic functionalities and transactions supported by the
Pop-Machina Stellar API are creating and funding a test net account, creating a trustline, checking an
account’s balance, sending an asset to another account, two kinds of cross border payments and two
kinds of offers, ask offer and bid offer.
3.2.9 Security
Web resources available on the World Wide Web can be accessed by anybody via HTTP protocol
using their unique URLs. Access control to these resources can be only be imposed when enforcing
security mechanisms. Two security mechanism that are wildly used in web applications to provide
different levels of security are: (1) HTTPs and (2) web tokens.
7 https://angular.io/.
8 ‘Intro to Stellar.’ Stellar Development Foundation, 2020, https://developers.stellar.org/docs/run-core-node/.
153.2.9.1 HTTPS
Hypertext Transfer Protocol Secure (HTTPS) is an extension of the Hypertext Transfer Protocol
(HTTP). It is used for securing communication over a computer network, and it is widely used on
the Internet. In HTTPS, the communication protocol is encrypted using an additional layer based on
Transport Layer Security or, formerly, Secure Sockets Layer (SSL).9
HTTPS establish a bidirectional encrypted and secure communication channel between the client
and the server that provides protection against third party communication eavesdropping and tam-
pering.
3.2.9.2 JSON Web token
JWT is a compact claims representation format intended for space constrained environments such
as HTTP authorization headers and URI query parameters. JWTs encode claims which can be trans-
mitted as a JSON object that is used as the payload of a JSON Web Signature (JWS) structure or as
the plaintext of a JSON Web Encryption (JWE) structure. In this sense, claims can be digitally signed
or integrity protected with a Message Authentication Code (MAC) and/or encrypted. JWTs are
always represented using the JWS Compact Serialization or the JWE Compact Serialization.10
3.2.10 Privacy
SCP platform is EU GDPR compliant,11 which means that user’s personal data are in no way used
or processed in a matter that violate the legislation.
3.2.11 Docker
Docker is an open platform for developing, shipping and running applications. It enables developers
to separate applications from infrastructure so that software can be delivered quickly in packages
called containers. Containers are isolated from one another and bundle their own software, libraries
and configuration files; and they can communicate with each other through well-defined channels.
All containers are run by a single operating system kernel and therefore use fewer resources than
virtual machines.12
3.2.12 Keycloak
Keycloak is an open source identity and access management solution aimed at modern applications
and services, that allows single sign-on. Keycloak offers features such as identity brokering, social
login, user federation, client adapters, an admin console and an account management console.13
3.2.13 Presentation side web technologies
Web application content are constructed based on three major technologies: (1) HTML, (2) CSS,
(3) JavaScript.
9 https://tools.ietf.org/html/rfc2818.
10 https://tools.ietf.org/html/rfc7519.
11 https://gdpr.eu/.
12 https://docs.docker.com/get-started/overview/.
13 https://www.keycloak.org/.
163.2.13.1 Hypertext Markup Language
Hypertext Markup Language (HTML) is the standard markup language for documents designed to
be displayed in a web browser. HTML provides the means to create structured documents by denot-
ing structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
HTML specification has been continuously evolving in the last 28 years and the current last version
is HTML5.14
3.2.13.2 Cascading Style Sheets
Cascading Style Sheets (CSS) is a style sheet language for the World Wide Web. It describes the
presentation (e.g. fonts, colours and spacing) of structured documents.15 CSS is designed to enable
the separation of presentation and content, including layout, colours, and fonts.16 This separation can
improve content accessibility, provide more flexibility and control in the specification of presentation
characteristics, and enable multiple web pages to share formatting.
3.2.13.3 JavaScript
JavaScript is a programming language that conforms to the ECMAScript specification.17 It is one of
the core technologies of the World Wide Web and enables interactive web pages and an essential part
of web applications. The vast majority of websites use it for client-side page dynamic behaviour, and
all major web browsers have a dedicated JavaScript engine to execute it. JavaScript engines were
originally used only in web browsers, but they are now embedded in some servers, usually via Node.js.
3.3 Implementation
SCP platform consists of two parts: the client (front-end) and the server (back-end). The client
application is a web application and thus it is implemented using web technologies (HTML, CSS, and
JavaScript). We have chosen Angular as an implementation framework for the client-side application
due to the many capabilities that it offers. Users of the SCP platform can use any web browser to
load the content of the client application.
The server application is implemented using Node.js technology and has a direct access to SCP
database. Both server application and database run as docker applications and share the same net-
work. Server application exposes many endpoints that can be accessed using RESTful technology.
The communication between the client and server is secured using HTTPS and the client is authen-
ticated using Keycloak. The JWT token generated by Keycloak in combination with the JWT token
generated by the server side are used by the client for authentication on each access to a server
resource.
3.3.1 Client
Angular is a web application framework that follows a component-based architecture. The applica-
tion implementation is divided into independent logical and functional components. These compo-
nents can easily be replaced and decoupled as well as reused in other parts of an app. Some of the
most used components part of the client front-end are mentioned below:
14 https://www.w3.org/TR/2014/REC-html5-20141028/introduction.html#introduction.
15 https://tools.ietf.org/html/rfc2318.
16 https://en.wikipedia.org/wiki/CSS.
17 https://tc39.es/ecma262/#sec-overview.
173.3.1.1 Angular HTTP client
The front-end application communicates with all the components of the SCP over HTTP. In order
to do so, Angular built-in http client has been used. The HTTP client service offers the following
major features:
- the ability to request typed response objects;
- streamlined error handling;
- testability features;
- request and response interception.
Table 2 Angular HTTP client
checkEmailExists(email: string) {
return this.http.post(`${environment.serverPath}/auth/check-mail`,
{ email });
}
The above code is a simple function that posts an email address to the server. The server checks the
existence of that email address in the database and sends a true or false response.
3.3.1.2 Keycloak client
Keycloak-angular has been used to integrate Keycloak in client implementation. Keycloak client
requires a setting file keycloak.json, which should be located in the project root directory, with the
following content:
Table 3 Keycloak client configuration
{
"realm": "",
"auth-server-url": "
"ssl-required": "",
"resource": "",
"public-client": “”,
"confidential-port": “”
}
Every user wanting to access any Pop-Machina platform gets redirected to Keycloak login/register
page. After a successful registration or login the user is redirected back to the initial page. From that
point on, the user is authenticated for each and every Pop-Machina component.
3.3.1.3 Leaflet
It is a JavaScript library for interactive maps based on OpenStreetMaps. It was used to develop the
maps views, which are a basic component of the SCP platform. The map view has two available
interactive layers: the first one shows all available passports and the second one shows all interactions
in three different states (implementation, ideation and finished).
183.3.1.4 Translation
Angular provides the following built-in data transformation pipes that use the LOCALE_ID token
to format data according to the locale's rules:
- DatePipe: formats a date value;
- CurrencyPipe: transforms a number to a currency string;
- DecimalPipe: transforms a number into a decimal number string;
- PercentPipe: transforms a number to a percentage string.
For example, {{'projectDetails.Inprogress'|translate}} Uses the custom
pipe translate to display the translation of the word.
Table 4 Translation English
"general": {
"Started": "Started",
"Inprogress": "In-progress"
}
Table 5 Translation Greek
"general": {
"Started": "Ξεκίνησε",
"Inprogress": "Εν λειτουργεία"
}
3.3.1.5 Socket.IO
Socket.IO primarily uses the WebSocket protocol to enable real-time bidirectional communication.
WebSocket is the internet protocol that allows for full duplex communication between a server and
a client. In this sense, the server may send data to a client using a previously opened connection
without the client initiating a request. The client side application uses web socket for three main
functionalities:
- notifications (e.g. new community creation);
- chat (e.g. instant messaging);
- tokenization (e.g. pop-machina tokens).
Table 6 Socket.IO Client
client.onData = async (data, ack) => {
this.myTokens = data.content.data.amount.toFixed(2) + " " + data.con-
tent.data.symbol;
ack(); // ACK when done
};
193.3.2 Server
The server-side application is a web application that is implemented using Node.js run-time environ-
ment. It uses a set of frameworks and libraries to expose a set of endpoints. Some of the most
important mentioned below:
3.3.2.1 Express server
Express is a minimal and flexible Node.js web application framework that provides a robust set of
features for web and mobile applications. APIs. It facilitates the rapid development of Node based
Web applications. Following are some of the core features of Express framework.18
- allows to set up middlewares to respond to HTTP Requests;
- defines a routing table which is used to perform different actions based on HTTP Method and
URL;
- allows to dynamically render HTML Pages based on passing arguments to templates.
Table 7 Express server
var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('Server is running…');
})
var server = app.listen(1234, function () {
var host = server.address().address
var port = server.address().port
})
The above code snippet uses the express framework to setup a simple server with one endpoint.
3.3.2.2 JWT token
JWTs are a good way of securely transmitting information between parties because they can be signed,
which means you can be sure that the senders are who they say they are. Additionally, the structure
of a JWT allows you to verify that the content hasn't been tampered with.19
In the SCP implementation two JWT tokens are created by two different servers. The first token
is created after a successfully logging in Keycloak server. This token is sent to the server to generate
its own token. The generated token contains two main information: (1) the user profile, (2) Keycloak
token. Following this approach, the server side can verify Keycloak token to authenticate the user
without the need of continuously communicating with Keycloak server. The token payload also con-
tains various non-sensitive information about the user in order to eliminate unnecessary calls to the
server. The generated JWT token is then used by the client side on each API request, where the
HTTP authorization header should include the bearer JWT token. In addition, the same JWT token
is also used for APIs calls to blockchain and Stellar servers for client authentication.
18 https://www.tutorialspoint.com/nodejs/nodejs_express_framework.html.
19 https://auth0.com/docs/tokens/json-web-tokens.
20Table 8 JWT Token Payload
{
"exp": 1610386595.726,
"iat": 1610356595.726,
"jti": "JWTID55DOC83.IMK4G",
"sub": "",
"userId": "2f1ed88e-….",
"profile": {
"id": 1,
……
},
"keycloakToken": "lPSZVdKXxW5vp4iFIUnKzlwIjQ…."
}
This is a JWT token format after a successful login in Keycloak server and in node.js back-end server.
3.3.2.3 Sequelize
Sequelize is a powerful library in JavaScript that makes it easy to manage a SQL database (Postgres,
MySQL, MariaDB, SQLite and Microsoft SQL Server). At its core, Sequelize is an Object-Relational
Mapper, meaning that it maps an object syntax onto our database schemas. Sequelize uses Node.js
and JavaScript’s object syntax to accomplish its mapping.20
Table 9 Sequelize configuration
private _sequelize: Sequelize;
constructor() {
this._sequelize = new Sequelize({
dialect: “”,
host: “”,
port: “”,
database: “”,
username: “”,
password: “”,
modelPaths: ””,
logging: “”,
sync: {
force: “”
},
pool: {
max: “”,
min: “”,
idle: “”
}
});
}
20 https://gist.github.com/zcaceres/742744b708393c022703b615d1bffbb1.
21In order to integrate sequelize in code, we had first to define our models. A model refers to a database
table. It is declared as typescript class that has the same data type and name with the corresponding
fields of the database table.
Table 10 Sequelize model
@Table({ timestamps: true, tableName: "workstation", freezeTableName:
true })
export class Workstation extends Model {
@Column({ type: DataType.STRING, field: "name" })
name: string;
@BelongsTo(() => Makerspace)
makerspace: Makerspace;
@ForeignKey(() => Makerspace)
@Column({ type: DataType.INTEGER, field: "makerspaceId" })
makerspaceId: number;
@BelongsToMany(() => Equipment, () => WorkstationEquipment)
equipments: Equipment[];
}
The above code snippet shows the model of the workstation table, which has three fields: (1) id which
is automatically created by the sequelize, (2) the name of the workstation, (3) the makerspaceId. The
other two remaining fields, makerspace and equipment are retrieved by joining the workstation table
with the other tables, namely workstationEquipment and makerspace.
Table 11 Sequelize Getter
async getWorkstation(makerspace_Id: number, workstationId: number) {
return await Workstation.findOne({
where: {
id: workstationId,
makerspaceId: makerspace_Id
},
include: [{ model: Equipment} ]
});
}
The method getWorkstation shown above uses the workstation model to retrieve a single row from
the database table that has the specified id and makerspaceId.
The implementation of SCP automatically creates all tables and their associations. The only step that
should be done manually is to create a database.
223.3.2.4 Socket.IO
The server uses the socket.IO library for event-based and bidirectional communication with the client
and it is used for sending chat messages and notifications.
Table 12 Socket.IO Server
this.io = socketio.listen(port);
this.io.on("connection", (socket) => {
socket.on("disconnect", () => {
….
});
socket.on(SocketEvents.Authorize, (data) => {
….
});
This example shows how a web socket is created. Three event handlers are defined for connection,
disconnect and authorize events.
3.3.3 Communication
All SCP components (Keycloak, node.js server, tokenization server) communicate among themselves
using RESTful web services. The data exchanged format used in both requests and responses are
formatted in JSON.
3.3.3.1 Client with Keycloak
The SCP client communicates with Keycloak server through Keycloak client for getting tokens,
refreshing expired tokens and for fetching user profile information.
3.3.3.2 Client with Server
One of the most frequent used communication. Client communicates with the server in order to
read/write/delete/update data from the database and getting and refreshing expired tokens. All these
communications are done using http client and JSON data exchange format. In addition, web socket
is used to interact with the server for event driven communication.
3.3.3.3 Client with DAT/ OKT
The exchange of data with both components follows the same approach as the one used in SCP
client-server communication.
3.3.3.4 Client with tokenization server
Both RESTful APIs and web socket are used to communicate with the tokenization server. The
tokenization server secures the transactions by validating the tokens sent by the client. Web socket
are used to get live updates of user’s available tokens.
3.3.3.5 Matomo
Matomo exposes a set of RESTful APIs that gives read access to Matomo’s data.
3.3.3.6 Keycloak
We have used a docker instance of Keycloak that contains Keycloak server and an instance of Post-
gres database. The connection with the client is done with the help of Keycloak client as mentioned
23in Section 3.3.1. The admin panel of Keycloak was used to setup the proper settings of a Keycloak
realm and client.
3.3.3.7 Stellar
Stellar has been used to support the real money and cryptocurrency transactions in the MKP. For a
complete description of the Stellar framework and how it is interacting with the MKP and the user
profiles, please refer to Deliverable 4.3.
3.3.3.8 EOSIO
EOSIO has been used to support the tokenization of work and materials in the SCP. Smart Contracts
and the EOSIO ledger provide all the functionality needed to enable the circular economy transac-
tions and certification of the products. For a detailed description of the EOSIO and how it has been
integrated into the SCP along with the functionality it supports, please refer to Deliverable 4.3.
3.3.4 Data Model
3.3.4.1 Stellar
The complete Stellar data model is described in Deliverable 4.3. In Section 3.2.2.3 the integration
with the Stellar model is depicted.
3.3.4.2 EOSIO
The complete EOSIO data model is described in Deliverable 4.3. In Section 3.2.2.3 the integration
with the EOSIO model is depicted.
3.3.4.3 SCP data model
SCP data model is based on the D2.5 data model description and has been extensively extended to
support all the functionality needed by the makers, with the additions of the tokenization and certi-
fication processes (D4.3, D4.5). Tables such as makerspace, workstation, material, project, transfor-
mation and process are based on D2.5 model, however with changes that suite the needs of SCP
platform. On the other hand, tables such as profile, communities, posts, comments, chat_room, etc.
are related to the social part of the SCP platform. The data model is shown in the Figure 2 SCP
Database Schema.
24Figure 2 SCP Database Schema
254. Functional mockups and use case scenarios
The platform is user centric, where all the information is presented and organized in three levels. The
main navigation bar holds general information like the marketplace, maps and user related pages. The
next navigation bar is the users’ profile navigation bar, where the user has access to the main com-
ponents such as projects, makerspaces, communities, etc. The last level is each component’s distinc-
tive view that presents information’s related to that component like lists, create forms and search,
etc.
4.1 Users
Users of SCP platform can register/logs in, manage their profiles, chat and get notifications.
4.1.1 Register
Users must register first in order to access the platform. The user has to fill in the following form
with first and last name, email and a personal password.
Figure 3 SCP Registration Form
4.1.2 Login
This is the main login page of Keycloak for the SCP platform component. By logging in here, user
has access to all Pop-Machina platforms.
26Figure 4 SCP Login Form
4.1.3 Chat and notification
Users of SCP platform can exchange messages using a chat service. The chat service allows users to
create chat rooms that can have one or more participants. In addition, SCP platform supports noti-
fications, which the user can access by clicking the bell icon in the menu bar. The chat rooms are
necessary to provide a social common place for people sharing the same interest and want to chat
with others, not necessary being part of a community in the SCP.
Figure 5 SCP Chat Page
274.1.4 User profile
This is the main page of the user profile Figure 5. The about page is the main page of my profile
component. This page shows a description, skills, interests and the user’s contact information. Also,
the projects, communities, organizations and makerspaces that the user joined or created are available
in this page. The next page of profile component is the activity page, which shows the user’s timeline.
The third page of my profile component is the contacts page, which contains all the user’s friends. The
last page is the following page that has entities that the user follows (e.g. communities, projects, etc.).
Users can update all this information and have a complete overview of the information that is related
to them. The user profile gathers important information for analysis purposes and also contain the
wallet for the entity, which is created the first time the user adds a product or service to the MKP. If
the user is a hobbyist maker and participates in the circular token economy they have a wallet with
POP tokens created with EOSIO BC support, if they are professional makers and can for example
issue invoices then the user can have a Stellar BC wallet. For more information regarding wallets and
available transactions please refer to Deliverable 4.3.
Figure 6 SCP user profile page
284.2 Communities
In SCP platform a community represents a physical (organization, company, NGO’s, etc.) or virtual
entity that has members, timeline and followers. In addition, a community can have inventory and
thus can interact with the makers’ circular economy, for instance to donate materials to a makerspace.
A user that is interested in a community can follow it, in order to get notified about the community
last updates. The main connection point for a community’s members are the same interests they
share.
Any user of the SCP platform can create one or more communities. Communities that represent a
physical entity (e.g. company or municipality) are annotated with an indicator showing whether the
community is verified or not. Members of a community are assigned a role that specifies their per-
missions, for instance a community admin is the member that has a full set of permissions that allows
managing members, timeline and inventory. Additionally, communities are the place where users can
discuss about new ideas, share blueprints or other material, announce their latest projects that are
relevant to the community’s interests and act in such a way as a share point for the makers.
Figure 7 Community main page
294.3 Makerspaces
Makerspaces in SCP platform represent a physical makerspace. Each makerspace has a set of work-
stations that can be booked by users of the SCP platform. Workstations can be seen as a physical
entities that are available for booking, for instance it can be a room that a user can book or a grouping
of one or more equipment that is to be used together. Similar to communities, makerspaces have
members, which are assigned a role. The makerspace admin for instance is the manager of the
makerspace and have full set of permissions to manage members (add and assign roles to users,
modify users’ roles), to manage equipment (add, edit, delete), and to manage the makerspace’s book-
ing system and inventory.
The booking system allows a user to book a workstation for a period of time. On booking a request
is sent to the makerspace for acceptance. The makerspace administrator or other responsible role
(e.g. maintainer) has to accept the booking request in order for the process to continue. The available
time slots for booking can be checked by the users on the booking system agenda.
Each makerspace has an inventory that contains the makerspace’s available materials and products.
The makerspace administrator has the permissions to add, delete or update the content of the inven-
tory. In a case of a donation, the makerspace administrator has to accept the request in order for the
transaction to take place.
The facilities and equipment require an amount of POP tokens to be paid by the maker who wants
to use them. Additionally, makerspaces have their own wallets to be able to fund their activities.
These wallets can contain POP tokens, real money, cryptocurrency or all of them. The wallet and
payment system is supported by the EOSIO and Stellar BC networks. For more information refer to
the D4.3 deliverable. Makerspaces are also seen as the organizations that can run certification and
validation processes for the value chain (D4.5).
Figure 8 Makerspace main page
304.4 Projects
4.4.1 Project about page
Projects in SCP platform have a public page that presents general information about the project. This
information includes a description, contacts and a list of makers involved in the project. The second
page of the project component is the activity page, which shows the project time line. The last page
shows all the users following the project.
Figure 8 Project main page
Every product is produced by creating a project. A project might be as simple as a one part product,
or as complicate as a multi-part and multi-services combined product. The products and services that
are provided by all the makers, after they are added into the MKP, they can be bought by other
makers to create a collaborative final products. The project might also contain just services, for
example if a bicycle has to be refurbished and a service of a painter and a service of a repairer is
needed then this includes these services as transformation steps. The services have their own cost,
either in tokens, or in real money. The available actions include redesign, reuse, repair, refurbish,
recycle (D2.1).
314.4.2 Create project
Users can create a project by filling in a proper form. This form contains project name, title descrip-
tion, type, status, visibility (all, members, me) and start and end date.
Figure 9 Project Details Form
4.4.3 Project Dashboard
In this page the user can see general information regarding the whole project, such as all transfor-
mations, the used materials and the engaged people.
32Figure 9 Project transformations dashboard
4.4.4 Project transformations
The project transformation page presents the project’s transformation in two tabs. The first tab
shows a Gantt diagram with all project’s transformation with their start and end date. The second tab
is a table that shows the transformations and their assignments. The user can add/edit/delete trans-
formations information.
33Figure 10 Project transformations timeline
By filling the below form the user can create a new transformation. In order to create a transformation
an appropriate equipment and process must be selected. In the assign tab the user assigns the trans-
formation to a maker.
Figure 11 Project new transformation form
344.4.5 Project makers
The user can also check the project’s makers in the project’s maker page. Important information is
shown for each maker with the ability to search based on name and to sort each field.
Figure 12 Project members page
354.4.6 Project processes
Similar to transformations, the user can check the list of processes that are associated with the project.
This panel also gives the ability to the user to add a new process to the project by filling the proper
form.
Figure 13 Project processes page
4.4.7 Project materials
The project’s material page shows the required materials for the project to start. Each material
requirement is annotated with an indicator that shows whether the requirement is satisfied or is yet
to be fulfilled. In the last case the user is redirected to the inventory page to satisfy the material
requirement.
36Figure 14 Project materials page
The following figure shows the form that the user must fill in order to add new material requirement
to the project. There is also the ability to edit an already created material requirement.
Figure 15 Project new material requirement form
374.5 Marketplace
This is the page that users can buy and sell products. Multiple filtering choices are available such as
price and product category with generic search option as well. The MKP accepts transactions in POP
tokens and in some cases – such as when a professional maker sells products – in real money or
cryptocurrency. Not all the products are added in the MKP. This is due to the fact that a maker might
want to refurbish or repair a product and just keep it in their inventory for future usage or just give
it for free out of the SCP. The MKP is a central location for all the products, materials and services
for the makers’ community, and provides the means to the makers and makerspaces to access directly
interested for circular economy products consumers (D4.3). Through the MKP a maker can also
receive reputation points that will give him/her the opportunity to participate in special procedures
for the SCP, such as voting for a major change in the platform or be eligible to certify circular
economy products for herself/himself or for others (D4.5).
Figure 16 Marketplace main page
The My Listings tab is a table view of all the products, materials and services that the user has offered
in the marketplace.
38Figure 18 Marketplace My Listing Page
If the user wants to add a new offer to the market place, the new listing form should be filled, speci-
fying important information such as quantity, cost, type and category.
Figure 19 Marketplace's new offer form
39The last tab (My Orders) lists all the user’s orders with their current state (i.e. pending, completed and
send), as well as actions that the user can take on each order, such as accept, decline and delivered.
Figure 17 Marketplace my orders page
404.6 Maps
SCP platform contains a maps page, which is used to visualize circular maker passports21 and inter-
action of all makerspaces’ passports. Makerspaces will be categorized into verified and not verified.
All makerspaces are shown on the map, where verified makerspaces are indicated with a verified sign.
The map has two available interactive layers, the first shows all available makerspaces and city pass-
ports. The second layer shows all the interactions in three different states (implementation-ideation-
finished). Different visualization of maps is available (grayscale view and street view). The following
map displays the digital circular maker passports (D2.1).
Figure 18 Interactive maps
21 Metta J. & Bachus K. (2020), Mapping the circular maker movement: from a literature review to a circular maker passport (Deliverable
21). Leuven: Pop-Machina project 821479 – H2020.
415. KPIs addressed by Task 4.1
As we argued, the SCP is the umbrella for all the tools and sub-components of the Pop-Machina
ecosystem. This means that the SCP is capable to send information through the Matomo software to
any data analytics tool but also measure many other things that are flowing through the different
interactions performed on the platform. More specifically, the SCP and Task 4.1 which is for imple-
menting the D4.1 demonstrator (and this accompanying report), gathers all the information related
to the users with respect to the GDPR, but able to measure and evaluate the tokenization and mar-
ketplace, the underlying BaaS, all the data sources that send information to the SCP databases and all
the ICT tools that have been developed and included in the SCP. Thus, the SCP is fulfilling and keeps
measurements for all the above KPIs.
The relevant KPIs addressed by Task 4.1 that can be measure in the D4.1 context are:
KPI-14. “Tokenisation of Work” framework
The tokenization of work covers the three categories defined in Pop-Machina
- services;
- materials;
- products.
Analytics and measurements can be extracted for all these categories.
KPI-15. “Blockchain-as-a-Service” mechanism
The Blockchain as a service covers two BC services
- EOSIO;
- Stellar.
Analytics and measurements can be extracted for the smart contracts, number of users, calls to the
services, the wallets created and the type, the transaction types triggered, the total tokens used, calls
between the SCP front-end to the BaaS backend, total bytes exchanged between SCP and BaaS and
more.
KPI-16. Toolset for aggregating data from heterogeneous sources
We have databases supporting the SCP and two BC networks (D4.3, D4.5). We can extract analytics
for the
- MySQL databases;
- MongoDB databases;
- EOSIO ledger;
- Stellar ledger.
KPI-23. Makers involved in the co-creation of ICT tools
All the city pilots and makerspaces have been involved to define the ICT tools functionality through
individual call sessions with them.
42You can also read
