PlaDat: Placement Dating for Students Design Description

Version 1.0

PlaDat: Placement Dating for Students Version: 1.0 Design Description Date: 2020-11-03

Revision History

Date Version Description Author 2020-11-10 0.9 Initial Draft Alice Casali, Fabrizio Siciliano, Aida Denisa Opîrlesc, Anđela Zorić, Anna Bergamasco, Bassam Zabad, William Nordberg 2020-11-13 1.0 Revised and delivered document Fabrizio Siciliano, William Nordberg

Page 2

PlaDat: Placement Dating for Students Version: 1.0 Design Description Date: 2020-11-03

PlaDat: Placement Dating for Students 1

Introduction 2 Purpose of this document 3 Document organization 3 Intended Audience 3 Scope 3 Definitions and acronyms 3 Definitions 3 Acronyms and abbreviations 3 References 4

High-Level System Description 4 Frontend 4 Backend 5 Database 5

Software architecture and design 5 Overview 5 Database 6 RESTful 6 Technologies 6 Node.js 6 Flutter 7 7 7 PostgreSQL 7

Graphical User Interface 7 Mockups 7 create placement 7 Student Profile 9

Page 3

PlaDat: Placement Dating for Students Version: 1.0 Design Description Date: 2020-11-03

1. Introduction

1.1 Purpose of this document The purpose of this document is to describe and clarify the software’s design. This document contains a description of the technical architecture and examples of how the software is going to be. Its usefulness will become helpful to all stakeholders to truly understand how the team has envisioned the software and will provide a base for future development.

1.2 Document organization The document is organized as follows:

● Section 1, Introduction, describes the contents of this guide, used documentation during the developing process, etc​ . ● Section 2, High-Level System description, describes the technical architecture at a high level, without ​ ​ going into too much detail; ● Section 3, Software architecture and design, describes the architecture and the technologies that will be ​ ​ used during the development of the software, with particular emphasis on the database structure and the APIs provided by the backend; ● Section 4, Graphical User Interface, provides some examples and visual representation of what the ​ ​ final software might look like (mockups and wireframes);

1.3 Intended Audience The intended audience is: ● The supervisors of the project PlaDat; ​ ​ ● Third parties employed by the supervisors; ● The customers of the project PlaDat; ​ ​ ● Third parties employed by the customers; ● The developer team of the project PlaDat; ​ ​ ● The instructors of the Distributed Software Development course at PoliMi, University of Zagreb and MDH; ● Present and future students of the Distributed Software Development course ; ● Subsequent developers;

1.4 Scope This document is going to address all design aspects of the software, from technical to graphical, including the reasoning behind it.

1.5 Definitions and acronyms 1.5.1 Acronyms and abbreviations

Acronym or Definitions abbreviation NTR Nothing to Report. There is no information on a specific topic available or necessary. MDH Mälardalen Högskola, Sweden POLIMI Politecnico di Milano, Italy npm Node Package Manager RDBMS Relational DataBase Management System

Page 4

PlaDat: Placement Dating for Students Version: 1.0 Design Description Date: 2020-11-03

1.6 References ● https://en.wikipedia.org/wiki/Node.js ● https://en.wikipedia.org/wiki/Netlify ● https://en.wikipedia.org/wiki/Heroku ● https://www.postgresql.org/ ● https://en.wikipedia.org/wiki/PostgreSQL 2. High-Level System Description 2.1 Frontend The frontend is going to be divided into various folders in order to increase the maintainability and modularity of the code. The different folders will be: screens, which will hold all the frontend views, and widgets, which will increase the code reusability; services, which will be those controllers that handle things such as the API calls; and the models folder, which will reflect the database tables for a better frontend data handling.

Page 5

PlaDat: Placement Dating for Students Version: 1.0 Design Description Date: 2020-11-03

2.2 Backend The backend will be splitted in different layers for better code handling and for an increased modularity. The first layer will be a router, which, based on the API call, will be redirecting the flow to the corresponding controller. Such controller will be using one or more services in order to handle the call and, in the same way, each of the called services will be using one, or more, data access objects (or DAO) in order to retrieve the elements from the database, thanks to the power of the Knex.js module.

