slides/TB.html at main · SWException/slides · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>TB | SWException</title>

    <link rel="stylesheet" href="dist/reveal.css">
    <link rel="stylesheet" href="dist/theme/white.css">

    <!-- Printing and PDF exports -->
    <script>
      var link = document.createElement('link');
      link.rel = 'stylesheet';
      link.type = 'text/css';
      link.href = window.location.search.match(/print-pdf/gi) ? 'css/print/pdf.css' : 'css/print/paper.css';
      document.getElementsByTagName('head')[0].appendChild(link);
    </script>
  </head>

  <body>
    <div class="reveal">
      <div class="slides">
        <section data-markdown data-separator="^\r?\n---\r?\n$" data-separator-vertical="^\n\n"
          data-background-image="imgs/sfondo.png" data-separator-notes="^Note:">
          <textarea data-template>

# SWException

### Corso di Ingegneria del Software

Università degli Studi di Padova

A.A. 2020/2021

Laurea triennale in informatica

<em>Technology Baseline  - 01/03/2021</em>


<img src="imgs/emporio.png" width="500em">

Piattaforma di e-commerce in stile serverless

---

## Tecnologie comuni tra i micro servizi

<img src="imgs/tb/Serverless.png" width="200em">
<img src="imgs/tb/Typescript.png" width="200em">
<img src="imgs/tb/Lambda.png" width="200em"/>


### Framework serverless

Il principale strumento adottato per lo sviluppo di EmporioLambda è il framework serverless nella versione open-source.

Questo facilita estremamente la definizione delle API dei vari micro servizi e il deploy di questi nell'infrastruttura cloud di AWS.


### Linguaggio typescript

Il linguaggio di programmazione adottato per tutte le parti dell'applicazione è TypeScript.

Questo, rispetto a JavaScript, offre un controllo sui tipi in fase di compilazione (quindi come controllo statico).


### AWS Lambda

Il servizio AWS Lambda serve ad eseguire codice on demand evitando di avere un server vero e proprio in attesa di richieste 24/24h.

Per questo il costo fatturato viene calcolato in base al tempo di esecuzione di queste funzioni.
<!-- TODO -->

---

## Frontend (EML-FE)

<img src="imgs/tb/nextjs.png" width="200em"/>
<img src="imgs/tb/CloudFront.png" width="200em"/>


### Next.js

Next.js è un Framework basato su React con la funzione integrata per il pre-rendering. Utilizzando sia il Server Side Rendering (SSR)
che la Static Generation (SSG) l'HTML necessario per il rendering viene generato sul lato server e inviato al lato client.
Oltre a questo supporta Typescript e fornisce un sistema di routing dinamico basato sulle "pages".


### CloudFront

Grazie a serverless, il deploy avviene in maniera semplice ed ottimizzata direttamente sul servizio di AWS CloudFront che mette a disposizione un url contenente il frontend.
<!-- TODO: inserire motivazioni scelta tecnologie front end -->

---

## Backend (EML-BE)

<img src="imgs/tb/API.png" width="200em"/>
<img src="imgs/tb/DynamoDB.png" width="200em"/>
<img src="imgs/tb/Cognito.jpg" width="200em"/>
<img src="imgs/tb/stripe.png" width="200em"/>


### API Gateway

È il servizio di AWS che permette il collegamento tra le funzioni Lambda e le API esposte.


### DynamoDB

Questo tipo di database è stato scelto in quanto si integra perfettamente con gli altri servizi AWS.

Inoltre è un DB completamente gestito da AWS che offre attraverso una semplice configurazione scalabilità, sicurezza ed elevate prestazioni a qualsiasi scala.


### Amazon Cognito

La gestione dell'autenticazione e delle credenziali è affidata a Cognito.

È perfettamente integrato con gli altri servizi AWS, offrendo un livello di sicurezza maggiore
di qualsiasi infrastruttura eventualmente creata da noi.

Inoltre il tempo necessario ad implementarlo è molto basso.


### Stripe

Per la gestione dei pagamenti ci siamo affidati alla piattaforma esterna Stripe.

In questo modo non dovremo preoccuparci di rispettare gli standard di sicurezza previsti per le piattaforme
che gestiscono i pagamenti in modo autonomo.

---

##  Cosa abbiamo realizzato


Nel nostro PoC abbiamo inserito:

- gestione dell'autenticazione con Amazon Cognito
- visualizzazione di un carrello predefinito con fetch dei dati da DynamoDB
- checkout del carrello con Stripe

---

## Grazie dell'attenzione!

	        </textarea>
        </section>

      </div>
    </div>

    <script src="dist/reveal.js"></script>
    <script src="plugin/markdown/markdown.js"></script>
    <link rel="stylesheet" href="plugin/highlight/zenburn.css">
    <script src="plugin/highlight/highlight.js"></script>
    <script src="plugin/notes/notes.js"></script>
    <script>
      Reveal.initialize({
        plugins: [RevealMarkdown, RevealHighlight, RevealNotes],
        slideNumber: 'c/t',
        showSlideNumber: 'all'
      });
    </script>
  </body>

</html>