Page 6

PlaDat: Placement Dating for Students Version: 1.0 Design Description Date: 2020-11-03

3. Software architecture and design 3.1 Overview

With this type of architecture, improving the modularity of the application will be simple and this can make it easier for developers to extend features in the future. Distinguishing among the different layers allows the development team to program according to the interfaces, thus allowing an easier distribution of the work. So if tomorrow the customer decides to generate its own Front-end, he can easily do it. Our project is completely developed for a customer, that might actually use it and improve it in the future. The modularity of the project is also achieved through the implementation of RESTful API communication between two macro-module of the application.

Page 7

PlaDat: Placement Dating for Students Version: 1.0 Design Description Date: 2020-11-03

3.2 Database

3.3 Technologies 3.3.1 Node.js Node.js1 is an open-source, cross-platform, back-end, JavaScript runtime environment that lets developers use ​ JavaScript for server-side scripting. The design choices aim to optimize throughput and scalability in web applications with many I/O operations, as well as for real-time web applications (eg. real-time communication programs and browser games).

Node.js’ simpleness and fast learning curve allows all developers to rapidly increase their knowledge and skills in backend development as well as API routing and definition. Node.js has also been chosen thanks to its easy

1 https://nodejs.org/en/about/ ​

Page 8

PlaDat: Placement Dating for Students Version: 1.0 Design Description Date: 2020-11-03

2 integration with Heroku as well as its natural use with npm .​ ​

3.3.2 Flutter Flutter3 is ’s UI toolkit (which is free and open-source) for building compiled applications for mobile, ​ web, and desktop from a single codebase. It allows you fast development and it allows you to work with existing code.

We found an agreement on Flutter thanks to its malleability and fast learning curve. Also, the sponsor described PlaDat as a mobile-friendly and Flutter is one of the best cross-platform technologies.

3.3.3 Heroku Heroku4 is a platform (PaaS) supporting several programming languages. It has features for a ​ ​ developer to build, run and scale applications in a similar manner across most languages.

We chose Heroku because it supports Node.js and some element of the team has already used it so it was a familiar technology. Also, it has a free plan that we can adopt for our project.

3.3.4 Netlify Netlify is a based company that offers hosting and serverless backend services for web applications and static websites. Among other features, Netlify offers continuous deployment from Git, serverless form handling, support for AWS Lambda functions and full integration with Let’s Encrypt.

We decided to use Netlify as its free plan allows for an easy frontend hosting configuration and it is easily scalable for future use. Deployments to Netlify will occur only from the main branch of the repository on Github and if, and only if, the contents of the codebase of said frontend repository have been changed from the previous deployments.

3.3.5 PostgreSQL PostgreSQL5 (also known as Postgres) is a powerful, open-source object-relational database system. It is an ​ ​ ​ advanced version of SQL that provides support to different functions of it. ​

The decision on the intention of using PostgreSQL has been taken upon its powerfulness over other RDBMS, as well as its easy integration with other already chosen stack technologies like Heroku.

2 https://en.wikipedia.org/wiki/Npm_(software) ​ 3 https://flutter.dev/ ​ 4 https://en.wikipedia.org/wiki/Heroku ​ 5 https://www.postgresql.org/about/ ​

Page 9

PlaDat: Placement Dating for Students Version: 1.0 Design Description Date: 2020-11-03

4. Graphical User Interface 4.1 Mockups 4.1.1 Create placement mockup

Page 10

PlaDat: Placement Dating for Students Version: 1.0 Design Description Date: 2020-11-03

4.1.2 Student Profile mockup

Page 11

PlaDat: Placement Dating for Students Version: 1.0 Design Description Date: 2020-11-03

4.1.3 Placement mockup

Page 12

PlaDat: Placement Dating for Students Version: 1.0 Design Description Date: 2020-11-03

Page 13

PlaDat: Placement Dating for Students Version: 1.0 Design Description Date: 2020-11-03

4.1.4 Receive match mockup

Page 14

PlaDat: Placement Dating for Students Version: 1.0 Design Description Date: 2020-11-03

4.1.5 Chat mockup

Page 15